:root{
  --bg:#000;
  --fg:#79b8ff;
  --dim:rgba(121,184,255,.68);
  --rule:rgba(121,184,255,.18);
  --panel:rgba(121,184,255,.02);
  --ok:rgba(120,255,180,.85);
  --bad:rgba(255,140,140,.85);

  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* CRT knobs */
  --scanline:.22;
  --scanline-gap:3px;
  --noise:.10;
  --vignette:.55;
  --glow:.60;
  --rgb:.70px;

  /* barrel-ish */
  --curveX: 1.02;
  --curveY: 1.01;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  letter-spacing:.12px;
  overflow-x:hidden;
  padding-bottom:54px; /* for taskbar */
}

/* ===== CRT SHELL ===== */
.os-shell{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:22px 14px;
}

.os-screen{
  position:relative;
  width:min(1100px, 100%);
  border-radius:28px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 0 0 1px rgba(121,184,255,.08), 0 18px 70px rgba(0,0,0,.80);
  transform: perspective(1200px) translateZ(0);
}

.os-screen::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  border-radius:30px;
  background: radial-gradient(120% 90% at 50% 50%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,var(--vignette)) 78%,
    rgba(0,0,0,.92) 100%);
  z-index:40;
  mix-blend-mode:multiply;
}

.os-screen::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:41;
  mix-blend-mode:screen;
  opacity:.35;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(121,184,255,.10), rgba(121,184,255,0) 55%),
    radial-gradient(900px 420px at 75% 15%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
}

.fx{ position:absolute; inset:0; pointer-events:none; z-index:30; }

.fx.scanlines{
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) calc(var(--scanline-gap) - 1px),
      rgba(0,0,0,var(--scanline)) var(--scanline-gap)
    );
  mix-blend-mode:multiply;
  opacity:.9;
}

.fx.noise{
  opacity:var(--noise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:noiseShift .65s steps(2,end) infinite;
  mix-blend-mode:screen;
}
@keyframes noiseShift{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(1%,-1%); }
  100%{ transform:translate(0,0); }
}

/* gentle flicker */
.os-screen.flicker{
  animation:flicker 4.2s infinite;
}
@keyframes flicker{
  0%{ filter:brightness(1); }
  6%{ filter:brightness(1.02); }
  7%{ filter:brightness(.98); }
  9%{ filter:brightness(1.01); }
  23%{ filter:brightness(1.03); }
  24%{ filter:brightness(1); }
  78%{ filter:brightness(1.02); }
  79%{ filter:brightness(1); }
  100%{ filter:brightness(1); }
}

/* barrel-ish curve illusion */
.os-content{
  position:relative;
  z-index:10;
  padding: clamp(14px, 3vw, 22px);
  text-shadow:
    0 0 calc(8px * var(--glow)) rgba(121,184,255,.35),
    0 0 calc(22px * var(--glow)) rgba(47,125,214,.22);
  filter:contrast(1.06) saturate(1.12);
  transform: scale(var(--curveX), var(--curveY));
}

/* ===== LAYOUT ===== */
.os-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:16px;
  align-items:start;
}
@media (max-width: 940px){
  .os-grid{ grid-template-columns: 1fr; }
}

.panel{
  border:1px solid rgba(121,184,255,.16);
  background: var(--panel);
  border-radius:14px;
  overflow:hidden;
}

