@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;
}

:root{
    --ink:#12121a;
    --ink-2:#302c45;
    --ink-3:#3f3a52;
    --ink-4:#4f4b60;
    --ink-5:#5a556d;
    --muted:#6d6a7c;
    --card:rgba(255,255,255,.8);
    --brand:#7c3cff;
    --hairline:rgba(18,18,26,.07);
    --hairline-strong:rgba(18,18,26,.10);
    --line:var(--hairline-strong); /* was used in 3 borders but never defined */
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --brand-rgb:124,60,255;
    --brand2:#00d4ff;
    --success:#22c55e;
    --success-deep:#16a34a;
    --danger:#ef4444;
    --danger-deep:#dc2626;
    --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:rgba(var(--brand-rgb),.28);
    --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;
    --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,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(0,212,255,.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;
}

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

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    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:6px;
    border-radius:var(--radius-pill);
    backdrop-filter:blur(18px);
}

.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(18,18,26,.38);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}

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

.nav a{
    border-radius:var(--radius-pill);
    padding:10px 14px;
    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(45,37,86,.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:6px;}
.legal .legal-updated{color:var(--muted);font-size:14px;margin:0 0 var(--space-7);}
.legal h2{font-size:21px;margin:30px 0 10px;}
.legal h3{font-size:16px;margin:var(--space-4) 0 6px;}
.legal p{color:var(--ink-2);line-height:1.7;margin:0 0 var(--space-3);}
.legal ul{margin:0 0 14px;padding-left:22px;}
.legal li{color:var(--ink-2);line-height:1.7;margin-bottom:6px;}
.legal strong{color:var(--ink);}
.legal a{color:var(--brand-deep);text-decoration:underline;}
.legal a:hover{color:var(--brand);}

.card,
.panel,
.main-card,
.sidebar{
    background:var(--card);
    backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.65);
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:0 24px 80px rgba(45,37,86,.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(0,212,255,.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:10px;
    flex-wrap:wrap;
    margin-top:var(--space-5);
}

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

.avatar{
    width:110px;
    height:110px;
    border-radius:var(--radius-lg);
    margin:0 auto 14px;
    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:6px;
}

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

.profile .tagline,
.profile .bio-text{
    margin-top:22px;
    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(45,37,86,.08);
}

.profile .url{
    margin-top:18px;
    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(34,197,94,.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:10px;
    margin:var(--space-3) 0;
    box-shadow:0 10px 25px rgba(45,37,86,.05);
}

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

.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;
}

.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:5px;
}

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

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

.orange{background:linear-gradient(135deg,#ffbf3c,#ff8a00)}
.purple{background:linear-gradient(135deg,#8b8cff,#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(18,18,26,.055);
    margin-top:var(--space-2);
    transition:.15s ease;
    position:relative;
}

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

.source-row.preferred{
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,255,245,.9));
    border:1px solid rgba(34,197,94,.36);
    box-shadow:0 14px 30px rgba(34,197,94,.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:5px;
    padding:6px var(--space-3);
    border-radius:var(--radius-pill);
    font-size:11px;
    font-weight:900;
    background:rgba(34,197,94,.13);
    color:var(--success-deep);
    white-space:nowrap;
    cursor:default;
}

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

/* Buttons */
.btn,
.copy,
.dark-btn{
    border:0;
    color:white;
    background:var(--ink-deep);
    padding:10px 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:10px 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);
    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(18,18,26,.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:14px;
    padding:14px;
    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(34,197,94,.12);
    color:var(--success-deep);
}

.error-box{
    background:rgba(239,68,68,.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:18px;
}
.footer-links{
    white-space:nowrap;
}

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

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

/* 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(--hairline-strong);
    background:rgba(255,255,255,.82);
}

.field-help{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
}
/* 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:6px;
    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) 10px;
    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: 6px 0 0;
}

.form-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Dashboard */
.grid{
    display:grid;
    gap:18px;
    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:10px;
    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(45,37,86,.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:5px 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:14px;
    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{
    border:1px solid rgba(239,68,68,.28);
    background:rgba(255,255,255,.62);
    border-radius:var(--radius-md);
    padding:var(--space-4);
    margin-top:var(--space-6);
}

.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;
}

.theme-card:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(45,37,86,.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(45,37,86,.12) !important;
    display:block;
}

.preset-theme-card[data-color="#7c3cff"] .theme-swatch{
    background:linear-gradient(135deg,#8b5cf6,#4c1d95) !important;
}

.preset-theme-card[data-color="#2563eb"] .theme-swatch{
    background:linear-gradient(135deg,#60a5fa,#2563eb) !important;
}

.preset-theme-card[data-color="#16a34a"] .theme-swatch{
    background:linear-gradient(135deg,#34d399,#059669) !important;
}

.preset-theme-card[data-color="#f97316"] .theme-swatch{
    background:linear-gradient(135deg,#fbbf24,#f97316) !important;
}

.preset-theme-card[data-color="#111827"] .theme-swatch{
    background:linear-gradient(135deg,#374151,#111827) !important;
}

.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:14px;
    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(45,37,86,.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;
}

.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:6px;
    margin-top:var(--space-4);
    font-size:13px;
    color:var(--muted);
}

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

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

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

.auth-actions .secondary:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(45,37,86,.08);
}
.auth-resend{
    margin-top:var(--space-4);
    text-align:center;
    font-size:13px;
}
.auth-resend summary{
    cursor:pointer;
    color:var(--brand);
    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);
    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:8px;
    margin:0;
}
/* Separator only when a visible verify block sits above the toggle. The
   adjacent-sibling selector skips a [hidden] block automatically, so in
   account mode the checkbox stands alone with even wrapper padding. */
.pe-verify-block:not([hidden]) + .pe-account-row{
    margin-top:var(--space-3);
    padding-top:var(--space-3);
    border-top:1px solid rgba(124,60,255,.14);
}

.pe-account-row input[type=checkbox]{
    width:auto;
    margin:0;
}
.verify-msg.is-success{color:var(--success-deep);}
.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:14px;
    }

    .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(45,37,86,.22);
        z-index:95;
    }

    .nav.is-open a{
        width:100%;
        text-align:left;
        padding:var(--space-3) 14px;
        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:18px var(--space-3) 42px;
    }

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

    h1{
        font-size:31px;
    }

    h2{
        font-size:25px;
    }

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

/* Character counters */
.char-counter{
    display:block;
    margin-top:6px;
    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:5px;
    width:max-content;
    margin-top:0;
    padding:5px 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:10px;
    margin:var(--space-4) auto 0;
    max-width:330px;
    margin-top: var(--space-5);
}

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

.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:18px;
}

.bitsy-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(18,18,26,.38);
    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:14px;
    border-radius:var(--radius-lg);
    background:white;
    border:1px solid var(--hairline);
    box-shadow:0 14px 32px rgba(45,37,86,.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(18,18,26,.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:14px;
}

.bitsy-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(10px);
    z-index:1100;
    padding:11px 14px;
    border-radius:var(--radius-pill);
    background:var(--ink-deep);
    color:white;
    font-size:13px;
    font-weight:900;
    box-shadow:0 18px 34px rgba(18,18,26,.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 30px;
}

.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;
}

.preview-card{
    margin-left:auto;
    padding:var(--space-4);
    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(45,37,86,.16);
    backdrop-filter:blur(18px);
    width: min(390px,100%);
}

.preview-profile{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding-bottom:14px;
    margin-bottom:var(--space-3);
    border-bottom:1px solid var(--hairline);
}

.preview-avatar{
    width:58px;
    height:58px;
    border-radius:var(--radius-md);
    display:grid;
    place-items:center;
    color:white;
    font-size:24px;
    font-weight:900;
    background:
        linear-gradient(135deg,rgba(255,255,255,.28),transparent),
        linear-gradient(135deg,var(--brand),var(--brand-deeper));
    box-shadow:0 16px 28px rgba(var(--brand-rgb),.22);
}

.preview-profile strong,
.preview-row strong{
    display:block;
    letter-spacing:-.03em;
}

.preview-profile span,
.preview-row span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.preview-row{
    display:grid;
    gap:10px;
    padding:10px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.76);
    border:1px solid rgba(18,18,26,.055);
    margin-top:var(--space-2);
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    align-items: center !important;
}

.preview-row.preferred{
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(236,255,245,.9));
    border-color:rgba(34,197,94,.30);
}

.preview-coin{
    width:42px;
    height:42px;
    border-radius:var(--radius-sm);
    display:grid;
    place-items:center;
    color:white;
    font-weight:900;
}

.preview-coin.btc{background:linear-gradient(135deg,#ffbf3c,#ff8a00)}
.preview-coin.eth{background:linear-gradient(135deg,#8b8cff,#3f35d4)}
.preview-coin.usdt{background:linear-gradient(135deg,#24c081,#0c8c61)}

.preview-row button{
    border:0;
    color:white;
    background:var(--ink-deep);
    padding:var(--space-2) 10px;
    border-radius:var(--radius-control);
    font-weight:900;
    font-size:12px;
}

.preview-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2);
    margin-top:var(--space-3);
}

.preview-actions span{
    display:grid;
    place-items:center;
    min-height:40px;
    border-radius:var(--radius-sm);
    font-size:12px;
    font-weight:900;
    background:var(--hairline);
    color:var(--ink-4);
}

.preview-actions span:first-child{
    color:white;
    background:var(--grad-primary);
    box-shadow:0 14px 24px rgba(var(--brand-rgb),.20);
}

@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;
    }

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

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

    .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;
    }

    .preview-coin{
        width:38px;
        height:38px;
    }
}

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

.btn,
.secondary,
.ghost,
.set-preferred,
.dark-btn{
    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(45,37,86,.10);
}

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

}

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

    .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 */
input,
textarea,
select{
    width:100%;
    min-height:46px;
    margin-top:6px;
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-sm);
    padding:var(--space-3) 14px;
    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;
}

.copy{
    min-height:40px;
    min-width:64px;
    padding:var(--space-2) 10px;
    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:10px;
    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:10px;
}

.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:6px;
    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(45,37,86,.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:22px;
    box-shadow:0 28px 90px rgba(18,18,26,.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(34,197,94,.12); color:var(--success-deep); }
.history-status-bad{ background:rgba(239,68,68,.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(124,60,255,.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{
    /* --space-3 matches .asset-group's margins; block-flow collapse makes the
       gap above this card identical to the gap between asset sections */
    margin-top:var(--space-3);
    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:8px;
    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:6px;
    font-size:12px;
    font-weight:800;
    color:var(--brand);
    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:14px;
    }

    .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;
}

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

input:focus,
textarea:focus,
select:focus{
    border-color:rgba(var(--brand-rgb),.46);
    box-shadow:0 0 0 4px var(--focus-shadow);
}

.btn,
.primary,
.secondary,
.ghost,
.set-preferred,
.dark-btn,
.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,
.dark-btn:hover,
.copy:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(45,37,86,.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,
.dark-btn:active,
.copy:active,
.theme-card:active,
.nav a:active{
    transform:translateY(1px);
    box-shadow:none;
}

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

.profile-accent-card input:focus,
.profile-accent-card textarea:focus,
.profile-accent-card select:focus{
    border-color:rgba(var(--brand-rgb),.46);
    box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16);
}

@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,
    .dark-btn:hover,
    .copy:hover,
    .nav a:active{
        transform:none !important;
    }
}

/* Public profile accent propagation */
.profile-accent-card{
    --focus-ring:rgba(var(--brand-rgb),.28);
    --focus-shadow:rgba(var(--brand-rgb),.16);
    border-color:rgba(var(--brand-rgb),.16);
    box-shadow:
        0 24px 80px rgba(45,37,86,.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(0,212,255,.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);
}

.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);
}

.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(18,18,26,.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(45,37,86,.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);
}

/* Profile polish */
.profile-cover{
    position:relative;
    margin:-22px -22px 18px;
    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(18,18,26,.05),rgba(18,18,26,.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:14px auto 0;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top: var(--space-4);
}

.profile-meta-row span{
    display:inline-flex;
    padding:6px 9px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.62);
    border:1px solid var(--hairline);
}

/* 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{
    margin:calc(-1 * var(--space-1)) 0 var(--space-3);
}
.assets-fresh-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 10px;
    border-radius:var(--radius-pill);
    font-size:12px;
    font-weight:800;
    color:var(--success-deep);
    background:rgba(34,197,94,.1);
    border:1px solid rgba(34,197,94,.22);
}
.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-4);
    border-radius:var(--radius-md);
    background:rgba(124,60,255,.05);
    border:1px solid rgba(var(--brand-rgb),.12);
}
.freshness-copy{
    display:flex;
    align-items:baseline;
    gap:6px;
    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:14px auto 0;
}

.profile-link-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    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(45,37,86,.06);
    min-height: 38px;
    padding: var(--space-2) 11px;
    backdrop-filter: blur(14px);
    border-color: rgba(255,255,255,.72);
}

.profile-link-chip:hover{
    transform:translateY(-1px);
    color:var(--brand);
    box-shadow:0 12px 24px rgba(45,37,86,.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;
}

.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:6px;
    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{
    box-shadow:0 28px 90px rgba(45,37,86,.20);
}

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

.public-profile-card .avatar{
    margin-top:2px;
}
.social-link-row{
    margin-top:var(--space-2);
}
.contact-chip{
    padding:9px 13px;
}

.social-chip{
    padding:var(--space-2) 10px;
}

.social-chip .profile-link-icon{
    width:24px;
    height:24px;
}
.public-profile-card .section-title{
    margin-top:18px;
}

@media(min-width:521px){
    .social-link-row .profile-link-label{
        display:none;
    }

    .social-link-row .profile-link-chip{
        border-radius:var(--radius-pill);
        width:42px;
        height:42px;
        padding:0;
        justify-content:center;
    }

    .social-link-row .profile-link-icon{
        width:28px;
        height:28px;
    }
}

@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;
    }

    .social-link-row{
        gap:7px;
    }
}

/* 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:14px;
    border-radius:var(--radius-md);
    font-size:13px;
    font-weight:800;
    line-height:1.45;
}

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

.dashboard-status-banner.neutral{
    background:rgba(18,18,26,.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);
}

.social-chip .profile-link-icon:has(img){
    background:var(--hairline);
}
.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;
}

.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:linear-gradient(135deg,var(--brand),rgba(var(--brand-rgb,124,60,255),.66)) !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;
}

.main-card{
    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. */
.asset-icon:has(img),
.preview-coin:has(img){
    border-radius:var(--radius-pill) !important;
    background:rgba(255,255,255,.95);
    padding:var(--space-1);
    box-shadow:0 10px 22px rgba(45,37,86,.10);
}

/* 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. */

.meta-location:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50% 50% 50% 0;
    background:var(--danger);
    transform:rotate(-45deg);
    display:block;
}

.meta-location:after{
    content:"";
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:white;
    top:4px;
    left:5px;
}

.meta-joined:before{
    content:"";
    width:12px;
    height:12px;
    display:block;
    background:linear-gradient(135deg,#facc15,#f59e0b);
    clip-path:polygon(50% 0%,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0% 50%,39% 35%);
}

/* 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;
}

.contact-chip .profile-link-icon,
.profile-link-chip.website .profile-link-icon,
.profile-link-chip.email .profile-link-icon{
    background:rgba(var(--brand-rgb),.10) !important;
}
.social-label-icon img{
    width:14px;
    height:14px;
}

/* 9. Profile/settings pages line up visually with the rest of the app. */
.profile-extra-panel,
.appearance-section,
.danger-zone{
    background:rgba(255,255,255,.58);
    border:1px solid var(--hairline);
    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{padding:22px;}
.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;
}

/* 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"]{
    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(--focus-ring);
    outline-offset:2px;
    box-shadow:none;
}
.visibility-card span{
    min-width:0;
}

/* v1.3.8 routing/icon cleanup */
.profile-meta-row span{
    align-items:center;
    gap:6px;
}
.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;
}

.social-link-row .profile-link-chip{
    overflow:visible !important;
}

.social-link-row .profile-link-icon{
    width:28px !important;
    height:28px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.84) !important;
    color:var(--ink) !important;
    box-shadow:0 8px 18px rgba(45,37,86,.08);
}

