/* =====================================================================
   Design system
   ---------------------------------------------------------------------
   Palette follows the brief: dark navy base, charcoal surfaces, white
   text, emerald for value-in / positive, blue for information, a
   restrained violet reserved for progression (levels, XP) only.

   Two deliberate craft choices carry the identity:
     1. Every monetary value is set in tabular numerals so columns of
        money align exactly — the thing generic dashboards get wrong.
     2. The "allocation bar": a three-segment bar showing available /
        allocated / pending in true proportion. It encodes the actual
        ledger bucket structure rather than decorating it, and is reused
        as the package progress bar and the admin liability bar.
   ===================================================================== */

/* ---------- Tokens --------------------------------------------------- */
:root {
    /* Surfaces */
    --ink:        #0A0F1C;
    --ink-2:      #0E1524;
    --surface:    #121A2B;
    --surface-2:  #1A2436;
    --surface-3:  #223049;
    --line:       #223049;
    --line-soft:  #1A2436;

    /* Text */
    --text:       #E8EDF7;
    --text-2:     #AFBBD0;
    --muted:      #7C8AA3;
    --muted-2:    #5C6980;

    /* Accents */
    --accent:     #10B981;
    --accent-dim: #0D8F66;
    --accent-bg:  rgba(16, 185, 129, 0.12);
    --blue:       #3B82F6;
    --blue-bg:    rgba(59, 130, 246, 0.12);
    --violet:     #8B5CF6;
    --violet-bg:  rgba(139, 92, 246, 0.12);
    --danger:     #F45B69;
    --danger-bg:  rgba(244, 91, 105, 0.12);
    --warn:       #F5A524;
    --warn-bg:    rgba(245, 165, 36, 0.12);

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    /* Spacing + shape */
    --gutter: 16px;
    --radius:    14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Chrome */
    --header-h: 56px;
    --bottomnav-h: 62px;
    --sidebar-w: 264px;
    --content-max: 1240px;

    /* Elevation — low-contrast, no heavy drop shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.32);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.44);

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* Light theme. Roles stay identical; only the values swap. */
[data-theme="light"] {
    --ink:        #F5F7FB;
    --ink-2:      #FFFFFF;
    --surface:    #FFFFFF;
    --surface-2:  #F1F4F9;
    --surface-3:  #E4E9F2;
    --line:       #DFE5EF;
    --line-soft:  #EBEFF6;

    --text:       #101828;
    --text-2:     #3C4A61;
    --muted:      #667085;
    --muted-2:    #98A2B3;

    --accent-dim: #047857;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.08);
    --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.14);
}

/* ---------- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Never let a horizontal scrollbar appear at any breakpoint. */
    max-width: 100vw;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
h3 { font-size: 1.1rem;  letter-spacing: -0.015em; }
h4 { font-size: .95rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .875em; }

::selection { background: var(--accent); color: #04140E; }

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Money and any figure that appears in a column: tabular numerals so
   digits line up exactly down the page. */
.num, .amount, td.num, .stat-value, .balance-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.mono-ref {
    font-family: var(--font-mono);
    font-size: .8125rem;
    letter-spacing: -0.02em;
    color: var(--text-2);
}

/* ---------- Layout primitives ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-narrow { max-width: 760px; }

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 28px; }

.row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.row-between { justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.spacer { flex: 1; }
.hide { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }

.muted   { color: var(--muted); }
.small   { font-size: .8125rem; }
.tiny    { font-size: .75rem; }
.strong  { font-weight: 600; }
.up      { color: var(--accent); }
.down    { color: var(--danger); }
.warn    { color: var(--warn); }
.h4      { font-size: 1.05rem; font-weight: 600; color: var(--text); }

/* ---------- Cards ----------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.card-tight { padding: 14px; }
.card-flush { padding: 0; overflow: hidden; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.card-head h2, .card-head h3 { margin: 0; }

.card-title {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.card-link { font-size: .8125rem; font-weight: 500; }

.section { margin-bottom: 22px; }
.section:last-child { margin-bottom: 0; }

/* ---------- SIGNATURE: the balance card ------------------------------ */
/* One elevated card, a single emerald light source anchored top-right,
   the total in large tabular numerals, and the allocation bar beneath
   showing the true proportion of each ledger bucket. */
.balance-card {
    position: relative;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(16, 185, 129, 0.16) 0%, transparent 58%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    overflow: hidden;
}

.balance-card::after {
    /* A single hairline of light along the top edge — the only ornament. */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.5), transparent);
}

.balance-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
}

.balance-value {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
}

.balance-sub {
    font-size: .8125rem;
    color: var(--muted);
    margin-top: 4px;
}

/* The allocation bar. Segment widths are set inline from real figures. */
.alloc {
    margin-top: 18px;
}

.alloc-bar {
    display: flex;
    height: 8px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface-3);
}

.alloc-seg { height: 100%; transition: width .5s var(--ease); }
.alloc-seg.is-available { background: var(--accent); }
.alloc-seg.is-allocated { background: var(--blue); }
.alloc-seg.is-pending   { background: var(--warn); }
.alloc-seg.is-empty     { background: var(--surface-3); }

.alloc-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.alloc-item { min-width: 0; }

.alloc-key {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.alloc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.alloc-dot.is-available { background: var(--accent); }
.alloc-dot.is-allocated { background: var(--blue); }
.alloc-dot.is-pending   { background: var(--warn); }

.alloc-amount {
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Reused: package progress and admin liability share the same bar. */
.progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transition: width .5s var(--ease);
}
.progress-fill.is-blue   { background: var(--blue); }
.progress-fill.is-violet { background: var(--violet); }
.progress-fill.is-warn   { background: var(--warn); }

/* ---------- Stat tiles ------------------------------------------------ */
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    min-width: 0;
}

