/* ============================================================
   EOS // Desktop OS  —  os.css
   Vintage 9x desktop chrome, brand-tuned.
   ============================================================ */

:root{
  --win-face:#C9CDD6;
  --bevel-hi:#FFFFFF;     /* outer light */
  --bevel-hi2:#E7E9EE;    /* inner light */
  --bevel-lo:#5A6273;     /* inner dark */
  --bevel-lo2:#2A2F3A;    /* outer dark */
  --text:#0B0E14;
  --text-soft:#3a4150;
  --field-bg:#FFFFFF;
  --field-text:#0B0E14;
  --menu-bg:#C9CDD6;
  --title-inactive:#8A93A6;
  --title-inactive-text:#E7E9EE;
  --desktop-bg:#0A6E6E;
  --desktop-dot:rgba(255,255,255,.05);
  --mint:#36F2C5;
  --indigo:#7C6CFF;
  --amber:#FFB74D;
  --led-on:#28C840;
  --led-off:#FF5F57;
  --sel:#1d3b6e;               /* selection highlight */
  --sel-text:#ffffff;

  --f-pixel:"Pixelify Sans", monospace;
  --f-ui:"Space Grotesk", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", monospace;
  --f-crt:"VT323", monospace;

  --taskbar-h:46px;
}

body[data-theme="midnight"]{ --desktop-bg:#10151F; --desktop-dot:rgba(124,108,255,.07); }
body[data-theme="teal"]{ --desktop-bg:#0A6E6E; --desktop-dot:rgba(255,255,255,.05); }
body[data-theme="dark9x"]{
  --win-face:#2A2F3A;
  --bevel-hi:#5A6273;
  --bevel-hi2:#3a4150;
  --bevel-lo:#10151F;
  --bevel-lo2:#05070b;
  --text:#E7E9EE;
  --text-soft:#9aa3b2;
  --field-bg:#10151F;
  --field-text:#36F2C5;
  --menu-bg:#2A2F3A;
  --title-inactive:#3a4150;
  --title-inactive-text:#8A93A6;
  --desktop-bg:#05070b;
  --desktop-dot:rgba(54,242,197,.05);
  --sel:#36F2C5;
  --sel-text:#05070b;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{
  font-family:var(--f-ui);
  font-weight:500;
  color:var(--text);
  background:var(--desktop-bg);
  -webkit-font-smoothing:antialiased;
  cursor:default;
  user-select:none;
}
img{ image-rendering:pixelated; }

/* ---------- BEVELS ---------- */
.bevel-out{
  background:var(--win-face);
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-hi),
    inset -1px -1px 0 0 var(--bevel-lo2),
    inset 2px 2px 0 0 var(--bevel-hi2),
    inset -2px -2px 0 0 var(--bevel-lo);
}
.bevel-in{
  background:var(--win-face);
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-lo2),
    inset -1px -1px 0 0 var(--bevel-hi),
    inset 2px 2px 0 0 var(--bevel-lo),
    inset -2px -2px 0 0 var(--bevel-hi2);
}
.bevel-out-thin{
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2);
}
.bevel-in-thin{
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi);
}

/* ============================================================
   DESKTOP
   ============================================================ */
#desktop{
  position:fixed; inset:0 0 var(--taskbar-h) 0;
  background-color:var(--desktop-bg);
  background-image:radial-gradient(var(--desktop-dot) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  overflow:hidden;
}

/* desktop icons */
.dt-icons{
  position:absolute; top:14px; left:14px;
  display:flex; flex-direction:column; flex-wrap:wrap;
  gap:6px; max-height:calc(100% - 28px);
}
.dt-icon{
  width:92px; padding:8px 4px 6px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  border:1px dotted transparent; cursor:pointer;
}
.dt-icon .glyph{ width:46px; height:46px; display:grid; place-items:center; }
.dt-icon .label{
  color:#fff; font-size:13px; font-weight:600; line-height:1.15;
  padding:1px 4px; text-shadow:1px 1px 0 rgba(0,0,0,.55); max-width:86px;
}
.dt-icon.selected .glyph{ filter:brightness(.7) saturate(1.4); }
.dt-icon.selected .label{ background:var(--sel); color:var(--sel-text); text-shadow:none; border:1px dotted #fff; }

/* ============================================================
   WINDOWS
   ============================================================ */
.window{
  position:absolute; min-width:240px;
  display:flex; flex-direction:column;
  padding:3px;
  background:var(--win-face);
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-hi),
    inset -1px -1px 0 0 var(--bevel-lo2),
    inset 2px 2px 0 0 var(--bevel-hi2),
    inset -2px -2px 0 0 var(--bevel-lo),
    3px 4px 0 0 rgba(0,0,0,.28);
}
.window.maximized{ box-shadow:
    inset 1px 1px 0 0 var(--bevel-hi),
    inset -1px -1px 0 0 var(--bevel-lo2),
    inset 2px 2px 0 0 var(--bevel-hi2),
    inset -2px -2px 0 0 var(--bevel-lo); }