.social-link-row .profile-link-icon img{
    width:15px !important;
    height:15px !important;
    display:block !important;
    object-fit:contain !important;
    filter:none !important;
}

.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:10px 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. */
.preview-address-copy strong{
    display:block;
}

.preview-address-meta,
.preview-address{
    display:block;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.preview-address-meta{
    color:var(--muted);
    font-weight:800;
    margin-top:2px;
    font-size: 12px !important;
}

.preview-address{
    color:var(--ink-5);
    font-family:var(--font-mono);
    font-weight:700;
    margin-top:2px;
    font-size: 11.5px !important;
}

@media(max-width:520px){
    .preview-row{
        grid-template-columns:38px minmax(0,1fr) !important;
    }

    .preview-row button{
        grid-column:1 / -1;
        width:100%;
    }
}

/* 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:14px;
    gap: 10px;
}

.social-modal-link{
    display:grid;
    align-items:center;
    gap:10px;
    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: 10px 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:10px;
}

.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:9px 13px;
    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. */
.preview-address-copy{
    min-width:0;
}

.preview-preferred-badge{
    display:inline-flex;
    width:max-content;
    border-radius:var(--radius-pill);
    font-size:10px;
    font-weight:900;
    line-height:1;
}

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

@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) !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) !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. */
.preview-link-row{
    display:flex;
    gap:var(--space-2);
    justify-content:center;
    margin:0 0 var(--space-3);
}

