:root {
  color-scheme: dark;
  --bg: #060b11;
  --panel: #0c131d;
  --panel-2: #101a26;
  --line: #202c39;
  --line-soft: rgba(138, 158, 179, .13);
  --text: #edf3f8;
  --muted: #7f91a4;
  --blue: #2f81f7;
  --cyan: #36c5d0;
  --up: #ef5350;
  --down: #3182f6;
  --green: #19c37d;
  --amber: #f3b341;
  --shadow: 0 20px 60px rgba(0, 0, 0, .26);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: Inter, Pretendard, "Segoe UI", "Apple SD Gothic Neo", sans-serif; letter-spacing: -.02em; }
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 5px; color: #60778d; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.panel { border: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(16,26,38,.97), rgba(9,16,24,.98)); box-shadow: var(--shadow); }

.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 15px 4px 15px 4px; background: linear-gradient(135deg, #2f81f7, #174d9d); color: white; font-weight: 900; font-size: 21px; box-shadow: 0 14px 35px rgba(47,129,247,.34); }
.brand-mark.compact { width: 34px; height: 34px; margin: 0; border-radius: 10px 3px 10px 3px; font-size: 14px; }
.terminal { min-width: 1180px; min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 70% -10%, rgba(29,74,112,.16), transparent 38%), var(--bg); }
.topbar { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(7,13,20,.96); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand strong { display: block; font-size: 13px; letter-spacing: .08em; }
.brand small { display: block; margin-top: 2px; color: #64778b; font-size: 9px; letter-spacing: .16em; }
.market-clock { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.market-clock strong { font-size: 18px; letter-spacing: .06em; }
.market-clock small { color: var(--muted); }
.status-dot { padding: 4px 7px; border-radius: 5px; background: rgba(25,195,125,.12); color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.system-strip { justify-self: end; display: flex; align-items: center; gap: 16px; color: #879aab; font-size: 11px; }
.system-strip i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #526170; }
.system-strip i.on { background: var(--green); box-shadow: 0 0 10px rgba(25,195,125,.65); }
.public-pill { padding: 5px 8px; border: 1px solid rgba(54,197,208,.22); border-radius: 5px; background: rgba(54,197,208,.08); color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .12em; }

.ticker { height: 34px; display: flex; align-items: center; gap: 27px; overflow: hidden; padding: 0 22px; border-bottom: 1px solid #17212c; background: #090f16; white-space: nowrap; font-size: 11px; }
.ticker-item { display: flex; gap: 8px; color: #a3b2c0; }
.ticker-item strong { color: #f1f5f8; font-variant-numeric: tabular-nums; }
.up-text { color: var(--up) !important; }
.down-text { color: #52a2ff !important; }

.workspace { flex: 1; display: grid; grid-template-columns: 260px minmax(600px, 1fr) 286px; gap: 10px; padding: 10px; min-height: 700px; }
.left-rail { border-radius: 10px; overflow: visible; padding: 16px 12px; }
.rail-head, .section-head { display: flex; justify-content: space-between; align-items: center; }
.rail-head h2, .section-head h2 { margin: 0; font-size: 16px; }
.count-badge { display: grid; place-items: center; min-width: 25px; height: 22px; padding: 0 6px; border: 1px solid #2c3d4d; border-radius: 6px; color: #92a8ba; font-size: 10px; }
.search-wrap { position: relative; margin-top: 16px; }
.search-wrap > svg { position: absolute; left: 11px; top: 11px; width: 14px; fill: none; stroke: #60768b; stroke-width: 2; }
.search-wrap input { width: 100%; height: 36px; padding: 0 10px 0 33px; border: 1px solid #273542; border-radius: 7px; outline: none; background: #080f16; color: white; font-size: 12px; }
.search-wrap input:focus { border-color: #3c6793; }
.search-results { position: absolute; z-index: 20; top: 41px; left: 0; right: 0; overflow: hidden; border: 1px solid #2b3b4a; border-radius: 8px; background: #0c151f; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.search-result { width: 100%; display: flex; justify-content: space-between; padding: 10px; border: 0; border-bottom: 1px solid #1e2b37; background: transparent; text-align: left; cursor: pointer; }
.search-result:hover { background: #142232; }
.search-result small { color: var(--muted); }
.rail-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0 8px; padding: 3px; border-radius: 7px; background: #081019; }
.rail-tabs button { border: 0; border-radius: 5px; padding: 7px 4px; background: transparent; color: #718397; cursor: pointer; font-size: 10px; font-weight: 700; }
.rail-tabs button.active { background: #172534; color: #dbe6ef; }
.symbol-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 260px); overflow-y: auto; }
.symbol-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 10px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.symbol-row:hover { background: rgba(255,255,255,.025); }
.symbol-row.active { border-color: rgba(47,129,247,.24); background: rgba(47,129,247,.09); }
.symbol-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.symbol-meta { display: block; margin-top: 4px; color: #60758a; font-size: 9px; }
.symbol-quote { text-align: right; font-variant-numeric: tabular-nums; }
.symbol-quote strong { display: block; font-size: 12px; }
.symbol-quote small { display: block; margin-top: 3px; font-size: 9px; }

.main-stage { min-width: 0; display: grid; grid-template-rows: 146px minmax(480px,1fr); gap: 10px; }
.quote-hero { position: relative; display: grid; grid-template-columns: 1fr auto minmax(430px,1.3fr); align-items: center; gap: 22px; padding: 22px 28px; border-radius: 10px; overflow: hidden; }
.quote-hero::after { content: ""; position: absolute; right: -60px; top: -130px; width: 320px; height: 320px; border-radius: 50%; background: rgba(47,129,247,.055); }
.symbol-line { display: flex; align-items: center; gap: 7px; color: #6e8397; font-size: 11px; }
.market-badge { padding: 3px 5px; border-radius: 4px; background: rgba(47,129,247,.12); color: #66a7ff; font-size: 9px; font-weight: 800; }
.quote-ident h1 { margin: 8px 0 0; font-size: 25px; }
.quote-price { text-align: right; font-variant-numeric: tabular-nums; }
.quote-price strong { display: block; font-size: 31px; letter-spacing: -.035em; }
.quote-price span { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; }
.quote-price .positive { color: var(--up); }
.quote-price .negative { color: #52a2ff; }
.quote-price .neutral { color: var(--muted); }
.quote-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-left: 1px solid var(--line); }
.quote-metrics div { padding-left: 18px; }
.quote-metrics small { display: block; color: #6f8295; font-size: 9px; }
.quote-metrics strong { display: block; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.favorite-toggle { position: absolute; right: 16px; top: 13px; z-index: 2; border: 0; background: transparent; color: #60758a; cursor: pointer; font-size: 24px; }
.favorite-toggle.active { color: var(--amber); }

.chart-panel { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 18px; border-radius: 10px; }
.chart-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 42px; }
.chart-toolbar strong { font-size: 13px; }
.intervals { display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: #080e15; }
.intervals button { min-width: 35px; border: 0; border-radius: 4px; padding: 6px 7px; background: transparent; color: #6e8193; cursor: pointer; font-size: 9px; }
.intervals button.active { background: #20344a; color: #eaf3fb; }
#price-chart { width: 100%; flex: 1; min-height: 380px; }
.chart-loader { position: absolute; z-index: 3; inset: 70px 18px 36px; display: grid; place-items: center; background: rgba(8,14,21,.7); color: #8397a9; font-size: 12px; backdrop-filter: blur(3px); }
.chart-legend { height: 24px; display: flex; align-items: center; gap: 14px; color: #718498; font-size: 9px; }
.chart-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.chart-legend .up { background: var(--up); }.chart-legend .down { background: var(--down); }.chart-legend .volume { background: #52677d; }
.chart-legend small { margin-left: auto; }

.right-rail { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px; }
.right-rail .panel { border-radius: 10px; padding: 16px; }
.live-pill { padding: 4px 6px; border-radius: 4px; background: rgba(25,195,125,.1); color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.pulse-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 15px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pulse-grid div { min-height: 68px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pulse-grid small { display: block; color: #677b8e; font-size: 9px; }
.pulse-grid strong { display: block; margin-top: 9px; font-size: 15px; font-variant-numeric: tabular-nums; }
.info-card { min-height: 0; }
.info-card p { margin: 18px 0 0; color: #6c8093; font-size: 10px; line-height: 1.75; }
.service-flow { display: grid; gap: 8px; margin-top: 24px; }
.service-flow span { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 1px solid #203140; border-radius: 8px; background: rgba(7,14,22,.6); color: #a8bac9; font-size: 11px; font-weight: 700; }
.service-flow i { display: block; width: 1px; height: 14px; margin: -8px 0 -8px 22px; background: linear-gradient(var(--cyan), transparent); }
footer { height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; border-top: 1px solid #17212b; color: #536779; font-size: 9px; letter-spacing: .04em; }

::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: #263849; border-radius: 8px; }
@media (max-width: 1180px) { body { overflow-x: auto; } }