/* ════════════════════════════════════════════════════════════════
   LIGHT SOUND & MATTER — iri.os operator terminal (placeholder)
   Iridescence COLORS (rose + slate + ice) + axismecca-NEXUS structure
   & // voice, rendered in VT323 (CRT pixel terminal mono).
   Type scaled +20% from the first VT323 pass. No gradients, no white.
   ════════════════════════════════════════════════════════════════ */

/* ════════ TOKENS ════════ */
:root {
  --void:     #000;
  --surface:  #0a0a0a;
  --frame:    #2a3040;
  --frame-hi: #3d4a5c;
  --text:     #8896a4;
  --text-hi:  #c0ccd8;
  --rose:     #b8435a;
  --rose-lo:  #5c2230;
  --rose-hi:  #d4607a;
  --rose-hot: #f07090;
  --ice:      #90a8c4;
  --divider:  rgba(42,48,64,0.45);

  /* VT323 = pixel/CRT terminal mono (keeps operator-terminal character) */
  --font: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  --font-sys:  var(--font);
  --font-body: var(--font);
  --settle: cubic-bezier(0.34, 1.4, 0.64, 1);

  --hdr-h:    46px;
  --status-h: 30px;
  --nav-w:    226px;
  --hud-w:    218px;
}

/* ════════ RESET ════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #020202;
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.32;
  overflow: hidden;
  /* iri.os device-LCD crunch: aliased text */
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
::selection { background: var(--rose-lo); color: var(--text-hi); }

/* iri.os device surfaces: aliased/pixelated rendering + rose crosshair cursor */
#login-screen, #boot-screen, #app {
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  text-rendering: optimizeSpeed;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='2' fill='none' stroke='%23b8435a' stroke-width='1'/%3E%3Cline x1='6' y1='0' x2='6' y2='3' stroke='%23b8435a'/%3E%3Cline x1='6' y1='9' x2='6' y2='12' stroke='%23b8435a'/%3E%3Cline x1='0' y1='6' x2='3' y2='6' stroke='%23b8435a'/%3E%3Cline x1='9' y1='6' x2='12' y2='6' stroke='%23b8435a'/%3E%3C/svg%3E") 6 6, crosshair;
}

/* helpers */
.iri-text     { color: var(--text-hi); }
.iri-text-dim { color: var(--rose-lo); }
.dim-text     { color: var(--frame-hi); }
.nano-label   { font-size: 11px; letter-spacing: 0.24em; color: var(--frame-hi); text-transform: uppercase; }

/* ════════ KEYFRAMES ════════ */
@keyframes blink   { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes dp      { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes barFlux { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes crtFlash{ 0% { opacity: 0.42; } 100% { opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.dot-live { display:inline-block; width:6px; height:6px; background: var(--rose); margin-right:3px;
  vertical-align:middle; animation: dp 2s ease-in-out infinite; }
.dot-warn { display:inline-block; width:6px; height:6px; background: var(--frame-hi); margin-right:3px;
  vertical-align:middle; }

/* ════════ BACKDROP — flat slate grid (no gradient, no map) ════════ */
#grid-field {
  position: fixed; inset: 0; z-index: 0;
  background-color: var(--void);
  background-image:
    linear-gradient(rgba(184,67,90,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,67,90,0.035) 1px, transparent 1px);
  background-size: 38px 38px, 38px 38px;
}
#grid-field::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,0.55) 100%);
}

/* ════════ OVERLAYS ════════ */
.crt-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px);
}
.grain-overlay { display: none; }
#crt-switch { position: fixed; inset: 0; pointer-events: none; z-index: 9995; background: var(--rose-lo); opacity: 0; }
#crt-switch.flash { animation: crtFlash 0.12s ease-out; }

/* ════════ LOGIN GATE ════════ */
#login-screen { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.login-frame {
  position: relative; width: min(480px, 92vw); padding: 36px 34px 26px;
  background: var(--surface); border: 1px solid var(--frame); text-align: center;
}
.login-frame::before, .login-frame::after { content:''; position:absolute; width:11px; height:11px; pointer-events:none; }
.login-frame::before { top:5px; left:5px; border-top:1px solid var(--rose-lo); border-left:1px solid var(--rose-lo); }
.login-frame::after  { bottom:5px; right:5px; border-bottom:1px solid var(--rose-lo); border-right:1px solid var(--rose-lo); }
.login-class { font-size: 11px; letter-spacing: 0.18em; color: var(--rose); line-height: 1.7; margin-bottom: 24px; text-transform: uppercase; }
.login-sigil { position: relative; width: 48px; height: 48px; margin: 0 auto 18px; }
.sigil-ring { position:absolute; inset:0; border-radius:50%; border:1px solid var(--rose); border-top-color: transparent;
  animation: ring-spin 5s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.sigil-core { position:absolute; inset:16px; border-radius:50%; background: var(--rose-lo); animation: dp 2.4s ease-in-out infinite; }
.login-title { font-size: 28px; color: var(--text-hi); letter-spacing: 0.12em; line-height: 1.25; }
.login-sub { font-size: 12px; letter-spacing: 0.22em; color: var(--rose-lo); margin-top: 8px; margin-bottom: 24px; }
.login-label { display:block; text-align:left; font-size: 12px; letter-spacing: 0.18em; color: var(--frame-hi); margin-bottom: 8px; }
.login-input { width:100%; padding:11px 12px; background: var(--void); border:1px solid var(--frame);
  color: var(--ice); font-size: 18px; letter-spacing: 0.28em; outline:none; transition: border-color .12s; }
.login-input:focus { border-color: var(--rose); }
.login-btn { width:100%; margin-top:16px; padding:13px; font-size:16px; letter-spacing:0.24em;
  color: var(--text); background: var(--void); border:1px solid var(--frame); transition: all .1s; }
.login-btn:hover { color: var(--rose-hi); border-color: var(--rose); }
.login-btn:active { transform: scale(0.99); }
.login-error { min-height:15px; margin-top:12px; font-size:12px; letter-spacing:0.14em; color: var(--rose-hot); }
.login-hint  { margin-top:7px; font-size:11px; letter-spacing:0.12em; color: var(--frame-hi); }
.login-footer{ margin-top:22px; font-size:11px; letter-spacing:0.18em; color: var(--frame-hi); }

/* ════════ BOOT ════════ */
#boot-screen { position: fixed; inset: 0; z-index: 8000; background: var(--void); padding: 54px 70px; overflow-y: auto; }
#boot-log { font-size: 17px; line-height: 1.55; letter-spacing: 0.04em; color: var(--text); white-space: pre-wrap; }
#boot-log .b-ok   { color: var(--ice); }
#boot-log .b-warn { color: var(--rose); }
#boot-log .b-iri  { font-size: 21px; color: var(--text-hi); letter-spacing: 0.14em; }
#boot-log .b-dim  { color: var(--frame-hi); }
#boot-cursor { font-size: 17px; color: var(--rose); animation: blink 0.7s step-end infinite; }

/* ════════ APP SHELL (nav | work | hud) ════════ */
#app {
  position: fixed; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: var(--nav-w) 1fr var(--hud-w);
  grid-template-rows: var(--hdr-h) 1fr var(--status-h);
  grid-template-areas: "hdr hdr hdr" "nav work hud" "sb sb sb";
  gap: 3px; padding: 3px;
}

