/* Ask Abdul Maison — the app's stylesheet. Tokens mirror the Ask Abdul Maison design system. */
:root {
  --paper: #F5F0E6; --paper-raised: #FCFAF4; --paper-sunken: #ECE5D5; --rule: #DDD4C1; --rule-strong: #A89C84;
  --ink: #121820; --ink-muted: #5D6470; --ink-faint: #858C98;
  --gold: #8F6F2F; --gold-line: #C8A95F; --gold-soft: #F0E6CC;
  --midnight: #0F1A2C; --midnight-raised: #16233A; --on-midnight: #F4ECDA; --on-midnight-muted: #BFB49A; --gold-on-midnight: #E3C77A;
  --positive: #276A4A; --positive-soft: #E1EEE5; --caution: #8A5A12; --caution-soft: #F6EBD3; --negative: #9B2F2A; --negative-soft: #F6E1DF;
  --shadow-float: 0 24px 60px -24px #0F1A2C66; --focus-ring: 0 0 0 2px #F5F0E6, 0 0 0 4px #C8A95F;
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px;
  --display: "Lora", Georgia, "Times New Roman", serif; --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* legacy aliases used across the app */
  --bg: var(--paper); --surface: var(--paper-raised); --surface-2: var(--paper-sunken); --surface-3: var(--paper-sunken); --line: var(--rule); --line-2: var(--rule-strong);
  --muted: var(--ink-muted); --ink-2: var(--ink); --gold-2: var(--gold-line); --gold-3: var(--gold-on-midnight); --navy: var(--midnight); --navy-2: var(--midnight-raised); --navy-ink: var(--on-midnight);
  --good: var(--positive); --good-bg: var(--positive-soft); --warn: var(--caution); --warn-bg: var(--caution-soft); --bad: var(--negative); --bad-bg: var(--negative-soft); --info-bg: var(--paper-sunken);
  --r: var(--r-md); --r-s: var(--r-sm); --shadow: none; --shadow-lg: var(--shadow-float); --font: var(--sans);
  --fs-xs: 12px; --fs-s: 13px; --fs: 15px; --fs-l: 17px; --fs-xl: 24px; --fs-2xl: 34px; --fs-3xl: 52px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0B1119; --paper-raised: #121A25; --paper-sunken: #070C12; --rule: #1F2A38; --rule-strong: #4C586A;
  --ink: #EDE6D6; --ink-muted: #A4ABB7; --ink-faint: #7F8793; --gold: #D6B86A; --gold-line: #B8984E; --gold-soft: #2A2414;
  --positive: #6FC093; --positive-soft: #13302A; --caution: #E9B85C; --caution-soft: #33270F; --negative: #F0918A; --negative-soft: #3A1A18;
  --shadow-float: 0 24px 60px -24px #000000CC; --focus-ring: 0 0 0 2px #0B1119, 0 0 0 4px #B8984E;
} }
:root[data-theme="dark"] {
  --paper: #0B1119; --paper-raised: #121A25; --paper-sunken: #070C12; --rule: #1F2A38; --rule-strong: #4C586A;
  --ink: #EDE6D6; --ink-muted: #A4ABB7; --ink-faint: #7F8793; --gold: #D6B86A; --gold-line: #B8984E; --gold-soft: #2A2414;
  --positive: #6FC093; --positive-soft: #13302A; --caution: #E9B85C; --caution-soft: #33270F; --negative: #F0918A; --negative-soft: #3A1A18;
  --shadow-float: 0 24px 60px -24px #000000CC; --focus-ring: 0 0 0 2px #0B1119, 0 0 0 4px #B8984E;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.53; padding-bottom: calc(72px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; }
a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; margin: 0; line-height: 1.12; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; }
.num, .price, .kpi .v, .verdict .big, .verdict .pair .v, .tiers td:last-child, .deal .pct, .deal .price, .lcard .price, .gcard .cap b, .strip figcaption b { font-family: var(--display); font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--ink-muted); } .small { font-size: 13px; } .xs { font-size: 12px; } .mono { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.eyebrow, label.field, .kpi .k, table.list th, .nav a span, .lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.ornament { position: relative; height: 1px; background: var(--rule); margin: 10px 0 14px; }
.ornament::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; background: var(--gold-line); transform: translateX(-50%) rotate(45deg); }

/* ---- header / nav */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; padding-top: calc(12px + env(safe-area-inset-top)); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } .wordmark .ask { font-weight: 500; }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav a.active { color: var(--gold); border-bottom-color: var(--gold-line); }
.nav a.more { display: none; }
.badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: var(--negative); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; font-style: normal; letter-spacing: 0; }
body.member .nav a.owner, body.member .only-owner { display: none; }
@media (max-width: 720px) {
  .top { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper-raised); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; border-top: 1px solid var(--rule); z-index: 30; }
  .nav a { flex-direction: column; gap: 4px; padding: 6px 6px; border-bottom: 0; } .nav a span { font-size: 9.5px; letter-spacing: .12em; }
  .nav a svg { width: 22px; height: 22px; } .nav a.active { color: var(--gold); } .nav a.active svg { stroke: var(--gold); }
  .nav a.phone-hide { display: none; } .nav a.more { display: flex; } .badge { top: 0; right: 4px; }
}
@media (min-width: 721px) { body { padding-bottom: 56px; } }
@media (min-width: 721px) and (max-width: 1060px) { .nav a span { display: none; } .nav a { padding: 8px 10px; } .nav a svg { width: 20px; height: 20px; } .badge { right: -2px; } }

