:root{
  --bg:#0b1519; --panel:#0f1a20; --line:#1d2d36; --text:#e6f1f5; --muted:#7aa2b2; --accent:#51e4c2;
  --warn:#ffb86b; --error:#ff7b7b; --good:#88ff88;

  --leftW:380px; --rightW:360px;
  --gap:14px; --pad:12px; --radius:10px; --fontScale:1;

  --sysH:clamp(240px,26vh,300px);
  --kbdH:clamp(290px,32vh,350px);  /* slight tweak */
  --graphH:clamp(110px,16vh,180px);

  --shadow:0 0 .6rem rgba(81,228,194,.35),0 0 1.6rem rgba(81,228,194,.2);

  --keyGap:6px;
  --keyFont:.92rem;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:calc(16px*var(--fontScale))/1.4 "Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px;overflow:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.02),rgba(0,0,0,.02)),repeating-linear-gradient(0deg,rgba(0,0,0,.12)0,rgba(0,0,0,.12)2px,transparent2px,transparent4px);mix-blend-mode:overlay;z-index:1}

.wrap{display:grid;height:100vh;grid-template-columns:var(--leftW) 1fr var(--rightW);grid-template-rows:48px 1fr var(--kbdH) 36px;gap:var(--gap);padding:var(--gap);background-image:radial-gradient(circle at 0 0, rgba(81,228,194,.15), transparent 30%),linear-gradient(0deg,transparent calc(100% - 48px),rgba(81,228,194,.05))}
.panel{background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 0 0 1px #0a1216,var(--shadow);border-radius:var(--radius);position:relative;overflow:hidden;min-height:0}
.panel .title{position:absolute;top:-8px;left:10px;font-size:.8rem;color:var(--muted);background:var(--bg);padding:0 .4rem}

header.panel{grid-column:1/4;padding:10px 14px;display:flex;align-items:center;justify-content:space-between}
header .brand{display:flex;gap:14px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
header .clock{color:var(--accent);text-shadow:0 0 10px var(--accent)}

.left{padding:var(--pad);display:grid;grid-template-rows:var(--sysH) minmax(0,1fr);gap:12px;min-height:0}
.system{display:flex;flex-direction:column;background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;padding:10px;overflow:hidden}
.proc{background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;min-height:0}
.proc header{padding:8px 10px;color:var(--accent);border-bottom:1px dashed var(--line)}
.proc .scroll{overflow:auto;padding:8px 10px;flex:1;min-height:0}

.meter{height:48px;background:linear-gradient(90deg,rgba(81,228,194,.2),rgba(81,228,194,.04));border:1px solid var(--line);border-radius:6px;margin:.3rem 0;position:relative;overflow:hidden}
.bar{position:absolute;left:0;top:0;bottom:0;width:20%;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 20px rgba(81,228,194,.5) inset;animation:sweep 6s linear infinite}
.bar.b2{animation-duration:9s}.bar.b3{animation-duration:12s}
@keyframes sweep{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}

table.min{width:100%;border-collapse:collapse;font-size:.95rem}
table.min th,table.min td{padding:4px 6px;border-bottom:1px dotted #17313d;white-space:nowrap}
table.min th{color:var(--muted);text-align:left}
table.min tr:hover{background:rgba(81,228,194,.05)}

.terminal{padding:0;display:grid;grid-template-rows:30px 1fr 42px;overflow:hidden;min-height:0}
.terminal .tabs{display:flex;gap:10px;padding:0 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(81,228,194,.06),transparent);align-items:center}
.tab{height:22px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);cursor:pointer;user-select:none;line-height:1}
.tab.active{color:var(--text);border-color:var(--accent);box-shadow:var(--shadow)}
.tab.empty{color:#436b77;font-style:italic}
.screens{position:relative;overflow:hidden;min-height:0}
.screen{position:absolute;inset:0;padding:14px;overflow:auto;scroll-behavior:smooth;display:none}
.screen.active{display:block}
.line{white-space:pre-wrap}.prompt{color:var(--accent)}.out{color:var(--muted)}.error{color:var(--error)}.success{color:var(--good)}
.inputbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line);background:rgba(0,0,0,.15)}
.promptPill{color:var(--accent);padding:3px 10px;border:1px solid var(--accent);border-radius:9999px;text-shadow:0 0 8px rgba(81,228,194,.5)}
#input{flex:1;background:transparent;border:1px solid var(--line);border-radius:9999px;outline:none;color:var(--text);font:inherit;letter-spacing:.4px;padding:6px 12px}
#input::placeholder{color:#5d7a87}

.right{padding:var(--pad);display:grid;grid-template-rows:1fr auto;gap:12px;min-height:0}
.viewer{background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;padding:14px;overflow:auto;min-height:0}
.viewer h2{margin:0 0 6px;color:var(--accent)}
.net{background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;padding:10px}
.chart{border:1px solid var(--line);border-radius:6px;position:relative;overflow:hidden;margin-top:6px}
.plot{position:absolute;bottom:0;left:0;height:100%;width:100%}

/* bottom: give keyboard slightly less width so it feels denser */
.bottom{grid-column:1/4;grid-row:3;padding:10px;min-height:0}
.bottom .bottom-grid{height:100%;display:grid;gap:12px;grid-template-columns:minmax(500px,1.25fr) minmax(620px,1.55fr);min-height:0}
.bigfs,.kbd-wrap{background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.bigfs>header,.kbd-wrap>header{padding:8px 10px;color:var(--accent);border-bottom:1px dashed var(--line)}
.bigfs-scroll{flex:1;min-height:0;overflow:auto;padding:8px 10px}
.bigfs-scroll .row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:4px 6px;border-bottom:1px dotted #17313d;cursor:pointer}
.bigfs-scroll .row:hover{background:rgba(81,228,194,.05)}.bigfs-scroll .ico{opacity:.9}.bigfs-scroll .tag{justify-self:end}

/* unified keyboard — 48 columns (down from 60) so gaps disappear */
.keyboard{position:relative;flex:1;min-height:0;padding:8px;overflow:hidden}
.kbd-grid{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:repeat(48,1fr);gap:var(--keyGap);height:100%}
.key{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#0a1216;user-select:none;cursor:pointer;box-shadow:inset 0 0 0 1px #0a1216,0 0 12px rgba(81,228,194,.15);position:relative;font-size:var(--keyFont)}
.key:hover{background:rgba(81,228,194,.08)}.key.press{outline:1px solid var(--accent)}
.key .pri{pointer-events:none}.key .sec{position:absolute;top:4px;left:6px;font-size:.75em;color:#6598a5;opacity:.85}
.shifted .key .sec{color:#c9f3ea}

/* footer */
.footer{grid-column:1/4;padding:6px 10px;display:flex;justify-content:space-between;align-items:center}
a{color:var(--accent)}.kbd{border:1px solid var(--line);padding:2px 6px;border-radius:6px;background:#0a1216}.muted{color:var(--muted)}

.scroll,.screen,.viewer,.boot .screen,.bigfs-scroll{scrollbar-width:thin;scrollbar-color:rgba(81,228,194,.55) rgba(81,228,194,.08)}
.scroll::-webkit-scrollbar,.screen::-webkit-scrollbar,.viewer::-webkit-scrollbar,.boot .screen::-webkit-scrollbar,.bigfs-scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-track,.screen::-webkit-scrollbar-track,.viewer::-webkit-scrollbar-track,.boot .screen::-webkit-scrollbar-track,.bigfs-scroll::-webkit-scrollbar-track{background:rgba(81,228,194,.06);border:1px solid var(--line);border-radius:8px}
.scroll::-webkit-scrollbar-thumb,.screen::-webkit-scrollbar-thumb,.viewer::-webkit-scrollbar-thumb,.boot .screen::-webkit-scrollbar-thumb,.bigfs-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(81,228,194,.65),rgba(81,228,194,.35));border:1px solid #2a4a55;border-radius:8px;box-shadow:inset 0 0 8px rgba(81,228,194,.45)}
.scroll::-webkit-scrollbar-thumb:hover,.screen::-webkit-scrollbar-thumb:hover,.viewer::-webkit-scrollbar-thumb:hover,.boot .screen::-webkit-scrollbar-thumb:hover,.bigfs-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(81,228,194,.85),rgba(81,228,194,.55))}

.boot{position:fixed;inset:0;background:#061015;color:var(--text);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s ease}
.boot.hidden{opacity:0;pointer-events:none}
.boot .inner{width:min(980px,90vw);height:min(520px,70vh);border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle at 50% -40%, rgba(81,228,194,.18), transparent 38%),#0a1216;box-shadow:var(--shadow);padding:18px;display:grid;grid-template-rows:28px 1fr 44px;gap:10px}
.boot .bar{height:6px;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.boot .bar>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 20px rgba(81,228,194,.5) inset;transition:width .28s ease}
.boot .screen{background:rgba(0,0,0,.15);border:1px dashed var(--line);border-radius:8px;overflow:auto;padding:10px;font-size:.95rem}
.boot .cta{display:flex;align-items:center;justify-content:space-between}
.btn{cursor:pointer;user-select:none;padding:6px 12px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:transparent}
.btn:hover{background:rgba(81,228,194,.08)}

@media(max-width:1100px){
  .wrap{grid-template-columns:1fr;grid-template-rows:48px 1fr var(--kbdH) 36px}
  .left{grid-row:2}.terminal{grid-row:2}.right{grid-row:2}.bottom{grid-row:3;grid-column:1}
}

/* === kbd patch v20 start ===
   Compact keyboard grid (no arrows) — keyboard-only override.
   Nothing else in the theme is touched. */
.kbd-wrap .keyboard { padding: 8px; overflow: hidden; min-height: 0; }
.kbd-wrap .keyboard .kbd-grid {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-columns: repeat(42, 1fr); /* compact, fits without empty band */
  gap: var(--keyGap, 6px);
  height: 100%;
}
.kbd-wrap .keyboard .key {
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; background:#0a1216;
  user-select:none; cursor:pointer; box-shadow:inset 0 0 0 1px #0a1216,0 0 12px rgba(81,228,194,.15);
  position:relative; font-size:var(--keyFont,.92rem);
}
.kbd-wrap .keyboard .key:hover { background: rgba(81,228,194,.08); }
.kbd-wrap .keyboard .key.press { outline:1px solid var(--accent); }
.kbd-wrap .keyboard .key .pri { pointer-events:none; }
.kbd-wrap .keyboard .key .sec { position:absolute; top:4px; left:6px; font-size:.75em; color:#6598a5; opacity:.85; }
.kbd-wrap .keyboard.shifted .key .sec { color:#c9f3ea; }
/* === kbd patch v20 end === */

/* === kbd rows v22 start ===
   Keyboard-only overrides: five independent row grids.
   Does not affect any other UI panel. */
.kbd-wrap .keyboard { padding: 8px; overflow: hidden; min-height: 0; }
.kbd-wrap .kbd-rows { display:flex; flex-direction:column; gap: var(--keyGap,6px); height:100%; }
.kbd-wrap .kbd-row  { display:grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--keyGap,6px); }

.kbd-wrap .kbd-row.r1 { grid-template-columns: repeat(35, 1fr); } /* ESC ` 1..0 - = BACK */
.kbd-wrap .kbd-row.r2 { grid-template-columns: repeat(38, 1fr); } /* TAB Q..P [ ] \ ENTER */
.kbd-wrap .kbd-row.r3 { grid-template-columns: repeat(28, 1fr); } /* CAPS A..L ; ' */
.kbd-wrap .kbd-row.r4 { grid-template-columns: repeat(34,  1fr); } /* SHIFT Z..M , . / SHIFT */
.kbd-wrap .kbd-row.r5 { grid-template-columns: repeat(42, 1fr); } /* CTRL FN SPACE ALTGR CTRL */

.kbd-wrap .keyboard .key{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; background:#0a1216;
  user-select:none; cursor:pointer; box-shadow:inset 0 0 0 1px #0a1216,0 0 12px rgba(81,228,194,.15);
  position:relative; font-size: var(--keyFont,.92rem);
}
.kbd-wrap .keyboard .key:hover{ background: rgba(81,228,194,.08); }
.kbd-wrap .keyboard .key.press{ outline:1px solid var(--accent); }
.kbd-wrap .keyboard .key .pri{ pointer-events:none; }
.kbd-wrap .keyboard .key .sec{ position:absolute; top:4px; left:6px; font-size:.75em; color:#6598a5; opacity:.85; }
.kbd-wrap .keyboard.shifted .key .sec, .kbd-wrap .kbd-rows.shifted .key .sec{ color:#c9f3ea; }
/* === kbd rows v22 end === */

/* === kbd fill v23 start ===
   Keyboard-only vertical fill so rows consume the whole pane.
   No other panels/styles are affected. */
.kbd-wrap .keyboard{
  display:flex;           /* let the rows stretch vertically */
  flex-direction:column;
  padding-bottom:8px;     /* keep existing look */
}
.kbd-wrap .kbd-rows{
  flex:1 1 auto;          /* rows container fills the pane */
  height:100%;
}
.kbd-wrap .kbd-row{
  display:grid;           /* (already set in previous patch) */
  flex:1 1 0;             /* each row gets equal height */
  min-height:0;           /* prevent overflow clipping */
  align-items:stretch;    /* keys fill the row height */
}
.kbd-wrap .keyboard .key{
  height:100%;            /* ensure each key matches row height */
}
/* === kbd fill v23 end === */