/* ════════ HEADER ════════ */
#hdr { grid-area: hdr; display:flex; align-items:center; gap:10px; padding:0 14px;
  background: var(--surface); border:1px solid var(--frame); }
.hdr-sigil { width:16px; height:16px; border:1px solid var(--frame); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hdr-sigil-dot { width:6px; height:6px; border-radius:50%; background: var(--rose); animation: dp 2s ease-in-out infinite; }
.hdr-title { font-size:21px; color: var(--text-hi); letter-spacing:0.12em; }
.hdr-div { color: var(--frame); letter-spacing:0.1em; }
.hdr-mode { font-size:13px; letter-spacing:0.2em; color: var(--rose); }
.hdr-spacer { flex:1; }
.hdr-session { font-size:12px; letter-spacing:0.14em; color: var(--frame-hi); }
.op-badge { font-size:12px; letter-spacing:0.14em; padding:2px 8px; border:1px solid var(--frame); color: var(--ice); }
#hdr-clock { font-size:13px; letter-spacing:0.1em; color: var(--frame-hi); }
.hdr-logout { font-size:12px; letter-spacing:0.16em; color: var(--frame-hi); transition: color .1s; }
.hdr-logout:hover { color: var(--rose-hot); }

/* ════════ LEFT NAV ════════ */
#nav { grid-area: nav; display:flex; flex-direction:column; background: var(--void); border:1px solid var(--frame); }
.nav-top { padding:10px 12px 8px; border-bottom:1px solid var(--divider); }
#nav-list { flex:1; overflow-y:auto; padding:6px 8px; display:flex; flex-direction:column; gap:1px; }
.nav-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 8px; text-align:left;
  border-left:2px solid transparent; position:relative; transition: all .12s; }
