/* XAUUSD Global Community — app styles (matches www.xauusdglobal.com) */
:root {
  --bg: #08090b; --bg-2: #0d0f12; --surface: #12151a; --surface-2: #171b21;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f3f1ea; --text-2: #b4b2ab; --text-3: #8a8983;
  --gold: #f2c14e; --gold-2: #ffd978; --gold-3: #b8862b;
  --gold-grad: linear-gradient(135deg, #ffe08a 0%, #f2c14e 42%, #c9922f 100%);
  --cyan: #45d6c4; --red: #ef6a5b; --green: #3ccf91;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.19, 1, .22, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow: hidden; }
body.scroll { overflow: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--gold-2); text-underline-offset: 3px; text-decoration-color: rgba(255,217,120,.35); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* buttons + fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; text-decoration: none; transition: transform .2s var(--ease), background-color .2s, border-color .2s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn--gold { background: var(--gold-grad); color: #17130a; box-shadow: 0 10px 30px -12px rgba(242,193,78,.55); }
.btn--gold:hover { color: #17130a; filter: brightness(1.05); }
.btn--ghost { background: rgba(255,255,255,.04); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--danger { background: rgba(239,106,91,.12); border-color: rgba(239,106,91,.45); color: #ffb1a7; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .85rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-size: .8rem; font-weight: 500; color: var(--text-2); }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--text); transition: border-color .2s, box-shadow .2s; }
textarea.input { min-height: 80px; resize: vertical; }
.input:focus { outline: none; border-color: rgba(242,193,78,.6); box-shadow: 0 0 0 3px rgba(242,193,78,.12); }
.input-pre { position: relative; } .input-pre > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .input-pre .input { padding-left: 30px; }
.hint { font-size: .78rem; color: var(--text-3); }
.err { font-size: .84rem; color: #ffb1a7; min-height: 1.2em; }
.ok { font-size: .84rem; color: #9be7c4; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }

/* boot */
.boot { height: 100%; display: grid; place-items: center; }
.boot__mark { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.96); } }

/* toasts */
.toasts { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: 14px; background: rgba(23,27,33,.96); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); font-size: .9rem; animation: toastIn .45s var(--ease) both; }
.toast--err { border-color: rgba(239,106,91,.55); color: #ffd0ca; }
.toast--ok { border-color: rgba(60,207,145,.5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ===================== GATE (sign up / log in) ===================== */
.gate { min-height: 100%; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; padding: 32px 20px 48px; max-width: 1180px; margin: 0 auto; position: relative; }
.gate::before { content: ""; position: fixed; inset: -20% -10% auto; height: 90vh; background: radial-gradient(45% 50% at 50% 30%, rgba(242,193,78,.14), transparent 70%); pointer-events: none; z-index: -1; }
@media (min-width: 960px) { .gate { grid-template-columns: 1.1fr .9fr; gap: 64px; padding: 48px 32px; } }
.brandline { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brandline img { width: 40px; height: 40px; }
.brandline b { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; font-size: 1.02rem; }
.brandline small { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.gate__copy h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6.2vw, 4.8rem); line-height: .98; letter-spacing: -.045em; margin: 26px 0 18px; }
.gate__copy h1 .serif { font-size: 1.1em; }
.gate__copy p { color: var(--text-2); font-size: 1.05rem; max-width: 34em; margin: 0 0 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: .8rem; color: var(--gold-2); background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.35); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,193,78,.18); }
.gate__rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gate__rooms span { font-family: var(--font-mono); font-size: .72rem; color: var(--text-2); padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.gate__note { margin-top: 26px; font-size: .8rem; color: var(--text-3); }
.card { position: relative; padding: 28px; border-radius: 24px; background: linear-gradient(180deg, #13161b, #0c0e11); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(242,193,78,.06), 0 40px 120px -70px rgba(242,193,78,.45); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line); margin-bottom: 22px; }
.tabs button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-family: var(--font-display); font-weight: 600; }
.tabs button.on { background: rgba(242,193,78,.14); color: var(--gold-2); }
.form { display: grid; gap: 14px; }
.form h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; margin: 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,217,120,.35); font-size: .86rem; justify-self: start; }

/* ===================== ONBOARDING ===================== */
.onb { min-height: 100%; display: grid; place-items: center; padding: 32px 18px; }
.onb .card { width: min(100%, 620px); }
.onb__hero { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin-bottom: 22px; }
.onb__hero img { width: 96px; filter: drop-shadow(0 18px 30px rgba(242,193,78,.25)); animation: coinIn 1.4s var(--ease) both; }
@keyframes coinIn { from { opacity: 0; transform: translateY(16px) rotateY(70deg) scale(.9); } }
.onb__hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 6px; }
.onb__hero p { margin: 0; color: var(--text-2); font-size: .92rem; }
.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.levels label { position: relative; display: grid; gap: 2px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.25); cursor: pointer; font-size: .78rem; color: var(--text-3); }
.levels label b { color: var(--text); font-size: .9rem; font-family: var(--font-display); }
.levels input { position: absolute; opacity: 0; }
.levels label:has(input:checked) { border-color: rgba(242,193,78,.6); background: rgba(242,193,78,.08); }
.levels label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.rules { margin: 0; padding: 14px 16px 14px 34px; border-radius: 14px; background: rgba(242,193,78,.05); border: 1px solid rgba(242,193,78,.2); font-size: .86rem; color: var(--text-2); display: grid; gap: 6px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches label { width: 32px; height: 32px; border-radius: 50%; background: var(--c); cursor: pointer; position: relative; border: 2px solid transparent; }
.swatches input { position: absolute; opacity: 0; }
.swatches label:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }

/* ===================== APP SHELL ===================== */
.shell { height: 100%; height: 100dvh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: rgba(8,9,11,.85); backdrop-filter: blur(14px); position: relative; z-index: 20; }
.top .brandline img { width: 32px; height: 32px; }
.top .brandline b { font-size: .92rem; }
.top__sp { flex: 1; }
.iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-2); }
.iconbtn:hover { background: rgba(255,255,255,.06); color: #fff; }
.iconbtn.on { color: var(--gold-2); background: rgba(242,193,78,.1); }
.navtoggle { display: inline-grid; } @media (min-width: 900px) { .navtoggle { display: none; } }
.conn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: #f2a14e; }
.conn.live i { background: var(--green); box-shadow: 0 0 0 4px rgba(60,207,145,.15); }
@media (max-width: 640px) { .conn span, .top .site-link { display: none; } }
.site-link { font-size: .84rem; color: var(--text-2); text-decoration: none; }
.site-link:hover { color: var(--gold-2); }
.mebtn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); font-size: .85rem; }
.mebtn .av { width: 30px; height: 30px; font-size: .78rem; }
@media (max-width: 520px) { .mebtn > span:not(.av) { display: none; } .mebtn { padding: 4px; } }
.demo-banner { padding: 6px 14px; text-align: center; font-size: .78rem; color: #17130a; background: var(--gold-grad); }

.stage { flex: 1; min-height: 0; padding: 0; }
@media (min-width: 900px) { .stage { padding: 18px; perspective: 1800px; } }
.app { height: 100%; display: grid; grid-template-columns: 1fr; overflow: hidden; background: linear-gradient(180deg, #121519, #0b0d10); position: relative; }
@media (min-width: 900px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); border-radius: 22px; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(242,193,78,.08), 0 40px 140px -70px rgba(242,193,78,.35); transform-origin: 50% 0; }
  .app.unfold { animation: unfold 1.25s var(--ease) both; }
}
@media (min-width: 1240px) { .app { grid-template-columns: 248px minmax(0, 1fr) 280px; } }
@keyframes unfold { from { opacity: 0; transform: rotateX(18deg) translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }

/* sidebar */
.side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.22); }
.side__scroll { flex: 1; overflow-y: auto; padding: 16px 10px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
@media (max-width: 899px) {
  .side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(84vw, 300px); background: #0d0f12; border-right: 1px solid var(--line-2); transform: translateX(-102%); transition: transform .45s var(--ease); box-shadow: 30px 0 80px -20px rgba(0,0,0,.8); padding-top: env(safe-area-inset-top); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .scrim.open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 900px) { .scrim { display: none; } }
.rg__k { padding: 0 10px 6px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.rm { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: #c9c7c0; font-size: .9rem; text-align: left; transition: background-color .2s, color .2s; }
.rm svg { width: 14px; height: 14px; opacity: .75; }
.rm span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm:hover { background: rgba(255,255,255,.05); color: #fff; }
.rm.on { background: rgba(242,193,78,.12); color: var(--gold-2); box-shadow: inset 2px 0 0 var(--gold); }
.rm.unread span { color: #fff; font-weight: 600; }
.rm--locked { color: var(--text-3); cursor: not-allowed; }
.rm__live { font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: #08090b; background: var(--green); padding: 2px 6px; border-radius: 5px; }
.rm__new { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.side__me { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.side__me div { flex: 1; min-width: 0; line-height: 1.25; }
.side__me b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__me small { font-size: .74rem; color: var(--text-3); }

/* main */
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.head p { margin: 2px 0 0; font-size: .84rem; color: var(--text-2); }
.head__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.badge-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: #08090b; background: var(--green); padding: 3px 8px; border-radius: 6px; }
.badge-live i { width: 6px; height: 6px; border-radius: 50%; background: #08090b; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.pinbar { margin: 12px 20px 0; border-radius: 12px; background: rgba(242,193,78,.06); border: 1px solid rgba(242,193,78,.22); font-size: .84rem; color: var(--text-2); }
.pinbar summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer; }
.pinbar summary::-webkit-details-marker { display: none; }
.pinbar summary svg { color: var(--gold); margin-top: 1px; width: 16px; height: 16px; }
.pinbar summary span { flex: 1; }
.pinbar__list { display: grid; gap: 6px; padding: 0 12px 12px 38px; }
.pinbar__list button { text-align: left; border: 0; background: rgba(0,0,0,.25); border-radius: 9px; padding: 8px 10px; color: var(--text-2); font-size: .82rem; }
.pinbar__list button:hover { color: #fff; }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 10px; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; overscroll-behavior: contain; }
.thread__top { text-align: center; padding: 10px 0 18px; font-size: .8rem; color: var(--text-3); }
.thread__intro { padding: 22px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.thread__intro h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 4px; }
.thread__intro p { margin: 0; color: var(--text-2); font-size: .9rem; }
.day { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jump { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; }

/* messages */
.msg { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 7px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .2s; }
.msg + .msg { margin-top: 4px; }
.msg--compact { padding-top: 2px; padding-bottom: 2px; margin-top: 0 !important; }
.msg--compact > .av { visibility: hidden; height: 0; }
.msg--compact .msg__meta { display: none; }
.msg--compact .msg__c { grid-column: 2; }
.msg:hover, .msg.hl { background: rgba(255,255,255,.025); }
.msg.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: rgba(242,193,78,.14); } }
.msg--in { animation: msgIn .5s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.msg--pinned { box-shadow: inset 2px 0 0 var(--gold); }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #0b0c0f; background: var(--c, #888); border: 0; padding: 0; flex-shrink: 0; }
.av--lg { width: 72px; height: 72px; font-size: 1.6rem; }
.av--sm { width: 26px; height: 26px; font-size: .7rem; }
.msg__c { min-width: 0; }
.msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84rem; line-height: 1.3; }
.msg__name { border: 0; background: none; padding: 0; font-weight: 600; color: var(--text); font-size: .9rem; }
.msg__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.msg__meta time { font-size: .72rem; color: var(--text-3); }
.flag { font-size: .9rem; line-height: 1; }
.lv, .rb { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; border: 1px solid currentColor; white-space: nowrap; }
.lv-Starter { color: #8fd3ff; } .lv-Advanced { color: #6ee7d0; } .lv-Pro { color: var(--gold); }
.rb-founding { color: var(--gold-2); border-color: rgba(242,193,78,.5); background: rgba(242,193,78,.08); }
.rb-mentor, .rb-admin { color: #17130a; background: var(--gold); border-color: var(--gold); }
.rb-pro { color: var(--gold); }
.msg__b { margin-top: 3px; font-size: .93rem; line-height: 1.55; color: #dcdad3; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__b a { word-break: break-all; }
.msg__b .edited { font-size: .72rem; color: var(--text-3); margin-left: 4px; }
.msg__deleted { font-style: italic; color: var(--text-3); font-size: .86rem; }
.msg__quote { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 0 4px; padding: 3px 9px; border: 0; border-left: 2px solid rgba(242,193,78,.5); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.03); color: var(--text-3); font-size: .8rem; text-align: left; }
.msg__quote b { color: var(--text-2); font-weight: 600; flex-shrink: 0; }
.msg__quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg__img { display: inline-block; margin-top: 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #0b0d11; max-width: min(100%, 520px); }
.msg__img img { max-height: 420px; width: auto; object-fit: contain; }
.msg__re { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg__re:empty { display: none; }
.re { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; color: var(--text-2); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.re:hover { border-color: var(--line-2); color: #fff; }
.re.mine { border-color: rgba(242,193,78,.55); background: rgba(242,193,78,.1); color: var(--gold-2); }
.msg__tools { position: absolute; top: -14px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #171b21; border: 1px solid var(--line-2); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 3; }
.msg:hover .msg__tools, .msg:focus-within .msg__tools, .msg.tools-on .msg__tools { opacity: 1; pointer-events: auto; transform: none; }
.msg__tools button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); }
.msg__tools button:hover { background: rgba(255,255,255,.08); color: #fff; }
.msg__tools button.danger:hover { color: #ffb1a7; }
.msg__tools svg { width: 16px; height: 16px; }
@media (hover: none) { .msg__tools { display: none; } .msg.tools-on .msg__tools { display: flex; } }
.empty { margin: auto; text-align: center; color: var(--text-3); font-size: .9rem; padding: 40px 0; }

/* typing + composer */
.typing { display: flex; align-items: center; gap: 8px; padding: 0 20px 4px; min-height: 20px; font-size: .78rem; color: var(--text-3); }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: dot 1.2s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.compose-wrap { padding: 4px 20px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.chip { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px 8px 12px; border-radius: 12px; background: rgba(242,193,78,.06); border: 1px solid rgba(242,193,78,.22); font-size: .82rem; color: var(--text-2); }
.chip span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; }
.chip .iconbtn { width: 30px; height: 30px; }
.compose { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); transition: border-color .2s; }
.compose:focus-within { border-color: rgba(242,193,78,.5); }
.compose textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 180px; padding: 9px 8px; border: 0; background: transparent; color: var(--text); resize: none; font-size: .94rem; line-height: 1.45; }
.compose textarea:focus { outline: none; }
.compose .send { width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; background: var(--gold-grad); color: #17130a; }
.compose .send[disabled] { opacity: .45; cursor: not-allowed; }
.compose .send svg { stroke-width: 2.2; }
.readonly { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--text-3); font-size: .86rem; text-align: center; }
.dropzone { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(8,9,11,.82); border: 2px dashed rgba(242,193,78,.6); border-radius: inherit; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-2); pointer-events: none; }

/* rail */
.rail { display: none; min-height: 0; overflow-y: auto; padding: 16px 14px; border-left: 1px solid rgba(255,255,255,.07); flex-direction: column; gap: 12px; scrollbar-width: thin; }
@media (min-width: 1240px) { .rail { display: flex; } }
.rcard { padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); display: grid; gap: 8px; font-size: .84rem; }
.rcard b { color: var(--text); font-weight: 600; }
.rcard p { margin: 0; color: var(--text-3); font-size: .8rem; }
.rk { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }
.rk i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
.online { display: flex; flex-wrap: wrap; gap: 6px; }
.online button { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; }
.online .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid #101215; }
.rcard--gold { border-color: rgba(242,193,78,.3); background: linear-gradient(180deg, rgba(242,193,78,.08), rgba(242,193,78,.02)); }
.prog { height: 6px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; } .prog i { display: block; height: 100%; background: var(--gold-grad); }
.rcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rcard li a { display: flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-size: .84rem; }
.rcard li a:hover { color: var(--gold-2); }
.rcard li svg { width: 15px; height: 15px; color: var(--gold); }

/* menus, popovers, modals */
.menu { position: fixed; z-index: 60; min-width: 200px; padding: 6px; border-radius: 14px; background: #171b21; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); animation: pop .2s var(--ease) both; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-decoration: none; text-align: left; font-size: .88rem; }
.menu button:hover, .menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.emojis { display: flex; gap: 2px; padding: 5px; }
.emojis button { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; font-size: 1.25rem; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.modal-bg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(100%, 520px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, #14171c, #0d0f12); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -40px rgba(0,0,0,.95); animation: pop .35s var(--ease) both; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal__head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }
.ucard { display: grid; justify-items: center; text-align: center; gap: 6px; }
.ucard h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; }
.ucard .muted { color: var(--text-3); font-size: .86rem; }
.ucard__badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ucard__bio { margin: 8px 0 0; color: var(--text-2); font-size: .9rem; }
.mod { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mod__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mlist { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.mlist button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: var(--text); }
.mlist button:hover { background: rgba(255,255,255,.05); }
.mlist small { color: var(--text-3); }
.rep { padding: 12px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 8px; font-size: .86rem; }
.rep blockquote { margin: 0; padding: 8px 10px; border-left: 2px solid var(--red); background: rgba(0,0,0,.25); border-radius: 0 8px 8px 0; color: var(--text-2); white-space: pre-wrap; }

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

/* ===================== MARKET ===================== */
.ticker { min-width: 0; display: none; }
@media (min-width: 760px) { .ticker { display: block; margin-left: 12px; } }
.sess-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 46vw; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: .78rem; color: var(--text-2); text-decoration: none; white-space: nowrap; overflow: hidden; }
.sess-pill:hover { border-color: rgba(242,193,78,.45); color: #fff; }
.sess-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(60,207,145,.15); flex-shrink: 0; animation: blink 2s infinite; }
.sess-pill i.off { background: #f2a14e; box-shadow: 0 0 0 4px rgba(242,161,78,.15); animation: none; }
.sess-pill b { color: var(--text); font-weight: 600; }
.sess-pill span { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.desk { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; }
.dk { border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 18px; min-width: 0; }
.dk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dk-h h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.dk--hero { display: grid; gap: 18px; background: radial-gradient(80% 120% at 0% 0%, rgba(242,193,78,.09), transparent 60%), rgba(255,255,255,.02); }
.dk-time { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -.04em; line-height: 1; margin: 8px 0 10px; font-variant-numeric: tabular-nums; }
.dk-state { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-2); }
.dk-state i { width: 8px; height: 8px; border-radius: 50%; background: #f2a14e; }
.dk-state.is-open i { background: var(--green); box-shadow: 0 0 0 4px rgba(60,207,145,.15); }
.dk-tl { position: relative; display: grid; gap: 7px; }
.tl-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; font-size: .76rem; color: var(--text-3); }
.tl-track { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.04); }
.tl-track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; opacity: .85; }
.tl-hours .tl-track { background: none; height: 14px; }
.tl-hours .tl-track span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: .62rem; white-space: nowrap; }
.tl-hours .tl-track span:first-child { transform: none; }
.tl-now { position: absolute; top: -4px; bottom: 16px; left: calc(88px + (100% - 88px) * var(--x, 0)); width: 2px; background: #fff; border-radius: 2px; box-shadow: 0 0 12px rgba(255,255,255,.6); pointer-events: none; }
.tl-now b { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; }
.dk-sess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .dk-sess { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sess { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.25); display: grid; gap: 4px; font-size: .8rem; }
.sess div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sess b { font-family: var(--font-display); font-size: .95rem; color: var(--text); }
.sess em { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; color: var(--text-3); border: 1px solid var(--line-2); }
.sess.live { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.sess.live em { color: #0b0c0f; background: var(--c); border-color: var(--c); }
.sess span { color: var(--text-2); font-variant-numeric: tabular-nums; } .sess small { color: var(--text-3); }
.dk-chart { height: min(62vh, 560px); min-height: 380px; border-radius: 12px; overflow: hidden; background: #0b0d10; }
.tv { height: 100%; display: flex; flex-direction: column; }
.tv .tradingview-widget-container__widget { flex: 1; min-height: 0; }
.tv__credit { font-size: .68rem; padding-top: 4px; text-align: right; } .tv__credit a { color: var(--text-3); text-decoration: none; }
.tv-fallback { display: grid; place-items: center; height: 100%; min-height: 120px; padding: 16px; text-align: center; color: var(--text-3); font-size: .86rem; border: 1px dashed var(--line-2); border-radius: 12px; }
.mini-tv { height: 200px; }
.dk-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dk--cal { grid-column: 1 / -1; } .dk-calw { height: 460px; }
.dk-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dk-times li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.dk-times li:hover { background: rgba(255,255,255,.03); }
.dk-times time { font-family: var(--font-mono); font-size: .8rem; color: var(--gold-2); padding-top: 1px; }
.dk-times b { display: block; font-size: .9rem; font-weight: 600; } .dk-times small { color: var(--text-3); font-size: .78rem; }
.dk-times li.past { opacity: .45; }
.dk-note { margin: 0; font-size: .76rem; color: var(--text-3); text-align: center; }
.poll { display: grid; gap: 7px; margin-top: 4px; }
.pb { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); font-size: .86rem; text-align: left; }
.pb:hover { border-color: rgba(242,193,78,.45); }
.pb i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; transition: width .8s var(--ease); }
.pb--bull i { background: rgba(60,207,145,.22); } .pb--bear i { background: rgba(239,106,91,.22); } .pb--neutral i { background: rgba(255,255,255,.1); }
.pb span, .pb em { position: relative; font-style: normal; } .pb em { font-weight: 600; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.pb.mine { border-color: rgba(242,193,78,.65); box-shadow: inset 0 0 0 1px rgba(242,193,78,.25); }
.calc { display: grid; gap: 14px; }
.calc__out { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.calc__big { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .calc__big span { color: var(--text-3); font-size: .82rem; }
.calc__big b { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.03em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc__row { display: flex; justify-content: space-between; font-size: .84rem; color: var(--text-2); } .calc__row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.warn { margin: 4px 0 0; font-size: .8rem; color: #f2c38e; }
input[type=number] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dk-times time small { display: block; font-size: .64rem; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.top > * { flex-shrink: 0; } .top .brandline { min-width: 0; flex-shrink: 1; overflow: hidden; }
@media (max-width: 520px) { .top { gap: 6px; padding-left: 10px; padding-right: 10px; } .top .brandline small { display: none; } .top .brandline b { font-size: .8rem; letter-spacing: 0; } .top .iconbtn { width: 36px; height: 36px; } }
.celebrate { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 4px 4px; }
.celebrate img { filter: drop-shadow(0 24px 40px rgba(242,193,78,.35)); animation: coinIn 1.6s var(--ease) both; }
.celebrate h2 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -.03em; line-height: 1.1; }
.celebrate p { margin: 0 0 10px; color: var(--text-2); }
.modal-bg--celebrate .modal { background: radial-gradient(90% 70% at 50% 0%, rgba(242,193,78,.16), transparent 70%), linear-gradient(180deg, #14171c, #0d0f12); }
.members-only { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.3); }
.members-only svg { width: 14px; height: 14px; }
.gate__join { margin-top: 4px; }
.onb__hero { grid-template-columns: 88px 1fr; }
.onb__logo, .celebrate__logo { border-radius: 24px; filter: drop-shadow(0 18px 36px rgba(242,193,78,.28)); animation: logoIn 1.1s var(--ease) both; }
.celebrate__logo { margin-bottom: 6px; }
@keyframes logoIn { from { opacity: 0; transform: translateY(14px) scale(.92); } }

/* ===================== JOURNAL ===================== */
.jr-top { display: grid; gap: 14px; }
.jr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .jr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .jr-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.jr-stat { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--line); display: grid; gap: 2px; }
.jr-stat span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.jr-stat b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.up { color: var(--green); } .down { color: var(--red); }
.jr-curve { width: 100%; height: 140px; display: block; border-radius: 12px; background: rgba(0,0,0,.22); }
.jr-curve--empty { display: grid; place-items: center; color: var(--text-3); font-size: .86rem; border: 1px dashed var(--line-2); }
.jr-form { display: grid; gap: 12px; }
.jr-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .jr-row { grid-template-columns: 1fr 1fr 1fr; } .jr-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jr-row--2 { grid-template-columns: 1fr 1fr; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: grid; place-items: center; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); font-weight: 600; font-size: .9rem; color: var(--text-2); }
.seg label:first-child input:checked + span { border-color: rgba(60,207,145,.6); background: rgba(60,207,145,.12); color: #8fe8c0; }
.seg label:last-child input:checked + span { border-color: rgba(239,106,91,.6); background: rgba(239,106,91,.12); color: #ffb1a7; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.jr-actions { display: flex; gap: 8px; }
.jr-list { display: grid; gap: 8px; }
.jr-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.jr-item__r { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-top: 2px; }
.jr-item__m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .76rem; color: var(--text-3); margin-bottom: 4px; }
.jr-item__c b { font-size: .92rem; } .jr-item__c p { margin: 3px 0 0; font-size: .86rem; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.jr-lesson { color: var(--gold-2) !important; }
.jr-item__a { display: flex; gap: 2px; }
.jr-item__a .iconbtn { width: 34px; height: 34px; }
@media (max-width: 560px) { .jr-item { grid-template-columns: 60px minmax(0, 1fr); } .jr-item__a { grid-column: 1 / -1; justify-content: flex-end; } }
.fd-dir { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; padding: 3px 7px; border-radius: 5px; font-weight: 500; }
.fd-dir--long { color: #3ccf91; background: rgba(60,207,145,.12); } .fd-dir--short { color: #ef6a5b; background: rgba(239,106,91,.12); }
.lead { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lead li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-2); }
.lead li b { margin-left: auto; color: var(--gold-2); font-weight: 600; }
.lead__n { width: 14px; font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }
.rail-link { font-size: .8rem; color: var(--gold-2); text-decoration: none; } .rail-link:hover { color: #fff; }
input[type=date].input { color-scheme: dark; }
.pw { position: relative; }
.pw .input { padding-right: 50px; }
.pw__eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); }
.pw__eye:hover, .pw__eye.on { color: var(--gold-2); background: rgba(255,255,255,.05); }

/* ===================== PHASE 1 MARKET TOOLS ===================== */
.cd { display: grid; gap: 6px; }
.cd .rk i { width: 7px; height: 7px; border-radius: 50%; background: #f2a14e; animation: blink 1.6s infinite; }
.cd b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; }
.cd__t { color: var(--text-2); font-size: .9rem; } .cd__t em { font-style: normal; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.cd__m { font-size: .78rem; color: var(--text-3); } .cd__m a { color: var(--text-2); }
.cd__btn { justify-self: start; margin-top: 4px; }
.cd--soon { animation: soon 1.6s ease-in-out infinite; } @keyframes soon { 50% { box-shadow: 0 0 0 4px rgba(242,161,78,.18); } }
.rcard--cd { border-color: rgba(242,161,78,.3); background: linear-gradient(180deg, rgba(242,161,78,.07), rgba(242,161,78,.01)); }
.rcard--cd .cd b { font-size: 1rem; }
.feed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.feed i { width: 7px; height: 7px; border-radius: 50%; background: #8a8983; }
.feed--live i { background: var(--green); box-shadow: 0 0 0 3px rgba(60,207,145,.18); } .feed--live { color: #8fe8c0; }
.feed--delayed i { background: #f2a14e; } .feed--delayed { color: #f2c38e; }
.feed--stale i { background: var(--red); } .feed--stale { color: #ffb1a7; }
.lv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lv-card { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.26); display: grid; gap: 3px; min-width: 0; }
.lv-card > span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lv-card b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lv-card small { font-size: .74rem; color: var(--text-3); line-height: 1.35; }
.lv-card.big { border-color: rgba(242,193,78,.35); background: linear-gradient(180deg, rgba(242,193,78,.09), rgba(242,193,78,.02)); }
.lv-card.big b { font-size: 1.55rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pos { position: relative; display: block; height: 4px; margin: 4px 0 5px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #8a8983, var(--green)); opacity: .8; }
.pos i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0b0d10; }
.ses-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ses-card { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.24); display: grid; gap: 8px; box-shadow: inset 3px 0 0 var(--c); }
.ses-card__h { display: flex; justify-content: space-between; align-items: center; }
.ses-card__h b { font-family: var(--font-display); font-size: 1rem; }
.ses-card__h em { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--text-3); }
.ses-card__h em.on { color: #0b0c0f; background: var(--c); border-color: var(--c); }
.ses-card__v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ses-card__v span { font-size: .7rem; color: var(--text-3); display: grid; } .ses-card__v b { font-size: .98rem; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.ses-card small { font-size: .74rem; color: var(--text-3); } .ses-card__next { color: var(--text-2) !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-t { min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); font-size: .76rem; }
.chip-t:hover { color: #fff; }
.chip-t.on { color: var(--text); border-color: color-mix(in srgb, var(--c, #f2c14e) 70%, transparent); background: color-mix(in srgb, var(--c, #f2c14e) 12%, transparent); }
.lv-chart { position: relative; height: min(56vh, 460px); min-height: 300px; border-radius: 12px; overflow: hidden; background: #0b0d10; }
.lv-chart canvas { display: block; touch-action: pan-y; }
.lvc-tip { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: 9px; background: rgba(23,27,33,.92); border: 1px solid var(--line-2); font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.lvc-tip b { color: var(--text); margin-right: 6px; }
.vol { display: grid; gap: 10px; margin-bottom: 10px; }
.vol__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 70px 70px; gap: 10px; align-items: center; font-size: .84rem; }
.vol__row b { font-family: var(--font-mono); font-size: .74rem; color: var(--text-2); }
.vol__bar { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.vol__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; transition: width .8s var(--ease); }
.vol__mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.4); }
.vol__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.vol__row em { font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 3px 0; border-radius: 6px; }
i.vol--low { background: #8fd3ff; } i.vol--normal { background: var(--green); } i.vol--high { background: #f2a14e; } i.vol--extreme { background: var(--red); }
em.vol--low { color: #8fd3ff; background: rgba(143,211,255,.1); } em.vol--normal { color: #8fe8c0; background: rgba(60,207,145,.1); } em.vol--high { color: #f2c38e; background: rgba(242,161,78,.12); } em.vol--extreme { color: #ffb1a7; background: rgba(239,106,91,.14); }
.trend { display: grid; gap: 8px; margin-bottom: 12px; }
.trend__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(0,0,0,.24); border: 1px solid var(--line); font-size: .8rem; }
.trend__row b { font-family: var(--font-mono); font-size: .74rem; color: var(--text-2); }
.trend__row em { font-style: normal; font-weight: 700; font-size: .84rem; }
.trend__row span { grid-column: 1 / -1; color: var(--text-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
.trend__row small { font-size: .72rem; }
.tv-bullish { color: #6fe0ae; } .tv-bearish { color: #ff9a8d; } .tv-mixed { color: var(--text-2); }

.trend__cfg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trend__cfg .hint { flex: 1 1 100%; }
.trend__cfg label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-2); }
.trend__cfg .input { width: 76px; min-height: 36px; padding: 6px 10px; }
.cal { display: grid; gap: 2px; margin-bottom: 10px; }
.cal__day { margin: 12px 0 4px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.cal__row { display: grid; grid-template-columns: 74px 64px 12px minmax(0, 1fr) auto 70px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: .84rem; }
.cal__row:hover { background: rgba(255,255,255,.03); }
.cal__row time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cal__ccy { font-size: .76rem; color: var(--text-3); white-space: nowrap; }
.cal__t { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal__t:hover { color: var(--gold-2); text-decoration: underline; }
.cal__n { font-size: .74rem; color: var(--text-3); white-space: nowrap; display: flex; gap: 8px; }
.cal__cd { text-align: right; font-size: .74rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cal__row.past { opacity: .45; }
.cal__row.next { background: rgba(242,161,78,.08); box-shadow: inset 2px 0 0 #f2a14e; } .cal__row.next .cal__cd { color: #f2c38e; font-weight: 600; }
.imp { width: 10px; height: 10px; border-radius: 3px; background: #4a4a46; }
.imp--high { background: var(--red); } .imp--med { background: #f2a14e; } .imp--low { background: #8a8983; } .imp--hol { background: #8fd3ff; }
@media (max-width: 720px) { .cal__row { grid-template-columns: 62px 12px minmax(0, 1fr) 58px; } .cal__ccy, .cal__n { display: none; } }
.dfeed { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dfeed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dfeed > div { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.24); display: grid; gap: 6px; align-content: start; }
.dfeed b { font-size: 1rem; } .dfeed small { font-size: .78rem; color: var(--text-3); line-height: 1.45; }
.trend__row small { grid-column: 3; grid-row: 1; white-space: nowrap; }
.trend__row span { grid-row: 2; }
.lc { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 10px; }
.lc-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lc-note { margin-left: auto; }
@media (max-width: 640px) { .lc-note { display: none; } .lc { padding: 10px; } }
.lc-box { flex: 1; min-height: 420px; border-radius: 14px; overflow: hidden; background: #0b0d10; border: 1px solid var(--line); }
.dk-golive { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); border-color: rgba(242,193,78,.3); background: linear-gradient(90deg, rgba(242,193,78,.08), rgba(242,193,78,.01)); transition: border-color .2s, transform .2s; }
.dk-golive:hover { color: var(--text); border-color: rgba(242,193,78,.6); transform: translateY(-1px); }
.dk-golive > span { font-size: 1.6rem; } .dk-golive div { flex: 1; display: grid; gap: 2px; } .dk-golive small { color: var(--text-3); font-size: .82rem; }
.dk-golive em { font-style: normal; font-size: 1.3rem; color: var(--gold-2); }

/* ===================== FLOORS ===================== */
.rg__k { display: flex; align-items: center; gap: 7px; }
.rg__k i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.rg__unlock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.rg__unlock svg { width: 10px; height: 10px; } .rg__unlock:hover { color: var(--gold-2); border-color: rgba(242,193,78,.5); }
.rm--locked { cursor: pointer; } .rm--locked:hover { color: var(--text-2); }
.rm__tier { font-style: normal; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); border: 1px solid currentColor; padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.rm__count { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.rm__soon { font-style: normal; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.floor-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); padding: 2px 7px; border-radius: 6px; font-weight: 500; }
.slow-sel { width: auto; min-height: 36px; padding: 4px 10px; font-size: .8rem; }
@media (max-width: 640px) { .slow-sel { display: none; } }
.path-hero { display: grid; gap: 16px; background: radial-gradient(70% 120% at 0% 0%, rgba(242,193,78,.09), transparent 60%), rgba(255,255,255,.02); }
@media (min-width: 900px) { .path-hero { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.path-hero h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -.03em; }
.path-hero p { margin: 0; color: var(--text-2); font-size: .9rem; }
.path-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.path-stats div { padding: 10px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); display: grid; gap: 2px; text-align: center; }
.path-stats b { font-family: var(--font-display); font-size: 1.3rem; } .path-stats span { font-size: .68rem; color: var(--text-3); }
.tower { display: grid; gap: 12px; position: relative; }
.floor { position: relative; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); display: grid; gap: 12px; opacity: .78; }
.floor.reached { opacity: 1; border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.floor.current { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 20px 60px -30px var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent); }
.floor.next { opacity: 1; border-style: dashed; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.floor__h { display: flex; align-items: center; gap: 12px; }
.floor__h div { flex: 1; display: grid; } .floor__h b { font-family: var(--font-display); font-size: 1.15rem; } .floor__h small { color: var(--text-3); font-size: .8rem; }
.floor__h em { font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.floor__n { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #0b0c0f; background: var(--c); flex-shrink: 0; }
.floor__n.big { width: 72px; height: 72px; border-radius: 20px; font-size: 2rem; }
.floor:not(.reached) .floor__n { background: transparent; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.floor__rooms { display: flex; flex-wrap: wrap; gap: 6px; } .floor__rooms span { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line); }
.req { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.req li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: .88rem; }
.req li b { font-weight: 600; } .req li small { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: .78rem; margin-top: 2px; }
.ck { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.req li.ok .ck { background: var(--green); border-color: var(--green); color: #0b0c0f; }
.pbar { display: inline-block; width: 90px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .pbar i { display: block; height: 100%; background: var(--c, var(--gold)); }
.req-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.modal--wide { width: min(100%, 720px); }
.exam { gap: 16px; } .exq { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); display: grid; gap: 6px; }
.exq legend { padding: 0 4px; font-weight: 600; font-size: .92rem; } .exq legend span { color: var(--gold-2); }
.exq label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: .88rem; color: var(--text-2); }
.exq label:hover { background: rgba(255,255,255,.04); } .exq input { accent-color: var(--gold); margin-top: 3px; }
.exq label:has(input:checked) { background: rgba(242,193,78,.1); color: var(--text); }
.exam-score { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -.04em; color: var(--red); } .exam-score.ok { color: var(--green); }
.rev { display: grid; gap: 12px; } .rev__h { display: flex; gap: 12px; align-items: center; } .rev__h div { display: grid; } .rev__h small { color: var(--text-3); font-size: .8rem; }
.rev__item { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); } .rev__item p { margin: 6px 0 0; white-space: pre-wrap; font-size: .88rem; color: var(--text-2); }
.rev__item p { overflow-wrap: anywhere; } .rg__k { white-space: nowrap; }

/* ---------- Drop 1: intel, news impact, risk lab ---------- */
.tabs2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tabs2 .hint { margin-left: auto; font-family: var(--font-mono); }
.tv-undefined { color: var(--text-2); }
.st-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-card__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.st-card__h b { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.02em; }
.st-card__h em { font-style: normal; font-size: .85rem; font-weight: 600; }
.st-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.st-row > span { color: var(--text-3); }
.st-row > b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.swl { font-family: var(--font-mono); font-size: .66rem; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--text-2); }
.evl { display: grid; gap: 2px; margin-bottom: 12px; }
.evl__r { display: grid; grid-template-columns: 48px 90px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .84rem; font-variant-numeric: tabular-nums; }
.evl__r time { color: var(--text-3); font-size: .76rem; }
.tfp { font-family: var(--font-mono); font-size: .66rem; text-align: center; padding: 3px 0; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); }
.lq-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .lq-grid { grid-template-columns: 3fr 2fr; } }
.lq-row { display: grid; grid-template-columns: 70px 1fr 80px 70px 110px; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.lq-row:nth-child(odd) { background: rgba(255,255,255,.015); }
.lq-side { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lq-row--buy .lq-side { color: #6fe0ae; } .lq-row--sell .lq-side { color: #ff9a8d; }
.lq-p { font-family: var(--font-mono); }
.lq { font-style: normal; font-size: .72rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); text-align: center; white-space: nowrap; }
.lq--swept { color: var(--gold-2); border-color: rgba(242,193,78,.45); background: rgba(242,193,78,.08); }
.lq--broken { color: var(--cyan); border-color: rgba(69,214,196,.4); background: rgba(69,214,196,.07); }
.lq-price { margin: 6px 0; padding: 8px 12px; border-radius: 10px; text-align: center; font-family: var(--font-mono); font-size: .8rem; color: #17130a; background: var(--gold-grad); }
.cf-hero { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .cf-hero { grid-template-columns: 2fr 1fr; } }
.cf-track { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(239,106,91,.75), rgba(255,255,255,.08) 50%, rgba(60,207,145,.75)); }
.cf-track i { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold-grad); box-shadow: 0 0 0 4px rgba(242,193,78,.18), 0 6px 18px rgba(0,0,0,.6); transition: left .8s var(--ease); }
.cf-scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: .72rem; color: var(--text-3); }
.cf-hero .rk { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cf-score { display: block; font-family: var(--font-display); font-size: 3rem; letter-spacing: -.04em; line-height: 1.1; }
.cf-hero p { margin: 0; color: var(--text-2); }
.cf-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.cf-table th { text-align: left; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
.cf-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.cf-table small { color: var(--text-3); }
.sg { color: var(--text-3); } .sg.up { color: var(--green); } .sg.down { color: var(--red); }
.nw-list { display: grid; gap: 8px; margin-bottom: 12px; }
.nw-row { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.nw-row.hi { border-left: 3px solid var(--red); }
.nw-t { display: grid; gap: 2px; }
.nw-t time { font-size: .72rem; color: var(--text-3); font-family: var(--font-mono); }
.nw-t small { color: var(--text-3); font-size: .74rem; }
.nw-m { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.rk-form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
@media (min-width: 900px) { .rk-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rk-form .btn { grid-column: 1 / -1; }
.rk-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (min-width: 900px) { .rk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .rk-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rk-hist { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 0 2px; }
.rk-hist i { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; }
.rk-hist i.pos { background: linear-gradient(180deg, #ffd978, rgba(242,193,78,.35)); }
.rk-hist i.neg { background: linear-gradient(180deg, #ef6a5b, rgba(239,106,91,.3)); }
.rk-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: .72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
@media (min-width: 800px) { .rec { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rec div { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); text-align: center; }
.rec span { display: block; color: var(--red); font-family: var(--font-mono); font-size: .8rem; }
.rec b { font-family: var(--font-display); font-size: 1.15rem; }
@media (max-width: 640px) {
  .lq-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .lq-row .lq-side { grid-column: 1 / -1; }
  .evl__r { grid-template-columns: 44px 1fr; }
  .evl__r span, .evl__r time { grid-column: 2; }
  .cf-table { font-size: .76rem; }
  .cf-table th, .cf-table td { padding: 7px 3px; }
  .st-row { flex-direction: column; gap: 2px; } .st-row > b { text-align: left; }
}
.st-row > span { white-space: nowrap; }
.st-row > b small { display: block; color: var(--text-3); font-size: .74rem; font-weight: 400; }
.lq-row { grid-template-columns: 82px 1fr 84px 70px; }
.lq-near { margin: 0 0 10px; font-size: .86rem; color: var(--text-2); }
.lq-empty { padding: 8px 10px; margin: 0; }
.tk { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.tk b { display: block; font-weight: 600; font-size: .86rem; font-variant-numeric: tabular-nums; }
.tk small { color: var(--text-3); font-size: .74rem; }
@media (max-width: 640px) { .lq-row { grid-template-columns: 1fr auto auto; } .tk { grid-template-columns: 40px 1fr; } .tk .lq { grid-column: 2; justify-self: start; } }
@media (min-width: 1100px) { .lq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tk { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
.tk small { display: block; margin: 2px 0 6px; }
.tk .lq { display: inline-block; }

/* ---------- Drop 2: correlations, planner, mindset, peer reviews ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.input--sm { min-height: 34px; width: auto; padding: 4px 10px; font-size: .82rem; }
.cr-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .cr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-card__h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cr-card__h b { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.cr-card__h small { color: var(--text-3); font-size: .74rem; }
.cr-last { font-family: var(--font-mono); font-size: .95rem; }
.cr-chg { margin: 10px 0 12px; font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cr-k { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-k > div { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); display: grid; gap: 2px; }
.cr-k span { font-size: .68rem; color: var(--text-3); }
.cr-k b { font-family: var(--font-display); font-size: 1.3rem; }
.cr-k em { font-style: normal; font-size: .74rem; color: var(--text-2); }
.cr-svg { width: 100%; height: 200px; display: block; }
.cr-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .76rem; color: var(--text-2); }
.cr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: rgba(255,255,255,.08); }
.cr-legend i.ok { background: var(--green); } .cr-legend i.warn { background: var(--gold); } .cr-legend i.bad { background: var(--red); }
.cr-read { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; }
.pl-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .pl-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .pl-val { position: sticky; top: 0; } }
.pl-form, .md-form, .rv-form { display: grid; gap: 14px; }
.pl-row3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
@media (max-width: 640px) { .pl-row3 { grid-template-columns: 1fr 1fr; } .pl-row3 > [style*="span 2"] { grid-column: 1 / -1 !important; } }
.pl-size { display: flex; align-items: center; min-height: 46px; font-family: var(--font-mono); font-size: .82rem; color: var(--gold-2); }
.pl-checks { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; display: grid; gap: 8px; }
.pl-checks legend { padding: 0 6px; }
.pl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-score { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.pl-score p { margin: 2px 0 0; }
.pl-ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,.07) 0); position: relative; }
.pl-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.pl-ring b { position: relative; font-family: var(--font-display); font-size: 1.5rem; }
.pl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-items li { padding: 10px 12px 10px 36px; border-radius: 12px; font-size: .86rem; line-height: 1.45; position: relative; background: rgba(255,255,255,.02); border: 1px solid var(--line); }
.pl-items li::before { position: absolute; left: 12px; top: 10px; font-weight: 700; }
.pl-ok::before { content: "✓"; color: var(--green); } .pl-warn::before { content: "!"; color: var(--gold); } .pl-bad::before { content: "✕"; color: var(--red); } .pl-info::before { content: "i"; color: var(--cyan); font-family: var(--font-mono); }
.pl-bad { border-color: rgba(239,106,91,.35) !important; } .pl-warn { border-color: rgba(242,193,78,.25) !important; }
.pl-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--text-2); margin-bottom: 12px; }
.pl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.pl-item__m em { font-style: normal; color: var(--text-2); }
.pl-item__m small { display: block; color: var(--text-3); font-size: .74rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pl-item__m p { margin: 6px 0 0; font-size: .84rem; color: var(--text-2); }
.pl-item__a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.pl-st { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); }
.pl-st--taken { color: var(--green); border-color: rgba(60,207,145,.4); } .pl-st--skipped { color: var(--text-2); }
.pl-r { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--text-3); }
.pl-r .input { width: 80px; min-height: 32px; padding: 4px 8px; }
@media (max-width: 640px) { .pl-item { grid-template-columns: 1fr; } .pl-item__a { justify-content: flex-start; } }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg input:checked + span { color: var(--gold-2); border-color: rgba(242,193,78,.6); background: rgba(242,193,78,.1); }
.sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sc label { position: relative; cursor: pointer; }
.sc input { position: absolute; opacity: 0; }
.sc span { display: grid; place-items: center; gap: 0; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); font-size: .72rem; color: var(--text-3); text-align: center; }
.sc span b { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-2); }
.sc input:checked + span { border-color: rgba(242,193,78,.6); background: rgba(242,193,78,.1); color: var(--gold-2); }
.sc input:checked + span b { color: var(--gold-2); }
.sc input:focus-visible + span, .md-chip input:focus-visible + span, .stars input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.md-breaks { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip { position: relative; cursor: pointer; }
.md-chip input { position: absolute; opacity: 0; }
.md-chip span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .8rem; color: var(--text-2); }
.md-chip input:checked + span { color: #ffb4aa; border-color: rgba(239,106,91,.55); background: rgba(239,106,91,.1); }
.md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.md-kpis small { font-size: .68rem; }
.md-heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.md-heat i { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.05); }
.md-heat i.ok { background: rgba(60,207,145,.75); } .md-heat i.warn { background: rgba(242,193,78,.75); } .md-heat i.bad { background: rgba(239,106,91,.8); }
.md-h4 { margin: 18px 0 10px; font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.md-h4:first-child { margin-top: 0; }
.md-bar { display: grid; grid-template-columns: 130px 1fr 26px; gap: 10px; align-items: center; font-size: .8rem; margin-bottom: 6px; }
.md-bar i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(239,106,91,.9), rgba(239,106,91,.4)); }
.md-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.md-cmp { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 900px) { .md-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.md-pair > div { display: grid; gap: 2px; }
.md-pair > div:last-child { text-align: right; }
.md-pair span { font-size: .74rem; color: var(--text-3); }
.md-pair b { font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.md-pair em { font-style: normal; font-size: .7rem; color: var(--text-3); }
.rv-new { margin-left: auto; }
.rv-wrap { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .rv-wrap { grid-template-columns: minmax(0, 1fr) 300px; } .rv-side { position: sticky; top: 0; } }
#rvFeed { display: grid; gap: 14px; }
.rv h3 { margin: 12px 0 8px; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; }
.rv__h { display: flex; gap: 10px; align-items: center; }
.rv__h > div:nth-child(2) { flex: 1; min-width: 0; }
.rv__h small { display: block; color: var(--text-3); font-size: .74rem; }
.rv__score { text-align: center; padding: 6px 12px; border-radius: 12px; background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.3); }
.rv__score b { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-2); line-height: 1.1; }
.rv__score small { font-size: .66rem; color: var(--text-3); }
.rv__score--none { background: transparent; border-color: var(--line); }
.rv__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; align-items: center; }
.rv__img { display: block; margin: 12px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.rv__img img { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.rv__th { white-space: pre-wrap; font-size: .9rem; line-height: 1.55; margin: 10px 0; }
.rv__q { font-size: .86rem; color: var(--text-2); margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(242,193,78,.05); border-radius: 0 10px 10px 0; }
.rv__bars { display: grid; gap: 6px; margin: 10px 0; }
.rv__bars > div { display: grid; grid-template-columns: 76px 1fr 30px; gap: 10px; align-items: center; font-size: .78rem; color: var(--text-2); }
.rv__bars i { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.rv__bars s { display: block; height: 100%; background: var(--gold-grad); text-decoration: none; }
.rv__bars b { text-align: right; }
.rv__cm { display: grid; gap: 10px; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.rv__c { display: flex; gap: 10px; }
.rv__c p { margin: 2px 0 0; font-size: .86rem; white-space: pre-wrap; }
.rv__mentor { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #c9a7ff; border: 1px solid rgba(201,167,255,.45); padding: 1px 6px; border-radius: 999px; }
.rv__own { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.rv__rate { border-top: 1px solid var(--line); padding-top: 10px; }
.rv__rate summary { cursor: pointer; font-weight: 600; color: var(--gold-2); font-size: .88rem; }
.rv__rf { display: grid; gap: 10px; margin-top: 12px; }
.rv__rrow { display: flex; align-items: center; gap: 12px; font-size: .84rem; }
.rv__rrow > span { width: 80px; color: var(--text-2); }
.stars { display: flex; gap: 2px; flex-direction: row-reverse; justify-content: flex-end; }
.stars label { position: relative; cursor: pointer; }
.stars input { position: absolute; opacity: 0; }
.stars span { font-size: 1.5rem; line-height: 1; color: rgba(255,255,255,.15); transition: color .15s; padding: 0 2px; }
.stars label:hover span, .stars label:hover ~ label span, .stars input:checked + span, .stars label:has(input:checked) ~ label span { color: var(--gold); }
.rv__top { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: .84rem; }
.rv__top > span { width: 16px; color: var(--text-3); font-family: var(--font-mono); font-size: .76rem; }
.rv__top b { flex: 1; font-weight: 500; }
.rv__top small { color: var(--text-3); }

/* ---------- country flags ---------- */
.av { position: relative; }
.av__flag { position: absolute; right: -3px; bottom: -3px; width: 42%; height: 42%; min-width: 12px; min-height: 12px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-2, #0d0f12); background: #222; }
.av--lg .av__flag { width: 34%; height: 34%; }
.flagi { width: 1.1em; height: 1.1em; border-radius: 50%; object-fit: cover; vertical-align: -0.18em; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

/* ---------- mobile: tab bar, drawer, bottom sheets ---------- */
.tabbar { display: none; }
@media (max-width: 899px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); flex-shrink: 0; position: relative; z-index: 30; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); background: rgba(10,11,14,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text-3); font-size: .66rem; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; transition: color .2s, background-color .2s; }
  .tabbar svg { width: 21px; height: 21px; }
  .tabbar button.on { color: var(--gold-2); background: rgba(242,193,78,.08); }
  .tabbar button:active { transform: scale(.94); }
  .side { z-index: 50; width: min(86vw, 320px); border-radius: 0 22px 22px 0; }
  .scrim { z-index: 45; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .rm { min-height: 44px; font-size: .95rem; }
  .iconbtn, .chip-t { min-height: 40px; }
  .desk { padding: 14px 12px 24px; gap: 12px; }
  .dk { padding: 14px; border-radius: 16px; }
  .head { padding-left: 14px; padding-right: 14px; }
  .main, .desk, .side__scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  html, body { overscroll-behavior-y: none; }
  button, a, .rm, .chip-t { -webkit-tap-highlight-color: transparent; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zooming into fields */
}
@media (max-width: 640px) {
  .modal-bg { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 20px 18px max(20px, env(safe-area-inset-bottom)); animation: sheetUp .38s var(--ease) both; }
  .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); margin: -8px auto 14px; }
  .tabs2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-bottom: 2px; }
  .tabs2::-webkit-scrollbar { display: none; }
  .tabs2 .chip-t { flex-shrink: 0; }
  .tabs2 .hint { display: none; }
  .rv-new { margin-left: 8px; flex-shrink: 0; }
  .cf-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal, .side, .tabbar button { animation: none !important; transition: none !important; } }

/* ---------- Community: today, pods, academy, reputation, owner ---------- */
.rk { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.td-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 22px; border-radius: 20px; border: 1px solid rgba(242,193,78,.22); background: radial-gradient(120% 140% at 0% 0%, rgba(242,193,78,.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.td-hero h2 { margin: 6px 0 4px; font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.02em; }
.td-hero p { margin: 0; }
.td-back { color: var(--gold-2); font-size: .9rem; }
.td-ring .pl-ring { width: 84px; height: 84px; }
.td-ring .pl-ring b { font-size: 1.2rem; }
.td-steps { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .td-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.td-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.22); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s, transform .15s; }
.td-step:hover { border-color: rgba(242,193,78,.4); color: var(--text); }
.td-step:active { transform: scale(.985); }
.td-step b { display: block; font-weight: 600; font-size: .92rem; }
.td-step small { color: var(--text-3); font-size: .76rem; }
.td-step em { font-style: normal; color: var(--text-3); font-size: 1.3rem; }
.td-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--gold-2); font-weight: 700; }
.td-ic svg { width: 20px; height: 20px; }
.td-step.ok { border-color: rgba(60,207,145,.3); background: rgba(60,207,145,.05); }
.td-step.ok .td-ic { background: rgba(60,207,145,.16); color: var(--green); }
.td-step.ok b { color: var(--text-2); }
.td-col { display: grid; gap: 16px; align-content: start; }
.br-b { padding: 12px 0; border-top: 1px solid var(--line); }
.br-b:first-of-type { border-top: 0; padding-top: 0; }
.br-b h4 { margin: 0 0 6px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; }
.br-b ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.5; }
.br-b--warn h4 { color: #ffb4aa; }
.al-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 10px; }
.al-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: .88rem; font-variant-numeric: tabular-nums; }
.al-sess { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 10px; }
.al-sess .lbl { width: 100%; font-size: .78rem; color: var(--text-2); }
/* pods */
.pod-join { max-width: 680px; }
.pod-join h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.02em; margin: 6px 0 8px; }
.pod-join > p { color: var(--text-2); line-height: 1.6; }
.pod-join .field { margin: 16px 0; }
.pod-how { margin: 16px 0 0; padding-left: 18px; color: var(--text-2); font-size: .86rem; display: grid; gap: 4px; }
.pod-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .pod-grid { grid-template-columns: minmax(0, 1fr) 300px; } .pod-side { position: sticky; top: 0; } }
.pod-side { display: grid; gap: 16px; }
.pod-main { display: flex; flex-direction: column; min-height: 0; }
.pd-feed { display: grid; gap: 4px; align-content: start; max-height: min(62vh, 640px); overflow-y: auto; padding: 4px 4px 8px 0; scrollbar-width: thin; overscroll-behavior: contain; }
.pd-post { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 8px; border-radius: 12px; }
.pd-post:hover { background: rgba(255,255,255,.02); }
.pd-post p { margin: 2px 0 0; font-size: .9rem; line-height: 1.5; word-wrap: break-word; }
.pd-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .84rem; }
.pd-h time { color: var(--text-3); font-size: .72rem; margin-left: 2px; }
.pd-host, .pd-k { font-style: normal; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.pd-host { color: var(--gold-2); border-color: rgba(242,193,78,.45); }
.pd-plan .pd-k { color: var(--cyan); border-color: rgba(69,214,196,.45); }
.pd-win .pd-k { color: var(--green); border-color: rgba(60,207,145,.45); }
.pd-lesson .pd-k { color: #c9a7ff; border-color: rgba(201,167,255,.45); }
.pd-help .pd-k { color: #ffb4aa; border-color: rgba(239,106,91,.45); }
.pd-sys { background: rgba(242,193,78,.06); border: 1px solid rgba(242,193,78,.18); }
.pd-bot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: #17130a; }
.pd-bot svg { width: 14px; height: 14px; }
.pd-del { margin-left: auto; border: 0; background: none; color: var(--text-3); padding: 2px; border-radius: 6px; opacity: .6; }
.pd-del svg { width: 14px; height: 14px; }
.pd-del:hover { opacity: 1; color: var(--red); }
.pd-comp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.pd-comp textarea { resize: none; min-height: 42px; max-height: 160px; line-height: 1.4; }
.pd-comp .btn { min-height: 42px; }
.pd-comp .btn svg { width: 18px; height: 18px; }
.pd-goal { padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.06); border: 1px solid rgba(242,193,78,.25); margin-bottom: 10px; }
.pd-gf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pd-goals { display: grid; gap: 6px; margin-top: 12px; }
.pd-g { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .82rem; color: var(--text-2); }
.pd-g.done span { text-decoration: line-through; text-decoration-color: rgba(60,207,145,.6); }
.pd-g b { color: var(--green); }
.pd-m { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; }
.pd-m b { font-weight: 600; font-size: .86rem; }
.pd-m small { display: block; color: var(--text-3); font-size: .72rem; }
.pd-hostbox { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.3); font-size: .84rem; line-height: 1.5; }
/* academy */
.ac-top { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .ac-top { grid-template-columns: 1fr 1fr; } }
.ac-top b { display: block; font-family: var(--font-display); font-size: 1.3rem; margin: 4px 0 10px; }
.ac-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: var(--gold-grad); border-radius: inherit; transition: width .8s var(--ease); }
.ac-list { display: grid; gap: 6px; }
@media (min-width: 900px) { .ac-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.22); color: var(--text); transition: border-color .2s, transform .15s; }
.ac-item:hover { border-color: rgba(242,193,78,.4); }
.ac-item:active { transform: scale(.985); }
.ac-item b { display: block; font-weight: 600; font-size: .9rem; }
.ac-item small { color: var(--text-3); font-size: .74rem; }
.ac-item em { font-style: normal; color: var(--text-3); font-size: 1.2rem; }
.ac-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .8rem; background: rgba(255,255,255,.05); color: var(--text-2); }
.ac-item.ok .ac-n { background: rgba(60,207,145,.16); color: var(--green); font-weight: 700; }
.ac-lesson { font-size: .95rem; line-height: 1.7; color: var(--text); }
.ac-lesson p { margin: 0 0 12px; }
.ac-lesson b { color: var(--gold-2); font-weight: 600; }
.qz { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.qz h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.qz-q { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; display: grid; gap: 6px; }
.qz-q legend { padding: 0 4px; font-weight: 600; font-size: .9rem; }
.qz-q.ok { border-color: rgba(60,207,145,.45); } .qz-q.bad { border-color: rgba(239,106,91,.45); }
.qz-a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: .88rem; }
.qz-a:hover { background: rgba(255,255,255,.03); }
.qz-a input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.qz-a.is-right { background: rgba(60,207,145,.08); }
.qz-e { margin: 4px 0 0; font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.cc { display: block; width: 100%; height: auto; margin: 10px 0; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.ch-q { font-size: .95rem; line-height: 1.55; margin: 0 0 6px; }
.ch-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ch-btns .btn { min-height: 50px; font-weight: 700; font-size: .95rem; }
.ch-up { background: rgba(60,207,145,.12); border: 1px solid rgba(60,207,145,.5); color: #6fe0ae; }
.ch-dn { background: rgba(239,106,91,.12); border: 1px solid rgba(239,106,91,.5); color: #ff9a8d; }
.ch-up:hover { background: rgba(60,207,145,.2); color: #6fe0ae; } .ch-dn:hover { background: rgba(239,106,91,.2); color: #ff9a8d; }
.ch-res { margin: 10px 0; padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.5; }
.ch-res.ok { background: rgba(60,207,145,.08); border: 1px solid rgba(60,207,145,.4); }
.ch-res.bad { background: rgba(239,106,91,.07); border: 1px solid rgba(239,106,91,.35); }
#drRes .btn { margin-top: 4px; }
.lib h3 { margin: 10px 0 8px; font-family: var(--font-display); font-size: 1.1rem; }
.lib__h { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.lib__h b { font-weight: 600; font-size: .86rem; }
.lib__h small { display: block; color: var(--text-3); font-size: .72rem; }
.lib__b { font-size: .9rem; line-height: 1.6; color: var(--text-2); max-height: 260px; overflow: auto; }
.lib__a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
#acBody { display: grid; gap: 14px; }
/* reputation */
.rp-top { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rp-top { grid-template-columns: 260px minmax(0, 1fr); } }
.rp-hero { display: grid; align-content: center; justify-items: start; gap: 4px; background: radial-gradient(120% 120% at 0% 0%, rgba(242,193,78,.14), transparent 60%), rgba(255,255,255,.02); border-color: rgba(242,193,78,.25); }
.rp-pts { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; letter-spacing: -.04em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-hero > span:last-child { color: var(--text-2); font-size: .85rem; }
.bdg { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .bdg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bdg__i { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); opacity: .55; }
.bdg__i i { grid-row: span 2; font-style: normal; font-size: 1.3rem; color: var(--text-3); }
.bdg__i b { font-size: .84rem; } .bdg__i small { font-size: .7rem; color: var(--text-3); }
.bdg__i.on { opacity: 1; border-color: rgba(242,193,78,.4); background: rgba(242,193,78,.06); }
.bdg__i.on i { color: var(--gold); }
.rp-row { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.rp-row > .av:first-child { grid-column: 2; }
.rp-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row em { font-style: normal; font-family: var(--font-mono); font-size: .78rem; color: var(--gold-2); }
.rp-row.me { background: rgba(242,193,78,.06); border-radius: 10px; }
.rp-n { font-family: var(--font-mono); font-size: .76rem; color: var(--text-3); text-align: center; }
.rp-parts { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
@media (min-width: 900px) { .rp-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-parts div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); font-size: .82rem; color: var(--text-2); }
.rp-parts b { font-family: var(--font-display); color: var(--text); }
.rp-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--text-2); }
@media (max-width: 640px) {
  .td-hero { padding: 18px 16px; }
  .td-ring .pl-ring { width: 64px; height: 64px; }
  .td-step { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 11px 12px; }
  .td-ic { width: 36px; height: 36px; }
  .al-form { grid-template-columns: 1fr 1fr; } .al-form .btn { grid-column: 1 / -1; }
  .pd-feed { max-height: 56vh; }
  .pd-comp { grid-template-columns: minmax(0, 1fr) auto; } .pd-comp select { grid-column: 1 / -1; width: 100%; }
  .rp-row { grid-template-columns: 22px 26px minmax(0, 1fr) auto; } .rp-row .chip-t { grid-column: 3 / -1; justify-self: start; }
  .ch-btns .btn { font-size: .86rem; }
}
.rp-top { align-items: start; } .rp-hero { min-height: 160px; }
/* all pods (staff) */
.pods-f { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.pods-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .pods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .pods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pods-c { display: grid; gap: 8px; text-align: left; color: var(--text); cursor: pointer; transition: border-color .2s, transform .15s; }
.pods-c:hover { border-color: rgba(242,193,78,.4); }
.pods-c:active { transform: scale(.99); }
.pods-c__h { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pods-c__h b { font-family: var(--font-display); font-size: 1.05rem; }
.pods-c > small { color: var(--text-3); font-size: .78rem; }
.pods-h { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
.pods-h--ok { color: var(--green); border-color: rgba(60,207,145,.45); } .pods-h--warn { color: var(--gold-2); border-color: rgba(242,193,78,.45); } .pods-h--bad { color: #ff9a8d; border-color: rgba(239,106,91,.45); }
.pods-av { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pods-av span { margin-left: 6px; font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); }
.pods-m { display: grid; gap: 2px; font-size: .78rem; color: var(--text-3); }
.pods-m b { color: var(--text-2); font-weight: 600; }
.pods-mem { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.pods-f .input { width: auto; min-width: 160px; }
.seg--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .seg--4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- living logo: soft breathing glow + rotating halo (matches the main site) ---------- */
.brandline { position: relative; isolation: isolate; }
.brandline img, .boot__mark img, .ucard > img { animation: xgGlow 3.2s ease-in-out infinite; will-change: filter; }
.onb__logo, .celebrate__logo { animation: logoIn 1.1s var(--ease) both, xgGlow 3.2s ease-in-out 1.1s infinite; }
.brandline::before { content: ""; position: absolute; z-index: -1; left: -6px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 16px;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, rgba(255,224,138,.75) 270deg, transparent 330deg);
  filter: blur(8px); opacity: .8; animation: xgSpin 4.5s linear infinite; pointer-events: none; }
.top .brandline::before { left: -5px; width: 42px; height: 42px; margin-top: -21px; }
.boot__mark { animation: none; position: relative; }
.boot__mark::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 22px; background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, rgba(255,224,138,.8) 270deg, transparent 330deg); filter: blur(10px); animation: xgSpin 2.2s linear infinite; }
@keyframes xgGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(242,193,78,.35)) drop-shadow(0 0 6px rgba(242,193,78,.15)); }
  50% { filter: drop-shadow(0 0 6px rgba(255,217,120,.9)) drop-shadow(0 0 18px rgba(242,193,78,.5)); }
}
@keyframes xgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brandline::before, .boot__mark::before { animation: none; } .brandline img, .onb__logo, .celebrate__logo, .boot__mark img { animation: none; filter: drop-shadow(0 0 5px rgba(242,193,78,.6)); } }
/* let the logo glow breathe: no clipping, a little room on the left; text still truncates on small screens */
.top .brandline { overflow: visible; padding-left: 8px; }
.top .brandline > span { min-width: 0; overflow: hidden; }
.top .brandline > span b, .top .brandline > span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .brandline::before { left: 3px; }
.rb-test { color: #ff9a8d; border-color: rgba(239,106,91,.55); background: rgba(239,106,91,.1); }

/* ---------- chat messages as tinted cards (each member's own colour) ---------- */
.msg { padding: 4px 10px; }
.msg:hover, .msg.hl { background: transparent; }
.msg__c { position: relative; padding: 9px 14px 10px; border-radius: 4px 16px 16px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc, #8a8983) 13%, #14171c), color-mix(in srgb, var(--mc, #8a8983) 7%, #111418));
  border: 1px solid color-mix(in srgb, var(--mc, #8a8983) 28%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--mc, #8a8983) 85%, #fff 0%);
  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--mc, #8a8983) 70%, transparent); transition: border-color .2s, box-shadow .2s; }
.msg:hover .msg__c, .msg.hl .msg__c { border-color: color-mix(in srgb, var(--mc, #8a8983) 45%, transparent); border-left-color: var(--mc, #8a8983); }
.msg__name { color: color-mix(in srgb, var(--mc, #f3f1ea) 55%, #fff); }
.msg__b { color: #ece9e1; }
.msg--compact { padding-top: 0; padding-bottom: 0; }
.msg--compact .msg__c { border-radius: 4px 16px 16px 4px; padding-top: 7px; padding-bottom: 8px; }
.msg + .msg--compact { margin-top: 3px !important; }
.msg--mine .msg__c { background: linear-gradient(180deg, color-mix(in srgb, var(--mc, #f2c14e) 17%, #15171b), color-mix(in srgb, var(--mc, #f2c14e) 9%, #111418)); }
.msg--pinned .msg__c { box-shadow: 0 0 0 1px rgba(242,193,78,.45), 0 8px 22px -16px rgba(242,193,78,.6); }
.msg--pinned { box-shadow: none; }
.msg__quote { background: rgba(0,0,0,.22); }
.msg__img { margin-top: 8px; }
.msg__tools { top: -16px; }
@media (max-width: 640px) { .msg { gap: 9px; grid-template-columns: 32px minmax(0, 1fr); } .msg > .av { width: 32px; height: 32px; } .msg__c { padding: 8px 12px 9px; } }
/* fixes from the test round */
.tabs2 { flex-shrink: 0; min-height: 40px; }
.tabs2 .chip-t { flex-shrink: 0; }
.blocked { margin: auto; max-width: 460px; text-align: center; padding: 48px 20px; display: grid; gap: 14px; justify-items: center; }
.blocked__i { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.3); color: var(--gold-2); }
.blocked__i svg { width: 24px; height: 24px; }
.blocked h2 { margin: 0; font-family: var(--font-display); }
.blocked p { margin: 0; color: var(--text-2); line-height: 1.6; }
.blocked .pl-actions { justify-content: center; }
.pd-alone { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: .84rem; color: var(--text-2); background: rgba(242,193,78,.06); border: 1px dashed rgba(242,193,78,.3); }
.gloss { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .86rem; }
.gloss summary { cursor: pointer; color: var(--gold-2); font-weight: 600; }
.gloss dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 10px 0; }
.gloss dt { font-weight: 700; color: var(--text); }
.gloss dd { margin: 0; color: var(--text-2); }
@media (max-width: 640px) { .gloss dl { grid-template-columns: 1fr; } .gloss dd { margin-bottom: 6px; } }
.head__actions .btn { white-space: nowrap; }

/* =====================================================================
   NEW NAVIGATION · 5 tabs (Home · Chats · People · Market · Me)
   glassy 3D chips, gold active state, butter-smooth motion
   ===================================================================== */
:root { --spring: cubic-bezier(.2, .9, .25, 1.15); --smooth: cubic-bezier(.22, 1, .36, 1); }
.side__scroll { padding: 14px 12px 18px; }
.nv5 { display: grid; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -26px rgba(0,0,0,.9); }
.nv { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 9px; border: 0; border-radius: 16px; background: transparent; color: var(--text-2); font: 600 .97rem/1 var(--font-display); letter-spacing: -.01em; text-align: left; cursor: pointer;
  transition: background-color .35s var(--smooth), color .25s, transform .35s var(--spring); -webkit-tap-highlight-color: transparent; }
.nv:hover { color: #fff; background: rgba(255,255,255,.04); transform: translateX(2px); }
.nv:active { transform: scale(.97); }
.nv__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-2);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.8);
  transition: background .35s var(--smooth), color .25s, box-shadow .35s, transform .45s var(--spring); }
.nv__ic svg { width: 19px; height: 19px; }
.nv:hover .nv__ic { transform: translateY(-1px) rotate(-4deg); }
.nv.on { color: #fff; background: linear-gradient(90deg, rgba(242,193,78,.16), rgba(242,193,78,.03)); }
.nv.on .nv__ic { color: #1a1406; background: linear-gradient(150deg, #ffe7a3 0%, #f2c14e 45%, #b8862b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(120,80,10,.55), 0 10px 24px -8px rgba(242,193,78,.65), 0 0 0 1px rgba(255,217,120,.35); transform: translateY(-1px); }
.nv.on::after { content: ""; position: absolute; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold); }
.nv__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 .7rem/1 var(--font-body); font-style: normal; color: #fff; background: linear-gradient(180deg, #ff7a6a, #e04a3a); box-shadow: 0 4px 12px -4px rgba(239,106,91,.8); }
.nv.on .nv__badge { margin-right: 14px; }
.ctx { display: grid; gap: 2px; animation: ctxIn .45s var(--smooth) both; }
@keyframes ctxIn { from { opacity: 0; transform: translateY(6px); } }
.ctx__k { margin: 14px 10px 6px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.ctx__k:first-child { margin-top: 2px; }
.ctx__i { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font-size: .92rem; text-align: left; cursor: pointer; transition: background-color .25s, color .25s, padding-left .3s var(--smooth); }
.ctx__i svg { width: 17px; height: 17px; opacity: .8; }
.ctx__i:hover { background: rgba(255,255,255,.04); color: #fff; padding-left: 15px; }
.ctx__i.on { color: var(--gold-2); background: rgba(242,193,78,.09); }
.ctx__i.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--gold-grad); box-shadow: 0 0 10px rgba(242,193,78,.7); }
.ctx__i em { margin-left: auto; }
.ctx .rg { margin-top: 6px; }
/* mobile floating tab bar */
@media (max-width: 899px) {
  .tabbar { position: relative; margin: 0 10px max(10px, env(safe-area-inset-bottom)); padding: 6px; border-radius: 24px; border: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(180deg, rgba(28,31,37,.86), rgba(14,16,20,.92)); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); }
  .tabbar button { position: relative; gap: 2px; padding: 7px 2px 6px; border-radius: 18px; font-size: .68rem; font-weight: 600; transition: color .25s, background-color .35s var(--smooth), transform .3s var(--spring); }
  .tabbar button svg { width: 22px; height: 22px; transition: transform .45s var(--spring); }
  .tabbar button.on { color: #1a1406; background: linear-gradient(150deg, #ffe7a3, #f2c14e 50%, #c9922f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -8px rgba(242,193,78,.75); }
  .tabbar button.on svg { transform: translateY(-1px) scale(1.06); }
  .tb__badge { position: absolute; top: 3px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font: 700 .6rem/16px var(--font-body); font-style: normal; color: #fff; background: #e04a3a; }
  .tb__badge:empty { display: none; }
}
.tb__badge:empty { display: none; }

/* hub pages (Market, Me): 3D tiles that tilt toward your cursor */
.hub { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); perspective: 1200px; }
.tile { --c: #f2c14e; position: relative; display: grid; gap: 6px; align-content: start; min-height: 160px; padding: 18px; border-radius: 22px; color: var(--text); text-decoration: none; overflow: hidden;
  background: radial-gradient(120% 90% at var(--mx, 0%) var(--my, 0%), color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), linear-gradient(180deg, #171a20, #101216);
  border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -30px rgba(0,0,0,.95), 0 18px 50px -40px var(--c);
  transform-style: preserve-3d; transition: transform .5s var(--smooth), border-color .3s, box-shadow .4s; animation: tileIn .6s var(--smooth) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tile:hover { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -28px rgba(0,0,0,.95), 0 24px 60px -30px var(--c); }
.tile:active { transform: scale(.98) !important; }
.tile__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 8px; color: #111;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25), 0 12px 24px -10px var(--c); transform: translateZ(30px); }
.tile__ic svg { width: 24px; height: 24px; }
.tile b { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.01em; transform: translateZ(20px); }
.tile small { color: var(--text-3); font-size: .86rem; line-height: 1.45; transform: translateZ(14px); }
.tile__go { position: absolute; right: 16px; top: 16px; font-size: 1.4rem; color: var(--text-3); transition: transform .35s var(--spring), color .25s; }
.tile:hover .tile__go { transform: translateX(3px); color: var(--c); }

/* ===================================================================== GROUPS · MESSAGES · PEOPLE */
.seg2 { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); align-self: start; }
.seg2__b { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .35s var(--smooth), color .25s; }
.seg2__b:hover { color: #fff; }
.seg2__b.on { color: #1a1406; background: linear-gradient(150deg, #ffe7a3, #f2c14e 55%, #c9922f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -6px rgba(242,193,78,.7); }
.seg2__b i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: .66rem; line-height: 18px; text-align: center; color: #fff; background: #e04a3a; }
.seg2__b i:empty { display: none; }
.hub-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hub-top h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; }
.hub-top p { margin: 0; color: var(--text-2); }
.sec { margin: 10px 2px 0; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.glist { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .35s var(--spring), border-color .25s, background .25s; }
.gcard:hover { color: var(--text); transform: translateY(-2px); border-color: rgba(242,193,78,.35); background: linear-gradient(180deg, rgba(242,193,78,.06), rgba(255,255,255,.015)); }
.gcard:active { transform: scale(.985); }
.gcard__e { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -3px 0 rgba(0,0,0,.3), 0 8px 18px -10px rgba(0,0,0,.9); }
.gcard__e--hash { font-family: var(--font-display); font-weight: 700; color: var(--gold-2); }
.gcard__t { display: grid; gap: 2px; min-width: 0; }
.gcard__t b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__t small { color: var(--text-3); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__t em { font-style: normal; color: var(--text-3); font-size: .74rem; }
.gcard__go { color: var(--text-3); font-size: 1.4rem; }
.gcard__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,193,78,.18), 0 0 12px rgba(242,193,78,.8); }
.pillbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 999px; font: 700 .86rem/1 var(--font-body); color: #1a1406; cursor: pointer; white-space: nowrap;
  background: linear-gradient(150deg, #ffe7a3, #f2c14e 55%, #c9922f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -8px rgba(242,193,78,.7); transition: transform .3s var(--spring), filter .2s; }
.pillbtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pillbtn:active { transform: scale(.95); }
.pillbtn:disabled { opacity: .6; }
.pillbtn svg { width: 15px; height: 15px; }
.pillbtn--ghost { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.empty-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 18px; border-radius: 20px; border: 1px dashed rgba(242,193,78,.3); background: rgba(242,193,78,.04); color: var(--text-2); }
.empty-card b { color: var(--text); font-size: 1.05rem; }
.morelink { display: flex; align-items: center; gap: 8px; color: var(--gold-2); font-weight: 600; text-decoration: none; padding: 6px 2px; }
.morelink svg { width: 18px; height: 18px; }
.live-pill { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px; color: #0b2a1d; background: var(--green); }
.safe { padding: 12px 14px; border-radius: 14px; font-size: .86rem; color: var(--text-2); background: rgba(69,214,196,.06); border: 1px solid rgba(69,214,196,.22); }
.safe--sm { margin: 0 14px; padding: 8px 12px; font-size: .78rem; }
.dmrow .av { width: 46px; height: 46px; }
.dmrow.unread b { color: #fff; } .dmrow.unread small { color: var(--text); }
.dmrow__r { display: grid; justify-items: end; gap: 6px; }
.dmrow__r time { color: var(--text-3); font-size: .74rem; }
/* chat screens (group + private) */
.desk--chat { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat__h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.chat__back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--text); font-size: 1.6rem; text-decoration: none; background: rgba(255,255,255,.05); flex-shrink: 0; }
.chat__e { font-size: 1.7rem; }
.chat__who { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; flex: 1; }
.chat__t { display: grid; min-width: 0; flex: 1; }
.chat__t b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__t small { color: var(--text-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__mem { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.05); align-items: center; }
.chat__mem span:last-child { color: var(--text-3); font-size: .78rem; margin-left: 4px; }
.chat__feed { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; overscroll-behavior: contain; }
.chat__join { padding: 14px 16px; display: flex; justify-content: center; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.cb { display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 10px; align-items: start; animation: msgIn .4s var(--smooth) both; }
.cb + .cb:not(.cb--c) { margin-top: 8px; }
.cb__sp { width: 26px; }
.cb__b { padding: 8px 13px 9px; border-radius: 4px 16px 16px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 14%, #15181d), color-mix(in srgb, var(--mc) 7%, #111418)); border: 1px solid color-mix(in srgb, var(--mc) 26%, transparent); border-left: 3px solid var(--mc); }
.cb--me .cb__b { background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 20%, #16181c), color-mix(in srgb, var(--mc) 10%, #121418)); }
.cb--c .cb__b { border-radius: 4px 16px 16px 4px; }
.cb__h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; margin-bottom: 2px; }
.cb__h b { color: color-mix(in srgb, var(--mc) 55%, #fff); }
.cb__h time { color: var(--text-3); font-size: .72rem; }
.cb__b p { margin: 0; font-size: .94rem; line-height: 1.5; color: #ece9e1; overflow-wrap: anywhere; }
.cb__x { border: 0; background: none; color: var(--text-3); opacity: 0; padding: 4px; border-radius: 8px; cursor: pointer; transition: opacity .2s; }
.cb:hover .cb__x, .cb__x:focus-visible { opacity: 1; }
@media (hover: none) { .cb__x { opacity: .55; } }
.cx { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); background: rgba(8,9,11,.6); backdrop-filter: blur(10px); }
.cx textarea { resize: none; min-height: 46px; max-height: 140px; padding: 12px 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font: inherit; line-height: 1.4; transition: border-color .2s, box-shadow .2s; }
.cx textarea:focus { outline: none; border-color: rgba(242,193,78,.6); box-shadow: 0 0 0 4px rgba(242,193,78,.12); }
.cx__send { width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #1a1406; cursor: pointer; background: linear-gradient(150deg, #ffe7a3, #f2c14e 55%, #c9922f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -6px rgba(242,193,78,.7); transition: transform .3s var(--spring); }
.cx__send:active { transform: scale(.9); }
.cx__send svg { width: 20px; height: 20px; }
/* sheets, create group, invite */
.sheet { display: grid; gap: 6px; }
.sheet button, .sheet a { display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; text-align: left; font: 600 .95rem/1.2 var(--font-body); color: var(--text); text-decoration: none; background: rgba(255,255,255,.05); cursor: pointer; transition: background .2s; }
.sheet button:hover, .sheet a:hover { background: rgba(255,255,255,.09); color: var(--text); }
.sheet .danger { color: #ff8f80; }
.cg { display: grid; gap: 14px; }
.cg__emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cg__e { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; font-size: 1.3rem; background: rgba(255,255,255,.04); cursor: pointer; transition: transform .25s var(--spring), border-color .2s, background .2s; }
.cg__e:hover { transform: translateY(-2px); }
.cg__e.on { border-color: rgba(242,193,78,.8); background: rgba(242,193,78,.14); transform: scale(1.06); box-shadow: 0 6px 16px -8px rgba(242,193,78,.8); }
.inv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.inv__share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.joincard { max-width: 420px; margin: 40px auto; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 32px 24px; border-radius: 28px; background: radial-gradient(120% 80% at 50% 0%, rgba(242,193,78,.16), transparent 60%), #121419; border: 1px solid rgba(242,193,78,.3); box-shadow: 0 40px 80px -40px rgba(0,0,0,.95), 0 30px 80px -50px rgba(242,193,78,.6); animation: tileIn .6s var(--smooth) both; }
.joincard__e { font-size: 3rem; }
.joincard h2 { margin: 0; font-family: var(--font-display); }
.joincard p { margin: 0; color: var(--text-2); }
.joincard .btn { width: 100%; }
/* people */
.pfilter { display: grid; gap: 10px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--text-2); font: 600 .84rem/1 var(--font-body); cursor: pointer; transition: all .25s var(--smooth); }
.chip:hover { color: #fff; }
.chip.on { color: #1a1406; border-color: transparent; background: linear-gradient(150deg, #ffe7a3, #f2c14e 55%, #c9922f); }
.pgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pcard { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 20px 14px 16px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), linear-gradient(180deg, #16191e, #101216);
  border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(255,255,255,.06)); transition: transform .4s var(--spring), border-color .25s, box-shadow .3s; animation: tileIn .5s var(--smooth) both; }
.pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 24px 50px -30px var(--c); }
.pcard__top { position: relative; margin-bottom: 6px; text-decoration: none; }
.pcard__n { font-size: 1rem; }
.pcard__m { color: var(--text-3); font-size: .8rem; }
.pcard__l { display: inline-block; margin: 4px 0 8px; padding: 3px 10px; border-radius: 999px; font: 600 .66rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.25); }
.av--lg { width: 72px; height: 72px; font-size: 1.6rem; box-shadow: 0 10px 24px -10px rgba(0,0,0,.9), 0 0 0 3px rgba(255,255,255,.06); }
.av--xl { width: 104px; height: 104px; font-size: 2.4rem; box-shadow: 0 16px 40px -14px rgba(0,0,0,.9), 0 0 0 4px rgba(255,255,255,.07), 0 0 60px -10px var(--c, transparent); }
.on-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(60,207,145,.2); margin-right: 5px; vertical-align: 0; }
.on-dot--av { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border: 2px solid #121419; margin: 0; }
.prof { max-width: 520px; margin: 0 auto; width: 100%; }
.prof__hero { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 30px 20px; border-radius: 28px; background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), #121419; border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.06)); margin-top: 10px; animation: tileIn .6s var(--smooth) both; }
.prof__hero h2 { margin: 6px 0 0; font-family: var(--font-display); }
.prof__m { margin: 0; color: var(--text-3); }
.prof__b { display: flex; gap: 6px; align-items: center; }
.prof__bio { margin: 4px 0; color: var(--text-2); max-width: 380px; }
.prof__hero .btn { min-width: 200px; }
@media (max-width: 640px) {
  .seg2 { width: 100%; } .seg2__b { flex: 1; justify-content: center; padding: 10px 6px; }
  .glist { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { padding: 16px 8px 14px; }
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 140px; padding: 14px; border-radius: 18px; }
  .tile__ic { width: 42px; height: 42px; } .tile small { font-size: .78rem; }
  .cg__emojis { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .hub-top .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nv, .nv__ic, .tile, .gcard, .pcard, .cb, .ctx, .joincard, .prof__hero { animation: none !important; transition: none !important; } }
.ld { display: grid; gap: 8px; }
.ld__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ld__r > div { display: grid; min-width: 0; } .ld__r a { color: var(--gold-2); overflow: hidden; text-overflow: ellipsis; }
.ld__r > span { color: var(--text-3); font-size: .8rem; }
.ld__r.done { opacity: .55; }
@media (max-width: 640px) { .ld__r { grid-template-columns: 1fr; gap: 6px; } }

/* =====================================================================
   Part 12 — game layer: sidebar, floor, calls, trades, questions, crews, levels, rules
   ===================================================================== */
:root { --up: #3ddc97; --down: #ff6b6b; --spring: cubic-bezier(.2, 1.4, .35, 1); }

/* ---------- sidebar ---------- */
.sgame { display: grid; gap: 10px; }
.lvc { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; text-decoration: none; color: var(--text); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%), linear-gradient(180deg, #171b21, #0f1215);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -22px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .5s var(--spring), box-shadow .3s; }
.lvc:hover { transform: translateY(-2px) scale(1.01); }
.lvc__ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; }
.lvc__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lvc__ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.lvc__ring .lvc__p { stroke: var(--c); stroke-linecap: round; transition: stroke-dasharray 1.2s var(--ease); filter: drop-shadow(0 0 4px var(--c)); }
.lvc__ring b { font-family: var(--font-display); font-size: 1.15rem; color: var(--c); }
.lvc__t { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.lvc__t small { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
.lvc__t b { font-family: var(--font-display); font-size: 1.08rem; }
.lvc__r { font-style: normal; font-size: .76rem; color: var(--text-2); }
.lvc__go { color: var(--text-3); font-size: 1.3rem; }
.cw { border-radius: 16px; padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.cw__h { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin-bottom: 8px; }
.cw__h a { text-transform: none; letter-spacing: 0; font-size: .74rem; text-decoration: none; }
.cw__s { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cw__s b { display: block; font-size: .92rem; } .cw__s small { color: var(--text-3); font-size: .74rem; }
.cw__f, .ss__f { font-size: 1.5rem; line-height: 1; }
.cw__btns, .ss__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw__mine { font-size: .82rem; font-weight: 600; padding: 8px 10px; border-radius: 10px; text-align: center; }
.cw__mine.up, .ss__mine, .mc em.up { color: var(--up); background: rgba(61,220,151,.08); }
.cw__mine.down, .mc em.down { color: var(--down); background: rgba(255,107,107,.08); }
.cbtn { min-height: 40px; border-radius: 12px; border: 1px solid; font-family: var(--font-display); font-weight: 700; font-size: .92rem; cursor: pointer; transition: transform .35s var(--spring), box-shadow .25s, background .2s; }
.cbtn.up { color: var(--up); border-color: rgba(61,220,151,.4); background: linear-gradient(180deg, rgba(61,220,151,.16), rgba(61,220,151,.04)); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 0 -2px rgba(61,220,151,.18); }
.cbtn.down { color: var(--down); border-color: rgba(255,107,107,.4); background: linear-gradient(180deg, rgba(255,107,107,.16), rgba(255,107,107,.04)); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 0 -2px rgba(255,107,107,.18); }
.cbtn:hover { transform: translateY(-2px); } .cbtn:active { transform: translateY(2px) scale(.98); box-shadow: none; }
.cbtn--s { min-height: 32px; min-width: 38px; padding: 0 8px; font-size: .8rem; }
.sg { display: grid; gap: 4px; }
.sg__k { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); font-family: var(--font-mono); }
.sg__k i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--text-3)); box-shadow: 0 0 10px var(--c, transparent); }
.si { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 6px 10px 6px 6px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--text-2); font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
  transition: background .25s, color .25s, transform .45s var(--spring), border-color .25s; }
.si__ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 10px -4px color-mix(in srgb, var(--c) 60%, transparent); transition: transform .45s var(--spring); }
.si__ic .i { width: 17px; height: 17px; }
.si__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si:hover { background: rgba(255,255,255,.04); color: var(--text); transform: translateX(2px); }
.si:hover .si__ic { transform: translateY(-1px) rotate(-6deg) scale(1.06); }
.si.on { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(255,255,255,.02)); border-color: color-mix(in srgb, var(--c) 28%, transparent); }
.si.on::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.si__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,193,78,.15); }
.si__n { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #17130a; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.sfl { display: flex; gap: 6px; padding: 0 4px; flex-wrap: wrap; }
.sfl__b { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: transparent; color: var(--c); font-size: .74rem; cursor: pointer; }
.sfl__b.locked { opacity: .6; color: var(--text-3); border-color: var(--line-2); }
.sfl__b .i { width: 12px; height: 12px; }
.sfoot { display: flex; gap: 6px; padding: 8px 4px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sfoot a { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-3); text-decoration: none; padding: 6px 8px; border-radius: 9px; }
.sfoot a:hover, .sfoot a.on { color: var(--gold-2); background: rgba(242,193,78,.06); }
.sfoot .i { width: 14px; height: 14px; }

/* ---------- shared bits ---------- */
.dk__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dk__h h3 { margin: 0; }
.dk__h a { font-size: .82rem; text-decoration: none; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-3); margin-bottom: 12px; flex-wrap: wrap; }
.crumbs a { color: var(--c, var(--gold-2)); text-decoration: none; } .crumbs b { color: var(--text-2); font-weight: 500; } .crumbs b a { color: inherit; }
.plain { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .9rem; display: grid; gap: 6px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seg3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg3 label { position: relative; cursor: pointer; }
.seg3 input { position: absolute; opacity: 0; }
.seg3 span { display: grid; place-items: center; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); font-weight: 700; font-family: var(--font-display); color: var(--text-2); transition: all .25s; }
.seg3 .up input:checked + span { color: var(--up); border-color: var(--up); background: rgba(61,220,151,.1); }
.seg3 .down input:checked + span { color: var(--down); border-color: var(--down); background: rgba(255,107,107,.1); }
.seg3 input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.crowd { display: grid; gap: 4px; margin: 8px 0; }
.crowd__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.crowd__bar i { display: block; height: 100%; transition: width 1s var(--ease); }
.crowd__bar .up { background: var(--up); } .crowd__bar .down { background: var(--down); }
.crowd small { color: var(--text-3); font-size: .76rem; }
em.ok, .ok > em { color: var(--up); font-style: normal; font-weight: 600; font-size: .8rem; }
em.no { color: var(--down); font-style: normal; font-weight: 600; font-size: .8rem; }
em.pend { color: var(--text-3); font-style: normal; font-size: .8rem; }
em.go { color: var(--gold-2); font-style: normal; font-size: .82rem; }

/* ---------- floor ---------- */
.lvtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lvtab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; font-size: .86rem; transition: all .3s; }
.lvtab b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #0b0c0e; background: var(--c); }
.lvtab.on { color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 8px 24px -14px var(--c); }
.lvtab.locked { opacity: .55; } .lvtab.locked b { background: var(--text-3); }
.lvtab .i { width: 13px; height: 13px; }
.fhero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 22px; margin-bottom: 14px;
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), linear-gradient(180deg, #14171c, #0d0f12); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.fhero h2 { margin: 2px 0 6px; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.03em; color: var(--c); }
.fhero p { margin: 0; color: var(--text-2); max-width: 36em; font-size: .92rem; }
.fhero__me { text-align: right; flex-shrink: 0; }
.fhero__me b { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fhero__me small { color: var(--text-3); font-size: .78rem; }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; perspective: 900px; }
.door { --mx: 50%; --my: 50%; position: relative; display: grid; gap: 6px; align-content: start; min-height: 170px; padding: 18px; border-radius: 20px; text-decoration: none; color: var(--text); overflow: hidden;
  background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), linear-gradient(180deg, #171b21, #0e1114);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 40px -28px rgba(0,0,0,.9);
  transition: transform .6s var(--spring), border-color .3s; transform-style: preserve-3d; animation: doorIn .7s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes doorIn { from { opacity: 0; transform: translateY(14px) rotateX(8deg); } }
.door:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.door__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--c); margin-bottom: 6px; transform: translateZ(30px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 12px 24px -10px color-mix(in srgb, var(--c) 70%, transparent); }
.door__ic .i { width: 24px; height: 24px; }
.door b { font-family: var(--font-display); font-size: 1.15rem; transform: translateZ(20px); }
.door small { color: var(--text-2); font-size: .85rem; line-height: 1.45; }
.door__go { margin-top: auto; padding-top: 8px; color: var(--c); font-size: .84rem; font-weight: 600; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-calls { display: grid; gap: 6px; }
.mc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.mc:last-child { border-bottom: 0; }
.mc.off { opacity: .5; } .mc em { font-style: normal; font-size: .8rem; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.mc__b { display: flex; gap: 6px; }
.top5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.top5 li { display: flex; align-items: center; gap: 10px; }
.top5 a { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.top5 a b { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top5__n { width: 20px; color: var(--text-3); font-family: var(--font-mono); font-size: .8rem; }
.top5 em { font-style: normal; font-family: var(--font-mono); color: var(--gold-2); }
.floorlock { text-align: center; padding: 40px 20px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent), #0f1215; }
.floorlock__i { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.floorlock h2 { font-family: var(--font-display); margin: 0 0 8px; } .floorlock p { color: var(--text-2); max-width: 32em; margin: 0 auto 16px; }
.floorlock .pl-actions { justify-content: center; }

/* ---------- calls ---------- */
.callhero, .crewhero, .ruleshero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border-radius: 20px; margin-bottom: 16px;
  background: radial-gradient(80% 140% at 0% 0%, rgba(242,193,78,.14), transparent 60%), linear-gradient(180deg, #15181d, #0e1013); border: 1px solid rgba(242,193,78,.2); }
.callhero h3, .crewhero h3, .ruleshero h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; }
.callhero p, .crewhero p, .ruleshero p { margin: 0; color: var(--text-2); font-size: .9rem; max-width: 40em; }
.callhero__s, .crewtop__s, .lvhero__s { display: flex; gap: 18px; flex-shrink: 0; }
.callhero__s div, .crewtop__s div, .lvhero__s div { text-align: center; }
.callhero__s b, .crewtop__s b, .lvhero__s b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.callhero__s small, .crewtop__s small, .lvhero__s small { color: var(--text-3); font-size: .74rem; }
.ssgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ss { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); transition: transform .5s var(--spring), border-color .3s; }
.ss:hover { transform: translateY(-2px); }
.ss.off { opacity: .55; }
.ss.done.up { border-color: rgba(61,220,151,.35); } .ss.done.down { border-color: rgba(255,107,107,.35); }
.ss__h { display: flex; align-items: center; gap: 12px; } .ss__h b { display: block; font-family: var(--font-display); font-size: 1.05rem; } .ss__h small { color: var(--text-3); font-size: .76rem; }
.ss__t { font-size: .86rem; color: var(--text-2); }
.ss__mine { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-family: var(--font-display); }
.ss.done.down .ss__mine { color: var(--down); background: rgba(255,107,107,.08); }
.ss .hint { font-size: .74rem; }
.liverow, .hist__r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.liverow > div, .hist__r > div { flex: 1; min-width: 0; } .liverow b, .hist__r b { display: block; font-size: .92rem; } .liverow small, .hist__r small { color: var(--text-3); font-size: .78rem; }
.hist { display: grid; gap: 6px; }
.hist__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(255,255,255,.05); color: var(--text-3); }
.hist__r.right .hist__i { background: rgba(61,220,151,.14); color: var(--up); } .hist__r.wrong .hist__i { background: rgba(255,107,107,.14); color: var(--down); }
.hist__r em { font-style: normal; font-family: var(--font-mono); font-size: .86rem; color: var(--text-3); }
.hist__r.right em { color: var(--up); } .hist__r.wrong em { color: var(--down); }
.callconf { text-align: center; } .callconf p { color: var(--text-2); }
.callconf__a { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; font-size: 1.8rem; margin: 4px auto 10px; }
.callconf.up .callconf__a { color: var(--up); background: rgba(61,220,151,.12); } .callconf.down .callconf__a { color: var(--down); background: rgba(255,107,107,.12); }
.callconf .pl-actions { justify-content: center; }

/* ---------- trades ---------- */
.tlist, .qlist, .alist, .vlist, .crewlist, .reqlist, .memlist, .lb { display: grid; gap: 10px; }
.tcard { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; color: var(--text); text-decoration: none; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); border-left: 3px solid var(--up); transition: transform .45s var(--spring), border-color .25s; }
.tcard.short { border-left-color: var(--down); }
.tcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tcard__h { display: flex; align-items: center; gap: 8px; font-size: .84rem; flex-wrap: wrap; } .tcard__h b { font-weight: 600; } .tcard__h time { color: var(--text-3); font-size: .78rem; } .tcard__h .tst { margin-left: auto; }
.tcard__t { display: flex; align-items: center; gap: 10px; } .tcard__t b { font-family: var(--font-display); font-size: 1.02rem; }
.tcard__f { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-3); } .tcard__f em { font-style: normal; color: var(--text-2); }
.dirp { display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; font-family: var(--font-mono); }
.dirp.long { color: var(--up); background: rgba(61,220,151,.12); } .dirp.short { color: var(--down); background: rgba(255,107,107,.12); }
.lvls { display: flex; flex-wrap: wrap; gap: 6px; }
.lvls span { padding: 5px 10px; border-radius: 9px; font-size: .78rem; color: var(--text-3); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.lvls b { color: var(--text); font-family: var(--font-mono); font-weight: 600; margin-left: 4px; }
.lvls .sl b { color: var(--down); } .lvls .tp b { color: var(--up); }
.lvls--big span { font-size: .86rem; padding: 8px 12px; }
.tst { font-size: .74rem; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.tst.open { color: var(--gold-2); background: rgba(242,193,78,.1); } .tst.wait { color: var(--text-2); background: rgba(255,255,255,.05); }
.tst.tp { color: var(--up); background: rgba(61,220,151,.1); } .tst.sl { color: var(--down); background: rgba(255,107,107,.1); } .tst.void { color: var(--text-3); background: rgba(255,255,255,.04); }
.tdet, .qdet { padding: 18px; border-radius: 20px; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); margin-bottom: 14px; display: grid; gap: 12px; }
.tdet__h, .qdet header { display: flex; align-items: center; gap: 10px; } .tdet__h > div, .qdet header > div { flex: 1; min-width: 0; }
.tdet__h b a, .qdet header b a { color: var(--text); text-decoration: none; } .tdet__h small, .qdet header small { display: block; color: var(--text-3); font-size: .78rem; }
.tdet h2, .qdet h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tdet__img img { width: 100%; border-radius: 14px; border: 1px solid var(--line); display: block; }
.tdet__w, .qdet p { margin: 0; color: var(--text-2); }
.vform { display: grid; gap: 10px; }
.vpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbtn { min-height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .3s var(--spring); }
.vbtn:hover { transform: translateY(-2px); }
.vbtn.tp.on { border-color: var(--up); background: rgba(61,220,151,.12); color: var(--up); box-shadow: 0 10px 24px -14px var(--up); }
.vbtn.sl.on { border-color: var(--down); background: rgba(255,107,107,.12); color: var(--down); box-shadow: 0 10px 24px -14px var(--down); }
.vrow, .arow { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.vrow > div, .arow > div { flex: 1; min-width: 0; }
.vrow.right { border-color: rgba(61,220,151,.3); } .vrow.wrong { border-color: rgba(255,107,107,.25); }
.vrow__h, .arow__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; } .arow__h time { color: var(--text-3); font-size: .76rem; }
.vrow p, .arow p { margin: 4px 0 0; color: var(--text-2); font-size: .9rem; }
.vtag { font-size: .74rem; padding: 2px 8px; border-radius: 999px; } .vtag.tp { color: var(--up); background: rgba(61,220,151,.1); } .vtag.sl { color: var(--down); background: rgba(255,107,107,.1); }

/* ---------- questions ---------- */
.qrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; color: var(--text); text-decoration: none; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); transition: transform .45s var(--spring); }
.qrow:hover { transform: translateY(-2px); }
.qrow > div { flex: 1; min-width: 0; } .qrow > div b { display: block; font-weight: 600; } .qrow small { color: var(--text-3); font-size: .78rem; }
.qrow__n { width: 52px; flex-shrink: 0; text-align: center; padding: 6px 0; border-radius: 12px; background: rgba(255,255,255,.04); }
.qrow__n b { display: block; font-family: var(--font-display); font-size: 1.1rem; } .qrow__n small { font-size: .66rem; }
.qrow.solved .qrow__n { background: rgba(61,220,151,.1); color: var(--up); }
.arow.acc { border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.05); }
.arow .pillbtn, .arow .linkbtn { margin-top: 8px; }

/* ---------- crews ---------- */
.crew { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: var(--text); text-decoration: none; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); transition: transform .45s var(--spring), border-color .25s; }
.crew:hover { transform: translateY(-2px); border-color: rgba(255,143,112,.35); }
.crew--mine { border-color: rgba(242,193,78,.4); background: radial-gradient(80% 140% at 0% 0%, rgba(242,193,78,.12), transparent 60%), #111418; }
.crew__e { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset; }
.crew__e--xl { width: 76px; height: 76px; font-size: 2.4rem; border-radius: 22px; }
.crew__t { flex: 1; min-width: 0; display: grid; gap: 2px; } .crew__t b { font-family: var(--font-display); font-size: 1.02rem; } .crew__t small { color: var(--text-2); font-size: .82rem; }
.crew__m { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-3); flex-wrap: wrap; }
.crew__r { text-align: right; display: grid; gap: 4px; justify-items: end; } .crew__r b { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-2); line-height: 1; } .crew__r small { color: var(--text-3); font-size: .68rem; } .crew__r em { font-style: normal; font-size: .78rem; color: var(--text-2); }
.seats { display: inline-flex; gap: 3px; font-style: normal; } .seats span { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.1); } .seats span.on { background: var(--gold); box-shadow: 0 0 6px rgba(242,193,78,.5); }
.seats--lg span { width: 12px; height: 12px; border-radius: 4px; } .seats--lg { margin-top: 8px; }
.crewtop { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 22px; margin-bottom: 12px; background: radial-gradient(80% 140% at 0% 0%, rgba(255,143,112,.14), transparent 60%), linear-gradient(180deg, #15181d, #0e1013); border: 1px solid var(--line-2); flex-wrap: wrap; }
.crewtop > div:nth-child(2) { flex: 1; min-width: 200px; } .crewtop h2 { margin: 0; font-family: var(--font-display); } .crewtop p { margin: 2px 0 4px; color: var(--text-2); } .crewtop small { color: var(--text-3); }
.crewacts { margin-bottom: 8px; }
.req2 { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line-2); display: grid; gap: 10px; }
.req2__h { display: flex; gap: 10px; align-items: center; } .req2__h b a { color: var(--text); text-decoration: none; } .req2__h small { display: block; color: var(--text-3); font-size: .76rem; }
.req2__n { margin: 0; color: var(--text-2); font-style: italic; }
.mem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--line); }
.mem__n { width: 20px; color: var(--text-3); font-family: var(--font-mono); font-size: .8rem; }
.mem__w { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; } .mem__w b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capt { font-style: normal; font-size: .68rem; padding: 2px 7px; border-radius: 999px; color: #17130a; background: var(--gold-grad); }
.mem__s { color: var(--text-3); font-size: .76rem; } .mem__r { font-family: var(--font-mono); color: var(--gold-2); }

/* ---------- leaderboard ---------- */
.lb__r { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: var(--text); text-decoration: none; background: rgba(255,255,255,.025); border: 1px solid var(--line); flex-wrap: wrap; transition: transform .4s var(--spring); }
.lb__r:hover { transform: translateX(3px); }
.lb__r.me { border-color: rgba(242,193,78,.4); background: rgba(242,193,78,.06); }
.lb__n { width: 28px; text-align: center; font-family: var(--font-mono); color: var(--text-3); }
.lb__r b { font-weight: 600; } .lb__r small { flex: 1 1 200px; color: var(--text-3); font-size: .78rem; }
.lb__r em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--gold-2); margin-left: auto; }
.lb__r .crew__e { width: 34px; height: 34px; font-size: 1.1rem; border-radius: 10px; }

/* ---------- record card (profiles) ---------- */
.stx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.stx__r { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: left; display: grid; gap: 2px; }
.stx__k { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
.stx__r b { font-family: var(--font-display); font-size: 1.15rem; } .stx__big { font-size: 1.5rem !important; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stx__r em { font-style: normal; font-size: .74rem; color: var(--text-2); }
.stx--c { grid-template-columns: repeat(4, 1fr); } .stx--c .stx__r { padding: 8px; } .stx--c .stx__r b { font-size: 1rem; }
.prof__stats { width: 100%; display: grid; gap: 10px; margin: 6px 0; }
.stx__crew { display: block; padding: 10px 14px; border-radius: 12px; background: rgba(255,143,112,.08); border: 1px solid rgba(255,143,112,.25); color: var(--text); text-decoration: none; font-size: .88rem; text-align: left; }
.stx__calls { display: flex; gap: 4px; flex-wrap: wrap; } .stx__calls i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 700; }
.stx__calls i.ok { background: rgba(61,220,151,.14); color: var(--up); } .stx__calls i.no { background: rgba(255,107,107,.14); color: var(--down); }
.rev__stats { margin: 10px 0; }

/* ---------- levels ---------- */
.lvhero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 22px; margin-bottom: 14px; flex-wrap: wrap; background: radial-gradient(80% 140% at 0% 0%, rgba(201,167,255,.14), transparent 60%), linear-gradient(180deg, #15181d, #0e1013); border: 1px solid var(--line-2); }
.lvhero h2 { margin: 2px 0 6px; font-family: var(--font-display); font-size: 1.8rem; } .lvhero p { margin: 0; color: var(--text-2); max-width: 34em; font-size: .9rem; }
.howrate { margin-bottom: 14px; } .howrate h3 { margin: 0 0 10px; }
.howrate__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.howrate__g div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: grid; gap: 2px; }
.howrate__g b { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-2); } .howrate__g span { font-size: .8rem; color: var(--text-2); }

/* ---------- rules ---------- */
.rulebook { display: grid; gap: 10px; margin-bottom: 12px; }
.rule { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #15181d, #0f1215); border: 1px solid var(--line-2); }
.rule__n { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #17130a; background: var(--gold-grad); }
.rule h4 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.02rem; } .rule ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .9rem; display: grid; gap: 4px; }

/* ---------- messages ---------- */
.dmwhy { margin-left: 8px; font-size: .66rem; font-weight: 500; padding: 2px 7px; border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,.06); vertical-align: middle; }
.dmreason { margin: 8px 12px 0; padding: 8px 12px; border-radius: 10px; font-size: .82rem; color: var(--text-2); background: rgba(143,211,255,.06); border: 1px solid rgba(143,211,255,.18); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; } .door { min-height: 0; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .door__ic { grid-row: span 3; margin: 0; } .door__go { display: none; }
  .frow, .ssgrid { grid-template-columns: 1fr; }
  .stx, .howrate__g { grid-template-columns: repeat(2, 1fr); }
  .callhero, .crewhero, .fhero { flex-direction: column; align-items: flex-start; } .fhero__me { text-align: left; }
  .grid3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
}
@media (max-width: 520px) {
  .crew { flex-wrap: wrap; } .crew__r { width: 100%; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; } .crew__r button { margin-left: auto; }
  .callhero__s, .crewtop__s, .lvhero__s { width: 100%; justify-content: space-between; }
  .tcard__h .tst { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .door, .lvc, .si, .cbtn, .ss, .tcard, .crew { transition: none; animation: none; } }

.desk.arena { display: block; }
.arena > * + * { margin-top: 12px; }
.arena > .sec, .arena > h4 { margin-top: 20px; }
.dk h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.req li .pbar { display: block; max-width: 260px; margin-top: 6px; }
/* crew rules */
.stg { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-family: var(--font-body); font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.crewtop h2 .stg { font-size: .72rem; }
.crewnote { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255,107,107,.06); border: 1px solid rgba(255,107,107,.25); }
.crewnote span { color: var(--text-2); font-size: .88rem; } .crewnote small { color: var(--text-3); font-size: .78rem; }
.crewnote--ok { background: rgba(242,193,78,.06); border-color: rgba(242,193,78,.3); } .crewnote .btn { justify-self: start; margin-top: 6px; }
.caprules { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; font-size: .8rem; color: var(--text-3); background: rgba(255,255,255,.02); border: 1px dashed var(--line-2); }
.caprules b { color: var(--text-2); font-size: .82rem; }
.idle, .newm { font-style: normal; font-size: .66rem; padding: 2px 7px; border-radius: 999px; }
.idle { color: var(--text-3); background: rgba(255,255,255,.06); } .newm { color: #8fd3ff; background: rgba(143,211,255,.1); }
.chist { display: grid; gap: 0; border-left: 1px solid var(--line-2); margin-left: 8px; }
.chist__r { position: relative; display: flex; gap: 10px; padding: 8px 0 8px 18px; font-size: .84rem; }
.chist__r i { position: absolute; left: -5px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.chist__r.joined i, .chist__r.created i { background: var(--up); } .chist__r.removed i { background: var(--down); } .chist__r.captain i { background: var(--gold); }
.chist__r > div { flex: 1; min-width: 0; } .chist__r b { font-weight: 500; } .chist__r small { display: block; color: var(--text-3); font-style: italic; }
.chist__r time { color: var(--text-3); font-size: .74rem; white-space: nowrap; }
.sheet button:disabled { opacity: .45; cursor: not-allowed; }
/* crew language + flag + leave */
.cflag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; vertical-align: -1px; margin-right: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.lchip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; color: var(--text-2); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.lchip .cflag { margin-right: 5px; width: 16px; height: 11px; }
.crewmeta { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.lfilter { margin: 14px 0 0; }
.whys { display: flex; flex-wrap: wrap; gap: 6px; }
.whys label { cursor: pointer; } .whys input { position: absolute; opacity: 0; }
.whys span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .84rem; color: var(--text-2); transition: all .2s; }
.whys input:checked + span { color: var(--gold-2); border-color: var(--gold); background: rgba(242,193,78,.1); }
.whys input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.cflag { display: inline-block; } .crewhero .btn, .callhero .btn { white-space: nowrap; flex-shrink: 0; }