/* ==========================================================================
   KORD dApp — light instrument panel.

   Same light world as the marketing site, but denser: this is a product
   surface, not a page to read. Depth comes from layered blue-tinted shadows
   and hairlines rather than from a dark ground.

   Self-contained: kord.css is not loaded here, so this file owns the reset
   and the tokens. Names keep the `--d-` prefix from the first cut so the rest
   of the sheet did not have to churn.
   ========================================================================== */

:root {
    /* ground */
    --d-bg:        #eaf1fc;
    --d-bg-2:      #ffffff;
    --d-surface:   rgba(255, 255, 255, 0.86);
    --d-surface-2: rgba(19, 62, 140, 0.05);
    --d-line:      rgba(19, 62, 140, 0.14);
    --d-line-2:    rgba(19, 62, 140, 0.28);

    /* ink */
    --d-text:  #0a1834;
    --d-muted: #41527a;
    --d-dim:   #57668c;

    /* accents */
    --d-cyan:   #0f8fd0;
    --d-blue:   #1157e8;
    --d-violet: #5b34d6;
    --d-mint:   #0a9b76;

    --d-grad: linear-gradient(112deg, #23a4ff 0%, #1157e8 46%, #5b34d6 100%);
    --d-grad-soft: linear-gradient(112deg, rgba(35,164,255,.13), rgba(91,52,214,.13));

    /* form */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --shadow-1: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 14px rgba(19, 62, 140, .07);
    --shadow-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 38px rgba(19, 62, 140, .13);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* dapp.css is standalone -- kord.css is not loaded here, so the reset it
   normally provides has to live in this file. */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: inherit; }
button, input { font-family: inherit; }
::selection { background: rgba(17, 87, 232, .16); }

/* ---------- shell ---------- */

body.app-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--d-bg);
    color: var(--d-text);
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Brand glows so the ground is never flat black. Fixed, so they do not
   travel with scroll. */
body.app-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 520px at 12% -6%, rgba(35, 164, 255, .10), transparent 62%),
        radial-gradient(820px 620px at 92% 8%, rgba(91, 52, 214, .09), transparent 64%),
        radial-gradient(700px 500px at 50% 108%, rgba(17, 87, 232, .07), transparent 60%);
}
.app-body > * { position: relative; z-index: 1; }

a { color: var(--d-cyan); text-decoration: none; }
a:hover { color: #0b46c4; }
:focus-visible { outline: 2px solid var(--d-cyan); outline-offset: 2px; border-radius: 6px; }

/* Every figure here is read against another figure. */
.hero-amount, .kpi-v, .stream-v, .facts dd, .timer strong,
.streams-total strong, .fld input, .direct { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem clamp(0.9rem, 3vw, 1.8rem);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--d-line);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    color: var(--d-text);
}
.app-brand img { width: 28px; height: 28px; }
.app-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-nav { display: flex; align-items: center; gap: 1.15rem; margin-left: auto; }
.app-nav a, .navlink-btn {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--d-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.app-nav a:hover, .navlink-btn:hover, .app-nav a.is-current { color: var(--d-text); }

.nav-burger {
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 38px;
    padding: 0 9px;
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.nav-burger:hover { border-color: var(--d-line-2); transform: translateY(-1px); }
.nav-burger span { display: block; height: 2px; background: var(--d-muted); border-radius: 2px; }
.nav-burger span:nth-child(2) { width: 70%; }

.app-main {
    flex: 1;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 2.6vw, 1.8rem) clamp(0.9rem, 3vw, 1.8rem) 3.5rem;
    display: grid;
    gap: clamp(0.7rem, 1.6vw, 1rem);
}
.app-main > * { min-width: 0; }

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem clamp(0.9rem, 3vw, 1.8rem);
    border-top: 1px solid var(--d-line);
    font-size: 0.78rem;
    color: var(--d-dim);
}

/* ---------- bare shell (login / register) ---------- */

.app-bare .app-main { width: min(480px, 100%); padding-top: 0; }
.bare-top { display: flex; justify-content: center; padding: 1.6rem 1rem 0.8rem; }
.bare-foot { text-align: center; font-size: 0.74rem; color: var(--d-dim); padding: 0 1rem 2.4rem; margin: 0; }

/* ---------- surfaces ---------- */

.panel, .kpi, .stream {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.panel { padding: clamp(1rem, 2.2vw, 1.4rem); }
.panel > h2 {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--d-dim);
}
.panel > .sub { margin: 0 0 1rem; font-size: 0.83rem; color: var(--d-dim); }

.hint { font-size: 0.8rem; color: var(--d-dim); margin: 0.45rem 0 0; }
.muted { color: var(--d-dim); }

/* ---------- hero balance ---------- */

.hero-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 3vw, 1.9rem);
    border-radius: var(--r-xl);
    border: 1px solid var(--d-line-2);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(35,164,255,.13), transparent 58%),
        radial-gradient(120% 140% at 100% 100%, rgba(91,52,214,.12), transparent 58%),
        var(--d-bg-2);
    box-shadow: var(--shadow-2);
}
.hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--d-grad);
}