.nav-item::before { content:'▸'; font-size:13px; color: var(--rose); opacity:0; width:11px; flex:none; }
.nav-item:hover { background: rgba(184,67,90,0.05); }
.nav-item:hover::before { opacity:1; }
.nav-item.active { border-left-color: var(--rose); background: rgba(184,67,90,0.08); }
.nav-item.active::before { opacity:1; }
.nav-num { font-size:12px; color: var(--frame-hi); width:18px; flex:none; }
.nav-item.active .nav-num { color: var(--rose); }
.nav-item > span:not(.nav-num):not(.nav-off) { font-size:15px; letter-spacing:0.12em; color: var(--rose); }
.nav-item.active > span:not(.nav-num):not(.nav-off) { color: var(--rose-hi); }
.nav-off { margin-left:auto; font-size:11px; letter-spacing:0.1em; color: var(--frame); flex:none; }
.nav-phase { padding:11px 12px 8px; border-top:1px solid var(--divider); }
.status-band { display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.status-cell { width:100%; text-align:left; padding:6px 9px; font-size:14px; letter-spacing:0.12em;
  color: var(--frame-hi); border:1px solid var(--frame); transition: all .1s; }
.status-cell:hover { color: var(--rose); border-color: var(--rose-lo); }
.status-cell.active { color: var(--void); background: var(--rose-hot); border-color: var(--rose-hot); }
.nav-bot { padding:10px 12px 0; border-top:1px solid var(--divider); }

/* ════════ CENTER WORKSPACE ════════ */
#work { grid-area: work; min-width:0; display:flex; flex-direction:column; background: var(--void); border:1px solid var(--frame); }
.cmd-strip { display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid var(--frame);
  font-size:12px; letter-spacing:0.1em; color: var(--frame-hi); flex-wrap:wrap; }
.cmd-sector { color: var(--rose); letter-spacing:0.18em; }
.cmd-div { color: var(--frame); }
.cmd-val { color: var(--ice); }
.cmd-spacer { flex:1; }
.cmd-build { color: var(--rose-lo); font-size:11px; letter-spacing:0.14em; }

.op-tabs { display:flex; align-items:center; gap:4px; padding:8px 14px; border-bottom:1px solid var(--divider); }
.op-tab { padding:5px 15px; font-size:14px; letter-spacing:0.14em; color: var(--frame-hi);
  border:1px solid var(--frame); transition: all .1s; }
.op-tab:hover { color: var(--rose); border-color: var(--rose-lo); }
.op-tab.active { color: var(--rose-hi); border-color: var(--rose); background: rgba(184,67,90,0.08); }
.op-tabs-status { margin-left:auto; font-size:11px; letter-spacing:0.18em; color: var(--rose-lo); }

.sector-body { flex:1; overflow-y:auto; padding:28px; animation: fadeIn .18s ease; }

/* placeholder module card */
.module-empty { position:relative; max-width:620px; margin:18px auto 0; padding:46px 38px; text-align:center;
  border:1px solid var(--frame); background: var(--surface); }
.module-empty::before, .module-empty::after { content:''; position:absolute; width:13px; height:13px; pointer-events:none; }
.module-empty::before { top:6px; left:6px; border-top:1px solid var(--rose-lo); border-left:1px solid var(--rose-lo); }
.module-empty::after  { bottom:6px; right:6px; border-bottom:1px solid var(--rose-lo); border-right:1px solid var(--rose-lo); }
.module-glyph { font-size:36px; margin-bottom:18px; color: var(--rose); line-height:1; }
.module-title { font-size:26px; color: var(--text-hi); letter-spacing:0.14em; margin-bottom:10px; }
.module-status { font-size:13px; letter-spacing:0.24em; color: var(--rose); margin-bottom:20px; }
.module-desc { font-size:16px; line-height:1.55; color: var(--text); max-width:500px; margin:0 auto; }
.module-meta { margin-top:24px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.module-meta span { font-size:11px; letter-spacing:0.14em; color: var(--frame-hi); padding:4px 9px; border:1px solid var(--frame); }

/* ════════ RIGHT HUD ════════ */
#hud { grid-area: hud; display:flex; flex-direction:column; background: var(--void); border:1px solid var(--frame); overflow-y:auto; }
.hud-block { padding:10px 11px; border-bottom:1px solid var(--divider); }
.hud-block-stream { flex:1; min-height:110px; display:flex; flex-direction:column; }
.hud-label { font-size:12px; letter-spacing:0.2em; color: var(--text); margin-bottom:8px; }
.hud-line { font-size:14px; letter-spacing:0.04em; color: var(--frame-hi); line-height:1.5; margin-bottom:3px; }
.coord-line { font-size:14px; letter-spacing:0.08em; color: var(--frame-hi); margin-bottom:2px; }
.spectrum-bars { display:flex; align-items:flex-end; gap:2px; height:38px; }
.spectrum-bars i { flex:1; display:block; height:100%; transform-origin:bottom; background: var(--rose); animation: barFlux 1.4s ease-in-out infinite; }
.spectrum-bars i:nth-child(3n) { background: var(--rose-lo); }
.spectrum-bars i:nth-child(5n) { background: var(--ice); }
.data-stream { flex:1; overflow:hidden; font-size:13px; line-height:1.5; letter-spacing:0.02em; color: var(--frame-hi); }
.data-stream .ds-line { animation: fadeIn .2s ease; }
.data-stream .ds-new { color: var(--rose); }

/* ════════ STATUS BAR ════════ */
#status-bar { grid-area: sb; display:flex; align-items:center; gap:8px; padding:0 12px;
  background: var(--surface); border:1px solid var(--frame);
  font-size:12px; letter-spacing:0.1em; color: var(--frame-hi); }
.sb-bracket { color: var(--rose-lo); }
.sb-sep { color: var(--frame); }
.sb-spacer { flex:1; }

/* ════════════════════════════════════════════════════════════
   FUNCTIONAL MODULES — capsule / artboard / drop engine
   (iridescence tokens only · square corners · VT323)
   ════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* ── VIEWS ── */
#views { flex:1; min-height:0; display:flex; flex-direction:column; }
.view { display:none; }
.view.active { display:flex; flex-direction:column; flex:1; min-height:0; }
.view-scroll.active { overflow-y:auto; padding:22px 26px 32px; }
#view-workstation.active { overflow:hidden; padding:0; }

.view-head { margin-bottom:18px; }
.vh-class { font-size:11px; letter-spacing:0.2em; color: var(--rose-lo); margin-bottom:9px; }
.vh-row { display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--frame); padding-bottom:10px; }
.vh-title { font-size:30px; letter-spacing:0.14em; color: var(--text-hi); font-weight:400; }
.vh-sub { font-size:13px; letter-spacing:0.2em; color: var(--rose); }

