@font-face{
    font-family:'Inter';
    src:url('/assets/fonts/InterVariable.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:'Inter';
    src:url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
    font-weight:100 900;
    font-style:italic;
    font-display:swap;
}

/* Metric-matched fallback: while InterVariable loads, text is laid out in Arial
   adjusted to occupy Inter's exact box, so the swap to Inter causes no reflow.
   Overrides are Inter's real typo metrics (ascent 1984, descent 494, lineGap 0
   over 2048 upm) scaled by size-adjust, so the fallback line box equals Inter's.
   This kills the hero layout shift (worst on the 64px headline) without the
   cold-load fallback-flash that font-display:optional would trade for it. */
@font-face{
    font-family:'Inter Fallback';
    src:local('Arial');
    font-weight:100 900;
    font-style:normal;
    ascent-override:90.44%;
    descent-override:22.52%;
    line-gap-override:0.00%;
    size-adjust:107.12%;
}

:root{
    --ink:#12121a;
    --ink-rgb:18,18,26;          /* ink hue as a triple, for translucent ink overlays/borders */
    --shadow-rgb:45,37,86;       /* fixed elevation-shadow hue (deep neutral purple); not accent-tinted, so shadows read the same in chrome and on every profile */
    --ink-2:#302c45;
    --ink-3:#3f3a52;
    --ink-4:#4f4b60;
    --ink-5:#5a556d;
    --muted:#5f5c6e;
    --card:rgba(255,255,255,.8);
    --brand:#7c3cff;
    --brand-ink:var(--brand);   /* accent darkened to >=4.5:1 on white, for accent-as-text; overridden per-profile on the public card */
    --brand-on:#fff;            /* readable text color ON the raw accent fill (buttons); overridden per-profile on the public card */
    --hairline:rgba(var(--ink-rgb),.07);
    --hairline-strong:rgba(var(--ink-rgb),.10);
    --field-border:#8e8e98;   /* form-control boundary, 3.24:1 on white (WCAG 1.4.11) */
    --line:var(--hairline-strong); /* generic hairline border alias */
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --brand-rgb:124,60,255;
    --brand2:#00d4ff;
    --brand2-rgb:0,212,255;
    --success:#22c55e;
    --success-rgb:34,197,94;     /* trust green as a triple, for rgba() surfaces; fixed (never accent-overridden) so verification reads the same on every profile */
    --success-deep:#0f7a39;
    --danger:#ef4444;
    --danger-rgb:239,68,68;      /* error red as a triple, for rgba() surfaces */
    --danger-deep:#cf2020;
    --brand-deep:#4f2bd4;
    --ink-deep:#11121a;          /* dark surfaces: buttons, toasts, print text */
    --grad-primary:linear-gradient(135deg,var(--brand),#25145c);
    --warn-deep:#8a5a00;         /* caution text: counters, network warnings */
    --brand-deeper:#20114f;
    --focus-ring:var(--brand-ink);
    --field-focus:var(--brand-ink);   /* form-field focus ring; flips to --danger-deep inside destructive zones */
    --focus-shadow:rgba(var(--brand-rgb),.16);
    --radius-control:12px;
    --radius-sm:14px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-pill:999px;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:28px;
    --space-10:40px;
    --space-14:56px;
    /* Off-grid steps: the existing --space-N scale is a 4px grid (N = px/4), but
       the design also uses a finer 2px rhythm for tighter spacing. These name the
       in-between values by their literal pixel size so the scale stays lossless
       without renumbering the grid above. */
    --space-px-5:5px;
    --space-px-6:6px;
    --space-px-9:9px;
    --space-px-10:10px;
    --space-px-11:11px;
    --space-px-14:14px;
    --space-px-18:18px;
    --space-px-22:22px;
    --space-px-30:30px;
    --field-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236d6a7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:light;
    accent-color:var(--brand);
}

/* Base */
*{box-sizing:border-box}

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

/* Form controls don't inherit font-family by default, so <button> elements
   were silently falling back to the UA font (Arial). Inherit it so every
   button matches the Inter body type like the rest of the UI. */
button,input,select,textarea,optgroup{
    font-family:inherit;
}

body{
    margin:0;
    accent-color:var(--brand);
    min-height:100vh;
    font-family:Inter,'Inter Fallback',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    color:var(--ink);
    background:
        radial-gradient(circle at 15% 10%,rgba(var(--brand-rgb),.35),transparent 30%),
        radial-gradient(circle at 85% 5%,rgba(var(--brand2-rgb),.35),transparent 28%),
        radial-gradient(circle at 50% 100%,rgba(255,207,74,.35),transparent 35%),
        linear-gradient(135deg,#fbfbff,#f1f5ff 45%,#fff8e6);
    padding:var(--space-6) var(--space-4) var(--space-14);
}

a{color:inherit}

h1{
    margin:0;
    font-size:34px;
    line-height:1;
    letter-spacing:-.06em;
}

h2{
    margin:0 0 var(--space-2);
    font-size:30px;
    letter-spacing:-.05em;
}

/* App page title: semantic h1 that keeps the previous h2 sizing (no visual change) */
.page-title{
    margin:0 0 var(--space-2);
    font-size:30px;
    line-height:1.05;
    letter-spacing:-.05em;
}
.main-card .page-title + p{
    margin-bottom:var(--space-3);       /* page intro sits the same 12px above the first section as the inter-section rhythm */
}

/* Header / Navigation */
.topbar{
    max-width:1040px;
    margin:0 auto var(--space-6);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-px-14);
}

.brand{
    display:flex;
    align-items:center;
    gap:var(--space-px-10);
    font-weight:900;
    letter-spacing:-.05em;
    font-size:30px;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}

.logo{
    width:38px;
    height:38px;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    box-shadow:0 14px 35px rgba(var(--brand-rgb),.35);
    position:relative;
}

.logo:before,
.logo:after{
    content:"";
    position:absolute;
    border-radius:var(--radius-pill);
    background:white;
}

.logo:before{
    width:15px;
    height:15px;
    left:8px;
    top:8px;
}

.logo:after{
    width:8px;
    height:8px;
    right:9px;
    bottom:10px;
    opacity:.8;
}

.nav{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    background:rgba(255,255,255,.58);
    border:1px solid rgba(255,255,255,.7);
    padding:var(--space-px-6);
    border-radius:var(--radius-pill);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    /* Promote to its own compositor layer so the backdrop blur is retained
       across page paints instead of recomputed each navigation (which shows
       as a one-frame flicker on multi-page loads). */
    transform:translateZ(0);
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:var(--radius-control);
    background:transparent;
    color:var(--ink);
    cursor:pointer;
}

.nav-toggle .nav-icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .nav-icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .nav-icon-close{display:block;}

.nav-backdrop{
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(var(--ink-rgb),.38);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}

.nav-backdrop[hidden]{display:none;}

.nav a{
    border-radius:var(--radius-pill);
    padding:var(--space-px-10) var(--space-px-14);
    font-weight:900;
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
}

.nav a.active,
.nav a:hover{
    background:white;
    color:var(--ink);
    box-shadow:0 8px 18px rgba(var(--shadow-rgb),.08);
}

/* Layout */
.shell{
    margin:0 auto;
    width: min(490px,100%);
}

.wide{
    max-width:1040px;
    margin:0 auto;
    width: min(1040px,100%);
}

.legal{
    max-width:760px;
    text-align:left;
}
.legal h1{margin-bottom:var(--space-px-6);}
.legal .legal-updated{color:var(--muted);font-size:14px;margin:0 0 var(--space-7);}
.legal h2{font-size:21px;margin:var(--space-px-30) 0 var(--space-px-10);}
.legal h3{font-size:16px;margin:var(--space-4) 0 var(--space-px-6);}
.legal p{color:var(--ink-2);line-height:1.7;margin:0 0 var(--space-3);}
.legal ul{margin:0 0 var(--space-px-14);padding-left:var(--space-px-22);}
.legal li{color:var(--ink-2);line-height:1.7;margin-bottom:var(--space-px-6);}
.legal strong{color:var(--ink);}
.legal a{color:var(--brand-deep);text-decoration:underline;}
.legal a:hover{color:var(--brand);}

/* About page: a short editorial page rather than a dense legal one, so give it a
   calmer, even vertical rhythm: more air under the title and a tighter
   line-height than the dense legal pages. The optical top/bottom balance is
   handled by the global prose-card rule near .card > :last-child below. */
.about-page h1{margin-bottom:var(--space-4);}
.about-page h2{margin:var(--space-7) 0 var(--space-3);}
.about-page p{line-height:1.6;margin:0 0 var(--space-4);}
.about-page ul{margin:0 0 var(--space-4);}
.about-page li{line-height:1.6;margin-bottom:var(--space-2);}

/* ---------- Bitstream (the blog) ---------- */
/* The article body shares the About page's editorial rhythm (16px paragraph
   spacing, 1.6 line-height, 28/12 around subheads): both are long-form
   first-person prose and should read the same. These element selectors are
   (0,1,1), same as .legal's, and sit later in the file, so they win for the
   generic body p/h2/h3. */
.bitstream-article p{line-height:1.6;margin:0 0 var(--space-4);}
.bitstream-article h2{font-size:21px;margin:var(--space-7) 0 var(--space-3);}
.bitstream-article h3{font-size:16px;margin:var(--space-5) 0 var(--space-2);}
.bitstream-article em{font-style:italic;}

/* Article chrome (eyebrow, byline, code, foot). Anchored to their element so
   they're (0,1,1) and beat both .legal p and the .bitstream-article p rule
   above — class-only selectors here silently lose to .legal and collapse the
   header/foot spacing into the body rhythm. */
p.bitstream-eyebrow{margin:0 0 var(--space-2);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;}
.bitstream-eyebrow a{color:var(--brand-deep);text-decoration:none;}
.bitstream-eyebrow a:hover{text-decoration:underline;}
p.bitstream-byline{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 var(--space-7);}
.bitstream-byline a{color:var(--brand-deep);text-decoration:none;font-weight:700;}
.bitstream-byline a:hover{text-decoration:underline;}
.bitstream-code{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);margin:var(--space-4) 0;padding:var(--space-4);background:rgba(var(--ink-rgb),.04);border:1px solid var(--hairline);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:14px;line-height:1.6;color:var(--ink-2);}
.bitstream-code dt{color:var(--muted);}
.bitstream-code dd{margin:0;overflow-wrap:anywhere;}
p.bitstream-foot{margin-top:var(--space-7);font-size:14px;}
/* Bitstream cards open with a small eyebrow / rel-head rather than an h1, which
   leaves a naturally larger top gap that already offsets the prose-bottom
   leading. So opt the foot out of the global -6px last-child nudge here; with it
   the bottom reads ~6px tight. (Specificity 0,3,0 beats .card>p:last-child.) */
.card > .bitstream-foot:last-child{margin-bottom:0;}

/* Index: list of articles. Element-anchored for the same reason as above. */
ul.bitstream-list{list-style:none;margin:var(--space-6) 0 0;padding:0;}
li.bitstream-item{padding:var(--space-5) 0;margin:0;border-top:1px solid var(--hairline);}
li.bitstream-item:first-child{border-top:0;padding-top:0;}
li.bitstream-item:last-child{padding-bottom:0;}
a.bitstream-item-title{display:inline-block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink);text-decoration:none;}
a.bitstream-item-title:hover{color:var(--brand-deep);text-decoration:underline;}
p.bitstream-item-meta{color:var(--muted);font-size:13px;line-height:1.4;margin:var(--space-1) 0 var(--space-2);}
p.bitstream-item-dek{color:var(--ink-2);line-height:1.6;margin:0;}

/* "New on Bitstream" dashboard teaser. Rendered hidden; JS reveals it only when
   the latest article is newer than the one this browser last dismissed. The
   [hidden] rule needs the extra specificity to beat the display:flex above. */
.bitstream-teaser{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);padding:var(--space-2) var(--space-3);border:1px solid rgba(var(--brand-rgb,124,60,255),.22);background:rgba(var(--brand-rgb,124,60,255),.05);border-radius:var(--radius-md);font-size:14px;}
.bitstream-teaser[hidden]{display:none;}
.bitstream-teaser-eyebrow{flex-shrink:0;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-deep);}
.bitstream-teaser-title{flex:1;min-width:0;color:var(--ink);font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bitstream-teaser-title:hover{color:var(--brand-deep);text-decoration:underline;}
.bitstream-teaser-x{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--muted);border-radius:var(--radius-pill);cursor:pointer;}
.bitstream-teaser-x:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink);}
@media(max-width:520px){
.bitstream-teaser{flex-wrap:wrap;gap:var(--space-2) var(--space-3);}
.bitstream-teaser-x{order:2;margin-left:auto;}
.bitstream-teaser-title{order:3;flex-basis:100%;white-space:normal;}
}

/* ---------- Releases / changelog page ---------- */
.rel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5);}
.rel-head h1{margin-bottom:var(--space-px-6);}
.rel-head .legal-updated{margin-bottom:0;}
.rel-subscribe{display:inline-flex;align-items:center;gap:var(--space-px-6);flex-shrink:0;padding:var(--space-2) var(--space-px-14);border-radius:var(--radius-pill);border:1px solid rgba(var(--brand-rgb,124,60,255),.28);background:rgba(var(--brand-rgb,124,60,255),.06);color:var(--brand-deep);font-weight:800;font-size:14px;text-decoration:none;}
.rel-subscribe:hover{background:rgba(var(--brand-rgb,124,60,255),.12);color:var(--brand-deep);text-decoration:none;}
.rel-subscribe svg{display:block;}
.rel-entry{padding-top:var(--space-2);}
.rel-entry h2{font-size:21px;line-height:1.25;margin:var(--space-px-30) 0 var(--space-px-6);}
.rel-anchor{display:inline-block;vertical-align:baseline;margin-right:var(--space-2);font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--brand-deep);text-decoration:none;padding:2px var(--space-2);border-radius:var(--radius-md);background:rgba(var(--brand-rgb,124,60,255),.08);}
.rel-anchor:hover{background:rgba(var(--brand-rgb,124,60,255),.16);color:var(--brand-deep);text-decoration:none;}
.rel-title{color:var(--ink);}
.rel-tag{display:block;width:fit-content;margin-top:var(--space-2);font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding:3px var(--space-2);border-radius:var(--radius-pill);line-height:1;}
.rel-tag-feature{color:#2563c9;background:rgba(37,99,201,.12);}
.rel-tag-security{color:var(--success-deep);background:rgba(31,143,95,.13);}
.rel-tag-fix{color:var(--warn-deep);background:rgba(180,140,30,.15);}
.rel-tag-mixed{color:var(--brand-deep);background:rgba(var(--brand-rgb,124,60,255),.1);}
.rel-entry .rel-date{margin-top:0;margin-bottom:var(--space-3);}
/* The card has even 22px padding, but the last entry's trailing margins (the
   <ul>, and its final <li> collapsing through it) stacked on the bottom padding,
   making the card bottom-heavy vs the top. .card > :last-child only resets the
   entry itself; the leak runs deeper, so clear the whole trailing chain inside
   the final entry only (inter-entry and inter-bullet spacing is untouched). */
.rel-entry:last-child :last-child{margin-bottom:0;}
/* Box padding is even (22px), but the final bullet's 1.7 line-height leaves
   trailing half-leading *below* its last line, so the bottom reads heavier than
   the tight line-height:1 heading up top. margin:0 can't remove line-box
   leading, so pull the last line up by one space step to even the optical
   top/bottom whitespace. */
.rel-entry:last-child li:last-child{margin-bottom:calc(var(--space-1) * -1);}

.card,
.panel,
.main-card,
.sidebar{
    background:var(--card);
    -webkit-backdrop-filter:blur(22px);
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.65);
    border-radius:var(--radius-lg);
    padding:var(--space-px-22);
    box-shadow:0 24px 80px rgba(var(--shadow-rgb),.18);
    overflow:hidden;
    position:relative;
}

.card:before{
    content:"";
    position:absolute;
    inset:-90px -90px auto auto;
    width:190px;
    height:190px;
    border-radius:var(--radius-pill);
    background:linear-gradient(135deg,rgba(var(--brand-rgb),.25),rgba(var(--brand2-rgb),.14));
}

/* Landing / Hero */

.hero p{
    color:var(--muted);
    font-size:18px;
    line-height:1.5;
    max-width:620px;
    margin:var(--space-4) auto;
}

.hero-actions,
.cta{
    display:flex;
    justify-content:center;
    gap:var(--space-px-10);
    flex-wrap:wrap;
    margin-top:var(--space-5);
}

/* Public Profile */
.profile{
    text-align:center;
    position:relative;
    padding:var(--space-3) 0 var(--space-px-22);
}

.avatar{
    width:110px;
    height:110px;
    border-radius:var(--radius-lg);
    margin:0 auto var(--space-px-14);
    display:grid;
    place-items:center;
    font-size:36px;
    font-weight:900;
    color:white;
    background:
        linear-gradient(135deg,rgba(255,255,255,.28),transparent),
        linear-gradient(135deg,var(--brand),var(--brand-deeper));
    box-shadow:0 20px 38px rgba(var(--brand-rgb),.32);
    border:3px solid rgba(255,255,255,.78);
}

img.avatar,
img.dash-avatar{
    object-fit:cover;
    display:block;
}

.profile h1{
    margin-top:var(--space-px-6);
}

/* Status / notice cards (profile-unavailable, page-not-found, link-verified)
   and the signing-history card reuse .profile for centering but have no avatar,
   so .profile's asymmetric 12/22 top/bottom padding and the h1's avatar-nudge
   margin leave the card bottom-heavy. Restore an even, symmetric vertical
   rhythm; the small negative h1 margin pulls the title up to cancel the font's
   ascent leading above its caps (which the flush bottom has no equivalent of),
   so the matched padding reads optically even top to bottom. */
.history-card{background:rgba(255,255,255,.9);}
.profile-status,
.history-card .profile{padding:var(--space-4) 0;}
.profile-status h1,
.history-card h1{margin-top:calc(var(--space-1) * -1);}
.profile-status > :last-child,
.history-card .profile > :last-child{margin-bottom:0;}

.tagline{
    color:var(--muted);
    margin:var(--space-px-10) auto 0;
    max-width:330px;
    line-height:1.45;
    font-size:15px;
}

.profile .tagline,
.profile .bio-text{
    margin-top:var(--space-px-22);
    max-width:520px;
    font-size:17px;
    line-height:1.75;
}

.bio-text{
    white-space:normal;
}

.bio-text a:hover{
    text-decoration:underline;
}

.url{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-4);
    background:rgba(255,255,255,.72);
    border:1px solid var(--hairline);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-pill);
    font-weight:800;
    font-size:14px;
    box-shadow:0 10px 24px rgba(var(--shadow-rgb),.08);
}

.profile .url{
    margin-top:var(--space-px-18);
    border-color: rgba(var(--brand-rgb,124,60,255),.16);
    box-shadow: 0 10px 24px rgba(var(--brand-rgb,124,60,255),.10);
}

.pulse{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 6px rgba(var(--success-rgb),.12);
}

/* Assets / Addresses */
.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:var(--space-2) 0 var(--space-3);
    font-size:13px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.asset-group{
    background:rgba(255,255,255,.52);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:var(--space-px-10);
    margin:var(--space-3) 0;
    box-shadow:0 10px 25px rgba(var(--shadow-rgb),.05);
}

.group-head{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-px-5) var(--space-px-5) var(--space-px-10);
}

.group-actions{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex:0 0 auto;
}

