/* ==========================================================================
   ccprime — wallet dashboard + app-view styles.
   Layers on top of the shared Blueprint design system (style.css): every
   token is referenced with a fallback so the sheet is safe to load alone.
   All classes are ccp-prefixed to avoid colliding with the landing styles.
   ========================================================================== */

:root {
  --ccp-n50: var(--n50, #fff);
  --ccp-n100: var(--n100, #f5f5f7);
  --ccp-n200: var(--n200, #e6e6e6);
  --ccp-n300: var(--n300, #d9d9d9);
  --ccp-n600: var(--n600, #56555c);
  --ccp-n900: var(--n900, #18171f);
  --ccp-blue: var(--blue, #5674e1);
  --ccp-teal: var(--teal, #59b3d4);
  --ccp-pos: var(--pos, #2e7d4f);
  --ccp-neg: var(--neg, #b3423a);
  --ccp-border: var(--border, #d9d9d9);
  --ccp-radius: var(--radius, .125rem);
  --ccp-font: var(--font, Manrope, sans-serif);
  --ccp-mono: var(--mono, "Geist Mono", monospace);
  --ccp-shadow: var(--shadow-2, 0 2px 6px rgba(24,23,31,.05), 0 10px 28px rgba(24,23,31,.07));
}

/* every number surface is mono + tabular */
.ccp-num, .ccp-amt, .ccp-usd, .ccp-total, .ccp-pid, .ccp-hash,
.ccp-table td.num, .ccp-quote-row b, .ccp-phrase li, .ccp-kv b {
  font-family: var(--ccp-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- app shell -------------------------------------------------- */
.ccp-app { width: 84vw; max-width: 100rem; margin: 0 auto; padding: 2.2rem 0 6rem; font-family: var(--ccp-font); color: var(--ccp-n900); }
@media (max-width: 900px) { .ccp-app { width: auto; padding: 1.4rem 1.1rem 4rem; } }
html.ccp-app-active .hero, html.ccp-app-active .ccp-landing { display: none !important; }

.ccp-subnav { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--ccp-border); margin-bottom: 1.8rem; }
.ccp-subnav a { font-family: var(--ccp-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ccp-n600); text-decoration: none; padding: .65rem .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ccp-subnav a:hover { color: var(--ccp-n900); }
.ccp-subnav a.on { color: var(--ccp-n900); border-bottom-color: var(--ccp-blue); }
.ccp-subnav .ccp-subnav-note { margin-left: auto; align-self: center; font-family: var(--ccp-mono); font-size: .62rem; color: var(--ccp-n600); padding: .4rem 0; }

.ccp-h { font-size: clamp(1.28rem, .95rem + .52vw, 1.58rem); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .3rem; }
.ccp-sub { font-size: .78rem; color: var(--ccp-n600); margin: 0 0 1.4rem; max-width: 46rem; line-height: 1.55; }
.ccp-stag { font-family: var(--ccp-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ccp-n600); margin-bottom: .55rem; }
.ccp-stag .sl { color: var(--ccp-blue); }

/* preview affordance — phase-1 stub data is labeled, never silently final */
.ccp-pv { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--ccp-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); border: 1px dashed var(--ccp-n300); border-radius: var(--ccp-radius); padding: .12rem .38rem; vertical-align: middle; }
.ccp-pv::before { content: ""; width: .4em; height: .4em; border-radius: 50%; background: var(--ccp-teal); }

/* ---------- cards / grid ---------------------------------------------- */
.ccp-card { background: var(--ccp-n50); border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); padding: 1.3rem 1.4rem; }
.ccp-grid { display: grid; gap: 1rem; }
.ccp-grid-2 { grid-template-columns: 1fr 1fr; }
.ccp-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ccp-grid-2, .ccp-grid-3 { grid-template-columns: 1fr; } }

.ccp-kv { display: flex; flex-direction: column; gap: .2rem; }
.ccp-kv .k { font-family: var(--ccp-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); }
.ccp-kv b { font-size: 1.05rem; font-weight: 500; }

.ccp-note { font-size: .72rem; color: var(--ccp-n600); line-height: 1.55; }
.ccp-err { font-family: var(--ccp-mono); font-size: .68rem; color: var(--ccp-neg); border: 1px solid color-mix(in srgb, var(--ccp-neg) 35%, transparent); background: color-mix(in srgb, var(--ccp-neg) 5%, var(--ccp-n50)); border-radius: var(--ccp-radius); padding: .7rem .9rem; margin: .8rem 0; }
.ccp-ok { font-family: var(--ccp-mono); font-size: .68rem; color: var(--ccp-pos); }
.ccp-msg { font-family: var(--ccp-mono); font-size: .66rem; color: var(--ccp-n600); min-height: 1.1rem; margin-top: .6rem; }
.ccp-msg.err { color: var(--ccp-neg); }
.ccp-msg.ok { color: var(--ccp-pos); }

/* ---------- portfolio header ------------------------------------------ */
.ccp-port { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ccp-total { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.ccp-total-sub { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; font-family: var(--ccp-mono); font-size: .66rem; color: var(--ccp-n600); }
.ccp-chg-pos { color: var(--ccp-pos); }
.ccp-chg-neg { color: var(--ccp-neg); }
.ccp-eye { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); color: var(--ccp-n600); cursor: pointer; }
.ccp-eye:hover { border-color: var(--ccp-n900); color: var(--ccp-n900); }
.ccp-hidden-bal { letter-spacing: .1em; }

/* action rail */
.ccp-rail { display: flex; gap: .6rem; flex-wrap: wrap; }
.ccp-rail-btn { display: inline-flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 5.2rem; padding: .8rem .6rem .65rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); cursor: pointer; font-family: var(--ccp-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ccp-n900); transition: border-color .15s, transform .15s; }
.ccp-rail-btn:hover { border-color: var(--ccp-n900); transform: translateY(-1px); }
.ccp-rail-btn svg { width: 1.05rem; height: 1.05rem; color: var(--ccp-blue); }
.ccp-rail-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- asset rows ------------------------------------------------- */
.ccp-assets { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); overflow: hidden; }
.ccp-assets-hd { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; border-bottom: 1px solid var(--ccp-border); font-family: var(--ccp-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); }
.ccp-asset { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--ccp-n200); }
.ccp-asset:last-child { border-bottom: 0; }
.ccp-asset:hover { background: var(--ccp-n100); }
.ccp-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n100); }
.ccp-mark svg { width: 1.15rem; height: 1.15rem; }
.ccp-asset-nm { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ccp-asset-nm .sym { font-weight: 600; font-size: .82rem; }
.ccp-asset-nm .lbl { font-size: .64rem; color: var(--ccp-n600); }
.ccp-asset-nm .px { font-family: var(--ccp-mono); font-size: .62rem; color: var(--ccp-n600); }
.ccp-spark { width: 7.5rem; height: 2rem; }
.ccp-asset-val { display: flex; flex-direction: column; align-items: flex-end; gap: .12rem; }
.ccp-amt { font-size: .82rem; }
.ccp-usd { font-size: .64rem; color: var(--ccp-n600); }
@media (max-width: 700px) { .ccp-asset { grid-template-columns: auto 1fr auto; } .ccp-spark { display: none; } }

/* ---------- modal / sheet ---------------------------------------------- */
.ccp-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(14, 14, 21, .46); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 4vh; overflow-y: auto; backdrop-filter: blur(2px); }
.ccp-dialog { width: 100%; max-width: 27rem; background: var(--ccp-n50); border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); box-shadow: var(--ccp-shadow); padding: 1.7rem 1.6rem 1.5rem; position: relative; animation: ccp-pop .18s cubic-bezier(.16, 1, .3, 1); font-family: var(--ccp-font); color: var(--ccp-n900); }
.ccp-dialog.wide { max-width: 33rem; }
@keyframes ccp-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ccp-dialog { animation: none; } }
.ccp-x { position: absolute; top: .65rem; right: .65rem; width: 1.7rem; height: 1.7rem; border: 1px solid transparent; border-radius: var(--ccp-radius); background: none; color: var(--ccp-n600); font-size: 1rem; line-height: 1; cursor: pointer; }
.ccp-x:hover { border-color: var(--ccp-border); color: var(--ccp-n900); }
.ccp-dlg-h { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; padding-right: 1.6rem; }
.ccp-dlg-sub { font-size: .72rem; color: var(--ccp-n600); line-height: 1.55; margin: 0 0 1.1rem; }

/* form controls */
.ccp-in, .ccp-sel { width: 100%; height: 2.7rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); color: var(--ccp-n900); font-family: var(--ccp-mono); font-size: .74rem; padding: 0 .8rem; outline: none; }
.ccp-in:focus, .ccp-sel:focus { border-color: var(--ccp-blue); box-shadow: 0 0 0 3px rgba(86, 116, 225, .14); }
.ccp-in::placeholder { color: var(--ccp-n600); opacity: .7; }
textarea.ccp-in { height: auto; min-height: 4.6rem; padding: .6rem .8rem; resize: vertical; line-height: 1.5; }
.ccp-field { margin-bottom: .85rem; }
.ccp-field label { display: block; font-family: var(--ccp-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); margin-bottom: .35rem; }
.ccp-row { display: flex; gap: .6rem; }
.ccp-row > * { flex: 1; }
.ccp-btn-w { width: 100%; justify-content: center; }
.ccp-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.ccp-actions .btn { flex: 1; }

/* auth modal specifics */
.ccp-auth-mark { display: flex; justify-content: center; margin-bottom: .9rem; }
.ccp-auth-mark .idn, .ccp-auth-mark .ccp-idn { width: 3rem; height: 3rem; }
.ccp-auth-div { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; color: var(--ccp-n600); font-family: var(--ccp-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.ccp-auth-div::before, .ccp-auth-div::after { content: ""; flex: 1; height: 1px; background: var(--ccp-n200); }
.ccp-oauth { display: flex; flex-direction: column; gap: .5rem; }
.ccp-oauth-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; height: 2.7rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); color: var(--ccp-n900); font-family: var(--ccp-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.ccp-oauth-btn:hover { border-color: var(--ccp-n900); }
.ccp-fine { font-size: .64rem; color: var(--ccp-n600); line-height: 1.6; margin-top: 1rem; text-align: center; }
.ccp-fine a { color: var(--ccp-blue); text-decoration: none; cursor: pointer; }
.ccp-cfbox { margin: .7rem 0 .2rem; min-height: 0; display: flex; justify-content: center; }

/* ---------- recovery phrase -------------------------------------------- */
.ccp-phrase { list-style: none; counter-reset: w; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 1rem 0; padding: 0; }
@media (max-width: 520px) { .ccp-phrase { grid-template-columns: repeat(2, 1fr); } }
.ccp-phrase li { counter-increment: w; font-size: .68rem; border: 1px solid var(--ccp-n200); border-radius: var(--ccp-radius); background: var(--ccp-n100); padding: .42rem .5rem .42rem .3rem; display: flex; align-items: baseline; gap: .4rem; }
.ccp-phrase li::before { content: counter(w); font-size: .56rem; color: var(--ccp-n600); min-width: 1.3rem; text-align: right; }
.ccp-phrase-warn { border: 1px solid color-mix(in srgb, var(--ccp-neg) 30%, transparent); background: color-mix(in srgb, var(--ccp-neg) 4%, var(--ccp-n50)); border-radius: var(--ccp-radius); padding: .7rem .85rem; font-size: .68rem; line-height: 1.55; color: var(--ccp-n900); }
.ccp-gate { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0 .2rem; font-size: .72rem; line-height: 1.5; cursor: pointer; }
.ccp-gate input { margin-top: .2rem; accent-color: var(--ccp-blue); }

/* ---------- receive / QR ----------------------------------------------- */
.ccp-qr { display: flex; justify-content: center; margin: .4rem 0 1rem; }
.ccp-qr svg { width: min(15rem, 70vw); height: auto; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: #fff; padding: .55rem; }
.ccp-pidbox { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n100); padding: .7rem .8rem; display: flex; gap: .6rem; align-items: flex-start; }
.ccp-pid { flex: 1; font-size: .64rem; line-height: 1.5; word-break: break-all; }
.ccp-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); color: var(--ccp-n900); font-family: var(--ccp-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; padding: .35rem .55rem; cursor: pointer; }
.ccp-copy:hover { border-color: var(--ccp-n900); }
.ccp-copy.ok { color: var(--ccp-pos); border-color: var(--ccp-pos); }

/* ---------- swap sheet -------------------------------------------------- */
.ccp-swap-box { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n100); padding: .8rem .9rem; }
.ccp-swap-box + .ccp-swap-box { margin-top: 0; }
.ccp-swap-top { display: flex; justify-content: space-between; font-family: var(--ccp-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); margin-bottom: .4rem; }
.ccp-swap-main { display: flex; gap: .6rem; align-items: center; }
.ccp-swap-main .ccp-in { flex: 1; border: 0; background: none; font-size: 1.15rem; padding: 0; height: 2rem; }
.ccp-swap-main .ccp-in:focus { box-shadow: none; }
.ccp-swap-main .ccp-sel { width: auto; min-width: 6.2rem; height: 2.15rem; font-size: .68rem; }
.ccp-flip-wrap { display: flex; justify-content: center; margin: .45rem 0; }
.ccp-flip { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); cursor: pointer; color: var(--ccp-n900); }
.ccp-flip:hover { border-color: var(--ccp-blue); color: var(--ccp-blue); }
.ccp-quote { border: 1px dashed var(--ccp-n300); border-radius: var(--ccp-radius); padding: .65rem .85rem; margin-top: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.ccp-quote-row { display: flex; justify-content: space-between; font-size: .66rem; color: var(--ccp-n600); }
.ccp-quote-row b { color: var(--ccp-n900); font-weight: 400; }

/* ---------- tables (orders / history / keys) ---------------------------- */
.ccp-tblwrap { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); overflow-x: auto; }
.ccp-table { width: 100%; border-collapse: collapse; font-size: .7rem; }
.ccp-table th { text-align: left; font-family: var(--ccp-mono); font-size: .58rem; font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--ccp-n600); padding: .6rem .9rem; border-bottom: 1px solid var(--ccp-border); white-space: nowrap; }
.ccp-table td { padding: .62rem .9rem; border-bottom: 1px solid var(--ccp-n200); vertical-align: middle; }
.ccp-table tr:last-child td { border-bottom: 0; }
.ccp-table tbody tr:hover { background: var(--ccp-n100); }
.ccp-table td.num, .ccp-table th.num { text-align: right; }
.ccp-table .ccp-hash a { color: var(--ccp-blue); text-decoration: none; }
.ccp-empty { padding: 2.2rem 1rem; text-align: center; color: var(--ccp-n600); font-size: .72rem; }
.ccp-empty b { display: block; font-family: var(--ccp-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ccp-n900); margin-bottom: .3rem; }
.ccp-side-buy { color: var(--ccp-pos); font-family: var(--ccp-mono); font-size: .62rem; text-transform: uppercase; }
.ccp-side-sell { color: var(--ccp-neg); font-family: var(--ccp-mono); font-size: .62rem; text-transform: uppercase; }
.ccp-badge { display: inline-block; font-family: var(--ccp-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); padding: .12rem .4rem; color: var(--ccp-n600); }
.ccp-badge.lock { border-color: color-mix(in srgb, var(--ccp-blue) 40%, transparent); color: var(--ccp-blue); }
.ccp-linkbtn { background: none; border: none; padding: 0; color: var(--ccp-blue); font-family: var(--ccp-mono); font-size: .62rem; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.ccp-linkbtn:hover { text-decoration: underline; }
.ccp-linkbtn.danger { color: var(--ccp-neg); }

/* history rows */
.ccp-hist { display: flex; flex-direction: column; }
.ccp-hist-row { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid var(--ccp-n200); }
.ccp-hist-row:last-child { border-bottom: 0; }
.ccp-hist-ic { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); color: var(--ccp-n600); }
.ccp-hist-ic.in { color: var(--ccp-pos); border-color: color-mix(in srgb, var(--ccp-pos) 35%, transparent); }
.ccp-hist-ic.out { color: var(--ccp-n900); }
.ccp-hist-meta { min-width: 0; }
.ccp-hist-t { font-size: .74rem; font-weight: 600; }
.ccp-hist-sub { font-family: var(--ccp-mono); font-size: .6rem; color: var(--ccp-n600); word-break: break-all; margin-top: .15rem; line-height: 1.45; }
.ccp-hist-amt { text-align: right; }
.ccp-hist-amt .a { font-family: var(--ccp-mono); font-size: .74rem; font-variant-numeric: tabular-nums; }
.ccp-hist-amt .a.in { color: var(--ccp-pos); }
.ccp-hist-amt .v { display: block; font-family: var(--ccp-mono); font-size: .58rem; color: var(--ccp-n600); margin-top: .12rem; }
.ccp-verify { font-family: var(--ccp-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ccp-blue); text-decoration: none; }
.ccp-verify:hover { text-decoration: underline; }

/* ---------- onboarding gate -------------------------------------------- */
.ccp-onboard { max-width: 34rem; margin: 0 auto; text-align: center; padding: 2.5rem 0; }
.ccp-steps { display: flex; flex-direction: column; gap: .55rem; margin: 1.3rem 0; text-align: left; }
.ccp-step { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); padding: .7rem .85rem; font-size: .72rem; line-height: 1.5; }
.ccp-step .n { font-family: var(--ccp-mono); font-size: .6rem; color: var(--ccp-blue); min-width: 1.2rem; padding-top: .15rem; }
.ccp-step.done { border-color: color-mix(in srgb, var(--ccp-pos) 35%, transparent); }
.ccp-step.done .n { color: var(--ccp-pos); }