.preview-link-row span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    min-width:72px;
    padding:6px 9px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.74);
    border:1px solid var(--hairline);
    box-shadow:0 8px 18px rgba(45,37,86,.05);
    color:var(--ink-3);
    font-size:11px;
    font-weight:900;
    gap: 6px;
}

@media(max-width:520px){

    .preview-link-row{
        flex-wrap:wrap;
    }

    .preview-link-row span{
        flex:1 1 auto;
        min-width:0;
    }
}

/* 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,
.preview-preferred-badge,
.preview-preferred-asset-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;
}

.address-preferred-badge{
    margin-top:5px;
    padding:5px 10px;
}

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

.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. */
.bitsy-preview-logo{
    position:relative;
    font-size:0 !important;
    background:linear-gradient(135deg,var(--brand),var(--brand2)) !important;
}

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

.bitsy-preview-logo:before{
    width:22px;
    height:22px;
    left:16px;
    top:15px;
}

.bitsy-preview-logo:after{
    width:13px;
    height:13px;
    right:14px;
    bottom:14px;
    opacity:.8;
}
.preview-asset-title{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

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

.preview-preferred-asset-badge{
    padding:var(--space-1) 6px;
    font-size:9px;
    color:var(--brand-deep);
    background:rgba(var(--brand-rgb),.12);
}

.preview-preferred-badge{
    margin-top:5px;
    padding:var(--space-1) 7px;
    color:var(--brand-deep);
    background:rgba(var(--brand-rgb),.12);
}

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

}

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