.addr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-text);
}
.addr-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--d-mint);
    box-shadow: 0 0 10px 2px rgba(52, 211, 153, .55);
    flex: none;
}

.hero-label { display: block; margin-top: 1.1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--d-dim); }
.hero-amount {
    display: block;
    margin: 0.3rem 0 0;
    font-size: clamp(2.4rem, 9vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    background: linear-gradient(102deg, #0f8fd0 0%, #1157e8 48%, #5b34d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--d-muted); }
.hero-meta b { color: var(--d-text); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }

.meter { margin-top: 1.2rem; }
.meter-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.73rem; color: var(--d-dim); margin-bottom: 0.4rem; }
.meter-track { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.meter-fill { height: 100%; width: 0; border-radius: 999px; background: var(--d-grad); transition: width 0.6s var(--ease); }

/* ---------- kpi tiles ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.4vw, 0.8rem); }
.kpi { padding: 0.9rem 1rem; }
.kpi-k { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-dim); }
.kpi-v { display: block; margin-top: 0.35rem; font-size: 1.28rem; font-weight: 800; letter-spacing: -0.025em; }
.kpi-s { display: block; margin-top: 0.1rem; font-size: 0.73rem; color: var(--d-dim); }

/* ---------- income streams ---------- */

.streams { display: grid; gap: 0.45rem; }
.stream {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 1rem;
    padding: 0.8rem 1rem 0.8rem 1.15rem;
    border: 1px solid var(--d-line);
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
}
/* A coloured spine per stream: four rows of identical figures are otherwise
   impossible to tell apart at a glance. */
.stream::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--spine, var(--d-blue));
}
.stream-rwp     { --spine: var(--d-cyan); }
.stream-sponsor { --spine: var(--d-mint); }
.stream-level   { --spine: var(--d-blue); }
.stream-royalty { --spine: var(--d-violet); }

.stream-n { font-size: 0.92rem; font-weight: 700; }
.stream-v { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; text-align: right; }
.stream-note { grid-column: 1 / -1; font-size: 0.75rem; color: var(--d-dim); }

.streams-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--d-line);
}
.streams-total span { font-size: 0.78rem; color: var(--d-muted); }
.streams-total strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }

/* ---------- feature cards ---------- */

.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 1.4vw, 0.85rem); }

.feat-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.9rem; }
.feat-badge {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 11px;
    background: var(--d-grad-soft);
    border: 1px solid var(--d-line);
    font-size: 0.88rem;
}
.feat-title { font-size: 0.95rem; font-weight: 700; }
.feat-title em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 500; color: var(--d-dim); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 0.85rem; }
.facts > div { background: rgba(19,62,140,.04); border: 1px solid var(--d-line); border-radius: var(--r-sm); padding: 0.55rem 0.7rem; }
.facts dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-dim); }
.facts dd { margin: 0.2rem 0 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- forms ---------- */

.fld { display: block; margin-bottom: 0.8rem; }
.fld > span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-dim); margin-bottom: 0.4rem; }
.fld input {
    width: 100%;
    font: inherit;
    color: var(--d-text);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.fld input::placeholder { color: var(--d-dim); }
.fld input:hover { border-color: var(--d-line-2); }
.fld input:focus { border-color: var(--d-cyan); background: #fff; outline: none; }
.fld input:disabled { color: var(--d-dim); background: rgba(19,62,140,.05); }

.copyrow { display: flex; gap: 0.45rem; }
.copyrow input { flex: 1; font-size: 0.8rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }

/* ---------- buttons ---------- */

.btn {
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.66rem 1.3rem;
    color: var(--d-text);
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.18s var(--ease), background 0.18s var(--ease);
}
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }

.btn-primary { background: var(--d-grad); color: #fff; box-shadow: 0 6px 22px rgba(35, 120, 255, .35); }
.btn-primary:not(:disabled):hover { box-shadow: 0 10px 30px rgba(35, 120, 255, .48); }
.btn-ghost { background: var(--d-surface-2); border-color: var(--d-line-2); }
.btn-ghost:not(:disabled):hover { background: rgba(19,62,140,.09); }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- register flow ---------- */

.flow { display: grid; gap: 0.7rem; }
.flow-head { text-align: center; margin-bottom: 0.3rem; }
.flow-head h1 { margin: 0 0 0.4rem; font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.flow-head p { margin: 0; color: var(--d-muted); font-size: 0.92rem; }

.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.flow-step {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color 0.22s var(--ease), opacity 0.22s var(--ease), background 0.22s var(--ease);
}
.flow-step:not(.is-active):not(.is-done) { opacity: 0.5; }
.flow-step.is-active {
    border-color: var(--d-line-2);
    background: radial-gradient(120% 160% at 0% 0%, rgba(35,164,255,.10), transparent 60%), #fff;
    box-shadow: var(--shadow-1);
}

.flow-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; flex-wrap: wrap; row-gap: 0.2rem; }
.flow-n {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: rgba(19,62,140,.10);
    border: 1px solid var(--d-line-2);
}
.flow-step.is-active .flow-n { background: var(--d-grad); border-color: transparent; }
.flow-step.is-done  .flow-n { background: var(--d-mint); border-color: transparent; color: #fff; }
.flow-label { font-weight: 700; font-size: 0.95rem; min-width: 0; }
.flow-state { margin-left: auto; min-width: 0; flex: 1 1 auto; text-align: right; font-size: 0.76rem; color: var(--d-dim); overflow-wrap: anywhere; }

.flow-body { display: none; padding: 0 1rem 1.1rem; }
.flow-step.is-active .flow-body { display: block; }

.warn {
    margin: 0.6rem 0 0;
    font-size: 0.77rem;
    color: #8d5a20;
    background: rgba(180, 116, 10, .09);
    border: 1px solid rgba(180, 116, 10, .26);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.7rem;
}
/* Balance and allowance sit side by side as a strip, not a default dl stack. */
.flow-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0.9rem 0 0;
    background: var(--d-line);
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.flow-facts > div { background: #fff; padding: 0.6rem 0.75rem; }
.flow-facts dt {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--d-dim);
}
.flow-facts dd {
    margin: 0.2rem 0 0; font-size: 1rem; font-weight: 800;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

.flow-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.9rem; }
.flow-alt { text-align: center; font-size: 0.84rem; color: var(--d-dim); margin: 0.5rem 0 0; }

/* ---------- login ---------- */

.login-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.2rem, 4vw, 2rem);
    border-radius: var(--r-xl);
    border: 1px solid var(--d-line-2);
    background: radial-gradient(130% 120% at 50% -10%, rgba(35,164,255,.14), transparent 62%), var(--d-bg-2);
    box-shadow: var(--shadow-2);
}
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--d-grad); }
.login-mark { width: 64px; height: 64px; margin: 0 auto 1.1rem; filter: drop-shadow(0 8px 22px rgba(17, 87, 232, .28)); }
.login-card h1 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.login-card .lede { margin: 0 auto 1.5rem; max-width: 34ch; color: var(--d-muted); font-size: 0.93rem; }