/* ---------- security page ---------------------------------------------- */
.ccp-sec-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--ccp-n200); }
.ccp-sec-row:last-child { border-bottom: 0; }
.ccp-sec-t { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.ccp-sec-d { font-size: .68rem; color: var(--ccp-n600); line-height: 1.55; max-width: 34rem; }
.ccp-sec-row .btn { flex-shrink: 0; }
.ccp-on { display: inline-block; font-family: var(--ccp-mono); font-size: .56rem; color: var(--ccp-pos); border: 1px solid color-mix(in srgb, var(--ccp-pos) 40%, transparent); border-radius: var(--ccp-radius); padding: .08rem .35rem; text-transform: uppercase; letter-spacing: .05em; margin-left: .35rem; }
.ccp-off { display: inline-block; font-family: var(--ccp-mono); font-size: .56rem; color: var(--ccp-n600); border: 1px solid var(--ccp-n300); border-radius: var(--ccp-radius); padding: .08rem .35rem; text-transform: uppercase; letter-spacing: .05em; margin-left: .35rem; }
.ccp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .9rem 0 1.6rem; }
@media (max-width: 900px) { .ccp-paths { grid-template-columns: 1fr; } }
.ccp-path { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); padding: .95rem 1rem; }
.ccp-path .t { font-family: var(--ccp-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.ccp-path .t .l { color: var(--ccp-blue); }
.ccp-path .d { font-size: .66rem; color: var(--ccp-n600); line-height: 1.55; }
.ccp-pklist, .ccp-sesslist { display: flex; flex-direction: column; gap: .45rem; margin-top: .7rem; width: 100%; }
.ccp-pkrow { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--ccp-n200); border-radius: var(--ccp-radius); padding: .55rem .75rem; font-size: .7rem; }
.ccp-pkrow .ic { color: var(--ccp-blue); }
.ccp-pkrow .meta { flex: 1; min-width: 0; }
.ccp-pkrow .sub { display: block; font-family: var(--ccp-mono); font-size: .58rem; color: var(--ccp-n600); margin-top: .1rem; }

/* ---------- account dashboard (keys / usage / billing) ------------------ */
.ccp-dash-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 .8rem; flex-wrap: wrap; }
.ccp-dash-hd h2 { font-size: .95rem; font-weight: 600; margin: 0; }
.ccp-dash-hd .ccp-note { font-size: .64rem; }
.ccp-idcard { display: flex; align-items: center; gap: 1rem; }
.ccp-idcard .ccp-idn, .ccp-idcard img { width: 3.1rem; height: 3.1rem; border-radius: var(--ccp-radius); }
.ccp-idcard .nm { font-weight: 600; font-size: .88rem; }
.ccp-idcard .em { font-family: var(--ccp-mono); font-size: .64rem; color: var(--ccp-n600); margin-top: .15rem; word-break: break-all; }
.ccp-keyreveal { border: 1px solid color-mix(in srgb, var(--ccp-blue) 40%, transparent); background: color-mix(in srgb, var(--ccp-blue) 4%, var(--ccp-n50)); border-radius: var(--ccp-radius); padding: .9rem 1rem; margin: .8rem 0; }
.ccp-keyreveal .h { font-size: .7rem; font-weight: 600; margin-bottom: .5rem; }
.ccp-keybox { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); padding: .55rem .7rem; }
.ccp-keybox code { flex: 1; font-family: var(--ccp-mono); font-size: .66rem; word-break: break-all; }
.ccp-chart { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); padding: 1rem 1.1rem; position: relative; }
.ccp-chart svg { width: 100%; height: auto; display: block; }
.ccp-chart .ax { stroke: var(--ccp-n200); stroke-width: 1; }
.ccp-chart .axl { font-family: var(--ccp-mono); font-size: 9px; fill: var(--ccp-n600); }
.ccp-chart-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ccp-chart-stats .s { display: flex; flex-direction: column; gap: .1rem; }
.ccp-chart-stats .v { font-family: var(--ccp-mono); font-size: .86rem; font-variant-numeric: tabular-nums; }
.ccp-chart-stats .l { font-family: var(--ccp-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ccp-n600); }
.ccp-tip { position: absolute; pointer-events: none; background: var(--ccp-n900); color: #fff; font-family: var(--ccp-mono); font-size: .6rem; padding: .3rem .5rem; border-radius: var(--ccp-radius); white-space: nowrap; transform: translate(-50%, -130%); opacity: 0; transition: opacity .12s; }
.ccp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.ccp-plan { border: 1px solid var(--ccp-border); border-radius: var(--ccp-radius); background: var(--ccp-n50); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.ccp-plan.cur { border-color: var(--ccp-blue); }
.ccp-plan .nm { font-family: var(--ccp-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.ccp-plan .pr { font-size: 1.3rem; font-family: var(--ccp-mono); font-variant-numeric: tabular-nums; }
.ccp-plan .pr span { font-size: .62rem; color: var(--ccp-n600); }
.ccp-plan ul { margin: .2rem 0 .6rem; padding-left: 1rem; font-size: .66rem; color: var(--ccp-n600); line-height: 1.7; }
.ccp-banner { border: 1px solid color-mix(in srgb, var(--ccp-pos) 40%, transparent); background: color-mix(in srgb, var(--ccp-pos) 5%, var(--ccp-n50)); border-radius: var(--ccp-radius); padding: .75rem .95rem; font-size: .72rem; margin-bottom: 1.1rem; }
.ccp-banner.warn { border-color: color-mix(in srgb, var(--ccp-neg) 35%, transparent); background: color-mix(in srgb, var(--ccp-neg) 4%, var(--ccp-n50)); }

/* ---------- identicon / avatar ----------------------------------------- */
.ccp-idn { display: inline-flex; width: 2.05rem; height: 2.05rem; border-radius: var(--ccp-radius); overflow: hidden; border: 1px solid var(--ccp-n200); flex-shrink: 0; }
.ccp-idn svg { width: 100%; height: 100%; display: block; }
.ccp-avimg { width: 2.05rem; height: 2.05rem; border-radius: var(--ccp-radius); object-fit: cover; display: block; flex-shrink: 0; }
#acct .acct-btn .ccp-idn, #acct .acct-btn .ccp-avimg { width: 100%; height: 100%; border: 0; border-radius: 0; }
#acct .acct-menu .ccp-acct-hd .ccp-idn, #acct .acct-menu .ccp-acct-hd .ccp-avimg { width: 2.05rem; height: 2.05rem; }
.ccp-idcard .ccp-avimg { width: 3.1rem; height: 3.1rem; }

/* account menu affordances (items themselves; container styled by the design system) */
#acct .acct-menu a, #acct .acct-menu button { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border: 0; background: none; border-radius: var(--ccp-radius); font-family: var(--ccp-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ccp-n900); cursor: pointer; text-decoration: none; }
#acct .acct-menu a:hover, #acct .acct-menu button:hover { background: var(--ccp-n100); }
#acct .acct-menu .ccp-acct-hd { display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem .7rem; border-bottom: 1px solid var(--ccp-n200); margin-bottom: .35rem; }
#acct .acct-menu .ccp-acct-hd .nm { font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--ccp-font); word-break: break-all; }
#acct .acct-menu .ccp-acct-hd .pl { font-family: var(--ccp-mono); font-size: .56rem; color: var(--ccp-n600); text-transform: uppercase; margin-top: .1rem; }
#acct .acct-out { color: var(--ccp-neg); }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* spinner */
.ccp-spin { display: inline-block; width: .9rem; height: .9rem; border: 2px solid var(--ccp-n300); border-top-color: var(--ccp-blue); border-radius: 50%; animation: ccp-rot .7s linear infinite; vertical-align: -.15rem; margin-right: .45rem; }
@keyframes ccp-rot { to { transform: rotate(360deg); } }
.ccp-loading { padding: 2.2rem 1rem; text-align: center; color: var(--ccp-n600); font-family: var(--ccp-mono); font-size: .68rem; }