/* Homepage now frames the real /demo page so it stays consistent. */
.demo-frame-wrap{
    display:flex;
    justify-content:flex-end;
}

.demo-frame-card{
    position:relative;
    width:min(390px,100%);
    height:620px;
    margin-left:auto;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.74);
    box-shadow:0 24px 70px rgba(45,37,86,.16);
    backdrop-filter:blur(18px);
}

.demo-profile-frame{
    width:100%;
    height:100%;
    border:0;
    display:block;
    transform-origin:top center;
    background:transparent;
}

.demo-frame-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
}

.embed-preview-body{
    padding:0 !important;
    min-height:0 !important;
    background:transparent !important;
    overflow:hidden !important;
}

.embed-preview-body .shell{
    width:100% !important;
    margin:0 !important;
}

.embed-preview-body .public-profile-card{
    border-radius:0 !important;
    box-shadow:none !important;
    border:0 !important;
    min-height:620px;
}

.embed-preview-body .footer,
.embed-preview-body .topbar{
    display:none !important;
}

/* 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:10px;
    width:100%;
    min-width:0;
}

/* Standardize symbols: star for asset-level, check for address-level. */
.preferred-asset-badge:before,
.preferred-asset-button:before,
.preview-preferred-asset-badge:before{
    content:"★" !important;
}

