/* ============ Tokens ============ */
:root {
  --bg: #07060d;
  --surface: #0f0c1a;
  --raised: #1a1430;
  --line: #2c2349;
  --line2: #3a2d66;
  --card-top: #130f22;
  --card-bot: #0c0916;
  --text: #ede9ff;
  --muted: #9188b8;
  --accent: #ff5a3c;
  --accent2: #ff2d75;
  --accent-ink: #ffffff;
  --cyan: #2ee6ff;
  --glow: #7846ff;
  --win: #3dffa8;
  --loss: #ff4d6d;
  --warn: #ffc83d;
  --sky: var(--cyan);
  --font-display: "Chakra Petch", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============ Themes: pick one from the Theme button in the menu ============ */
:root[data-theme="inferno"] { --bg:#0d0605; --surface:#190c09; --raised:#2a1411; --line:#44201a; --line2:#6a2f22; --card-top:#1c0e0a; --card-bot:#0e0705; --text:#fff0e8; --muted:#b58f84; --accent:#ff8a1f; --accent2:#ff3b1f; --accent-ink:#1a0600; --cyan:#ffd23f; --glow:#ff4a1f; }
:root[data-theme="abyss"] { --bg:#040b14; --surface:#091525; --raised:#10243b; --line:#1b3858; --line2:#2a5686; --card-top:#0b1a2e; --card-bot:#050d18; --text:#e6f4ff; --muted:#86a9c6; --accent:#1fb6ff; --accent2:#2a6bff; --accent-ink:#021423; --cyan:#3dffd8; --glow:#1f6bff; }
:root[data-theme="toxic"] { --bg:#050a06; --surface:#0b140d; --raised:#122218; --line:#20402a; --line2:#2f6a40; --card-top:#0d1c11; --card-bot:#060d08; --text:#eaffee; --muted:#8fb99a; --accent:#7dff3a; --accent2:#1fd18a; --accent-ink:#03200c; --cyan:#d6ff3a; --glow:#2fe06a; }
:root[data-theme="sakura"] { --bg:#0d0610; --surface:#190c1f; --raised:#2a1233; --line:#47235a; --line2:#6b3590; --card-top:#1d0e24; --card-bot:#0e0612; --text:#ffeefa; --muted:#bb93b5; --accent:#ff4fb8; --accent2:#a24bff; --accent-ink:#ffffff; --cyan:#5ef0ff; --glow:#c24bff; }
:root[data-theme="gold"] { --bg:#0a0804; --surface:#15110a; --raised:#241c0e; --line:#3f3218; --line2:#6a5424; --card-top:#19130a; --card-bot:#0c0905; --text:#fff7e0; --muted:#b5a47c; --accent:#ffc83d; --accent2:#ff9f1c; --accent-ink:#2a1d00; --cyan:#fff1a8; --glow:#ffb81f; }

/* Rainbow: the accent colors slowly cycle through every hue. */
@property --hue { syntax: "<number>"; inherits: true; initial-value: 300; }
:root[data-theme="rainbow"] { --hue: 300; --bg:#07060d; --surface:#0f0c1a; --raised:#1b1530; --line:#30264f; --line2:#473580; --card-top:#14101f; --card-bot:#0b0813; --text:#f4f0ff; --muted:#9d93c4; --accent: hsl(var(--hue) 100% 62%); --accent2: hsl(calc(var(--hue) + 70) 100% 60%); --accent-ink:#10061f; --cyan: hsl(calc(var(--hue) + 180) 100% 62%); --glow: hsl(calc(var(--hue) + 250) 100% 62%); animation: hue-cycle 30s steps(150) infinite; }
@keyframes hue-cycle { to { --hue: 660; } }
:root[data-theme="rainbow"] .nav { border-image: linear-gradient(90deg, #ff3b6b, #ffb000, #3dff8a, #2ee6ff, #7b5cff, #ff3bd0) 1; }
:root[data-theme="rainbow"] .btn { background: linear-gradient(90deg, #ff3b6b, #ff9f1c, #ffe14a, #3dff8a, #2ee6ff, #8b6cff); background-size: 200% 100%; color: #10061f !important; box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-theme="rainbow"] .btn:hover { background-position: 100% 0; }
:root[data-theme="rainbow"] .btn.ghost { background: transparent; color: var(--text) !important; }
:root[data-theme="rainbow"] .hero h1 { background: linear-gradient(90deg, #ff6b8a, #ffd23f, #6dffa8, #5ce6ff, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* Aurora: northern lights drifting behind the page. */
:root[data-theme="aurora"] { --bg:#040a12; --surface:#09141f; --raised:#10222f; --line:#1b3a46; --line2:#2a6070; --card-top:#0a1b25; --card-bot:#050d14; --text:#e8fff6; --muted:#8cb8b0; --accent:#3dffb0; --accent2:#7b5cff; --accent-ink:#021a12; --cyan:#4de1ff; --glow:#2fe0a8; }
:root[data-theme="aurora"] body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(40% 30% at 25% 30%, rgba(61,255,176,.35), transparent 70%), radial-gradient(35% 28% at 70% 22%, rgba(123,92,255,.35), transparent 70%), radial-gradient(40% 26% at 55% 60%, rgba(77,225,255,.22), transparent 70%); filter: blur(50px); animation: aurora 24s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(-6%, -3%, 0) rotate(-3deg) scale(1); } 50% { transform: translate3d(5%, 4%, 0) rotate(2deg) scale(1.12); } 100% { transform: translate3d(8%, -2%, 0) rotate(5deg) scale(1.05); } }


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ Nav ============ */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; min-height: 60px; gap: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 19px; text-decoration: none; white-space: nowrap; }
.logo .mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.nav nav { display: flex; align-items: center; gap: 4px; }
.nav nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav nav a:hover { color: var(--text); }
.nav nav a.active { color: var(--text); background: var(--raised); }
.nav nav a.btn { color: var(--accent-ink); margin-left: 6px; }

/* ============ Buttons ============ */
.btn {
  display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px;
  background: var(--accent); color: var(--accent-ink) !important;
  padding: 12px 22px; border-radius: 12px; text-decoration: none;
}
.btn.small { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn:hover { background: #ffd35f; }
.btn.ghost { background: transparent; color: var(--text) !important; border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); background: transparent; }
.sbtn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);
  background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
}
.sbtn:hover { border-color: var(--accent); }
.sbtn.danger:hover { border-color: var(--loss); color: var(--loss); }

/* ============ Page frame ============ */
main { display: block; }
.page-head { padding: 34px 0 8px; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
.page-head p { margin: 8px 0 0; color: var(--muted); max-width: 62ch; }
.notice { color: var(--warn) !important; font-size: 14px; }
.section { padding: 36px 0; }
.section h2 { font-size: 26px; font-weight: 800; margin-bottom: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; font-size: 15px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 18px 0; }
.panel h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }

/* ============ Hero (home) ============ */
.hero { padding: 54px 0 34px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(36px, 6.4vw, 64px); font-weight: 800; letter-spacing: -0.025em; }
.hero .lede { color: var(--muted); font-size: 18px; margin: 14px 0 24px; max-width: 46ch; }
.hero-search { max-width: 520px; }
.hero-search .picker input { margin: 0; padding: 16px 18px; font-size: 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); }
.hero-search .picker input:focus { border-color: var(--accent); outline: none; }
.hero-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.cluster { position: relative; height: 330px; }
.cluster .ficon { position: absolute; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.cluster .c1 { left: 4%; top: 52px; transform: rotate(-7deg); }
.cluster .c2 { left: 31%; top: 0; transform: rotate(2deg); z-index: 2; }
.cluster .c3 { right: 0; top: 78px; transform: rotate(8deg); }

/* ============ Category tiles ============ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.tile { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.tile:hover { border-color: var(--accent); }
.tile .stack { display: flex; margin-bottom: 14px; }
.tile .stack .ficon { margin-right: -12px; box-shadow: 0 0 0 3px var(--surface); }
.tile h3 { font-size: 20px; font-weight: 800; }
.tile p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tile .count { font-family: var(--font-display); font-weight: 800; color: var(--accent); }

/* ============ Fruit pictures ============ */
.ficon {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--rc, var(--line)) 65%, transparent);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #234a63) 30%, #0e2433), #0b1d2a 78%);
}
.ficon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6%; }
.ficon.fb { color: #fff; font-family: var(--font-display); font-weight: 800; }

/* ============ Forms ============ */
label { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
input, select {
  font: inherit; width: 100%; margin-top: 4px; padding: 10px 12px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.error { color: var(--loss); font-size: 14px; min-height: 22px; margin: 8px 0 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 0; }
.check input { width: auto; margin: 0; }

/* ============ Picker ============ */
.picker { position: relative; }
.picker-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 6px;
  max-height: 300px; overflow: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: transparent; border: 0; color: var(--text); padding: 7px 12px; cursor: pointer; }
.pick:hover, .pick:focus-visible { background: var(--line); }
.pick-name { flex: 1; font-weight: 600; }
.pick-val { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.picker-empty { padding: 14px; color: var(--muted); }

/* ============ Trade desk (calculator) ============ */
.desk { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; margin: 22px 0; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.desk-head h2 { font-size: 24px; font-weight: 800; }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px) minmax(0, 1fr); gap: 16px; align-items: start; }
.desk-grid .give { grid-area: give; }
.desk-grid .result { grid-area: result; }
.desk-grid .get { grid-area: get; }
.desk-grid { grid-template-areas: "give result get"; }
.side { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0; }
.side h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.give h3 { color: var(--loss); }
.get h3 { color: var(--win); }
.chips { display: grid; gap: 8px; margin-top: 10px; }
.chips-empty { color: var(--muted); font-size: 14px; padding: 14px 4px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; }
.chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.chip-info { flex: 1; min-width: 0; }
.chip-name { font-weight: 700; overflow-wrap: anywhere; line-height: 1.2; }
.chip-val { color: var(--muted); font-size: 12px; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 28px; height: 28px; font: inherit; cursor: pointer; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 0; }
.qty button:hover { border-color: var(--accent); }
.qty button.rm:hover { border-color: var(--loss); color: var(--loss); }
.qty span { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.side-total { margin-top: 12px; text-align: right; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.result { text-align: center; padding: 6px 4px; }
.result-nums { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.result-nums div { flex: 1; }
.result-nums span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.result-nums strong { font-family: var(--font-display); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Tide meter */
.tide { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--loss) 0 40%, var(--warn) 40% 60%, var(--win) 60% 100%); margin: 0 6px; }
.tide .needle { position: absolute; top: -8px; left: 50%; width: 6px; height: 30px; margin-left: -3px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px var(--surface); transition: left 0.35s ease; }
.tide.idle .needle { opacity: 0.35; }
.tide-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tide-labels span:first-child { text-align: left; }
.tide-labels span:last-child { text-align: right; }
.tide-labels span { text-align: center; }
.verdict { margin-top: 16px; padding: 12px 14px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 15px; }
.verdict.neutral { background: var(--bg); color: var(--muted); border: 1.5px dashed var(--line); font-weight: 500; }
.verdict.win { background: color-mix(in srgb, var(--win) 16%, var(--bg)); color: var(--win); }
.verdict.fair { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); color: var(--warn); }
.verdict.loss { background: color-mix(in srgb, var(--loss) 16%, var(--bg)); color: var(--loss); }

/* ============ Values toolbar, tabs ============ */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.tab .n { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--raised); border-radius: 999px; padding: 1px 8px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab[aria-selected="true"] .n { background: var(--accent); color: var(--accent-ink); }
.controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.controls input, .controls select { margin-top: 0; }
.addto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; color: var(--muted); font-size: 14px; font-weight: 600; }
.seg { display: inline-flex; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; }
.seg button { font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--raised); color: var(--text); }
.seg button[data-side="mine"][aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--loss); }
.seg button[data-side="theirs"][aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--win); }

/* ============ Item cards ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.fruit-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fruit-card:hover { border-color: color-mix(in srgb, var(--rc, var(--accent)) 80%, var(--line)); }
.fruit-card.added { border-color: var(--accent); }
.card-main { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 16px 10px 14px; background: transparent; border: 0; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.card-main .name { font-weight: 700; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.card-main .val { font-family: var(--font-display); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.status, .typetag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.typetag { background: transparent; border: 1px solid var(--line); }
.status.s-Overpaid { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
.status.s-Underpaid { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: var(--sky); }
.status.s-Unstable { background: color-mix(in srgb, var(--loss) 20%, var(--surface)); color: var(--loss); }
.status.s-Fluctuating { background: color-mix(in srgb, #c79bff 20%, var(--surface)); color: #c79bff; }
.status.s-Stable { background: color-mix(in srgb, var(--win) 14%, var(--surface)); color: var(--win); }
.meta { color: var(--muted); font-size: 12.5px; }
.demand-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ticks { display: inline-flex; gap: 2px; }
.ticks i { width: 5px; height: 11px; border-radius: 2px; background: var(--line); }
.ticks i.on { background: var(--rc, var(--accent)); }
.info { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: italic 700 15px Georgia, serif; cursor: pointer; padding: 0; line-height: 1; }
.info:hover { color: var(--accent); border-color: var(--accent); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 28px; }
.top-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.top-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px; text-align: center; }
.top-card:hover { border-color: var(--accent); }
.top-card .name { font-weight: 700; }
.top-card .val { font-family: var(--font-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============ Dock (sticky trade summary) ============ */
.dock { position: sticky; bottom: 12px; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-top: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.dock[hidden] { display: none; }
.dock-num span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.dock-num strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dock-verdict { flex: 1; text-align: center; font-weight: 700; font-size: 15px; min-width: 160px; }
.dock-verdict.win { color: var(--win); }
.dock-verdict.fair { color: var(--warn); }
.dock-verdict.loss { color: var(--loss); }

/* ============ Item dialog ============ */
dialog.item { width: min(440px, calc(100vw - 28px)); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
dialog.item::backdrop { background: rgba(3, 10, 15, 0.72); }
.dlg-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.dlg-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.dlg-top h2 { font-size: 26px; font-weight: 800; padding-right: 34px; }
.dlg-val { font-family: var(--font-display); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 6px; }
.dlg-rows { display: grid; gap: 0; margin: 4px 0 18px; }
.dlg-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dlg-rows div span:first-child { color: var(--muted); }
.dlg-rows div span:last-child { font-weight: 700; }
.dlg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg-acts .btn { text-align: center; padding: 12px 10px; font-size: 15px; }

/* ============ Trade board ============ */
.board-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.board-tools input, .board-tools select { margin-top: 0; }
.board-opts { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.trade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.posts { display: grid; gap: 12px; }
.post { background: var(--bg); }
.post.done { opacity: 0.6; }
.post-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.post-user { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.post-meta { color: var(--muted); font-size: 13px; }
.post-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.post-col h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.post-col .tot { margin-top: 8px; font-size: 13px; color: var(--muted); }
.mini-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px 9px 3px 3px; font-size: 14px; font-weight: 600; }
.deal { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.deal.win { background: color-mix(in srgb, var(--win) 16%, var(--bg)); color: var(--win); }
.deal.fair { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); color: var(--warn); }
.deal.loss { background: color-mix(in srgb, var(--loss) 16%, var(--bg)); color: var(--loss); }
.post-note { margin: 10px 0 0; }
.post-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tips { margin: 0; padding-left: 20px; color: var(--muted); }
.tips li { margin: 5px 0; }
.rules { padding-left: 34px; margin: 0; }
.rules li { margin: 7px 0; }
details.card { margin-bottom: 10px; }
details summary { cursor: pointer; font-weight: 700; }
details p { color: var(--muted); margin: 8px 0 0; }
.latest { display: grid; gap: 10px; }
.latest .post { padding: 12px 14px; }

.footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 14px; margin-top: 36px; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cluster { display: none; }
  .desk-grid { grid-template-columns: 1fr; grid-template-areas: "result" "give" "get"; }
}
@media (max-width: 720px) {
  .trade2, .post-body { grid-template-columns: 1fr; }
  .controls, .board-tools { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .desk { padding: 16px; border-radius: 20px; }
}
@media (max-width: 560px) {
  .nav-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav nav { flex-wrap: wrap; gap: 2px; }
  .nav nav a { padding: 6px 10px; font-size: 14px; }
  .nav nav a.btn { padding: 6px 12px; }
  .logo { font-size: 17px; }
  .hero { padding-top: 34px; }
}


/* ============ Dark gaming skin ============ */
body {
  background:
    radial-gradient(900px 480px at 78% -80px, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%),
    radial-gradient(800px 520px at 8% 120px, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--line) 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--line) 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, h4 { letter-spacing: 0; font-weight: 700; }
.nav { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent2), var(--cyan), transparent) 1; }
.logo .mark { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 70%, transparent)); }
.nav nav a { border-radius: 4px; }
.nav nav a.active { background: var(--raised); box-shadow: inset 0 -2px 0 var(--cyan); }

.btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 6px; letter-spacing: 0.02em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 6px 22px color-mix(in srgb, var(--accent2) 35%, transparent); }
.btn:hover { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 8px 30px color-mix(in srgb, var(--accent2) 55%, transparent); }
.btn.small, .sbtn, .seg, .seg button, input, select { border-radius: 6px; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); border-color: var(--cyan); box-shadow: none; }
.sbtn:hover, .qty button:hover { border-color: var(--cyan); }
:focus-visible, input:focus, select:focus { outline-color: var(--cyan); }
a { color: var(--cyan); }
.notice { text-shadow: 0 0 12px rgba(255, 200, 61, 0.35); }

.hero h1 { font-weight: 700; text-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 35%, transparent); }
.hero-search .picker input { border-radius: 8px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.hero-search .picker input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 14%, transparent), 0 0 28px color-mix(in srgb, var(--cyan) 25%, transparent); }
.cluster::before { content: ""; position: absolute; inset: 6% 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 35%, transparent), color-mix(in srgb, var(--glow) 18%, transparent) 60%, transparent); filter: blur(14px); }
.cluster .ficon { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 36px color-mix(in srgb, var(--rc, var(--glow)) 45%, transparent); }

