/* ================= MITSCHESS NUSANTARA MONITOR ================= */
:root {
  color-scheme: dark;
  --bg: #000;
  --panel: #0a0c0f;
  --panel-h: #10141a;
  --row-alt: #0d1014;
  --hover: #151b23;
  --sel: #1b2531;
  --line: #1c222a;
  --line-2: #2a323c;
  --tx: #e4e8ed;
  --tx-2: #aab2bc;
  --dim: #6e7782;
  --amber: #ff9e1b;
  --amber-2: #ffc062;
  --amber-bg: rgba(255, 158, 27, 0.12);
  --up: #1ed47f;
  --up-bg: rgba(30, 212, 127, 0.12);
  --down: #ff4f5a;
  --down-bg: rgba(255, 79, 90, 0.13);
  --series: #4cc2ff;
  --series-2: #ff9e1b;
  --grid: rgba(255, 255, 255, 0.05);

  --hm-n5: #b0161f; --hm-n3: #85161e; --hm-n1: #4a1a1f; --hm-0: #262b33;
  --hm-p1: #153d2a; --hm-p3: #106a3e; --hm-p5: #0c9a53;

  --q-shallow: #ff4f5a; --q-mid: #ffb020; --q-deep: #4cc2ff;
  --lv4: #ff3b30; --lv3: #ff8a3d; --lv2: #ffc93c; --lv1: #1ed47f;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--sans); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.small { font-size: 11px; }
.r { text-align: right; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--tx-2); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Command bar ---------- */
.cmdbar { position: sticky; top: 0; z-index: 1001; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; background: #050607; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.logo b { color: var(--amber); font-weight: 700; }
.logo span:last-child { color: var(--tx-2); font-weight: 500; }
.logo-flag { width: 16px; height: 12px; display: inline-flex; flex-direction: column; box-shadow: 0 0 0 1px var(--line-2); }
.logo-flag i { flex: 1; } .logo-flag i:first-child { background: #ff3b30; } .logo-flag i:last-child { background: #fff; }
.cmd { flex: 1; max-width: 640px; display: flex; align-items: center; height: 28px; background: #000; border: 1px solid var(--line-2); border-radius: 3px; }
.cmd:focus-within { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); }
.cmd-prompt { color: var(--amber); font-family: var(--mono); padding: 0 6px 0 10px; font-weight: 700; }
.cmd input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; color: var(--amber-2); }
.cmd input::placeholder { color: var(--dim); text-transform: none; }
.cmd .go { height: 100%; border: 0; background: var(--amber); color: #000; font-family: var(--mono); font-weight: 700; font-size: 11.5px; padding: 0 12px; border-radius: 0 2px 2px 0; }
.linkedin-connect { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--tx-2); font: 600 10.5px var(--mono); letter-spacing: .03em; white-space: nowrap; }
.linkedin-connect:hover { border-color: #0a66c2; color: var(--tx); }
.linkedin-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 2px; background: #0a66c2; color: #fff; font: 700 10px Arial, sans-serif; letter-spacing: -.05em; }
.instagram-connect:hover { border-color: #c13584; }
.instagram-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(135deg, #833ab4, #e1306c 58%, #f77737); color: #fff; font: 700 7px Arial, sans-serif; letter-spacing: -.04em; }
.web-connect { color: var(--amber-2); }
.web-connect:hover { border-color: var(--amber); color: var(--amber); }
.web-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--amber); color: #000; }
.web-mark svg { display: block; }
.status { margin-left: auto; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.mkt { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--tx-2); font-weight: 600; }
.mkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.mkt.open { color: var(--up); border-color: rgba(30,212,127,.35); }
.mkt.open i { background: var(--up); animation: blink 1.6s infinite; }
.mkt.brk { color: var(--amber); border-color: rgba(255,158,27,.35); }
.mkt.brk i { background: var(--amber); }
.clk em { font-style: normal; color: var(--dim); margin-right: 5px; font-size: 10.5px; }
.clk b { font-weight: 600; color: var(--tx); }
.btn-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3px; border: 1px solid var(--line-2); background: transparent; color: var(--tx-2); }
.btn-icon:hover { color: var(--amber); border-color: var(--amber); }
.btn-icon.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- Tape ---------- */
.tape { position: sticky; top: 44px; z-index: 1000; height: 26px; overflow: hidden; background: #050607; border-bottom: 1px solid var(--line); }
.tape-track { display: inline-flex; align-items: center; height: 26px; gap: 22px; white-space: nowrap; padding-left: 12px; font-family: var(--mono); font-size: 12px; animation: tape 90s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: inline-flex; gap: 6px; align-items: baseline; cursor: pointer; }
.tk b { color: var(--amber-2); font-weight: 600; }
.tk .p { color: var(--tx); }

/* ---------- F-keys ---------- */
.fkeys { position: sticky; top: 70px; z-index: 999; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 8px; background: #050607; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fkeys::-webkit-scrollbar { display: none; }
.fkeys a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--tx-2); border-radius: 2px; white-space: nowrap; }
.fkeys a:hover, .fkeys a.on { color: #000; background: var(--amber); }
.fkeys a:hover kbd, .fkeys a.on kbd { background: #000; color: var(--amber); }
.fkeys kbd { font-family: var(--mono); font-size: 10px; background: var(--amber); color: #000; padding: 1px 4px; border-radius: 2px; font-weight: 700; }
.fkeys .upd { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; padding-left: 12px; }

/* ---------- Grid ---------- */
.grid {
  display: grid; gap: 4px; padding: 4px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 178px 268px 268px 400px 300px 240px 330px 430px 440px 600px 330px 470px 330px auto minmax(460px, 620px) minmax(460px, 620px);
  grid-template-areas:
    "ins ins ins ins ins ins ins ins ins ins ins ins"
    "watch watch watch chart chart chart chart chart chart global global global"
    "watch watch watch chart chart chart chart chart chart fx fx fx"
    "heat heat heat heat heat heat movers movers movers cmd cmd cmd"
    "eco eco eco eco infl infl infl infl bi bi bi bi"
    "gdp gdp gdp gdp gdp gdp gdp gdp gdp gdp gdp gdp"
    "alrt alrt alrt alrt warn warn warn warn cal cal cal cal"
    "food food food food food food foodmap foodmap foodmap foodmap foodmap foodmap"
    "news news news news news news news news foodnews foodnews foodnews foodnews"
    "sat sat sat sat sat sat sat sat sat air air air"
    "enso enso enso enso enso enso enso enso issues issues issues issues"
    "map map map map map map quakes quakes quakes volc volc volc"
    "gov gov gov gov gov gov govnews govnews govnews govnews govnews govnews"
    "wx wx wx wx wx wx wx wx wx wx wx wx"
    "ships ships ships ships ships ships ships ships ships ships ships ships"
    "flights flights flights flights flights flights flights flights flights flights flights flights";
}
.a-watch { grid-area: watch; } .a-chart { grid-area: chart; } .a-global { grid-area: global; } .a-fx { grid-area: fx; }
.a-heat { grid-area: heat; } .a-movers { grid-area: movers; } .a-cmd { grid-area: cmd; }
.a-eco { grid-area: eco; } .a-gdp { grid-area: gdp; } .a-infl { grid-area: infl; } .a-bi { grid-area: bi; }
.a-food { grid-area: food; } .a-foodnews { grid-area: foodnews; }
.a-news { grid-area: news; } .a-issues { grid-area: issues; }
.a-map { grid-area: map; } .a-quakes { grid-area: quakes; } .a-volc { grid-area: volc; }
.a-gov { grid-area: gov; } .a-govnews { grid-area: govnews; } .a-wx { grid-area: wx; }
.a-ships { grid-area: ships; min-height: 460px; } .a-flights { grid-area: flights; min-height: 460px; }
.a-alrt { grid-area: alrt; } .a-warn { grid-area: warn; } .a-cal { grid-area: cal; } .a-foodmap { grid-area: foodmap; }
.a-sat { grid-area: sat; } .a-air { grid-area: air; } .a-enso { grid-area: enso; } .a-ins { grid-area: ins; }

/* ---------- Panel ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; transition: box-shadow .3s; }
.panel.flash { box-shadow: 0 0 0 1px var(--amber), 0 0 24px -4px rgba(255,158,27,.45); }
.panel > header { display: flex; align-items: center; gap: 8px; height: 30px; flex: none; padding: 0 8px; background: var(--panel-h); border-bottom: 1px solid var(--line); }
.panel > header .code { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: #000; background: var(--amber); padding: 1px 5px; border-radius: 2px; }
.panel > header h2 { color: var(--amber-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delay { font-family: var(--mono); font-size: 10px; color: var(--amber); border: 1px solid var(--amber); padding: 0 4px; border-radius: 2px; white-space: nowrap; cursor: help; }
.panel > header .ctl { margin-left: auto; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.body { flex: 1; min-height: 0; position: relative; }
.ship-map { flex: 1; min-height: 0; background: #05090d; }
.ship-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.ship-open { color: var(--amber); font: 10px var(--mono); white-space: nowrap; }
.scroll { overflow-y: auto; scrollbar-width: thin; }
.foot { padding: 5px 8px; border-top: 1px solid var(--line); }
.watch-search { position: relative; z-index: 5; flex: none; padding: 5px 7px; border-bottom: 1px solid var(--line); }
.watch-search form { display: flex; gap: 4px; }
.watch-search input { flex: 1; min-width: 0; padding: 4px 6px; background: #000; border: 1px solid var(--line-2); color: var(--tx); font: 10.5px var(--mono); }
.watch-search form button, .watch-results button { background: var(--panel-h); border: 1px solid var(--line-2); color: var(--amber); font: 600 10px var(--mono); padding: 3px 7px; cursor: pointer; }
.watch-search form button:hover, .watch-results button:hover { border-color: var(--amber); }
.watch-results { position: absolute; top: calc(100% - 1px); left: 7px; right: 7px; max-height: 220px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 8px 20px #000b; }
.watch-results[hidden] { display: none; }
.watch-result { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-bottom: 1px solid var(--line); font: 10px var(--mono); }
.watch-result:last-child { border-bottom: 0; }
.watch-result .info { flex: 1; min-width: 0; }
.watch-result b, .watch-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-result b { color: var(--tx); }
.watch-result small { color: var(--dim); margin-top: 2px; }
.watch-results .search-note { padding: 7px; color: var(--dim); font: 10px var(--mono); }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--tx-2); font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 2px 7px; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { color: var(--tx); background: var(--hover); }
.seg button.on { background: var(--amber); color: #000; }
select { background: #000; border: 1px solid var(--line-2); border-radius: 2px; font-family: var(--mono); font-size: 10.5px; padding: 1px 4px; color: var(--tx-2); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover, .tbl th.sortable.on { color: var(--amber); }
.tbl th.sortable.on::after { content: ' ▼'; font-size: 8px; }
.tbl th.sortable.on[data-dir="asc"]::after { content: ' ▲'; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-weight: 500; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.035); white-space: nowrap; }
.tbl tbody tr:nth-child(even) td { background: var(--row-alt); }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tbody tr.sel td { background: var(--sel); }
.tbl tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.tbl tr.click { cursor: pointer; }
.tbl .sym { color: var(--amber-2); font-weight: 600; }
.tbl .nm { font-family: var(--sans); color: var(--dim); font-size: 11px; display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.chg { display: inline-block; min-width: 58px; text-align: right; padding: 0 4px; border-radius: 2px; }
.chg.up { background: var(--up-bg); } .chg.down { background: var(--down-bg); }
.tbl svg.spark { width: 70px; height: 18px; vertical-align: middle; display: block; margin-left: auto; }
.flash-up td { animation: fup 1.2s; } .flash-down td { animation: fdown 1.2s; }
@keyframes fup { 0% { background: rgba(30,212,127,.3); } }
@keyframes fdown { 0% { background: rgba(255,79,90,.3); } }
.price-blip-up { animation: price-blip-up 1.2s ease-out; }
.price-blip-down { animation: price-blip-down 1.2s ease-out; }
@keyframes price-blip-up { 0% { background: rgba(30,212,127,.42); color: var(--up); } 100% { background: transparent; } }
@keyframes price-blip-down { 0% { background: rgba(255,79,90,.42); color: var(--down); } 100% { background: transparent; } }

/* ---------- Chart panel ---------- */
.quote-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 8px 10px 6px; border-bottom: 1px solid var(--line); font-family: var(--mono); flex: none; }
.quote-head .px { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.quote-head .ch { font-size: 14px; font-weight: 600; }
.quote-head .per { font-size: 11px; color: var(--dim); text-transform: uppercase; margin-left: -8px; }
.quote-head .stats b { font-weight: 500; }
.quote-head .nm { font-family: var(--sans); color: var(--tx-2); font-size: 12px; width: 100%; margin-top: -2px; }
.quote-head .stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tx-2); }
.quote-head .stats span em { font-style: normal; color: var(--dim); margin-right: 4px; }
.chart-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#mainChart { position: relative; flex: 1; min-height: 0; }
#oscWrap { display: contents; }
.osc { position: relative; flex: none; height: 24%; min-height: 70px; border-top: 1px solid var(--line-2); }
.osc > b { position: absolute; top: 3px; left: 10px; z-index: 3; font: 500 10px var(--mono); color: var(--dim); pointer-events: none; }
.chart-interval button { padding-left: 5px; padding-right: 5px; }
.chart-auto { font-family: var(--mono); white-space: nowrap; }
.chart-rangebar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; min-height: 28px; padding: 2px 8px; border-top: 1px solid var(--line); color: var(--dim); font: 10.5px var(--mono); }
.chart-rangebar .seg button { padding: 2px 7px; }
.chart-rangebar button:disabled { opacity: .35; cursor: not-allowed; }
.ohlc { position: absolute; top: 6px; left: 10px; z-index: 3; font-family: var(--mono); font-size: 11px; color: var(--tx-2); pointer-events: none; display: flex; gap: 10px; flex-wrap: wrap; }
.ohlc em { font-style: normal; color: var(--dim); }
.ohlc i { font-style: normal; }
.ind-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; flex: none; }
.ind-bar > span { color: var(--dim); margin-right: 4px; letter-spacing: .04em; }
.ind-bar button { background: none; border: 1px solid var(--line-2); color: var(--tx-2); padding: 1px 7px; border-radius: 2px; }
.ind-bar button:hover { border-color: var(--dim); }
.ind-bar button.on { color: #000; background: var(--c); border-color: var(--c); }

/* ---------- Heatmap ---------- */
.heat { position: relative; flex: 1; min-height: 0; margin: 4px; }
.hm-sector { position: absolute; border: 1px solid #000; overflow: hidden; }
.hm-sector > span { position: absolute; top: 0; left: 0; right: 0; height: 15px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-2); background: #000; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.hm-tile { position: absolute; border: 1px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; cursor: pointer; font-family: var(--mono); color: #fff; transition: filter .15s; }
.hm-tile:hover { filter: brightness(1.3); z-index: 2; outline: 1px solid var(--amber); }
.hm-tile b { font-size: 12px; font-weight: 700; line-height: 1.1; }
.hm-tile span { font-size: 10.5px; opacity: .9; }
.hm-tile.lg b { font-size: 16px; } .hm-tile.lg span { font-size: 12px; }
.hm-tile.sm b { font-size: 9.5px; } .hm-tile.sm span { display: none; }
.heat-legend { display: flex; align-items: center; gap: 2px; justify-content: center; padding: 0 0 6px; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.heat-legend i { width: 26px; height: 8px; display: inline-block; }
.heat-legend span { margin: 0 6px; }

/* ---------- Movers ---------- */
.mv { display: grid; grid-template-columns: 52px 1fr 70px; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.035); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.mv:hover { background: var(--hover); }
.mv .sym { color: var(--amber-2); font-weight: 600; }
.mv .bar { height: 14px; position: relative; background: rgba(255,255,255,.03); border-radius: 1px; }
.mv .bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 1px; }
.mv .bar em { position: absolute; left: 5px; top: 0; font-style: normal; font-size: 10.5px; line-height: 14px; color: var(--tx); }
.mv .v { text-align: right; }

/* ---------- Eco / charts ---------- */
.chart-sm { padding: 6px 8px 4px; }
.tbl.eco td:first-child { font-family: var(--sans); color: var(--tx-2); }
.tbl.eco .big { color: var(--tx); font-weight: 600; }
.a-eco .body { overflow-y: auto; scrollbar-width: thin; }
.a-eco .tbl thead { position: sticky; top: 0; z-index: 1; background: var(--panel); }

/* ---------- Food ---------- */
.tbl.food td:first-child { font-family: var(--sans); }
.tbl.food .em { margin-right: 6px; }
.tbl.food tr.var td { color: var(--tx-2); font-size: 11px; background: #07090b !important; }
.tbl.food tr.var td:first-child { padding-left: 30px; }
.rng { position: relative; width: 120px; height: 6px; background: linear-gradient(90deg, var(--up-bg), rgba(255,255,255,.06), var(--down-bg)); border-radius: 3px; margin: 0 auto; }
.rng i { position: absolute; top: -3px; width: 3px; height: 12px; background: var(--amber); transform: translateX(-50%); border-radius: 1px; }
.rng-l { display: flex; justify-content: space-between; width: 120px; margin: 2px auto 0; font-size: 9.5px; color: var(--dim); }

/* ---------- News ---------- */
.nw { display: grid; grid-template-columns: 54px 96px 1fr; gap: 8px; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,.035); align-items: baseline; }
.nw:hover { background: var(--hover); }
.nw:hover .h { color: var(--amber-2); }
.nw .t { font-family: var(--mono); font-size: 11.5px; color: var(--amber); white-space: nowrap; }
.nw .s { font-family: var(--mono); font-size: 10.5px; color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw .h { font-size: 13px; color: var(--tx); line-height: 1.35; }
.nw.new .t::before { content: "● "; color: var(--down); animation: blink 1.4s infinite; }
.news-mini .nw { grid-template-columns: 54px 1fr; }
.news-mini .nw .s { display: none; }
.news-mini .nw .h small { display: block; font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; margin-top: 1px; }

/* ---------- Issues / WGI bars ---------- */
.hbar { display: grid; grid-template-columns: 150px 1fr 34px; gap: 8px; align-items: center; padding: 5px 10px; font-size: 12px; }
.hbar .l { color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .b { height: 12px; background: rgba(255,255,255,.03); position: relative; }
.hbar .b i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--series); }
.hbar .n { font-family: var(--mono); text-align: right; }

.wgi { display: grid; grid-template-columns: 190px 1fr 62px 86px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 12px; }
.wgi .l { color: var(--tx-2); }
.wgi .track { position: relative; height: 14px; background: rgba(255,255,255,.03); }
.wgi .track .zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.wgi .track i { position: absolute; top: 2px; bottom: 2px; }
.wgi .track .ghost { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tx-2); opacity: .7; }
.wgi .v { font-family: var(--mono); text-align: right; font-weight: 600; }
.wgi .d { font-family: var(--mono); text-align: right; font-size: 11px; }
.wgi-head { display: grid; grid-template-columns: 190px 1fr 62px 86px; gap: 10px; padding: 6px 10px 4px; font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.wgi-head span:nth-child(2) { display: flex; justify-content: space-between; }
.wgi-head span:nth-child(n+3) { text-align: right; }

/* ---------- Geo ---------- */
#map { flex: 1; min-height: 0; background: #0b0d10; }
.legend { font-family: var(--mono); font-size: 10.5px; color: var(--tx-2); gap: 10px !important; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--lv3); display: inline-block; }
.latest-eq { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); align-items: center; flex: none; cursor: pointer; }
.latest-eq:hover { background: var(--hover); }
.eq-mag { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 18px; font-weight: 700; color: #000; border-radius: 2px; }
.latest-eq .w { font-size: 12px; font-weight: 600; line-height: 1.3; }
.latest-eq .m { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.latest-eq .p { font-size: 10.5px; color: var(--amber-2); margin-top: 2px; }
.tbl .mag { display: inline-block; min-width: 30px; text-align: center; color: #000; font-weight: 700; border-radius: 2px; }
.tbl td.loc { font-family: var(--sans); white-space: normal; font-size: 11.5px; color: var(--tx-2); line-height: 1.3; }

.vl-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; }
.vl-c { border: 1px solid var(--line); border-top: 2px solid var(--c); padding: 5px 6px; font-family: var(--mono); }
.vl-c b { display: block; font-size: 20px; line-height: 1.1; }
.vl-c span { font-size: 9.5px; color: var(--dim); text-transform: uppercase; }
.vl-g { padding: 2px 8px 8px; }
.vl-g h3 { margin: 4px 0 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--c); text-transform: uppercase; letter-spacing: .04em; }
.vl-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 4px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.035); }
.vl-row:hover { background: var(--hover); }
.vl-row span { color: var(--dim); font-size: 11px; text-align: right; }
.vl-g details summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; color: var(--dim); padding: 4px; list-style: none; }
.vl-g details summary::before { content: "▸ "; } .vl-g details[open] summary::before { content: "▾ "; }