.address-preferred-badge:before,
.preview-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. */
.preview-link-row img{
    width:13px;
    height:13px;
    display:block;
    object-fit:contain;
}

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

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

@media(max-width:520px){
    .demo-frame-card{
        height:590px;
    }

    .embed-preview-body .public-profile-card{
        min-height:590px;
    }

}

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

/* Stop iframe-preview styling from affecting the homepage if cached markup exists. */
.demo-frame-card,
.demo-profile-frame,
.demo-frame-overlay{
    display:none !important;
}

/* 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(45,37,86,.16);
    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;
}

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

@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) 10px;
}

/* 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 5px regardless of
       which font (and which font leading) the visitor's browser renders */
    gap: 5px;
    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:6px 9px 5px;
    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:5px 10px;
    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) 10px 7px;
    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:6px 9px 5px;
    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 14px;
}

/* 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:14px;
}
.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:5px;
    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. */

.profile-accent-card .asset-group{
    padding:var(--space-4);
}

/* 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  =========== */
/* the lone .panel after #asset-list matches the cards (20px), without
   touching the .panel blocks on the settings page. */
#asset-list ~ .panel{
    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:6px;
    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:6px;
    margin-top:6px;
}
.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:10px 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:6px;
}
.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:6px;
    background:#fff;
    border:1px solid rgba(18,18,26,.12);
    border-radius:var(--radius-sm);
    box-shadow:0 14px 34px rgba(18,18,26,.16);
}
.combo-option{
    display:block;
    width:100%;
    margin:0;
    min-height:0;
    padding:9px 11px;
    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) 9px;
    border-radius:var(--radius-pill);
    font-size:11px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
}
.status-chip-ok{
    background:rgba(34,197,94,.14);
    color:var(--success-deep);
}
.status-chip-warn{
    background:rgba(239,68,68,.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-3);
}
.embed-share-head h2{margin:0;font-size:18px;}
.embed-share-head p{margin:var(--space-1) 0 0;}
.embed-picker{
    margin-top:14px;
    width:100%;
    max-width:280px;
    padding:9px var(--space-3);
    border:1px solid rgba(18,18,26,.14);
    border-radius:var(--radius-sm);
    background:#fff;
    font-size:14px;
    color:var(--ink);
    cursor:pointer;
}
.embed-code{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin-top:14px;
}
.embed-code code{
    flex:1 1 auto;
    min-width:0;
    display:block;
    background:rgba(18,18,26,.04);
    border:1px solid var(--hairline);
    border-radius:var(--radius-sm);
    padding:10px 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);
    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-5) 0 var(--space-3);
    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) 11px;
    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:10px;
    margin:var(--space-3) 0 var(--space-3)
}

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