.ficon { border-radius: 8px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc, var(--line2)) 34%, var(--card-top)), var(--bg) 80%); }
.card, .tile, .panel, .top-card, .fruit-card, .side, .post-col, dialog.item, .desk, .dock, .chip, .verdict, .picker-list { border-radius: 8px; }
.card, .tile, .panel, .top-card, .side, .desk { background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 55%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); }
.tile:hover, .top-card:hover { border-color: var(--cyan); box-shadow: 0 0 26px color-mix(in srgb, var(--cyan) 16%, transparent); }
.tile .count { color: var(--cyan); }

.desk { border-color: var(--line2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 6%, transparent), 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--glow) 10%, transparent); }
.give h3 { text-shadow: 0 0 14px rgba(255, 77, 109, 0.5); }
.get h3 { text-shadow: 0 0 14px rgba(61, 255, 168, 0.45); }
.tide { height: 10px; box-shadow: 0 0 18px rgba(255, 200, 61, 0.25); }
.tide .needle { background: #fff; box-shadow: 0 0 0 3px var(--surface), 0 0 14px rgba(255, 255, 255, 0.85); }
.result-nums strong { text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.verdict.win { box-shadow: 0 0 24px rgba(61, 255, 168, 0.18); border: 1px solid rgba(61, 255, 168, 0.45); }
.verdict.fair { box-shadow: 0 0 24px rgba(255, 200, 61, 0.15); border: 1px solid rgba(255, 200, 61, 0.4); }
.verdict.loss { box-shadow: 0 0 24px rgba(255, 77, 109, 0.2); border: 1px solid rgba(255, 77, 109, 0.5); }

.tab { border-radius: 0; }
.tab[aria-selected="true"] { border-bottom-color: var(--cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 50%, transparent); }
.tab[aria-selected="true"] .n { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.tab .n { border-radius: 4px; }
.seg button { border-radius: 4px; }

.fruit-card { background: linear-gradient(180deg, color-mix(in srgb, var(--rc, var(--line2)) 14%, var(--card-top)), var(--card-bot) 70%); border-color: color-mix(in srgb, var(--rc, var(--line)) 38%, var(--line)); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.fruit-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc, var(--line)); box-shadow: 0 0 14px var(--rc, transparent); }
.fruit-card:hover { transform: translateY(-2px); border-color: var(--rc, var(--cyan)); box-shadow: 0 8px 30px color-mix(in srgb, var(--rc, var(--glow)) 38%, transparent); }
.fruit-card.added { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 50%, transparent), 0 0 30px color-mix(in srgb, var(--cyan) 30%, transparent); }
.card-main .val { text-shadow: 0 0 16px color-mix(in srgb, var(--rc, #fff) 45%, transparent); }
.status, .typetag { border-radius: 4px; }
.ticks i { border-radius: 1px; }
.ticks i.on { box-shadow: 0 0 6px var(--rc, var(--accent)); }
.info { border-radius: 6px; font-style: normal; font-family: var(--font-display); }
.info:hover { color: var(--cyan); border-color: var(--cyan); }

.dock { border-color: var(--line2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 30px color-mix(in srgb, var(--glow) 18%, transparent); background: color-mix(in srgb, var(--raised) 96%, transparent); }
dialog.item { border-color: var(--line2); box-shadow: 0 0 60px color-mix(in srgb, var(--glow) 30%, transparent); background: var(--surface); }
dialog.item::backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(3px); }
.dlg-close { border-radius: 6px; }
.dlg-val { text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 40%, transparent); }
.footer { border-top: 1px solid var(--line); }
.pick:hover, .pick:focus-visible { background: var(--line); }

/* ============ Servers ============ */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.srv-controls { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 6px 0 20px; }
.room-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 10%, var(--card-top)), var(--card-bot) 75%); overflow: hidden; }
.room-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc); box-shadow: 0 0 14px var(--cc); }
.room-card:hover { border-color: var(--cc); box-shadow: 0 8px 30px color-mix(in srgb, var(--cc) 30%, transparent); }
.room-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-pill { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 4px; color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, var(--card-bot)); border: 1px solid color-mix(in srgb, var(--cc) 50%, transparent); }
.room-sea { font-size: 13px; color: var(--muted); }
.room-spots { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--win); font-variant-numeric: tabular-nums; }
.room-spots.full { color: var(--loss); }
.room-name { font-size: 20px; overflow-wrap: anywhere; }
.room-by { font-size: 14px; }
.room-note { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.room-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 6px; }
.empty-rooms { grid-column: 1 / -1; text-align: center; padding: 34px 16px; }
.empty-rooms p { margin: 8px 0 16px; }
.find-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.find-card p { margin: 6px 0 0; max-width: 56ch; }
.room-dlg { width: min(480px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; }
.room-dlg h2 { font-size: 24px; padding-right: 34px; margin-bottom: 14px; }
.fields.one { grid-template-columns: 1fr; margin-top: 0; }
.room-view { width: min(620px, calc(100vw - 28px)); }
.rv-title { margin: 10px 0 4px !important; }
.rv-note { margin: 0 0 6px; }
.rv-members { margin: 6px 0 12px; font-size: 14px; color: var(--muted); }
.chat-log { height: min(340px, 42vh); overflow-y: auto; margin-top: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.msg { max-width: 86%; padding: 7px 11px; border-radius: 6px; background: var(--raised); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--cyan) 14%, var(--raised)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.msg-meta { font-size: 12px; color: var(--muted); }
.msg-meta strong { color: var(--text); }
.msg-text { overflow-wrap: anywhere; }
.msg.sys { align-self: center; max-width: 100%; background: transparent; color: var(--muted); font-size: 13px; padding: 0; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { margin: 0; }
.room-view .room-top { padding-right: 40px; }

/* ============ Admin ============ */
.login-box { max-width: 420px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 30px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.admin-table th { text-align: left; font-size: 13px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; }
.admin-table td { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.admin-table input, .admin-table select { margin: 0; width: 120px; padding: 7px 9px; }
.admin-table input[type=number] { width: 76px; }
.admin-table input[aria-invalid="true"] { border-color: var(--loss); }
.a-item { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 200px; }
.a-acts { display: flex; gap: 6px; white-space: nowrap; }
.admin-table tr.custom td:first-child { box-shadow: inset 3px 0 var(--cyan); }
.admin-table tr.dirty { background: rgba(255, 200, 61, 0.08); }

/* ============ Admin ============ */
.login { max-width: 420px; }
.admin-bar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.admin-bar input, .admin-bar select { margin-top: 0; }
.admin-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th { text-align: left; font-size: 13px; color: var(--muted); padding: 10px 8px; background: var(--surface); position: sticky; top: 0; }
.admin-table td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table input, .admin-table select { margin: 0; padding: 7px 8px; width: 100%; }
.admin-table input[type="checkbox"] { width: 20px; height: 20px; }
.admin-table input[type="number"] { width: 70px; }
.admin-table td:nth-child(3) input { width: 110px; }
.admin-table tr.dirty td { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.admin-table input.bad { border-color: var(--loss); }
.a-name { display: flex; align-items: center; gap: 10px; min-width: 210px; font-weight: 600; }
.a-kind { font-size: 12px; font-weight: 400; }
@media (max-width: 720px) { .admin-bar { grid-template-columns: 1fr 1fr; } .admin-bar input { grid-column: 1 / -1; } }

/* ============ Trade board (gamer) ============ */
.live { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: 4px; font: 700 13px var(--font-body); color: var(--win); border: 1px solid rgba(61, 255, 168, 0.45); background: rgba(61, 255, 168, 0.1); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 10px var(--win); animation: pulse 1.6s ease-in-out infinite; }
.live.off { color: var(--muted); border-color: var(--line); background: transparent; }
.live.off i { background: var(--muted); box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.stats { display: grid; grid-template-columns: 170px 170px minmax(0, 1fr); gap: 12px; margin: 6px 0 18px; }
.stat { background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), var(--accent2)); }
.stat strong { font: 700 30px var(--font-display); line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.wanted { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wanted-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px 3px 3px; cursor: pointer; }
.wanted-chip:hover { border-color: var(--cyan); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 20%, transparent); }
.wanted-chip b { font-size: 12px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 4px; padding: 0 6px; }

.form-meter { max-width: 520px; margin: 18px auto 4px; }
.form-meter .tide { margin: 0 6px; }

.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chipbtn { font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 13px; cursor: pointer; }
.chipbtn:hover { color: var(--text); border-color: var(--cyan); }
.chipbtn[aria-pressed="true"] { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 20%, transparent); }

.trade-card { --tc: var(--line); position: relative; border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--line)); border-radius: 8px; padding: 14px 16px 14px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 8%, var(--card-top)), var(--card-bot) 70%); overflow: hidden; }
.trade-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.trade-card.is-win { --tc: var(--win); }
.trade-card.is-fair { --tc: var(--warn); }
.trade-card.is-loss { --tc: var(--loss); }
.trade-card:hover { border-color: var(--tc); box-shadow: 0 8px 30px color-mix(in srgb, var(--tc) 22%, transparent); }
.trade-card.done { opacity: 0.55; filter: grayscale(0.5); }
.tc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-avatar { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font: 700 18px var(--font-display); color: #fff; background: linear-gradient(135deg, var(--glow), var(--accent2)); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 45%, transparent); }
.tc-user { font: 700 18px var(--font-display); }
.tc-meta { font-size: 13px; color: var(--muted); }
.tc-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.badge.new { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.badge.hot { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent2) 50%, transparent); }
.badge.soon { color: var(--warn); border-color: rgba(255, 200, 61, 0.5); }
.badge.mine { color: #c79bff; border-color: rgba(199, 155, 255, 0.5); }
.tc-vs { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.tc-side { background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.tc-side h4 { font: 700 13px var(--font-body); color: var(--muted); margin-bottom: 8px; }
.tc-side.give h4 { color: var(--loss); }
.tc-side.want h4 { color: var(--win); }
.tc-items { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; }
.tc-pic { position: relative; }
.tc-pic .ficon { box-shadow: 0 0 16px color-mix(in srgb, var(--rc, var(--glow)) 40%, transparent); }
.tc-qty { position: absolute; right: -6px; bottom: -6px; font: 700 12px var(--font-display); color: #fff; background: var(--raised); border: 1px solid var(--cyan); border-radius: 4px; padding: 0 5px; }
.tc-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.tc-total { margin-top: 8px; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.tc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.vs-badge { font: 700 20px var(--font-display); color: #fff; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--line2), var(--bg)); border: 1.5px solid var(--tc); box-shadow: 0 0 20px color-mix(in srgb, var(--tc) 55%, transparent); }
.tide.mini { width: 84px; height: 6px; margin: 0; }
.tide.mini .needle { top: -5px; height: 16px; width: 4px; margin-left: -2px; box-shadow: 0 0 0 2px var(--surface), 0 0 10px rgba(255, 255, 255, 0.8); }
.tc-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; padding: 12px 20px; border-radius: 8px; font-weight: 700; color: var(--text); background: var(--raised); border: 1px solid var(--win); box-shadow: 0 0 30px rgba(61, 255, 168, 0.3), 0 14px 40px rgba(0, 0, 0, 0.6); animation: toast-in 0.25s ease-out; }
.toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes toast-in { from { transform: translate(-50%, 14px); opacity: 0; } }

@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .stat.wide { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .tc-vs { grid-template-columns: 1fr; }
  .tc-mid { flex-direction: row; justify-content: center; }
  .tc-badges { margin-left: 0; }
}

.vs-badge svg { display: block; }

.logo .mark path { fill: var(--accent2); }
.logo .mark ellipse { fill: var(--bg); }
body { transition: background-color 0.25s; }

/* ============ Theme picker ============ */
.themer { position: relative; }
.themer > button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px; cursor: pointer; }
.themer > button:hover, .themer > button[aria-expanded="true"] { color: var(--text); border-color: var(--cyan); }
.themer .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 70%, transparent); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 230px; padding: 8px; background: var(--raised); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--glow) 25%, transparent); }
.theme-menu[hidden] { display: none; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer; text-align: left; }
.theme-opt:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.theme-opt[aria-checked="true"] { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.theme-opt .sw { display: flex; flex: none; }
.theme-opt .sw i { width: 16px; height: 22px; }
.theme-opt .sw i:first-child { border-radius: 5px 0 0 5px; }
.theme-opt .sw i:last-child { border-radius: 0 5px 5px 0; }
@media (max-width: 560px) { .theme-menu { right: auto; left: 0; } }

/* ============ Gamer features ============ */
.rank-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 6px; background: color-mix(in srgb, var(--glow) 10%, transparent); }
.rank-chip b { font: 700 13px var(--font-display); color: var(--text); }
.rank-chip .bar { width: 44px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rank-chip .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 8px var(--accent2); }
.rank-chip .rt { font-size: 13px; font-weight: 600; color: var(--muted); }
.rank-chip:hover { border-color: var(--cyan); }
@media (max-width: 900px) { .rank-chip .rt { display: none; } }