.window.opening{ animation:zoomRect .13s ease-out; }
@keyframes zoomRect{
  from{ transform:scale(.82) translateY(8px); opacity:.4; }
  to{ transform:scale(1) translateY(0); opacity:1; }
}

.titlebar{
  height:30px; flex:0 0 auto;
  display:flex; align-items:center; gap:7px;
  padding:0 4px 0 6px;
  background:var(--title-inactive);
  color:var(--title-inactive-text);
  cursor:default;
}
.window.active .titlebar{
  background:linear-gradient(90deg, var(--mint) 0%, var(--indigo) 100%);
  color:#fff;
}
.titlebar .t-icon{ width:18px; height:18px; display:grid; place-items:center; flex:0 0 auto; }
.titlebar .t-text{
  flex:1 1 auto; font-family:var(--f-pixel); font-weight:600;
  font-size:15px; letter-spacing:.3px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.win-btns{ display:flex; gap:3px; }
.win-btn{
  width:21px; height:20px; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:12px; font-weight:700; line-height:1;
  color:var(--text); cursor:pointer; padding:0;
}
.win-btn:active{ box-shadow:
    inset 1px 1px 0 0 var(--bevel-lo2),
    inset -1px -1px 0 0 var(--bevel-hi),
    inset 2px 2px 0 0 var(--bevel-lo); }

/* menu strip */
.menustrip{
  flex:0 0 auto; display:flex; gap:2px; padding:2px 3px;
  font-size:13.5px; border-bottom:1px solid var(--bevel-lo);
}
.menustrip .m{ padding:2px 9px; cursor:pointer; }
.menustrip .m u{ text-decoration:underline; }
.menustrip .m:hover{ background:var(--sel); color:var(--sel-text); }

/* body + status */
.window-body{
  flex:1 1 auto; overflow:auto; position:relative;
  background:var(--win-face);
}
.window.has-bodybevel .window-body{ margin:3px; }
.statusbar{
  flex:0 0 auto; display:flex; gap:4px; padding:3px;
}
.statusbar .cell{
  padding:2px 8px; font-size:12px; color:var(--text-soft);
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo), inset -1px -1px 0 0 var(--bevel-hi);
}
.statusbar .cell.grow{ flex:1 1 auto; }

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{
  font-family:var(--f-ui); font-weight:600; font-size:13.5px;
  color:var(--text); padding:5px 14px; min-width:74px; cursor:pointer;
  background:var(--win-face);
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-hi),
    inset -1px -1px 0 0 var(--bevel-lo2),
    inset 2px 2px 0 0 var(--bevel-hi2),
    inset -2px -2px 0 0 var(--bevel-lo);
}
.btn:focus-visible{ outline:1px dotted var(--text); outline-offset:-4px; }
.btn:active,.btn.pressed{
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-lo2),
    inset -1px -1px 0 0 var(--bevel-hi),
    inset 2px 2px 0 0 var(--bevel-lo),
    inset -2px -2px 0 0 var(--bevel-hi2);
  padding:6px 13px 4px 15px;
}
.btn.default{ outline:2px solid var(--bevel-lo2); outline-offset:1px; }
.btn:disabled{ color:var(--title-inactive); cursor:default; }
.btn.sm{ min-width:0; padding:3px 10px; font-size:12.5px; }
.btn.sm:active{ padding:4px 9px 2px 11px; }

/* sunken text field */
.field{
  font-family:var(--f-ui); font-size:13.5px; color:var(--field-text);
  background:var(--field-bg); padding:4px 7px; border:0;
  box-shadow:
    inset 1px 1px 0 0 var(--bevel-lo2),
    inset -1px -1px 0 0 var(--bevel-hi),
    inset 2px 2px 0 0 var(--bevel-lo);
}
.field:focus{ outline:none; }
select.field{ cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);
  background-position:calc(100% - 13px) 9px,calc(100% - 8px) 9px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:26px; }

/* checkbox / radio */
.chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; }
.chk input{ position:absolute; opacity:0; pointer-events:none; }
.chk .box{
  width:15px; height:15px; flex:0 0 auto; background:var(--field-bg);
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo);
  display:grid; place-items:center;
}
.chk .box.radio{ border-radius:50%; }
.chk input:checked + .box::after{ content:"\2713"; font-family:var(--f-mono); font-weight:700; font-size:13px; color:var(--text); }
.chk input:checked + .box.radio::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--text); }