.stat-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.stat-meta { font-size: .75rem; color: var(--muted); margin-top: 4px; }

.stat-accent .stat-value { color: var(--accent); }
.stat-blue   .stat-value { color: var(--blue); }
.stat-warn   .stat-value { color: var(--warn); }
.stat-danger .stat-value { color: var(--danger); }

/* ---------- Buttons --------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;               /* touch target floor */
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent);
    color: #04140E;
}
.btn-primary:hover { background: #14CC90; }

.btn-blue { background: var(--blue); color: #04101F; }
.btn-blue:hover { background: #5B99F8; }

.btn-outline {
    background: transparent;
    border-color: var(--line);
    color: var(--text);
}
.btn-outline:hover { background: var(--surface-2); border-color: var(--surface-3); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger); color: #1B0508; }
.btn-danger:hover { background: #F87584; }

.btn-danger-outline { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-bg); }

.btn-sm { min-height: 36px; padding: 0 12px; font-size: .8125rem; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

.btn-icon {
    min-height: 40px;
    width: 40px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: .6; }

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Quick-action grid on the dashboard */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.quick-action:hover { background: var(--surface-2); border-color: var(--surface-3); text-decoration: none; }
.quick-action .icon { color: var(--accent); }

/* ---------- Forms ------------------------------------------------------ */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}

.label .req { color: var(--danger); }

.input, .select, .textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 16px;   /* 16px prevents the iOS zoom-on-focus jump */
    transition: border-color .15s var(--ease), background .15s var(--ease);
    appearance: none;
}

.input::placeholder, .textarea::placeholder { color: var(--muted-2); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
}

.input:disabled, .select:disabled, .textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237C8AA3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }

/* A control split across two boxes — a dialling code beside a number — is
   one answer, so it is marked as one. Marking only the number box left the
   code beside it looking fine and the outline looking half-drawn. */
.input-group.is-invalid > .input,
.input-group.is-invalid > .select { border-color: var(--danger); }

.field-error {
    display: block;
    font-size: .75rem;
    color: var(--danger);
    margin-top: 5px;
}

.field-hint {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    margin-top: 5px;
}

.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .select { flex: none; width: auto; min-width: 108px; }

.input-affix { position: relative; }
.input-affix .input { padding-left: 34px; }
.input-affix .affix {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-weight: 600;
    pointer-events: none;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.5;
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
    margin: 1px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.switch:last-child { border-bottom: 0; }
.switch-text { min-width: 0; }
.switch-title { font-size: .9375rem; font-weight: 600; }
.switch-desc { font-size: .8125rem; color: var(--muted); margin-top: 2px; }

.toggle { position: relative; flex: none; width: 46px; height: 27px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    transition: background .2s var(--ease);
    pointer-events: none;
}
.toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s var(--ease);
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(19px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--blue); outline-offset: 2px; }

/* OTP entry: mono, wide tracking, one obvious target */
.otp-input {
    width: 100%;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .5em;
    text-indent: .5em;    /* re-centres text that letter-spacing pushes left */
    padding: 14px 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.otp-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Status pills ---------------------------------------------- */
/* Dot + label rather than a solid fill: a table of 25 rows stays calm. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    flex: none;
}

.pill.ok      { color: var(--accent); border-color: rgba(16, 185, 129, 0.28);  background: var(--accent-bg); }
.pill.ok::before      { background: var(--accent); }
.pill.warn    { color: var(--warn);   border-color: rgba(245, 165, 36, 0.28);  background: var(--warn-bg); }
.pill.warn::before    { background: var(--warn); }
.pill.bad     { color: var(--danger); border-color: rgba(244, 91, 105, 0.28);  background: var(--danger-bg); }
.pill.bad::before     { background: var(--danger); }
.pill.info    { color: var(--blue);   border-color: rgba(59, 130, 246, 0.28);  background: var(--blue-bg); }
.pill.info::before    { background: var(--blue); }
.pill.neutral { color: var(--text-2); }

.pill-plain::before { display: none; }
.pill-plain { padding: 3px 10px; }

/* ---------- Alerts / flash -------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .875rem;
    line-height: 1.55;
}
.alert-icon { flex: none; margin-top: 1px; }
.alert-body { min-width: 0; }
.alert strong { display: block; margin-bottom: 2px; }

.alert.success { background: var(--accent-bg); border-color: rgba(16, 185, 129, 0.3); color: var(--text); }
.alert.success .alert-icon { color: var(--accent); }
.alert.error   { background: var(--danger-bg); border-color: rgba(244, 91, 105, 0.3); }
.alert.error .alert-icon { color: var(--danger); }
.alert.warning { background: var(--warn-bg); border-color: rgba(245, 165, 36, 0.3); }
.alert.warning .alert-icon { color: var(--warn); }
.alert.info    { background: var(--blue-bg); border-color: rgba(59, 130, 246, 0.3); }
.alert.info .alert-icon { color: var(--blue); }

.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert li + li { margin-top: 3px; }

/* Toast stack — flash messages that arrive after an action */
.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 14px);
    transform: translateX(-50%);
    z-index: 1200;
    width: min(520px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toasts .alert {
    pointer-events: auto;
    box-shadow: var(--shadow-3);
    background: var(--surface);
    animation: toast-in .3s var(--ease);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.toast-close {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0 0 8px;
    font-size: 18px;
    line-height: 1;
}

/* ---------- Long-form copy ---------------------------------------------
   Operator-authored content (pages, terms, package descriptions) is
   sanitised server-side and rendered inside .prose, which is the only
   place raw markup is allowed to set its own rhythm.
   ---------------------------------------------------------------------- */
.prose { color: var(--text-2); line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 1.6em 0 .6em;
    line-height: 1.3;
}
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.0625rem; }
.prose h4 { font-size: .9375rem; }

.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.35em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--muted); }