.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-3)
}

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

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

.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),.38));
    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:10px;
    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 h2{
    margin-bottom:2px;
}

/* Media (avatar / cover) preview blocks in the profile editor */
.media-preview{
    margin:6px 0 var(--space-4);
}
.media-preview-action{
    margin-top:10px;
}
.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(45,37,86,.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(45,37,86,.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-4);
}

/* Wide success box (forgot password / username) */
.success-box.success-box-wide{
    margin:0 0 14px;
    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);
}
.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 14px;
    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:10px;
    margin:14px 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:10px;
}
.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(18,18,26,.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:5px;
    background:rgba(255,255,255,.96);
    color:var(--ink);
    font-weight:800;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    padding:6px 11px;
    border-radius:var(--radius-pill);
    box-shadow:0 6px 16px rgba(18,18,26,.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:10px; 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:10px;
    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 14px}
.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:5px;background:rgba(18,18,26,.62);color:#fff;border:0;cursor:pointer;font-weight:800;font-size:12px;line-height:1;padding:6px 10px;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:5px 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:14px 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:10px;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 7px;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:14px 0;}
.twofa-codes li{font-family:var(--font-mono);font-size:15px;letter-spacing:1px;background:rgba(0,0,0,.05);padding:9px 10px;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:9px 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:9px 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:7px;}
.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:10px;
    box-shadow:0 10px 25px rgba(45,37,86,.05);
    transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social-sort-row:hover{
    border-color:rgba(18,18,26,.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(18,18,26,.12);
    color:var(--ink);
}
.social-sort-row.dragging{
    background:rgba(255,255,255,.97);
    transform:scale(1.01);
    box-shadow:0 18px 40px rgba(45,37,86,.22);
    border-color:rgba(18,18,26,.28);
}

/* v2.0 Domain ownership verification */
.verified-owner-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 11px 5px var(--space-2);
    border-radius:var(--radius-pill);
    background:rgba(34,197,94,.12);
    border:1px solid rgba(34,197,94,.30);
    color:var(--success-deep);
    font-size:13px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}
.verified-owner-badge svg{color:var(--success);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(34,197,94,.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;}
.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) 14px;
    background:rgba(124,60,255,.05);
    border:1px solid rgba(124,60,255,.14);
    border-radius:var(--radius-md);
}
.site-verify-inline > p{margin:0 0 10px;}
.site-verify-inline > :last-child{margin-bottom:0;}
.verify-msg{
    font-size:13px;
    font-weight:700;
    padding:var(--space-2) 11px;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
}
.verify-msg[hidden]{display:none;}
.verify-msg.success{color:var(--success-deep);background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.30);}
.verify-msg.error{color:var(--danger-deep);background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28);}
.verify-code-row{display:flex;align-items:stretch;gap:6px;margin:0 0 10px;}
.verify-code{
    flex:1 1 auto;
    min-width:0;
    box-sizing:border-box;
    margin:0;
    padding:10px 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(18,18,26,.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(34,197,94,.45);background:rgba(34,197,94,.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 10px;}
.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 5px;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(18,18,26,.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(34,197,94,.16);
    padding:1px 5px;
    border-radius:5px;
    margin:0 1px;
}
.copy-confirm .cc-note{
    display:block;
    margin-top:5px;
    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:14px 0 var(--space-1);text-align:left;}
.qr-amount-label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--ink-2);
    margin-bottom:6px;
}
.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);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);}
/* 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:6px that pushed the value down */
    padding:10px 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(18,18,26,.05);
    border-left:1px solid var(--line);
}
.qr-amount-help{margin-top:6px;}