.asset-icon{
    width:46px;
    height:46px;
    border-radius:var(--radius-md);
    display:grid;
    place-items:center;
    color:white;
    font-weight:900;
    flex:0 0 auto;
}

.asset-icon[style]{
    background-image:none !important;
}

/* Monogram letter on the preset gradient tiles (shown only when an asset has no
   coin logo): white fails the 3:1 large-text bar on the light gradients
   (orange 1.64, green 2.35, blue 2.63, rainbow 1.42), so use dark ink there.
   gray and purple keep the default white (8.51 / 4.76 over the glyph region).
   Custom-colour tiles set their own WCAG-picked ink inline, which wins. */
.asset-icon.orange,
.asset-icon.green,
.asset-icon.blue,
.asset-icon.rainbow{color:#12121a}

.asset-icon img{
    width:82%;
    height:82%;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.08));
}

.asset-info-link{
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
}

.asset-info-link:after{
    content:"↗";
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    opacity:.68;
}

.asset-info-link:hover{
    color:var(--brand-ink);
    text-decoration:none;
}

.orange{background:linear-gradient(135deg,#ffbf3c,#ff8a00)}
.purple{background:linear-gradient(135deg,#7a6fff,#3f35d4)}
.green{background:linear-gradient(135deg,#24c081,#0c8c61)}
.blue{background:linear-gradient(135deg,#4aa3ff,#1265e8)}
.rainbow{background:linear-gradient(135deg,#27f5b6,#7c3cff)}
.gray{background:linear-gradient(135deg,#74748a,#222233)}

.group-copy{
    flex:1;
}

.group-copy strong{
    display:block;
    font-size:16px;
    letter-spacing:-.03em;
}

.group-copy > span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

.source-row{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-3);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.78);
    border:1px solid rgba(var(--ink-rgb),.055);
    margin-top:var(--space-2);
    transition:.15s ease;
    position:relative;
}

.source-row:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(var(--shadow-rgb),.08);
}

.source-row.preferred{
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,255,245,.9));
    border:1px solid rgba(var(--success-rgb),.36);
    box-shadow:0 14px 30px rgba(var(--success-rgb),.12);
}

.exchange{
    min-width:72px;
    font-size:12px;
    font-weight:900;
    color:var(--ink-2);
}

.address{
    flex:1;
    color:var(--ink-5);
    font-size:13px;
    font-variant-numeric: tabular-nums;
    position: relative;
    padding-right:2px;
    min-width: 0;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-mask-image: none;
    mask-image: none;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
    padding:var(--space-px-6) var(--space-3);
    border-radius:var(--radius-pill);
    font-size:11px;
    font-weight:900;
    background:rgba(var(--success-rgb),.13);
    color:var(--success-deep);
    white-space:nowrap;
    cursor:default;
}

.status:before{
    content:"✓";
}

/* Buttons */
.btn,
.copy{
    border:0;
    color:white;
    background:var(--ink-deep);
    padding:var(--space-px-10) var(--space-3);
    border-radius:var(--radius-control);
    font-weight:800;
    cursor:pointer;
    font-size:13px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.primary{
    color:white;
    background:var(--grad-primary);
    box-shadow:0 16px 28px rgba(var(--brand-rgb),.26);
}

.secondary,
.ghost,
.set-preferred{
    border:0;
    background:var(--hairline);
    color:var(--ink-4);
    padding:var(--space-px-10) var(--space-3);
    border-radius:var(--radius-control);
    font-weight:800;
    cursor:pointer;
    font-size:13px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.danger{
    background:var(--danger-deep);
    color:white;
}

.empty-state{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    align-items:center;
    text-align:center;
    padding:var(--space-7) var(--space-5);
    border:1px dashed rgba(var(--ink-rgb),.14);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.45);
    color:var(--ink);
}

.empty-state strong{
    display:block;
    font-size:16px;
    letter-spacing:-.02em;
}

.empty-state span{
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}

/* Notices / Footer */
.warning{
    margin-top:var(--space-5);
    padding:var(--space-px-14);
    border-radius:var(--radius-md);
    background:rgba(255,207,74,.23);
    border:1px solid rgba(184,129,0,.14);
    color:#6d4b00;
    font-size:13px;
    line-height:1.45;
}

.success-box,
.error-box{
    max-width:1040px;
    margin:0 auto var(--space-4);
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    font-weight:800;
}

.success-box{
    background:rgba(var(--success-rgb),.12);
    color:var(--success-deep);
}

.error-box{
    background:rgba(var(--danger-rgb),.10);
    color:var(--danger-deep);
}

.footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:2px var(--space-2);
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:var(--space-px-18);
}
.footer-links{
    white-space:nowrap;
}

.footer a{
    color:inherit;
    font-weight:900;
    text-decoration:none;
}

.footer a:hover{
    text-decoration:underline;
}

/* Collapsible footer (public profile only). The caret sits dead-centre at the
   page foot; the footer reveals in place with its normal spacing. The [hidden]
   rule is needed because .footer is display:flex, which would otherwise beat
   the attribute's UA display:none. */
.footer[hidden]{display:none;}
.footer-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin:var(--space-px-18) auto 0;
    padding:0;
    border:1px solid var(--hairline);
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.9);
    color:var(--muted);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease,background .15s ease;
}
.footer-toggle:hover{color:var(--ink);background:rgba(255,255,255,.85);}
/* Collapsed caret is a hard-edged circle; the footer text it replaces sits ~3px
   lower inside its line-box, so nudge the caret down to match the visual gap. */
.footer-toggle[aria-expanded="false"]{margin-top:calc(var(--space-px-18) + 3px);}
.footer-caret{transition:transform .2s ease;}
.footer-toggle[aria-expanded="true"] .footer-caret{transform:rotate(180deg);}

/* The public-profile footer is the one block that sits on the owner's custom
   background (page content lives inside the card). Give it — and the collapsed
   toggle — a readable surface so footer text stays legible on any background. */
#site-footer{
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:var(--space-2) var(--space-5);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-pill);
}

/* Forms */
.form{
    display:grid;
    gap:var(--space-3);
    max-width: 100%;
}

label{
    font-size:13px;
    font-weight:900;
    color:var(--ink-3);
}

input[type="color"]{
    width:110px;
    height:56px;
    padding:var(--space-1);
    border-radius:var(--radius-sm);
    cursor:pointer;
    border:1px solid var(--field-border);
    background:rgba(255,255,255,.82);
}

.field-help{
    display:block;
    margin-top:var(--space-px-6);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
}
/* As a <p>, field-help inherits a UA bottom margin. When it's the last child of
   a panel that margin stacks under the panel's own bottom padding, making the
   panel look bottom-heavy (uneven vs the top). Drop it only as a last child, so
   field-help followed by siblings (e.g. a Remove button) keeps its separation. */
.field-help:last-child{margin-bottom:0;}
/* Same leak generalised: any last child of a bordered, padded panel should not
   add a trailing UA margin under the panel's bottom padding, which would make
   the panel's bottom gap larger than its top. Scoped to direct children and to
   last-child only, so spacing between siblings is untouched. */
.card > :last-child,
.panel > :last-child,
.profile-extra-panel > :last-child{margin-bottom:0;}
/* The reset above removes the trailing UA margin, but a final line of body copy
   still leaves ~6px of line-height leading below its glyphs, while the first
   heading (line-height:1) sits tight to the top, so the card still reads
   bottom-heavy. Pull a trailing paragraph or list up to even the optical
   top/bottom whitespace. Scoped to text last-children, so cards ending in
   buttons, forms, inputs, or panels are untouched. Applies to any card that
   ends in body copy (legal pages, About, and the like). */
.card > p:last-child,
.card > ul:last-child,
.card > ol:last-child{margin-bottom:calc(var(--space-px-6) * -1);}
/* hidden must beat the display:block above (audit-hidden.php finding #1:
   the no-devices hint was rendering alongside the device list). */
.field-help[hidden]{display:none;}

.file-field{
    display:flex;
    flex-direction:column;
}

.file-input-native{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

.file-choose-btn{
    align-self:flex-start;
    margin-top:var(--space-2);
}

.network-warning{
    display:block;
    margin-top:var(--space-px-6);
    color:var(--warn-deep);
    font-size:12px;
    font-weight:800;
    line-height:1.35;
}

/* Coherence conflict (asset/network on different chains) is a blocking error,
   not just an advisory — show it in the error red rather than the amber. */
.network-warning.network-conflict{
    color:var(--danger-deep);
}

.public-network-warning{
    flex-basis:100%;
    margin-top:2px;
    padding:var(--space-2) var(--space-px-10);
    border-radius:var(--radius-sm);
    background:rgba(255,207,74,.16);
    border:1px solid rgba(184,129,0,.10);
    order: 10;
    flex: 1 0 100%;
    margin:var(--space-px-6) 0 0;
}

.form-actions{
    display:flex;
    gap:var(--space-px-10);
    flex-wrap:wrap;
}

/* Dashboard */
.grid{
    display:grid;
    gap:var(--space-px-18);
    grid-template-columns: minmax(260px,320px) minmax(0,1fr);
    align-items: start;
}

.dash-profile{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--hairline);
    min-width:0;
}

.dash-profile > div:last-child{
    min-width:0;
}

.dash-avatar{
    width:88px;
    height:88px;
    border-radius:var(--radius-lg);
    display:grid;
    place-items:center;
    color:white;
    font-weight:900;
    font-size:30px;
    background:linear-gradient(135deg,var(--brand),var(--brand-deeper));
    object-fit:cover;
    flex-shrink:0;
}
/* The generic ".dash-profile span" rule (for the @username line) otherwise wins
   over .dash-avatar and shrinks/grays/mis-aligns the letter avatar — re-assert. */
.dash-profile span.dash-avatar{
    display:grid;
    place-items:center;
    color:#fff;
    font-size:30px;
    margin-top:0;
    max-width:none;
}

.dash-profile strong{
    display:block;
}

.dash-profile span{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
}

.metric-grid{
    display:grid;
    gap:var(--space-px-10);
    margin:var(--space-4) 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 96px;
    align-items: stretch;
}

.metric{
    background:rgba(255,255,255,.72);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:var(--space-3);
    min-height: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.metric strong{
    display:block;
    font-size:22px;
    letter-spacing:-.04em;
    overflow-wrap: anywhere;
    line-height: 1.05;
}

.metric span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:2px;
    line-height: 1.2;
}

.menu{
    display:grid;
    gap:var(--space-2);
    margin-top:var(--space-3);
}

.menu a{
    text-align:left;
    border:0;
    background:transparent;
    border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-3);
    font-weight:800;
    color:var(--ink-3);
    text-decoration:none;
}

.menu a.active,
.menu a:hover{
    background:white;
    box-shadow:0 8px 18px rgba(var(--shadow-rgb),.07);
    color:var(--ink);
}

.dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
}

.dash-head p{
    margin:var(--space-px-5) 0 0;
    color:var(--muted);
    font-size:14px;
}

/* Tables / Panels */
.table-card{
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    overflow:hidden;
    margin-bottom:var(--space-4);
}

.table-row{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr auto;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-px-14);
    border-bottom:1px solid var(--hairline);
}

.table-row:last-child{
    border-bottom:0;
}

.cell-muted{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

.actions{
    display:flex;
    gap:var(--space-2);
    flex-wrap:wrap;
}

.danger-zone h2{
    color:var(--danger-deep);
}

.visibility-card{
    display:flex;
    gap:var(--space-3);
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.65);
    border:1px solid var(--hairline);
    cursor:pointer;
    align-items: center;
}

.visibility-card strong{
    display:block;
    font-size:15px;
    color:var(--ink);
}

.visibility-card small{
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:13px;
    line-height:1.35;
}

/* Appearance / Theme Picker */
.theme-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
    gap:var(--space-3);
}

.theme-card{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    min-height:156px;
    padding:var(--space-3);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.65);
    border:1px solid var(--hairline);
    cursor:pointer;
    transition:.15s ease;
    font:inherit;
    text-align:left;
}

button.theme-card{
    appearance:none;
    -webkit-appearance:none;
}

/* Live accent preview: mirrors how the chosen accent actually renders on a
   public profile — a solid-fill button with its computed readable text, and an
   accent-text sample in the darkened (contrast-safe) ink. The note appears only
   when the accent gets darkened for readability. */
.accent-preview{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-3);
}
.accent-preview-label{
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}
.accent-preview-btn{
    display:inline-flex;
    align-items:center;
    padding:var(--space-2) var(--space-4);
    border-radius:var(--radius-pill);
    font-size:13px;
    font-weight:600;
    line-height:1;
}
.accent-preview-link{
    font-size:14px;
    font-weight:600;
}
.accent-preview-note{
    flex-basis:100%;
    margin:0;
    font-size:12px;
    color:var(--muted);
}

.theme-card:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(var(--shadow-rgb),.08);
}

.theme-card.selected{
    border-color:rgba(var(--brand-rgb),.50) !important;
    outline:3px solid rgba(var(--brand-rgb),.20);
    box-shadow:0 16px 34px rgba(var(--brand-rgb),.16) !important;
}

.theme-card input[type="radio"]{
    display:none;
}

.theme-card strong{
    font-size:14px;
}

.theme-card small{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.theme-swatch,
.custom-theme-swatch{
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    box-shadow:0 10px 22px rgba(var(--shadow-rgb),.12) !important;
    display:block;
}

/* Preset swatch colors are rendered inline from $themes in appearance.php
   (single source of truth) — no per-hex rules here to keep in sync. */

.custom-swatch-wrap{
    position:relative;
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
}

.custom-swatch-wrap:has(#custom-color-picker:focus-visible){
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}

.custom-theme-swatch{
    background-image:none;
}

.custom-theme-swatch.is-spectrum{
    background:conic-gradient(from 220deg,#7c3cff,#2563eb,#16a34a,#f97316,#ec4899,#7c3cff);
}

.custom-theme-card input[type="color"],
#custom-color-picker{
    position:absolute !important;
    inset:0 !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:var(--radius-sm) !important;
    opacity:0 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    display:block !important;
}

#custom-color-picker::-webkit-color-swatch-wrapper{
    padding:0 !important;
}

#custom-color-picker::-webkit-color-swatch,
#custom-color-picker::-moz-color-swatch{
    border:0 !important;
    border-radius:var(--radius-sm) !important;
}

.custom-color-button{
    width:max-content;
    margin-top:2px;
}

/* Asset Editing / Custom Asset Colors */
.edit-address-form{
    margin:var(--space-2) 0 var(--space-3);
    padding:var(--space-px-14);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.58);
    border:1px solid var(--hairline);
}

.asset-custom-wrap input[type="color"]{
    width:100%;
    height:50px;
    padding:var(--space-1);
    border-radius:var(--radius-sm);
    cursor:pointer;
}

/* Drag and Drop */
.draggable-asset,
.draggable-address{
    transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.draggable-asset.dragging,
.draggable-address.dragging{
    opacity:.55;
    transform:scale(.995);
    box-shadow:0 20px 45px rgba(var(--shadow-rgb),.16);
}

.drag-handle,
.address-drag-handle{
    border:0;
    background:var(--hairline);
    color:var(--ink-4);
    border-radius:var(--radius-control);
    cursor:grab;
    font-weight:900;
    flex:0 0 auto;
    touch-action:none;
}

.drag-handle{
    width:34px;
    height:34px;
}

.address-list{
    display:block;
}

.address-drag-handle{
    width:30px;
    height:30px;
    border-radius:var(--radius-control);
    line-height:1;
}

.drag-handle:active,
.address-drag-handle:active{
    cursor:grabbing;
}

/* Registration / Login Helpers */
.username-status{
    display:block;
    margin-top:var(--space-2);
    font-size:12px;
    font-weight:900;
    line-height:1.35;
}
/* Empty on load (filled by JS only while typing). An empty block still applies
   its margin-top, padding the bottom of the field and inflating the gap to the
   next section, so collapse it until it actually carries a message. */
.username-status:empty{display:none;}

.username-status.good{
    color:var(--success-deep);
}

.username-status.bad{
    color:var(--danger-deep);
}

.username-status.checking{
    color:var(--muted);
}

.username-status.good a{
    color:var(--success-deep);
}

.auth-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:var(--space-px-6);
    margin-top:var(--space-4);
    font-size:13px;
    color:var(--muted);
}

.auth-links a:not(.secondary){
    color:var(--brand-ink);
    font-weight:800;
    text-decoration:none;
}

.auth-links a:not(.secondary):hover{
    text-decoration:underline;
}

.auth-actions{
    gap:var(--space-px-10);
    margin-top:var(--space-4);
}

.auth-actions .secondary:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(var(--shadow-rgb),.08);
}
.auth-resend{
    margin-top:var(--space-4);
    text-align:center;
    font-size:13px;
}
.auth-resend summary{
    cursor:pointer;
    color:var(--brand-ink);
    font-weight:800;
    list-style:none;
}
.auth-resend summary:hover{
    text-decoration:underline;
}
.auth-resend form{
    margin-top:var(--space-3);
    text-align:left;
}

/* v4.0 Watch this profile — sender-side change alerts on the public page.
   Mirrors the .auth-resend collapsed-details pattern. */
.watch-profile{
    margin-top:var(--space-4);
    text-align:center;
    font-size:13px;
}
.watch-profile summary{
    cursor:pointer;
    color:var(--brand-ink);
    font-weight:800;
    list-style:none;
}
.watch-profile summary:hover{
    text-decoration:underline;
}
.watch-form{
    margin-top:var(--space-3);
    text-align:left;
}
.watch-field{
    display:block;
}

/* v4.0 public email verification row in the profile editor */
.pe-account-row{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin:0;
}
/* Divider above the checkbox whenever visible content sits above it — i.e. in
   every state except account mode, where the checkbox stands alone with even
   wrapper padding. State is carried by the .pe-divided class (set server-side
   in bitsy_render_public_email_section, kept live by sync()) because sibling
   selectors can't express this: `+` matches the next element even when it is
   [hidden], and the blocks between the status text and the checkbox made the
   divider appear in only one of the three visible states. */
.pe-account-row.pe-divided{
    margin-top:var(--space-3);
    padding-top:var(--space-3);
    border-top:1px solid rgba(var(--brand-rgb),.14);
}
.pe-new-actions{margin:0;}
.pe-new-actions > :last-child{margin-bottom:0;}