.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.prose strong { color: var(--text); font-weight: 600; }

.prose blockquote {
    margin: 1.2em 0;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--accent);
    color: var(--text);
}

.prose code {
    font-family: var(--font-mono);
    font-size: .875em;
    background: var(--surface-2);
    border-radius: 4px;
    padding: 1px 5px;
}

.prose pre {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    overflow-x: auto;
    margin: 0 0 1em;
}
.prose pre code { background: none; padding: 0; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }

.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .875rem; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--text); font-weight: 600; }

.prose.small { font-size: .875rem; line-height: 1.7; }

/* ---------- Tables ------------------------------------------------------ */
.table-wrap {
    /* Wide tables scroll inside their own container — the page body never
       scrolls sideways. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 640px;
}

.table th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    text-align: left;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 11px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    background: var(--surface);
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }

.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { color: var(--text); font-weight: 500; }
.table a:hover { color: var(--blue); }

.table-sort { color: var(--muted); text-decoration: none; }
.table-sort:hover { color: var(--text); text-decoration: none; }

/* Mobile alternative to a table: stacked rows */
.list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
}
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--surface-2); text-decoration: none; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 600; font-size: .9375rem; }
.list-sub { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.list-end { text-align: right; flex: none; }
.list-amount { font-weight: 600; font-variant-numeric: tabular-nums; }

.list-icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
}
.list-icon.is-in  { background: var(--accent-bg); color: var(--accent); }
.list-icon.is-out { background: var(--danger-bg); color: var(--danger); }

/* ---------- Empty states ------------------------------------------------ */
.empty {
    text-align: center;
    padding: 44px 20px;
}
.empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
}
.empty-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.empty-text { font-size: .875rem; color: var(--muted); max-width: 34ch; margin: 0 auto 18px; }

/* ---------- App chrome: header ------------------------------------------ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: calc(var(--header-h) + var(--safe-top));
    padding-top: var(--safe-top);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
    background: rgba(10, 15, 28, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.86); }

.header-btn {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.header-btn:hover { background: var(--surface-2); }

.header-title {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.header-brand:hover { text-decoration: none; }
.header-brand img { height: 26px; width: auto; }

.badge-count {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink);
    font-variant-numeric: tabular-nums;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #04140E;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    flex: none;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }

/* ---------- App chrome: drawer -------------------------------------------- */
.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(4, 8, 16, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s var(--ease);
    backdrop-filter: blur(2px);
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: min(300px, 86vw);
    background: var(--ink-2);
    border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }

.drawer-head {
    padding: calc(16px + var(--safe-top)) 18px 16px;
    border-bottom: 1px solid var(--line);
}

.drawer-user { display: flex; align-items: center; gap: 12px; }
.drawer-name { font-weight: 600; font-size: .9375rem; }
.drawer-mail { font-size: .75rem; color: var(--muted); }

.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px calc(20px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
}

.drawer-group { margin-bottom: 4px; }

.drawer-group-title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 14px 12px 6px;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
}
.drawer-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.drawer-link.is-active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.drawer-link .icon { flex: none; }
.drawer-link .count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.drawer-sub { padding-left: 10px; margin-left: 22px; border-left: 1px solid var(--line); }
.drawer-sub .drawer-link { min-height: 38px; font-size: .875rem; }

/* ---------- App chrome: bottom navigation ----------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    height: calc(var(--bottomnav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(10, 15, 28, 0.94);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line);
}
[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, 0.94); }

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    color: var(--muted);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:hover { text-decoration: none; color: var(--text-2); }
.bottom-nav-item.is-active { color: var(--accent); }
.bottom-nav-item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--accent);
}
.bottom-nav-item .icon { width: 22px; height: 22px; }

/* ---------- App shell ---------------------------------------------------------- */
.app-main {
    padding: 18px var(--gutter) calc(var(--bottomnav-h) + var(--safe-bottom) + 28px);
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
}

.page-head { margin-bottom: 18px; }
.page-title { font-size: 1.5rem; letter-spacing: -0.03em; margin: 0 0 4px; }
.page-sub { color: var(--muted); font-size: .875rem; margin: 0; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--muted);
    margin-bottom: 12px;
}
.back-link:hover { color: var(--text); text-decoration: none; }

/* ---------- Bottom sheet (mobile modal) ---------------------------------------- */
.sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(4, 8, 16, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    max-height: 88vh;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform .3s var(--ease);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-3);
}
.sheet.is-open { transform: none; }

.sheet-grip {
    width: 38px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    margin: 10px auto 4px;
    flex: none;
}

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px 14px;
    border-bottom: 1px solid var(--line);
}
.sheet-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.sheet-body {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + var(--safe-bottom));
}

.sheet-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
}
.sheet-close:hover { background: var(--surface-3); color: var(--text); }