/* ---- layout */
.app { max-width: 1080px; margin: 0 auto; padding: 16px 16px; }
@media (min-width: 721px) { .app { padding: 24px; } }
.card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 20px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grow { flex: 1 1 auto; } .right { margin-left: auto; }
.grid { display: grid; gap: 12px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 720px) { .g4, .g5 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g2 { grid-template-columns: 1fr; } }
.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
details.sec { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); }
details.sec > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; font-weight: 600; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::after { content: "+"; margin-left: auto; font-family: var(--sans); font-size: 18px; color: var(--gold); font-weight: 300; }
details.sec[open] > summary::after { content: "−"; }
details.sec > .body { padding: 0 20px 20px; }
details.sec > summary .tag { font-family: var(--sans); }

/* ---- controls */
.input, select.input, textarea.input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--paper-raised); outline: none; min-height: 42px; }
.input:focus { border-color: var(--gold-line); box-shadow: var(--focus-ring); }
label.field { display: block; color: var(--ink-muted); }
label.field > .input, label.field > select { margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-xs); border: 1px solid var(--rule-strong); background: var(--paper-raised); cursor: pointer; font-weight: 500; min-height: 42px; letter-spacing: .01em; }
.btn:hover { border-color: var(--ink); } .btn.primary { background: var(--midnight); color: var(--on-midnight); border-color: var(--midnight); } .btn.gold { background: var(--midnight); color: var(--gold-on-midnight); border-color: var(--midnight); }
.btn.danger { color: var(--negative); border-color: var(--rule); } .btn.sm { padding: 6px 12px; min-height: 32px; font-size: 13px; } .btn.ghost { background: transparent; border-color: transparent; color: var(--gold); } .btn[disabled] { opacity: .5; cursor: default; }
.seg { display: inline-flex; background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--r-xs); padding: 2px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 1px; cursor: pointer; font-weight: 500; color: var(--ink-muted); min-height: 36px; white-space: nowrap; }
.seg button.on { background: var(--midnight); color: var(--on-midnight); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--paper-sunken); font-size: 13px; cursor: pointer; }
.chip.on { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-line); } .chip.static { cursor: default; } .chip.on .tag { background: var(--paper-raised); } .chip.on .muted { color: var(--gold); }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--paper-sunken); border: 1px solid var(--rule); white-space: nowrap; }
.tag.good { background: var(--positive-soft); color: var(--positive); border-color: transparent; } .tag.warn { background: var(--caution-soft); color: var(--caution); border-color: transparent; } .tag.bad { background: var(--negative-soft); color: var(--negative); border-color: transparent; } .tag.info { background: var(--gold-soft); color: var(--gold); border-color: transparent; } .tag.gold { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .toggle input { width: 18px; height: 18px; accent-color: var(--gold); }
.notice { padding: 12px 16px; border-radius: var(--r-sm); background: var(--paper-sunken); font-size: 14px; border-left: 2px solid var(--gold-line); } .notice.warn { color: var(--caution); border-left-color: var(--caution); } .notice.bad { color: var(--negative); border-left-color: var(--negative); } .notice.good { color: var(--positive); border-left-color: var(--positive); }
.empty { text-align: center; padding: 40px 12px; color: var(--ink-muted); } .empty h3 { color: var(--ink); margin-bottom: 6px; }
.skeleton { background: linear-gradient(90deg, var(--paper-sunken) 25%, var(--paper-raised) 37%, var(--paper-sunken) 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; border-radius: var(--r-sm); min-height: 18px; }
@keyframes sk { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--paper-sunken); padding: 2px 6px; border-radius: var(--r-xs); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .rates label { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rates input { width: 100%; }
.login { max-width: 380px; margin: 60px auto; text-align: center; } .login img { width: 84px; height: 84px; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--midnight); color: var(--on-midnight); padding: 10px 18px; border-radius: var(--r-xs); box-shadow: var(--shadow-float); z-index: 60; font-weight: 500; max-width: 92vw; }
@media (min-width: 721px) { .toast { bottom: 24px; } }

/* ---- search */
.hero { padding: 24px 0 12px; text-align: center; } .hero h1 { font-size: 36px; font-weight: 600; } .hero p { margin: 6px auto 0; color: var(--ink-muted); max-width: 56ch; }
@media (min-width: 721px) { .hero h1 { font-size: 44px; } }
.searchbox { position: relative; max-width: 760px; margin: 0 auto; }
.searchbox .input { padding: 14px 54px 14px 20px; font-size: 20px; border-radius: var(--r-sm); font-family: var(--display); font-weight: 600; letter-spacing: .02em; min-height: 56px; border-color: var(--rule-strong); }
.searchbox .go { position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px; border-radius: var(--r-xs); border: 0; background: var(--midnight); color: var(--on-midnight); cursor: pointer; display: grid; place-items: center; }
.searchbox .go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-float); z-index: 20; overflow: hidden; }
.sugg button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; } .sugg button:hover { background: var(--paper-sunken); } .sugg b { font-family: var(--display); font-size: 17px; }
.controls { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.controls .input { width: auto; min-height: 38px; padding: 7px 10px; font-size: 14px; }
.filters { width: 100%; } .filters > summary { list-style: none; cursor: pointer; text-align: center; color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; padding: 6px; } .filters > summary::-webkit-details-marker { display: none; }
.filters .body { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.sticky { position: sticky; top: calc(54px + env(safe-area-inset-top)); z-index: 10; background: var(--midnight); color: var(--on-midnight); border-radius: var(--r-md); padding: 10px 16px; display: none; align-items: center; gap: 14px; box-shadow: var(--shadow-float); }
.sticky .num { font-size: 22px; font-weight: 700; } .sticky .k { font-size: 10px; color: var(--on-midnight-muted); letter-spacing: .14em; text-transform: uppercase; }
.sticky.show { display: flex; }

/* ---- verdict + kpis */
.verdict { background: var(--midnight); color: var(--on-midnight); border-color: var(--midnight); position: relative; overflow: hidden; padding: 24px; }
.verdict::before { content: ""; position: absolute; left: 24px; right: 24px; top: 56px; height: 1px; background: var(--gold-on-midnight); opacity: .25; }
.verdict .eyebrow { color: var(--gold-on-midnight); padding-right: 140px; }
.verdict .big { font-size: 52px; font-weight: 700; line-height: 1; margin: 22px 0 8px; letter-spacing: -.02em; }
.verdict .sub { color: var(--on-midnight-muted); max-width: 62ch; }
.verdict .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.verdict .pair > div { background: var(--midnight-raised); border-radius: var(--r-sm); padding: 12px 14px; } .verdict .pair .v { font-size: 24px; font-weight: 600; } .verdict .pair .k { font-size: 10.5px; color: var(--on-midnight-muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.verdict .actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.verdict .btn { background: transparent; border-color: var(--on-midnight-muted); color: var(--on-midnight); min-height: 36px; padding: 6px 14px; }
.conf { position: absolute; top: 20px; right: 20px; }
.kpi { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; } .kpi .k { color: var(--ink-muted); } .kpi .v { font-size: 26px; font-weight: 600; margin-top: 4px; } .kpi .s { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.tiers { width: 100%; border-collapse: collapse; } .tiers td { padding: 10px 4px; border-top: 1px solid var(--rule); } .tiers tr:first-child td { border-top: 0; } .tiers td:last-child { text-align: right; font-size: 19px; font-weight: 600; } .tiers tr.rec td { color: var(--gold); }
.dist { width: 100%; height: 86px; display: block; } .chart { width: 100%; height: 170px; display: block; }
.flag { font-size: 16px; }

/* ---- listings */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
table.list th { text-align: left; color: var(--ink-muted); padding: 10px 6px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; cursor: pointer; user-select: none; }
table.list td { padding: 10px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; } table.list tr.off td { opacity: .5; } table.list tr.lowest td:first-child { box-shadow: inset 2px 0 0 var(--gold-line); }
table.list .price { font-size: 17px; font-weight: 600; white-space: nowrap; } table.list .msg { white-space: pre-wrap; word-break: break-word; max-width: 520px; color: var(--ink-muted); font-size: 12.5px; }
details.msg summary { cursor: pointer; color: var(--gold); font-size: 12px; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); display: block; margin-bottom: 4px; cursor: pointer; background: var(--paper-sunken); }
.seller-link { cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
.cards { display: grid; gap: 10px; }
.lcard { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px; }
.lcard.off { opacity: .55; } .lcard.lowest { border-color: var(--gold-line); }
.lcard .ph { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-sunken); display: block; } .lcard .ph.none { display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.lcard .price { font-size: 21px; font-weight: 700; line-height: 1.1; } .lcard .meta { font-size: 13px; color: var(--ink-muted); } .lcard .ref { font-weight: 600; }
.lcard .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lcard .text { grid-column: 1 / -1; white-space: pre-wrap; color: var(--ink-muted); font-size: 12.5px; margin-top: 4px; border-top: 1px solid var(--rule); padding-top: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gcard { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-sunken); aspect-ratio: 1; cursor: pointer; border: 1px solid var(--rule); }
.gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(15,26,44,.9)); color: var(--on-midnight); font-size: 12px; }
.gcard .cap b { font-size: 17px; display: block; }
.strip { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 4px; }
.strip figure { margin: 0; flex: 0 0 auto; width: 132px; cursor: pointer; } .strip img { width: 132px; height: 132px; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-sunken); display: block; } .strip figcaption { display: flex; flex-direction: column; margin-top: 6px; font-size: 13px; } .strip figcaption b { font-size: 17px; }
@media (min-width: 721px) { .cards.auto { display: none; } .table-wrap.auto { display: block; } }
@media (max-width: 720px) { .table-wrap.auto { display: none; } .cards.auto { display: grid; } }

/* ---- deals */
.deal { display: grid; grid-template-columns: 96px 1fr; gap: 14px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px; }
.deal img, .deal .noph { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-sunken); display: block; cursor: pointer; }
.deal .noph { display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.deal .pct { font-size: 24px; font-weight: 700; color: var(--positive); } .deal .price { font-size: 22px; font-weight: 700; }
.deal .ref { font-weight: 600; } .deal .meta { color: var(--ink-muted); font-size: 13px; }
.deal .foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
@media (min-width: 721px) { .deals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---- home */
.greeting { padding: 28px 0 10px; } .greeting h1 { font-size: 36px; } .greeting .date { color: var(--ink-muted); margin-top: 4px; }
@media (min-width: 721px) { .greeting { padding: 40px 0 12px; } .greeting h1 { font-size: 46px; } }
.mover { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.mover:last-child { border-bottom: 0; } .mover .n { font-family: var(--display); font-size: 19px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } .mover .d { font-family: var(--display); font-size: 17px; font-weight: 600; min-width: 64px; text-align: right; }
.mover .d.up { color: var(--negative); } .mover .d.down { color: var(--positive); }

/* ---- alerts */
.notif { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--rule); } .notif .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-line); margin-top: 8px; } .notif.read .dot { background: transparent; border: 1px solid var(--rule-strong); }
.watch { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* ---- sheet / overlay */
.overlay { position: fixed; inset: 0; background: rgba(15,26,44,.6); z-index: 100; display: grid; place-items: end center; padding: 0; }
@media (min-width: 721px) { .overlay { place-items: center; padding: 16px; } }
.sheet { background: var(--paper-raised); border-radius: var(--r-md) var(--r-md) 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; box-shadow: var(--shadow-float); }
@media (min-width: 721px) { .sheet { border-radius: var(--r-md); } }
.sheet img.full { width: 100%; max-height: 56vh; object-fit: contain; border-radius: var(--r-sm); background: #000; }
.sheet .grab { width: 36px; height: 3px; border-radius: 2px; background: var(--rule-strong); margin: 0 auto 12px; }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 6px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-decoration: none; font-size: 16px; text-align: left; cursor: pointer; }
.menu a:last-child, .menu button:last-child { border-bottom: 0; }
.qr { background: #fff; padding: 12px; border-radius: var(--r-sm); display: inline-block; }
@media (max-width: 720px) { .conf { position: static; display: inline-block; margin-bottom: 8px; } .verdict .eyebrow { padding-right: 0; } .verdict .big { font-size: 42px; } .verdict::before { top: 64px; } }

.strip .noph { width: 132px; height: 132px; border-radius: var(--r-sm); background: var(--paper-sunken); display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.btn.wa svg { flex: 0 0 auto; } .btn.wa.primary { background: #1F5E45; border-color: #1F5E45; color: #F4ECDA; }

/* filters sheet (phone) / inline panel (desktop) */
.filters-body { width: 100%; } .filters-body .body { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-raised); }
@media (max-width: 720px) { .filters-body { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper-raised); border-top: 1px solid var(--rule); box-shadow: var(--shadow-float); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 70vh; overflow: auto; } .filters-body .body { border: 0; padding: 0; justify-content: flex-start; } .filters-body .body .input, .filters-body .body .row { width: 100%; } }
.mark.on { color: var(--positive); border-color: var(--positive); }
/* comp sheet */
body.sheetmode .top, body.sheetmode .nav { display: none; } body.sheetmode { padding-bottom: 20px; }
.sheet-page { max-width: 820px; margin: 0 auto; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 28px; }
@media print { body { background: #fff; padding: 0; } .top, .nav, .no-print, #toast { display: none !important; } .sheet-page { border: 0; padding: 0; max-width: none; } .card, .kpi { break-inside: avoid; border-color: #ddd; } }
.rowlink:hover td { background: var(--paper-sunken); }

.sugg button.active { background: var(--paper-sunken); } .sugg .right { margin-left: auto; }
.greeting .searchbox { position: relative; }

.pos { color: var(--negative); } .neg { color: var(--positive); }
.price .tag { margin-left: 6px; font-size: 11px; vertical-align: middle; }

mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.lcard .text a { color: inherit; }

/* ===== redesign: calmer layout ===== */
h1 { font-size: 28px; } h2 { font-size: 21px; } h3 { font-size: 18px; }
.hero h1 { font-size: 32px; } .verdict .big { font-size: 48px; letter-spacing: -.01em; } .kpi .v { font-size: 24px; }
.pagehead { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 4px; } .pagehead h1 { font-size: 28px; }
.cc { display: inline-block; font: 600 10px/1.5 var(--sans); letter-spacing: .06em; border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; color: var(--ink-muted); vertical-align: middle; background: var(--paper-raised); }
.chiprow { display: flex; gap: 8px; align-items: center; margin-top: 10px; overflow-x: auto; overflow-y: visible; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
.chiprow::-webkit-scrollbar { display: none; } .chiprow > * { flex-shrink: 0; }
.chiprow .seg { border-radius: 999px; padding: 2px; } .chiprow .seg button { border-radius: 999px; padding: 6px 14px; min-height: 32px; font-size: 13px; }
.chipsel { appearance: none; -webkit-appearance: none; border: 1px solid var(--rule); background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6470' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; border-radius: 999px; padding: 6px 28px 6px 12px; font: 500 13px var(--sans); color: var(--ink); min-height: 34px; }
.chip { border-radius: 999px; min-height: 34px; } .chip.sm { min-height: 28px; padding: 3px 10px; font-size: 12px; } .chip .count { background: var(--gold); color: var(--paper-raised); border-radius: 999px; font-size: 11px; padding: 0 6px; line-height: 16px; }
.chip svg { width: 14px; height: 14px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-muted); cursor: pointer; padding: 0; }
.iconbtn svg { width: 18px; height: 18px; } .iconbtn:hover { color: var(--ink); border-color: var(--rule-strong); } .iconbtn.sm { width: 32px; height: 32px; border-radius: 8px; border-color: transparent; background: transparent; } .iconbtn.sm svg { width: 16px; height: 16px; } .iconbtn.on { color: var(--positive); }
.verdict .actions { display: flex; gap: 8px; align-items: stretch; } .verdict .actions .grow { flex: 1; } .verdict .actions .iconbtn { background: transparent; border-color: rgba(244,236,218,.25); color: var(--on-midnight); }
.btn.primary { background: var(--midnight); color: var(--on-midnight); border-color: var(--midnight); } .verdict .btn.primary { background: var(--gold-on-midnight); color: var(--midnight); border-color: var(--gold-on-midnight); font-weight: 600; }
.searchbox.compact .input { font-size: 18px; padding: 11px 50px 11px 16px; }
.grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 721px) { .grid.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frow { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; } .flabel { font-size: 11px; color: var(--ink-muted); padding-top: 8px; } @media (max-width: 480px) { .frow { grid-template-columns: 1fr; gap: 4px; } .flabel { padding-top: 0; } }
.frow .chip b { font-weight: 600; }
/* listing cards: photo · three lines · quiet action row */
.lcard { grid-template-columns: 64px 1fr; grid-template-areas: "ph main" "acts acts" "text text"; gap: 10px 12px; align-items: start; }
.lcard .ph { grid-area: ph; width: 64px; height: 64px; } .lcard .main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lcard .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lcard .l1 .price { font-size: 22px; } .lcard .l1 .st { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lcard .l2 { font-size: 13px; color: var(--ink); } .lcard .l3 { font-size: 12px; color: var(--ink-muted); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.msglink { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lcard .acts { grid-area: acts; display: flex; gap: 2px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--paper-sunken); padding-top: 4px; margin-top: -2px; } .lcard .acts .toggle { margin-right: auto; }
.lcard .text { grid-area: text; }
/* deals */
.deal { grid-template-columns: 72px 1fr; grid-template-areas: "ph main" "foot foot"; gap: 10px 12px; } .deal.dismissed { opacity: .4; }
.deal .ph { grid-area: ph; } .deal img, .deal .noph { width: 72px; height: 72px; } .deal .main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deal .l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .deal .l1 .price { font-size: 22px; } .deal .l1 .pct { font-size: 14px; } .deal .l1 .when { margin-left: auto; }
.deal .l2 { font-size: 13px; } .deal .l3 { font-size: 12px; }
.deal .foot { grid-area: foot; display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--paper-sunken); padding-top: 8px; margin-top: 0; } .deal .foot .acts { margin-left: auto; display: flex; gap: 0; align-items: center; }
.deal .foot details.msg { position: relative; } .deal .foot details.msg summary { list-style: none; } .deal .foot details.msg summary::-webkit-details-marker { display: none; } .deal .foot details.msg .msg { position: absolute; right: 0; top: 100%; z-index: 5; width: min(320px, 80vw); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px; white-space: pre-wrap; box-shadow: var(--shadow-float); }
/* horizontal strip of compact cards */
.hstrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; } .hstrip::-webkit-scrollbar { display: none; }
.dropcard { flex: 0 0 160px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.dropcard img, .dropcard .noph { width: 100%; height: 90px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-sunken); display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.dropcard .l1 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; } .dropcard .price { font-size: 19px; } .dropcard .pct { color: var(--positive); font-weight: 600; font-size: 12px; }
.dropcard .l2 { font-size: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropcard .l3 { font-size: 11px; color: var(--ink-faint); } .dropcard .l4 { font-size: 11px; color: var(--ink-muted); display: flex; justify-content: space-between; align-items: center; }
/* filter sheet: dropdown panel on desktop, bottom sheet on phone */
.sheethead { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
@media (min-width: 721px) { .filters-body { position: absolute; left: 0; top: calc(100% - 4px); z-index: 30; width: min(720px, 100%); } .filters-body .body { box-shadow: var(--shadow-float); } .chiprow { overflow: visible; flex-wrap: wrap; } .sheethead { display: none; } }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 12px 4px; border: 0; border-top: 1px solid var(--rule); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sec summary, .section-head h3 { font-size: 18px; }
.dropcard .l4 .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropcard .l4 .msglink { flex-shrink: 0; margin-left: 6px; }
.lcard .l3 .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* live sync meter */
.meter { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; margin-top: 12px; }
.meter .mhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.meter .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.meter.compact .gauges { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gauge { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); transition: background .4s; }
.gauge.bump { animation: gaugeBump .9s ease-out; } @keyframes gaugeBump { 0% { background: var(--gold-soft); } 100% { background: transparent; } }
.ringwrap { position: relative; display: grid; place-items: center; } .ring { display: block; color: var(--gold); transition: all .6s; } .ring circle:last-child { transition: stroke-dashoffset .8s ease; }
.ringnum { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; line-height: 1; } .ringnum b { font-family: var(--display); font-size: 22px; } .meter.compact .ringnum b { font-size: 17px; } .ringnum span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }
.ginfo { min-width: 0; } .gname { font-weight: 600; display: flex; align-items: center; gap: 8px; } .grow { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.spark rect { fill: var(--gold-line); } .gauge.live .spark rect:last-child { fill: var(--gold); }
.gstats { font-size: 12px; color: var(--ink-muted); white-space: nowrap; } .gstats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.gbar { height: 4px; background: var(--paper-sunken); border-radius: 2px; margin-top: 8px; overflow: hidden; } .gbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-line), var(--gold)); transition: width .8s ease; }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); display: inline-block; box-shadow: 0 0 0 0 rgba(39,106,74,.5); animation: livePulse 1.4s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(39,106,74,.5); } 70% { box-shadow: 0 0 0 8px rgba(39,106,74,0); } 100% { box-shadow: 0 0 0 0 rgba(39,106,74,0); } }
.warow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; } .wadot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); } .wadot.on { background: var(--positive); animation: livePulse 1.4s infinite; } .wadot.bad { background: var(--negative); }
.ticker { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: hidden; }
.tick { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 6px; border-radius: 6px; } .tick.in { animation: tickIn .7s ease-out; } @keyframes tickIn { 0% { transform: translateX(-12px); opacity: 0; background: var(--gold-soft); } 100% { transform: none; opacity: 1; background: transparent; } }
.tick .tg { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); width: 36px; } .tick .tp { font-family: var(--display); font-weight: 600; } .tick .tw { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.meter.anylive .mhead h3::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); margin-left: 8px; vertical-align: middle; animation: livePulse 1.4s infinite; }

