/* ============================================================
   App shell — sidebar-driven, dark by default. Light theme
   (toggle in sidebar footer) reuses the marketing site's cream palette.
   ============================================================
   deploy-test-marker-1 */

@font-face {
    font-family: 'Heading Now';
    src: url('/HN95.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* surfaces, darkest to lightest */
    --bg:        #0b0d10;
    --surface:   #121519;
    --surface-2: #171b21;
    --raised:    #1d222a;
    --line:      #262c35;
    --line-soft: #1e232b;

    /* text — minimum contrast is ~7:1, nothing pale */
    --text:      #eef1f5;
    --text-2:    #a8b2c0;
    --text-3:    #7d8795;

    --brand:     #f26522;
    --brand-dim: rgba(242,101,34,0.12);
    --teal:      #00a3ad;
    --teal-dim:  rgba(0,163,173,0.12);
    --up:        #22c87f;
    --down:      #ff5d52;
    --violet:    #7b61ff;

    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

    --sidebar: 232px;
    --r: 10px;

    --topbar-bg: rgba(11,13,16,0.85);
}

/* ---------- Light theme — the marketing site's cream palette ---------- */
:root[data-theme="light"] {
    --bg:        #f4f1e8;
    --surface:   #ece9df;
    --surface-2: #e3dfd1;
    --raised:    #d9d4c3;
    --line:      rgba(44,44,44,0.14);
    --line-soft: rgba(44,44,44,0.08);

    --text:      #2c2c2c;
    --text-2:    #5f5a50;
    --text-3:    #87816f;

    --brand:     #f26522;
    --brand-dim: rgba(242,101,34,0.1);
    --teal:      #00a3ad;
    --teal-dim:  rgba(0,163,173,0.1);
    --up:        #178f56;
    --down:      #d8402f;
    --violet:    #6a4fe0;

    --topbar-bg: rgba(244,241,232,0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    display: flex;
    min-height: 100vh;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
}

.sb-brand {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.15rem 1.1rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.sb-logo { height: 19px; width: auto; display: block; }

.sb-scroll { flex: 1; overflow-y: auto; padding: 0.9rem 0.6rem; }

.sb-group { margin-bottom: 1.35rem; }
.sb-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-3);
    padding: 0 0.5rem; margin-bottom: 0.45rem;
}

.sb-item {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.52rem 0.5rem; border-radius: 7px;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    text-decoration: none; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sb-item:hover { background: var(--surface-2); color: var(--text); }
.sb-item.current { background: var(--brand-dim); color: var(--brand); }
.sb-item.current .ic { opacity: 1; }
.ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.75; }
.ic svg { width: 100%; height: 100%; display: block; }
.sb-tag {
    margin-left: auto; font-size: 9px; font-weight: 700;
    letter-spacing: 0.06em; padding: 0.1rem 0.32rem; border-radius: 4px;
    background: var(--violet); color: #fff;
}

.sb-foot { padding: 0.8rem; border-top: 1px solid var(--line); }
.net {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 11.5px; color: var(--text-2);
    padding: 0.45rem 0.5rem; margin-bottom: 0.55rem;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: 0 0 7px; }

.theme-toggle {
    display: flex; width: 100%; margin-top: 0.55rem;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 3px; gap: 2px; cursor: pointer;
}
.tt-opt {
    flex: 1; text-align: center; padding: 0.35rem 0; border-radius: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--text-3);
    transition: all 0.12s;
}
.theme-toggle .tt-opt[data-theme-opt="dark"] { background: var(--raised); color: var(--text); }
.theme-toggle.is-light .tt-opt[data-theme-opt="dark"] { background: none; color: var(--text-3); }
.theme-toggle.is-light .tt-opt[data-theme-opt="light"] { background: var(--raised); color: var(--text); }