.rank-card { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 14%, transparent); }
.rank-badge { flex: none; width: 64px; height: 64px; display: grid; place-items: center; font: 700 30px var(--font-display); color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, var(--accent), var(--accent2)); text-shadow: 0 0 12px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent2) 70%, transparent)); }
.rank-body { flex: 1; min-width: 0; }
.rank-body h3 { font-size: 22px; }
.xpbar { height: 10px; margin: 8px 0 6px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--cyan)); box-shadow: 0 0 12px var(--accent2); transition: width 0.4s; }
.rank-meta { font-size: 14px; }
.rank-tips { margin: 6px 0 0; font-size: 13px; }
.toast.levelup { border-color: var(--accent2); box-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 55%, transparent), 0 14px 40px rgba(0, 0, 0, 0.6); }

.balance { margin-top: 14px; text-align: left; padding: 10px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.balance[hidden] { display: none; }
.bal-title { font-size: 13px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; }
.bal-row { display: grid; gap: 6px; }
.bal-chip { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px 4px 4px; cursor: pointer; text-align: left; }
.bal-chip .ficon { flex: none; }
.bal-chip > span:not(.ficon) { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.bal-chip b { font: 700 14px var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.bal-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 25%, transparent); }
.form-meter .balance { text-align: left; }

.minebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; font-weight: 600; background: color-mix(in srgb, var(--raised) 50%, transparent); }
.minebar span { flex: 1; min-width: 220px; }
.minebar[hidden] { display: none; }
.own-tag { position: absolute; left: 8px; top: 10px; z-index: 2; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.own-tag.own { color: var(--win); background: color-mix(in srgb, var(--win) 15%, var(--bg)); border: 1px solid color-mix(in srgb, var(--win) 50%, transparent); }
.own-tag.want { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, var(--bg)); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); }
.dlg-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.dlg-inv .sbtn { padding: 10px; font-size: 14px; }
.dlg-inv .sbtn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }

/* ============ Gems, streaks and giveaways ============ */
.sec-h { font-size: 24px; margin: 28px 0 14px; }
.wallet-name { margin-top: 16px; }
.wallet-name .inline { display: flex; gap: 8px; margin-top: 4px; max-width: 360px; }
.wallet-name input { margin: 0; }

.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ga-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 16px 18px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 7%, var(--card-top)), var(--card-bot) 70%); }
.ga-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); box-shadow: 0 0 14px var(--warn); }
.ga-card.ended { filter: grayscale(0.35); opacity: 0.85; }
.ga-card.ended::before { background: var(--muted); box-shadow: none; }
.ga-card.won { border-color: var(--win); box-shadow: 0 0 30px color-mix(in srgb, var(--win) 28%, transparent); filter: none; opacity: 1; }
.ga-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ga-head h3 { font-size: 20px; overflow-wrap: anywhere; }
.ga-prize { display: flex; flex-direction: column; }
.ga-prize strong { font: 700 22px var(--font-display); color: var(--warn); overflow-wrap: anywhere; }
.ga-desc { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.ga-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; align-items: center; }
.ga-price { display: inline-flex; align-items: center; gap: 6px; }
.ga-left { font: 700 15px var(--font-display); color: var(--cyan); }
.ga-mine { font-size: 14px; color: var(--muted); }
.ga-enter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.ga-qty { min-width: 26px; text-align: center; font: 700 18px var(--font-display); }
.ga-won { font-weight: 700; color: var(--win); margin-bottom: 4px; text-shadow: 0 0 14px color-mix(in srgb, var(--win) 50%, transparent); }
.badge.done { color: var(--muted); }
.leaders { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.leader { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.leader:nth-child(1) { border-color: var(--warn); box-shadow: 0 0 18px color-mix(in srgb, var(--warn) 25%, transparent); }
.leader .lr { font: 700 16px var(--font-display); color: var(--accent); }
.leader .ln { font-weight: 600; overflow-wrap: anywhere; }
.leader .ls { font-size: 13px; }
.leader .lc { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-display); }
.rules-box { margin-top: 30px; }
.ga-form .gdesc { margin-top: 12px; }
@media (max-width: 560px) { .leader { grid-template-columns: 26px 1fr auto; } .leader .ls { display: none; } }
.btn:disabled, .btn[disabled] { background: var(--raised) !important; color: var(--muted) !important; text-shadow: none !important; box-shadow: none !important; filter: none; border: 1px solid var(--line); cursor: not-allowed; }

/* ---- gem icon, chip and game bar ---- */
.gem-ico { display: inline-flex; vertical-align: middle; filter: drop-shadow(0 0 6px rgba(52, 224, 195, 0.55)); }
.gem-ico.big svg { width: 34px; height: 34px; }
.flame-ico { display: inline-flex; vertical-align: middle; }
.flame-ico svg { width: 1.1em; height: 1.1em; }
.gem-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 5px 10px; border: 1px solid color-mix(in srgb, #34e0c3 45%, var(--line)); border-radius: 6px; background: color-mix(in srgb, #34e0c3 9%, transparent); }
.gem-chip b { font: 700 14px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.gem-chip:hover { border-color: #34e0c3; box-shadow: 0 0 16px color-mix(in srgb, #34e0c3 30%, transparent); }
.gem-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); animation: pulse 1.4s ease-in-out infinite; }
.gem-dot[hidden] { display: none; }
.gem-card-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.gamebar { display: flex; gap: 10px; overflow-x: auto; margin: 6px 0 18px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 14px; background: color-mix(in srgb, var(--raised) 55%, transparent); scrollbar-width: none; }
.gamebar::-webkit-scrollbar { display: none; }
.gtile { position: relative; flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 10px; text-decoration: none; color: var(--muted); border: 1px solid transparent; }
.gtile .gt-ic { display: grid; place-items: center; height: 40px; color: var(--cyan); }
.gtile .gt-ic .flame-ico svg { width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(255, 138, 31, 0.6)); }
.gtile .gt-l { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
.gtile:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.gtile.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 11%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 22%, transparent); }
.gt-new { position: absolute; top: -2px; right: 8px; font: 800 10px var(--font-display); letter-spacing: 0.04em; color: #1b1300; background: #ffc83d; padding: 1px 6px; border-radius: 8px; }

/* ---- streak page ---- */
.streak-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 10px; }
.streak-page[hidden] { display: none; }
.st-ring { position: relative; width: 172px; height: 172px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; border: 3px solid color-mix(in srgb, #ff8a1f 70%, var(--line)); box-shadow: 0 0 34px color-mix(in srgb, #ff8a1f 30%, transparent), inset 0 0 28px color-mix(in srgb, #ff8a1f 12%, transparent); }
.st-ring.lit { border-color: #ff8a1f; box-shadow: 0 0 50px color-mix(in srgb, #ff8a1f 55%, transparent), inset 0 0 34px color-mix(in srgb, #ff8a1f 20%, transparent); }
.st-num { font: 700 56px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.st-flame .flame-ico svg { width: 34px; height: 34px; filter: grayscale(0.7) opacity(0.7); }
.st-ring.lit .st-flame .flame-ico svg { filter: drop-shadow(0 0 10px rgba(255, 138, 31, 0.8)); animation: flicker 1.6s ease-in-out infinite; }
.st-dot { position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ff8a1f; box-shadow: 0 0 12px #ff8a1f; }
@keyframes flicker { 50% { transform: scale(1.12) translateY(-2px); } }
.st-title { margin: 22px 0 16px; font-size: 40px; }
.days-wrap { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 760px; }
.days { flex: 1; display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 6px; scroll-behavior: smooth; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bubble { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font: 700 20px var(--font-display); border: 2px solid color-mix(in srgb, #3b6cff 70%, var(--line)); background: color-mix(in srgb, #3b6cff 20%, var(--bg)); }
.bubble.special { border-color: #d9a21b; background: color-mix(in srgb, #ffc83d 28%, var(--bg)); }
.bubble.done { background: linear-gradient(135deg, #ff8a1f, #ffc83d); border-color: #ffc83d; color: #2b1700; box-shadow: 0 0 18px color-mix(in srgb, #ff8a1f 55%, transparent); }
.bubble.now { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 70%, transparent), 0 0 24px color-mix(in srgb, var(--cyan) 60%, transparent); animation: pulse-ring 1.6s ease-in-out infinite; }
@keyframes pulse-ring { 50% { transform: scale(1.08); } }
.gpill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 12px; font: 700 13px var(--font-display); background: color-mix(in srgb, #3b6cff 45%, var(--bg)); color: #fff; }
.gpill.special { background: #b8860b; }
.day-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: var(--raised); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.day-arrow:hover { border-color: var(--cyan); }
.st-hint { margin: 12px 0 0; font-size: 14px; }
.st-sub { margin: 26px 0 12px; font-size: 22px; }
.st-claim { display: flex; justify-content: center; }
.claim-btn { min-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font: 700 20px var(--font-display); color: #fff; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #2f6bff, #1d4fd8); box-shadow: 0 8px 26px rgba(47, 107, 255, 0.35); }
.claim-btn.special { background: linear-gradient(135deg, #9b3dff, #7a1fd1); box-shadow: 0 8px 26px rgba(155, 61, 255, 0.4); }
.claim-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.claim-btn:disabled { cursor: not-allowed; background: var(--raised); color: var(--muted); box-shadow: none; border: 1px solid var(--line); }
.st-note { margin: 10px 0 0; font-size: 14px; }
.st-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
.st-stat { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 55%, transparent); }
.st-stat b { font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }
.st-stat span:last-child { color: var(--muted); font-size: 14px; }
.milestone { width: 100%; max-width: 420px; }
.ms-title { font: 700 22px var(--font-display); margin-bottom: 12px; }
.ms-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.ms-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px var(--accent2); transition: width 0.4s; }
.earn { margin-top: 30px; }
.earn[hidden], .board-sec[hidden] { display: none; }
.earn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.earn-list li { display: flex; gap: 14px; align-items: flex-start; }
.earn-list p { margin: 2px 0 0; font-size: 14px; }
.e-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; border-radius: 10px; background: color-mix(in srgb, var(--cyan) 10%, var(--bg)); border: 1px solid var(--line); }
.e-ic .flame-ico svg { width: 24px; height: 24px; }
.board-sec { margin-top: 30px; }
.board-sec .st-sub { text-align: center; }
.lb-tabs { justify-content: center; }
.board-sec .leaders { margin: 14px auto 20px; }
.leader.empty { display: block; text-align: center; color: var(--muted); }
.trophy { color: #ffc83d; }

.wallet-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 12px; background: color-mix(in srgb, var(--raised) 55%, transparent); }
.wallet-bar[hidden] { display: none; }
.wb-bal { display: flex; align-items: center; gap: 8px; }
.wb-bal strong { font: 700 32px var(--font-display); font-variant-numeric: tabular-nums; }
.wb-bal span:last-child { color: var(--muted); font-weight: 600; }
.wb-how { flex: 1; min-width: 220px; margin: 0; font-size: 14px; }

/* ---- trade board: item limit and two-sided completion ---- */
.side-count { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.side-count.full { color: var(--warn); }
.side-count.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.tpanel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 45%, transparent); }
.tpanel.tp-active { border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); }
.tpanel.tp-done { border-color: color-mix(in srgb, var(--win) 50%, var(--line)); }
.tp-msg { margin: 0 0 8px; font-size: 14px; overflow-wrap: anywhere; }
.tp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tp-row:empty, .tpanel .tp-msg:last-child { margin-bottom: 0; }
.tp-row:empty { display: none; }
.tp-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-ask[hidden] { display: none; }
.tp-ask input { margin: 0; min-width: 190px; }
.tp-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.tp-step.ok { color: var(--win); border-color: color-mix(in srgb, var(--win) 55%, transparent); background: color-mix(in srgb, var(--win) 10%, transparent); }
.tp-tick { font-weight: 800; }
.tp-msg-err { margin: 8px 0 0; }
.badge.live-trade { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
@media (max-width: 560px) { .gtile { flex-basis: 88px; } .st-title { font-size: 30px; } .bubble { width: 56px; height: 56px; } .claim-btn { min-width: 0; width: 100%; } .day-arrow { display: none; } }

/* ---- inspect window ---- */
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ins-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); background: var(--bg); }
.ins-pic { position: relative; display: inline-flex; }
.ins-name { font-size: 13px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.ins-val { font-size: 12px; font-variant-numeric: tabular-nums; }
.ins-total { margin-top: 10px; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.ins-label { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ins-verdict { margin: 0; }
.ins-offer-h { margin: 18px 0 8px; font-size: 18px; }
.ins-local { margin: 14px 0 0; font-size: 14px; }
/* ---- Trading Details page ---- */
.crumbs { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); }
.td-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.td-grid[hidden] { display: none; }
.td-card { padding: 16px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); box-shadow: 0 0 40px color-mix(in srgb, var(--glow) 14%, transparent); }
.td-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.td-head .tc-who { flex: 1; min-width: 0; }
.td-sec { margin-bottom: 14px; }
.td-sec h3 { font-size: 20px; margin-bottom: 10px; }
.td-sec.give h3 { color: var(--accent2); }
.td-sec.want h3 { color: var(--win); }
.ins-label.center { text-align: center; }
.td-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.td-pill { padding: 3px 10px; border-radius: 14px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.td-pill b { color: var(--text); font-variant-numeric: tabular-nums; }
.td-share { display: block; margin: 0 auto 12px; }
.td-acts { display: grid; gap: 8px; }
.td-acts .btn, .td-acts .sbtn { width: 100%; text-align: center; justify-content: center; }
.td-main { display: grid; gap: 18px; min-width: 0; }
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.td-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-num { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.td-num b { font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }

.neg-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 6px; }
.neg-form .btn { flex: none; }
.neg-name { width: 190px; margin: 0; }
.neg-name[hidden] { display: none; }
.neg-box { position: relative; flex: 1; min-width: 200px; }
.neg-box input { width: 100%; margin: 0; }
.mention-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raised); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.mention-list[hidden] { display: none; }
.mention-list button { width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.mention-list button:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.neg-list { list-style: none; margin: 14px 0 0; padding: 0; }
.neg-item { position: relative; display: flex; gap: 12px; padding: 14px 34px 14px 0; border-top: 1px solid var(--line); }
.neg-item .tc-avatar { flex: none; }
.neg-item.system { opacity: 0.9; }
.tc-avatar.sys { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; }
.neg-body { flex: 1; min-width: 0; }
.neg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.neg-meta b { font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.neg-text { margin: 4px 0 0; overflow-wrap: anywhere; }
.mention { display: inline-block; padding: 0 8px; border-radius: 12px; background: #1d36c9; color: #fff; font-weight: 600; }
.neg-tag { display: inline-block; margin: 8px 0 4px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); }
.neg-counter { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 45%, transparent); }
.neg-counter .btn { margin-top: 10px; }
.neg-del { position: absolute; right: 0; top: 12px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; line-height: 1; }
.neg-del:hover { color: var(--accent2); border-color: var(--accent2); }
.neg-empty { padding: 14px 0; list-style: none; }
@media (max-width: 860px) { .td-grid { grid-template-columns: 1fr; } .td-card { max-width: 420px; width: 100%; margin: 0 auto; } }
@media (max-width: 560px) { .td-nums { grid-template-columns: 1fr; } .neg-name { width: 100%; } }

/* nav: never break a label onto two lines; wrap whole items instead */
.nav nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.nav nav > *, .nav nav a { white-space: nowrap; flex: none; }
.nav nav a { padding: 8px 10px; }
.nav-inner { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1280px) { .nav nav a { font-size: 14px; padding: 7px 8px; } }

/* ---------- Friends and private chat ---------- */
.fr-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; color: var(--cyan); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; flex: none; }
.fr-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 28%, transparent); }
.fr-ic { display: grid; place-items: center; }
.fr-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff3b6b; color: #fff; font: 700 11px/18px var(--font-display); text-align: center; font-style: normal; }
.fr-badge[hidden] { display: none; }
.fr-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.fr-top .panel { margin: 14px 0; }
.fr-code { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.fr-code b { font: 800 30px var(--font-display); letter-spacing: 0.14em; color: var(--cyan); }
.fr-name { display: flex; gap: 8px; }
.fr-name input { flex: 1; min-width: 0; }
.fr-add label { font-weight: 700; display: block; margin-bottom: 8px; }
.fr-add .inline { display: flex; gap: 8px; }
.fr-add .inline input { flex: 1; min-width: 0; text-transform: uppercase; }
.fr-add p { margin: 10px 0 0; font-size: 14px; }
.fr-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 460px; margin-bottom: 24px; }
.fr-list, .fr-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.fr-list { padding: 8px; overflow-y: auto; max-height: 560px; }
.fr-h { font: 700 12px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 6px 6px; }
.fr-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px; cursor: pointer; }
.fr-row:hover { background: var(--raised); }
.fr-row.on { background: var(--raised); border-color: var(--cyan); }
.fr-row .tc-avatar { flex: none; }
.fr-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-last { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b6b; color: #fff; font: 700 12px/22px var(--font-display); text-align: center; }
.fr-none { padding: 24px 14px; text-align: center; }
.fr-chat { display: flex; flex-direction: column; }
.fr-empty { margin: auto; text-align: center; padding: 30px; }
.fr-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fr-pane[hidden], .fr-empty[hidden] { display: none; }
.fr-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fr-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fr-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-back { display: none; }
.fr-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 440px; }
.fr-msg { align-self: flex-start; max-width: 78%; background: var(--raised); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: 7px 11px; }
.fr-msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--cyan) 16%, var(--raised)); border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); border-radius: 12px 12px 3px 12px; }
.fr-msg p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.fr-msg time { display: block; font-size: 11px; text-align: right; margin-top: 2px; }
.fr-sys { align-self: center; max-width: 90%; text-align: center; font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--cyan) 8%, transparent); border: 1px dashed var(--line2); border-radius: 8px; padding: 6px 12px; }
.fr-send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.fr-send input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .fr-top { grid-template-columns: 1fr; }
  .fr-layout { grid-template-columns: 1fr; }
  .fr-layout.in-chat .fr-list { display: none; }
  .fr-layout:not(.in-chat) .fr-chat { display: none; }
  .fr-back { display: inline-flex; }
  .fr-msgs { max-height: 55vh; }
}