.liq { color: var(--gold); font-weight: 600; }
.trend { display: flex; flex-direction: column; } .trow { display: grid; grid-template-columns: 1fr auto auto 56px; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; } .trow:last-child { border-bottom: 0; } .trow .price { font-size: 16px; } .trow > span:last-child { text-align: right; font-weight: 600; }
@media (max-width: 480px) { .trow { grid-template-columns: 1fr auto 52px; } .trow > span:nth-child(2) { display: none; } }
.kpi .liq, .kpis .liq { font-size: 20px; line-height: 1.2; }

/* ---- 28 Oct 2026: paste a post, recents and pins, stock, demand, compare, reports; and a polish pass */
.quick { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 2px; max-width: 760px; margin: 0 auto; scrollbar-width: none; } .quick::-webkit-scrollbar { display: none; } .quick > * { flex-shrink: 0; }
.quick .chip b { font-family: var(--display); font-size: 14px; } .quick .chip svg { width: 15px; height: 15px; }
.homex:not(:empty) { margin-top: 16px; }
.verdict.stale .big { color: var(--on-midnight-muted); } .verdict.stale .conf .tag { background: var(--midnight-raised); color: var(--on-midnight-muted); border-color: transparent; }
.verdict .widen { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--on-midnight-muted); font-size: 13px; }
.verdict .widen .chip { background: transparent; color: var(--on-midnight); border-color: var(--on-midnight-muted); min-height: 32px; } .verdict .widen .chip:hover { border-color: var(--gold-on-midnight); color: var(--gold-on-midnight); }
.notice.tiers { display: flex; flex-direction: column; gap: 10px; } .notice.tiers .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.notice.good { border-left-color: var(--positive); background: var(--positive-soft); } .notice.askline b { font-family: var(--display); font-size: 16px; }
.tag.flag { background: var(--caution-soft); color: var(--caution); border-color: transparent; } .deal .l4 { font-size: 12px; color: var(--caution); margin-top: 3px; }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pin { display: block; text-decoration: none; background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px; min-height: 44px; } .pin .k { font-weight: 600; font-size: 14px; } .pin .v { font-family: var(--display); font-size: 22px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; } .pin .s { font-size: 12px; color: var(--ink-muted); }
.pin .up { color: var(--negative); } .pin .down { color: var(--positive); }
.demand .drow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; } .demand .drow:last-child { border-bottom: 0; padding-bottom: 2px; } .demand .n { font-family: var(--display); font-size: 18px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.stockrow .pnl { font-family: var(--display); font-size: 15px; } .stockrow .pnl.up { color: var(--positive); } .stockrow .pnl.down { color: var(--negative); } .stockcard:hover { border-color: var(--rule-strong); }
.cmp table { width: 100%; border-collapse: collapse; } .cmp th, .cmp td { padding: 10px 6px; border-top: 1px solid var(--rule); text-align: right; } .cmp thead th { border-top: 0; font-family: var(--display); font-size: 17px; } .cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--ink-muted); font-size: 13px; } .cmp td.price { font-family: var(--display); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; } .cmp td.lead { background: var(--gold-soft); }
.cmpform .input { max-width: 200px; } .cmpform { flex-wrap: wrap; }
.chip.warnchip { border-color: var(--caution); color: var(--caution); } .chip.sm { padding: 4px 10px; font-size: 12px; }
a.lcard.pick { text-decoration: none; cursor: pointer; grid-template-columns: 1fr; } a.lcard.pick:hover { border-color: var(--gold-line); }
textarea.input { min-height: 120px; resize: vertical; font-family: var(--sans); font-size: 15px; line-height: 1.5; }
code { background: var(--paper-sunken); padding: 1px 6px; border-radius: 3px; font-size: 12px; word-break: break-all; }
.seg.wrap { flex-wrap: wrap; } .seg.wrap button { flex: 1 1 auto; }
.fresh .warn { color: var(--caution); }
/* polish: calmer motion, clearer hover, tighter phone headers */
.btn, .chip, .seg button, .iconbtn, .pin, .lcard, .deal, .kpi { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) { .lcard:hover, .deal:hover, .pin:hover, .dtile:hover img { border-color: var(--rule-strong); } .trow:hover, .mover:hover { background: var(--paper-sunken); } }
.section-head h3 { font-size: 19px; } .section-head .right { text-align: right; } .section-head a { color: var(--gold); }
@media (max-width: 720px) { .greeting { padding: 16px 0 6px; } .greeting h1 { font-size: 27px; } .greeting .date { font-size: 13px; } .hero { padding: 12px 0 6px; } .hero h1 { font-size: 27px; } .hero p { font-size: 14px; } .pagehead h1 { font-size: 26px; } .kpi .v { font-size: 22px; } }