.pe-account-row input[type=checkbox]{
    width:auto;
    margin:0;
}
.verify-msg.is-success{color:var(--success-deep);}
.pe-msg{margin:0 0 var(--space-px-10);font-weight:600;}
.pe-msg.is-success{color:var(--success-deep);}
.pe-msg.is-error{color:#b91c1c;}
/* Quiet secondary button (e.g. Remove Email) — muted, lower emphasis than the
   dark/primary actions so it reads as a safe escape hatch, not a main action. */
.btn.btn-quiet{
    background:transparent;
    color:var(--muted);
    border:1px solid var(--hairline-strong);
    font-weight:700;
}
.btn.btn-quiet:hover{
    color:#b91c1c;
    border-color:#b91c1c;
}
/* Bottom Save row: button + inline saved/error confirmation so an AJAX save
   always gives visible feedback (shared pattern across the form). */
.profile-save-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.save-status{font-size:13px;font-weight:700;}
.save-status.is-success{color:var(--success-deep);}
.save-status.is-error{color:#b91c1c;}
.verify-msg.is-error{color:#b91c1c;}

/* Dashboard overview rows */
.dashboard-card .dashboard-row,
.table-card .dashboard-row{
    grid-template-columns:minmax(180px,1.35fr) minmax(120px,.85fr) minmax(180px,1.2fr) 96px;
}

.dashboard-primary,
.dashboard-type,
.dashboard-detail,
.dashboard-action{
    min-width:0;
}

.dashboard-type,
.dashboard-detail{
    color:var(--ink);
}

.dashboard-action{
    display:flex;
    justify-content:flex-end;
}

.dashboard-action .btn,
.dashboard-action .secondary{
    min-width:82px;
}

/* Responsive */
@media(max-width:860px){

    .topbar{
        display:block;
        position:relative;
        text-align:center;
    }

    .brand{
        display:inline-flex;
        margin-bottom:var(--space-px-14);
    }

    .nav-toggle{
        display:inline-flex;
        position:absolute;
        top:50%;
        right:0;
        transform:translateY(-50%);
    }

    .nav{
        display:none;
    }

    .nav.is-open{
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        gap:var(--space-1);
        position:absolute;
        top:calc(100% + 6px);
        right:0;
        left:auto;
        width:min(260px,76vw);
        padding:var(--space-2);
        border-radius:var(--radius-md);
        box-shadow:0 24px 60px rgba(var(--shadow-rgb),.22);
        z-index:95;
    }

    .nav.is-open a{
        width:100%;
        text-align:left;
        padding:var(--space-3) var(--space-px-14);
        border-radius:var(--radius-control);
        font-size:15px;
    }

    .table-row,
    .dashboard-card .dashboard-row,
    .table-card .dashboard-row{
        grid-template-columns:1fr;
    }

    .dashboard-action{
        justify-content:flex-start;
    }

    .dash-head{
        display:block;
    }

    .dash-head .btn{
        margin-top:var(--space-3);
        width:100%;
    }
}

@media(max-width:520px){
    body{
        padding:var(--space-px-18) var(--space-3) 42px;
    }

    .card,
    .panel,
    .main-card,
    .sidebar{
        border-radius:var(--radius-lg);
        padding:var(--space-px-18);
    }

    h1{
        font-size:31px;
    }

    h2{
        font-size:25px;
    }

    .exchange{
        min-width:62px;
    }
}

/* Character counters */
.char-counter{
    display:block;
    margin-top:var(--space-px-6);
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    line-height:1.35;
}

.char-counter.near{
    color:var(--warn-deep);
}

.char-counter.limit{
    color:var(--danger-deep);
}

/* Preferred asset badge/button */
.preferred-asset-badge,
.preferred-asset-button{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
    width:max-content;
    margin-top:0;
    padding:var(--space-px-5) var(--space-2);
    border:0;
    border-radius:var(--radius-pill);
    background:rgba(var(--brand-rgb),.12);
    color:var(--brand-deep);
    font:inherit;
    font-size:11px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    cursor:default;
    appearance:none;
    -webkit-appearance:none;
}

.preferred-asset-badge:hover,
.preferred-asset-button:hover{
    transform:none;
    box-shadow:none;
}

/* Inline preferred updates */
.preferred-asset-form,
.preferred-address-form{
    margin:0;
}

/* Only the actionable "Set preferred" controls get a pointer. The active
   "Preferred Asset" badge carries .preferred-asset-toggle purely as a JS hook
   (so the script can swap it when preferred changes) — it isn't clickable, so
   it must keep the default cursor. It's a <span>; the action is a <button>. */
button.preferred-asset-toggle,
.set-preferred{
    cursor:pointer;
}

/* The active/status badges are indicators, not controls — never a pointer,
   and never the text I-beam either. */
.preferred-asset-badge,
.status,
.address-preferred-badge{
    cursor:default;
}

.source-row .preferred-address-form{
    flex:0 0 auto;
}

/* Consolidated asset color controls */
.asset-custom-preview:focus-visible{
    outline:3px solid var(--focus-ring);
    outline-offset:2px;
}

/* Public profile QR/share actions */
.profile-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-px-10);
    margin:var(--space-px-14) auto 0;
    max-width:330px;
    margin-top:var(--space-5);
}

.profile-action-btn{
    width:100%;
    border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-px-14);
}

.profile-accent-card .profile-actions .secondary:hover{
    box-shadow:0 12px 24px rgba(var(--brand-rgb),.12);
    transform:translateY(-1px);
}

.bitsy-modal[hidden],
.bitsy-toast[hidden]{
    display:none !important;
}

body.modal-open{
    overflow:hidden;
}

.bitsy-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:var(--space-px-18);
}

.bitsy-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(var(--ink-rgb),.38);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.bitsy-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:var(--radius-pill);
    background:var(--hairline);
    color:var(--ink);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.qr-box{
    width:max-content;
    max-width:100%;
    margin:var(--space-2) auto var(--space-3);
    padding:var(--space-px-14);
    border-radius:var(--radius-lg);
    background:white;
    border:1px solid var(--hairline);
    box-shadow:0 14px 32px rgba(var(--shadow-rgb),.10);
}

.qr-box img{
    width:230px;
    height:230px;
    display:block;
}

.qr-value{
    width:100%;
    max-width:330px;
    margin:var(--space-3) auto 0;
    padding:var(--space-3) var(--space-3);
    border-radius:var(--radius-sm);
    background:rgba(var(--ink-rgb),.045);
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    white-space:normal;
    word-break:break-all;
    overflow-wrap:anywhere;
    text-align:left;
}

.qr-actions{
    justify-content:center;
    margin-top:var(--space-px-14);
}

.bitsy-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(10px);
    z-index:1100;
    padding:var(--space-px-11) var(--space-px-14);
    border-radius:var(--radius-pill);
    background:var(--ink-deep);
    color:white;
    font-size:13px;
    font-weight:900;
    box-shadow:0 18px 34px rgba(var(--ink-rgb),.22);
    opacity:0;
    transition:.15s ease;
}

.bitsy-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

@media(max-width:520px){
    .profile-actions{
        grid-template-columns:1fr;
    }

    .qr-box img{
        width:210px;
        height:210px;
    }
}

/* Mobile management polish */
@media(max-width:720px){

    .group-head{
        flex-wrap:wrap;
        align-items:center;
    }

    .group-head .group-copy{
        min-width:0;
    }

    .group-actions{
        flex:1 1 100%;
        flex-wrap:wrap;
    }

    .group-actions > form,
    .group-actions > button.secondary{
        flex:1 1 auto;
    }

    .group-actions form > .secondary{
        width:100%;
    }

    .source-row{
        flex-wrap:wrap;
    }

    .source-row .address{
        flex-basis:100%;
        order:3;
    }
}

/* Upgraded landing page */
.hero-upgraded{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    align-items:center;
    gap:var(--space-7);
    text-align:left;
    padding:42px var(--space-px-30);
}

.hero-upgraded .hero-copy{
    position:relative;
    z-index:1;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-bottom:var(--space-3);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-pill);
    background:rgba(var(--brand-rgb),.10);
    color:var(--brand-deep);
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
}

.hero-kicker:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:var(--radius-pill);
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    box-shadow:0 0 0 5px rgba(var(--brand-rgb),.10);
}

.hero-upgraded h1{
    font-size:64px;
    line-height:1;
    letter-spacing:-.04em;
    max-width:680px;
}

.hero-upgraded p{
    margin:var(--space-4) 0 0;
    max-width:620px;
    text-align:left;
    font-size:18px;
}

.hero-upgraded .hero-actions{
    justify-content:flex-start;
}

.hero-trust{
    margin-top:var(--space-3);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}
.security-card{
    margin-top:var(--space-6);
}
.security-head{
    max-width:640px;
    margin:0 auto var(--space-6);
    text-align:center;
}
.security-kicker{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-bottom:var(--space-3);
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-pill);
    background:rgba(var(--brand-rgb),.10);
    color:var(--brand-deep);
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
}
.security-kicker svg{
    width:14px;
    height:14px;
}
.security-head h2{
    margin:0 0 var(--space-2);
}
.security-head p{
    margin:0;
    color:var(--muted);
}
.security-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
    gap:var(--space-4);
}
.security-item{
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius-md);
    padding:var(--space-5);
}
.security-icon{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--brand),var(--brand-deep));
    color:#fff;
    margin-bottom:var(--space-3);
}
.security-icon svg{
    width:22px;
    height:22px;
}
.security-item h3{
    margin:0 0 var(--space-1);
    font-size:16px;
}
.security-item p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.hero-preview{
    position:relative;
    z-index:1;
    justify-self: end;
    width: 100%;
    max-width: 410px;
}

@media(max-width:940px){
    .hero-upgraded{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-upgraded p{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .hero-upgraded .hero-actions{
        justify-content:center;
    }
}

@media(max-width:620px){
    .hero-upgraded{
        padding:34px var(--space-px-18);
    }

    .hero-upgraded h1{
        font-size:48px;
    }

    .hero-upgraded p{
        font-size:16px;
    }

    .hero-trust{
        line-height:1.45;
    }
}

@media(max-width:420px){
    .hero-upgraded h1{
        font-size:41px;
    }
}

/* Profile analytics cards */
/* Final launch-candidate spacing and polish */
button,
.btn,
.secondary,
.copy,
.set-preferred{
    line-height:1.1;
}

.btn,
.secondary,
.ghost,
.set-preferred{
    min-height:40px;
}

.form .btn,
.form .secondary{
    width:max-content;
}

.panel h2,
.main-card h2{
    line-height:1.05;
}

.panel .tagline,
.danger-zone .tagline{
    max-width:680px;
}

.asset-group:last-child,
.source-row:last-child{
    margin-bottom:0;
}
.bitsy-modal-close:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(var(--shadow-rgb),.10);
}

@media(max-width:720px){
    .form .btn,
    .form .secondary:not(.file-choose-btn){
        width:100%;
    }

}

@media(max-width:520px){
    .topbar{
        margin-bottom:var(--space-px-18);
    }

    .nav{
        border-radius:var(--radius-md);
    }

    .nav a{
        flex:1 1 auto;
        text-align:center;
    }

    .metric-grid{
        gap:var(--space-2);
    }

    .metric,
    .source-row .copy{
        width:100%;
    }

}

/* Final hardening polish */
.verification-banner .verification-resend-button,
.verification-banner .set-preferred{
    margin-top:var(--space-2);
}

/* Authoritative deduplicated launch rules */
/* Explicit placeholder color: browser defaults land ~4.3-4.5:1 and vary by
   engine; pin it to a token that clears AA on the field. opacity:1 stops
   Firefox from fading it. */
input::placeholder,
textarea::placeholder{
    color:var(--muted);
    opacity:1;
}

input,
textarea,
select{
    width:100%;
    min-height:46px;
    margin-top:var(--space-px-6);
    border:1px solid var(--field-border);
    border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-px-14);
    background:rgba(255,255,255,.82);
    font-family:inherit;
    /* Explicit 16px (not font:inherit) — inputs live inside <label> (13px/900),
       so inheriting would shrink them below the 16px iOS focus-zoom threshold
       and drag the label's 900 weight onto typed text. */
    font-size:16px;
    font-weight:500;
    line-height:1.4;
    color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Disabled text inputs (e.g. the custom Public Email field while account-email
   mode is on) read as dormant: greyed, muted text, not-allowed cursor. The
   value stays visible so the user can see their saved address is preserved. */
input:disabled,
textarea:disabled,
select:disabled{
    background:rgba(120,120,140,.08);
    color:var(--muted);
    cursor:not-allowed;
    -webkit-text-fill-color:var(--muted);
}

.copy{
    min-height:40px;
    min-width:64px;
    padding:var(--space-2) var(--space-px-10);
    font-size:12px;
    line-height:1.1;
    text-align:center;
}

.asset-color-row{
    display:grid;
    gap:var(--space-3);
    align-items:end;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) minmax(130px,160px);
}

.asset-preset-select-row{
    display:grid;
    grid-template-columns:max-content auto;
    gap:var(--space-px-10);
    align-items:end;
}

.asset-preset-select{
    width:auto;
    min-width:122px !important;
    max-width:138px;
}

.asset-custom-color-row{
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:var(--space-px-10);
}

.asset-custom-color-row input[type="color"],
.asset-custom-color-input{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:1px !important;
    min-width:1px !important;
    height:1px !important;
    min-height:1px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.asset-preset-preview,
.asset-custom-preview{
    min-height:50px;
    margin-top:var(--space-px-6);
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.72);
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    white-space:nowrap;
    width:max-content;
    min-width:0;
    max-width:max-content;
    flex:0 0 auto;
}

.asset-preset-preview-swatch,
.asset-custom-preview-swatch{
    width:28px;
    height:28px;
    border-radius:var(--radius-control);
    box-shadow:0 8px 16px rgba(var(--shadow-rgb),.12);
    flex:0 0 auto;
}

.asset-preset-preview-text,
.asset-custom-preview-text{
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    flex:0 0 auto;
}

.bitsy-modal-card{
    position:relative;
    width:min(390px,100%);
    max-height:calc(100vh - 36px);
    overflow:auto;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.75);
    border-radius:var(--radius-lg);
    padding:var(--space-px-22);
    box-shadow:0 28px 90px rgba(var(--ink-rgb),.28);
    text-align:center;
}

@media(max-width:720px){

    .asset-preset-select{
        width:100%;
        max-width:none;
    }

    .asset-preset-select-row{
        grid-template-columns:1fr auto;
    }
}

@media(max-width:520px){
    .source-row .address{
        white-space:normal;
        word-break:break-all;
        overflow:visible;
        text-overflow:clip;
    }
}

/* QR modal final polish */
.bitsy-modal-card .tagline{
    margin-bottom:var(--space-1);
    overflow-wrap:anywhere;
}
/* Monospace proof/manifest blocks read left-aligned, never centered, and the
   uppercase section labels get vertical rhythm instead of hugging the pre's. */
.bitsy-modal-card .proof-message{
    text-align:left;
}
.bitsy-modal-card .proof-step-label{
    margin:var(--space-3) 0 var(--space-1);
    text-align:left;
}
.bitsy-modal-card .ownership-modal-note{
    overflow-wrap:anywhere;
}
/* v3.3: public signing-history timeline */
.history-card .tagline{ max-width:640px; }
.history-card a{ color:var(--brand-deep); text-decoration:underline; }
.history-anchor a{ color:inherit; text-decoration:underline; }
.history-status{
    margin-top:var(--space-4);
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    font-size:13px;
    font-weight:800;
}
.history-status-ok{ background:rgba(var(--success-rgb),.12); color:var(--success-deep); }
.history-status-bad{ background:rgba(var(--danger-rgb),.12); color:var(--danger-deep); }
.history-anchor{
    margin-top:var(--space-2);
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    background:rgba(247,147,26,.10);
    color:var(--warn-deep);
    font-size:13px;
    font-weight:700;
}
.history-list{
    list-style:none;
    margin:var(--space-4) 0 0;
    padding:0;
    text-align:left;
}
.history-entry{
    padding:var(--space-4);
    margin-top:var(--space-3);
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
}
.history-entry-head{
    display:flex;
    justify-content:space-between;
    gap:var(--space-3);
    align-items:baseline;
}
.history-entry-num{ font-weight:900; font-size:14px; }
.history-entry-date{ color:var(--muted); font-size:12px; font-weight:700; }
.history-entry-rotation{border-color:var(--brand);background:rgba(var(--brand-rgb),.05);}
.history-entry-rotation .history-entry-num{color:var(--brand-deep);}
.history-rotation-keys code{font-family:var(--font-mono);font-size:12px;}
.history-changes{
    margin:var(--space-2) 0 0;
    padding-left:var(--space-5);
    font-size:13px;
}
.history-changes li{ margin-top:2px; }
.history-entry-meta{
    margin-top:var(--space-2);
    font-size:11px;
    color:var(--muted);
}
.history-entry-meta code{ font-family:var(--font-mono); }
.history-empty,.history-foot,.history-prechain{
    margin-top:var(--space-4);
    font-size:13px;
    color:var(--muted);
}

/* v3.2: pre-send address check */
.presend-check{
    /* Section-level block: matches the 20px rhythm of the warning, vouches,
       and visitor-actions blocks below it. */
    margin-top:var(--space-5);
    padding:var(--space-4);
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
}
.presend-title{
    font-size:13px;
    font-weight:900;
    margin-bottom:var(--space-1);
}
.presend-sub{
    font-size:12px;
    color:var(--muted);
    margin:0 0 var(--space-3);
}
.presend-row{
    display:flex;
    gap:var(--space-2);
    align-items:center;
}
.presend-input{
    flex:1 1 auto;
    min-width:0;
    font-family:var(--font-mono);
    font-size:13px;
}
.presend-btn{ flex:0 0 auto; }
.presend-result{
    margin:var(--space-2) 0 0;
    font-size:12px;
    font-weight:700;
}
.presend-result.presend-ok{ color:var(--success-deep); }
.presend-result.presend-bad{ color:var(--danger-deep); }
.qr-request-link{
    display:inline-block;
    margin-top:var(--space-px-6);
    font-size:12px;
    font-weight:800;
    color:var(--brand-ink);
    text-decoration:none;
}
.qr-request-link:hover{ text-decoration:underline; }

/* Proof modals (ownership + manifest) read as one left column under the
   centered title; scoped so QR/Share/Social modal one-liners stay centered. */
.ownership-modal-card .tagline{
    text-align:left;
    /* .tagline is a centered 330px block by default — inside the proof modals
       that floats the intro right of the full-width column below it. Span the
       same column instead. */
    max-width:none;
    margin-left:0;
    margin-right:0;
}
.bitsy-modal-card .manifest-chain-note{
    margin:0 0 var(--space-2);
    font-size:12px;
    font-weight:700;
    color:var(--success-deep);
    text-align:left;
}

.bitsy-modal-card .cell-muted{
    margin:2px 0 var(--space-2);
}

.qr-actions .btn,
.qr-actions .secondary{
    min-width:132px;
}

@media(max-width:520px){
    .bitsy-modal{
        padding:var(--space-px-14);
    }

    .bitsy-modal-card{
        padding:var(--space-5);
        border-radius:var(--radius-lg);
    }

    .qr-value{
        max-width:100%;
        font-size:11px;
    }

    .qr-actions .btn,
    .qr-actions .secondary{
        width:100%;
    }
}

/* Premium interaction polish */
::selection{
    background:rgba(var(--brand-rgb),.18);
    color:var(--ink);
}

.profile-accent-card ::selection{
    background:rgba(var(--brand-rgb),.18);
    color:var(--ink);
}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}

/* Skip link (WCAG 2.4.1): the first focusable element on the page. Off-screen
   until it receives keyboard focus, then drops in at the top-left; the shared
   header wires it to focus whatever <main> the page rendered. Mouse users never
   see it. */
.skip-link{
    position:fixed;
    top:-100px;
    left:16px;
    z-index:1000;
    padding:var(--space-px-10) var(--space-px-18);
    border-radius:var(--radius-md);
    background:var(--ink);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:top .16s ease;
}
.skip-link:focus{
    top:16px;
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}
/* the skip target is a non-interactive container; don't ring the whole region */
main:focus{ outline:none; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:none;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--field-focus);
    box-shadow:0 0 0 3px var(--field-focus);
}

/* Destructive zones (account deletion, compromise flagging) turn the field
   focus ring red to match the danger context instead of clashing with the
   purple accent. #cf2020 holds 5.41:1 on the white field (WCAG 1.4.11). The
   red danger buttons keep their own outline, since a red ring on a red fill
   would be invisible. */
.danger-zone,
.compromise-card{
    --field-focus:var(--danger-deep);
}

.btn,
.primary,
.secondary,
.ghost,
.set-preferred,
.copy,
.theme-card,
.nav a{
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}

