:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#07101d; color:#f4f7fb; }
body { background:radial-gradient(circle at 50% -15%, #183652 0, #0b1728 40%, #050b14 100%); }
button, input { font:inherit; }
header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(3,9,17,.96); border-bottom:1px solid #32445a; position:relative; z-index:30; }
.brand { display:flex; align-items:center; gap:13px; }
.mark { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:#ecb524; color:#10151c; font-weight:900; letter-spacing:-1px; }
.brand-title { font-size:22px; font-weight:760; }
.brand-subtitle { color:#91a5bb; font-size:12px; margin-top:2px; letter-spacing:.08em; text-transform:uppercase; }
.close { border:1px solid #63758a; border-radius:9px; background:#172436; color:#fff; padding:11px 16px; font-size:15px; font-weight:650; }
main { height:calc(100% - 74px); }
.entry-stage { height:100%; overflow:auto; display:grid; place-items:center; padding:34px; }
.shell { width:min(720px, 92vw); }
.eyebrow { color:#efbb2e; text-transform:uppercase; letter-spacing:.14em; font-size:13px; font-weight:800; text-align:center; }
h1 { text-align:center; font-size:44px; margin:10px 0 8px; letter-spacing:-.035em; }
.lead { text-align:center; color:#afbed0; font-size:18px; margin:0 auto 27px; max-width:590px; line-height:1.45; }
.card { background:rgba(20,32,48,.96); border:1px solid #42556a; border-radius:18px; box-shadow:0 22px 70px rgba(0,0,0,.38); padding:27px; }
label { display:block; font-size:14px; font-weight:750; margin-bottom:9px; }
.input-row { display:grid; grid-template-columns:1fr auto; gap:12px; }
input { width:100%; border:2px solid #667b91; border-radius:11px; background:#07111e; color:white; padding:16px 17px; font-size:25px; text-transform:uppercase; letter-spacing:.23em; font-weight:780; outline:none; }
input:focus { border-color:#efbb2e; box-shadow:0 0 0 3px rgba(239,187,46,.16); }
.primary { border:0; border-radius:11px; background:#efbb2e; color:#111820; padding:0 23px; font-size:16px; font-weight:820; }
.help { color:#91a5bb; font-size:13px; margin-top:10px; }
.result { display:none; margin-top:20px; border-radius:14px; padding:20px; border:1px solid #52667c; background:#0b1624; }
.result.active { border-color:#39b879; background:#0b241d; }
.result.cancelled { border-color:#e15f64; background:#2b1217; }
.result.invalid { border-color:#d69736; background:#291d0c; }
.result h2 { margin:0 0 6px; font-size:23px; }
.result p { color:#c5d0db; line-height:1.45; margin:5px 0; }
.meta { margin-top:16px; display:grid; gap:9px; }
.meta-row { display:grid; grid-template-columns:150px 1fr; gap:12px; border-top:1px solid rgba(255,255,255,.10); padding-top:9px; }
.meta-key { color:#91a5bb; }
.limits { margin:0; padding-left:20px; color:#e9eef4; }
.open { display:none; width:100%; margin-top:18px; border:0; border-radius:10px; background:#3c9f68; color:white; padding:14px; font-size:16px; font-weight:800; }
.notice { margin-top:18px; color:#778da5; text-align:center; font-size:12px; line-height:1.45; }

.viewer { display:none; width:100%; height:100%; background:#050b14; }
.viewer-shell { height:100%; display:grid; grid-template-rows:auto auto auto minmax(0,1fr); }
.viewer-summary { grid-row:1; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:9px 20px; background:#0c1828; border-bottom:1px solid #30445b; }
.summary-main { display:flex; align-items:center; gap:18px; min-width:0; }
.status-pill { background:#173d2e; border:1px solid #39b879; color:#a9f0c9; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:800; white-space:nowrap; }
.summary-reference { font-weight:800; white-space:nowrap; }
.summary-limits { color:#aebed0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.summary-code { color:#efbb2e; font-weight:850; letter-spacing:.13em; white-space:nowrap; }
.viewer-nav { grid-row:3; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:#07111e; border-bottom:1px solid #30445b; }
.tabs { display:flex; gap:8px; }
.tab { border:1px solid #50657c; background:#142338; color:#d9e3ed; border-radius:10px; padding:10px 20px; font-weight:750; }
.tab.active { background:#efbb2e; border-color:#efbb2e; color:#101820; }
.viewer-actions { display:flex; align-items:center; gap:7px; }
.tool { min-width:42px; height:38px; border:1px solid #50657c; border-radius:9px; background:#142338; color:#fff; font-weight:800; }
.back { border:1px solid #66798e; border-radius:9px; background:#172436; color:#fff; padding:10px 15px; font-weight:700; }
.mode-stage { grid-row:4; position:relative; min-height:0; overflow:hidden; }
.mode { display:none; position:absolute; inset:0; background:#0a1017; }
.mode.active { display:block; }
.canvas { position:absolute; inset:0; overflow:hidden; background:#eef1f3; touch-action:none; user-select:none; }
.svg-surface { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.svg-surface svg { display:block; width:100%; height:100%; max-width:none; background:white; box-shadow:0 10px 36px rgba(0,0,0,.32); pointer-events:none; }
.loading { position:absolute; inset:0; display:grid; place-items:center; background:#07111e; color:#afbed0; z-index:3; }
.error { color:#ffb6b6; max-width:520px; text-align:center; line-height:1.5; padding:30px; }
.satellite { background:#07101d; overflow:hidden; padding:0; }
.satellite-banner { position:absolute; top:16px; left:18px; right:18px; z-index:4; background:rgba(102,64,2,.96); border:1px solid #f0b82e; color:#fff5d5; border-radius:12px; padding:12px 16px; box-shadow:0 10px 28px rgba(0,0,0,.38); text-align:center; }
.satellite-banner strong { display:block; color:#ffc83d; letter-spacing:.04em; margin-bottom:3px; }
.satellite-canvas { position:absolute; inset:0; overflow:auto; background:#050b14; -webkit-overflow-scrolling:touch; }
.satellite-image-wrap { width:100%; height:100%; min-width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; transform-origin:top left; }
.satellite-image { display:block; width:100%; height:100%; object-fit:cover; }
.satellite-error { position:absolute; inset:0; display:none; place-items:center; color:#ffb6b6; padding:30px; text-align:center; }
@media (max-width:700px) { .input-row { grid-template-columns:1fr; } .primary { min-height:52px; } h1 { font-size:36px; } .summary-limits { display:none; } .tab { padding:9px 13px; } }
.viewer-warning { grid-row:2; display:none; padding:10px 20px; border-bottom:1px solid #d69736; background:#291d0c; color:#fff1cf; font-size:13px; font-weight:700; text-align:center; }
.viewer-warning.delayed { display:block; }
.viewer-warning.stale { display:block; border-color:#e15f64; background:#2b1217; color:#ffd7d9; }
.status-pill.delayed { background:#49320e; border-color:#d69736; color:#ffe1a4; }
.status-pill.stale { background:#4a171c; border-color:#e15f64; color:#ffc4c7; }
.result.connection_delayed { border-color:#d69736; background:#291d0c; }
.result.stale { border-color:#e15f64; background:#2b1217; }
.result.preparing, .result.ready_for_release, .result.suspended, .result.abandoned { border-color:#d69736; background:#291d0c; }
@media (max-width:700px) {
  header { padding:0 14px; }
  .brand-subtitle { display:none; }
  .viewer-nav { height:auto; min-height:58px; align-items:flex-start; gap:10px; padding:10px; flex-wrap:wrap; }
  .viewer-actions { flex-wrap:wrap; }
  .viewer-summary { padding:9px 12px; }
}