/* chunky scrollbars */
.window-body::-webkit-scrollbar,.scroll::-webkit-scrollbar{ width:17px; height:17px; }
.window-body::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track{
  background:repeating-conic-gradient(var(--win-face) 0% 25%, color-mix(in srgb,var(--win-face),#000 8%) 0% 50%) 0/3px 3px; }
.window-body::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb{
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo);
}

/* tooltip */
.tooltip{
  position:fixed; z-index:99999; pointer-events:none;
  background:#FFFFE1; color:#0B0E14; font-size:12px; padding:3px 7px;
  border:1px solid #0B0E14; box-shadow:2px 2px 0 rgba(0,0,0,.3);
  opacity:0; transition:opacity .06s;
}
.tooltip.show{ opacity:1; }

/* progress (block style) */
.progress{ height:18px; padding:2px; box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo); background:var(--field-bg); }
.progress .fill{ height:100%; background:
   repeating-linear-gradient(90deg, var(--indigo) 0 11px, transparent 11px 14px);
   width:0%; transition:width .25s steps(8); }

/* ============================================================
   TASKBAR
   ============================================================ */
#taskbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--taskbar-h);
  display:flex; align-items:center; gap:6px; padding:4px 6px;
  background:var(--win-face);
  box-shadow: inset 0 2px 0 0 var(--bevel-hi), inset 0 1px 0 0 var(--bevel-hi2);
  z-index:5000;
}
#start-btn{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 9px;
  font-family:var(--f-pixel); font-size:17px; font-weight:600; cursor:pointer;
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo);
}
#start-btn.pressed{ box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo); }
#start-btn .kmark{ width:22px; height:22px; }

.tb-divider{ width:2px; height:30px; box-shadow: inset 1px 0 0 var(--bevel-lo), inset -1px 0 0 var(--bevel-hi); margin:0 2px; }

#task-buttons{ flex:1 1 auto; display:flex; gap:5px; align-items:center; overflow:hidden; }
.task-btn{
  display:flex; align-items:center; gap:7px; height:34px; min-width:130px; max-width:180px;
  padding:0 10px; font-size:13px; font-weight:600; cursor:pointer; flex:0 1 auto;
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo);
}
.task-btn .ti{ width:18px; height:18px; flex:0 0 auto; }
.task-btn .tl{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-btn.active{
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo);
  background:repeating-linear-gradient(45deg, var(--win-face) 0 2px, color-mix(in srgb,var(--win-face),#000 6%) 2px 4px);
  font-weight:700;
}

/* system tray */
#tray{
  display:flex; align-items:center; gap:9px; height:34px; padding:0 4px 0 10px;
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo), inset -1px -1px 0 0 var(--bevel-hi);
}
.tray-item{ display:flex; align-items:center; gap:6px; font-size:12px; font-family:var(--f-mono); }
#led{ width:11px; height:11px; border-radius:50%; background:var(--led-on);
  box-shadow:0 0 5px var(--led-on), inset -1px -1px 0 rgba(0,0,0,.3); animation:ledpulse 1.6s ease-in-out infinite; }
@keyframes ledpulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
#tray-connect{ font-family:var(--f-ui); font-weight:600; font-size:12px; padding:4px 10px; cursor:pointer;
  background:var(--win-face); box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo); }
#tray-connect:active{ box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi); }
#tray-clock{ font-family:var(--f-mono); font-size:12.5px; padding:0 4px; }
.tray-crt{ cursor:pointer; font-size:13px; padding:2px 4px; }

/* ============================================================
   START MENU
   ============================================================ */
#start-menu{
  position:fixed; left:6px; bottom:calc(var(--taskbar-h) + 4px); width:280px;
  display:none; z-index:6000; padding:3px;
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo), 3px 4px 0 0 rgba(0,0,0,.3);
}
#start-menu.open{ display:flex; }
#start-menu .sidebar{
  width:38px; flex:0 0 auto; margin-right:3px;
  background:linear-gradient(180deg,var(--indigo),var(--mint));
  display:flex; align-items:flex-end; justify-content:center; padding:10px 0;
}
#start-menu .sidebar span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--f-pixel); font-size:20px; color:#fff; letter-spacing:2px; text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
#start-menu .items{ flex:1 1 auto; display:flex; flex-direction:column; padding:2px; }
.sm-item{ display:flex; align-items:center; gap:11px; padding:7px 9px; cursor:pointer; font-size:14px; }
.sm-item .smi{ width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; }
.sm-item:hover{ background:var(--sel); color:var(--sel-text); }
.sm-sep{ height:2px; margin:3px 4px; box-shadow: inset 0 1px 0 var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi); }