/* ---------- Accounts ---------- */
.acct-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 6px; color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; flex: none; }
.acct-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 28%, transparent); }
.acct-chip.in { padding-left: 4px; }
.acct-av { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent2, #7b5cff), var(--cyan)); color: #fff; font: 800 13px var(--font-display); }
.acct-av[hidden] { display: none; }
.acct-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--cyan) 6%, transparent); font-size: 14px; }
.acct-note[hidden] { display: none; }
.ac-card { max-width: 460px; margin: 28px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.ac-card[hidden] { display: none; }
.ac-card h1 { font-size: 26px; margin: 0 0 6px; }
.ac-card h2 { font-size: 18px; margin: 22px 0 8px; }
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 6px; }
.ac-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ac-form[hidden] { display: none; }
.ac-form label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.ac-form .btn { margin-top: 8px; align-self: flex-start; }
.ac-hint { font-size: 13px; margin: 6px 0 0; }
.ac-who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ac-who h1 { margin: 0; overflow-wrap: anywhere; }
.ac-who p { margin: 2px 0 0; font-size: 14px; }
.ac-big { width: 54px; height: 54px; font-size: 26px; flex: none; }
.ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ac-stat { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; }
.ac-stat b { display: block; font: 800 22px var(--font-display); color: var(--cyan); }
.ac-stat span { font-size: 13px; }
.ac-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ac-links .sbtn { text-decoration: none; }
#acOut { margin-top: 22px; }
@media (max-width: 1320px) { .rank-chip .rt { display: none; } .nav nav { gap: 2px; } }