.btn:not(.primary):hover,
.secondary:hover,
.ghost:hover,
.set-preferred:hover,
.copy:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(var(--shadow-rgb),.14);
}

.primary:hover{
    transform:translateY(-1px);
    box-shadow:0 20px 34px rgba(var(--brand-rgb),.32);
}

.profile-accent-card .btn:not(.primary):hover,
.profile-accent-card .secondary:hover,
.profile-accent-card .copy:hover,
.profile-accent-card .set-preferred:hover,
.profile-accent-modal .btn:not(.primary):hover,
.profile-accent-modal .secondary:hover{
    box-shadow:0 14px 28px rgba(var(--brand-rgb),.18);
}

.profile-accent-card .primary:hover,
.profile-accent-modal .primary:hover{
    box-shadow:0 20px 34px rgba(var(--brand-rgb),.30);
}

.btn:active,
.primary:active,
.secondary:active,
.ghost:active,
.set-preferred:active,
.copy:active,
.theme-card:active,
.nav a:active{
    transform:translateY(1px);
    box-shadow:none;
}

.profile-accent-modal{
    --focus-ring:var(--brand-ink);
    --focus-shadow:rgba(var(--brand-rgb),.16);
}

.profile-accent-card input:focus,
.profile-accent-card textarea:focus,
.profile-accent-card select:focus{
    border-color:var(--brand-ink);
    box-shadow:0 0 0 3px var(--brand-ink);
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

    .source-row:hover,
    .theme-card:hover,
    .btn:hover,
    .primary:hover,
    .secondary:hover,
    .ghost:hover,
    .set-preferred:hover,
    .copy:hover,
    .nav a:active{
        transform:none !important;
    }
}

/* Public profile accent propagation */
.profile-accent-card{
    --focus-ring:var(--brand-ink);
    --focus-shadow:rgba(var(--brand-rgb),.16);
    border-color:rgba(var(--brand-rgb),.16);
    box-shadow:
        0 24px 80px rgba(var(--shadow-rgb),.14),
        0 26px 90px rgba(var(--brand-rgb),.10);
}

.profile-accent-card:before{
    background:
        radial-gradient(circle,rgba(var(--brand-rgb),.20),transparent 62%),
        linear-gradient(135deg,rgba(var(--brand-rgb),.16),rgba(var(--brand2-rgb),.10));
}

.profile-accent-card img.avatar{
    border-color:rgba(var(--brand-rgb),.28);
    box-shadow:
        0 20px 38px rgba(var(--brand-rgb),.22),
        0 0 0 9px rgba(var(--brand-rgb),.07);
}

.profile-accent-card .section-title{
    color:rgba(var(--brand-rgb),.88);
}

.profile-accent-card .asset-group{
    border-color:rgba(var(--brand-rgb),.08);
    box-shadow:0 12px 28px rgba(var(--brand-rgb),.05);
    padding:var(--space-4);
}

.profile-accent-card .source-row:hover{
    box-shadow:0 12px 24px rgba(var(--brand-rgb),.10);
}

.profile-accent-card .source-row.preferred{
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(var(--brand-rgb),.075));
    border-color:rgba(var(--brand-rgb),.34);
    box-shadow:0 14px 30px rgba(var(--brand-rgb),.11);
}

.profile-accent-card .preferred-asset-badge,
.profile-accent-card .preferred-asset-button{
    background:rgba(var(--brand-rgb),.12);
    color:var(--brand-deep);
}

.profile-accent-card .preferred-asset-badge:hover,
.profile-accent-card .preferred-asset-button:hover{
    box-shadow:none;
}

.profile-accent-card .warning{
    border-color:rgba(var(--brand-rgb),.18);
}

.profile-accent-modal .bitsy-modal-card{
    box-shadow:
        0 28px 90px rgba(var(--ink-rgb),.28),
        0 0 0 1px rgba(var(--brand-rgb),.08),
        0 22px 70px rgba(var(--brand-rgb),.12);
}

.profile-accent-modal .qr-box{
    box-shadow:
        0 14px 32px rgba(var(--shadow-rgb),.10),
        0 0 0 8px rgba(var(--brand-rgb),.04);
}

.profile-accent-modal .qr-value{
    border:1px solid rgba(var(--brand-rgb),.08);
}

.profile-accent-modal .bitsy-modal-card h2{
    color:var(--brand-ink);
}

/* Profile polish */
.profile-cover{
    position:relative;
    margin:calc(-1 * var(--space-px-22)) calc(-1 * var(--space-px-22)) var(--space-px-18);
    overflow:hidden;
    border-radius:var(--radius-lg) var(--radius-lg) 24px 24px;
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    height: 180px;
}

.profile-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.profile-cover:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.20));
}

.profile-cover + .warning,
.profile-cover + .profile{
    margin-top:0;
}

.profile-meta-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin:var(--space-px-14) auto 0;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:var(--space-4);
}

.profile-meta-row span{
    display:inline-flex;
    padding:var(--space-px-6) var(--space-px-9);
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    align-items:center;
    gap:var(--space-px-6);
}
/* These are info chips, not buttons. On hover only the icon shifts to the
   visitor-set accent (the inline SVG uses currentColor) — a quiet, personal
   touch that never pretends the chip is clickable, and nothing moves, so there
   is no edge-flicker. */
.profile-meta-row span:hover .meta-chip-icon{
    color:var(--brand);
}

/* Tier 2 freshness chip: a quiet, positively-tinted attestation that the
   owner confirmed addresses are current. Lives directly under the Assets
   section title — beside the addresses it vouches for. Green echoes the
   verified-owner cue without shouting; the icon inherits currentColor. */
.assets-fresh-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-2);
    margin:calc(-1 * var(--space-1)) 0 var(--space-3);
}
.assets-fresh-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
    padding:var(--space-px-5) var(--space-px-10);
    border-radius:var(--radius-pill);
    font-size:12px;
    font-weight:800;
    color:var(--success-deep);
    background:rgba(var(--success-rgb),.12);
    border:1px solid rgba(var(--success-rgb),.3);
}
.assets-fresh-chip .meta-chip-icon{
    color:var(--success-deep);
}

/* The 0–360 angle field matches the 110px color swatches stacked above it,
   so the three gradient controls read as one column. Scoped to the number
   input — .background-gradient-field also wraps the Gradient Color swatch
   (it's the gradient-mode show/hide hook). Selects stay full-width app-wide. */
.background-gradient-field input[type="number"]{
    max-width:110px;
}

/* Owner-side freshness heartbeat bar at the top of the Assets manager. */
.freshness-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    margin-bottom:var(--space-3);
    border-radius:var(--radius-md);
    background:rgba(var(--brand-rgb),.05);
    border:1px solid rgba(var(--brand-rgb),.12);
}
.freshness-copy{
    display:flex;
    align-items:baseline;
    gap:var(--space-px-6);
    flex-wrap:wrap;
    font-size:13px;
}
.freshness-label{
    color:var(--muted);
    font-weight:700;
}
.freshness-value{
    color:var(--ink-2);
    font-weight:800;
}
.freshness-form{ margin:0; }

.profile-link-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--space-2);
    margin:var(--space-px-14) auto 0;
}

.profile-link-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-6);
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.74);
    border:1px solid var(--hairline);
    color:var(--ink-3);
    font-size:12px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(var(--shadow-rgb),.06);
    min-height: 38px;
    padding:var(--space-2) var(--space-px-11);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(255,255,255,.72);
}

.profile-link-chip:hover{
    transform:translateY(-1px);
    color:var(--brand-ink);
    box-shadow:0 12px 24px rgba(var(--shadow-rgb),.10);
}

.profile-extra-panel,
.appearance-section{
    display:grid;
    gap:var(--space-3);
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.58);
    border:1px solid var(--hairline);
}

.profile-extra-panel h2{
    margin:0;
    font-size:16px;
    letter-spacing:-.03em;
}

.status-group{
    display:grid;
    gap:var(--space-3);
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.58);
    border:1px solid var(--hairline);
}
.status-group label{margin:0;}
.status-group .form-actions{align-items:center;}

.appearance-section h2{
    margin:0;
    line-height:1.05;
}

.background-custom-fields{
    display:grid;
    gap:var(--space-3);
}

.background-custom-fields label{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.background-preview{
    min-height:88px;
    border-radius:var(--radius-md);
    border:1px solid var(--hairline);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
}

.footer-version{
    color:var(--muted);
    font-weight:900;
}

/* v1.3 Identity social/profile chips */
.social-editor-grid{
    display:grid;
    gap:var(--space-3);
    grid-template-columns: 1fr;
}

.social-label-icon{
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
    margin-right:var(--space-px-6);
    border-radius:8px;
    background:var(--hairline);
    color:var(--ink);
    font-size:12px;
    font-weight:900;
    vertical-align:middle;
    overflow: hidden;
}
.profile-link-icon{
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:9px;
    background:var(--hairline);
    color:var(--ink);
    font-size:12px;
    font-weight:900;
    line-height:1;
    flex:0 0 auto;
    overflow: hidden;
}

.profile-link-chip.website .profile-link-icon,
.profile-link-chip.email .profile-link-icon{
    background:rgba(var(--brand-rgb),.12);
    color:var(--brand-deep);
}

.profile-link-chip.instagram .profile-link-icon{background:linear-gradient(135deg,#feda75,#d62976,#4f5bd5);color:#fff}
.profile-link-chip.tiktok .profile-link-icon{background:#111;color:#fff}
.profile-link-chip.facebook .profile-link-icon{background:#1877f2;color:#fff}
.profile-link-chip.youtube .profile-link-icon{background:#ff0000;color:#fff}
.profile-link-chip.linkedin .profile-link-icon{background:#0a66c2;color:#fff}
.profile-link-chip.threads .profile-link-icon{background:#111;color:#fff}
.profile-link-chip.bluesky .profile-link-icon{background:#1185fe;color:#fff}
.profile-link-chip.reddit .profile-link-icon{background:#ff4500;color:#fff}
.profile-link-chip.twitch .profile-link-icon{background:#9146ff;color:#fff}

@media(max-width:520px){

    .profile-link-chip{
        padding:var(--space-2);
    }

    .profile-link-label{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }

    .profile-link-icon{
        width:24px;
        height:24px;
    }
}

/* v1.3.1 profile layout polish */
.social-links-editor input::placeholder{
    font-size:13px;
}

.public-profile-card{
    background:rgba(255,255,255,.9);
    box-shadow:0 28px 90px rgba(var(--shadow-rgb),.20);
}
/* Even the card's optical top/bottom ONLY when there is no cover photo: with no
   cover the top carries +18px (profile padding-top + avatar nudge) over the base
   22px card padding, so match it at the bottom. A cover sits flush to the top
   edge and defines its own top, so those cards keep the base 22px bottom. */
.public-profile-card:not(:has(.profile-cover)){
    padding-bottom:calc(var(--space-px-22) + var(--space-px-18));
}

.public-profile-card .profile{
    padding-top:var(--space-4);
}

.public-profile-card .avatar{
    margin-top:2px;
}
.contact-chip{
    padding:var(--space-px-9) var(--space-3);
}
.public-profile-card .section-title{
    margin-top:var(--space-px-18);
}

@media(max-width:520px){
    .profile-cover{
        height:150px;
    }

    .contact-chip .profile-link-label{
        position:static;
        width:auto;
        height:auto;
        padding:0;
        margin:0;
        overflow:visible;
        clip:auto;
        white-space:normal;
        border:0;
    }
}

/* v1.3.3a demo/public-profile row fix */
@media(min-width:521px){
    .source-row .public-network-warning{
        max-width:none;
    }
}

/* v1.3.4 safe visual polish */
.profile .url .pulse{
    background:var(--brand);
    box-shadow:0 0 0 6px rgba(var(--brand-rgb,124,60,255),.13);
}

#bio-input{
    min-height:138px;
    resize:vertical;
    line-height:1.55;
}

.dashboard-status-banner{
    margin:var(--space-4) 0;
    padding:var(--space-px-14);
    border-radius:var(--radius-md);
    font-size:13px;
    font-weight:800;
    line-height:1.45;
}

.dashboard-status-banner.success{
    background:rgba(var(--success-rgb),.13);
    border:1px solid rgba(var(--success-rgb),.24);
    color:var(--success-deep);
}

.dashboard-status-banner.neutral{
    background:rgba(var(--ink-rgb),.055);
    border:1px solid var(--hairline);
    color:var(--ink-4);
}
.exchange,
.address{
    display:flex;
    align-items:center;
    min-height:40px;
    line-height:1.25;
}
@media(min-width:941px){
    .hero-upgraded{
        grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
        gap:34px;
    }
}
@media(min-width:1040px){
    .hero-upgraded{
        padding:54px 46px;
    }
}

@media(max-width:860px){
    .hero-preview{
        justify-self:stretch;
        max-width:none;
    }
}

/* v1.3.5 social icon rendering fix */
.profile-link-icon img,
.social-label-icon img{
    width:16px;
    height:16px;
    flex:0 0 auto;
    display: block;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

.profile-link-icon:has(img),
.social-label-icon:has(img){
    font-size:0;
}

.profile-link-icon:has(img){
    background:var(--hairline);
    color:inherit;
}

.contact-chip .profile-link-icon:has(img){
    background:rgba(var(--brand-rgb),.12);
}
.profile-link-chip.discord .profile-link-icon,
.social-label-icon.discord{
    background:var(--hairline);
}

.profile-link-chip.telegram .profile-link-icon,
.social-label-icon.telegram{
    background:var(--hairline);
}

/* v1.3.5a monochrome social icon fix */

.contact-chip .profile-link-icon,
.profile-link-chip.website .profile-link-icon,
.profile-link-chip.email .profile-link-icon{
    color:var(--ink) !important;
    background:rgba(var(--brand-rgb),.10) !important;
}

.profile-link-chip.x .profile-link-icon,
.profile-link-chip.instagram .profile-link-icon,
.profile-link-chip.youtube .profile-link-icon,
.profile-link-chip.tiktok .profile-link-icon,
.profile-link-chip.facebook .profile-link-icon,
.profile-link-chip.linkedin .profile-link-icon,
.profile-link-chip.threads .profile-link-icon,
.profile-link-chip.bluesky .profile-link-icon,
.profile-link-chip.reddit .profile-link-icon,
.profile-link-chip.discord .profile-link-icon,
.profile-link-chip.twitch .profile-link-icon,
.profile-link-chip.telegram .profile-link-icon{
    background:var(--hairline) !important;
    color:var(--ink) !important;
}

/* v1.3.6 Claude visual pass */

/* 1. Accent-correct primary buttons: no baked-in purple on custom profiles. */
.profile-accent-card .profile-actions .primary,
.profile-accent-modal .primary{
    background:var(--brand) !important;
    color:var(--brand-on) !important;
    box-shadow:0 18px 32px rgba(var(--brand-rgb,124,60,255),.24) !important;
}

/* 2. Authenticated page shell consistency. */
.sidebar,
.main-card{
    align-self:start;
    min-width:0;
}

.profile-extra-panel,
.appearance-section,
.danger-zone,
.table-card{
    overflow:hidden;
}

/* 3. Equal 2×2 stat tiles. */
/* 4. Intentional address truncation. */
@supports (mask-image:linear-gradient(to right,#000,#000)){
    .address{
        text-overflow:clip;
        -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);
        mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);
    }
}

/* 5. Real coin icons should sit in true circular tiles. */

/* 6. Demo B avatar gets the premium Bitsy mark treatment. */
.bitsy-demo-avatar{
    position:relative;
    background:linear-gradient(135deg,var(--brand),var(--brand-deeper)) !important;
    color:white;
    box-shadow:
        0 20px 38px rgba(var(--brand-rgb,124,60,255),.28),
        0 0 0 9px rgba(var(--brand-rgb,124,60,255),.07) !important;
    font-size: 0;
}

.bitsy-demo-avatar:before,
.bitsy-demo-avatar:after{
    content:"";
    position:absolute;
    border-radius:var(--radius-pill);
    background:white;
}

.bitsy-demo-avatar:before{
    width:38%;
    height:38%;
    left:25%;
    top:23%;
}

.bitsy-demo-avatar:after{
    width:20%;
    height:20%;
    right:24%;
    bottom:26%;
    opacity:.82;
}
/* 7. Replace emoji metadata feeling with consistent tiny vector chips. */

/* 8. Social icons: keep uploaded monochrome SVGs readable, not solid brand blobs. */
.profile-link-chip .profile-link-icon,
.social-label-icon{
    background:var(--hairline) !important;
    color:var(--ink) !important;
}

.social-label-icon img{
    width:14px;
    height:14px;
}

/* 9. Profile/settings pages line up visually with the rest of the app. */
.danger-zone{
    background:rgba(255,255,255,.58);
    border:1px solid rgba(var(--danger-rgb),.30);
    border-radius:var(--radius-md);
    padding:var(--space-4);
}
/* v4.0: the Danger Zone keeps its look but takes the same 22px padding as
   .panel, so its section bottom reads like every other settings section. */
.danger-zone{
    border:1px solid rgba(var(--danger-rgb),.30);
    padding:var(--space-px-22);
    margin-top:var(--space-4);
}
.danger-zone > :last-child{margin-bottom:0;}

@media(max-width:860px){
    .grid{
        grid-template-columns:1fr;
    }
}

/* v1.3.7 polish fixes */

/* Use actual SVG icons for metadata chips instead of fragile CSS glyphs. */
.meta-chip-icon{
    place-items:center;
    width: 15px;
    height: 15px;
    min-width: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    position: relative;
    top: 0;
    line-height: 0;
    background: transparent !important;
    transition:color .16s ease;
}

/* Sidebar stat tiles: make both grid rows exactly equal. */
/* Unified checkbox styling — every checkbox on the site renders identically:
   consistent size, brand accent color, and a tight focus ring rather than the
   oversized ring that text inputs use. */
input[type="checkbox"]{
    -webkit-appearance:auto;
    appearance:auto;
    width:18px;
    min-width:18px;
    height:18px;
    min-height:18px;
    flex:0 0 18px;
    margin:0;
    padding:0;
    accent-color:var(--brand);
    box-shadow:none;
    cursor:pointer;
    vertical-align:middle;
}

input[type="checkbox"]:focus{
    box-shadow:none;
}

input[type="checkbox"]:focus-visible{
    outline:2px solid var(--field-focus);
    outline-offset:2px;
    box-shadow:none;
}
.visibility-card span{
    min-width:0;
}

/* v1.3.8 routing/icon cleanup */

.meta-chip-icon:before,
.meta-chip-icon:after{
    content:none !important;
    display:none !important;
}

.meta-chip-icon img{
    width:14px;
    height:14px;
    display:block;
    object-fit:contain;
    transform:none !important;
}
.meta-chip-icon svg{
    width:13px;
    height:13px;
    min-width:13px;     /* pin both axes so the inline SVG can't collapse to zero as a flex item inside the padded chip (the flexbox SVG-sizing bug) */
    min-height:13px;
    flex:none;
    display:block;
}

.profile-link-chip.x .profile-link-icon{
    background:rgba(255,255,255,.84) !important;
    color:var(--ink) !important;
}

/* v1.3.9 custom asset color UX */

.asset-color-form .asset-color-row[style*="display: none"]{
    margin:0 !important;
}

/* Preset assets use official SVG logos, not generated color tiles. */
.asset-icon:has(img){
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    padding:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
}

.asset-icon:has(img) img{
    width:100% !important;
    height:100% !important;
    border-radius:50% !important;
    object-fit:contain !important;
}

/* Address truncation should be intentional. */
/* v1.3.9a preset asset form cleanup */
.preset-asset-note{
    display:none;
    margin-top:var(--space-2);
}

.custom-asset-field[style*="display: none"],
.asset-color-row[style*="display: none"]{
    margin:0 !important;
}

.asset-color-form .custom-asset-field,
.asset-color-form .asset-color-row{
    transition:opacity .15s ease;
}

/* v1.4.0 two-line public address layout */
.public-address-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--space-3);
    /* min-height:0 keeps the row from reserving extra height (so a preferred
       badge sits right under the address); the mobile media query below
       overrides the grid + alignment for the stacked layout. */
    min-height:0;
    padding:var(--space-px-10) var(--space-3);
    align-items:center;
}

.address-copy{
    min-width:0;
    text-align:left;
}

.address-meta{
    color:var(--ink-2);
    font-size:12px;
    font-weight:900;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:var(--space-1);
    word-spacing: 3px;
    letter-spacing: .005em;
}

.public-address-row .address{
    width:100%;
    min-width:0;
    max-width:100%;
    flex:none;
    color:var(--ink-5);
    font-family:var(--font-mono);
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-mask-image:none;
    mask-image:none;
    font-size: 12px;
    letter-spacing: -.025em;
    display: block;
    min-height: 0;
    height: auto;
    line-height: 1;
    margin:0;
    align-items: unset;
    padding:0;
}

.address-actions{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:0 0 auto;
    align-self: center;
}

.public-address-row .public-network-warning{
    grid-column:1 / -1;
}

/* Homepage preview uses the same two-line pattern. */

/* v1.4.1 social modal + public address polish */

.social-menu-button .profile-link-icon{
    font-weight:900;
    line-height:1;
    font-size: 0;
}

.social-modal-card{
    text-align:left;
}

.social-modal-card h2,
.social-modal-card .tagline{
    text-align:center;
}

.social-modal-list{
    display:grid;
    margin-top:var(--space-px-14);
    gap:var(--space-px-10);
}

.social-modal-link{
    display:grid;
    align-items:center;
    gap:var(--space-px-10);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.78);
    border:1px solid var(--hairline);
    color:var(--ink);
    text-decoration:none;
    font-weight:900;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-height: 52px;
    grid-template-columns: 38px minmax(0,1fr);
    padding:var(--space-px-10) var(--space-3);
}

.social-modal-link:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(var(--brand-rgb,124,60,255),.14);
    border-color:rgba(var(--brand-rgb,124,60,255),.22);
}

.social-modal-icon{
    border-radius:var(--radius-pill);
    display:grid;
    place-items:center;
    background:var(--hairline);
    color:var(--ink);
    font-size:0;
    width: 38px;
    height: 38px;
}

.social-modal-icon img{
    object-fit:contain;
    display:block;
    width: 18px;
    height: 18px;
}

.social-modal-arrow{
    color:var(--muted);
    font-size:12px;
    display: none;
}

/* More balanced two-line address rows. */
/* v1.4.2 share icon + width/address polish */

/* Slightly wider public profile card so typical crypto addresses fit more often. */

/* Keep Website / Email / Social as an intentional equal-width trio. */
.contact-link-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-px-10);
}

.contact-link-row .profile-link-chip{
    min-width:112px;
    justify-content:center;
}

.social-menu-button{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    cursor:pointer;
    font:inherit;
}
/* Make two-line address rows look centered, not top-heavy. */
.public-address-row .copy{
    min-height:44px;
    padding:var(--space-px-9) var(--space-3);
    min-width: 64px;
    padding-left:var(--space-3);
    padding-right:var(--space-3);
}

/* Preferred badge should not crowd the address. */

/* Homepage preview mirrors the public card behavior. */

@media(max-width:520px){

    .contact-link-row .profile-link-chip{
        min-width:0;
        flex:1 1 30%;
    }

    .public-address-row{
        min-height:0;
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .public-address-row .address{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:normal;
        overflow-wrap:normal;
    }

    .address-actions{
        width:100%;
        justify-content:flex-start;
    }

    .public-address-row .copy{
        flex:1 1 auto;
    }
}

/* v1.4.2a width/social/meta spacing polish */

.contact-link-row .profile-link-chip,
.contact-link-row .profile-link-label,
.social-menu-button,
.social-menu-button .profile-link-label{
    font-size:12px;
    font-weight:900;
    line-height:1.1;
    color:var(--ink-3) !important;
}

/* v1.4.3 social direct/modal + hover restore */

/* Revert the over-wide v1.4.2 shell while keeping a small width gain. */
/* Keep the trio consistent, but do not override accent hover color. */

.profile-accent-card .contact-link-row .profile-link-chip:hover,
.profile-accent-card .social-menu-button:hover{
    color:var(--brand-ink) !important;
}

.profile-accent-card .contact-link-row .profile-link-chip:hover .profile-link-label,
.profile-accent-card .social-menu-button:hover .profile-link-label{
    color:var(--brand-ink) !important;
}

.social-menu-button .profile-link-icon img{
    width:15px;
    height:15px;
}

/* Address row balance. */
/* Modal list polish for 2+ social profiles. */
/* Homepage preview mirrors the public profile's Website / Email / Social trio. */

/* v1.4.4 analytics/self-count + address row polish */

/* v1.4.5 preferred badge + homepage demo polish */

/* Asset-level preferred badge sits beside the asset title, not on its own line. */

.asset-title-row strong{
    min-width:0;
}

/* Address-level preferred badge intentionally uses the space below the address. */

.address-preferred-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    border-radius:var(--radius-pill);
    background:rgba(var(--brand-rgb,124,60,255),.12);
    color:var(--brand,var(--brand-deep));
    font-size:10px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    margin-top:var(--space-px-5);
    padding:var(--space-px-5) var(--space-px-10);
}

.source-row.preferred .address-preferred-badge{
    background:rgba(var(--brand-rgb,124,60,255),.14);
}

/* Homepage preview now mirrors the real demo profile more closely. */

@media(max-width:520px){
    .asset-title-row{
        flex-wrap:wrap;
    }

}

/* v1.4.6 demo single-source + preferred badge polish */

/* Homepage now frames the real /demo page so it stays consistent. */

/* Asset preferred badge belongs on the right side of the asset header. */
.asset-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-px-10);
    width:100%;
    min-width:0;
}

/* Standardize symbols: star for asset-level, check for address-level. */

.address-preferred-badge:before{
    content:"✓" !important;
    margin-right:var(--space-1);
}

/* Address Preferred uses natural space below address without reserving a giant empty row. */

/* Keep legacy homepage preview CSS harmless if older markup exists somewhere. */

/* v1.4.7 network labels + homepage demo cleanup */

/* Stop iframe-preview styling from affecting the homepage if cached markup exists. */

/* Homepage: simple CTA to the real /demo, avoiding a second hand-maintained mockup. */
.hero-demo-cta{
    display:flex;
    justify-content:flex-end;
}

.demo-cta-card{
    width:min(390px,100%);
    margin-left:auto;
    padding:var(--space-7);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.74);
    box-shadow:0 24px 70px rgba(var(--shadow-rgb),.16);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    text-align:center;
}

.demo-cta-logo{
    position:relative;
    width:74px;
    height:74px;
    margin:0 auto var(--space-3);
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--brand),var(--brand-deeper));
    box-shadow:0 20px 38px rgba(var(--brand-rgb),.28);
}

