/**
 * Credora Vault — styles
 * Rides on the tokens already defined in rewards/styles.css (--bg, --surface,
 * --accent, --radius …). Nothing here redefines a token; it only adds the
 * components the vault needs. Mobile-first: base rules target small screens,
 * min-width queries progressively add desktop layout.
 */

/* ══════════════ nav auth slot (renders on every page) ══════════════ */
.nav-auth { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.loginbtn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
    padding: 8px 17px; border-radius: 100px; text-decoration: none; cursor: pointer;
    color: #fff; border: 1px solid transparent; white-space: nowrap;
    background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
    box-shadow: 0 2px 10px var(--accent-glow);
    transition: box-shadow .18s, transform .18s, filter .18s;
}
.loginbtn:hover { box-shadow: 0 4px 20px var(--accent-glow); transform: translateY(-1px); filter: brightness(1.07); }
.loginbtn:active { transform: translateY(0); }
.loginbtn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; }

.avatar {
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: #fff; font-size: 11px; font-weight: 700; font-family: 'Inter', sans-serif;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid var(--border-hover); flex-shrink: 0;
}
.usermenu { position: relative; }
.usermenu-drop {
    position: absolute; right: 0; top: calc(100% + 8px); width: 232px;
    background: var(--surface-2); border: 1px solid var(--border-hover);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: .4rem; display: none; z-index: 600;
}
.usermenu-drop.open { display: block; }
.usermenu-head { padding: .55rem .65rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.usermenu-name { font-size: 13px; font-weight: 600; }
.usermenu-mail { font-size: 11px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.usermenu-item {
    display: block; padding: .5rem .65rem; font-size: 12.5px; border-radius: 6px;
    color: var(--text-secondary); text-decoration: none;
}
.usermenu-item:hover { background: var(--accent-dim); color: var(--text); }

@media (max-width: 640px) {
    .loginbtn { padding: 7px 14px; font-size: 12px; }
    .loginbtn svg { width: 15px; height: 15px; }
    .loginbtn .loginbtn-label { display: none; }   /* icon-only next to the burger */
}

/* ══════════════ access denied ══════════════ */
.denied-wrap { max-width: 560px; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; text-align: center; }
.denied-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2.25rem 1.5rem; }
.denied-ico {
    width: 62px; height: 62px; border-radius: 50%; background: var(--red-dim); color: var(--red);
    display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 1.1rem;
}
.denied-title { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.denied-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin-top: .7rem; }
.denied-mail { font-family: 'JetBrains Mono', monospace; color: var(--text); word-break: break-all; }
.denied-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }
.denied-foot { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; margin-top: 1.6rem; }

/* ══════════════ shared vault primitives ══════════════ */
.vwrap { max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 3.5rem; width: 100%; }
/* every re-render rises in gently; killed by prefers-reduced-motion below */
@keyframes vrise { from { opacity: 0; transform: translateY(8px); } }
#stage > * { animation: vrise .3s cubic-bezier(.2, .8, .2, 1) both; }
.vmono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.vnum  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
.vpos { color: var(--green); } .vneg { color: var(--red); }
.vwarn { color: var(--orange); } .vmut { color: var(--text-muted); }
.vsec { color: var(--text-secondary); }
.vrow { display: flex; align-items: center; gap: .6rem; }
.vrow-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.vgrow { flex: 1; min-width: 0; }
.vhide { display: none !important; }
.vscroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vstack { display: flex; flex-direction: column; gap: 1rem; }

.vbtn {
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
    padding: 9px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-hover); background: var(--surface-2);
    color: var(--text); cursor: pointer; transition: all .15s;
    text-decoration: none; display: inline-flex; align-items: center;
    justify-content: center; gap: 6px; min-height: 38px; white-space: nowrap;
}
.vbtn:hover { border-color: var(--accent); background: var(--surface-3); }
.vbtn:disabled { opacity: .45; cursor: not-allowed; }
.vbtn-primary {
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-color: transparent; color: #fff; box-shadow: 0 2px 10px var(--accent-glow);
}
.vbtn-primary:hover {
    border-color: transparent; filter: brightness(1.08);
    box-shadow: 0 4px 18px var(--accent-glow); transform: translateY(-1px);
}
.vbtn-primary:active { transform: translateY(0); }
.vbtn-sm { font-size: 11.5px; padding: 6px 11px; min-height: 32px; }
.vbtn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.vbtn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.vbtn-danger { color: var(--red); border-color: var(--red-dim); }
.vbtn-danger:hover { background: var(--red-dim); border-color: var(--red); }
.vbtn-block { width: 100%; }

