:root {
  --bg: #0b0f14; --panel: #111821; --panel2: #16202b; --panel3: #1c2836; --line: #243243; --line2: #1a2533;
  --tx: #dbe4ee; --tx2: #b3c1cf; --mute: #7f91a4; --acc: #2ee6b6; --acc-d: #1fb58e; --blue: #1a9bff; --amber: #f6b04a;
  --cut: #f0705e; --fill: #4ea8ff; --ok: #3fd08a; --warn: #f6b04a; --bad: #ff5d5d; --violet: #c48cff;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --r: 10px; --sb: 236px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font: 13.5px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acc); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* sidebar */
.sb { width: var(--sb); flex: none; background: #0d131a; border-right: 1px solid var(--line2); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.brand img { width: 34px; height: 34px; }
.brand b { font-size: 18px; letter-spacing: -.02em; display: block; line-height: 1.1; }
.brand b span { color: var(--acc); }
.brand small { font-size: 10.5px; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; }
.proj { margin: 0 12px 6px; display: flex; gap: 9px; align-items: center; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.proj .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px rgba(46, 230, 182, .15); flex: none; }
.proj b { display: block; font-size: 12.5px; }
.proj small { color: var(--mute); font-size: 11px; }
.nav { padding: 6px 8px 10px; flex: 1; overflow-y: auto; }
.nav .grp { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #5d6f82; margin: 12px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: 7px; color: var(--tx2); text-decoration: none; font-size: 13px; }
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.nav a:hover { background: rgba(255, 255, 255, .04); color: var(--tx); }
.nav a.on { background: rgba(46, 230, 182, .1); color: #fff; box-shadow: inset 2px 0 0 var(--acc); }
.nav a.on svg { opacity: 1; color: var(--acc); }
.nav a.killer { background: linear-gradient(90deg, rgba(46, 230, 182, .16), rgba(26, 155, 255, .08)); color: #fff; border: 1px solid rgba(46, 230, 182, .3); }
.nav a .pill { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 9px; background: var(--bad); color: #fff; font-weight: 600; }
.nav a .pill.new { background: var(--acc); color: #062b22; }
.sb .foot { padding: 12px 14px; border-top: 1px solid var(--line2); display: flex; gap: 10px; align-items: center; font-size: 12px; }
.sb .foot .fn { color: var(--tx); }
.sb .foot a { color: var(--mute); font-size: 11.5px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--sans); color: #0b0f14; flex: none; position: relative; }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.av .st { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--panel); background: var(--ok); }
.av .st.away { background: var(--amber); } .av .st.offline { background: #4b5a6a; }

/* main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line2); background: #0d131a; }
.top h1 { font-size: 17px; white-space: nowrap; }
.top .crumb { color: var(--mute); font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.top .ttl { min-width: 0; }
.top .sp { flex: 1; }
.top .ham, .mlogo { display: none; }
h3 svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.flexcol { display: flex; flex-direction: column; }
.flexcol > .cv.grow { flex: 1 1 auto; min-height: 330px; }
.iconbtn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); display: grid; place-items: center; }
.iconbtn svg { width: 18px; height: 18px; }
.search { position: relative; width: 300px; }
.search input { width: 100%; height: 34px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 0 12px 0 32px; outline: none; }
.search input:focus { border-color: var(--acc); }
.search > svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--mute); }
.sres { position: absolute; top: 40px; left: 0; right: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); z-index: 60; display: none; max-height: 380px; overflow: auto; }
.sres.on { display: block; }
.sres a { display: flex; gap: 8px; padding: 8px 12px; color: var(--tx); text-decoration: none; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.sres a:hover { background: var(--panel3); }
.sres a small { color: var(--mute); margin-left: auto; }
.presence { display: flex; }
.presence .av { margin-left: -6px; border: 2px solid #0d131a; }
.live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(63, 208, 138, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(63, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 208, 138, 0); } }
#view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 50px; }

/* buttons, inputs */
.btn { height: 34px; border-radius: 8px; padding: 0 13px; border: 1px solid var(--line); background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; color: var(--tx); font-weight: 500; }
.btn:hover { border-color: #3a4d63; background: var(--panel3); }
.btn svg { width: 15px; height: 15px; }
.btn.pri { background: var(--acc); border-color: var(--acc); color: #04261d; font-weight: 600; }
.btn.pri:hover { background: #4ff0c6; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #2b1a00; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.on { border-color: var(--acc); color: var(--acc); background: rgba(46, 230, 182, .08); }
.btn:disabled { opacity: .45; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: var(--panel); padding: 0 11px; height: 30px; font-size: 12px; color: var(--tx2); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: rgba(46, 230, 182, .14); color: var(--acc); }
input[type=text], input[type=number], input[type=search], select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; height: 32px; padding: 0 9px; outline: none; min-width: 0; }
textarea { height: auto; padding: 8px 9px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--acc); }
input[type=range] { accent-color: var(--acc); width: 100%; }
input[type=checkbox] { accent-color: var(--acc); width: 16px; height: 16px; }
label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx2); cursor: pointer; }

/* cards / grid */
.card { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); min-width: 0; }
.card > .hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.card > .hd h3 { font-size: 13.5px; }
.card > .hd .sub { color: var(--mute); font-size: 11.5px; }
.card > .hd .sp { flex: 1; }
.card > .bd { padding: 12px 14px; }
.card > .bd.np { padding: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.g31 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.mt { margin-top: 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row .sp { flex: 1; }
.muted { color: var(--mute); }
.small { font-size: 12px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--panel3); color: var(--tx2); white-space: nowrap; }
.tag.ok { background: rgba(63, 208, 138, .14); color: var(--ok); }
.tag.warn { background: rgba(246, 176, 74, .15); color: var(--amber); }
.tag.bad { background: rgba(255, 93, 93, .15); color: var(--bad); }
.tag.blue { background: rgba(26, 155, 255, .15); color: #7cc4ff; }
.tag.acc { background: rgba(46, 230, 182, .14); color: var(--acc); }
.kpi { padding: 12px 14px; }
.kpi .lb { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.kpi .v { font: 600 22px/1.15 var(--mono); margin-top: 4px; white-space: nowrap; }
.kpi .s { font-size: 11.5px; color: var(--tx2); margin-top: 2px; }
.cut { color: var(--cut); } .fill { color: var(--fill); } .okc { color: var(--ok); } .badc { color: var(--bad); } .warnc { color: var(--amber); } .accc { color: var(--acc); }

/* tables */
.tw { overflow: auto; max-width: 100%; }
.tw.tall { max-height: 520px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; font-weight: 600; color: var(--mute); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; white-space: nowrap; }
table.t td { padding: 6px 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.t td.n, table.t th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.t tbody tr:hover { background: rgba(255, 255, 255, .025); }
table.t tbody tr[data-id] { cursor: pointer; }
table.t tr.sel { background: rgba(46, 230, 182, .08) !important; }
table.t tr.flag td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.t input { height: 26px; width: 84px; font-family: var(--mono); font-size: 12px; text-align: right; }
table.t tfoot td { font-weight: 700; border-top: 1px solid var(--line); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.toolbar input[type=search] { width: 220px; }
.toolbar .sp { flex: 1; }

/* canvases */
.cv { position: relative; width: 100%; background: #0a0e13; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.cv canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.cv .ovl { position: absolute; left: 10px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.cv .ovl > * { pointer-events: auto; }
.cv .ovr { position: absolute; right: 10px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cv .zbtns { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.cv .zbtns button { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--line); background: rgba(17, 24, 33, .9); font-size: 16px; display: grid; place-items: center; }
.cv .legend { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--tx2); background: rgba(11, 15, 20, .8); padding: 5px 8px; border-radius: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.cv .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cv .tip { position: absolute; pointer-events: none; background: rgba(13, 19, 26, .95); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font: 11.5px/1.4 var(--mono); color: var(--tx); display: none; z-index: 5; white-space: nowrap; }
.ghostcur { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform 2.2s cubic-bezier(.45, 0, .2, 1); z-index: 4; }
.ghostcur svg { width: 16px; height: 16px; fill: #f6b04a; stroke: #0b0f14; stroke-width: 1.2; }
.ghostcur span { position: absolute; left: 14px; top: 12px; background: #f6b04a; color: #2b1a00; font: 600 10.5px var(--sans); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

/* ripple */
.ticker { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr) auto; gap: 0; background: linear-gradient(180deg, #121c27, #0f161e); border: 1px solid #22374a; border-radius: 12px; overflow: hidden; }
.ticker > div { padding: 12px 16px; border-right: 1px solid var(--line2); min-width: 0; }
.ticker .lb { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .v { font: 700 21px/1.2 var(--mono); margin-top: 3px; white-space: nowrap; }
.ticker .s { font-size: 11px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .delta .v { font-size: 30px; }
.ticker .delta.up .v { color: var(--bad); } .ticker .delta.down .v { color: var(--ok); }
.ticker .acts { display: flex; flex-direction: column; gap: 6px; justify-content: center; border-right: 0; }
.ticker .flash { animation: flash .6s ease-out; }
@keyframes flash { 0% { background: rgba(46, 230, 182, .18); } 100% { background: transparent; } }
.chain { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 10px 12px; }
.chain .st { flex: 1; min-width: 108px; position: relative; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); margin-right: 16px; font-size: 11.5px; }
.chain .st:last-child { margin-right: 0; }
.chain .st:not(:last-child)::after { content: ''; position: absolute; right: -14px; top: 50%; width: 12px; height: 2px; background: var(--line); }
.chain .st b { display: block; font-size: 12px; color: var(--tx); }
.chain .st .ms { font-family: var(--mono); color: var(--acc); font-size: 11px; }
.chain .st.go { animation: chainGo .5s ease-out both; }
@keyframes chainGo { 0% { border-color: var(--acc); box-shadow: 0 0 0 0 rgba(46, 230, 182, .5); background: rgba(46, 230, 182, .16); } 100% { border-color: var(--line); box-shadow: 0 0 0 6px rgba(46, 230, 182, 0); background: var(--panel2); } }
.c3d-cmp { font-size: 11.5px; color: var(--mute); }
.pvichips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line2); align-items: center; }
.pvichips button.chip { height: 30px; border-radius: 15px; border: 1px solid var(--line); background: var(--panel2); padding: 0 11px; font: 600 11.5px var(--mono); color: var(--tx2); }
.pvichips button.chip.on { border-color: var(--amber); color: var(--amber); background: rgba(246, 176, 74, .1); }
.nudge { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nudge .btn { min-width: 38px; }
.sliders { display: grid; gap: 10px; }
.sl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 12px; }
.sl .val { font-family: var(--mono); color: var(--acc); }
.sl input { grid-column: 1 / -1; }
.coverlist { display: grid; gap: 4px; }
.coverrow { display: grid; grid-template-columns: 52px 1fr 64px; gap: 8px; align-items: center; font-size: 12px; }
.bar { height: 7px; background: var(--panel3); border-radius: 4px; overflow: hidden; position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bar .mk { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .6; }
.hero { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 12px; background: radial-gradient(1200px 200px at 0% 0%, rgba(46, 230, 182, .15), transparent), linear-gradient(135deg, #102030, #0d151d); border: 1px solid #22374a; margin-bottom: 14px; }
.hero h2 { font-size: 20px; }
.hero p { margin: 4px 0 0; color: var(--tx2); max-width: 760px; }
.hero .badge { font: 700 10px var(--sans); letter-spacing: .16em; color: var(--acc); text-transform: uppercase; }
.hero .cmp { display: flex; gap: 10px; flex: none; }
.hero .cmp div { text-align: center; padding: 8px 12px; border-radius: 9px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.hero .cmp b { display: block; font: 700 18px var(--mono); }
.hero .cmp small { font-size: 10.5px; color: var(--mute); }

/* tree */
.tree { font-size: 12.5px; }
.tree details { margin-left: 4px; }
.tree summary { cursor: pointer; padding: 5px 6px; border-radius: 6px; list-style: none; display: flex; align-items: center; gap: 7px; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary:hover { background: rgba(255, 255, 255, .04); }
.tree summary .cnt { margin-left: auto; color: var(--mute); font-family: var(--mono); font-size: 11px; }
.tree summary::before { content: '▸'; color: var(--mute); font-size: 10px; width: 10px; }
.tree details[open] > summary::before { content: '▾'; }
.tree .leaf { padding: 4px 6px 4px 30px; color: var(--tx2); cursor: pointer; border-radius: 6px; display: flex; gap: 6px; }
.tree .leaf:hover { background: rgba(255, 255, 255, .04); color: var(--tx); }
.tree .leaf small { margin-left: auto; color: var(--mute); }
.feed { display: grid; gap: 0; }
.feed .it { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line2); font-size: 12.5px; align-items: flex-start; }
.feed .it:last-child { border-bottom: 0; }
.feed .it small { display: block; color: var(--mute); font-size: 11px; }
.health .it { display: flex; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--line2); font-size: 12.5px; align-items: center; cursor: pointer; }
.health .it:hover { background: rgba(255, 255, 255, .03); }
.health .ic { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* forms / drawer / modal */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.form .f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form .f.full { grid-column: 1 / -1; }
.form label { font-size: 11px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
.form input, .form select, .form textarea { width: 100%; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 80; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; background: var(--panel); border-left: 1px solid var(--line); transform: translateX(105%); transition: transform .25s; z-index: 90; display: flex; flex-direction: column; }
.drawer.on { transform: none; }
.drawer .dh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.drawer .dh h3 { font-size: 15px; }
.drawer .db { flex: 1; overflow: auto; padding: 14px 16px; }
.drawer .df { padding: 12px 16px; border-top: 1px solid var(--line2); display: flex; gap: 8px; flex-wrap: wrap; }
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; background: rgba(0, 0, 0, .6); padding: 20px; }
.modal.on { display: flex; }
.modal .mc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: 560px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal .mc.wide { width: 860px; }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.modal .mh h3 { font-size: 15px; }
.modal .mb { padding: 14px 16px; overflow: auto; }
.modal .mf { padding: 12px 16px; border-top: 1px solid var(--line2); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.x { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); font-size: 18px; line-height: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: #13202c; border: 1px solid var(--acc); color: var(--tx); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: all .25s; z-index: 120; pointer-events: none; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 13px; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.kv dt { color: var(--mute); }
.kv dd { margin: 0; font-family: var(--mono); text-align: right; }
.note { font-size: 12px; color: var(--tx2); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.note.warn { border-color: rgba(246, 176, 74, .4); }
.note.bad { border-color: rgba(255, 93, 93, .45); }
.sheetprev { background: #f4f1ea; border-radius: 6px; aspect-ratio: 34 / 22; width: 100%; display: block; }
.permt td { text-align: center; }
.permt td:first-child { text-align: left; }
.empty { padding: 30px; text-align: center; color: var(--mute); }
.tabbar { display: none; }
.cmpbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel3); }
.cmpbar i { display: block; height: 100%; }

/* responsive */
@media (max-width: 1200px) {
  .ticker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticker .delta { grid-column: 1 / -1; }
  .ticker .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search { width: 220px; }
}
@media (max-width: 1000px) {
  .g21, .g12, .g31 { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .sb { position: fixed; left: 0; top: 0; bottom: 0; z-index: 95; transform: translateX(-105%); transition: transform .25s; width: 280px; }
  .sb.on { transform: none; }
  .top .ham, .mlogo { display: grid; }
  .mlogo { width: 30px; height: 30px; }
  .top { padding: 0 10px; gap: 8px; height: 54px; }
  .top h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .top .crumb { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  .search, .presence, .live .lt { display: none; }
  .ham { width: 44px; height: 44px; }
  #view { padding: 12px 10px 92px; }
  .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .g4.kpis, .g5.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticker > div { padding: 10px 12px; border-bottom: 1px solid var(--line2); }
  .ticker .v { font-size: 17px; }
  .ticker .delta .v { font-size: 26px; }
  .btn { height: 44px; padding: 0 14px; }
  .btn.sm { height: 40px; }
  .seg button { height: 40px; padding: 0 12px; }
  input[type=text], input[type=number], input[type=search], select { height: 44px; font-size: 16px; }
  table.t input { height: 38px; width: 90px; font-size: 14px; }
  .toolbar input[type=search] { width: 100%; }
  .pvichips button.chip { height: 44px; padding: 0 14px; }
  .nav a { padding: 11px 12px; font-size: 14px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #0d131a; border-top: 1px solid var(--line); z-index: 70; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: var(--mute); text-decoration: none; min-height: 44px; background: none; border: 0; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--acc); }
  .drawer { width: 100%; }
  .modal { padding: 0; }
  .modal .mc, .modal .mc.wide { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .hero .cmp { flex-wrap: wrap; }
  .chain .st { min-width: 120px; }
  .x { width: 44px; height: 44px; }
  .cv .zbtns button { width: 44px; height: 44px; }
  .coverrow { grid-template-columns: 52px 1fr 70px; }
  .card > .hd { padding: 10px 12px; }
  .card > .bd { padding: 12px; }
  .kpi .v { font-size: 18px; }
  .hero { padding: 14px; gap: 10px; }
  .hero h2 { font-size: 17px; }
  .hero p { display: none; }
  .hero .cmp { width: 100%; flex-wrap: nowrap; }
  .hero .cmp div { flex: 1; padding: 6px 8px; }
  .hero .cmp b { font-size: 16px; }
  .ticker .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ticker .acts .btn { width: 100%; }
  .ticker .acts #balBtn { grid-column: 1 / -1; }
  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .cv.plan { height: 320px !important; }
  .flexcol > .cv.grow { min-height: 300px; }
}