/* ============================================================
   APP-SPECIFIC
   ============================================================ */
.pad{ padding:16px 18px; }
.win-content{ font-size:14.5px; line-height:1.5; color:var(--text); }
.win-content h1{ font-family:var(--f-pixel); font-weight:600; font-size:26px; margin:0 0 4px; line-height:1.1; }
.win-content h2{ font-size:16px; font-weight:700; margin:18px 0 6px; }
.win-content p{ margin:0 0 11px; max-width:62ch; }
.win-content a{ color:var(--indigo); }
body[data-theme="dark9x"] .win-content a{ color:var(--mint); }

/* sunken inset panel */
.inset{ background:var(--field-bg); padding:14px; box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo); }

/* welcome layout */
.welcome-grid{ display:grid; grid-template-columns:1fr 230px; gap:14px; }
.reasons{ display:grid; gap:10px; margin:6px 0 0; }
.reason{ display:flex; gap:11px; align-items:flex-start; }
.reason .n{ font-family:var(--f-pixel); font-size:20px; color:var(--indigo); flex:0 0 auto; width:26px; }
body[data-theme="dark9x"] .reason .n{ color:var(--mint); }
.stat-row{ display:flex; gap:10px; margin:4px 0 0; }
.stat{ flex:1; text-align:center; padding:10px 6px; }
.stat .v{ font-family:var(--f-pixel); font-size:30px; line-height:1; }
.stat .k{ font-size:11px; color:var(--text-soft); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }

/* scheduler viz */
.sched-viz{ display:flex; flex-direction:column; gap:4px; }
.sched-lane{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; }
.sched-lane .nm{ width:78px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-lane .track{ flex:1; height:13px; background:repeating-linear-gradient(90deg, transparent 0 17px, var(--bevel-lo) 17px 18px); position:relative; }
.sched-lane .tick-blk{ position:absolute; top:1px; height:11px; width:11px; background:var(--mint); box-shadow:0 0 4px var(--mint); }
body[data-theme="dark9x"] .sched-lane .tick-blk{ background:var(--mint); }

/* list view (kernel) */
.listview{ background:var(--field-bg); box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi), inset 2px 2px 0 0 var(--bevel-lo); }
.lv-head{ display:grid; grid-template-columns:var(--lv-cols); position:sticky; top:0; }
.lv-head .col{ padding:4px 8px; font-size:12px; font-weight:700; cursor:pointer;
  background:var(--win-face); box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2); white-space:nowrap; }
.lv-row{ display:grid; grid-template-columns:var(--lv-cols); cursor:pointer; font-size:13px; }
.lv-row .col{ padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-row.selected{ background:var(--sel); color:var(--sel-text); }
.lv-row .st{ font-family:var(--f-mono); font-size:11.5px; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot.run{ background:var(--led-on); } .dot.pause{ background:var(--amber); } .dot.idle{ background:var(--title-inactive); }

/* toolbar */
.toolbar{ display:flex; gap:4px; padding:4px; align-items:center; }
.toolbar .tb-sep{ width:2px; align-self:stretch; box-shadow: inset 1px 0 0 var(--bevel-lo), inset -1px 0 0 var(--bevel-hi); margin:2px 3px; }

/* monitor bars */
.mon{ display:grid; gap:9px; }
.mon .m-row .m-top{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-soft); margin-bottom:3px; font-family:var(--f-mono); }
.mon .bar{ height:14px; padding:2px; box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi); background:var(--field-bg); }
.mon .bar .fg{ height:100%; background:repeating-linear-gradient(90deg, var(--led-on) 0 8px, transparent 8px 10px); }
.mon .bar.amber .fg{ background:repeating-linear-gradient(90deg, var(--amber) 0 8px, transparent 8px 10px); }
.mon .bar.indigo .fg{ background:repeating-linear-gradient(90deg, var(--indigo) 0 8px, transparent 8px 10px); }

/* ============================================================
   COMMAND PROMPT
   ============================================================ */