.leaflet-container { background: #0b0d10; font-family: var(--sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #0f1318; color: var(--tx); border: 1px solid var(--line-2); border-radius: 2px; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.leaflet-popup-content { margin: 10px 12px; font-size: 12px; line-height: 1.45; }
.leaflet-popup-content b { color: var(--amber-2); }
.leaflet-popup-content a { color: var(--series); }
.leaflet-control-attribution { background: rgba(0,0,0,.6) !important; color: var(--dim) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--tx-2) !important; }
.leaflet-bar a { background: #0f1318 !important; color: var(--tx) !important; border-color: var(--line-2) !important; }
.volc-mk { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--c); filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }
.eq-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--q-shallow); border: 2px solid #fff; animation: qp 1.6s infinite; }
@keyframes qp { 0% { box-shadow: 0 0 0 0 rgba(255,79,90,.8); } 100% { box-shadow: 0 0 0 26px rgba(255,79,90,0); } }

/* ---------- Weather ---------- */
.tbl.wx td:first-child { font-family: var(--sans); font-weight: 600; }
.tbl.wx .ic { font-size: 15px; }
.tbl.wx .cond { font-family: var(--sans); color: var(--dim); font-size: 11px; }
.aqi { display: inline-block; min-width: 34px; text-align: center; color: #000; font-weight: 700; border-radius: 2px; padding: 0 3px; }
.days { display: flex; gap: 12px; font-size: 11px; color: var(--tx-2); }
.days span em { font-style: normal; color: var(--dim); margin-right: 3px; }

/* ---------- Misc ---------- */
.loading { padding: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.loading::after { content: "▌"; animation: blink 1s infinite; margin-left: 2px; }
.err { padding: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--down); }
.tip { position: fixed; z-index: 3000; pointer-events: none; background: #0f1318; border: 1px solid var(--amber); padding: 7px 9px; font-family: var(--mono); font-size: 11.5px; color: var(--tx); max-width: 260px; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.tip b { color: var(--amber-2); }
.tip .dim { font-family: var(--sans); }
.foot-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 12px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) { .hide-xl { display: none; } }
@media (max-width: 1280px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 178px 500px 260px 260px 400px 360px 330px 230px 240px 340px 380px 460px 330px 440px 540px 360px 330px 420px 440px 330px 360px auto minmax(460px, 620px) minmax(460px, 620px);
    grid-template-areas:
      "ins ins ins ins ins ins"
      "chart chart chart chart chart chart"
      "watch watch watch global global global"
      "watch watch watch fx fx fx"
      "heat heat heat heat heat heat"
      "movers movers movers cmd cmd cmd"
      "eco eco eco eco eco eco"
      "infl infl infl bi bi bi"
      "gdp gdp gdp gdp gdp gdp"
      "alrt alrt alrt warn warn warn"
      "food food food food food food"
      "foodmap foodmap foodmap foodmap foodmap foodmap"
      "foodnews foodnews foodnews cal cal cal"
      "news news news news news news"
      "sat sat sat sat sat sat"
      "air air air issues issues issues"
      "enso enso enso enso enso enso"
      "quakes quakes quakes volc volc volc"
      "map map map map map map"
      "gov gov gov gov gov gov"
      "govnews govnews govnews govnews govnews govnews"
      "wx wx wx wx wx wx"
      "ships ships ships ships ships ships"
      "flights flights flights flights flights flights";
  }
}
/* header: kotak cari tidak boleh mendorong header keluar layar; label tautan disembunyikan bila sempit */
.cmd { min-width: 140px; }
@media (max-width: 1400px) { .linkedin-connect:not(.web-connect) { padding: 4px 6px; } .linkedin-connect:not(.web-connect) > span:last-child { display: none; } }
@media (max-width: 1180px) { .web-connect { padding: 4px 6px; } .web-connect > span:last-child { display: none; } }
@media (min-width: 721px) and (max-width: 1000px) { .logo span:last-child { display: none; } }
/* tabel kurs/indeks/komoditas lebih rapat di panel sempit (laptop, tablet, HP landscape, HP) */
@media (max-width: 1500px) {
  .tbl th, .tbl td { padding-left: 6px; padding-right: 6px; }
  .tbl .nm { max-width: 118px; }
  .tbl svg.spark { width: 54px; }
  /* nama indikator & nilai panjang (mis. "Surplus US$… miliar") boleh turun baris */
  .tbl.eco td:first-child, .tbl.eco td.big { white-space: normal; }
}
@media (max-width: 900px) { .hide-md { display: none; } .status .clk ~ .clk { display: none; } }
/* aturan ponsel (≤720px) ada di akhir file supaya tidak tertimpa aturan dasar di bawah */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= Fitur tambahan ================= */
.btn-sm { border: 1px solid var(--line-2); background: transparent; color: var(--tx-2); font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 2px; }
.btn-sm:hover { color: var(--amber); border-color: var(--amber); }
.btn-sm.amber { background: var(--amber); color: #000; border-color: var(--amber); }
.btn-sm.on { background: var(--amber); color: #000; }

/* bintang watchlist */
.star { width: 22px; padding-right: 0 !important; color: var(--line-2); cursor: pointer; font-size: 13px; text-align: center; }
.star:hover { color: var(--amber-2); }
.star.on { color: var(--amber); }

/* banner peringatan */
.warnbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 12px; background: #2a0b0e; border: 1px solid #5a141b; font-family: var(--mono); font-size: 12px; color: #ffd9dc; overflow: hidden; white-space: nowrap; cursor: pointer; }
.warnbar[hidden] { display: none; }
body.has-warnbar { padding-bottom: 34px; }
.warnbar b { background: var(--down); color: #000; padding: 1px 6px; border-radius: 2px; flex: none; }
.warnbar.tsunami { background: #4a0006; animation: blink 1.2s infinite; }
.warn-track { flex: 1; min-width: 0; overflow: hidden; }
.warn-run { display: flex; width: max-content; animation: warn-scroll 75s linear infinite; }
.warn-run span { display: block; flex: none; padding-right: 36px; }
.warnbar:hover .warn-run { animation-play-state: paused; }
@keyframes warn-scroll { to { transform: translateX(-50%); } }

/* alarm */
.alrt-form { display: grid; grid-template-columns: 1.1fr 1.3fr .5fr .8fr auto; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: none; }
.alrt-form input, .alrt-form select { min-width: 0; background: #000; border: 1px solid var(--line-2); border-radius: 2px; color: var(--amber-2); font-family: var(--mono); font-size: 11.5px; padding: 3px 6px; outline: 0; }
.alrt-form input:focus, .alrt-form select:focus { border-color: var(--amber); }
.alrt-form input::placeholder { color: var(--dim); }
.al { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.035); font-family: var(--mono); font-size: 12px; }
.al i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.al.fired i { background: var(--down); animation: blink 1.2s infinite; }
.al .t { color: var(--tx); }
.al .t small { display: block; color: var(--dim); font-size: 10.5px; font-family: var(--sans); }
.al button { background: none; border: 1px solid var(--line-2); color: var(--tx-2); font-size: 10.5px; padding: 1px 6px; border-radius: 2px; font-family: var(--mono); }
.al button:hover { color: var(--amber); border-color: var(--amber); }
.empty { padding: 14px 10px; color: var(--dim); font-size: 12px; line-height: 1.5; }

/* toast */
.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { background: #0f1318; border: 1px solid var(--amber); border-left: 4px solid var(--amber); padding: 9px 12px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(0,0,0,.7); animation: tin .25s ease-out; cursor: pointer; }
.toast b { display: block; font-family: var(--mono); color: var(--amber-2); font-size: 11.5px; margin-bottom: 2px; }
.toast.crit { border-color: var(--down); border-left-color: var(--down); }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } }

/* kalender */
.cal { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,.035); font-size: 12px; }
.cal .d { font-family: var(--mono); color: var(--amber); font-size: 11.5px; }
.cal .d small { display: block; color: var(--dim); font-size: 10px; }
.cal .k { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 2px; }
.cal .k.libur { background: var(--down-bg); color: var(--down); }
.cal .k.rilis { background: rgba(76,194,255,.12); color: var(--series); }

/* peta pangan */
.fm-wrap { flex: 1; min-height: 0; display: flex; }
#foodMap { flex: 1; min-width: 0; min-height: 0; background: #0b0d10; }
.fm-side { width: 210px; flex: none; border-left: 1px solid var(--line); overflow-y: auto; font-size: 11.5px; }
.fm-side h4 { margin: 0; padding: 6px 8px 3px; font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; font-weight: 600; }
.fm-row { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; cursor: pointer; }
.fm-row:hover { background: var(--hover); }
.fm-row span:last-child { font-family: var(--mono); }
.fm-legend { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 5px; font-family: var(--mono); font-size: 10px; color: var(--dim); border-top: 1px solid var(--line); flex: none; }
.fm-legend i { width: 30px; height: 8px; display: inline-block; }
.fm-legend span { margin: 0 6px; }

/* satelit */
.sat-wrap { position: relative; flex: 1; min-height: 0; }
#satMap { position: absolute; inset: 0; background: #05070a; }
.sat-layers { position: absolute; top: 8px; right: 8px; z-index: 500; display: flex; flex-direction: column; gap: 3px; background: rgba(5,7,10,.85); border: 1px solid var(--line-2); padding: 6px 9px; font-family: var(--mono); font-size: 11px; }
.sat-layers label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--tx-2); white-space: nowrap; }
.sat-layers input { accent-color: var(--amber); margin: 0; }
.sat-time { position: absolute; left: 8px; bottom: 8px; z-index: 500; background: rgba(5,7,10,.85); border: 1px solid var(--line-2); padding: 4px 8px; font-family: var(--mono); font-size: 11px; color: var(--amber-2); max-width: calc(100% - 16px); }
.wind-arrow { color: #e9f6ff; text-shadow: 0 0 3px #000, 0 0 2px #000; font-size: 16px; line-height: 18px; width: 18px; text-align: center; }

/* kualitas udara */
.air-total { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); flex: none; }
.air-total b { font-size: 26px; }
.air-total span { color: var(--dim); font-size: 11px; }
.hbar.air { grid-template-columns: 112px 1fr 76px; }
.hbar.air { cursor: pointer; }
.hbar.air:hover, .hbar.air:focus-visible { background: var(--hover); outline: none; }
.hbar.air .b i { min-width: 2px; }
.hbar.air .n { white-space: nowrap; }
.aqi-good .b i { background: var(--lv1); }
.aqi-moderate .b i { background: var(--lv2); }
.aqi-sensitive .b i { background: var(--lv3); }
.aqi-unhealthy .b i { background: var(--lv4); }
.aqi-hazard .b i { background: #a0007a; }

/* ENSO */
.enso-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.enso-status { padding: 10px 12px; border-right: 1px solid var(--line); overflow-y: auto; }
.enso-phase { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.1; }
.enso-phase small { display: block; font-size: 11px; color: var(--dim); font-weight: 500; margin-top: 3px; }
.enso-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 10px 0; font-family: var(--mono); font-size: 12px; }
.enso-kv span:nth-child(odd) { color: var(--dim); }
.enso-impact { font-size: 12px; color: var(--tx-2); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 8px; }
.enso-impact b { color: var(--amber-2); }
.enso-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
.enso-c { display: flex; flex-direction: column; padding: 6px 8px; min-height: 0; min-width: 0; }
.enso-c + .enso-c { border-left: 1px solid var(--line); }
.enso-c .chart-sm { flex: 1; min-height: 0; position: relative; padding: 4px 0 0; }
.leaflet-tooltip { background: #0f1318; color: var(--tx); border: 1px solid var(--line-2); border-radius: 2px; font-family: var(--sans); font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.leaflet-tooltip b { color: var(--amber-2); }
.leaflet-tooltip-top::before { border-top-color: var(--line-2); }
.leaflet-tooltip-left::before { border-left-color: var(--line-2); } .leaflet-tooltip-right::before { border-right-color: var(--line-2); }

/* ================= Sinyal / insight ================= */
.ins-row { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: thin; }
.ins { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 11px 9px 13px; background: var(--panel-h); border: 1px solid var(--line); cursor: pointer; min-width: 0; overflow: hidden; transition: border-color .15s; }
.ins:hover { border-color: var(--amber); }
.ins::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--dim)); }
.ins .tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--dim)); display: flex; gap: 6px; align-items: center; }
.ins .tag span { margin-left: auto; color: var(--dim); font-weight: 500; }
.ins h4 { margin: 0; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--tx); }
.ins p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ins .chain { margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--amber-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-official td { background: rgba(255,158,27,.06) !important; }

/* ================= Ponsel (≤720px) =================
   Harus tetap di akhir file: aturan dasar .alrt-form, .fm-side, .enso-* dll. ditulis di atas,
   jadi override ponsel di sini yang menang. */
@media (max-width: 720px) {
  html { scroll-padding-top: 110px; }

  /* command bar: logo + tautan, jam, lalu kotak cari; hanya command bar yang menempel */
  .cmdbar { flex-wrap: wrap; height: auto; padding: 6px 8px; gap: 6px 10px; }
  .cmd { order: 3; flex-basis: 100%; max-width: none; }
  .linkedin-connect { padding: 4px 6px; }
  .linkedin-connect > span:last-child { display: none; }
  .logo { gap: 4px; font-size: 10px; }
  .status { gap: 8px; }
  .tape, .fkeys { position: static; }

  /* panel ditumpuk satu kolom */
  .grid { display: flex; flex-direction: column; }
  .a-ins { order: -1; height: auto; }
  .a-chart { order: 0; } .a-watch { order: 1; } .a-heat { order: 2; } .a-movers { order: 3; }
  .a-global, .a-fx, .a-cmd, .a-eco, .a-gdp, .a-infl, .a-bi, .a-alrt, .a-warn, .a-cal, .a-food, .a-foodmap, .a-foodnews, .a-news, .a-issues,
  .a-sat, .a-air, .a-enso, .a-map, .a-quakes, .a-volc, .a-gov, .a-govnews, .a-wx, .a-ships, .a-flights { order: 4; }
  .a-chart { height: auto; } .a-chart .chart-wrap { flex: none; height: 340px; }
  .a-watch { height: 420px; } .a-global, .a-fx { height: 290px; } .a-heat { height: 420px; }
  .a-movers, .a-cmd { height: 300px; } .a-eco { height: 320px; } .a-gdp { height: 270px; } .a-infl, .a-bi { height: 240px; } .a-food { height: 380px; }
  .a-foodnews, .a-issues { height: 330px; } .a-news { height: 480px; } .a-map { height: 380px; } .a-quakes { height: 420px; }
  .a-volc { height: 360px; } .a-gov { height: 340px; } .a-govnews { height: 340px; } .a-wx { height: 420px; } .a-ships, .a-flights { height: 520px; }
  .a-alrt { height: 400px; } .a-warn, .a-cal { height: 320px; } .a-foodmap { height: 580px; } .a-sat { height: 540px; } .a-air { height: 380px; }
  .a-enso { height: auto; }

  /* header panel boleh turun baris supaya judul tidak terpotong */
  .panel > header { height: auto; min-height: 30px; flex-wrap: wrap; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .panel > header .ctl { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; white-space: normal; }
  .panel > header .ctl .seg { flex: none; }
  .a-chart > header > .ctl { width: 100%; margin-left: 0; justify-content: flex-start; }
  .panel > header .ctl .seg.wrap { flex: 0 1 auto; flex-wrap: wrap; gap: 3px; border: 0; }
  .seg.wrap button, .seg.wrap button + button { border: 1px solid var(--line-2); border-radius: 2px; }
  .seg.wrap button.on { border-color: var(--amber); }
  .a-heat > header .ctl, .a-infl > header .ctl { display: none; }
  .chart-rangebar { justify-content: flex-start; overflow-x: auto; }
  .chart-rangebar .seg { flex: none; }

  /* grid isi panel */
  .alrt-form { grid-template-columns: 1fr 1fr; } .alrt-form button { grid-column: span 2; }
  .fm-wrap { flex-direction: column; } .fm-side { width: auto; height: 150px; border-left: 0; border-top: 1px solid var(--line); }
  .enso-body { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .enso-status { border-right: 0; border-bottom: 1px solid var(--line); }
  .enso-charts { grid-template-columns: minmax(0, 1fr); }
  .enso-c { height: 210px; }
  .enso-c + .enso-c { border-left: 0; border-top: 1px solid var(--line); }
  .ins-row { grid-auto-columns: 82%; }
  .quote-head .px { font-size: 22px; }
  .nw { grid-template-columns: 40px 1fr; } .nw .s { display: none; }
  .hbar { grid-template-columns: 120px 1fr 30px; }
  .wgi, .wgi-head { grid-template-columns: 120px 1fr 48px; } .wgi .d, .wgi-head span:last-child { display: none; }
  .vl-c b { font-size: 17px; }
  .sat-layers { font-size: 10px; padding: 5px 7px; }
  .foot-bar { flex-direction: column; }
}