/* 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; perspective: 1800px; }
@media (min-width: 900px) { .stage { padding: 18px; } }
.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; }