.demo-cta-logo:before,
.demo-cta-logo:after{
    content:"";
    position:absolute;
    border-radius:var(--radius-pill);
    background:white;
}

.demo-cta-logo:before{
    width:28px;
    height:28px;
    left:19px;
    top:18px;
}

.demo-cta-logo:after{
    width:15px;
    height:15px;
    right:18px;
    bottom:18px;
    opacity:.82;
}

.demo-cta-card p{
    margin:0 auto var(--space-4);
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
    max-width: 320px;
}

/* Asset preferred stays right-aligned in the asset header. */

.asset-title-copy{
    min-width:0;
}

.asset-title-row .preferred-asset-badge{
    margin-left:auto;
    margin-top:0;
    flex:0 0 auto;
}

/* Standard symbols. */
.preferred-asset-badge:before,
.preferred-asset-button:before{
    content:"★" !important;
}

@media(max-width:940px){
    .hero-demo-cta{
        justify-content:center;
    }

    .demo-cta-card{
        margin:var(--space-1) auto 0;
    }
}

@media(max-width:520px){

    .asset-title-row .preferred-asset-badge{
        margin-left:0;
    }
}

/* v1.4.8 preferred badge spacing + memo/homepage polish */

/* Kill legacy address min-height/flex rules so Preferred sits as the next normal line. */

.memo-warning{
    background:rgba(255,207,74,.18);
    border:1px solid rgba(184,129,0,.12);
    border-radius:var(--radius-sm);
    padding:var(--space-2) var(--space-px-10);
}

/* Homepage CTA copy polish. */
.demo-cta-card .btn{
    margin-top:2px;
}

/* v1.4.9 current-files preferred badge guard */
.public-address-row .address-copy{
    grid-template-columns:1fr;
    min-height:0;
    justify-content:start;
    align-content:center;
    display: flex;
    flex-direction: column;
    /* the gap is the ONLY vertical spacing in this stack: every child runs
       line-height:1 and margin:0, so each step is exactly var(--space-px-5) regardless of
       which font (and which font leading) the visitor's browser renders */
    gap: var(--space-px-5);
    flex: 1 1 auto;
    min-width: 0;
}

.public-address-row .address-meta{
    margin:0;
    line-height:1;
}
.public-address-row .address-preferred-badge{
    margin:2px 0 0 0;
    min-height:0;
    /* top-biased padding centres the descenderless caps; matches the
       assets-page "Preferred" badge so the two pages stay consistent */
    padding:var(--space-px-6) var(--space-px-9) var(--space-px-5);
    align-self:start;
    line-height:1;
}

/* v1.4.9a assets form width fix */
.asset-group,
.panel,
.edit-address-form,
.asset-color-form{
    min-width:0;
}
.asset-color-row > label,
.asset-color-row select,
.asset-color-row input{
    min-width:0;
}

.asset-preset-select-row,
.asset-custom-color-row{
    min-width:0;
    max-width:100%;
}

@media(max-width:860px){
    .asset-color-row{
        grid-template-columns:1fr;
    }
}

/* =====================================================================
   ADDRESS-ROW & PREFERRED-CONTROL SYSTEM        (single source of truth)
   ---------------------------------------------------------------------
   Replaces the old layered "v1.4.9b/c/d + override" manager blocks.
   The manager and the public profile now use DIFFERENT class roots, so
   a manager change can never leak onto the public page again (the bug
   behind the copy-button, meta-clipping and padding regressions):

     Manager (assets.php) .... .manager-address-row + .manager-address-*
                               .main-card .asset-group     (card padding)
     Public profile (u.php) .. .public-address-row + .address-*
                               .profile-accent-card .asset-group

   The manager rules below need no !important - the .manager-* classes
   are defined only here. The shared pill controls and the public rows
   keep a few !important flags to sit on top of the older public blocks
   further up the file (those are now dead and can be pruned later).
   To change a row or a control, edit it HERE.
   ===================================================================== */

/* ----------  pill controls (badges + buttons)  -----------------------
   Two pill sizes, both with identical box within a pair so that toggling
   preferred only swaps colour, never size or layout.

   The vertical padding is intentionally top-biased (more above than below).
   The labels ("Preferred Asset", "Preferred", "Set Preferred"…) have no
   descenders, so with a symmetric box the caps float optically high; the
   extra top padding pushes the ink down to the true visual centre. */

/* base size for the generic status chip + buttons (public profile,
   verification banner, etc. — unchanged from before) */
.status,
.address-preferred-badge,
.set-preferred{
    min-height:26px;
    padding:var(--space-px-5) var(--space-px-10);
    font-size:11px !important;
    line-height:1;
    font-weight:900;
    border-radius:var(--radius-pill);
    white-space:nowrap;
}

/* asset-level pair: "Preferred Asset" badge + "Set Preferred Asset" button */
.preferred-asset-badge,
.preferred-asset-button,
.preferred-asset-toggle{
    min-height:0;
    padding:var(--space-2) var(--space-px-10) var(--space-2);
    font-size:11px !important;
    line-height:1;
    font-weight:900;
    border-radius:var(--radius-pill);
    white-space:nowrap;
}

/* address-level pair: "Preferred" badge + "Set Preferred" button.
   A little tighter than the asset pill so it doesn't leave excess white
   space under the address row. Scoped to the manager so the public
   profile's own .status / .set-preferred keep the base size above. */
.manager-address-status,
.manager-set-preferred{
    min-height:0;
    padding:var(--space-px-6) var(--space-px-9) var(--space-px-5);
    font-size:11px !important;
    line-height:1;
    font-weight:900;
    border-radius:var(--radius-pill);
    white-space:nowrap;
}

/* =========================  MANAGER (assets.php)  ================= */

/* card + header padding, scoped to the dashboard shell */
.main-card .asset-group{
    padding:var(--space-5);
}
.asset-group > .group-head{          /* header flush to card inset, 14px below */
    padding:0 0 var(--space-px-14);
}

/* the row: grid = [drag] [stacked copy] [actions] */
.manager-address-row{
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto auto;
    column-gap:var(--space-3);
    row-gap:var(--space-1);
    align-items:start;
    padding:var(--space-px-14);
}
.manager-address-row .address-drag-handle{
    grid-row:auto;
    align-self:start;
}

/* the stacked text column (meta / address / preferred control) */
.manager-address-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    min-width:0;
}
.manager-address-topline{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    margin:0;
    min-height:0;
    min-width:0;
    line-height:1.2;
}
.manager-address-meta{
    display:flex;
    align-items:center;
    gap:var(--space-px-5);
    margin:0;
    min-width:0;
    color:var(--ink-2);
    font-size:12px;
    font-weight:900;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.manager-address-dot{
    opacity:.65;
}
.manager-address-value{
    display:block;
    width:100%;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:700;
    color:var(--ink-5);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.manager-address-status{
    align-self:flex-start;
    margin:0;
}
/* the public mobile rule `.source-row .address { order:3; flex-basis:100% }`
   (wraps the address on small public screens) also matches the manager value
   via the shared .address class - neutralise it here so the manager row keeps
   its order on mobile. Same specificity as the leak, but later, so it wins. */
.manager-address-row .address{
    order:initial;
    flex:none;
    flex-basis:auto;
}

/* right-hand action cluster (Edit / Delete) */
.manager-address-actions{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:0 0 auto;
    justify-self:end;
}
.manager-address-actions form{
    margin:0;
}

/* manager mobile: 2-col grid; actions + preferred form go full width */
@media(max-width:720px){
    .address-list{
        padding-left:0;
        padding-right:0;
    }
    .manager-address-row{
        grid-template-columns:auto minmax(0,1fr);
    }
    .manager-address-actions{
        grid-column:1 / -1;
        width:100%;
        justify-self:stretch;
        display:flex;
        justify-content:flex-start;
    }
    .manager-preferred-form{
        align-self:flex-start;
    }
    .manager-address-actions form,
    .manager-address-actions .secondary{
        flex:1 1 auto;
        width:100%;
    }
    /* ETH/SOL rows carry a 4th action (Verify). Four buttons crammed on one
       row are unusable at phone widths — wrap them into a 2×2 grid instead.
       Browsers without :has() fall back to the squeezed single row. */
    .manager-address-actions:has(.proof-toggle){
        flex-wrap:wrap;
    }
    .manager-address-actions:has(.proof-toggle) form,
    .manager-address-actions:has(.proof-toggle) .secondary{
        flex:1 1 45%;
        width:auto;
    }
    .manager-set-preferred{
        width:auto;
    }
}

/* =========================  PUBLIC profile (u.php)  ============== */
/* These !important flags override the older public blocks above. */

/* the row: flex strip = [stacked copy ......] [actions] */
.source-row.public-address-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
}
/* =====================  assets-page "Add asset" panel  =========== */
/* Restyle the lone .panel after #asset-list to match the .asset-group cards:
   flat hairline border, lighter fill, soft shadow, no float, so the assets page
   reads as one set. Keeps roomier 20px form padding. Scoped by #asset-list, so
   the .panel blocks on other pages are untouched. */
#asset-list ~ .panel{
    background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border:1px solid var(--hairline);
    box-shadow:0 10px 25px rgba(var(--shadow-rgb),.05);
    padding:var(--space-5);
}

/* ============================================================
   MEMO / DESTINATION-TAG FIELD (v1.5)
   Scoped styles for the optional memo / destination-tag shown in
   the manager rows, public address rows, the form hint, and the
   QR modal note. All new class names except the one defensive
   .public-address-row .address-actions wrap rule.
   ============================================================ */