/* ---------- Main ---------- */
.main { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 58px; flex: 0 0 58px;
    border-bottom: 1px solid var(--line);
    background: var(--topbar-bg);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 40;
}
.topbar-wrap {
    max-width: 1280px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
}
.burger {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 7px; padding: 0.35rem 0.5rem; cursor: pointer;
}
.crumb { font-size: 13px; color: var(--text-3); display: flex; align-items: center; }
.crumb b { color: var(--text); font-weight: 600; }
.crumb.page-title b {
    font-family: 'Heading Now', var(--sans); font-weight: 700;
    font-size: 21px; letter-spacing: -0.015em; line-height: 1;
}
.topbar .spacer { flex: 1; }

.content { padding: 1.75rem 1.5rem 4rem; flex: 1; }
.wrap { max-width: 1280px; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    font-size: 13px; font-weight: 600; padding: 0.6rem 1.05rem;
    border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text);
    cursor: pointer; text-decoration: none; transition: all 0.13s;
    white-space: nowrap;
}
.btn:hover { background: var(--raised); border-color: #30374250; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #ff7736; border-color: #ff7736; }
.btn.ghost { background: none; }
.btn.wide { width: 100%; }
.btn.lg { padding: 0.8rem 1.3rem; font-size: 14px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Page header ---------- */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ph h1 {
    font-family: 'Heading Now', var(--sans); font-weight: 700;
    font-size: 27px; letter-spacing: -0.015em; line-height: 1.15;
}
.ph p { color: var(--text-2); font-size: 14px; margin-top: 0.3rem; max-width: 60ch; }

/* ---------- Stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.5rem; }
.scard {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1rem 1.1rem;
}
.scard .k { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.scard .v {
    font-family: 'Heading Now', var(--sans); font-weight: 700;
    font-size: 25px; margin-top: 0.3rem; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.scard .d { font-size: 12px; margin-top: 0.15rem; color: var(--text-3); }
.scard.accent .v { color: var(--brand); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.segs { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.seg {
    background: none; border: none; border-radius: 6px;
    padding: 0.4rem 0.8rem; font-size: 12.5px; font-weight: 600;
    color: var(--text-3); cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.seg:hover { color: var(--text); }
.seg.current { background: var(--raised); color: var(--text); }

/* ---------- Table ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.panel-head { padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel-title { font-size: 14px; font-weight: 600; }
.t-scroll { overflow-x: auto; }

table.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dt th {
    text-align: left; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
    padding: 0.7rem 1rem; border-bottom: 1px solid var(--line);
    white-space: nowrap; background: var(--surface-2);
    position: sticky; top: 0;
}
table.dt th.sortable { cursor: pointer; user-select: none; }
table.dt th.sortable:hover { color: var(--text); }
table.dt th.on { color: var(--brand); }
table.dt th.on::after { content: ' ↓'; }
table.dt th.on.asc::after { content: ' ↑'; }
table.dt td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.dt tbody tr { cursor: pointer; transition: background 0.1s; }
table.dt tbody tr:hover { background: var(--surface-2); }
table.dt tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }

.who { display: flex; align-items: center; gap: 0.7rem; }
.av {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
    color: #fff; background: var(--raised); background-size: cover; background-position: center;
}
.who-n { font-weight: 600; font-size: 13.5px; }
.who-s { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-3); }
.strong { font-weight: 600; }

.tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 11px; font-weight: 600; padding: 0.2rem 0.5rem;
    border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
.tag.pay { color: var(--up); border-color: rgba(34,200,127,0.3); background: rgba(34,200,127,0.08); }
.tag.buy { color: var(--violet); border-color: rgba(123,97,255,0.3); background: rgba(123,97,255,0.08); }
.tag.non { color: var(--text-3); }

.spark svg { display: block; width: 72px; height: 26px; }

.empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-3); font-size: 13.5px; }
.empty strong { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 0.3rem; font-weight: 600; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1.5rem; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.35rem; }
.card + .card { margin-top: 1rem; }
.card-h { font-size: 15px; font-weight: 600; margin-bottom: 0.25rem; }
.card-sub { font-size: 13px; color: var(--text-2); margin-bottom: 1.15rem; }

.f { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; }
.f:last-child { margin-bottom: 0; }
.f label, .f .lab {
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
    display: flex; justify-content: space-between; align-items: center;
}
.f .lab .v { color: var(--brand); font-variant-numeric: tabular-nums; }
.f input, .f textarea, .f select {
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 0.65rem 0.8rem; font-size: 14px; width: 100%; resize: vertical;
    transition: border-color 0.12s;
}
.f input:focus, .f textarea:focus { outline: none; border-color: var(--brand); }
.f input::placeholder, .f textarea::placeholder { color: var(--text-3); }
.hint { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.tokenomics-row { display: flex; align-items: flex-end; gap: 1.25rem; margin-bottom: 1.15rem; }
.tokenomics-row .f { margin-bottom: 0; }
.alloc-col { flex: 1 1 auto; min-width: 0; }
.vest-col { flex: 0 0 180px; }

.fee-row { display: flex; gap: 1.25rem; align-items: stretch; flex-wrap: wrap; }
.fee-row-l { flex: 1 1 260px; min-width: 260px; display: flex; flex-direction: column; }
.fee-row-l .f { width: auto !important; }
.fee-row-l .f:last-child { margin-bottom: 0; }

.fee-card {
    flex: 0 0 460px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); padding: 1rem 1.15rem;
}
.fee-card-h { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 0.9rem; }

.fee-pie-wrap { display: flex; align-items: center; gap: 1.4rem; }
.fee-pie { width: 184px; height: 184px; flex: 0 0 184px; }
.fee-pie-ring { stroke: var(--raised); }
.fee-pie-seg { stroke-linecap: butt; }
.fee-pie-center-v { fill: var(--text); font-size: 15px; font-weight: 700; font-family: var(--sans); }
.fee-pie-center-l { fill: var(--text-3); font-size: 8px; font-family: var(--sans); }

.fee-legend { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; min-width: 0; }
.fee-legend-row { display: flex; align-items: baseline; gap: 0.5rem; font-size: 12.5px; }
.fee-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; align-self: center; }
.fee-legend-k { color: var(--text-2); flex: 1; }
.fee-legend-pct { color: var(--text-3); font-variant-numeric: tabular-nums; }
.fee-legend-v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

input[type=range] { padding: 0; accent-color: var(--brand); height: 22px; }

.sw { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; }
.sw:hover { border-color: #303742; }
.sw input { margin-top: 0.15rem; accent-color: var(--brand); width: 16px; height: 16px; flex: 0 0 16px; }
.sw-t { font-size: 13.5px; font-weight: 600; }
.sw-d { font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: 0.1rem; }

.cliff-sw {
    border: none; background: none; padding: 0; align-items: center;
    flex: 0 0 auto; white-space: nowrap; margin-bottom: 0.65rem;
}
.cliff-sw:hover { border-color: transparent; }

.tags-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.tags-col { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.img-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; }

.upload-sq {
    width: 68px; height: 68px; border-radius: 10px;
    background: var(--teal) center/cover no-repeat; display: grid; place-items: center;
    cursor: pointer; transition: filter 0.13s; color: #fff;
}
.upload-sq:hover, .upload-sq.over { filter: brightness(1.1); }
.upload-sq svg { width: 26px; height: 26px; }
.upload-sq.has-img { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }

details.adv { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-top: 1rem; }
details.adv > summary {
    padding: 1rem 1.35rem; cursor: pointer; font-size: 14px; font-weight: 600;
    list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: '▸'; color: var(--brand); transition: transform 0.15s; }
details.adv[open] > summary::before { transform: rotate(90deg); }
details.adv > summary span { color: var(--text-3); font-weight: 400; font-size: 13px; }
.adv-body { padding: 0 1.35rem 1.35rem; }

/* ---------- Summary rail ---------- */
.rail { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 1rem; }

.prev { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prev-hd { height: 56px; background: var(--raised); }
.prev-bd { padding: 0 1.15rem 1.15rem; margin-top: -24px; }
.prev-av {
    width: 52px; height: 52px; border-radius: 11px; border: 3px solid var(--surface);
    background: var(--raised); display: grid; place-items: center;
    font-weight: 700; font-size: 17px; background-size: cover; background-position: center;
}
.prev-n { font-size: 16px; font-weight: 700; margin-top: 0.55rem; }
.prev-s { font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.prev-d { font-size: 13px; color: var(--text-2); margin-top: 0.6rem; line-height: 1.5; overflow-wrap: anywhere; min-height: 7.5em; }

.rows { display: flex; flex-direction: column; }
.r { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 13px; }
.r .k { color: var(--text-3); }
.r .v { font-variant-numeric: tabular-nums; text-align: right; }
.r.tot { border-top: 1px solid var(--line); margin-top: 0.35rem; padding-top: 0.65rem; font-weight: 600; }
.r.sub { font-size: 12px; padding-left: 0.75rem; }
.r.sub .k { color: var(--text-3); }

.note { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.note b { display: block; color: var(--text); margin-bottom: 0.4rem; font-size: 13px; }
.note ol { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }

/* ---------- Token detail ---------- */
.thead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.tid { display: flex; gap: 1rem; align-items: center; }
.tid .av { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; font-size: 18px; }
.tid h1 { font-family: 'Heading Now', var(--sans); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.tid .sub { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.3rem; flex-wrap: wrap; }
.tprice { text-align: right; }
.tprice .p { font-family: 'Heading Now', var(--sans); font-weight: 700; font-size: 27px; font-variant-numeric: tabular-nums; }
.tprice .c { font-size: 13.5px; font-weight: 600; }

.tgrid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 1.5rem; align-items: start; }
.chart-wrap { padding: 1rem 1.15rem 0.5rem; }
.chart { height: 260px; }
.chart svg { width: 100%; height: 100%; display: block; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); padding: 0 0.5rem; }
.tab {
    background: none; border: none; padding: 0.75rem 0.9rem; font-size: 13.5px;
    font-weight: 600; color: var(--text-3); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.12s;
}
.tab:hover { color: var(--text); }
.tab.current { color: var(--brand); border-bottom-color: var(--brand); }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 0.75rem 1.25rem; font-size: 13.5px; padding: 1.25rem; }
.kv dt { color: var(--text-3); font-weight: 500; }
.kv dd { overflow-wrap: anywhere; }
.lnk { color: var(--brand); text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* trade panel */
.trade .seg { flex: 1; }
.amt { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding-right: 0.8rem; }
.amt input { border: none; background: none; flex: 1; min-width: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.amt input:focus { outline: none; }
.amt .cur { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.4rem; margin-top: 0.5rem; }
.quick .seg { border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .form-grid, .tgrid { grid-template-columns: 1fr; }
    .rail { position: static; }
    .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.2s; }
    .sidebar.open { transform: none; }
    .main { margin-left: 0; }
    .burger { display: block; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 45; }
}
@media (max-width: 640px) {
    .content { padding: 1.25rem 1rem 3rem; }
    .stats { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .scard .v { font-size: 21px; }
    .two { grid-template-columns: 1fr; }
    .hide-sm { display: none; }
}

/* ---------- Tag picker ---------- */
.tagpick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tagb {
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem 0.7rem; font-size: 12.5px; font-weight: 500;
    color: var(--text-2); cursor: pointer; transition: all 0.12s;
}
.tagb:hover { border-color: #39414e; color: var(--text); }
.tagb.on { background: var(--brand-dim); border-color: var(--brand); color: var(--brand); }
.tagb.off { opacity: 0.35; cursor: not-allowed; }
.prev-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; }

/* ---------- Verify row ---------- */
.agent-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.agent-addr-col { flex: 0 0 408px; }
.agent-row .verify { flex: 1 1 320px; margin-bottom: 1.15rem; }

.verify {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); flex-wrap: wrap;
}
.verify.done { border-color: rgba(34,200,127,0.4); background: rgba(34,200,127,0.05); }
.vf-l { flex: 1; min-width: 210px; }
.vf-t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.vf-d { font-size: 12.5px; color: var(--text-3); line-height: 1.45; display: block; margin-top: 0.15rem; }
.tag.ok { color: var(--up); border-color: rgba(34,200,127,0.35); background: rgba(34,200,127,0.1); }

/* ---------- Select ---------- */
.f select {
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 0.65rem 0.8rem; font-size: 14px; width: 100%; cursor: pointer;
}
.f select:focus { outline: none; border-color: var(--brand); }

/* ---------- Range scale ---------- */
.scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); margin-top: -0.15rem; }

/* ---------- Supply bar ---------- */
.bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg); }
.bar-pool { background: var(--brand); }
.bar-you { background: var(--teal); }
.sq { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 0.45rem; }
.sq.pool { background: var(--brand); }
.sq.you { background: var(--teal); }