/* 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:10px;}
    .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:6px;}
    .qr-print-img{width:300px;height:300px;display:block;margin:14px auto;}
    .qr-print-amount{font-size:16px;font-weight:800;margin-top:6px;}
    .qr-print-address{
        font-family:var(--font-mono);
        font-size:12px;
        word-break:break-all;
        max-width:380px;
        margin:10px 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:18px 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 9px;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(34,197,94,.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(124,60,255,.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;}
/* 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(18,18,26,.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:5px;
    align-self:flex-start;
    width:fit-content;
    margin-top:6px;
    padding:3px 10px;
    border:1px solid rgba(34,197,94,.3);
    border-radius:var(--radius-pill);
    background:rgba(34,197,94,.1);
    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(34,197,94,.16); }

/* ---- v3.1: profile signing, ENS, copy receipts ---- */
/* The trust row now carries up to two chips (Signed + Freshness). */
.assets-fresh-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-2);
}
.profile-signed-row{
    display:flex;
    justify-content:center;
    margin:12px auto 0;
}
.profile-signed-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 10px;
    border:1px solid rgba(34,197,94,.3);
    border-radius:var(--radius-pill);
    /* same white-pill material as the meta chips, so it flows with the page;
       the violet icon + text keep it reading as a system mark */
    background:rgba(255,255,255,.62);
    color:var(--success-deep);
    font-size:12px;font-weight:800;
    cursor:pointer;
    -webkit-appearance:none;appearance:none;
}
.profile-signed-chip:hover{ background:rgba(255,255,255,.85); }
/* 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:6px;
    margin-top:0;
}
.address-chips:empty{display:none;}
/* On public profiles every pill in the trust row is success-green; the
   Preferred marks would otherwise follow the owner's accent and sit
   multicolored next to Ownership Verified. Manager pages keep brand. */
.address-chips .address-preferred-badge,
.public-profile-card .preferred-asset-badge{
    background:rgba(34,197,94,.12);
    color:var(--success-deep);
}
/* 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 10px;
    font-size:11px;
    line-height:1;
    width:auto;
}
.ens-chip{
    display:inline-flex;align-items:center;gap:4px;
    align-self:flex-start;
    width:fit-content;
    margin-top:6px;
    padding:3px 10px;
    /* 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(34,197,94,.3);
    border-radius:var(--radius-pill);
    background:rgba(34,197,94,.1);
    color:var(--success-deep);
    font-size:11px;font-weight:800;letter-spacing:.02em;
}
.sign-card{
    /* freshness-bar's margin-bottom (space-4) sets the rhythm above; match it
       below so the card sits 16/16 between the bar and the first asset. */
    margin:0 0 var(--space-4);
}
.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(124,60,255,.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:8px;
    padding:5px 12px;
    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{
    border-style:dashed;
}
.source-row.is-hidden{
    background:rgba(18,18,26,.02);
}