/* ---- 29 Oct 2026: stock photos and posting */
.sphotos { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; padding-bottom: 2px; } .sphotos img { width: 64px; height: 64px; flex: 0 0 auto; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-sunken); cursor: pointer; }
.lcard.stockrow { grid-template-columns: 1fr auto; } .lcard.stockrow .acts { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }

/* ---- 29 Oct 2026: regions, WhatsApp groups */
.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.region { background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 12px; } .region.cheap { border-color: var(--gold-line); background: var(--gold-soft); }
.region .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .region .v { font-family: var(--display); font-size: 21px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } .region .s { font-size: 12px; color: var(--ink-muted); }
.wagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; padding: 4px 0; }

.linkbtn { border: 0; background: transparent; padding: 0; color: var(--gold); cursor: pointer; font: inherit; font-size: inherit; text-decoration: underline; }
.pjline:not(:empty) { margin-top: 4px; }

/* ---- 30 Oct 2026: posting polish, catalogue */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot.ok { background: var(--positive); } .dot.warn { background: var(--caution); }
.macdot { margin-left: auto; border: 1px solid var(--rule); background: var(--paper-raised); border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--ink-muted); }
.pagehead .chip + .chip, .pagehead .macdot + .chip { margin-left: 6px; }
pre.preview { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.45; background: var(--paper-sunken); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0 0; max-height: 220px; overflow: auto; }
h2.sect { font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin: 22px 0 4px; }
@media (max-width: 720px) { .pagehead { flex-wrap: wrap; } .macdot { margin-left: 0; } }