/* ── SHARED FORM CONTROLS ── */
.wr-search, .ws-row input, .ws-row select, .insp-field input, .insp-field select, .insp-field textarea,
.insp-add input, .modal-field input, .modal-field select, .modal-field textarea,
.spec-grid input, .tracklist input {
  width:100%; background: var(--void); border:1px solid var(--frame); color: var(--text-hi);
  font-family: var(--font); font-size:15px; letter-spacing:0.04em; padding:7px 9px; outline:none;
  transition: border-color .12s;
}
.wr-search:focus, .ws-row input:focus, .ws-row select:focus, .insp-field input:focus,
.insp-field select:focus, .insp-field textarea:focus, .insp-add input:focus,
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus,
.spec-grid input:focus, .tracklist input:focus { border-color: var(--rose); }
textarea { resize:vertical; min-height:74px; line-height:1.4; }
select { cursor:pointer; }
input::placeholder, textarea::placeholder { color: var(--frame-hi); }

/* ── BUTTONS ── */
.btn-rose, .btn-ice, .btn-ghost {
  font-family: var(--font); font-size:15px; letter-spacing:0.14em; padding:8px 16px;
  border:1px solid var(--frame); color: var(--text); background: var(--void); transition: all .1s;
}
.btn-rose { border-color: var(--rose-lo); color: var(--rose-hi); }
.btn-rose:hover { border-color: var(--rose); color: var(--rose-hot); background: rgba(184,67,90,0.1); }
.btn-ice { border-color: var(--frame-hi); color: var(--ice); }
.btn-ice:hover { border-color: var(--ice); background: rgba(144,168,196,0.08); }
.btn-ghost:hover { color: var(--text-hi); border-color: var(--frame-hi); }
.btn-ghost.danger:hover { color: var(--rose-hot); border-color: var(--rose); }
.btn-rose.sm, .btn-ice.sm, .btn-ghost.sm { font-size:13px; padding:6px 11px; letter-spacing:0.1em; }
.upload-btn { display:inline-block; font-size:14px; letter-spacing:0.12em; color: var(--ice);
  border:1px solid var(--frame-hi); padding:7px 12px; cursor:pointer; transition: all .1s; white-space:nowrap; }
.upload-btn:hover { border-color: var(--ice); background: rgba(144,168,196,0.08); }
.upload-btn.lg { padding:8px 16px; font-size:15px; }
.upload-btn input[type=file] { display:none; }

/* ── EMPTY STATE ── */
.empty-block { padding:30px; text-align:center; color: var(--frame-hi); font-size:14px;
  letter-spacing:0.18em; border:1px dashed var(--frame); background: var(--surface); }

/* ── STAT TILES ── */
.stat-row { display:grid; grid-template-columns: repeat(6, 1fr); gap:3px; margin-bottom:18px; }
.stat-tile { background: var(--surface); border:1px solid var(--frame); padding:14px 12px; text-align:left; }
.stat-tile b { display:block; font-size:30px; color: var(--text-hi); line-height:1; font-weight:400; }
.stat-tile span { font-size:11px; letter-spacing:0.2em; color: var(--frame-hi); margin-top:6px; display:block; }
.stat-tile.light b  { color: var(--ice); }
.stat-tile.sound b  { color: var(--rose-hi); }
.stat-tile.matter b { color: var(--text-hi); }

.hb-bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--divider); }
.hb-bar-l { font-size:13px; letter-spacing:0.18em; color: var(--rose); }
.hb-scope { color: var(--frame-hi); letter-spacing:0.14em; margin-left:6px; }

/* ── CAPSULE CARDS (drop board) ── */
.cap-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap:12px; }
.cap-card { position:relative; background: var(--surface); border:1px solid var(--frame);
  border-left:3px solid var(--frame-hi); padding:14px 14px 12px; cursor:pointer; transition: all .12s; }