.vpill {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
    padding: 3px 8px; border-radius: 100px; letter-spacing: .03em;
    text-transform: uppercase; white-space: nowrap;
}
.vpill-a { background: var(--accent-dim); color: var(--accent); }
.vpill-g { background: var(--green-dim); color: var(--green); }
.vpill-o { background: var(--orange-dim); color: var(--orange); }
.vpill-r { background: var(--red-dim); color: var(--red); }
.vpill-p { background: var(--purple-dim); color: var(--purple); }
.vpill-m { background: var(--surface-3); color: var(--text-muted); }
.vdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
@keyframes vpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.vpulse { animation: vpulse 2s infinite; }

.vpanel {
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 42%), var(--surface);
    border: 1px solid var(--border); border-radius: 14px;
}
.vpanel-head {
    /* One height for every panel head, whether or not it carries a button.
       Without the floor, heads with an action sat 9px taller than heads with
       only a note, and side-by-side panels lost their shared baseline. */
    padding: .55rem 1rem; min-height: 58px; box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}
.vpanel-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vpanel-title .vico {
    width: 23px; height: 23px; border-radius: 7px; background: var(--accent-dim); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.vpanel-note { font-size: 11px; color: var(--text-muted); }
.vpanel-body { padding: 1rem; }

.vstat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; }
.vstat-label { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.vstat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 700; margin-top: 5px; letter-spacing: -.02em; }
.vstat-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