.wallet-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 1.5rem 0 0; padding: 0; }
.wallet-badges li {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--d-muted);
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: #fff;
}
.login-alt { margin-top: 1.3rem; font-size: 0.84rem; color: var(--d-dim); }

.gate { display: grid; place-items: center; min-height: 56vh; }

/* ---------- feedback ---------- */

.notice {
    padding: 0.8rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.86rem;
    border: 1px solid var(--d-line-2);
    background: #fff;
    color: var(--d-muted);
}
.notice-error { border-color: rgba(190, 40, 60, .32); background: rgba(200, 50, 70, .07); color: #8d2032; }
.notice-ok { border-color: rgba(10, 155, 118, .35); background: rgba(10, 155, 118, .08); color: #08624a; }

.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: grid; gap: 0.45rem; max-width: min(340px, calc(100vw - 2rem)); }
.toast {
    padding: 0.75rem 1rem;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--d-line-2);
    box-shadow: var(--shadow-2);
    font-size: 0.86rem;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.toast-ok { border-color: rgba(10, 155, 118, .45); }
.toast-error { border-color: rgba(190, 40, 60, .45); }
.toast.is-out { opacity: 0; transform: translateY(8px); }

.fineprint { font-size: 0.82rem; color: var(--d-dim); }
.fineprint summary { cursor: pointer; font-weight: 600; color: var(--d-muted); }
.fineprint p { margin-top: 0.5rem; }
code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 5px; background: rgba(19,62,140,.08); }

/* ---------- modals ---------- */

.wallet-modal, .nav-drawer {
    padding: 0;
    color: var(--d-text);
    background: #fff;
    border: 1px solid var(--d-line-2);
    box-shadow: var(--shadow-2);
}
.wallet-modal::backdrop, .nav-drawer::backdrop { background: rgba(10, 24, 52, .38); backdrop-filter: blur(4px); }

.wallet-modal { width: min(400px, calc(100vw - 2rem)); border-radius: var(--r-lg); }
.wallet-head, .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--d-line);
}
.wallet-head strong, .nav-drawer-head strong { font-size: 0.96rem; font-weight: 800; }
.wallet-close { font: inherit; font-size: 1.5rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--d-dim); padding: 0 0.25rem; }
.wallet-close:hover { color: var(--d-text); }

