:root {
  --bg: #04060a;
  --panel: #070b11;
  --line: #16202c;
  --line2: #243548;
  --text: #d3e2f0;
  --dim: #6b8296;
  --acc: #ffb347;
  --alm: #ff3b5c;
  --ok: #5fe3a1;
  --plate: #b57bff;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font: 12px/1.35 var(--mono); }
body { overflow: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b { font-weight: 600; }

#root {
  height: 100vh; min-height: 680px; min-width: 1180px;
  display: grid; grid-template-rows: 64px minmax(0, 1fr) 272px 28px; gap: 4px; padding: 4px;
}

.z { position: relative; background: var(--panel); border: 1px solid var(--line); min-width: 0; min-height: 0; overflow: hidden; }
.zlab { color: var(--dim); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.zlab b { color: var(--text); }
.zsub { color: var(--dim); font-size: 11px; white-space: nowrap; }
.hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 8px 4px; border-bottom: 1px solid var(--line); }
.ohd .zlab, .hd .zlab { white-space: nowrap; }
.ohd { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 8px; pointer-events: none; z-index: 2; }
canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- T ---- */
.t { display: grid; grid-template-columns: .95fr 1fr .78fr 1.25fr 1.6fr 1.2fr .9fr 1.02fr; gap: 4px; }
.tc { background: var(--panel); border: 1px solid var(--line); padding: 6px 8px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
.tc .r1 { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc .r1 b { color: var(--text); }
.tc .r2 { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-word .ws { font-size: 20px; font-weight: 700; letter-spacing: .22em; color: var(--acc); }
.t-clock .cv { display: flex; align-items: baseline; gap: 6px; }
.t-clock small { color: var(--dim); font-size: 11px; }
.t-clock span { font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.t-big .hv { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); margin-right: 7px; vertical-align: 0; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: beat 2s ease-in-out infinite; }
.dot.warn { background: var(--acc); }
.dot.err { background: var(--alm); }
@keyframes beat { 50% { opacity: .35; } }
.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 10px var(--acc); } 100% { text-shadow: none; } }

/* ---- middle ---- */
.mid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(500px, 1fr); gap: 4px; min-height: 0; }
.zBC { display: grid; grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4px; min-height: 0; }

/* A */
.zA canvas#a-cv { cursor: grab; }
.zA canvas#a-cv.dragging { cursor: grabbing; }
.a-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.5) 100%); }
.plate { position: absolute; pointer-events: none; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.a-hdr { left: 10px; top: 8px; }
.a-view { left: 10px; top: 44px; }
.a-stat { right: 10px; top: 8px; text-align: right; }
.a-inset { position: absolute; inset: auto; left: 10px; bottom: 40px; width: 288px; height: 144px; border: 1px solid var(--line2); background: rgba(4,6,10,.7); z-index: 3; }   /* in front of the globe canvas */
.zA #a-cv { z-index: 1; }
.a-vig, .plate, .a-strip { z-index: 2; }
.a-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 10px; background: linear-gradient(transparent, rgba(4,6,10,.92) 40%); font-size: 11px; color: var(--dim); pointer-events: none; }
.lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg b { color: var(--text); font-weight: 600; }
.lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg u { display: inline-block; border-radius: 50%; background: #9fb4c8; text-decoration: none; }
.lg u.c3 { width: 5px; height: 5px; } .lg u.c5 { width: 9px; height: 9px; } .lg u.c7 { width: 15px; height: 15px; }
.lg u.ring { width: 10px; height: 10px; background: none; border: 1px solid #9fb4c8; }
.lg u.flash { width: 10px; height: 10px; background: none; border: 1px solid var(--acc); box-shadow: 0 0 6px var(--acc); }
.lg s { display: inline-block; width: 16px; height: 0; border-top: 1px solid var(--plate); }
.lg em { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #5fd8ff; }
.lg.sep { margin-left: 6px; }

/* B */
.zB { display: flex; flex-direction: column; }
.stb-wrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.stb { width: 100%; border-collapse: collapse; table-layout: fixed; }
.stb th { position: sticky; top: 0; background: var(--panel); color: var(--dim); font-weight: 400; font-size: 10.5px; letter-spacing: .05em; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line2); z-index: 1; }
.stb th.n, .stb td.n { text-align: right; }
.stb td { padding: 0 6px; height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(255,255,255,.025); }
.stb col { }
.stb th:nth-child(1), .stb td:nth-child(1) { width: 92px; }
.stb th:nth-child(2), .stb td:nth-child(2) { width: 58px; }
.stb th:nth-child(3), .stb td:nth-child(3) { width: 78px; }
.stb th:nth-child(4), .stb td:nth-child(4) { width: 44px; }
.stb th:nth-child(5), .stb td:nth-child(5) { width: 66px; }
.stb th:nth-child(7), .stb td:nth-child(7) { width: 74px; }
.stb tbody tr { cursor: pointer; }
.stb tbody tr:hover { background: rgba(120,170,220,.08); }
.stb tbody tr.sel { background: rgba(255,179,71,.14); box-shadow: inset 2px 0 0 var(--acc); }
.stb tbody tr.new { animation: rowflash 6s ease-out; }
@keyframes rowflash { 0% { background: rgba(255,179,71,.45); } 100% { background: transparent; } }
.stb .mg { font-weight: 700; }
.mb { display: inline-block; height: 5px; margin-left: 5px; background: currentColor; opacity: .7; vertical-align: 1px; }
.flag { display: inline-block; padding: 0 3px; margin-right: 3px; font-size: 10px; border: 1px solid currentColor; line-height: 1.25; }
.flag.t { color: var(--alm); }
.flag.p-green { color: var(--ok); } .flag.p-yellow { color: #ffe14a; } .flag.p-orange { color: #ff9a3a; } .flag.p-red { color: var(--alm); }
.flag.f { color: #7fc4ff; }
.flag.a { color: var(--dim); }

/* C */
.zC { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.c-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.c-col + .c-col { border-left: 1px solid var(--line); }
.c-list { flex: 1; min-height: 0; overflow: hidden; padding: 3px 0; }
.cr { display: grid; align-items: center; gap: 6px; padding: 0 8px; height: 22px; cursor: pointer; white-space: nowrap; }
.cr:hover { background: rgba(120,170,220,.08); }
#c-reg .cr { grid-template-columns: minmax(0, 1fr) 30px 56px 38px; }
#c-sig .cr { grid-template-columns: 38px minmax(0, 1fr) 40px; }
.cr .nm { overflow: hidden; text-overflow: ellipsis; }
.cr .n { text-align: right; color: var(--dim); }
.cr .bar { height: 6px; background: var(--line2); position: relative; }
.cr .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); opacity: .75; }
.cr .mx { text-align: right; font-weight: 700; }
.cr .sg { color: var(--dim); text-align: right; }

/* ---- bottom ---- */
.bot { display: grid; grid-template-columns: 1.15fr 1.6fr 1fr .9fr; gap: 4px; min-height: 0; }
.zE canvas { cursor: default; }
.e-ctl { position: absolute; top: 3px; right: 8px; display: flex; gap: 4px; z-index: 3; }
.e-ctl button { padding: 0 7px; border: 1px solid var(--line2); font-size: 10.5px; color: var(--text); line-height: 1.5; }
.e-ctl button:hover { border-color: var(--acc); }
.e-ctl button.on { background: rgba(255,179,71,.18); border-color: var(--acc); color: var(--acc); }
.e-msg { position: absolute; inset: 34px 14px 12px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--dim); pointer-events: none; line-height: 1.7; white-space: pre-line; }
.e-msg.hide { display: none; }
.zF, .zG { display: flex; flex-direction: column; }
.f-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; padding: 6px 8px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 1px 12px; }
.f-head { grid-column: 1 / -1; margin-bottom: 4px; }
.f-head .big { font-size: 24px; font-weight: 700; line-height: 1.1; }
.f-head .big small { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 6px; }
.f-head .pl { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-head .tm { color: var(--dim); font-size: 11px; }
.kv { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; overflow: hidden; }
.kv span:first-child { color: var(--dim); }
.kv span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.kv.w { grid-column: 1 / -1; }
.g-list { flex: 1; min-height: 0; overflow: hidden; padding: 3px 0; }
.gl { display: grid; grid-template-columns: 58px 34px minmax(0, 1fr); gap: 6px; padding: 0 8px; height: 19px; white-space: nowrap; cursor: default; }
.gl.ev { cursor: pointer; }
.gl.ev:hover { background: rgba(120,170,220,.08); }
.gl .tm { color: var(--dim); }
.gl .tg { font-weight: 700; }
.gl .tx { overflow: hidden; text-overflow: ellipsis; }

/* ---- keys ---- */
.keys { display: flex; align-items: center; gap: 18px; padding: 0 8px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; }
.kg { display: inline-flex; align-items: center; gap: 4px; }
.keys button { padding: 2px 8px; border: 1px solid var(--line2); color: var(--text); font-size: 11px; }
.keys button:hover { border-color: var(--acc); }
.keys button.on { background: rgba(255,179,71,.18); border-color: var(--acc); color: var(--acc); }
.kh { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.coffee { flex: none; margin-left: 18px; color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--line2); padding-bottom: 1px; }
.coffee:hover { color: var(--acc); border-bottom-color: var(--acc); }

.tip { position: fixed; z-index: 10; pointer-events: none; display: none; max-width: 340px; padding: 5px 8px; background: rgba(4,8,14,.94); border: 1px solid var(--line2); box-shadow: 0 4px 14px rgba(0,0,0,.6); font-size: 11px; line-height: 1.45; }
.tip b { color: var(--acc); }

@media (max-height: 820px) { #root { grid-template-rows: 58px minmax(0, 1fr) 236px 28px; } .f-body { font-size: 11px; } }
@media (max-width: 1500px) { .kh { display: none; } .coffee { margin-left: auto; } }