/* FISHING · UI · THE THEME — the shared vocabulary, declared ONCE. Pages link this;
   sections render with it; nothing re-declares a palette. */
:root {
  --ink:#e6eef6; --label:#aebccd; --dim:#7d90a4; --faint:#5f7186; --ghost:#667889;
  --mut:#8ea2b6; --rule:#22384a; --rule2:#16283a; --line:#1a3040;
  --cyan:#3fd6ee; --cyanb:#2a7a94; --green:#3ee0a6; --greenb:#1c7d5a;
  --amber:#e0b23e; --gold:#fbbf24; --red:#fb6b6b;
  --panel:linear-gradient(180deg,#0b1620,#080d13);
}
* { box-sizing:border-box }
body { margin:0; background:#070b10; color:var(--ink); min-height:100vh;
       font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
/* chamfered hardware-module corners (cut top-left + bottom-right) */
.chamfer { clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,
           0 100%,0 14px) }
.glass { background:linear-gradient(160deg,rgba(16,22,30,.72),rgba(8,11,16,.78)) }
.blink { animation:blink 1.6s ease-in-out infinite }
@keyframes blink { 50% { opacity:.35 } }
a { color:var(--amber); text-decoration:none }
input, select { font:inherit; color:var(--ink); background:transparent;
                border:1px solid var(--rule); border-radius:2px; outline:none }
button { font:inherit; cursor:pointer }
.t10 { font-size:10px; letter-spacing:.1em }
.ghost { font-size:10.5px; color:var(--ghost) }
.note { color:var(--amber) }
.evi { color:var(--green); line-height:1.7 }
.tabnum { font-variant-numeric:tabular-nums }
/* the column shell */
.colhead { display:flex; justify-content:space-between; border-bottom:1px solid var(--line);
           padding:0 4px 6px; margin-bottom:8px }
.colhead b { font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--label) }
.colhead span { font-size:10px; letter-spacing:.1em; color:#5a6b7e }
/* the stage card anatomy */
.stage { display:block; width:100%; text-align:left; position:relative; border-radius:0;
         border:1px solid var(--rule); padding:0; color:inherit }
.stage .stripe { position:absolute; left:0; top:0; height:100%; width:3px; opacity:.4 }
.stage .corner { position:absolute; right:8px; top:6px; font-size:10px; letter-spacing:.14em;
                 color:#5a6b7e }
.stage .bodyrow { display:flex; align-items:center; gap:14px; padding:18px 20px 14px }
.stage .led { width:12px; height:12px; border-radius:50%; background:#3a4a5c; flex-shrink:0 }
.stage h4 { margin:0; font-size:16px; font-weight:700; letter-spacing:.13em; color:var(--mut) }
.stage .sub { margin-top:4px; font-size:12px; line-height:1.35; color:#a7b8ca }
.stage .right { margin-left:auto; text-align:right; flex-shrink:0 }
.stage .big { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;
              color:var(--faint) }
.stage .m { font-size:10px; letter-spacing:.05em; color:var(--ghost);
            font-variant-numeric:tabular-nums }
.stage .open { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--cyan) }
.gatebadge { margin:0 20px 12px; display:flex; gap:8px; align-items:center;
             border:1px solid; border-radius:2px; padding:4px 8px; font-size:10.5px }
.gatebadge b { flex-shrink:0; font-weight:700; letter-spacing:.1em }
.gatebadge .gn { flex-shrink:0; font-weight:700; color:var(--mut) }
.gatebadge .gd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                 color:var(--dim) }
.wire { display:flex; align-items:center; justify-content:center; gap:8px; padding:2px 0 }
.wire .cite { font-size:10px; color:#4f8fb0 }
.wire .own { border:1px solid #243a4c; border-radius:2px; padding:0 4px; font-size:10px;
             font-weight:700; color:#6f8496 }
/* panels + groups */
.panel { border:1px solid var(--rule); background:var(--panel); border-radius:4px;
         padding:10px 12px; margin-bottom:10px }
.panel h3 { margin:0 0 6px; font-size:11px; letter-spacing:.18em; color:var(--cyan) }
.grp { margin-top:10px }
.grp .gt { display:flex; justify-content:space-between; align-items:center; font-size:10px;
           font-weight:700; letter-spacing:.14em; color:var(--mut); margin-bottom:4px }
.krow { display:flex; justify-content:space-between; gap:10px; padding:2px 0; font-size:10.5px }
.krow span { color:var(--dim) } .krow b { color:var(--ink); font-weight:600 }
.krow b.owe { color:var(--amber) }
.compose { color:#071018; background:var(--cyan); font-weight:700; font-size:10px;
           letter-spacing:.14em; padding:2px 8px; border-radius:3px; border:0;
           text-decoration:none }
.ctrl { border-radius:2px; font-weight:700; font-size:10px; letter-spacing:.14em;
        padding:6px 0; text-align:center; border:1px solid }
.ctrl.cyan { color:#071018; background:var(--cyan); border-color:var(--cyan) }
.caps2 { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.capbox { border:1px solid; border-radius:2px; padding:6px 8px }
.capbox h5 { margin:0 0 4px; font-size:10px; font-weight:700; letter-spacing:.14em }
.tabs2 { display:flex; gap:4px }
.tabs2 button { flex:1; padding:6px 0; font-size:10px; font-weight:700; letter-spacing:.2em;
                border:1px solid; background:transparent; border-radius:0 }
.pnlgrid { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid;
           margin-top:8px; overflow:hidden }
.pnlbox { background:#0b1017; padding:6px 10px }
.pnlbox .l { font-size:10px; letter-spacing:.1em; color:var(--ghost) }
.pnlbox .v { margin-top:2px; font-size:13px; font-weight:700;
             font-variant-numeric:tabular-nums }
.bookside { flex:1; border:1px solid; border-radius:2px; background:#0a141d; padding:8px }
.bookside .bh { display:flex; align-items:baseline; gap:8px; margin-bottom:4px }
.bookside .bh b { font-size:10px; font-weight:700; letter-spacing:.2em }
.bookside .stats { display:flex; flex-wrap:wrap; gap:8px; font-size:10.5px;
                   color:#8ea7c0 }
/* the selector vocabulary (slice ①) */
.bchip { border:1px solid var(--rule); border-radius:2px; background:transparent;
         color:var(--faint); font-size:10px; font-weight:700; letter-spacing:.1em;
         padding:2px 6px }
.bchip.all { color:var(--green); border-color:var(--greenb) }
.hot { background:var(--amber); color:#071018; font-weight:700; border:0; font-size:10px;
       letter-spacing:.12em; padding:2px 8px; border-radius:3px }
.tfstrip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1px solid
           #2a7a9433; background:#3fd6ee08; border-radius:2px; padding:6px 8px;
           margin-bottom:8px }
.tfstrip .tt { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--cyan) }
.tfstrip .td { font-size:10px; color:var(--dim) }
.tfstrip select { margin-left:auto; background:#0a141e; font-size:10px; font-weight:700;
                  padding:4px 6px }
.grid2c { display:grid; grid-template-columns:1fr 1fr; gap:4px; max-height:12rem;
          overflow-y:auto; margin-bottom:4px }
@media (max-width:900px) { .grid2c { grid-template-columns:1fr } }
.macro { border:1px solid var(--greenb); background:rgba(62,224,166,.08); border-radius:2px;
         padding:4px 6px; margin-bottom:4px }
.macro b { font-size:10.5px; letter-spacing:.1em; color:var(--green) }
.tfg { border:1px solid var(--rule); background:rgba(20,32,44,.5); border-radius:2px;
       padding:4px 6px; cursor:pointer }
.tfg.on { border-color:var(--greenb); background:rgba(62,224,166,.06) }
.tfg.part { border-color:#e0b23e44; background:rgba(62,224,166,.06) }
.tfg .drill { border:1px solid #2a7a9455; border-radius:2px; background:transparent;
              color:var(--cyan); font-size:10px; font-weight:700; padding:0 4px;
              margin-right:4px }
.tfg .nm { font-size:10px; font-weight:700; color:var(--cyan) }
.tfg .ct, .tfg .st { margin-left:6px; font-size:10px; font-variant-numeric:tabular-nums }
.single { background:rgba(20,32,44,.5); border:1px solid transparent; border-radius:2px;
          padding:4px 6px; cursor:pointer }
.single.on { background:rgba(62,224,166,.10); border-color:var(--greenb) }
.single .nm { font-size:10px; font-weight:700; color:var(--label) }
.single.on .nm { color:var(--green) }
.cols, .lrow { display:flex; align-items:center; gap:12px; margin-bottom:4px }
.cols span { font-size:10px; letter-spacing:.1em; color:var(--faint) }
.w32 { width:8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.w16 { width:4rem }
.lrow .nm { font-size:10px; font-weight:700; color:var(--label) }
.knob { width:4rem; font-size:10px; font-variant-numeric:tabular-nums; padding:2px 4px }
.knob:not(:placeholder-shown) { border-color:var(--cyanb) }
.xk { display:block }
.xk .l { display:block; font-size:10px; letter-spacing:.1em; color:var(--faint) }
.xk input { margin-top:2px; width:100%; font-size:11px; font-variant-numeric:tabular-nums;
            padding:4px 6px }
.xk input:not(:placeholder-shown) { border-color:var(--cyanb) }
.setgrid { width:100%; border-collapse:collapse }
.setgrid th { text-align:left; font-size:9px; font-weight:700; letter-spacing:.14em;
              color:var(--mut); padding:2px 4px }
.setgrid td { border-top:1px solid #0c141d; padding:4px; font-size:9.5px; color:#33465a }
.setgrid td.sp { font-weight:700; color:var(--ghost); font-variant-numeric:tabular-nums }