/* ---------- Summary rows (fee breakdowns, detail pages) ------------------------- */
.summary { border-radius: var(--radius-sm); overflow: hidden; }
.summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .875rem;
}
.summary-row:last-child { border-bottom: 0; }
.summary-key { color: var(--muted); flex: none; }
.summary-val { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.summary-row.is-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.summary-row.is-total .summary-key { color: var(--text); font-weight: 600; }
.summary-row.is-total .summary-val { font-size: 1.125rem; }

/* ---------- Copy field (addresses, referral links) ------------------------------ */
.copy-field {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.copy-value {
    flex: 1;
    min-width: 0;
    padding: 12px 13px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    line-height: 1.45;
    word-break: break-all;
    color: var(--text);
    background: transparent;
    border: 0;
}
.copy-btn {
    flex: none;
    padding: 0 15px;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--surface-3);
    color: var(--text);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.copy-btn:hover { background: var(--accent); color: #04140E; }
.copy-btn.is-copied { background: var(--accent); color: #04140E; }

.qr-box {
    background: #fff;
    padding: 10px;
    border-radius: var(--radius-sm);
    width: fit-content;
    margin: 0 auto;
}
.qr-box img { width: 176px; height: 176px; }

/* ---------- Tabs ------------------------------------------------------------------ */
.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    padding: 11px 14px;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
    /* Reset the user-agent chrome so a <button> tab looks like an <a> tab. */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.tab:disabled, .tab.is-muted { color: var(--muted-2); }
.tab:hover { color: var(--text); text-decoration: none; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }

.chip {
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.chip:hover { text-decoration: none; background: var(--surface-3); color: var(--text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #04140E; }

/* ---------- Pagination -------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pager-info { font-size: .8125rem; color: var(--muted); }
.pager-links { display: flex; gap: 6px; }
.pager-link {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2);
    font-size: .8125rem;
    font-weight: 600;
}
.pager-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pager-link.is-active { background: var(--accent); border-color: var(--accent); color: #04140E; }
.pager-link.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Charts ------------------------------------------------------------------- */
/* Charts are inline SVG rendered on the server — no canvas, no library.
   They scale with their container via viewBox rather than a JS resize
   handler, so they are correct before any script has run. */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { display: block; width: 100%; height: 100%; }

.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-donut { display: block; width: 100%; height: auto; }
.chart-donut-value {
    fill: var(--text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}
.chart-donut-label {
    fill: var(--muted);
    font-size: 8px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Shown instead of an invented flat line when there is nothing to plot. */
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--muted);
    font-size: .8125rem;
    text-align: center;
    padding: 12px;
}

.chart-bars { display: flex; flex-direction: column; gap: 10px; }
.chart-bar-row { display: flex; align-items: center; gap: 10px; }
.chart-bar-label {
    flex: 0 0 92px;
    font-size: .75rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-bar-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    min-width: 40px;
}
.chart-bar-fill { display: block; height: 100%; border-radius: 999px; }
.chart-bar-value {
    flex: 0 0 auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* A wider amount field, for the calculator's single main input. */
.input-lg { font-size: 1.25rem; padding: 12px 14px; font-variant-numeric: tabular-nums; }

/* ---------- Calculator breakdown --------------------------------------------------------- */
/* Two across on a phone, three once there is room. Six figures in one
   row on a narrow screen would shrink each to the point of uselessness. */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
@media (min-width: 560px) {
    .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.calc-cell {
    background: var(--surface-2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.calc-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}
.calc-value {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.calc-value.is-reward { color: var(--accent); }

/* ---------- Investment plan cards -------------------------------------------------------- */
/* Mobile first: one column, stacked. The grid only splits once there is
   room for two cards to sit side by side without the tiles wrapping. */
.plan-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
    .plan-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.plan-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.plan-card.is-featured { border-color: var(--accent); }
.plan-card.is-featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent-bg), transparent 45%);
    pointer-events: none;
}
.plan-card > * { position: relative; }

.plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.plan-name {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    min-width: 0;
}
.plan-tag {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan-tag.is-featured {
    border-color: transparent;
    background: var(--accent);
    color: #04140E;
}

.plan-blurb { margin: 0; font-size: .8125rem; color: var(--text-2); }

/* Two tiles side by side even on the narrowest phone: they are short
   enough to fit, and stacking them makes the card twice as tall. */
.plan-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-tile {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.plan-tile-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}
.plan-tile-label .icon { flex: none; }
.plan-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.plan-tile-value sup { font-size: .6em; color: var(--muted); }
.plan-tile-sub { font-size: .6875rem; color: var(--muted); }

.plan-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 12px;
}
.plan-range-value { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-range-label {
    flex: none;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.plan-blocker {
    margin: 0;
    font-size: .75rem;
    color: var(--warn);
}

/* ---------- Package cards (older screens) ------------------------------------------------ */
.package-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.package-card.is-featured { border-color: var(--accent); }
.package-card.is-featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1), transparent 40%);
    pointer-events: none;
}

.package-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #04140E;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.package-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.package-price { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.package-price small { font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; }
.feature-list .icon { flex: none; margin-top: 2px; color: var(--accent); }
.feature-list li.is-excluded { color: var(--muted-2); }
.feature-list li.is-excluded .icon { color: var(--muted-2); }

/* ---------- Task cards ---------------------------------------------------------------------- */
.task-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}
.task-card.is-locked { opacity: .62; }
.task-reward {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.task-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; color: var(--muted); }

/* ---------- Timeline (status history) --------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
}
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -23px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 2px solid var(--ink);
}
.timeline-item.is-done::before   { background: var(--accent); }
.timeline-item.is-active::before { background: var(--warn); }
.timeline-item.is-bad::before    { background: var(--danger); }
.timeline-title { font-weight: 600; font-size: .875rem; }
.timeline-time { font-size: .75rem; color: var(--muted); }

/* ---------- Skeleton loading -------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
    color: transparent;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Pull to refresh --------------------------------------------------------------------- */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1200;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: -44px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, .18));
    opacity: 0;
    transform: translate(-50%, 0);
    transition: opacity .15s var(--ease);
    pointer-events: none;
}
.ptr-indicator.is-visible { opacity: 1; }

.ptr-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--muted);
    transition: border-top-color .15s var(--ease);
}
.ptr-indicator.is-armed .ptr-spinner { border-top-color: var(--accent); }
.ptr-indicator.is-loading .ptr-spinner { animation: ptr-spin .7s linear infinite; }

@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---------- Install banner ---------------------------------------------------------------------- */
.install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-h, 62px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.install-banner.is-in { opacity: 1; transform: none; }

.install-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.install-title { font-size: .875rem; }
.install-text { font-size: .75rem; color: var(--muted); }

.install-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.install-close:hover { background: var(--surface-3); color: var(--text); }

@media (min-width: 1024px) {
    .install-banner { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
}

/* ---------- Amount presets ----------------------------------------------------------------------- */
.amount-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.amount-preset {
    min-height: 38px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.amount-preset:hover { background: var(--surface-3); color: var(--text); }
.amount-preset.is-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Public site ---------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(10, 15, 28, 0.85);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.88); }

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
}