.wallet-list { display: grid; gap: 0.4rem; padding: 0.8rem; }
.wallet-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    font: inherit;
    text-align: left;
    color: var(--d-text);
    cursor: pointer;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), background 0.18s var(--ease);
}
.wallet-option:hover { border-color: var(--d-line-2); background: rgba(19,62,140,.04); transform: translateY(-1px); }
.wallet-option:disabled { opacity: 0.5; cursor: wait; transform: none; }
.wallet-option img { border-radius: 9px; flex: none; }
.wallet-letter {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 9px;
    background: var(--d-grad);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    flex: none;
}
.wallet-name { flex: 1; font-weight: 700; font-size: 0.92rem; }
.wallet-name em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 500; color: var(--d-dim); }
.wallet-go { color: var(--d-dim); }
.wallet-foot { padding: 0 1.1rem 1.1rem; margin: 0; }

/* Anchored under the header at the right, where the burger is — a
   full-height slab reads as a site drawer and covers the brand. */
/* Mobile menu: a sheet anchored under the header on the burger side, sized to
   its own content. */
.nav-drawer {
    /* Pinned explicitly rather than trusting the UA's dialog:modal box, which
       differs between engines. Fixed to the viewport so scrolling the page
       behind it cannot shift the sheet. */
    position: fixed;
    inset: 3.9rem 0.75rem auto auto;
    margin: 0;
    width: min(300px, calc(100vw - 1.5rem));
    height: fit-content;
    max-height: calc(100dvh - 5rem);
    overflow: hidden auto;
    border-radius: var(--r-xl);
    border: 1px solid var(--d-line);
    box-shadow: 0 24px 60px rgba(19, 62, 140, .26), 0 2px 6px rgba(19, 62, 140, .10);
    animation: sheet-in 0.2s var(--ease);
}
.nav-drawer.is-closing { animation: sheet-out 0.13s var(--ease) forwards; }
@keyframes sheet-in {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes sheet-out {
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

.drawer-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem 0.75rem;
    border-bottom: 1px solid var(--d-line);
}
.drawer-who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.drawer-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-dot {
    width: 8px; height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--d-mint);
    box-shadow: 0 0 0 3px rgba(10, 155, 118, .16);
}
.drawer-x {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--d-dim);
    background: rgba(19, 62, 140, .05);
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.drawer-x:hover { background: rgba(19, 62, 140, .1); color: var(--d-text); }

.drawer-rows { display: grid; gap: 0.12rem; padding: 0.5rem; }
.drawer-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    color: var(--d-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 0.6rem 0.65rem;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.drawer-ico {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    font-size: 0.8rem;
    border-radius: 9px;
    background: rgba(19, 62, 140, .05);
    color: var(--d-blue);
    transition: background 0.16s var(--ease);
}
.drawer-txt { flex: 1; min-width: 0; }
.drawer-arrow { color: var(--d-dim); font-size: 1.05rem; opacity: 0; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }

.drawer-row:hover { background: rgba(19, 62, 140, .05); color: var(--d-text); }
.drawer-row:hover .drawer-arrow { opacity: 1; transform: translateX(2px); }
.drawer-row.is-current {
    background: var(--d-grad-soft);
    border-color: var(--d-line);
    color: var(--d-text);
}
.drawer-row.is-current .drawer-ico { background: #fff; }

/* Page must not scroll behind an open sheet or modal. */
html { background: var(--d-bg); }
html.is-locked, html.is-locked body { overflow: hidden; }

/* Any explicit `display` beats the UA rule for [hidden]. */
[hidden] { display: none !important; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .duo { grid-template-columns: 1fr; }
    .timers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .app-nav { display: none; }
    .nav-burger { display: flex; }
    .app-header .btn { margin-left: auto; font-size: 0.82rem; padding: 0.52rem 0.95rem; }
    .app-header { gap: 0.55rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .hero-cta .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

.dash { display: grid; gap: clamp(0.7rem, 1.6vw, 1rem); }
.facts-1 { grid-template-columns: 1fr; }
.timer.is-ready strong { color: var(--d-mint); }

/* A nested hint inside a field label must not inherit the label's uppercase
   tracking, or "Sponsor first investment only" reads as one shouted phrase. */
.fld > span .muted {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.92em;
}

/* ==========================================================================
   Rail + metric grid (dashboard)
   ========================================================================== */

.app-shell { display: block; }

@media (min-width: 1000px) {
    /* body.app-body sets display:flex, so this needs equal specificity to win.
       The cap goes on the grid itself so the rail is bounded with the content
       rather than being pushed to the viewport edge beside a centred column. */
    body.app-shell {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
        width: min(1430px, 100%);
        margin-inline: auto;
    }
    body.app-shell .app-header { display: none; }
    body.app-shell .rail { display: flex; }
    body.app-shell .app-main { width: 100%; margin: 0; padding-left: 0; }
    body.app-shell .app-footer { grid-column: 1 / -1; }
}

.rail {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 1.2rem 0.9rem;
}

.rail-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.4rem;
    padding: 0 0.55rem;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--d-text);
}

.rail-label {
    margin: 0.9rem 0 0.4rem;
    padding: 0 0.55rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-dim);
}

.rail-nav { display: grid; gap: 0.1rem; }
.rail-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--d-muted);
    padding: 0.62rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.rail-nav a i { font-style: normal; width: 1.1em; text-align: center; opacity: 0.75; }