.cap-card:hover { border-color: var(--rose-lo); border-left-color: var(--rose); transform: translateY(-1px); }
.cap-card::before, .cap-card::after { content:''; position:absolute; width:9px; height:9px; pointer-events:none; }
.cap-card::before { top:4px; right:4px; border-top:1px solid var(--rose-lo); border-right:1px solid var(--rose-lo); }
.cap-card::after  { bottom:4px; left:4px; border-bottom:1px solid var(--rose-lo); border-left:1px solid var(--rose-lo); }
.cap-card.LIGHT  { border-left-color: var(--ice); }
.cap-card.SOUND  { border-left-color: var(--rose-hi); }
.cap-card.MATTER { border-left-color: var(--text-hi); }
.cc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.cc-type { font-size:11px; letter-spacing:0.18em; padding:2px 7px; border:1px solid var(--frame); }
.cc-type.LIGHT  { color: var(--ice); border-color: var(--ice); }
.cc-type.SOUND  { color: var(--rose-hi); border-color: var(--rose-lo); }
.cc-type.MATTER { color: var(--text-hi); border-color: var(--frame-hi); }
.cc-status { font-size:11px; letter-spacing:0.16em; }
.cc-status.IDEA       { color: var(--frame-hi); }
.cc-status.PRODUCTION { color: var(--ice); }
.cc-status.REVIEW     { color: var(--rose-hi); }
.cc-status.APPROVED   { color: var(--rose-hot); }
.cc-status.RELEASED   { color: var(--text-hi); }
.cc-thumb { height:108px; background: var(--void); border:1px solid var(--frame); margin-bottom:9px;
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
  color: var(--frame); font-size:11px; letter-spacing:0.2em; }
.cc-title { font-size:17px; letter-spacing:0.08em; color: var(--text-hi); margin-bottom:4px; }
.cc-row { display:flex; gap:10px; font-size:11px; letter-spacing:0.12em; color: var(--frame-hi); margin-bottom:7px; }
.cc-brief { font-size:13px; line-height:1.45; color: var(--text); max-height:54px; overflow:hidden; }

/* ── WORKSTATION (war room) ── */
.wr-cmd { display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--frame); flex-wrap:wrap; }
.wr-cmd-title { font-size:15px; letter-spacing:0.2em; color: var(--rose); }
.wr-cmd-stats { display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.1em; color: var(--frame-hi); }
.wr-cmd-stats b { color: var(--ice); }
.wr-cmd-stats i { color: var(--frame); font-style:normal; }
.wr-cmd .btn-rose { margin-left:auto; }
.wr-grid { flex:1; min-height:0; display:grid; grid-template-columns: 236px 1fr 304px; gap:3px; padding:3px; }
.wr-pane { background: var(--void); border:1px solid var(--frame); min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.pane-label { padding:9px 11px; font-size:12px; letter-spacing:0.2em; color: var(--text); border-bottom:1px solid var(--divider); position:sticky; top:0; background: var(--void); z-index:2; }
.wr-filter { display:flex; flex-wrap:wrap; gap:3px; padding:9px 9px 6px; }
.wr-filter button { font-size:11px; letter-spacing:0.08em; color: var(--frame-hi); border:1px solid var(--frame); padding:4px 8px; transition: all .1s; }
.wr-filter button:hover { color: var(--rose); border-color: var(--rose-lo); }
.wr-filter button.active { color: var(--rose-hi); border-color: var(--rose); background: rgba(184,67,90,0.08); }
.wr-search { margin:0 9px 9px; width:auto; }
.wr-list { flex:1; padding:0 8px 8px; display:flex; flex-direction:column; gap:2px; }
.wr-list-item { padding:9px 9px; border:1px solid var(--frame); border-left:2px solid var(--frame-hi); cursor:pointer; transition: all .1s; }
.wr-list-item:hover { background: rgba(184,67,90,0.05); }
.wr-list-item.active { border-left-color: var(--rose); background: rgba(184,67,90,0.1); }
.li-tag { font-size:14px; letter-spacing:0.06em; color: var(--text-hi); margin-bottom:3px; }
.li-meta { display:flex; gap:8px; font-size:11px; letter-spacing:0.1em; color: var(--frame-hi); }
.li-meta .st-IDEA { color: var(--frame-hi); }
.li-meta .st-PRODUCTION { color: var(--ice); }
.li-meta .st-REVIEW { color: var(--rose-hi); }
.li-meta .st-APPROVED { color: var(--rose-hot); }
.li-meta .st-RELEASED { color: var(--text-hi); }

.wr-work { display:flex; flex-direction:column; }
.ws-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px; }
.ws-empty-mark { font-size:16px; letter-spacing:0.2em; color: var(--frame-hi); }
.ws-empty-sub { font-size:12px; letter-spacing:0.16em; color: var(--frame); }
.ws-active { flex:1; min-height:0; display:flex; flex-direction:column; }
.ws-head { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--divider); }
.ws-tag { font-size:17px; letter-spacing:0.1em; color: var(--text-hi); }
.ws-status { font-size:12px; letter-spacing:0.18em; padding:3px 9px; border:1px solid var(--frame); }
.ws-status.IDEA { color: var(--frame-hi); }
.ws-status.PRODUCTION { color: var(--ice); border-color: var(--frame-hi); }
.ws-status.REVIEW { color: var(--rose-hi); border-color: var(--rose-lo); }
.ws-status.APPROVED { color: var(--rose-hot); border-color: var(--rose); }
.ws-status.RELEASED { color: var(--text-hi); border-color: var(--frame-hi); }
.ws-tabs { display:flex; gap:3px; padding:9px 14px 0; border-bottom:1px solid var(--divider); }
.ws-tab { font-size:13px; letter-spacing:0.14em; color: var(--frame-hi); border:1px solid var(--frame); border-bottom:none; padding:6px 14px; transition: all .1s; }
.ws-tab:hover { color: var(--rose); }
.ws-tab.active { color: var(--rose-hi); border-color: var(--rose); background: rgba(184,67,90,0.08); }
.ws-body { flex:1; min-height:0; overflow-y:auto; padding:14px; }
.ws-panel { display:none; }
.ws-panel.active { display:block; }
.ws-row { display:flex; gap:8px; margin-bottom:9px; align-items:center; }
.ws-row select { flex:0 0 140px; }