.site-nav { display: none; gap: 22px; margin-left: 24px; }
.site-nav a { color: var(--text-2); font-size: .875rem; font-weight: 500; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.is-active { color: var(--accent); }

.hero {
    position: relative;
    padding: 52px 0 44px;
    overflow: hidden;
}
.hero::before {
    /* One light source, top-right, matching the balance card. */
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, transparent 62%);
    pointer-events: none;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}

.hero-title {
    font-size: clamp(2rem, 8vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 700;
    margin: 0 0 16px;
    max-width: 18ch;
}

.hero-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-2);
    max-width: 56ch;
    margin: 0 0 28px;
}

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

.section-pad { padding: 44px 0; }
.section-head { margin-bottom: 26px; }
.section-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.section-title { font-size: clamp(1.5rem, 5vw, 2.125rem); letter-spacing: -0.03em; margin: 0 0 10px; }
.section-text { color: var(--text-2); max-width: 62ch; margin: 0; }

.step {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 0; }
.step-num {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 8px;
    overflow: hidden;
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    background: none;
    border: 0;
    color: var(--text);
    font-size: .9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq-q .chev { transition: transform .2s var(--ease); flex: none; color: var(--muted); }
.faq-item.is-open .chev { transform: rotate(180deg); }
.faq-a { padding: 0 16px 16px; font-size: .875rem; color: var(--text-2); display: none; }
.faq-item.is-open .faq-a { display: block; }

.site-footer {
    border-top: 1px solid var(--line);
    padding: 36px 0 calc(28px + var(--safe-bottom));
    margin-top: 40px;
    background: var(--ink-2);
}
.footer-grid { display: grid; gap: 26px; }
.footer-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { color: var(--text-2); font-size: .875rem; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    color: var(--muted);
}

.risk-note {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(245, 165, 36, 0.28);
    background: var(--warn-bg);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--text-2);
}
.risk-note strong { color: var(--warn); }

/* ---------- Auth pages ------------------------------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: calc(24px + var(--safe-top)) var(--gutter) calc(24px + var(--safe-bottom));
}
.auth-inner { width: 100%; max-width: 424px; margin: auto; }
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand a { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.auth-title { font-size: 1.375rem; letter-spacing: -0.03em; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: .875rem; margin: 0 0 22px; }
.auth-foot { text-align: center; margin-top: 20px; font-size: .875rem; color: var(--muted); }

/* ---------- Utilities -------------------------------------------------------------------------------- */
.divider-text {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: .75rem;
    margin: 20px 0;
}
.divider-text::before, .divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.icon { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }

.countdown { font-variant-numeric: tabular-nums; font-weight: 600; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   Responsive — mobile-first, so these are progressive enhancements
   ===================================================================== */

@media (min-width: 480px) {
    .alloc-legend { gap: 12px; }
}

@media (min-width: 768px) {
    :root { --gutter: 24px; }

    body { font-size: 15.5px; }

    .balance-value { font-size: 2.75rem; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .site-nav { display: flex; }

    .hero { padding: 76px 0 60px; }
    .section-pad { padding: 64px 0; }

    .quick-actions { gap: 12px; }
}

/* Desktop: permanent sidebar replaces the drawer + bottom navigation. */
@media (min-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
        min-height: 100vh;
    }

    .drawer {
        position: sticky;
        top: 0;
        transform: none;
        height: 100vh;
        width: auto;
        border-right: 1px solid var(--line);
        z-index: 10;
    }

    .drawer-scrim { display: none; }

    .bottom-nav { display: none; }

    .app-main {
        padding: 26px 32px 60px;
        max-width: none;
    }

    .app-header {
        position: sticky;
        padding-left: 32px;
        padding-right: 32px;
    }

    .menu-toggle { display: none; }

    .app-content { min-width: 0; }

    .grid-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* On desktop a sheet becomes a centred dialog. */
    .sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(560px, calc(100vw - 48px));
        max-height: 84vh;
        border-radius: var(--radius-lg);
        border: 1px solid var(--line);
        transform: translate(-50%, -46%) scale(.97);
        opacity: 0;
        transition: transform .25s var(--ease), opacity .25s var(--ease);
    }
    .sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
    .sheet-grip { display: none; }
    .sheet-head { padding-top: 18px; }

    .toasts { bottom: 24px; left: auto; right: 24px; transform: none; }
}