.panel-hd{
  padding:12px 12px 10px 12px;
  border-bottom:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.panel-title{
  margin:0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(121,184,255,.95);
}
.panel-sub{
  color:var(--dim);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.panel-bd{ padding:12px; }

.hr{ height:1px; background:var(--rule); margin:12px 0; }

/* ===== TERMINAL ===== */
.terminal{
  min-height: 420px;
}
.term-output{
  white-space:pre-wrap;
  font-size:13px;
  color:rgba(121,184,255,.92);
}
.term-line{ margin:0 0 8px 0; }
.prompt{
  display:flex; align-items:center; gap:10px;
  margin-top:12px;
  border-top:1px dashed rgba(121,184,255,.14);
  padding-top:12px;
}
.prompt .gt{ color: rgba(121,184,255,.72); user-select:none; }
.prompt input{
  width:100%;
  border:1px solid rgba(121,184,255,.20);
  background:rgba(121,184,255,.02);
  color:var(--fg);
  font-family:var(--font);
  font-size:13px;
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
.cursor{
  display:inline-block;
  width:9px; height:16px;
  background: rgba(121,184,255,.75);
  animation:blink 1.05s steps(2,end) infinite;
}
@keyframes blink{ 0%,45%{opacity:1}46%,100%{opacity:0} }

/* ===== MODULE RACK ===== */
.rack{
  position:sticky;
  top:18px;
}
.rack .slot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--rule);
}
.rack .slot:last-child{ border-bottom:none; }
.slot .name{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:rgba(121,184,255,.80);
}
.slot .value{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:rgba(121,184,255,.62);
  display:flex;
  align-items:center;
  gap:8px;
}
.led{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(121,184,255,.25);
  box-shadow:0 0 12px rgba(121,184,255,.12);
}
.led.ok{
  background:rgba(120,255,180,.65);
  border-color:rgba(120,255,180,.35);
  box-shadow:0 0 14px rgba(120,255,180,.18);
}
.led.local{
  background:rgba(121,184,255,.35);
  border-color:rgba(121,184,255,.30);
}
.led.off{
  background:rgba(121,184,255,.10);
  border-color:rgba(121,184,255,.18);
}

/* signal meter */
.signal{
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:18px;
}
.signal span{
  width:4px;
  height:6px;
  border-radius:2px;
  background: rgba(121,184,255,.20);
  border:1px solid rgba(121,184,255,.14);
}
.signal span.on{
  background: rgba(121,184,255,.70);
  border-color: rgba(121,184,255,.30);
  box-shadow: 0 0 10px rgba(121,184,255,.18);
}

/* disk spinner */
.disk{
  width:18px; height:18px;
  border-radius:999px;
  border:1px solid rgba(121,184,255,.25);
  position:relative;
}
.disk::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:1px solid rgba(121,184,255,.18);
}
.disk.spin{
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== START MENU (taskbar) ===== */
.taskbar{
  position:fixed;
  left:0; right:0; bottom:0;
  height:44px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  background: rgba(0,0,0,.78);
  border-top: 1px solid rgba(121,184,255,.18);
  backdrop-filter: blur(2px);
  box-shadow: 0 -12px 35px rgba(0,0,0,.55);
}
.start-btn{
  appearance:none;
  border: 1px solid rgba(121,184,255,.30);
  background: rgba(121,184,255,.05);
  color: rgba(121,184,255,.92);
  font-family: var(--font);
  font-size:12px;
  font-weight:900;
  letter-spacing:.45px;
  text-transform:uppercase;
  padding: 10px 12px;
  border-radius: 8px;
  cursor:pointer;
}
.start-btn:hover{ border-color: rgba(121,184,255,.65); background: rgba(121,184,255,.08); }
.taskbar-status{
  display:flex; align-items:center; gap:8px;
  color: var(--dim);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.35px;
  user-select:none;
}
.taskbar-status .sep{ opacity:.5; }
.taskbar-clock{
  margin-left:auto;
  font-size:11px;
  color: rgba(121,184,255,.72);
  text-transform:uppercase;
  letter-spacing:.35px;
  user-select:none;
  padding:0 6px;
}
.start-backdrop{
  position:fixed; inset:0;
  z-index:75;
  display:none;
}
.start-backdrop.show{ display:block; }

.start-menu{
  position:fixed;
  left:10px;
  bottom:54px;
  width:min(420px, calc(100vw - 20px));
  z-index:90;
  display:none;

  border:1px solid rgba(121,184,255,.22);
  background: rgba(0,0,0,.86);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 0 44px rgba(0,0,0,.78), 0 0 28px rgba(121,184,255,.10);
}
.start-menu.show{ display:block; }

.start-menu-hd{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--rule);
  background: rgba(121,184,255,.03);
}
.start-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.start-sub{
  margin-top:4px;
  font-size:11px;
  color: var(--dim);
  text-transform:uppercase;
  letter-spacing:.35px;
}
.start-menu-bd{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(52vh, 460px);
  overflow:auto;
}
.app{
  border:1px solid rgba(121,184,255,.18);
  background: rgba(121,184,255,.02);
  border-radius: 10px;
  padding:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}
.app:hover{ border-color: rgba(121,184,255,.50); background: rgba(121,184,255,.05); }
.app.active{ border-color: rgba(121,184,255,.70); background: rgba(121,184,255,.07); }

.app .icon{
  width:28px; height:28px;
  border:1px solid rgba(121,184,255,.22);
  background: rgba(121,184,255,.04);
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-size:12px;
  color: rgba(121,184,255,.85);
}
.app .meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.app .name{
  font-size:12px;
  font-weight:900;
  letter-spacing:.45px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app .desc{
  font-size:11px;
  letter-spacing:.28px;
  color: var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.start-menu-ft{
  padding:10px 12px;
  border-top:1px solid var(--rule);
  background: rgba(121,184,255,.02);
}
.start-menu-ft .hint{
  font-size:11px;
  color: var(--dim);
  text-transform:uppercase;
  letter-spacing:.28px;
}

/* small helpers */
a{ color: rgba(121,184,255,.92); }
a:hover{ color: rgba(180,210,255,.95); }
.small{ font-size:11px; color: var(--dim); text-transform:uppercase; letter-spacing:.35px; }