/* asset + mood cards */
.asset-grid, .mood-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:9px; margin-top:6px; }
.asset-card, .mood-card { position:relative; background: var(--surface); border:1px solid var(--frame); }
.ac-img, .mc-img { width:100%; height:120px; background: var(--void); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color: var(--frame); font-size:11px; letter-spacing:0.16em; }
.cc-thumb[data-img-miss]::after, .dc-cover[data-img-miss]::after, .dv-cover[data-img-miss]::after,
.ac-img[data-img-miss]::after, .mc-img[data-img-miss]::after { content:'[ MISSING ]'; color: var(--frame); font-size:10px; letter-spacing:0.16em; }
.ac-del, .mc-del { position:absolute; top:4px; right:4px; font-size:10px; letter-spacing:0.1em; color: var(--frame-hi);
  background: var(--void); border:1px solid var(--frame); padding:2px 5px; opacity:0; transition: opacity .1s; }
.asset-card:hover .ac-del, .mood-card:hover .mc-del { opacity:1; }
.ac-del:hover, .mc-del:hover { color: var(--rose-hot); border-color: var(--rose); }
.ac-meta, .mc-meta { padding:7px 8px; }
.ac-name, .mc-name { font-size:13px; letter-spacing:0.06em; color: var(--text-hi); }
.ac-kind { font-size:10px; letter-spacing:0.16em; color: var(--ice); margin-top:2px; }
.ac-link { display:block; font-size:11px; letter-spacing:0.1em; color: var(--rose-hi); margin-top:3px; }
.mc-source { font-size:11px; color: var(--frame-hi); margin-top:2px; }

/* plan phases */
.plan-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.phase { border:1px solid var(--frame); background: var(--surface); padding:11px; }
.phase h4 { font-size:13px; letter-spacing:0.16em; color: var(--rose); margin-bottom:9px; font-weight:400; }
.phase-add { display:flex; gap:5px; margin-bottom:9px; }
.phase-add input { flex:1; background: var(--void); border:1px solid var(--frame); color: var(--text-hi); font-family: var(--font); font-size:13px; padding:5px 7px; outline:none; }
.phase-add input:focus { border-color: var(--rose); }
.phase-add button { border:1px solid var(--frame); color: var(--ice); padding:0 10px; font-size:15px; }
.phase-add button:hover { border-color: var(--ice); }
.phase ul { list-style:none; display:flex; flex-direction:column; gap:3px; }
.phase li { display:flex; align-items:center; gap:7px; font-size:13px; color: var(--text); padding:2px 0; }
.phase li.done span { color: var(--frame-hi); text-decoration:line-through; }
.phase li span { flex:1; letter-spacing:0.04em; }
.phase li button { color: var(--frame-hi); font-size:14px; padding:0 3px; }
.phase li button:hover { color: var(--rose-hot); }
input[type=checkbox] { accent-color: var(--rose); width:13px; height:13px; cursor:pointer; }