@media (min-width: 1280px) {
    .app-main { padding: 30px 40px 64px; }
}

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

/* ---------- Print ---------------------------------------------------------------------------- */
@media print {
    .app-header, .bottom-nav, .drawer, .toasts, .btn, .site-header, .site-footer { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .balance-card { border: 1px solid #ccc; background: #fff; }
}

/* --- Impersonation bar -------------------------------------------------
   An administrator viewing a member's account. Deliberately jarring: it
   must never blend into the interface it sits on top of. */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--warning, #B45309);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}
.impersonation-bar .btn {
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

/* ---------- Language switcher ------------------------------------------ */
.lang-switch { padding: 0 8px 4px; }
.lang-options { display: flex; gap: 6px; padding: 0 4px 4px; }
.lang-option {
    flex: 1;
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .875rem;
    text-decoration: none;
}
.lang-option:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.lang-option.is-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Right-to-left ---------------------------------------------- */
/*
 * Only the handful of rules that are genuinely directional are flipped.
 * Everything laid out with flex or grid mirrors itself once `dir="rtl"`
 * is on <html>, so restating those would be noise that later drifts out
 * of sync with the rule it was copied from.
 */
[dir="rtl"] ul,
[dir="rtl"] ol,
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol,
[dir="rtl"] .alert ul { padding-left: 0; padding-right: 1.25em; }

[dir="rtl"] .drawer {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--line);
    transform: translateX(100%);
}
[dir="rtl"] .drawer.is-open { transform: translateX(0); }

[dir="rtl"] .drawer-link { text-align: right; }
[dir="rtl"] .drawer-link .count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .drawer-user .header-btn { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .drawer-sub {
    padding-left: 0;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 22px;
    border-left: 0;
    border-right: 1px solid var(--line);
}

[dir="rtl"] .input-affix .input { padding-left: 12px; padding-right: 34px; }
[dir="rtl"] .input-affix .affix { left: auto; right: 13px; }

[dir="rtl"] .timeline { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .timeline::before { left: auto; right: 7px; }
[dir="rtl"] .timeline-item::before { left: auto; right: -23px; }

[dir="rtl"] .site-nav { margin-left: 0; margin-right: 24px; }

[dir="rtl"] blockquote,
[dir="rtl"] .prose blockquote {
    border-left: 0;
    border-right: 2px solid var(--accent);
}

/*
 * Figures stay left-to-right whatever the page does. A balance printed
 * right-to-left is not a translation, it is a wrong number.
 */
[dir="rtl"] .num,
[dir="rtl"] .mono-ref,
[dir="rtl"] .stat-value,
[dir="rtl"] .copy-value,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    unicode-bidi: plaintext;
}

@media (min-width: 1024px) {
    [dir="rtl"] .drawer { transform: none; }
}

/* ---------- Social sign-in --------------------------------------------- */
.btn-social { gap: 10px; }
/* The brand mark keeps its own colours, so it must not inherit currentColor. */
.btn-social svg { flex: none; }
.btn-social svg path { fill: #1877F2; }

/* --- Country filter (sign-up) -------------------------------------------
   Sits directly above the country select; only shown when scripting is
   available, so it never appears as a box that does nothing. */
.country-filter {
    margin-bottom: 8px;
}
.country-filter[hidden] {
    display: none;
}

/* --- Theme-aware logo ----------------------------------------------------
   Both marks are in the markup; only the one matching the active theme is
   shown. The swap is instant and needs no script. */
.brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-dark  { display: none; }
[data-theme="light"] .brand-logo-light { display: block; }

/* --- Theme switch (drawer) -----------------------------------------------
   A row that states the current mode and carries a real switch, rather
   than a button that only says "switch theme" and never shows state. */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.theme-switch-icon { flex: none; display: inline-flex; }
.theme-switch-text { flex: 1; }
.theme-switch .toggle { flex: none; }

/* --- Pending block on the balance card -----------------------------------
   The pending figure becomes a link into the filtered history when there
   is actually something in flight, and says how many items it covers. */
.alloc-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: background .15s var(--ease);
}
.alloc-item-link:hover,
.alloc-item-link:focus-visible {
    background: var(--surface-2);
}
.alloc-note { margin-top: 2px; }

.pending-split {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .8125rem;
    text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.pending-chip:hover,
.pending-chip:focus-visible {
    border-color: var(--accent);
    color: var(--text);
}
.pending-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.pending-chip .icon { flex: none; color: var(--muted); }

/* --- Deposit method tabs -------------------------------------------------
   One tab per way of paying. Scrolls sideways on a narrow screen rather
   than wrapping into a block that pushes the form below the fold. */
.method-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    margin: 0 -2px 4px;
    scroll-snap-type: x proximity;
}
.method-tabs::-webkit-scrollbar { display: none; }

.method-tab {
    flex: none;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 104px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    text-decoration: none;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.method-tab:hover,
.method-tab:focus-visible {
    border-color: var(--muted-2);
    color: var(--text);
}
.method-tab.is-active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--text);
}
.method-tab-name {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
}
.method-tab-sub {
    font-size: .6875rem;
    color: var(--muted);
    white-space: nowrap;
}
.method-tab.is-active .method-tab-sub { color: var(--text-2); }

/* --- "What kind of payment?" chooser (admin) -----------------------------
   Two paths that lead to genuinely different screens, so the difference
   is stated up front rather than discovered halfway through a form. */
.method-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.method-choice:hover,
.method-choice:focus-visible {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.method-choice-icon { flex: none; color: var(--accent); display: inline-flex; }
.method-choice-title { display: block; font-weight: 600; margin-bottom: 2px; }
.method-choice-sub { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.45; }

/* --- Filter drawer -------------------------------------------------------
   One button plus a panel, instead of a permanent row of fields that on a
   narrow screen pushed the table itself below the fold. */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-open { flex: none; }

/* How many filters are currently doing something. */
.filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #04140E;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Each chip removes only itself, so one wrong choice does not mean
   starting the whole search again. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .75rem;
    text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.filter-chip:hover,
.filter-chip:focus-visible { border-color: var(--danger); color: var(--text); }
.filter-chip-key { color: var(--muted); flex: none; }
.filter-chip-val {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-chip .icon { flex: none; width: 12px; height: 12px; opacity: .7; }

.filter-clear {
    font-size: .75rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.filter-clear:hover { color: var(--text); }

.filter-form { display: flex; flex-direction: column; gap: 0; }

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* On anything wider than a phone the sheet becomes a right-hand drawer:
   the table stays visible beside it, which is the whole point of
   filtering. Below that it keeps the bottom-sheet behaviour, which is
   what a thumb can reach. */
@media (min-width: 768px) {
    .sheet.sheet-filter {
        top: 0;
        left: auto;
        right: 0;
        bottom: 0;
        width: min(420px, 92vw);
        max-height: 100vh;
        border-radius: 0;
        border-top: 0;
        border-left: 1px solid var(--line);
        transform: translateX(100%);
    }
    .sheet.sheet-filter.is-open { transform: none; }
    .sheet.sheet-filter .sheet-grip { display: none; }
    .sheet.sheet-filter .sheet-head { padding-top: 18px; }
}

/* ---------- Touch targets --------------------------------------------
   Measured at 320px with every page loaded in a 320px frame, because a
   desktop window will not go narrow enough to reach this breakpoint.
   Three things came back too small for a thumb, and only on a phone —
   with a mouse a 20px link is perfectly clickable, so the reach is
   widened where it matters and desktop spacing is left alone. */

/* Row-selection boxes in admin tables were the browser default, 13px
   square, while every other checkbox on the site is the 20px one from
   .check. Same size now, for the same reason: consistency is not
   decoration, it is knowing where to tap. */
.table input[type="checkbox"],
.table input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

@media (max-width: 767px) {
    /* Standalone links — the back arrow at the top of a sub-page, a
       card's "View all", a closing call to action — are navigation, not
       prose, so they get a reachable box. The text does not move: the
       box grows around it. */
    .back-link,
    .card-link,
    .row > a.small,
    p.text-center > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* A link sitting inside a sentence is left alone. Growing it would
       open a gap in the middle of the paragraph, and the reader is not
       aiming for it the way they aim for a button. */

    /* The theme switch is a deliberate 46x27 — that is what a switch
       looks like. Rather than redraw it, the invisible input that
       receives the tap is stretched past the visible track, so the
       reachable area is 41px tall and nothing on screen moves. */
    .toggle input {
        top: -7px;
        bottom: -7px;
        height: auto;
    }

    /* Footer navigation: nine links stacked 9px apart, each 19px tall.
       Fine with a cursor, a coin toss with a thumb. The row grows, the
       gap shrinks to match, so the block ends up the same height. */
    .footer-links { gap: 0; }
    .footer-links a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    /* The brand is how you get home from anywhere. */
    .header-brand { min-height: 44px; }

    /* The back link already carried its own bottom margin; growing the
       box would otherwise push the page title down. */
    .back-link { margin-bottom: 4px; }

    /* A 20px box inside a 44px row: the padding is the target. */
    .table input[type="checkbox"],
    .table input[type="radio"] {
        width: 22px;
        height: 22px;
    }
}

/* =====================================================================
   Live chat — the admin thread and the public widget share these, so a
   message looks the same wherever it is read.
   ===================================================================== */

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-msg { display: flex; }
.chat-msg.is-mine   { justify-content: flex-end; }
.chat-msg.is-theirs { justify-content: flex-start; }

.chat-bubble {
    max-width: min(78%, 460px);
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    /* A pasted URL or a long word must wrap rather than stretch the
       bubble past the panel. */
    overflow-wrap: anywhere;
}
.chat-msg.is-mine .chat-bubble {
    background: var(--accent);
    border-color: var(--accent);
    color: #04140E;
    border-bottom-right-radius: 5px;
}
.chat-msg.is-theirs .chat-bubble { border-bottom-left-radius: 5px; }

.chat-text { margin: 0; font-size: .9375rem; line-height: 1.45; white-space: pre-wrap; }

.chat-meta {
    display: block;
    margin-top: 3px;
    font-size: .6875rem;
    opacity: .7;
    text-align: right;
}
.chat-tick { margin-left: 5px; letter-spacing: -1px; }
.chat-tick.is-read { color: #2F80FF; opacity: 1; }
.chat-msg.is-mine .chat-tick.is-read { color: #0B3D91; }

.chat-image {
    display: block;
    max-width: 100%;
    border-radius: 9px;
    margin-bottom: 6px;
}
.chat-audio { display: block; width: 240px; max-width: 100%; margin-bottom: 4px; }

.chat-system {
    align-self: center;
    font-size: .75rem;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 3px 12px;
}

/* Typing indicator ---------------------------------------------------- */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 8px;
    font-size: .8125rem;
    color: var(--muted);
}
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted);
    animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-dots span:nth-child(2) { animation-delay: .15s; }
.chat-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes chat-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-dots span { animation: none; opacity: .7; }
}

/* Composer ------------------------------------------------------------ */
.chat-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}
.chat-compose .input { flex: 1; min-width: 0; }

.chat-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
}
.chat-attach:hover { background: var(--surface-3); color: var(--text); }
.chat-attach.is-recording {
    border-color: var(--danger);
    color: var(--danger);
    animation: chat-pulse 1s infinite;
}
@keyframes chat-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .chat-attach.is-recording { animation: none; } }

.chat-file-name { padding: 0 16px 10px; margin: 0; }

/* Chat widget — the launcher and panel on public pages ---------------- */

.chat-launcher {
    position: fixed;
    right: 18px;
    /* Clear of the member app's bottom bar on phones, which sits at the
       same corner and would otherwise cover this. */
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 54px; height: 54px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #04140E;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-launcher:hover { filter: brightness(1.06); }

.chat-launcher-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--accent);
}