/* Manager (assets.php): memo line beneath the address value */
.manager-address-memo{
    display:flex;
    align-items:baseline;
    gap:var(--space-px-6);
    margin-top:var(--space-1);
    min-width:0;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.manager-address-memo-label{
    flex:none;
    color:var(--muted);
    font-weight:800;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.manager-address-memo-value{
    min-width:0;
    color:var(--ink-2);
    font-size:12px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Public (u.php): memo line beneath the address */
.address-memo{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:var(--space-px-6);
    margin-top:var(--space-px-6);
}
.address-memo-label{
    flex:none;
    color:var(--muted);
    font-weight:800;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.address-memo-value{
    min-width:0;
    color:var(--ink-2);
    font-size:13px;
    font-weight:700;
    word-break:break-all;
    overflow-wrap:anywhere;
}

/* Compact, secondary-weight copy button for the memo/tag */
.memo-copy{
    background:var(--hairline);
    color:var(--ink-2);
}
.memo-copy:hover{
    background:var(--hairline-strong);
}

/* Allow the two copy buttons to wrap if the row gets tight */
.public-address-row .address-actions{
    flex-wrap:wrap;
}

/* "(optional)" hint inside form labels */
.field-optional{
    color:var(--muted);
    font-weight:600;
    font-size:11px;
}

/* QR modal note shown when the receiving address requires a tag/memo */
.qr-memo-note{
    width:100%;
    max-width:330px;
    margin:var(--space-px-10) auto 0;
    padding:var(--space-3) var(--space-3);
    border-radius:var(--radius-sm);
    background:rgba(var(--brand-rgb,124,60,255),.08);
    color:var(--ink-2);
    font-size:12px;
    line-height:1.45;
    text-align:left;
}
.qr-memo-note-value{
    font-weight:800;
    word-break:break-all;
    overflow-wrap:anywhere;
}

/* ============================================================
   COMBOBOX (v1.5) — custom dropdown for the Label / Network
   preset fields, injected at runtime over the plain inputs.
   Shows the full list on click and supports an "enter your own"
   Other option. New class names only.
   ============================================================ */
.combo{
    position:relative;
    display:block;
    margin-top:var(--space-px-6);
}
.combo input{
    margin-top:0;
    padding-right:var(--space-10);
}
.combo:after{
    content:"";
    position:absolute;
    top:50%;
    right:14px;
    width:12px;
    height:8px;
    transform:translateY(-50%);
    background:var(--field-caret) no-repeat center/12px 8px;
    pointer-events:none;
    transition:transform .15s ease;
}
.combo.combo-open:after{
    transform:translateY(-50%) rotate(180deg);
}
.combo-menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    z-index:60;
    max-height:240px;
    overflow-y:auto;
    padding:var(--space-px-6);
    background:#fff;
    border:1px solid rgba(var(--ink-rgb),.12);
    border-radius:var(--radius-sm);
    box-shadow:0 14px 34px rgba(var(--ink-rgb),.16);
}
.combo-option{
    display:block;
    width:100%;
    margin:0;
    min-height:0;
    padding:var(--space-px-9) var(--space-px-11);
    text-align:left;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    cursor:pointer;
}
.combo-option:hover{
    background:rgba(var(--brand-rgb),.10);
}
.combo-other{
    margin-top:var(--space-1);
    border-top:1px solid var(--hairline-strong);
    border-radius:0;
    color:var(--muted);
    font-style:italic;
}

/* ============================================================
   SELECT CARET (v1.5) — give native <select> menus the same
   custom chevron as the comboboxes, so every field that opens a
   list reads as one family. Plain text inputs stay caret-free.
   ============================================================ */
select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:var(--space-10);
    background-image:var(--field-caret);
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:12px 8px;
}

/* Disabled primary button (e.g. "Add Asset" before an asset is chosen) */
.btn:disabled,
.btn:disabled:hover{
    opacity:.5;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

/* ============================================================
   EXTRACTED INLINE STYLES (v1.5) — presentational style=""
   attributes lifted out of templates into reusable classes.
   Dynamic (PHP-valued) styles and JS-toggled display states
   stay inline by necessity. Compound selectors are used where
   the class must win over an existing rule on the same element.
   ============================================================ */

/* Flush the top margin of a leading description paragraph */
.tagline.flush-top,
.field-help.flush-top{
    margin-top:0;
}

/* Settings panel description + standalone hint spacing */
.tagline.settings-note{
    text-align:left;
    margin:0 0 var(--space-3);
}
.field-help.settings-hint{
    margin:0 0 var(--space-3);
    font-weight:500;
}

/* Inline status chip (e.g. email Verified / Not verified) */
.status-chip{
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    padding:var(--space-1) var(--space-px-9);
    border-radius:var(--radius-pill);
    font-size:11px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
}
.status-chip-ok{
    background:rgba(var(--success-rgb),.14);
    color:var(--success-deep);
}
.status-chip-warn{
    background:rgba(var(--danger-rgb),.12);
    color:var(--danger-deep);
}
.settings-pending-email{
    color:var(--danger-deep);
}
.settings-pending-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
    margin:var(--space-3) 0 0;
}

/* Settings panel vertical rhythm */
.panel.panel-gap-top{
    margin-top:var(--space-4);
}
.panel.panel-gap-bottom{
    margin-bottom:var(--space-4);
}

/* Header banners (verification + flash warning), centered to content width */
.header-banner{
    max-width:1040px;
    margin:0 auto var(--space-4);
}
.banner-inline-form{
    display:inline;
    margin-left:var(--space-2);
}

/* Public-profile preview-mode warnings */
.warning.warning-flush{
    margin-top:0;
    margin-bottom:var(--space-4);
}

/* Compact dashboard warning */
.warning.warning-compact{
    margin:var(--space-3) 0 0;
    font-size:12px;
}

/* QR modal subtitle */
.cell-muted.qr-subtitle{
    text-align:center;
    margin:var(--space-1) 0 var(--space-3);
}

/* ===== Embed-on-your-site (dashboard) ===== */
.embed-share{
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:var(--space-4);
    margin-top:var(--space-4);
}
.embed-share-head h2{margin:0;font-size:18px;}
.embed-share-head p{margin:var(--space-1) 0 0;}
.embed-picker{
    margin-top:var(--space-px-14);
    width:100%;
    max-width:280px;
    padding:var(--space-px-9) var(--space-3);
    border:1px solid rgba(var(--ink-rgb),.14);
    border-radius:var(--radius-sm);
    background:#fff;
    font-size:14px;
    color:var(--ink);
    cursor:pointer;
}
.embed-code{
    display:flex;
    align-items:stretch;
    gap:var(--space-px-10);
    margin-top:var(--space-px-14);
}
.embed-code code{
    flex:1 1 auto;
    min-width:0;
    display:block;
    background:rgba(var(--ink-rgb),.04);
    border:1px solid var(--hairline);
    border-radius:var(--radius-sm);
    padding:var(--space-px-10) var(--space-3);
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.5;
    color:var(--ink);
    white-space:pre-wrap;
    word-break:break-all;
    overflow:auto;
    max-height:96px;
}
.embed-code .secondary{flex:0 0 auto;align-self:flex-start;}
.embed-preview-link{
    display:inline-block;
    margin-top:var(--space-3);
    color:var(--brand-ink);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
}
.embed-preview-link:hover{text-decoration:underline;}
@media(max-width:560px){
    .embed-code{flex-direction:column;}
    .embed-code .secondary{align-self:stretch;}
}

/* Analytics toolbar heading */
/* ===== Analytics (consolidated from dashboard.php inline style) ===== */
.analytics-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-3);
    margin:var(--space-4) 0;
    flex-wrap:wrap
}

.analytics-controls{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-wrap:wrap
}

.analytics-reset-form{
    margin:0
}

.analytics-reset-form .secondary{
    white-space:nowrap
}

.range-tabs{
    display:flex;
    gap:var(--space-2);
    flex-wrap:wrap
}

.range-tabs a{
    padding:var(--space-2) var(--space-px-11);
    border-radius:var(--radius-pill);
    background:var(--hairline);
    color:var(--ink-4);
    font-size:12px;
    font-weight:900;
    text-decoration:none
}

.range-tabs a:hover{
    background:var(--hairline-strong);
    color:var(--ink-2);
}

.range-tabs a.active,
.range-tabs a.active:hover{
    background:var(--brand);
    color:white;
    box-shadow:0 10px 22px rgba(var(--brand-rgb),.18)
}

.analytics-grid{
    display:grid;
    /* 9 metrics: 3 columns give a full 3x3 — 4 columns orphaned the ninth */
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-px-10);
    margin:var(--space-4) 0
}

.analytics-card{
    background:rgba(255,255,255,.72);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:var(--space-px-14)
}

.analytics-card strong{
    display:block;
    font-size:24px;
    letter-spacing:-.04em
}

.analytics-card span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:2px
}

.analytics-panel{
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:var(--space-4);
    margin-top:var(--space-4)
}

.analytics-panel h3{
    margin:0 0 var(--space-px-10);
    font-size:15px;
    letter-spacing:-.03em
}

.trend-bars{
    display:flex;
    align-items:end;
    gap:var(--space-px-5);
    height:126px;
    padding-top:var(--space-2);
    margin-bottom:var(--space-px-22);
}

.trend-bar{
    flex:1;
    min-width:6px;
    max-width:56px;
    border-radius:8px 8px 3px 3px;
    background:linear-gradient(180deg,var(--brand),rgba(var(--brand-rgb),.72));
    position:relative
}

.trend-bar span{
    position:absolute;
    left:50%;
    bottom:-22px;
    transform:translateX(-50%);
    font-size:10px;
    color:var(--muted);
    font-weight:800;
    white-space:nowrap
}

.analytics-list{
    display:grid;
    gap:var(--space-2)
}

.analytics-list-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:var(--space-px-10);
    align-items:center
}

.analytics-list-row .bar{
    grid-column:1/-1;
    height:7px;
    background:var(--hairline);
    border-radius:999px;
    overflow:hidden
}

.analytics-list-row .fill{
    height:100%;
    background:linear-gradient(90deg,var(--brand),var(--brand2));
    border-radius:999px
}

.analytics-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-3)
}

.analytics-empty{
    color:var(--muted);
    font-size:13px;
    font-weight:700
}

@media(max-width:860px){

    .analytics-grid,
    .analytics-split{
        grid-template-columns:1fr 1fr
    }
    .analytics-grid>*:last-child:nth-child(odd){
        grid-column:1 / -1;
    }
}

@media(max-width:520px){
    .analytics-grid{
        grid-template-columns:1fr 1fr
    }

    .analytics-split{
        grid-template-columns:1fr
    }

    .trend-bars{
        overflow-x:auto;
        padding-bottom:26px
    }

    .trend-bar{
        min-width:18px
    }
}

.analytics-toolbar > div:first-child{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
}
.analytics-toolbar h2{
    margin:0;
    line-height:1.3;
}
.analytics-toolbar > div:first-child p{
    margin:0;
}

/* Media (avatar / cover) preview blocks in the profile editor */
.media-preview{
    margin:0;
}
.media-preview-action{
    margin-top:var(--space-px-10);
}
.avatar-preview-img{
    width:88px;
    height:88px;
    border-radius:28px;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.78);
    box-shadow:0 12px 28px rgba(var(--shadow-rgb),.16);
}
.cover-preview-img{
    width:100%;
    max-height:160px;
    border-radius:22px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 12px 28px rgba(var(--shadow-rgb),.12);
}

/* Inline checkbox row (e.g. "Mark as preferred") */
.inline-checkbox-label{
    display:flex;
    gap:var(--space-2);
    align-items:center;
}
.inline-checkbox{
    width:auto;
    margin:0;
}

/* Assets page spacing */
.add-address-form{
    margin-top:var(--space-3);
}
.empty-state.assets-empty{
    margin:0 0 var(--space-4);
}
.panel.add-asset-panel{
    margin-top:var(--space-3);
}

/* Wide success box (forgot password / username) */
.success-box.success-box-wide{
    margin:0 0 var(--space-px-14);
    max-width:none;
}

/* ============================================================
   Collapsible asset groups (accordion) + collapsed add-address
   form — keep each asset short so the drag-reorder list is easy
   to move. The collapse class is applied at runtime.
   ============================================================ */
.asset-collapse-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    border:none;
    background:none;
    color:var(--muted);
    cursor:pointer;
    border-radius:8px;
    flex:0 0 auto;
}
.asset-collapse-toggle:hover{
    background:rgba(var(--brand-rgb),.08);
    color:var(--brand-ink);
}
.asset-collapse-toggle svg{
    transition:transform .15s ease;
}
.asset-group.collapsed .asset-collapse-toggle svg{
    transform:rotate(-90deg);
}
.asset-group.collapsed > *:not(.group-head){
    display:none !important;
}
.add-address-toggle{
    margin-top:var(--space-3);
}

/* ============================================================
   IMAGE CROPPER (v1.5.16) — drag/zoom/pinch crop for the
   profile picture and cover image. Output is rendered to a
   canvas and injected back into the file input, so the server
   stores the already-cropped image (no server changes).
   ============================================================ */
.cropper-modal-card{
    width:min(440px,100%);
    text-align:left;
}
.cropper-title{
    margin:0 0 var(--space-1);
    font-size:20px;
    font-weight:900;
}
.cropper-hint{
    margin:0 0 var(--space-px-14);
    color:var(--muted);
    font-size:13px;
}
.cropper-stage{
    position:relative;
    margin:0 auto;
    overflow:hidden;
    border-radius:var(--radius-md);
    background:#1b1726;
    touch-action:none;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
}
.cropper-stage.is-grabbing{
    cursor:grabbing;
}
.cropper-stage img{
    position:absolute;
    top:0;
    left:0;
    max-width:none;
    max-height:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}
.cropper-controls{
    display:flex;
    align-items:center;
    gap:var(--space-px-10);
    margin:var(--space-px-14) 0 var(--space-4);
}
.cropper-zoom{
    flex:1;
    accent-color:var(--brand);
}
.cropper-zoom:focus-visible{
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}
.cropper-zoom-btn{
    width:34px;
    height:34px;
    flex:none;
    border:0;
    border-radius:var(--radius-pill);
    background:var(--hairline);
    color:var(--ink);
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.cropper-zoom-btn:hover{
    background:var(--hairline-strong);
}
.cropper-actions{
    display:flex;
    gap:var(--space-px-10);
}
.cropper-actions .btn.primary{
    flex:1;
}
.crop-pending-note{
    font-weight:800;
    font-size:12px;
    color:var(--ink-4);
}

/* Hover-to-edit image thumbnails. Hovering shows an "Edit" chip; clicking opens
   a chooser (upload new / adjust current). */
.media-thumb{
    position:relative;
    display:inline-block;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    line-height:0;
    border-radius:28px;
}
.media-thumb.is-cover{ display:block; width:100%; border-radius:22px; }
.media-thumb .media-thumb-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(var(--ink-rgb),.42);
    border-radius:inherit;
    opacity:0;
    transition:opacity .15s ease;
    pointer-events:none;
}
.media-thumb .media-thumb-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
    background:rgba(255,255,255,.96);
    color:var(--ink);
    font-weight:800;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    padding:var(--space-px-6) var(--space-px-11);
    border-radius:var(--radius-pill);
    box-shadow:0 6px 16px rgba(var(--ink-rgb),.28);
}
.media-thumb .media-thumb-chip svg{ display:block; }
.media-thumb:hover .media-thumb-overlay,
.media-thumb:focus-visible .media-thumb-overlay{ opacity:1; }
.media-thumb:focus{ outline:none; }
.media-thumb:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Image action chooser (upload new / adjust current) */
.img-choose-card{ width:min(360px,100%); }
.img-choose-actions{ display:flex; flex-direction:column; gap:var(--space-px-10); margin-top:var(--space-2); }
.img-choose-actions .btn,
.img-choose-actions .secondary{ width:100%; }

/* Full-size image lightbox (public profile) */
.img-lightbox .bitsy-modal-card{
    width:auto;
    max-width:min(92vw,900px);
    padding:var(--space-px-10);
    background:rgba(255,255,255,.96);
    text-align:center;
}
.img-lightbox-img{
    display:block;
    max-width:100%;
    max-height:calc(100vh - 90px);
    border-radius:var(--radius-md);
    object-fit:contain;
    margin:0 auto;
}
.profile-cover.is-zoomable{ cursor:zoom-in; }
img.avatar.is-zoomable{ cursor:zoom-in; }

/* Sidebar avatar quick-edit + public-profile in-place edit affordances */
.media-thumb.dash-avatar-edit{border-radius:var(--radius-lg);flex-shrink:0}
.avatar-edit-wrap{position:relative;display:block;width:max-content;margin:0 auto var(--space-px-14)}

/* ---------- v4.8 avatar status bubble ----------
   The host shrink-wraps the avatar and centers exactly as the bare avatar did,
   so the profile layout is unchanged when no status is set. The bubble shows on
   hover/focus (desktop, keyboard) or when toggled open via the trigger (touch).
   The trigger uses --brand, which on a public profile is the owner's accent. */
.avatar-status-host{position:relative;display:block;width:max-content;max-width:100%;margin:0 auto;}
.status-trigger{
    position:absolute;top:2px;right:2px;z-index:4;
    width:26px;height:26px;display:grid;place-items:center;
    border:0;cursor:pointer;border-radius:50%;
    background:var(--brand);color:#fff;
    box-shadow:0 4px 12px rgba(var(--brand-rgb),.40),0 0 0 2px rgba(255,255,255,.85);
    transition:transform .14s ease;
}
.status-trigger:hover{transform:scale(1.08);}
.status-bubble{
    position:absolute;bottom:calc(100% + 12px);left:50%;
    transform:translateX(-50%) translateY(6px);
    width:max-content;max-width:240px;text-align:left;
    background:#fff;color:var(--ink,#1a1a1a);
    border:1px solid var(--hairline);border-radius:14px;
    padding:var(--space-px-10) 32px var(--space-px-10) var(--space-3);
    box-shadow:0 14px 36px rgba(var(--shadow-rgb),.18);
    font-size:14px;line-height:1.4;font-weight:600;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;z-index:6;
}
.avatar-status-host:hover .status-bubble,
.avatar-status-host:focus-within .status-bubble,
.avatar-status-host.show .status-bubble{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.status-bubble::after{
    content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:8px solid transparent;border-top-color:#fff;
    filter:drop-shadow(0 2px 1px rgba(var(--shadow-rgb),.10));
}
/* Transparent bridge across the 12px gap so moving the pointer from the avatar
   up to the bubble keeps the host hovered (the bubble is a descendant) instead
   of dropping into a dead zone. Inert while the bubble is hidden (pointer-events
   is inherited from the bubble). Stops short of the top-right trigger. */
.status-bubble::before{
    content:"";position:absolute;top:100%;left:0;right:0;height:13px;
}
.status-bubble-text{word-break:break-word;}
.status-bubble-dots{
    position:absolute;top:6px;right:6px;
    width:20px;height:20px;display:grid;place-items:center;
    border:0;background:transparent;cursor:pointer;padding:0;
    color:var(--muted,#8a8a8a);border-radius:6px;
    transition:background .14s ease,color .14s ease;
}
.status-bubble-dots:hover{background:var(--hairline);color:var(--ink,#1a1a1a);}
.status-bubble-date{margin-top:var(--space-px-6);font-size:12px;font-weight:600;color:var(--muted,#8a8a8a);}
.status-bubble-date[hidden]{display:none;}
.avatar-edit-wrap .avatar{margin:0}
.img-edit-btn{position:absolute;z-index:3;bottom:8px;right:8px;display:inline-flex;align-items:center;gap:var(--space-px-5);background:rgba(var(--ink-rgb),.62);color:#fff;border:0;cursor:pointer;font-weight:800;font-size:12px;line-height:1;padding:var(--space-px-6) var(--space-px-10);border-radius:var(--radius-pill);opacity:0;transition:opacity .15s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.avatar-edit-wrap .img-edit-btn{bottom:10px;right:10px;left:auto;transform:none;padding:var(--space-px-5) var(--space-2);font-size:11px;gap:var(--space-1)}
.img-edit-btn svg{display:block}
.is-editable:hover .img-edit-btn,.img-edit-btn:focus-visible{opacity:1}
@media(hover:none){.is-editable .img-edit-btn{opacity:1}}

/* Footer shaka glyph (inline SVG, tints to footer text color via currentColor) */
.footer-shaka{height:1em;width:auto;vertical-align:-0.16em;display:inline-block}

/* Two-factor authentication (settings) */
/* v4.0 panel-bottom consistency: a trailing <p> (status lines, hints) must
   not stack its margin on the panel padding, and the last 2FA method block
   must not add its own bottom padding — every panel bottom reads as the same
   22px the form-ending panels show. Mirrors .asset-group:last-child. */
.panel > :last-child{margin-bottom:0;}
.panel .twofa-method:last-child{padding-bottom:0;}
.twofa-method > :last-child{margin-bottom:0;}
.twofa-method{padding:var(--space-px-14) 0;border-top:1px solid rgba(0,0,0,.07);}
.twofa-method:first-of-type{border-top:0;padding-top:var(--space-1);}
.twofa-method-head{display:flex;align-items:center;gap:var(--space-px-10);margin-bottom:var(--space-2);flex-wrap:wrap;}
.twofa-setup{padding-top:var(--space-1);}
.twofa-setup h3{margin:0 0 var(--space-2);font-size:18px;letter-spacing:-.03em;}
.twofa-qr{display:block;width:180px;height:180px;background:#fff;padding:var(--space-2);border-radius:var(--radius-md);margin:var(--space-2) 0;}
.twofa-key{font-family:var(--font-mono);background:rgba(0,0,0,.05);padding:3px var(--space-2);border-radius:var(--radius-sm);letter-spacing:1px;}
.twofa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);list-style:none;padding:0;margin:var(--space-px-14) 0;}
.twofa-codes li{font-family:var(--font-mono);font-size:15px;letter-spacing:1px;background:rgba(0,0,0,.05);padding:var(--space-px-9) var(--space-px-10);border-radius:var(--radius-sm);text-align:center;}
.twofa-codes-panel{border:1px solid var(--brand);}
.twofa-devices{list-style:none;padding:0;margin:var(--space-2) 0;}
.twofa-devices li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-px-9) 0;border-top:1px solid rgba(0,0,0,.06);}
.twofa-devices li:first-child{border-top:0;}
@media(max-width:520px){.twofa-codes{grid-template-columns:1fr;}}

/* v4.0 Passkeys — settings management list + login button. Rows mirror the
   .twofa-devices pattern (flex space-between, hairline top borders). */
.passkey-list{list-style:none;padding:0;margin:var(--space-2) 0;}
.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-px-9) 0;border-top:1px solid var(--hairline);}
.passkey-row[hidden]{display:none;}
.passkey-row:first-child{border-top:0;}
.passkey-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.passkey-label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.passkey-sub{font-size:12px;color:var(--muted);}
.passkey-actions{display:flex;gap:var(--space-2);flex:0 0 auto;}
.passkey-empty{color:var(--muted);font-size:14px;margin:var(--space-2) 0;}
.passkey-status{margin-top:var(--space-2);}
.passkey-status.is-error{color:var(--danger-deep);}
.btn-block{width:100%;}
/* Icon-in-button spacing. Deliberately NOT flex+gap:gap-in-flex needs 2020+
   engines and this sits on the login page where every browser must get it
   right. Margin + vertical-align works in everything, ever. */
.btn-icon svg{vertical-align:-3px;margin-right:var(--space-2);}
.auth-divider{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1 1 auto;height:1px;background:var(--hairline);}
.passkey-login{margin-top:var(--space-2);}
.passkey-login-status{margin-top:var(--space-2);}
.passkey-login-status.is-error{color:var(--danger-deep);}
@media(max-width:520px){
    .passkey-row{flex-wrap:wrap;}
    .passkey-actions{width:100%;justify-content:flex-end;}
}

/* v2.0 Social link drag-to-reorder */
.social-sortable{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}
.social-sort-row{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    background:rgba(255,255,255,.52);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:var(--space-px-10);
    box-shadow:0 10px 25px rgba(var(--shadow-rgb),.05);
    transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social-sort-row:hover{
    border-color:rgba(var(--ink-rgb),.16);
}
.social-sort-row > label{
    flex:1 1 auto;
    min-width:0;
    margin:0;
}
.social-drag-handle{
    align-self:center;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    font-size:16px;
    transition:background .15s ease, color .15s ease;
}
.social-drag-handle:hover{
    background:rgba(var(--ink-rgb),.12);
    color:var(--ink);
}
.social-sort-row.dragging{
    background:rgba(255,255,255,.97);
    transform:scale(1.01);
    box-shadow:0 18px 40px rgba(var(--shadow-rgb),.22);
    border-color:rgba(var(--ink-rgb),.28);
}

/* v2.0 Domain ownership verification */
.verified-owner-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--space-px-5);
    padding:var(--space-px-5) var(--space-px-9) var(--space-px-5) var(--space-px-10);
    border-radius:var(--radius-pill);
    background:rgba(var(--success-rgb),.12);
    border:1px solid rgba(var(--success-rgb),.30);
    color:var(--success-deep);
    font-size:13px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}
.verified-owner-badge svg{color:var(--success-deep);flex:0 0 auto;display:block;}
.contact-link-row .verified-owner-badge{align-self:center;}

/* Verified-owner mark folded into the contact button itself (Website via DNS
   TXT, Email via confirmation link), so it reads as "this link's owner is
   verified" rather than a standalone profile badge. */
.profile-link-chip.verified{
    position:relative;
    overflow:visible;
}
.profile-link-chip.verified .profile-link-icon{
    background:rgba(var(--success-rgb),.14);
    color:var(--success-deep);
}
.chip-verified-check{
    position:absolute;
    top:-4px;
    right:-4px;
    width:17px;
    height:17px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--success-deep);
    box-shadow:0 0 0 1.5px #fff;
}
.chip-verified-check svg{display:block;width:13px;height:13px;}
.is-hidden{display:none;}
.sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.site-verify-inline{
    margin-top:calc(var(--space-3) * -1 + var(--space-1));
    padding:var(--space-3) var(--space-px-14);
    background:rgba(var(--brand-rgb),.05);
    border:1px solid rgba(var(--brand-rgb),.14);
    border-radius:var(--radius-md);
}
/* Public-email verify section spacing. Every block (status text + action rows)
   shares one rhythm: paragraphs have a 10px gap, a button row sits 12px below
   the text above it, and the final element in each view has no trailing margin
   so the wrapper padding stays even top and bottom. */