/* ── INSPECTOR ── */
.wr-inspect { display:flex; flex-direction:column; }
.insp-tabs { display:flex; flex-wrap:wrap; gap:2px; padding:8px 9px; border-bottom:1px solid var(--divider); }
.insp-tab { font-size:11px; letter-spacing:0.1em; color: var(--frame-hi); border:1px solid var(--frame); padding:4px 7px; transition: all .1s; }
.insp-tab:hover { color: var(--rose); }
.insp-tab.active { color: var(--rose-hi); border-color: var(--rose); background: rgba(184,67,90,0.08); }
.insp-body { flex:1; overflow-y:auto; padding:13px; }
.insp-empty { padding:24px 8px; text-align:center; font-size:12px; letter-spacing:0.18em; color: var(--frame-hi); }
.insp-field { margin-bottom:11px; }
.insp-field label { display:block; font-size:11px; letter-spacing:0.16em; color: var(--frame-hi); margin-bottom:5px; }
.insp-field input[readonly] { color: var(--frame-hi); }
.insp-actions { display:flex; gap:7px; margin-top:14px; }
.insp-add { display:flex; gap:6px; margin-bottom:11px; }
.insp-add input { flex:1; }
.insp-add button { flex:0 0 auto; padding:0 12px; font-size:16px; }
.insp-list { display:flex; flex-direction:column; gap:3px; }
.insp-item { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text); padding:5px 0; border-bottom:1px solid var(--divider); }
.insp-item.done span { color: var(--frame-hi); text-decoration:line-through; }
.insp-item span { flex:1; }
.insp-item button { color: var(--frame-hi); font-size:14px; }
.insp-item button:hover { color: var(--rose-hot); }
.link-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--divider); }
.link-row a { color: var(--ice); font-size:12px; word-break:break-all; text-decoration:none; }
.link-row a b { color: var(--text-hi); letter-spacing:0.1em; }
.link-row a:hover { color: var(--rose-hi); }
.link-row button { color: var(--frame-hi); }
.link-row button:hover { color: var(--rose-hot); }
.log-line { font-size:12px; line-height:1.5; color: var(--text); padding:3px 0; border-bottom:1px solid var(--divider); }
.log-line .ts { color: var(--rose-lo); margin-right:7px; letter-spacing:0.06em; }
.spec-grid { display:flex; flex-direction:column; gap:10px; }
.spec-field label { display:block; font-size:11px; letter-spacing:0.16em; color: var(--frame-hi); margin-bottom:4px; }
.spec-embed { margin-top:10px; border:1px solid var(--frame); }
.spec-embed iframe { width:100%; height:170px; border:none; display:block; background: var(--void); }
.tracklist { margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.tl-row { display:flex; gap:5px; align-items:center; }
.tl-row .tl-title { flex:1; }
.tl-row .tl-len { flex:0 0 64px; }
.tl-row button { color: var(--frame-hi); font-size:14px; padding:0 4px; }
.tl-row button:hover { color: var(--rose-hot); }
.tl-add { display:flex; gap:5px; margin-top:5px; }

/* ── NETWORK ── */
.net-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.net-bar .wr-filter { padding:0; flex:1; }
.net-bar .btn-rose { margin-left:auto; }
.doc-search-inline { flex:0 0 180px; margin:0; }
.net-stat-row { display:grid; grid-template-columns: repeat(4, 1fr); gap:3px; margin-bottom:16px; }
.stat-mini { background: var(--surface); border:1px solid var(--frame); padding:10px 12px; }
.stat-mini b { display:block; font-size:22px; color: var(--ice); line-height:1; }
.stat-mini span { font-size:10px; letter-spacing:0.18em; color: var(--frame-hi); margin-top:5px; display:block; }
.net-grid { display:flex; flex-direction:column; gap:3px; }
.net-card { display:grid; grid-template-columns: 1fr 110px 96px 96px auto; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--frame); padding:11px 14px; }
.nc-name { font-size:15px; letter-spacing:0.06em; color: var(--text-hi); }
.nc-sub { font-size:12px; color: var(--frame-hi); margin-top:3px; }
.nc-sub a { color: var(--ice); text-decoration:none; }
.nc-sub a:hover { color: var(--rose-hi); }
.nc-role { font-size:11px; letter-spacing:0.14em; color: var(--ice); }
.nc-loc { font-size:11px; letter-spacing:0.08em; color: var(--frame-hi); }
.nc-status { font-size:11px; letter-spacing:0.12em; text-align:center; padding:3px 6px; border:1px solid var(--frame); }
.nc-status.TARGET { color: var(--frame-hi); }
.nc-status.ACTIVE { color: var(--ice); border-color: var(--frame-hi); }
.nc-status.HOLDS_UNIT { color: var(--rose-hi); border-color: var(--rose-lo); }
.nc-status.ARCHIVED { color: var(--rose-lo); }
.nc-actions { display:flex; gap:5px; }
.nc-actions button { font-size:11px; letter-spacing:0.08em; color: var(--frame-hi); border:1px solid var(--frame); padding:4px 8px; }
.nc-actions button:hover { color: var(--rose-hi); border-color: var(--rose-lo); }

/* ── DOCTRINE ── */
.doctrine-lede { font-size:13px; line-height:1.55; letter-spacing:0.06em; color: var(--text); max-width:760px; margin-bottom:16px; }
.doc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.doc-card { background: var(--surface); border:1px solid var(--frame); cursor:pointer; transition: all .12s; overflow:hidden; }
.doc-card:hover { border-color: var(--rose-lo); transform: translateY(-1px); }
.dc-medium { font-size:11px; letter-spacing:0.18em; color: var(--rose); padding:8px 11px 0; }
.dc-cover { height:150px; background: var(--void); background-size:cover; background-position:center; margin:8px 11px 0;
  border:1px solid var(--frame); display:flex; align-items:center; justify-content:center; color: var(--frame); font-size:11px; letter-spacing:0.18em; }