.chat-panel {
    position: fixed;
    right: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 901;
    width: 360px;
    max-width: calc(100vw - 36px);
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    overflow: hidden;
}

/* On a small screen it is a sheet, not a floating card: a 360px panel
   inside a 360px viewport leaves nothing either side of it. */
@media (max-width: 480px) {
    .chat-panel {
        right: 0; left: 0; bottom: 0;
        width: auto;
        max-width: none;
        max-height: 86vh;
        border-radius: 16px 16px 0 0;
    }
}

.chat-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.chat-panel-title { margin: 0; font-weight: 700; font-size: .9375rem; }
.chat-panel-sub   { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }

.chat-panel-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px;
}
.chat-panel-close:hover { color: var(--text); }

.chat-intro { padding: 16px; overflow-y: auto; }
.chat-panel .chat-thread { flex: 1; max-height: none; }

/* `hidden` has to actually hide -------------------------------------- */
/*
 * The browser's own rule is `[hidden] { display: none }`, and any author
 * rule that sets `display` outranks it. Every chat element below is
 * toggled with the hidden attribute *and* carries a display of its own,
 * so without this the panel sat open on every page load, the composer
 * showed before a conversation existed, and the typing indicator never
 * went away. Written per-selector rather than as a blanket
 * `[hidden] { display: none !important }` so it cannot surprise anything
 * else on the page.
 */