.site-verify-inline p{margin:0 0 var(--space-px-10);}
/* A public email can be long and unbroken; wrap it anywhere inside the panel
   rather than letting it spill past the rounded container. An ellipsis is wrong
   here: clipping a contact address hides characters the owner must read, so this
   wraps deliberately instead of truncating. */
.site-verify-inline p,
.site-verify-inline .verify-status-line span,
.pe-msg,
.pe-wrap{overflow-wrap:anywhere;}
.site-verify-inline .form-actions{margin:var(--space-3) 0 0;}
.site-verify-inline [data-pe-verify] > :last-child,
.site-verify-inline [data-pe-new-actions] > :last-child,
.site-verify-inline [data-pe-verify-saved] > :last-child{margin-bottom:0;}
.site-verify-inline > :last-child{margin-bottom:0;}
.verify-msg{
    font-size:13px;
    font-weight:700;
    padding:var(--space-2) var(--space-px-11);
    border-radius:var(--radius-sm);
    border:1px solid transparent;
}
.verify-msg[hidden]{display:none;}
.verify-msg.success{color:var(--success-deep);background:rgba(var(--success-rgb),.12);border-color:rgba(var(--success-rgb),.30);}
.verify-msg.error{color:var(--danger-deep);background:rgba(var(--danger-rgb),.10);border-color:rgba(var(--danger-rgb),.28);}
.verify-code-row{display:flex;align-items:stretch;gap:var(--space-px-6);margin:0 0 var(--space-px-10);}
.verify-code{
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    margin:0;
    padding:var(--space-px-10) var(--space-3);
    background:rgba(0,0,0,.05);
    border-radius:var(--radius-sm);
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink);
    word-break:break-all;
    -webkit-user-select:all;
    user-select:all;
}
.verify-copy-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    padding:0;
    border:1px solid rgba(var(--ink-rgb),.14);
    border-radius:var(--radius-sm);
    background:rgba(0,0,0,.04);
    color:var(--ink-3);
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.verify-copy-btn:hover{background:rgba(0,0,0,.09);color:var(--ink);}
.verify-copy-btn .icon-check{display:none;}
.verify-copy-btn.copied{color:var(--success-deep);border-color:rgba(var(--success-rgb),.45);background:rgba(var(--success-rgb),.12);}
.verify-copy-btn.copied .icon-copy{display:none;}
.verify-copy-btn.copied .icon-check{display:inline;}
.verify-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-px-10);}
.site-verify-inline .field-help code{font-family:var(--font-mono);font-size:.92em;font-weight:700;color:var(--ink);background:rgba(0,0,0,.06);padding:1px var(--space-px-5);border-radius:6px;}
.verify-status-line{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}

/* v2.0 Copy-confirm — anti-poisoning address verification prompt (global) */
.copy-confirm[hidden]{display:none;}
.copy-confirm{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(10px);
    z-index:1100;
    max-width:min(420px,calc(100vw - 32px));
    box-sizing:border-box;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md);
    background:var(--ink-deep);
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
    text-align:center;
    box-shadow:0 18px 34px rgba(var(--ink-rgb),.28);
    opacity:0;
    transition:.15s ease;
    cursor:pointer;
}
.copy-confirm.show{opacity:1;transform:translateX(-50%) translateY(0);}
.copy-confirm .cc-frag{
    font-family:var(--font-mono);
    font-weight:800;
    color:#7ef0a8;
    background:rgba(var(--success-rgb),.16);
    padding:1px var(--space-px-5);
    border-radius:5px;
    margin:0 1px;
}
.copy-confirm .cc-note{
    display:block;
    margin-top:var(--space-px-5);
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,.72);
}

/* v2.0 Address stability signal — "Unchanged since {Mon YYYY}" */
.address-stability{
    margin-top:0;
    line-height:1;
    font-size:11px;
    font-weight:600;
    color:var(--ink-4);
    letter-spacing:.01em;
}

/* v2.0 Amount-request — optional amount field in the QR modal */
.qr-amount{margin:var(--space-px-14) 0 var(--space-1);text-align:left;}
.qr-amount-label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--ink-2);
    margin-bottom:var(--space-px-6);
}
.qr-amount-optional{font-weight:600;color:var(--ink-4);}
.qr-amount-field{
    display:flex;
    align-items:stretch;
    border:1px solid var(--line);
    border-radius:var(--radius-control);
    overflow:hidden;
    background:#fff;
}
.qr-amount-field:focus-within{border-color:var(--brand-ink);box-shadow:0 0 0 3px var(--brand-ink);}
/* The .qr-amount-field wrapper owns the focus ring (:focus-within above). Suppress
   the global input:focus box-shadow on the inner input so the field shows one ring,
   not two concentric ones. */