.rail-nav a:hover { background: rgba(19, 62, 140, .05); color: var(--d-text); }
.rail-nav a.is-current {
    background: var(--d-grad-soft);
    border-color: var(--d-line);
    color: var(--d-text);
    box-shadow: var(--shadow-1);
}

.rail-wallet {
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    padding: 0.75rem;
    box-shadow: var(--shadow-1);
}
.rail-wallet code {
    display: block;
    font-size: 0.68rem;
    line-height: 1.45;
    word-break: break-all;
    background: none;
    padding: 0;
    color: var(--d-text);
}
.rail-wallet > span { display: block; margin-top: 0.3rem; font-size: 0.7rem; color: var(--d-dim); }
.rail-wallet-actions { display: flex; gap: 0.35rem; margin-top: 0.6rem; }
.btn-xs { flex: 1; font-size: 0.72rem; padding: 0.4rem 0.5rem; border-radius: var(--r-sm); }

/* ---------- metric grid ---------- */

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.2vw, 0.8rem); }

.metric {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    padding: 0.85rem 0.95rem 0.9rem;
    box-shadow: var(--shadow-1);
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.metric:hover { border-color: var(--d-line-2); transform: translateY(-1px); }

.m-k {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--d-dim);
}
.m-i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex: none;
    font-style: normal;
    font-size: 0.68rem;
    border-radius: 7px;
    background: var(--d-grad-soft);
    color: var(--d-blue);
}
.m-v {
    display: block;
    margin: 0.5rem 0 0.1rem;
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--d-text);
}
.m-s { display: block; font-size: 0.7rem; color: var(--d-dim); }

/* The headline tile gets the brand treatment; the rest stay quiet. */
.metric.is-lead {
    background:
        radial-gradient(140% 160% at 100% 0%, rgba(35,164,255,.14), transparent 60%),
        radial-gradient(140% 160% at 0% 100%, rgba(91,52,214,.12), transparent 60%),
        #fff;
    border-color: var(--d-line-2);
}
.metric.is-lead .m-v {
    background: linear-gradient(102deg, #0f8fd0 0%, #1157e8 48%, #5b34d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Income tiles carry the same spine colours the streams used. */
.metric[data-spine]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--spine);
}
.metric[data-spine="rwp"]     { --spine: var(--d-cyan); }
.metric[data-spine="sponsor"] { --spine: var(--d-mint); }
.metric[data-spine="level"]   { --spine: var(--d-blue); }
.metric[data-spine="royalty"] { --spine: var(--d-violet); }

/* ---------- board panels ---------- */

.board {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    padding: clamp(0.95rem, 2vw, 1.3rem);
    box-shadow: var(--shadow-1);
}
.board-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.board-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-dim);
}
.board-head .dot { display: none; }
.rank-chip {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-blue);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--d-grad-soft);
    border: 1px solid var(--d-line);
}

.board-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1rem; }
.board-cells-2 { grid-template-columns: repeat(2, 1fr); }
.cell {
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    padding: 0.7rem 0.8rem;
}
.c-k { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-dim); }
.c-v { display: block; margin: 0.3rem 0 0.12rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.c-s { display: block; font-size: 0.68rem; color: var(--d-dim); }

.progress { margin-bottom: 1rem; }
.progress-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.72rem; color: var(--d-dim); margin-bottom: 0.4rem; }
.progress-note { margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--d-muted); }

@media (max-width: 1200px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .metrics { grid-template-columns: repeat(2, 1fr); } .board-cells { grid-template-columns: 1fr; } }
@media (max-width: 420px)  { .metrics { grid-template-columns: 1fr; } }

/* ==========================================================================
   Welcome + referral cards
   ========================================================================== */

.welcome {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr minmax(240px, 320px);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1.2rem, 3vw, 1.9rem);
    border-radius: var(--r-xl);
    border: 1px solid var(--d-line-2);
    background:
        radial-gradient(120% 150% at 0% 0%, rgba(35,164,255,.13), transparent 58%),
        radial-gradient(120% 150% at 100% 100%, rgba(91,52,214,.12), transparent 58%),
        #fff;
    box-shadow: var(--shadow-2);
}
.welcome::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--d-grad);
}

.welcome-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.5rem;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-dim);
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--d-mint);
    letter-spacing: 0.14em;
}
.live i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--d-mint);
    box-shadow: 0 0 0 3px rgba(10, 155, 118, .16);
    animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(10, 155, 118, .16); }
    50%      { box-shadow: 0 0 0 6px rgba(10, 155, 118, .05); }
}

