:root{
  --bg:#0c0d10; --panel:#101216; --panel2:#14171c; --line:#23262d; --line2:#2c3038;
  --txt:#eef0f4; --dim:#9aa0ac; --faint:#6b7079;
  --accent:#f0a23b; --accent-soft:#f0a23b22; --accent-line:#f0a23b88;
  --ok:#5ec27a; --warn:#e8a13a; --danger:#e0556b; --hidden:#caa6ff;
  --r:12px;
  --sans:'IBM Plex Sans',-apple-system,'PingFang SC',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--txt); font-family:var(--sans); overflow:hidden; }
button{ font-family:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,textarea,select{ font-family:inherit; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#2a2d35; border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }
:focus-visible{ outline:2px solid #8fa6ff; outline-offset:1px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.app{ position:fixed; inset:0; display:flex; }
.main{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; background:#08090b; overflow:hidden; }

/* side handles (30px rails with vertical labels) */
.side-handle{ position:absolute; top:0; bottom:0; width:30px; z-index:15; background:var(--panel2,#14171c); color:var(--dim); display:flex; align-items:center; justify-content:center; border:0; }
.left-handle{ left:0; border-right:1px solid var(--line); }
.main.editing .left-handle{ top:46px; }
.right-handle{ right:0; border-left:1px solid var(--line); }
.right-handle.on{ background:#1b1e24; color:var(--txt); }
.side-handle:hover{ color:var(--txt); }
.handle-label{ writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:.16em; }
.panel-close{ color:var(--faint); font-size:20px; line-height:1; padding:2px 4px; flex:none; align-self:flex-start; }
.panel-close:hover{ color:var(--txt); }

/* left drawer = overlay + backdrop */
.backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:38; opacity:0; pointer-events:none; transition:opacity .2s; }
.backdrop.show{ opacity:1; pointer-events:auto; }
.eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.muted{ color:var(--dim); font-size:13px; }
.pad{ padding:18px; }

/* ===== LEFT NAV (overlay drawer, collapsed by default) ===== */
.nav{ position:absolute; left:0; top:0; bottom:0; width:300px; max-width:86%; z-index:40;
  background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(-100%); transition:transform .26s ease; box-shadow:none; }
.nav.open{ transform:translateX(0); box-shadow:0 0 50px rgba(0,0,0,.55); }
.nav-head{ padding:16px 16px 12px; border-bottom:1px solid var(--line); position:relative; }
.nav-title{ font-size:18px; font-weight:600; }
.vp-toggle{ position:absolute; top:14px; right:48px; display:flex; background:var(--panel2); border-radius:8px; padding:2px; }
.nav-head .panel-close{ position:absolute; top:12px; right:12px; }
.vp{ width:30px; height:24px; border-radius:6px; color:var(--dim); font-size:14px; }
.vp.on{ background:var(--accent); color:#1a1206; }
.section{ padding:14px 16px; border-bottom:1px solid var(--line); }
.section.grow{ flex:1; overflow:auto; }
.versions{ display:flex; flex-direction:column; gap:8px; }
.ver{ text-align:left; padding:10px 12px; border-radius:10px; background:var(--panel2); border:1px solid transparent; }
.ver.on{ border-color:var(--accent-line); background:#1b1a16; }
.ver-v{ font-weight:600; }
.ver-t{ font-size:12px; color:var(--dim); margin-top:2px; }
.links{ display:flex; flex-wrap:wrap; gap:8px; }
.link{ display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); font-size:13px; color:var(--txt); text-decoration:none; }
.link:hover{ border-color:var(--line2); }
.tree-group{ font-size:11px; color:var(--faint); margin:10px 0 4px; letter-spacing:.05em; }
.page{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:8px; color:var(--txt); }
.page:hover{ background:var(--panel2); }
.page.on{ background:#1b1a16; }
.page .dot{ width:7px; height:7px; border-radius:50%; background:var(--line2); flex:none; }
.page.on .dot{ background:var(--accent); }
.page-t{ flex:1; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge{ font-size:10px; color:var(--accent); background:var(--accent-soft); padding:2px 7px; border-radius:20px; }
.cov{ font-size:10px; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.cov-ok{ color:var(--ok); background:#5ec27a1c; }
.cov-partial{ color:var(--warn); background:#e8a13a1c; }
.cov-missing{ color:var(--danger); background:#e0556b1c; }

/* ===== CENTER / STAGE ===== */
.topbar{ display:none; align-items:center; gap:14px; padding:8px 14px 8px 40px; background:var(--panel); border-bottom:1px solid var(--line); min-height:46px; position:relative; z-index:16; }
.topbar.show{ display:flex; }
.tools{ display:flex; align-items:center; gap:10px; }
.tb-title{ color:var(--accent); font-weight:600; font-size:13px; }
.tb-hint,.tb-tip{ color:var(--faint); font-size:11px; }
.seg{ display:flex; background:var(--panel2); border-radius:8px; padding:2px; }
.seg-b{ padding:5px 12px; border-radius:6px; font-size:12.5px; color:var(--dim); }
.seg-b.on{ background:var(--accent); color:#1a1206; }
.save-status{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); font-family:var(--mono); }
.save-saved span{ color:var(--ok); }
.save-dirty span{ color:var(--warn); }
.save-error span{ color:var(--danger); }
.spin{ width:13px; height:13px; border:2px solid #2a2d35; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.mini{ font-size:11px; padding:4px 9px; border-radius:6px; background:var(--panel2); border:1px solid var(--line); color:var(--txt); }
.mini.ghost{ background:transparent; }
.exit-btn{ font-size:12.5px; padding:6px 13px; border-radius:8px; border:1px solid var(--line2); }
.exit-btn:hover{ border-color:var(--accent-line); }

.draft-banner{ display:none; align-items:center; gap:10px; padding:8px 14px; background:#1d1a12; border-bottom:1px solid #3a2f17; font-size:12.5px; color:var(--warn); }
.draft-banner.show{ display:flex; }
.draft-banner .spacer{ flex:1; }

.stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 40px; overflow:hidden; }
.device{ position:relative; background:#000; border-radius:14px; box-shadow:0 12px 50px #000a; overflow:hidden; }
.device.phone{ width:390px; height:min(844px, calc(100vh - 130px)); }
.device.desktop{ width:min(100%, 1100px); height:calc(100vh - 130px); border-radius:10px; }
.demo{ width:100%; height:100%; border:0; display:block; background:#000; }

.overlay{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.overlay.editing{ pointer-events:auto; }
.overlay.editing[data-tool="draw"]{ cursor:crosshair; }
.overlay.editing[data-tool="select"]{ cursor:grab; }

.rbox{ position:absolute; border:1.5px dashed var(--accent-line); border-radius:6px; background:transparent; pointer-events:auto; }
.overlay:not(.editing) .rbox{ cursor:pointer; }
.rbox.sel{ border-style:solid; background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-line) inset; }
.rbox.ghost{ border-style:solid; background:var(--accent-soft); }
.rbox-tag{ position:absolute; top:0; left:0; transform:translateY(-100%); display:inline-flex; gap:6px; align-items:center; background:var(--accent); color:#1a1206; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px 6px 6px 0; white-space:nowrap; max-width:100%; }
.rbox-range{ font-family:var(--mono); font-weight:500; opacity:.8; }
.rbox .h{ position:absolute; width:11px; height:11px; background:var(--accent); border:1.5px solid #1a1206; border-radius:3px; display:none; }
.rbox.editable.sel .h{ display:block; }
.h-n{ top:-6px; left:50%; margin-left:-6px; cursor:ns-resize; }
.h-s{ bottom:-6px; left:50%; margin-left:-6px; cursor:ns-resize; }
.h-e{ right:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.h-w{ left:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.h-ne{ top:-6px; right:-6px; cursor:nesw-resize; }
.h-nw{ top:-6px; left:-6px; cursor:nwse-resize; }
.h-se{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.h-sw{ bottom:-6px; left:-6px; cursor:nesw-resize; }
.rbox.editable{ cursor:move; }
.guides{ position:absolute; inset:0; pointer-events:none; }
.guide{ position:absolute; background:#8fa6ff; box-shadow:0 0 4px #8fa6ff; }
.guide.h{ left:0; right:0; height:1px; }
.guide.v{ top:0; bottom:0; width:1px; }

.edit-entry{ position:absolute; left:42px; bottom:18px; z-index:16; display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:22px; background:var(--panel); border:1px solid var(--line2); font-size:13px; box-shadow:0 6px 20px #0007; }
.edit-entry:hover{ border-color:var(--accent-line); }

/* ===== RIGHT INSPECTOR (collapses to width 0) ===== */
.inspector{ flex:none; width:0; background:var(--panel); border-left:0; display:flex; flex-direction:column; overflow:hidden; transition:width .26s ease; }
.inspector.open{ width:380px; border-left:1px solid var(--line); }
.inspector > *{ width:380px; }
.insp-head{ padding:16px 18px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:10px; }
.insp-head-text{ flex:1; min-width:0; }
.insp-title{ font-size:20px; font-weight:600; }
.insp-body{ flex:1; overflow:auto; padding:16px 18px 40px; }

/* viewer rules */
.rg{ margin-bottom:18px; }
.rg-head{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin-bottom:10px; cursor:pointer; }
.rg-mark{ width:8px; height:8px; border-radius:50%; background:var(--line2); }
.rg.active .rg-mark{ background:var(--accent); }
.rg.active .rg-head{ color:var(--accent); }
.rule{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; margin-bottom:10px; }
.rule.hidden{ border-color:#3a3350; background:#191725; }
.tag-hidden{ display:inline-block; font-family:var(--mono); font-size:10.5px; color:var(--hidden); border:1px solid #4a4170; border-radius:5px; padding:2px 7px; margin-bottom:9px; }
.rule-t{ font-weight:600; font-size:14px; margin-bottom:6px; }
.rule-b{ font-size:13px; line-height:1.65; color:var(--dim); white-space:pre-wrap; }

/* editor */
.big-btn{ width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px; border-radius:var(--r); background:var(--accent); color:#1a1206; font-weight:600; font-size:15px; margin-bottom:14px; }
.big-btn .sub{ font-size:11px; font-weight:500; opacity:.8; }
.cov-card{ border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:16px; background:var(--panel2); }
.cov-card.cov-partial{ border-color:#5a4a20; }
.cov-card.cov-missing{ border-color:#5a2a33; }
.cov-row{ display:flex; align-items:center; gap:12px; }
.cov-pill{ font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:8px; background:#5ec27a1c; color:var(--ok); white-space:nowrap; }
.cov-partial .cov-pill{ background:#e8a13a1c; color:var(--warn); }
.cov-missing .cov-pill{ background:#e0556b1c; color:var(--danger); }
.declared{ flex:1; }
.cov-sub{ font-size:13px; font-weight:500; }
.cov-hint{ font-size:11px; color:var(--faint); margin-top:2px; }
.stepper{ display:flex; align-items:center; gap:4px; }
.stepper button{ width:30px; height:30px; border-radius:8px; background:var(--panel); border:1px solid var(--line2); font-size:16px; }
.stepper .num{ min-width:30px; text-align:center; font-family:var(--mono); font-size:15px; }
.mini-link{ margin-top:8px; font-size:11px; color:var(--faint); text-decoration:underline; }

.list-head{ display:flex; justify-content:space-between; font-size:12px; color:var(--faint); margin:6px 0 8px; }
.rrow{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); margin-bottom:7px; cursor:pointer; }
.rrow.on{ border-color:var(--accent-line); background:#1b1a16; }
.rrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--line2); }
.rrow.on .dot{ background:var(--accent); }
.rrow-name{ flex:1; font-size:13.5px; }
.rrow-count{ font-family:var(--mono); font-size:11.5px; color:var(--dim); }
.rrow-count.partial{ color:var(--warn); }

.region-edit{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.sub-head{ font-size:12px; color:var(--faint); margin:14px 0 8px; }
.rect-readout{ font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-bottom:8px; }
.field{ width:100%; background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:9px 11px; color:var(--txt); font-size:13px; margin-bottom:8px; }
.field:focus{ border-color:var(--accent-line); outline:none; }
textarea.field{ resize:vertical; line-height:1.5; }
.btn-row{ display:flex; gap:8px; margin-bottom:8px; }
.ghost-btn{ flex:1; padding:9px; border-radius:8px; border:1px solid var(--line2); font-size:12.5px; }
.ghost-btn:hover{ border-color:var(--accent-line); }
.danger-btn{ padding:9px 12px; border-radius:8px; border:1px solid #5a2a33; color:var(--danger); font-size:12.5px; }
.danger-btn:hover{ background:#e0556b14; }
.rule-edit{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:11px; margin-bottom:9px; }
.rule-edit.hidden{ border-color:#3a3350; }
.rule-edit-bar{ display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.toggle{ font-size:11px; padding:5px 9px; border-radius:6px; border:1px solid var(--line2); color:var(--dim); }
.toggle.on{ border-color:#4a4170; color:var(--hidden); background:#191725; }
.move-sel{ margin-left:auto; background:var(--panel); border:1px solid var(--line2); border-radius:6px; color:var(--dim); font-size:11.5px; padding:5px 6px; }
.icon-btn{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line2); color:var(--dim); font-size:12px; }
.icon-btn:hover{ color:var(--danger); border-color:#5a2a33; }
.rt{ font-weight:600; }
.add-rule{ width:100%; padding:9px; border-radius:8px; border:1px dashed var(--line2); color:var(--dim); font-size:12.5px; margin-bottom:7px; }
.add-rule:hover{ border-color:var(--accent-line); color:var(--accent); }
.add-rule.ghost{ font-size:11.5px; }

/* ===== modal ===== */
.modal-overlay{ position:fixed; inset:0; background:#000a; display:flex; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(3px); }
.auth-card{ width:340px; background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:22px; box-shadow:0 20px 60px #000c; }
.auth-title{ font-size:18px; font-weight:600; }
.auth-sub{ font-size:12px; color:var(--dim); line-height:1.6; margin:8px 0 16px; }
.auth-err{ color:var(--danger); font-size:12px; min-height:16px; margin-bottom:8px; }
.auth-actions{ display:flex; gap:8px; }
.primary-btn{ flex:1; padding:10px; border-radius:9px; background:var(--accent); color:#1a1206; font-weight:600; }
.primary-btn:disabled{ opacity:.6; }
.auth-actions .ghost-btn{ flex:0 0 auto; padding:10px 14px; }

/* ===== responsive ===== */
@media (max-width:820px){
  /* right panel overlays instead of pushing on narrow screens */
  .inspector{ position:absolute; right:0; top:0; bottom:0; width:0; z-index:42; box-shadow:none; }
  .inspector.open{ width:min(360px,90vw); box-shadow:-8px 0 40px #000a; }
  .inspector > *{ width:min(360px,90vw); }
  .device.phone{ height:min(740px, calc(100vh - 120px)); }
  .device.desktop{ width:100%; }
}