.qr-amount-input:focus,.qr-amount-input:focus-visible{box-shadow:none;}
.qr-amount-input{
    flex:1 1 auto;
    min-width:0;
    border:0;
    outline:0;
    margin:0; /* cancel the global input margin-top:var(--space-px-6) that pushed the value down */
    padding:var(--space-px-10) var(--space-3);
    font-size:15px;
    font-family:var(--font-mono);
    background:transparent;
    color:var(--ink);
}
.qr-amount-input.is-invalid{color:#c0392b;}
.qr-amount-unit{
    display:flex;
    align-items:center;
    padding:0 var(--space-3);
    font-size:13px;
    font-weight:800;
    color:var(--ink-3);
    background:rgba(var(--ink-rgb),.05);
    border-left:1px solid var(--line);
}
.qr-amount-help{margin-top:var(--space-px-6);}

/* v2.0 Printable QR sheet — hidden on screen, isolated for print */
.qr-print-sheet{display:none;}
@media print{
    body.bitsy-print-qr *{visibility:hidden !important;}
    body.bitsy-print-qr .qr-print-sheet,
    body.bitsy-print-qr .qr-print-sheet *{visibility:visible !important;}
    body.bitsy-print-qr .qr-print-sheet{
        display:block !important;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        padding:var(--space-10) var(--space-6);
        text-align:center;
        color:var(--ink-deep);
        background:#fff;
    }
    .qr-print-brand{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:var(--space-px-10);}
    .qr-print-name{font-size:18px;font-weight:800;color:var(--ink-deep);margin-bottom:2px;}
    .qr-print-asset{font-size:15px;font-weight:700;margin-bottom:var(--space-px-6);}
    .qr-print-img{width:300px;height:300px;display:block;margin:var(--space-px-14) auto;}
    .qr-print-amount{font-size:16px;font-weight:800;margin-top:var(--space-px-6);}
    .qr-print-address{
        font-family:var(--font-mono);
        font-size:12px;
        word-break:break-all;
        max-width:380px;
        margin:var(--space-px-10) auto 0;
    }
    .qr-print-url{font-family:var(--font-mono);font-size:11px;color:#555;word-break:break-all;max-width:380px;margin:var(--space-2) auto 0;}
    .qr-print-name:empty,.qr-print-url:empty{display:none;}
    .qr-print-note{font-size:11px;color:#555;max-width:380px;margin:var(--space-px-18) auto 0;}
}

/* v2.2 Per-asset deep links */
.asset-link-btn{
    margin-left:auto;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
    color:var(--ink-3);
    cursor:pointer;
    transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.asset-link-btn:hover{color:var(--ink);border-color:var(--ink-4);}
.asset-link-btn:focus-visible{outline:2px solid var(--brand,#7c3cff);outline-offset:2px;}
.asset-link-btn.copied{color:#fff;background:var(--success-deep);border-color:var(--success-deep);}
.asset-group.asset-focus{animation:bitsyAssetFocus 2.6s ease-out 1;}
@keyframes bitsyAssetFocus{
    0%{box-shadow:0 0 0 0 rgba(var(--focus-rgb,124,60,255),0);}
    10%{box-shadow:0 0 0 4px rgba(var(--focus-rgb,124,60,255),.5);}
    100%{box-shadow:0 0 0 4px rgba(var(--focus-rgb,124,60,255),0);}
}

/* Hidden (non-deleted) assets/addresses on the manager. The owner still sees the
   row so they can restore it; it just won't appear on the public profile. */
.hidden-pill{
    display:inline-flex;align-items:center;
    padding:2px var(--space-px-9);margin-left:var(--space-2);
    font-size:11px;font-weight:700;letter-spacing:.02em;
    border-radius:var(--radius-pill);
    background:var(--hairline);color:var(--muted);
    text-transform:uppercase;
}

/* ---- Tier 3 ownership verification ---- */

/* Manager-row pill for a cryptographically verified address. */

.proof-toggle.is-verified{
    color:var(--success-deep);
    background:rgba(var(--success-rgb),.12);
}

/* Owner-side proof panel (toggled like the edit form, display:grid). */
.proof-panel{
    gap:var(--space-3);
    padding:var(--space-4);
    margin:var(--space-2) 0 var(--space-3);
    border-radius:var(--radius-md);
    background:rgba(var(--brand-rgb),.04);
    border:1px solid rgba(var(--brand-rgb),.12);
}
.rotate-card{border-style:dashed;}
.proof-intro,.proof-claim{
    margin:0;
    font-size:13px;
    color:var(--ink-3);
    line-height:1.5;
}
/* Internal rhythm: both panel states and the challenge cluster are grids with
   a uniform gap, replacing the accidental margins that left the gaps uneven
   (12/14/8/4/14/10px measured). [hidden] companions follow the house pattern
   (.nav-backdrop, .verify-msg) so display:grid can't defeat the attribute. */
/* Belt-and-suspenders for the whole panel: any author display rule (the
   .form-actions flex on the start row was the live offender) loses to the
   hidden attribute. Specificity (0,1,1) outranks the single-class rules. */
.proof-panel [hidden]{display:none;}
.proof-flow-state,.proof-verified-state{
    display:grid;
    gap:var(--space-3);
}
.proof-flow-state[hidden],.proof-verified-state[hidden]{display:none;}
.proof-challenge{
    display:grid;
    gap:var(--space-2);
}
.proof-challenge[hidden]{display:none;}
/* One-click wallet signing leads when a provider is present; the manual
   sign-and-paste flow folds behind this disclosure rather than competing. */
.proof-manual-toggle{
    justify-self:start;
    background:none;border:0;padding:0;
    color:var(--muted);font:inherit;font-size:13px;font-weight:700;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.proof-manual-toggle:hover{color:var(--ink-deep);}
/* Step 2's label belongs to its textarea, not the cluster above it: give the
   second step extra breathing room so the grouping reads correctly. */
.proof-challenge .proof-step-label:not(:first-child){
    margin-top:var(--space-2);
}
.proof-step-label{
    display:block;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--muted);
}
.proof-message{
    margin:0;
    padding:var(--space-3);
    border-radius:var(--radius-sm);
    background:rgba(var(--ink-rgb),.05);
    border:1px solid var(--hairline);
    font-family:var(--font-mono);
    font-size:12px;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-all;
    color:var(--ink-2);
}
.proof-signature{
    width:100%;
    box-sizing:border-box;
    font-family:var(--font-mono);
    font-size:12px;
    word-break:break-all;
}
.proof-status{
    margin:0;
    font-size:13px;
    font-weight:700;
    color:var(--danger-deep);
}
.proof-status.is-ok{ color:var(--success-deep); }

/* Public shield chip on a verified address. */
.owner-proof-chip{
    display:inline-flex;align-items:center;gap:var(--space-px-5);
    align-self:flex-start;
    width:fit-content;
    margin-top:var(--space-px-6);
    padding:3px var(--space-px-10);
    border:1px solid rgba(var(--success-rgb),.3);
    border-radius:var(--radius-pill);
    background:rgba(var(--success-rgb),.12);
    color:var(--success-deep);
    font-size:11px;font-weight:800;letter-spacing:.02em;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
}
.owner-proof-chip:hover{ background:rgba(var(--success-rgb),.16); }

/* ---- v3.1: profile signing, ENS, copy receipts ---- */
/* The trust row now carries up to two chips (Signed + Freshness). */

.profile-signed-row{
    display:flex;
    justify-content:center;
    margin:var(--space-px-14) auto 0;
}
.profile-signed-chip{
    display:inline-flex;align-items:center;gap:var(--space-px-5);
    padding:var(--space-px-6) var(--space-px-10);
    border:1px solid rgba(var(--success-rgb),.3);
    border-radius:var(--radius-pill);
    /* faint-green fill, matching the other trust pills (assets-fresh,
       owner-proof, preferred) so every green trust mark reads the same */
    background:rgba(var(--success-rgb),.12);
    color:var(--success-deep);
    font-size:12px;font-weight:800;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
}
.profile-signed-chip:hover{ background:rgba(var(--success-rgb),.18); }
/* Public address stack rhythm: .address-copy is a flex column (2px gap), and
   all trust pills share one horizontal .address-chips row — stacked pills made
   the row tall and the text rhythm read uneven. An empty row must render
   nothing, or the column gap would still reserve a slot for it. */
.address-chips{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-px-6);
    margin-top:0;
}
.address-chips:empty{display:none;}
/* "Preferred" is an owner preference, not a verification — so it must NOT be
   green (green is reserved for proven/verified marks). Neutral gray reads as a
   plain label and never collides with the trust green or any accent. !important
   is required to beat the more-specific .source-row.preferred accent rule that
   would otherwise tint the address badge. Public profile only; manager keeps brand. */
.address-chips .address-preferred-badge,
.public-profile-card .preferred-asset-badge{
    background:rgba(235,235,241,.95) !important;
    border:1px solid rgba(var(--ink-rgb),.12) !important;
    color:var(--ink-3) !important;
}
/* belt: even a pathological ENS label can't deform the fixed-height pill */
.address-chips .ens-chip{max-width:240px;overflow:hidden;}
.address-chips .owner-proof-chip,
.address-chips .ens-chip,
.address-chips .address-preferred-badge{
    display:inline-flex;
    align-items:center;
    align-self:auto;
    height:22px;
    min-height:0;      /* beats the shared 26px floor at the .set-preferred rule */
    margin:0;
    padding:0 var(--space-px-10);
    font-size:11px;
    line-height:1;
    width:auto;
}
.ens-chip{
    display:inline-flex;align-items:center;gap:var(--space-1);
    align-self:flex-start;
    width:fit-content;
    margin-top:var(--space-px-6);
    padding:3px var(--space-px-10);
    /* trust grammar: verification marks are always success-green, never the
       profile accent — an ENS binding is a verification, not a decoration */
    border:1px solid rgba(var(--success-rgb),.3);
    border-radius:var(--radius-pill);
    background:rgba(var(--success-rgb),.1);
    color:var(--success-deep);
    font-size:11px;font-weight:800;letter-spacing:.02em;
}
.sign-card{
    /* Match the 12px (space-3) inter-section rhythm used between the asset
       groups so the spacing above and below this card is consistent. */
    margin:0 0 var(--space-3);
}
.sign-card .proof-start-row select{
    width:auto;
    flex:1 1 auto;
    max-width:340px;
}
.ens-row{
    margin-top:var(--space-3);
    padding-top:var(--space-3);
    /* tinted so the divider actually reads on the violet panel background */
    border-top:1px solid rgba(var(--brand-rgb),.15);
    display:grid;
    gap:var(--space-2);
}
/* keep the Link button its natural height instead of stretching to the input */
.ens-row .form-actions{
    align-items:center;
}
.ens-row .ens-input{
    width:auto;
    flex:1 1 auto;
    max-width:260px;
}
.copy-confirm .cc-receipt{
    display:inline-block;
    margin-top:var(--space-2);
    padding:var(--space-px-5) var(--space-3);
    border:1px solid rgba(255,255,255,.35);
    border-radius:var(--radius-pill);
    background:transparent;
    color:#fff;
    font-size:12px;font-weight:800;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
}
.copy-confirm .cc-receipt:hover{ background:rgba(255,255,255,.12); }

.ownership-modal-card .proof-message{ max-height:180px; overflow:auto; }
.ownership-modal-card .proof-sig{ max-height:90px; }
.ownership-modal-note{
    margin:var(--space-3) 0 0;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
    /* Long prose centers poorly (ragged both sides); left-align past ~3 lines.
       The intro + chain callout above stay centered as short ledes. */
    text-align:left;
}
.asset-group.is-hidden .asset-icon,
.asset-group.is-hidden .group-copy,
.source-row.is-hidden .manager-address-copy{
    opacity:.55;
}
.asset-group.is-hidden{
    display:block;
    border-style:dashed;
}
.source-row.is-hidden{
    display:flex;
    background:rgba(var(--ink-rgb),.02);
}

/* ---------- v4.7 compromise kill-switch ---------- */
/* Public: whole-profile burn banner — loud, top of the card. */
.compromise-banner{
    margin:0 0 var(--space-4);
    padding:var(--space-3) var(--space-4);
    border:1px solid rgba(var(--danger-rgb),.45);
    border-radius:var(--radius-md);
    background:rgba(var(--danger-rgb),.10);
    color:#7f1d1d;
    font-size:.92rem;
    line-height:1.45;
}
.compromise-banner strong{display:block;margin-bottom:2px;color:#991b1b;}
.compromise-banner a{color:#7f1d1d;text-decoration:underline;}
/* Public: a single flagged address — struck, dimmed, non-copyable. */
.public-address-row.address-compromised{
    border-color:rgba(var(--danger-rgb),.35);
    background:rgba(var(--danger-rgb),.05);
}
.address-compromised .address{
    text-decoration:line-through;
    text-decoration-color:rgba(var(--danger-rgb),.7);
    opacity:.55;
    -webkit-user-select:none;
    user-select:none;
}
.address-compromised-flag{
    margin-top:var(--space-1);
    font-size:.8rem;
    font-weight:600;
    color:#b91c1c;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.copy.copy-compromised{
    color:#b91c1c;
    border-color:rgba(var(--danger-rgb),.4);
    background:rgba(var(--danger-rgb),.06);
    cursor:not-allowed;
}
/* Owner editor: the report-a-compromise danger card. */
.compromise-card{
    border:1px solid rgba(var(--danger-rgb),.30);
    background:rgba(255,255,255,.58);
    margin:var(--space-3) 0 0;
}
.compromise-card h2{
    color:var(--danger-deep);           /* danger-red section header, mirroring the Settings Danger Zone heading; keeps the global h2 margin so it spaces like the other section headers */
}
/* The inline emphasis stays bold but uncolored, matching the Settings Danger
   Zone's <strong> — so the heading is the section's only red and the two reds
   no longer clash. */
/* Warning glyph on the two danger headings (Danger zone, Report a compromise):
   visual stress that reads as deliberate, so these stay in the sitewide
   sentence-case rule rather than breaking it with title case. The icon inherits
   the heading's danger-red via currentColor. */
.danger-zone h2,
.compromise-card h2{
    display:flex;
    align-items:center;
    gap:.4em;
}
.danger-warn{
    width:.82em;
    height:.82em;
    flex:none;
}
.compromise-confirm{
    display:flex;
    gap:var(--space-2);
    align-items:flex-start;
    margin:var(--space-3) 0 0;
    font-size:.86rem;
    line-height:1.4;
    color:var(--ink);
}
.compromise-confirm input{margin-top:3px;flex:0 0 auto;}
.history-entry-compromise .history-entry-num{color:#b91c1c;}
.compromise-fallback{margin-top:var(--space-3);}
.compromise-fallback-hint{margin:0;font-size:.85rem;color:var(--muted);}

/* ---------- v4.7 payment-request link banner ---------- */
.payment-request-banner{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0 0 var(--space-3);
    padding:var(--space-3) var(--space-4);
    border:1px solid rgba(var(--brand-rgb),.35);
    border-radius:var(--radius-md);
    background:rgba(var(--brand-rgb),.07);
}
.payment-request-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.payment-request-amount{font-size:1.35rem;font-weight:700;color:var(--ink);line-height:1.15;}
.payment-request-sub{font-size:.85rem;color:var(--muted);line-height:1.4;}

/* ---------- v4.7 saved profiles (address book) ---------- */
.saved-form{margin:var(--space-2) 0 0;}
.saved-btn.is-saved{color:var(--brand-deep,#4f2bd4);}
.saved-card-head{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) var(--space-4) var(--space-3);}
.saved-card-head h2{margin:0;font-size:18px;}
.saved-avatar img,.vouch-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.saved-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);}
.saved-link{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;min-width:0;flex:1;border-radius:var(--radius-sm);transition:opacity .15s ease;}
.saved-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1;text-transform:uppercase;background:rgba(var(--brand-rgb,79,43,212),.12);color:var(--brand-deep,#4f2bd4);transition:transform .15s ease;}
.saved-row:has(.saved-link:hover){background:rgba(var(--brand-rgb,79,43,212),.05);}
.saved-link:hover .saved-names strong{color:var(--brand-deep,#4f2bd4);text-decoration:underline;text-underline-offset:2px;}
.saved-link:hover .saved-avatar{transform:scale(1.05);}
.saved-link:active{opacity:.6;}
.saved-names{display:flex;flex-direction:column;min-width:0;}
.saved-names strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.saved-flagged{color:#b91c1c;font-weight:600;}
.saved-remove-form{flex:0 0 auto;margin:0;}
.saved-row-actions{display:flex;gap:var(--space-2);align-items:center;flex:0 0 auto;}
.saved-watch-btn.is-on{color:var(--brand-deep,#4f2bd4);}

/* ---------- reveal-more (progressive "Show more" for long lists) ----------
   The hide is applied by JS only, so with no JS the whole list stays visible.
   !important so it wins over a row's own display (flex/grid). */
.reveal-hidden{display:none !important;}
.reveal-more-btn{display:block;margin:var(--space-3) auto var(--space-4);}

/* ---------- v4.7 web-of-trust vouches ---------- */
/* Public display (u.php) */
.vouches{margin-top:var(--space-5);}
.vouches-title{margin-bottom:var(--space-2);}
.vouch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.vouch-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--hairline);border-radius:var(--radius-md);background:var(--card);}
.vouch-issuer{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;min-width:0;flex:1;}
.vouch-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(var(--brand-rgb,79,43,212),.12);color:var(--brand-deep,#4f2bd4);}
.vouch-names{display:flex;flex-direction:column;min-width:0;}
.vouch-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vouch-handle{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vouch-proof-chip{display:inline-flex;align-items:center;gap:var(--space-px-5);flex:0 0 auto;padding:3px var(--space-px-10);border:1px solid rgba(var(--success-rgb),.3);border-radius:var(--radius-pill);background:rgba(var(--success-rgb),.1);color:var(--success-deep);font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;-webkit-appearance:none;appearance:none;}
.vouch-proof-chip:hover{background:rgba(var(--success-rgb),.16);}
.vouch-flag{flex:0 0 auto;color:#b91c1c;font-size:11px;font-weight:700;}
.vouch-compromised{opacity:.6;}
.vouch-compromised .vouch-name{text-decoration:line-through;}
.vouches-note{margin:var(--space-2) 0 0;color:var(--muted);font-size:.82rem;}
/* Issuer CTA (u.php) */
.profile-actions.is-single{grid-template-columns:1fr;max-width:240px;}
.visitor-actions{max-width:330px;margin:var(--space-5) auto 0;display:flex;flex-direction:column;gap:var(--space-px-10);}
.visitor-actions > *{margin:0;}
.visitor-action-btn{width:100%;}
.saved-avatar,.vouch-avatar{overflow:hidden;}
.vouch-cta{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin:0;}
.vouch-cta-state{display:inline-flex;align-items:center;gap:var(--space-px-6);color:var(--ink-2);font-weight:600;font-size:.9rem;}
.vouch-cta-icon{display:inline-flex;color:var(--success-deep);}
.visitor-actions .watch-profile{width:100%;}
.vouch-revoke-btn{background:none;border:none;padding:0;color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;}
.vouch-revoke-btn:hover{color:var(--danger,#ef4444);}
/* Ceremony modal (u.php) */
.vouch-step{margin-top:var(--space-3);}
.vouch-signwith{margin:var(--space-2) 0;color:var(--muted);font-size:.82rem;word-break:break-all;}
.vouch-copy-btn{width:auto;margin-bottom:var(--space-2);}
.vouch-sig-label{display:block;margin-top:var(--space-2);font-size:.85rem;color:var(--muted);}
.vouch-sig-input{display:block;width:100%;margin-top:var(--space-1);font-family:var(--font-mono);font-size:.8rem;padding:var(--space-2);border:1px solid var(--field-border);border-radius:var(--radius-control);resize:vertical;box-sizing:border-box;}
.vouch-status{margin:var(--space-3) 0 0;font-size:.85rem;color:var(--danger,#ef4444);}
.vouch-status.is-ok{color:var(--success-deep);}
/* Subject management (dashboard.php) */
.vouch-manage-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);}
.vouch-pending-tag{color:var(--brand-deep,#4f2bd4);font-weight:700;}
.vouch-shown-tag{color:var(--success-deep);font-weight:700;}
.vouch-approve-btn{color:var(--success-deep);font-weight:700;}

/* ============================================================
   HOMEPAGE (index.php) — dramatic dark hero in Bitsy's card
   language, with the product shown verifying in motion. All
   scoped under .home-* so no other page is affected.
   ============================================================ */
.home-main{display:grid;gap:var(--space-14);}

/* ---- hero (dark dramatic card) ---- */
.home-hero{
    position:relative;overflow:hidden;isolation:isolate;
    border-radius:var(--radius-lg);
    padding:clamp(28px,5vw,56px);
    color:#f3f0fc;
    background:
        radial-gradient(820px 520px at 82% -10%, rgba(var(--brand-rgb),.42), transparent 60%),
        radial-gradient(680px 520px at 6% 16%, rgba(91,75,255,.30), transparent 58%),
        radial-gradient(700px 600px at 60% 116%, rgba(181,55,224,.22), transparent 60%),
        linear-gradient(165deg,#0d0a1a 0%,#120b26 55%,#150d2e 100%);
    box-shadow:0 40px 110px rgba(20,8,50,.5);
}
.home-aurora{position:absolute;inset:-25% -12%;z-index:-1;filter:blur(64px);opacity:.7;pointer-events:none;}
.home-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:home-drift 24s ease-in-out infinite;}
.home-aurora span:nth-child(1){width:520px;height:520px;left:62%;top:-12%;background:radial-gradient(circle,rgba(var(--brand-rgb),.55),transparent 65%);}
.home-aurora span:nth-child(2){width:480px;height:480px;left:-6%;top:34%;background:radial-gradient(circle,rgba(91,75,255,.45),transparent 65%);animation-delay:-8s;}
.home-aurora span:nth-child(3){width:440px;height:440px;left:44%;top:74%;background:radial-gradient(circle,rgba(181,55,224,.4),transparent 65%);animation-delay:-15s;}
@keyframes home-drift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(36px,-26px) scale(1.08);}66%{transform:translate(-26px,22px) scale(.95);}}

.home-hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,48px);align-items:center;}
.home-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c7b6ff;background:rgba(var(--brand-rgb),.14);border:1px solid rgba(var(--brand-rgb),.3);padding:7px 13px;border-radius:var(--radius-pill);}
.home-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.03;letter-spacing:-.035em;margin:var(--space-4) 0 0;font-weight:900;color:#fff;}
.home-grad{background:linear-gradient(120deg,#c7b6ff,#e9d6ff 55%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.home-sub{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:#b8aedf;margin:var(--space-4) 0 0;max-width:32ch;}
.home-cta{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-top:var(--space-7);}
.home-ghost{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:15px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-control);padding:13px 20px;text-decoration:none;transition:background .18s ease;}
.home-ghost:hover{background:rgba(255,255,255,.13);}
.home-hero .btn.primary{box-shadow:0 14px 34px rgba(var(--brand-rgb),.45);}
.home-trust{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;margin-top:var(--space-5);color:#a99fd0;font-size:13px;font-weight:500;}
.home-trust-light{color:var(--muted);justify-content:center;margin-top:var(--space-5);}

/* ---- real profile component, floated in the hero ---- */
.home-stage{perspective:1500px;display:grid;place-items:center;}
.home-card-tilt{width:100%;max-width:380px;transform-style:preserve-3d;transition:transform .25s ease;will-change:transform;}
.home-card-float{animation:home-float 7s ease-in-out infinite;}
@keyframes home-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---- light content sections (vertical rhythm comes from .home-main gap) ---- */
.home-section{padding:0;}
.home-eyebrow-d{display:inline-flex;align-items:center;gap:var(--space-2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:rgba(var(--brand-rgb),.08);border:1px solid rgba(var(--brand-rgb),.18);padding:7px 13px;border-radius:var(--radius-pill);}
.home-h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.03em;margin:var(--space-4) 0 0;font-weight:900;color:var(--ink-deep);max-width:20ch;}
.home-lead{font-size:17px;line-height:1.55;color:var(--muted);margin:var(--space-4) 0 0;max-width:56ch;}

/* who it's for */
.home-who-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-7);}
.home-who{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);transition:transform .2s ease,box-shadow .2s ease;}
.home-who:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(30,10,70,.12);}
.home-tld{position:absolute;top:var(--space-5);right:var(--space-5);font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;font-weight:700;color:var(--brand);background:rgba(var(--brand-rgb),.08);padding:var(--space-1) var(--space-px-9);border-radius:8px;}
.home-who-ico{width:44px;height:44px;border-radius:var(--radius-control);display:grid;place-items:center;color:var(--brand);background:linear-gradient(135deg,rgba(var(--brand-rgb),.14),rgba(91,75,255,.1));}
.home-who-ico svg{width:22px;height:22px;}
.home-who h3{margin:var(--space-4) 0 0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink-deep);}
.home-who p{margin:var(--space-2) 0 0;color:var(--muted);font-size:15px;line-height:1.55;}

/* verify ethos strip (dark inset) */
.home-verify-strip{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(28px,4vw,52px);margin:0;color:#fff;background:linear-gradient(135deg,#0e0a1c,#150d2c);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-10);align-items:center;}
.home-verify-glow{position:absolute;width:420px;height:420px;right:-90px;top:-130px;background:radial-gradient(circle,rgba(var(--brand-rgb),.4),transparent 65%);filter:blur(44px);pointer-events:none;}
.home-verify-copy{position:relative;z-index:1;}
.home-verify-copy h2{margin:var(--space-4) 0 0;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:900;color:#fff;}
.home-verify-copy p{margin:var(--space-4) 0 0;color:#b8aedf;font-size:16px;line-height:1.55;max-width:46ch;}
.home-verify-copy .btn.primary{margin-top:var(--space-6);}
.home-verify-demo{position:relative;z-index:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:var(--space-5);}
.home-dv-row{display:flex;align-items:center;gap:var(--space-px-10);font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;color:#b8aedf;padding:var(--space-px-9) 0;border-bottom:1px solid rgba(255,255,255,.08);}
.home-dv-row:last-of-type{border-bottom:0;}
.home-dv-k{color:#c7b6ff;font-weight:700;flex:0 0 70px;}
.home-dv-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-dv-result{display:flex;align-items:center;gap:var(--space-px-10);margin-top:var(--space-3);font-weight:800;font-size:15px;color:#3ee08a;opacity:0;transform:translateY(6px);transition:.5s ease;}
.home-dv-result.in{opacity:1;transform:none;}
.home-dv-result svg{width:20px;height:20px;}

/* condensed trust features */
.home-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-7);}
.home-feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);}
.home-feat-ico{width:44px;height:44px;border-radius:var(--radius-control);display:grid;place-items:center;color:var(--brand);background:rgba(var(--brand-rgb),.09);}
.home-feat-ico svg{width:22px;height:22px;}
.home-feat h3{margin:var(--space-4) 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink-deep);}
.home-feat p{margin:var(--space-2) 0 0;color:var(--muted);font-size:14px;line-height:1.5;}

/* final cta */
.home-final{text-align:center;padding:0 0 var(--space-14);}
.home-final .home-h2{margin-left:auto;margin-right:auto;max-width:24ch;}
.home-claim{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-control);padding:7px 7px 7px 18px;margin-top:var(--space-6);box-shadow:0 18px 50px rgba(30,10,70,.1);font-size:16px;}
.home-claim-pre{color:var(--muted);font-weight:600;}
.home-claim-you{color:var(--ink-deep);font-weight:800;border-bottom:2px solid var(--brand);padding:0 2px;animation:home-blink 1.4s step-end infinite;min-width:80px;text-align:left;}
@keyframes home-blink{50%{border-color:transparent;}}
.home-claim .btn{margin-left:var(--space-3);}

@media(max-width:820px){
    .home-main{gap:var(--space-10);}
    .home-hero-inner{grid-template-columns:1fr;gap:var(--space-7);}
    .home-stage{order:-1;}
    .home-who-grid{grid-template-columns:1fr;}
    .home-verify-strip{grid-template-columns:1fr;}
    .home-feat-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
    .home-aurora span,.home-card-float{animation:none;}
}

/* ── Homepage hero: the real profile component (shared partial) ──────────────
   The hero renders the actual /demo card via partials/asset_list.php, so it can
   never drift from the product. These rules adapt the real card to the dark
   hero: dark ink for its own text (the hero sets light text), a solid surface
   that pops on the dark panel, a contained width, an honest entrance, and a
   one-time attention pulse on the (genuinely verified) ownership chip. */
.home-real-card{color:var(--ink);background:#fff;max-width:380px;margin:0 auto;pointer-events:none;
  box-shadow:0 44px 110px rgba(20,8,50,.5),0 0 0 1px rgba(255,255,255,.5),0 0 64px rgba(var(--brand-rgb),.22);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.home-real-card .profile{padding-top:var(--space-2);}
.home-real-card.home-real-pre{opacity:0;transform:translateY(14px) scale(.985);}
.home-real-card.in{opacity:1;transform:none;}
@keyframes homeChipPop{0%{transform:scale(1);}30%{transform:scale(1.12);}60%{transform:scale(.98);}100%{transform:scale(1);}}
.home-real-card .owner-proof-chip.home-chip-pop{animation:homeChipPop .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 4px rgba(15,122,57,.16);}
@media (prefers-reduced-motion:reduce){.home-real-card{transition:none;}.home-real-card .owner-proof-chip.home-chip-pop{animation:none;}}

/* the card sits inside .home-hero, whose h1 rule (white, clamp 38–62px) would
   otherwise hijack the display name — restore the real profile h1 (34px, dark)
   so the hero card matches /demo exactly */
.home-hero .home-real-card h1{color:inherit;font-size:34px;line-height:1;letter-spacing:-.06em;font-weight:800;margin-top:var(--space-px-6);}
/* the hero card is a completely non-interactive preview: pointer-events:none on the
   card (above) makes it fully inert with a default arrow cursor — no clicks, no copy,
   no proof. The "See a live profile" button is the only path to a clickable profile. */