.vmeter { height: 6px; border-radius: 100px; background: var(--surface-3); overflow: hidden; position: relative; }
.vmeter-fill { height: 100%; border-radius: 100px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.vmeter-fill.g { background: linear-gradient(90deg,#34d399,#10b981); }
.vmeter-fill.o { background: linear-gradient(90deg,#fbbf24,#fb923c); }
.vmeter-fill.r { background: linear-gradient(90deg,#fb7185,#f87171); }
.vmeter-fill.a { background: linear-gradient(90deg,#818cf8,#c084fc); }
.vmeter.tall { height: 9px; }

.valert { display: flex; align-items: flex-start; gap: 9px; padding: .7rem .85rem;
          border-radius: var(--radius-sm); border: 1px solid; font-size: 12.5px; line-height: 1.55; }
.valert-a { background: var(--accent-dim); border-color: rgba(129,140,248,.28); color: var(--accent); }
.valert-o { background: var(--orange-dim); border-color: rgba(251,146,60,.28); color: #fdba74; }
.valert-r { background: var(--red-dim); border-color: rgba(248,113,113,.28); color: #fca5a5; }
[data-theme="light"] .valert-o { color: #c2410c; }
[data-theme="light"] .valert-r { color: #b91c1c; }
.valert strong { color: inherit; }

.vempty { text-align: center; padding: 2.5rem 1.25rem; color: var(--text-muted); font-size: 13px; }
.vempty .vbig { font-size: 1.9rem; margin-bottom: .6rem; opacity: .55; display: block; }
.vloading { text-align: center; padding: 4rem 1rem; color: var(--text-muted); font-size: 13px; }
.vspin {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid var(--surface-3); border-top-color: var(--accent);
    border-radius: 50%; animation: vspin .7s linear infinite;
}
@keyframes vspin { to { transform: rotate(360deg); } }

/* ══════════════ tabs ══════════════ */
.vtabs {
    display: flex; gap: 3px; background: var(--surface); border-radius: 100px;
    padding: 4px; border: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.vtabs::-webkit-scrollbar { display: none; }
.vtab {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    padding: 7px 14px; border-radius: 100px; border: none; cursor: pointer;
    background: transparent; color: var(--text-muted); transition: all .15s;
    white-space: nowrap; flex: 0 0 auto; min-height: 32px;
}
.vtab:hover { color: var(--text-secondary); }
.vtab.active {
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: #fff; box-shadow: 0 2px 12px var(--accent-glow);
}

.vseg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 6px; padding: 2px; }
.vsegb { font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 4px; border: none;
         background: transparent; color: var(--text-muted); cursor: pointer; min-height: 30px; }
.vsegb.on { background: var(--accent-dim); color: var(--accent); }

/* ══════════════ tables ══════════════ */
.vtbl { width: 100%; border-collapse: collapse; }
.vtbl thead tr { background: var(--surface-2); }
.vtbl th {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); padding: 9px 12px; text-align: left;
    border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap;
}
.vtbl th.r, .vtbl td.r { text-align: right; }
.vtbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 12.5px; }
.vtbl tr:last-child td { border-bottom: none; }
.vtbl tbody tr.click { cursor: pointer; }
.vtbl tbody tr:hover td { background: rgba(129,140,248,.045); }

/* accounting ledger */
.vled { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.vled th {
    font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
    padding: 8px 11px; border-bottom: 1px solid var(--border); font-weight: 600;
    text-align: right; white-space: nowrap; background: var(--surface-2);
}
.vled th:nth-child(1), .vled th:nth-child(2), .vled th:nth-child(3) { text-align: left; }
.vled td { padding: 7px 11px; border-bottom: 1px dotted var(--border); text-align: right; white-space: nowrap; }
.vled td:nth-child(1), .vled td:nth-child(2), .vled td:nth-child(3) { text-align: left; white-space: normal; }
.vled tbody tr.click { cursor: pointer; }
.vled tbody tr:hover td { background: rgba(129,140,248,.05); }
.vled tfoot td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700;
                 background: var(--surface-2); padding: 10px 11px; }
.vled .vbal { font-weight: 700; color: var(--text); }
.vled .vdesc { font-family: 'Inter', sans-serif; font-size: 12px; }
.vled .vsubtle { font-size: 10px; color: var(--text-muted); }

/* ══════════════ card art ══════════════ */
.cc {
    position: relative; border-radius: 12px; aspect-ratio: 1.586 / 1; overflow: hidden; color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.10);
    display: flex; flex-direction: column; justify-content: space-between; padding: 11px 12px;
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.cc::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(110% 80% at 88% -10%, rgba(255,255,255,.20), transparent 55%),
                linear-gradient(115deg, transparent 42%, rgba(255,255,255,.09) 50%, transparent 58%);
}
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.cc-top > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bank { font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .92;
           flex: 1 1 auto; }
.cc-net { font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72;
          flex: 0 1 auto; }
.cc-chip { width: 25px; height: 18px; border-radius: 4px; position: relative; z-index: 2;
    background: linear-gradient(135deg,#e8c66a,#b8912f 45%,#f0dca0 60%,#a8822a);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.cc-bot { position: relative; z-index: 2; }
.cc-name { font-size: 12px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
            text-shadow: 0 1px 4px rgba(0,0,0,.4);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-last4 { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: .7; margin-top: 3px;
            letter-spacing: .09em; white-space: nowrap; }
/* real card face (cached JPG from the bank's site) as the background */
.cc-real { background-size: cover; background-position: center; background-color: #131318; }
.cc-real::before {
    /* bottom-only scrim: just enough to keep the last-4 readable */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, transparent 62%, rgba(6,6,10,.5) 100%);
}
.cc-real::after {   /* soften the gloss so the photo shows through */
    background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.05) 50%, transparent 55%);
}
/* the photo already carries the chip, bank logo, card name and network mark —
   only the last-4 stays, since that is the one thing the face can't show */
.cc-real .cc-chip { visibility: hidden; }
.cc-real .cc-bank, .cc-real .cc-net, .cc-real .cc-name { display: none; }

.cc-xs { width: 64px; } .cc-sm { width: 110px; } .cc-md { width: 186px; } .cc-lg { width: 240px; }
.cc-xs .cc-name { font-size: 7.5px; } .cc-xs .cc-bank { font-size: 6px; }
.cc-xs .cc-chip { width: 14px; height: 10px; } .cc-xs .cc-last4, .cc-xs .cc-net { display: none; }
.cc-sm .cc-name { font-size: 9.5px; } .cc-sm .cc-bank { font-size: 7px; letter-spacing: .08em; }
.cc-sm .cc-net, .cc-md .cc-net { display: none; }   /* never fits; shown on the card page instead */
.cc-sm .cc-chip { width: 18px; height: 13px; } .cc-sm .cc-last4 { font-size: 8px; }
.cc-lg .cc-name { font-size: 15px; } .cc-lg .cc-chip { width: 32px; height: 23px; } .cc-lg .cc-bank { font-size: 10.5px; }

/* ══════════════ wallet shelf ══════════════ */
.shelf-wrap {
    background:
        radial-gradient(90% 130% at 12% -30%, var(--accent-dim), transparent 55%),
        radial-gradient(80% 120% at 88% -20%, var(--purple-dim), transparent 58%);
    border-bottom: 1px solid var(--border); padding: 1.1rem 0 .9rem;
}
.shelf-head {
    max-width: 1240px; margin: 0 auto; padding: 0 1rem .75rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.shelf-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.shelf-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.shelf {
    /* 10px of top padding: the selected card lifts by 5px and wears a 2px
       ring, and this element is a scroll container — without the headroom
       the raised card is clipped flat against the header above it. */
    max-width: 1240px; margin: 0 auto; padding: 10px 1rem .5rem;
    display: flex; gap: .75rem; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.shelf::-webkit-scrollbar { display: none; }
.slot {
    flex: 0 0 auto; cursor: pointer; text-align: center; scroll-snap-align: start;
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    transition: opacity .2s, filter .2s;
}
.slot:not(.on) { opacity: .5; filter: saturate(.55); }
.slot:not(.on):hover, .slot:not(.on):focus-visible { opacity: .88; filter: none; }
.slot.on .cc {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 0 2px var(--accent),
                0 0 26px var(--accent-glow);
}
/* phones: bigger cards that snap to centre — the wallet feels like a wallet */
@media (max-width: 559px) {
    .shelf { scroll-snap-type: x mandatory; padding-bottom: .65rem; }
    .slot { scroll-snap-align: center; }
    .shelf .cc-md { width: 216px; }
}
.slot-meta { margin-top: .55rem; font-size: 9.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.slot-tags { display: flex; gap: 4px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }
.addslot {
    flex: 0 0 auto; width: 130px; aspect-ratio: 1.586 / 1;
    border: 1.5px dashed var(--border-hover); border-radius: 12px; background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; color: var(--text-muted); font-size: 11px; font-weight: 600;
    transition: all .15s; font-family: inherit;
}
.addslot:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.addslot .plus { font-size: 20px; line-height: 1; }

/* ══════════════ wallet hero card ══════════════ */
.hero-cc { position: relative; margin-bottom: 1rem; }
.hero-cc .cc { width: 100%; border-radius: 18px; box-shadow: 0 20px 44px rgba(0,0,0,.55); }
.hero-cc .cc-lg .cc-last4 { font-size: 11px; }
.hero-cc::after {   /* ambient glow beneath the card */
    content: ''; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 42px;
    background: radial-gradient(50% 100% at 50% 0%, var(--accent-glow), transparent 75%);
    filter: blur(10px); pointer-events: none;
}

/* ══════════════ arc gauge (caps) ══════════════ */
.arc { position: relative; width: 100%; height: 72px; margin-bottom: .35rem; display: flex; justify-content: center; }
.arc svg { height: 100%; width: auto; max-width: 100%; overflow: visible; display: block; }
.arc-v { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; }
.arc-num { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; line-height: 1; }
.arc-sub { font-size: 8px; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.capbox {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem; position: relative; overflow: hidden; cursor: pointer;
    transition: border-color .18s, transform .18s; text-align: left; width: 100%; font: inherit; color: inherit;
}
.capbox:hover { border-color: var(--accent); transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.capbox.r { border-color: rgba(248,113,113,.42); }
.capbox.r::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(90% 70% at 50% 125%, rgba(248,113,113,.18), transparent 70%); }
.capbox.o { border-color: rgba(251,146,60,.32); }
.capbox-label { font-size: 11px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }

/* ══════════════ milestone tree (one feed → many milestones) ══════════════ */
.feedbox {
    background: var(--surface-2); border: 1px solid var(--border-hover);
    border-left: 2px solid var(--accent); border-radius: var(--radius-sm); padding: .75rem .85rem;
}
.feedrow { display: flex; justify-content: space-between; gap: .8rem; padding: 3px 0; font-size: 11.5px; }
.feedrow.tot { border-top: 1px dashed var(--border-hover); margin-top: 5px; padding-top: 7px;
               font-weight: 700; font-size: 12.5px; }
.tree { padding-left: 20px; position: relative; margin-top: .2rem; }
.trow { position: relative; padding: .5rem 0; }
.trow::before { content: ''; position: absolute; left: -20px; top: 0; bottom: 0; width: 2px;
                background: var(--accent); opacity: .45; border-radius: 2px; }
.trow:last-child::before { bottom: auto; height: 50%; }
.trow::after { content: ''; position: absolute; left: -20px; top: 50%; width: 15px; height: 2px;
               background: var(--accent); opacity: .45; border-radius: 2px; }
.mcard {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .7rem .85rem; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
    transition: border-color .15s;
}
.mcard:hover { border-color: var(--border-hover); }
.mcard.done { border-color: rgba(52,211,153,.42); background: linear-gradient(90deg, var(--green-dim), var(--surface-2) 62%); }
.mcard.near { border-color: rgba(251,146,60,.42); }

/* ══════════════ calendar ══════════════ */
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calh { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--text-muted);
        text-align: center; padding: 3px 0; letter-spacing: .05em; }
.cel {
    min-height: 54px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2);
    padding: 4px 5px; cursor: pointer; position: relative; transition: border-color .13s, box-shadow .13s;
    display: flex; flex-direction: column; font: inherit; color: inherit; text-align: left;
}
.cel:hover, .cel:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); z-index: 4; }
.cel.off { opacity: .2; pointer-events: none; background: transparent; border-style: dashed; }
.cel.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.cel-d { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-muted); font-weight: 600; }
.cel-amt { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; margin-top: auto; }
.cel-marks { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.mk { width: 5px; height: 5px; border-radius: 50%; display: block; flex-shrink: 0; }
.mk-s { background: var(--accent); } .mk-i { background: var(--green); } .mk-o { background: var(--red); }
.mk-st { background: transparent; border: 1.5px solid var(--orange); width: 6px; height: 6px; }
.callegend { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; flex-wrap: wrap;
             row-gap: .4rem; font-size: 10px; color: var(--text-muted); }
.callegend span { display: inline-flex; align-items: center; gap: 5px; }

.vpop {
    position: fixed; z-index: 800; width: 280px; max-width: calc(100vw - 20px);
    background: var(--surface-3); border: 1px solid var(--border-hover); border-radius: 10px;
    box-shadow: var(--shadow); padding: .65rem .75rem; pointer-events: none; font-size: 11.5px;
}
.vpop[hidden] { display: none; }
.poprow { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; border-bottom: 1px dotted var(--border); }
.poprow:last-child { border-bottom: none; }

/* ══════════════ points tiles ══════════════ */
.ptile {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .9rem; cursor: pointer; transition: border-color .18s, transform .18s;
    position: relative; overflow: hidden; text-align: left; width: 100%; font: inherit; color: inherit;
}
.ptile:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
.ptile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ptile.hotel::before { background: var(--purple); }
.ptile.bank::before { background: var(--green); }
.ptile.other::before { background: var(--text-muted); }
.pbal { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 700;
        letter-spacing: -.025em; line-height: 1.15; }

.btile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.btile-strip { height: 3px; }

/* ══════════════ forms ══════════════ */
.vfield { margin-bottom: .8rem; }
.vfield label { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.vinp, select.vinp, textarea.vinp {
    width: 100%; font-family: 'Inter', sans-serif; font-size: 16px; /* 16px stops iOS zooming on focus */
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
    min-height: 42px;
}
.vinp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.vinp::placeholder { color: var(--text-muted); }
.vinp.vmono { font-family: 'JetBrains Mono', monospace; }
textarea.vinp { min-height: 74px; resize: vertical; line-height: 1.5; }
.vgrid-2, .vgrid-3 { display: grid; gap: .7rem; grid-template-columns: 1fr; }
/* stat strips (bills, points) stay 2-up even on phones: two rows, not five */
.vgrid-4 { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 559px) {
    .vgrid-4 .vstat { padding: .65rem .7rem; }
    .vgrid-4 .vstat-value { font-size: 1.05rem; }
}
.vformrow { display: grid; gap: .7rem; grid-template-columns: 1fr; }
.vkv { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0;
       border-bottom: 1px dotted var(--border); font-size: 12px; }
.vkv:last-child { border-bottom: none; }
.vkv .k { color: var(--text-muted); } .vkv .v { font-weight: 600; text-align: right; }
.vhr { height: 1px; background: var(--border); margin: .9rem 0; border: 0; }

/* ══════════════ drawer / modal / toast ══════════════ */
.vscrim { position: fixed; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); z-index: 900; }
.vscrim[hidden] { display: none; }
.vdrawer {
    position: fixed; z-index: 901; top: 0; right: 0; height: 100dvh; width: min(620px, 100vw);
    background: var(--surface); border-left: 1px solid var(--border-hover); box-shadow: var(--shadow);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    overscroll-behavior: contain;
}
.vdrawer.open { transform: translateX(0); }
.vmodal {
    position: fixed; z-index: 902; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.97);
    width: min(640px, calc(100vw - 1.5rem)); max-height: 88dvh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-hover); border-radius: 14px;
    box-shadow: var(--shadow); display: none; overscroll-behavior: contain;
}
.vmodal.open { display: block; animation: vmodalin .18s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes vmodalin { to { transform: translate(-50%,-50%) scale(1); } }
.vmodal.wide { width: min(900px, calc(100vw - 1.5rem)); }
.vdh {
    position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border);
    padding: .9rem 1.05rem; display: flex; align-items: flex-start; justify-content: space-between;
    gap: .85rem; z-index: 5;
}
.vdh-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.vdh-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.vx {
    width: 32px; height: 32px; min-width: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-size: 17px;
    line-height: 1; display: flex; align-items: center; justify-content: center;
}
.vx:hover { color: var(--text); border-color: var(--border-hover); }
.vdb { padding: 1.05rem; }
.vdb-actions { display: flex; gap: .55rem; justify-content: flex-end; margin-top: 1.1rem; flex-wrap: wrap; }
.vdb-actions .vbtn { flex: 1 1 auto; }

.vtoast {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(18px);
    background: var(--surface-3); border: 1px solid var(--border-hover); border-radius: 100px;
    padding: 9px 18px; font-size: 12.5px; font-weight: 600; z-index: 999; pointer-events: none;
    opacity: 0; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem); text-align: center;
}
.vtoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.vtoast.err { border-color: var(--red); color: #fca5a5; }
[data-theme="light"] .vtoast.err { color: #b91c1c; }

/* ══════════════ responsive: progressively add desktop layout ══════════════ */
@media (min-width: 560px) {
    .vgrid-2 { grid-template-columns: repeat(2, 1fr); }
    .vgrid-4 { grid-template-columns: repeat(2, 1fr); }
    .vformrow { grid-template-columns: repeat(2, 1fr); }
    .cel { min-height: 64px; }
    .vdb-actions .vbtn { flex: 0 0 auto; }
}
@media (min-width: 780px) {
    .vwrap { padding: 1.25rem 1.5rem 4rem; }
    .shelf-head { padding: 0 1.5rem .8rem; }
    .shelf { padding: 10px 1.5rem .6rem; gap: 1rem; }
    .shelf-title { font-size: 1.22rem; }
    .vgrid-3 { grid-template-columns: repeat(3, 1fr); }
    .addslot { width: 164px; }
    .cel { min-height: 72px; }
    .calgrid { gap: 5px; }
}
@media (min-width: 1024px) {
    .vwrap { padding: 1.5rem 2rem 4rem; }
    .shelf-head, .shelf { padding-left: 2rem; padding-right: 2rem; }
    .vgrid-4 { grid-template-columns: repeat(4, 1fr); }
    .vformrow-4 { grid-template-columns: repeat(4, 1fr); }
    /* card page becomes a rail + main split */
    .card-split { display: grid; grid-template-columns: 288px 1fr; gap: 1.5rem; align-items: start; }
    /* ledger sits beside the calendar */
    .ledger-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.15rem; align-items: start; }
    /* milestone feed sits beside its tree */
    .ms-split { display: grid; grid-template-columns: 280px 1fr; gap: 1.15rem; align-items: start; }
}

/* touch devices never get a hover popover — tapping opens the day drawer instead */
@media (hover: none) {
    .vpop { display: none !important; }
}

@media print {
    .shelf-wrap, .vtabs, .nav, .site-footer, .vbtn { display: none !important; }
    .vpanel { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══════════════ dashboard ══════════════ */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.1rem; }
.kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: .85rem .95rem; text-align: left; cursor: pointer; font: inherit; color: inherit;
    position: relative; overflow: hidden;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.kpi:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.kpi::after {   /* soft tone-matched wash rising from the accent edge */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background: radial-gradient(120% 100% at 0% 0%, var(--accent-dim), transparent 52%);
}
.kpi-g::before { background: var(--green); }
.kpi-g::after { background: radial-gradient(120% 100% at 0% 0%, var(--green-dim), transparent 52%); }
.kpi-o::before { background: var(--orange); }
.kpi-o::after { background: radial-gradient(120% 100% at 0% 0%, var(--orange-dim), transparent 52%); }
.kpi-r::before { background: var(--red); }
.kpi-r::after { background: radial-gradient(120% 100% at 0% 0%, var(--red-dim), transparent 52%); }
.kpi > * { position: relative; z-index: 1; }
.kpi .vstat-value { font-size: 1.28rem; }
.kpi-r .vstat-value { color: var(--red); }
.kpi-o .vstat-value { color: var(--orange); }

/* Two columns that pack independently. A six-cell grid pairs the panels but
   makes every row as tall as its tallest member, which left a black hole under
   each short panel; two columns let each one sit directly under the last.
   Reading across still gives the intended pairing, because the panels are
   dealt into the columns in that order. */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.dash-col { display: contents; }

/* Below the two-column breakpoint the columns dissolve and their panels become
   grid items in their own right, reordered back into reading order so a phone
   gets "needs you → reminders → caps → milestones → cards → portfolio" rather
   than one whole column and then the other. */
@media (max-width: 1023px) {
    .dash-col:nth-child(1) > :nth-child(1) { order: 1; }
    .dash-col:nth-child(2) > :nth-child(1) { order: 2; }
    .dash-col:nth-child(1) > :nth-child(2) { order: 3; }
    .dash-col:nth-child(2) > :nth-child(2) { order: 4; }
    .dash-col:nth-child(1) > :nth-child(3) { order: 5; }
    .dash-col:nth-child(2) > :nth-child(3) { order: 6; }
}

.attn {
    display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
    padding: .6rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface-2); margin-bottom: 5px; cursor: pointer; font: inherit; color: inherit;
    transition: border-color .15s;
}
.attn:hover { border-color: var(--border-hover); }
.attn-r { background: var(--red-dim); border-color: rgba(248,113,113,.3); }
.attn-o { background: var(--orange-dim); border-color: rgba(251,146,60,.28); }
.attn-g { background: var(--green-dim); border-color: rgba(52,211,153,.28); }
.attn-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--text-muted); }
.attn-r .attn-dot { background: var(--red); animation: vpulse 2s infinite; }
.attn-o .attn-dot { background: var(--orange); }
.attn-g .attn-dot { background: var(--green); }
.attn-title { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.attn-detail { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.attn-go { color: var(--text-muted); font-size: 16px; line-height: 1; flex-shrink: 0; align-self: center; }

/* A reminder row is two controls in one strip: a tick box that settles it in
   place, and the rest of the row which opens it for editing. Both have to look
   like one row, so the inner button carries no chrome of its own. */
.attn-tick {
    width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; padding: 0;
    border-radius: 5px; border: 1.5px solid var(--border-hover); background: var(--surface-1);
    color: var(--green); font-size: 11px; font-weight: 800; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.attn-tick:hover { border-color: var(--green); background: var(--green-dim); }
.attn-open {
    display: block; text-align: left; padding: 0; margin: 0; border: 0;
    background: transparent; font: inherit; color: inherit; cursor: pointer; min-width: 0;
}
.attn-done { opacity: .5; }
.attn-done .attn-title { text-decoration: line-through; }
.attn-done .attn-tick { border-color: var(--green); background: var(--green-dim); }

.minicard {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: .5rem .55rem; border-radius: var(--radius-sm); border: 1px solid transparent;
    background: transparent; cursor: pointer; font: inherit; color: inherit; margin-bottom: 3px;
}
.minicard:hover { background: var(--surface-2); border-color: var(--border); }
.minicard-n { display: block; font-size: 12px; font-weight: 600; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.minicard-s { display: block; font-size: 10px; color: var(--text-muted); margin: 2px 0 4px; }

.msmini, .pmini {
    display: block; width: 100%; text-align: left; padding: .5rem 0; background: transparent;
    border: 0; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; color: inherit;
}
.msmini:last-of-type, .pmini:last-of-type { border-bottom: none; }
.msmini:hover, .pmini:hover { opacity: .82; }
.msmini .vmeter, .pmini .vmeter { margin-top: 5px; }
.msmini-s { display: block; font-size: 10px; color: var(--text-muted); margin-top: 4px; }

@media (min-width: 560px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
    .kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .dash-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
}
/* The tab strip only sits beside the page title where all seven tabs fit
   without being squeezed and clipped. Below this it takes its own full-width
   row under the heading, left-aligned with it. */
@media (min-width: 1200px) {
    .shelf-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ══════════════ bills board ══════════════ */
.billrow {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .7rem .85rem; border-bottom: 1px solid var(--border);
}
.billrow:last-child { border-bottom: none; }
.billrow-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.billrow-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.billrow-amt { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; }
.billrow-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.bill-steps { display: inline-flex; align-items: center; gap: 5px; }
.bill-step { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3);
             border: 1px solid var(--border-hover); }
.bill-step.on { background: var(--green); border-color: var(--green); }
.bill-step-line { width: 14px; height: 2px; background: var(--surface-3); border-radius: 2px; }
.bill-step-line.on { background: var(--green); }

/* ══════════════ benefit uses: one dated tick box per allowed use ══════════════ */
.bslots { margin-top: .7rem; background: var(--surface-2); border: 1px solid var(--border);
          border-radius: var(--radius-sm); padding: .5rem .55rem; }
.bslot-row { display: flex; flex-wrap: wrap; gap: 5px; }
.bslot {
    display: flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px;
    padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border-hover);
    background: var(--surface-3); color: var(--text-secondary); font: inherit;
}
.bslot:hover { border-color: var(--accent); color: var(--text); }
.bslot.on { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.bslot-box {
    width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px; font-size: 10px;
    border: 1.5px solid currentColor; display: inline-flex; align-items: center;
    justify-content: center; line-height: 1;
}
.bslot-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.bslot-d { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; opacity: .8; }
.bbal { margin-top: .7rem; }
.bbal .vmeter { margin-top: 4px; }

/* ══════════════ inline row tools (edit / delete, everywhere a row is) ══════════════ */
.vmini {
    width: 26px; height: 26px; min-width: 26px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
    font-size: 11.5px; line-height: 1; display: inline-flex; align-items: center;
    justify-content: center; padding: 0;
}
.vmini:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.vmini-x:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.ledtools { white-space: nowrap; text-align: right !important; }
.ledtools .vmini + .vmini { margin-left: 4px; }
.vtbl td.ledtools, .vled td.ledtools { padding-left: 6px; padding-right: 8px; }

/* ══════════════ internally-scrolling panels ══════════════
   Sized by how many entries are in them, not by the viewport. A panel holding
   one row is one row tall; each new entry grows it, and past --rows (five) it
   stops growing and scrolls instead. --row-h is that panel's own row height
   and --row-extra covers its padding and any table header. */
.vpanel-scroll {
    max-height: calc(var(--rows, 5) * var(--row-h, 62px) + var(--row-extra, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.vpanel-scroll::-webkit-scrollbar { width: 6px; }
.vpanel-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 100px; }
.vpanel-scroll::-webkit-scrollbar-track { background: transparent; }

/* ══════════════ spend status marks: ✓ verified · ⚑ flagged · ○ pending ══════════════ */
.tstat { display: inline-block; margin-right: 5px; font-size: 10px; line-height: 1; }
.tstat-g { color: var(--green); }
.tstat-r { color: var(--red); }
.tstat-m { color: var(--text-muted); opacity: .7; }

/* ══════════════ info tips: a quiet "i" instead of a paragraph-sized alert ══════════════ */
.vinfo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--border-hover); color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
    font-style: normal; line-height: 1; letter-spacing: 0; text-transform: none;
    cursor: help; position: relative; vertical-align: middle; margin-left: 5px;
}
.vinfo:hover, .vinfo:focus, .vinfo.open { color: var(--accent); border-color: var(--accent); outline: none; }
.vinfo-tip {
    display: none; position: absolute; top: calc(100% + 7px); left: -8px; z-index: 960;
    width: 300px; max-width: min(300px, 78vw);
    background: var(--surface-3); border: 1px solid var(--border-hover); border-radius: 10px;
    box-shadow: var(--shadow); padding: .6rem .75rem;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.6;
    color: var(--text-secondary); text-align: left; text-transform: none; letter-spacing: 0;
    white-space: normal; cursor: default;
}
.vinfo-right .vinfo-tip { left: auto; right: -8px; }
.vinfo:hover .vinfo-tip, .vinfo:focus .vinfo-tip, .vinfo.open .vinfo-tip { display: block; }
.vinfo-tip strong { color: var(--text); }

/* ══════════════ wallet shelf: hold & drag to reorder ══════════════ */
.slot { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.slot.drag-src { opacity: .28; filter: saturate(.4); }
.slot.drag-src .cc { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.drag-ghost {
    position: fixed; z-index: 990; margin: 0; pointer-events: none; opacity: .95;
    transform: rotate(2.5deg) scale(1.05); transition: none;
}
.drag-ghost .cc { box-shadow: 0 22px 48px rgba(0,0,0,.6), 0 0 0 2px var(--accent); }
body.vdragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.vdragging .slot { transition: none; }

/* ══════════════ card years ══════════════
   Cards stack vertically; a card's years run left to right as header lines so
   five years of history read at a glance instead of scrolling past five full
   P&Ls. Clicking one opens its detail underneath, full width, where the months
   table has room to be legible. */
.yearstrip {
    display: flex; gap: .6rem; overflow-x: auto; padding: .8rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.yearstrip::-webkit-scrollbar { height: 6px; }
.yearstrip::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
.yearcard {
    flex: 0 0 auto; width: 216px; scroll-snap-align: start; text-align: left;
    display: flex; flex-direction: column; gap: .4rem; padding: .7rem .75rem;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface-2); cursor: pointer; font: inherit; color: inherit;
    transition: border-color .15s, background .15s;
}
.yearcard:hover { border-color: var(--border-hover); }
.yearcard.now { border-color: rgba(96,165,250,.35); }
.yearcard.on { border-color: var(--accent); background: var(--surface-3); }
.yearcard-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.yearcard-n { font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
              text-transform: uppercase; color: var(--text-muted); }
.yearcard-label { font-size: 13px; font-weight: 800; line-height: 1.2; }
.yearcard-nums { display: flex; gap: .7rem; }
.yearcard-nums span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Same weight as .vstat-label — these micro-labels are the same idea and
   should not read heavier than the ones on every other tile in the app. */
.yearcard-nums i { font-style: normal; font-size: 9px; font-weight: 600;
                   letter-spacing: .05em; text-transform: uppercase;
                   color: var(--text-muted); }
.yearcard-nums span > b, .yearcard-nums span { font-size: 11.5px; font-weight: 700;
                                               font-family: 'JetBrains Mono', ui-monospace, monospace; }
.yearcard-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem;
    font-size: 9.5px; color: var(--text-muted); border-top: 1px solid var(--border);
    padding-top: .4rem; margin-top: .1rem;
}
.yearcard-chev { font-size: 11px; flex-shrink: 0; }
.yearopen { border-top: 1px solid var(--border); }
.yearopen .yearblock { border-top: none; }

.yearblock { border-top: 1px solid var(--border); padding: 1rem; }
.yearblock:first-of-type { border-top: none; }
.yearblock + .yearblock { background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 60%); }
.yearblock .vled td, .yearblock .vled th { white-space: nowrap; }
.yearblock .vpanel-title .cc { flex-shrink: 0; }

/* ── Ledger: card filter chips + month totals + month picker ── */
.ledchips {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: .55rem .8rem; border-bottom: 1px solid var(--border);
}
.ledchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 100px; cursor: pointer;
    font-size: 11px; font-weight: 600; font-family: inherit;
    color: var(--text-secondary); background: var(--surface-2);
    border: 1px solid var(--border-hover);
}
.ledchip:hover { border-color: var(--accent); color: var(--text); }
.ledchip.on {
    background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.ledchip-dot {
    width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0;
    display: inline-block;
}
.ledtotals {
    display: flex; flex-wrap: wrap; gap: 1.1rem;
    padding: .55rem .9rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.ledtotals span { display: flex; flex-direction: column; gap: 1px; }
.ledtotals i {
    font-style: normal; font-size: 9px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.ledtotals b {
    font-size: 11.5px; font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.vinp-month {
    width: auto; min-width: 128px; padding: 4px 8px; min-height: 30px;
    font-size: 11.5px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}