.welcome h1 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
}
.welcome-sub { margin: 0 0 1rem; font-size: 0.9rem; color: var(--d-muted); max-width: 46ch; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--d-line);
    background: #fff;
    color: var(--d-text);
}
.chip i { font-style: normal; opacity: 0.55; }
.chip-alt { background: rgba(10, 155, 118, .07); border-color: rgba(10, 155, 118, .28); color: #08624a; }
.chip-alt i { color: var(--d-mint); opacity: 1; }

/* Price sits apart from the two identity chips beside it -- it is a market
   figure, not something about this account. */
.chip-price { background: rgba(35, 164, 255, .07); border-color: rgba(35, 164, 255, .28); color: #0b4c7d; }
.chip-price .ic { color: #23a4ff; opacity: 1; }
.chip-price span { font-variant-numeric: tabular-nums; }

/* Claim panel: the one action this whole screen exists to enable. */
.claim {
    text-align: right;
    padding: clamp(0.95rem, 2vw, 1.3rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--d-line);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.claim-k {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--d-dim);
}
.claim-v {
    display: block;
    margin: 0.4rem 0 0;
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(102deg, #0f8fd0 0%, #1157e8 48%, #5b34d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- referral card ---------- */

.refcard {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    padding: clamp(0.95rem, 2vw, 1.25rem);
    box-shadow: var(--shadow-1);
}
.refcard-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.75rem; }
.refcard-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--d-dim);
}
.dotlive {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--d-blue);
    box-shadow: 0 0 0 3px rgba(17, 87, 232, .14);
}
.refcard-count { margin-left: auto; font-size: 0.78rem; color: var(--d-dim); }
.refcard-count b { color: var(--d-text); font-weight: 800; font-variant-numeric: tabular-nums; }

.refrow { display: flex; gap: 0.45rem; }
.refrow input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.82rem;
    color: var(--d-text);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
}
.refrow input:focus { border-color: var(--d-cyan); outline: none; }
.refrow .btn { flex: none; }
.refcard-note { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--d-dim); max-width: 78ch; }

@media (max-width: 880px) {
    .welcome { grid-template-columns: 1fr; }
    .claim { text-align: left; }
    .refrow { flex-wrap: wrap; }
    .refrow input { flex: 1 1 100%; }
    .refrow .btn { flex: 1; }
}


/* ---------- icons ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ic {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* rail */
.rail-nav a .ic { width: 1.15em; height: 1.15em; opacity: 0.7; }
.rail-nav a.is-current .ic { opacity: 1; color: var(--d-blue); }

/* metric tiles: the badge holds the icon, so size it against the badge */
.m-i .ic { width: 13px; height: 13px; }

/* chips */
.chip .ic { width: 13px; height: 13px; opacity: 0.55; }
.chip-alt .ic { color: var(--d-mint); opacity: 1; }

/* drawer */
.drawer-ico .ic { width: 15px; height: 15px; }

/* ---------- compact board ---------- */

.board { padding: clamp(0.85rem, 1.7vw, 1.05rem); }
.board-head { margin-bottom: 0.7rem; }
.board-cells { gap: 0.5rem; margin-bottom: 0.75rem; }
.cell { padding: 0.6rem 0.7rem; }
.c-v { margin: 0.22rem 0 0.05rem; font-size: 1.05rem; }
.c-s { font-size: 0.7rem; line-height: 1.35; }

.progress-row { display: flex; align-items: center; gap: 1.1rem; }
.progress-row .progress { flex: 1; min-width: 0; margin: 0; }
.progress-row .btn { flex: none; }
.progress-note { margin: 0.4rem 0 0; font-size: 0.75rem; }

@media (max-width: 640px) {
    .progress-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .progress-row .btn { width: 100%; }
}

/* ---------- level ladder ---------- */

.levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.32rem;
}
.lvl {
    display: grid;
    place-items: center;
    gap: 0.05rem;
    padding: 0.4rem 0.2rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--d-line);
    background: #fff;
    line-height: 1.1;
}
.lvl-n { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lvl-p { font-size: 0.6rem; font-weight: 600; }

/* Active levels carry the brand; inactive ones recede rather than shout. */
.lvl.is-on {
    background: var(--d-grad-soft);
    border-color: var(--d-line-2);
    color: var(--d-text);
}
.lvl.is-on .lvl-p { color: var(--d-blue); }
.lvl.is-off {
    background: rgba(19, 62, 140, .03);
    border-style: dashed;
    color: var(--d-dim);
}
.lvl.is-off .lvl-p { color: var(--d-dim); }

@media (max-width: 520px) {
    .levels { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .lvl-n { font-size: 0.72rem; }
    .lvl-p { font-size: 0.55rem; }
}

/* ---------- quick amounts ---------- */

.quick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.1rem 0 0.6rem; }
.quick-b {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--d-muted);
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.quick-b:hover { border-color: var(--d-line-2); color: var(--d-text); transform: translateY(-1px); }

/* ---------- investment history ---------- */

.hist { display: grid; gap: 0.45rem; }
.hrow {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
}
.hcell { min-width: 0; }
.hcell-end { justify-self: end; }
.hk { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-dim); }
.hv { display: block; margin-top: 0.15rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hs { display: block; font-size: 0.68rem; color: var(--d-dim); font-variant-numeric: tabular-nums; }

.hbadge {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.hbadge.is-live { background: rgba(10, 155, 118, .1); color: #08624a; border: 1px solid rgba(10, 155, 118, .3); }
.hbadge.is-done { background: rgba(19, 62, 140, .06); color: var(--d-dim); border: 1px solid var(--d-line); }

@media (max-width: 720px) {
    .hrow { grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; }
    .hcell-end { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- withdraw gates ---------- */

.gates { display: grid; gap: 0.45rem; }
.gate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
}
.gk { display: block; font-size: 0.88rem; font-weight: 700; }
.gs { display: block; font-size: 0.72rem; color: var(--d-dim); }
.gbadge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.gbadge.is-ok   { background: rgba(10, 155, 118, .1); color: #08624a; border: 1px solid rgba(10, 155, 118, .3); }
.gbadge.is-wait { background: rgba(180, 116, 10, .1); color: #8d5a20; border: 1px solid rgba(180, 116, 10, .3); }

/* ---------- royalty tiers ---------- */

.tiers { display: grid; gap: 0.45rem; }
.tier {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
}
.tier-n {
    display: grid;
    place-items: center;
    height: 2.1rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(19, 62, 140, .06);
    color: var(--d-dim);
}
.tier-main { min-width: 0; }
.tier-v { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tier-v span { font-size: 0.7rem; font-weight: 700; color: var(--d-dim); margin-left: 0.1rem; }
.tier-s { display: block; font-size: 0.7rem; color: var(--d-dim); font-variant-numeric: tabular-nums; }
.tier-up { text-align: right; }
.tier-k { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-dim); }
.tier-uv { display: block; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tier-badge {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(19, 62, 140, .05);
    color: var(--d-dim);
    border: 1px solid var(--d-line);
}

.tier.is-now { border-color: rgba(91, 52, 214, .4); box-shadow: 0 0 0 3px rgba(91, 52, 214, .07); }
.tier.is-now .tier-n { background: var(--d-violet); color: #fff; }
.tier.is-now .tier-badge { background: rgba(91, 52, 214, .1); color: #43239c; border-color: rgba(91, 52, 214, .3); }
.tier.is-has .tier-n { background: rgba(10, 155, 118, .12); color: #08624a; }
.tier.is-has .tier-badge { background: rgba(10, 155, 118, .1); color: #08624a; border-color: rgba(10, 155, 118, .3); }
.tier.is-locked { opacity: 0.88; }
.tier.is-locked .tier-v { color: var(--d-muted); }

@media (max-width: 720px) {
    /* Every cell is placed explicitly. Giving only the badge a definite row
       made grid place it before the auto-positioned cells, so it claimed
       column 1 and pushed the rest across — and the rank rows, which have no
       .tier-up at all, scrambled completely. */
    .tier { grid-template-columns: 2.4rem 1fr auto; gap: 0.5rem 0.75rem; }
    .tier-n    { grid-column: 1; grid-row: 1; }
    .tier-main { grid-column: 2; grid-row: 1; }
    .tier-badge{ grid-column: 3; grid-row: 1; }
    .tier-up   { grid-column: 2 / -1; grid-row: 2; text-align: left; }
}

/* Two boards side by side on desktop. They stretch so the shorter one does not
   leave a ragged edge, and the taller one sets the row height. */
.pair { display: grid; gap: clamp(0.7rem, 1.6vw, 1rem); }
@media (min-width: 1000px) {
    .pair { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .pair > .board { display: flex; flex-direction: column; }
    /* Push the total and the action button to the bottom of each column. */
    .pair .streams-total, .pair .actions { margin-top: auto; }
    .pair .streams-total { padding-top: 1rem; }
}

/* Second bar in a stacked pair needs its own gap; .progress-head only carries
   bottom spacing. */
.progress-head-2 { margin-top: 0.7rem; }

/* ---------- not-registered redirect ---------- */

.redirect-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    width: min(380px, calc(100vw - 2rem));
    height: fit-content;
    color: var(--d-text);
    background: #fff;
    border: 1px solid var(--d-line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    animation: sheet-in 0.2s var(--ease);
}
.redirect-modal::backdrop { background: rgba(10, 24, 52, .38); backdrop-filter: blur(4px); }

.rd-body { padding: 1.6rem 1.4rem 1.3rem; text-align: center; }
.rd-ico {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.9rem;
    border-radius: 14px;
    color: var(--d-blue);
    background: rgba(19, 62, 140, .07);
}
.rd-ico .ic { width: 1.5rem; height: 1.5rem; }
.rd-body h2 { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.rd-body p { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--d-muted); }

.rd-meter {
    height: 6px;
    margin: 1.1rem 0 0.5rem;
    border-radius: 999px;
    background: rgba(19, 62, 140, .09);
    overflow: hidden;
}
/* Driven by CSS rather than a timer, so the bar cannot drift from the clock. */
.rd-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--d-cyan), var(--d-violet));
    animation: rd-run 10s linear forwards;
}
@keyframes rd-run { to { width: 100%; } }

.rd-count { margin-top: 0.15rem; font-size: 0.75rem; font-weight: 700;
            color: var(--d-dim); font-variant-numeric: tabular-nums; }

/* ---------- read-only view mode ---------- */

.viewbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem clamp(0.9rem, 3vw, 1.4rem);
    font-size: 0.78rem;
    color: #7a4a09;
    background: rgba(255, 214, 138, .92);
    border-bottom: 1px solid rgba(180, 116, 10, .35);
    backdrop-filter: blur(6px);
}
.viewbar-tag {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(180, 116, 10, .18);
}
.viewbar-who { flex: 1; min-width: 0; }
.viewbar-who code { font-weight: 700; }
.viewbar-exit { color: inherit; font-weight: 700; text-decoration: underline; }

/* body.app-shell is a two-column grid, so the banner has to be told to span
   both or it lands in the rail column and pushes the rail sideways. */
.viewbar { grid-column: 1 / -1; }

/* A disabled control should not look like it is merely waiting on input. */
/* Read-only: force the disabled look regardless of what the page's own render
   logic sets, so the control never appears live for a moment. */
.is-viewing :is([data-approve], [data-invest], [data-withdraw], [data-claim], [data-activate]) {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
}
.is-viewing .btn:disabled { cursor: not-allowed; }
/* Nothing to connect or disconnect in a read-only view. */
.is-viewing [data-disconnect],
.is-viewing [data-when="out"] { display: none !important; }

/* ---------- panel viewer ---------- */

.viewlinks { display: grid; gap: 0.4rem; margin-top: 0.9rem; }
.viewlink {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--d-text);
    border: 1px solid var(--d-line);
    border-radius: var(--r-md);
    background: #fff;
    transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.viewlink:hover { border-color: var(--d-line-2); transform: translateY(-1px); }
.viewlink .ic { width: 1.05rem; height: 1.05rem; color: var(--d-blue); }
.recent-row { grid-template-columns: 1fr auto; }
.board-head > .btn { flex: 0 0 auto; }

/* ---------- directs / downline ---------- */

/* A referral link never fits a metric tile at full size. */
.m-v-sm { font-size: 0.95rem; letter-spacing: -0.01em; }
.linkish {
    padding: 0;
    font: inherit;
    color: var(--d-blue);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}
.linkish:hover { color: var(--d-violet); }
.hrow code { font-size: 0.9rem; font-weight: 700; }

/* ---------- landing backdrop on the bare shell ----------

   The register and login screens share the marketing site's ground rather
   than the panel's flatter one. This is the landing page's own no-WebGL
   backdrop, lifted verbatim from kord.css: the same three washes, the same
   vignette and grain. Reproducing it in CSS rather than loading the three.js
   scene keeps a referral link cheap to open in a wallet browser, which is
   where most of them are opened. */

.app-bare {
    --stage-bg: #eaf1fc;
    background: var(--stage-bg);
}

.app-bare::before {
    background:
        radial-gradient(900px 620px at 72% 12%, rgba(17, 87, 232, 0.30), transparent 65%),
        radial-gradient(760px 560px at 18% 72%, rgba(106, 63, 223, 0.26), transparent 66%),
        radial-gradient(520px 420px at 50% 40%, rgba(17, 87, 232, 0.14), transparent 70%),
        var(--stage-bg);
}

/* Vignette and grain, as one fixed overlay above the wash and below the copy. */
.app-bare::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 88% 72% at 50% 46%, transparent 46%, rgba(150, 175, 215, 0.34) 100%);
}

#scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
/* app.js sets this when WebGL is unavailable or the context is lost. */
html.no-webgl #scene { display: none; }

.stage-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The panel screens sit over the same scene, but they are dense with figures
   where the login card is a single form -- the wash has to come back further
   or every number is read against moving geometry.

   ::after rather than ::before: at equal z-index the pseudo paints after the
   canvas, which puts the scrim above the scene and still below the content,
   since .app-body > * lifts every real child to z-index 1. */
body.app-body:not(.app-bare)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(234, 241, 252, 0.46);
}

/* A scrim behind the card, so the copy holds contrast over the wash the way
   the landing hero does. .app-main makes its own stacking context, so a
   z-index:-1 pseudo lands above the canvas but below the form. */
.app-bare .app-main { position: relative; z-index: 1; }
.app-bare .app-main::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 52% at 50% 48%,
        rgba(234, 241, 252, 0.86) 0%,
        rgba(234, 241, 252, 0.70) 44%,
        rgba(234, 241, 252, 0.30) 72%,
        transparent 92%);
}

/* The scene is scenery here, not the subject — the marketing hero can afford
   it at full strength because nothing has to be read through it. */
.app-bare #scene { opacity: 0.75; }