/* ---- 30 Oct 2026: round two/three design changes */
.greeting.compact { padding: 14px 0 6px; } .greeting.compact h1 { font-size: 26px; } .greeting.compact .date { font-size: 13px; } .greeting.compact .date a { color: var(--gold); text-decoration: none; }
@media (max-width: 720px) { .greeting.compact h1 { font-size: 24px; } }
.invstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--midnight); color: var(--on-midnight); border-radius: var(--r-md); padding: 12px 14px; text-decoration: none; }
.invstrip .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-midnight-muted); } .invstrip .v { font-family: var(--display); font-size: 20px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } .invstrip .s { font-size: 11px; color: var(--on-midnight-muted); } .invstrip .v.up { color: #6FC093; } .invstrip .v.down { color: #F0918A; }
.marketline .sentence { font-size: 14px; line-height: 1.55; } .marketline .sentence b { font-family: var(--display); font-size: 15px; } .marketline .pos { color: var(--positive); } .marketline .neg { color: var(--negative); }
.spark { display: flex; align-items: flex-end; gap: 14px; margin-top: 10px; } .spark svg { flex-shrink: 0; max-width: 100%; } .spark .sw { display: inline-block; width: 12px; height: 0; vertical-align: middle; margin-right: 4px; border-top: 2px solid var(--gold); } .spark .sw.dash { border-top-style: dashed; border-top-color: var(--gold-line); }
.howlink { display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 600; text-decoration: none; }
.seg.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 999px; } .seg.tabs button { border-radius: 999px; padding: 9px 4px; font-size: 13px; white-space: nowrap; } .seg.tabs .count { background: var(--gold-on-midnight); color: var(--midnight); border-radius: 999px; font-size: 10px; padding: 0 6px; margin-left: 4px; }
.daygroup + .daygroup { margin-top: 14px; } .daygroup .lbl { margin: 0 0 6px 2px; }
a.notif { text-decoration: none; color: inherit; } a.notif:hover b { color: var(--gold); }
.invcard { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; } .invcard.off { opacity: .6; }
.invtop { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; } .invph { position: relative; min-height: 132px; background: var(--paper-sunken); } .invph img { width: 116px; height: 100%; min-height: 132px; object-fit: cover; display: block; cursor: pointer; } .invph .noph { height: 132px; display: grid; place-items: center; color: var(--ink-faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .invph .n { position: absolute; right: 6px; bottom: 6px; background: rgba(15,26,44,.75); color: #F4ECDA; font-size: 10px; border-radius: 999px; padding: 1px 6px; }
.invbody { padding: 12px 12px 10px 0; min-width: 0; } .invbody .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .invbody .price { font-family: var(--display); font-size: 22px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } .invbody .l2 { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .invbody .l2 a { text-decoration: none; } .invbody .l3 { font-size: 12px; margin-top: 2px; } .invbody .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .invbody .chips:empty { display: none; }
.invfoot { display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; border-top: 1px solid var(--paper-sunken); } .cards .invcard + .invcard { margin-top: 0; }
.sphotos.big img { width: 120px; height: 120px; } .addph { width: 64px; height: 64px; flex: 0 0 auto; border: 1px dashed var(--rule-strong); background: transparent; border-radius: var(--r-sm); color: var(--ink-muted); font-size: 24px; font-weight: 300; cursor: pointer; }
/* listing cards: a quiet icon row under the three lines */
.lcard .acts { grid-column: 1 / -1; display: flex; flex-direction: row; gap: 2px; justify-content: flex-end; align-items: center; color: var(--ink-faint); border-top: 1px solid var(--paper-sunken); padding-top: 6px; margin-top: 2px; } .lcard .acts .iconbtn { border: 0; background: transparent; width: 30px; height: 30px; color: inherit; } .lcard .acts .iconbtn:hover { color: var(--gold); } .lcard .acts .toggle { margin-right: auto; }

/* ---- 30 Oct 2026: Dog tax */
.verdict .pair.three { grid-template-columns: 1fr 1fr 1fr; } .verdict .pair .dog { background: var(--midnight-raised); box-shadow: inset 0 0 0 1px var(--gold-on-midnight); } .verdict .pair .dog .k { color: var(--gold-on-midnight); } .verdict .pair .dog .v { color: var(--gold-on-midnight); }
.verdict .dogline { margin-top: 10px; font-size: 13px; color: var(--on-midnight-muted); }
@media (max-width: 720px) { .verdict .pair.three { grid-template-columns: 1fr 1fr; } .verdict .pair.three .dog { grid-column: 1 / -1; } }

/* ---- 30 Oct 2026: home tiles */
.hometabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hometabs a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 14px 12px; min-height: 92px; color: var(--ink); }
.hometabs a svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.hometabs a b { font-family: var(--display); font-size: 17px; font-weight: 600; } .hometabs a span { font-size: 12px; color: var(--ink-muted); }
@media (hover: hover) { .hometabs a:hover { border-color: var(--gold-line); } }
@media (max-width: 400px) { .hometabs a { padding: 12px 10px 10px; } .hometabs a b { font-size: 15px; } .hometabs a span { font-size: 11px; } }

/* ---- 30 Oct 2026: hold-time verdict */
.verdict .dogverdict { margin-top: 12px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; color: var(--on-midnight-muted); } .verdict .dogverdict b { color: var(--on-midnight); }
.dogverdict .lamp { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--rule-strong); }
.dogverdict.fast .lamp { background: var(--positive); } .dogverdict.steady .lamp { background: var(--gold-on-midnight); } .dogverdict.slow .lamp, .dogverdict.very-slow .lamp { background: var(--negative); }

/* ---- 30 Oct 2026: dog chance */
.verdict .pair .dog .dogpct { color: var(--on-midnight); } .verdict .dogverdict .dogchance { color: var(--on-midnight); }

/* ---- 30 Oct 2026: buttons instead of dropdowns */
seg-sel { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
seg-sel button { flex: 0 0 auto; }
seg-sel.sm button { padding: 5px 10px; min-height: 30px; font-size: 12px; }
seg-sel.full { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
seg-sel.full button { padding: 8px 2px; min-height: 36px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .segfield.full { width: 100%; margin-top: 10px; } .segfield .lbl { color: var(--ink-muted); margin-left: 2px; }
.segrow { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; align-items: flex-end; }
.filters-body .segfield { grid-column: 1 / -1; }
.pstatus.sm button { padding: 4px 8px; min-height: 26px; font-size: 11px; text-transform: capitalize; }
@media (max-width: 400px) { seg-sel.full button { font-size: 12px; padding: 8px 1px; } }
.segfield .lbl { text-align: left; align-self: flex-start; }