.chat-panel[hidden],
.chat-thread[hidden],
.chat-compose[hidden],
.chat-typing[hidden],
.chat-intro[hidden],
.chat-file-name[hidden],
.chat-launcher-dot[hidden] {
    display: none;
}

/* =====================================================================
   Refer a friend — the dashboard block
   ===================================================================== */

/*
 * A quiet glow, not a spotlight. The card sits between the earnings tiles
 * and the investments list, and shouting over both of them would be worse
 * than not being noticed at all.
 */
.refer-card {
    position: relative;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
                0 6px 20px -8px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* color-mix is recent; older browsers keep the plain card and lose only
   the tint, which is the right thing to lose. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .refer-card { border-color: var(--accent); box-shadow: 0 6px 20px -10px rgba(16, 185, 129, .35); }
}

.refer-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* The link must be allowed to shrink below its content width, which
       is the only way an ellipsis ever appears inside a flex row. */
    min-width: 0;
}

.refer-link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .8125rem;
    line-height: 1.5;

    /* One line, and whatever does not fit becomes an ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.refer-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.refer-btn:hover { background: var(--surface-3); }
.refer-btn.is-copied { border-color: var(--accent); color: var(--accent); }

.refer-btn.is-share {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent);
}

/* On a narrow screen the labels go and the icons carry the meaning; two
   words either side of a truncated link leaves the link almost nothing. */
@media (max-width: 420px) {
    .refer-btn-label { display: none; }
    .refer-btn { padding: 9px 11px; }
}

/* The fallback destinations, for browsers with no share sheet ---------- */
.refer-share-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.refer-share-menu[hidden] { display: none; }

.refer-share-item {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .8125rem;
    font-weight: 600;
}
.refer-share-item:hover {
    text-decoration: none;
    background: var(--surface-3);
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/*
 * Inside the member app the launcher has to clear the bottom navigation.
 *
 * That bar is fixed at the foot of the screen and 62px tall, so a button
 * anchored 18px from the bottom sits on top of it — covering whichever
 * tab happens to be underneath and catching taps meant for it. The same
 * offset the toast stack already uses, so the two never disagree about
 * where the bottom of the screen is.
 */
body.is-authenticated .chat-launcher {
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 14px);
}
body.is-authenticated .chat-panel {
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 78px);
}

/* Above 768px the bar is hidden, so the offset would only leave a gap. */
@media (min-width: 768px) {
    body.is-authenticated .chat-launcher {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    body.is-authenticated .chat-panel {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* On a phone the panel is a full-width sheet; it should sit above the bar
   rather than floating clear of it. */
@media (max-width: 480px) {
    body.is-authenticated .chat-panel {
        bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
    }
}

/* The live-campaign line on the dashboard card ------------------------ */
.refer-campaign {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
    color: var(--text-2);
    font-size: .78125rem;
    line-height: 1.5;
}
.refer-campaign strong { color: var(--text); }
.refer-campaign .icon { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .refer-campaign { background: var(--surface-2); border: 1px solid var(--accent); }
}