/* ---------- Fixed-parameters note ---------- */
.submit-row { display: flex; align-items: stretch; gap: 1rem; margin-top: 1rem; }
.fixed-note {
    flex: 0 0 33%; min-width: 0;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); padding: 0.85rem 1rem;
}
.submit-col { flex: 0 0 67%; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; }
.fixed-note b { font-size: 13px; display: block; margin-bottom: 0.6rem; }
.fx { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; font-size: 13px; }
.fx span:nth-child(odd) { color: var(--text-3); }
.fx span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Links row ---------- */
.links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.lk {
    font-size: 12.5px; font-weight: 500; color: var(--text-2); text-decoration: none;
    border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.55rem;
    background: var(--surface-2); transition: all 0.12s;
}
.lk:hover { color: var(--brand); border-color: var(--brand); }
.tag.warn { color: #ffb020; border-color: rgba(255,176,32,0.35); background: rgba(255,176,32,0.09); }

/* ---------- Allocation disclosure ---------- */
.alloc-wrap { padding: 1.35rem; }
.alloc-lede { color: var(--text-2); max-width: 72ch; margin-bottom: 1.25rem; }
.alloc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.ab { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 1rem; }
.ab-k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.ab-v {
    font-family: 'Heading Now', var(--sans); font-weight: 700;
    font-size: 24px; margin-top: 0.3rem; font-variant-numeric: tabular-nums;
}
.ab-d { font-size: 12px; color: var(--text-3); margin-top: 0.2rem; }

.flag { margin-top: 1.25rem; border-radius: 9px; padding: 0.9rem 1.1rem; font-size: 13px; }
.flag b { display: block; margin-bottom: 0.3rem; font-size: 13.5px; }
.flag ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.flag.bad { background: rgba(255,93,82,0.08); border: 1px solid rgba(255,93,82,0.3); color: #ffb3ad; }
.flag.bad b { color: var(--down); }
.flag.good { background: rgba(34,200,127,0.07); border: 1px solid rgba(34,200,127,0.25); color: var(--text-2); }
.flag.good b { color: var(--up); }

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

.vtick {
    color: var(--up); font-size: 11px; margin-left: 0.3rem;
    font-weight: 700; vertical-align: 1px;
}

/* ---------- Light-theme overrides for hardcoded dark-tuned values ---------- */
:root[data-theme="light"] .btn:hover { border-color: rgba(44,44,44,0.3); }
:root[data-theme="light"] .btn.primary:hover { background: #ff7736; border-color: #ff7736; }
:root[data-theme="light"] .sw:hover { border-color: rgba(44,44,44,0.25); }
:root[data-theme="light"] .tagb:hover { border-color: rgba(44,44,44,0.3); }
:root[data-theme="light"] .tag.warn { color: #a66300; border-color: rgba(166,99,0,0.3); background: rgba(166,99,0,0.08); }
:root[data-theme="light"] .flag.bad { background: rgba(216,64,47,0.08); border-color: rgba(216,64,47,0.3); color: #a12d1f; }