.dc-body { padding:10px 11px 13px; }
.dc-title { font-size:16px; letter-spacing:0.06em; color: var(--text-hi); margin-bottom:3px; }
.dc-meta { font-size:12px; color: var(--frame-hi); margin-bottom:8px; }
.dc-why { font-size:12px; line-height:1.5; color: var(--text); max-height:72px; overflow:hidden; }
.dc-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.dc-tags span { font-size:10px; letter-spacing:0.1em; color: var(--ice); border:1px solid var(--frame); padding:2px 6px; }

/* doctrine detail overlay */
#doc-view-body { display:grid; grid-template-columns: 200px 1fr; gap:20px; }
.dv-cover { height:280px; background: var(--void); background-size:cover; background-position:center; border:1px solid var(--frame); }
.dv-title { font-size:24px; letter-spacing:0.08em; color: var(--text-hi); }
.dv-meta { font-size:13px; letter-spacing:0.1em; color: var(--rose); margin:6px 0 12px; }
.dv-link { display:inline-block; font-size:13px; color: var(--ice); text-decoration:none; margin-bottom:14px; }
.dv-link:hover { color: var(--rose-hi); }
.dv-why-label { font-size:11px; letter-spacing:0.2em; color: var(--frame-hi); margin-bottom:6px; }
.dv-why { font-size:14px; line-height:1.6; color: var(--text); white-space:pre-wrap; }
.dv-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
.dv-tags span { font-size:11px; letter-spacing:0.1em; color: var(--ice); border:1px solid var(--frame); padding:3px 8px; }
.dv-foot { font-size:11px; letter-spacing:0.12em; color: var(--frame-hi); margin-top:18px; }

/* ── SYSTEM ── */
.sys-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-bottom:14px; }
.sys-block { background: var(--surface); border:1px solid var(--frame); padding:16px 18px; }
.sys-block-wide { margin-top:0; }
.sys-label { font-size:12px; letter-spacing:0.2em; color: var(--rose); margin-bottom:12px; }
.sys-line { font-size:14px; letter-spacing:0.06em; color: var(--text); line-height:1.7; }
.sys-usage { margin-top:14px; }
.sys-usage-head { display:flex; justify-content:space-between; font-size:12px; letter-spacing:0.14em; color: var(--frame-hi); margin-bottom:6px; }
.sys-usage-head b { color: var(--ice); }
.sys-usage-bar { height:8px; background: var(--void); border:1px solid var(--frame); }
.sys-usage-bar i { display:block; height:100%; width:0; background: var(--rose); transition: width .3s; }
.sys-usage-sub { font-size:11px; letter-spacing:0.12em; color: var(--frame-hi); margin-top:6px; }
.sys-warn { font-size:12px; letter-spacing:0.1em; color: var(--rose); margin-bottom:14px; line-height:1.5; }
.sys-actions { display:flex; flex-wrap:wrap; gap:9px; }
.sys-msg { font-size:13px; letter-spacing:0.06em; color: var(--ice); margin-top:14px; min-height:18px; }

/* ── MODALS ── */
.modal { position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.72); padding:24px; }
.modal-frame { position:relative; width:min(440px, 94vw); max-height:90vh; overflow-y:auto;
  background: var(--surface); border:1px solid var(--rose-lo); padding:26px 26px 22px; }
.modal-frame.modal-wide { width:min(720px, 94vw); }
.modal-frame::before, .modal-frame::after { content:''; position:absolute; width:11px; height:11px; pointer-events:none; }
.modal-frame::before { top:5px; left:5px; border-top:1px solid var(--rose); border-left:1px solid var(--rose); }
.modal-frame::after  { bottom:5px; right:5px; border-bottom:1px solid var(--rose); border-right:1px solid var(--rose); }
.modal-class { font-size:11px; letter-spacing:0.18em; color: var(--rose); margin-bottom:14px; }
.modal-title { font-size:22px; letter-spacing:0.12em; color: var(--text-hi); margin-bottom:18px; }
.modal-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
.modal-field { margin-bottom:12px; }
.modal-field label { display:block; font-size:11px; letter-spacing:0.16em; color: var(--frame-hi); margin-bottom:5px; }
.modal-actions { display:flex; align-items:center; gap:9px; margin-top:18px; }
.modal-actions .btn-rose { margin-left:auto; }
.modal-wide .modal-actions .btn-rose { margin-left:0; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1240px) {
  .wr-grid { grid-template-columns: 210px 1fr 270px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  #app { grid-template-columns: var(--nav-w) 1fr; grid-template-areas: "hdr hdr" "nav work" "sb sb"; }
  #hud { display:none; }
  .wr-grid { grid-template-columns: 200px 1fr; }
  .wr-inspect { display:none; }
  #doc-view-body { grid-template-columns: 1fr; }
  .dv-cover { height:200px; }
}
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-areas: "hdr" "work" "sb"; }
  #nav { display:none; }
  .hdr-title { font-size:17px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .wr-grid { grid-template-columns: 1fr; }
  .wr-index { display:none; }
  .modal-grid { grid-template-columns: 1fr; }
  .net-card { grid-template-columns: 1fr auto; }
}