.window.term .window-body{ background:#05070b; }
.term-screen{
  font-family:var(--f-crt); font-size:19px; line-height:1.18; color:#36F2C5;
  padding:8px 10px; min-height:100%; text-shadow:0 0 4px rgba(54,242,197,.45);
}
.term-screen .cprompt{ color:#9aa3b2; }
.term-screen .amber{ color:var(--amber); }
.term-screen .dim{ color:#5A6273; }
.term-screen .cursor{ display:inline-block; width:9px; height:17px; background:#36F2C5; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

/* notepad / wordpad */
.notepad{ background:var(--field-bg); color:var(--text); min-height:100%; padding:14px 16px;
  font-family:var(--f-mono); font-size:13.5px; line-height:1.6; white-space:pre-wrap;
  box-shadow: inset 1px 1px 0 0 var(--bevel-lo2), inset -1px -1px 0 0 var(--bevel-hi); }
.wordpad{ background:#fff; color:#0B0E14; min-height:100%; padding:34px 46px; max-width:760px; }
.wordpad h1{ font-family:var(--f-pixel); font-size:30px; margin:0 0 2px; }
.wordpad .sub{ color:#5A6273; font-size:13px; margin-bottom:22px; font-family:var(--f-mono); }
.wordpad h2{ font-size:18px; margin:26px 0 8px; border-bottom:2px solid #C9CDD6; padding-bottom:4px; }
.wordpad p,.wordpad li{ font-size:14.5px; line-height:1.6; max-width:66ch; }
.wordpad .ruler{ height:18px; background:#fff; box-shadow:inset 0 -1px 0 #C9CDD6; }

/* program manager grid */
.pm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px; }
.pm-app{ padding:12px 6px 9px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; border:1px dotted transparent; }
.pm-app:hover{ border-color:var(--title-inactive); }
.pm-app.selected{ background:var(--sel); color:var(--sel-text); }
.pm-app .glyph{ width:42px; height:42px; }
.pm-app .nm{ font-size:12.5px; font-weight:600; line-height:1.2; }

/* dialog */
#modal-layer{ position:fixed; inset:0; z-index:8000; display:none; }
#modal-layer.open{ display:block; }
.dialog{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  min-width:340px; max-width:460px; padding:3px;
  background:var(--win-face);
  box-shadow: inset 1px 1px 0 0 var(--bevel-hi), inset -1px -1px 0 0 var(--bevel-lo2), inset 2px 2px 0 0 var(--bevel-hi2), inset -2px -2px 0 0 var(--bevel-lo), 4px 5px 0 0 rgba(0,0,0,.35);
  animation:zoomRect .12s ease-out; }
.dialog .titlebar{ background:linear-gradient(90deg,var(--mint),var(--indigo)); color:#fff; }
.dialog-body{ padding:16px 16px 8px; font-size:13.5px; line-height:1.45; }
.dialog-foot{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px 14px; }
.form-row{ display:flex; align-items:center; gap:10px; margin:9px 0; }
.form-row label{ width:96px; flex:0 0 auto; font-size:13px; }
.form-row .field{ flex:1 1 auto; }
.readout{ font-family:var(--f-mono); font-size:12.5px; margin-top:4px; }
.readout .ok{ color:var(--led-on); } .readout .no{ color:var(--led-off); }

/* ============================================================
   BOOT
   ============================================================ */
#boot{ position:fixed; inset:0; z-index:20000; background:#05070b; color:#36F2C5;
  font-family:var(--f-crt); font-size:20px; line-height:1.3; padding:42px 54px; overflow:hidden; }
#boot .blines{ white-space:pre-wrap; text-shadow:0 0 4px rgba(54,242,197,.4); }
#boot .boot-bar{ margin-top:22px; width:340px; height:20px; padding:3px; box-shadow:0 0 0 2px #1d2530; }
#boot .boot-bar .bf{ height:100%; width:0; background:repeating-linear-gradient(90deg,#36F2C5 0 9px,transparent 9px 12px); }
#boot .skip{ position:absolute; bottom:28px; right:38px; font-family:var(--f-mono); font-size:13px; color:#5A6273; cursor:pointer; }
#boot .skip:hover{ color:#36F2C5; }
#boot .logo{ font-family:var(--f-pixel); font-size:46px; color:#fff; margin-bottom:6px; }

/* ============================================================
   CRT
   ============================================================ */
#crt{ position:fixed; inset:0; z-index:30000; pointer-events:none; display:none; }
body.crt #crt{ display:block; }
#crt::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
#crt::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.32) 100%); }
body.crt #desktop, body.crt #boot{ animation:flicker 5.5s infinite; }
@keyframes flicker{ 0%,97%,100%{opacity:1} 98%{opacity:.93} 99%{opacity:.97} }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .window.opening,.dialog{ animation:none !important; }
  #led{ animation:none !important; }
  .term-screen .cursor{ animation:none !important; }
  body.crt #desktop, body.crt #boot{ animation:none !important; }
  .progress .fill, .sched-lane .tick-blk{ transition:none !important; }
}

.hidden{ display:none !important; }