/* ============================================================
   SYNTH//OS  —  Jonathan Hohimer portfolio
   Retro synthwave operating system
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --font-display:'Orbitron','JetBrains Mono',sans-serif;
  --taskbar-h:48px;
  --title-h:30px;
}

html,body,#root{ height:100%; width:100%; }
body{
  font-family:var(--font-mono);
  background:#000;
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
  user-select:none;
}

/* ---------- THEME PALETTES ---------- */
.theme-outrun{
  --neon-1:#ff2db9; --neon-2:#36e8ff; --neon-3:#ffd23f;
  --bg-0:#0a0612; --bg-1:#160b2b; --panel:rgba(20,10,40,.86); --panel-solid:#160b2b;
  --text:#efe6ff; --muted:#a48fd0;
  --line:rgba(255,45,185,.38); --line-2:rgba(54,232,255,.30);
  --sky-1:#160a30; --sky-2:#46125f; --sky-3:#ff2db9;
  --sun-1:#ffd23f; --sun-2:#ff2db9;
  --grid:#ff2db9; --grid-2:#36e8ff; --star:#cdebff; --horizon:#ff7ad9;
}
.theme-miami{
  --neon-1:#ff5d8f; --neon-2:#21e6c1; --neon-3:#ffb55a;
  --bg-0:#0b0a1e; --bg-1:#141633; --panel:rgba(16,18,46,.86); --panel-solid:#141633;
  --text:#eafff7; --muted:#84a7c0;
  --line:rgba(255,93,143,.38); --line-2:rgba(33,230,193,.30);
  --sky-1:#101238; --sky-2:#3a2a6e; --sky-3:#ff5d8f;
  --sun-1:#ffb55a; --sun-2:#ff5d8f;
  --grid:#21e6c1; --grid-2:#ff5d8f; --star:#dffff7; --horizon:#ff9ec0;
}
.theme-terminal{
  --neon-1:#33ff8a; --neon-2:#7dffb0; --neon-3:#d6ff4d;
  --bg-0:#020a05; --bg-1:#06170d; --panel:rgba(6,22,13,.90); --panel-solid:#06170d;
  --text:#bfffd2; --muted:#5fae7d;
  --line:rgba(51,255,138,.34); --line-2:rgba(51,255,138,.18);
  --sky-1:#021006; --sky-2:#063d1c; --sky-3:#1fff7a;
  --sun-1:#d6ff4d; --sun-2:#1fff7a;
  --grid:#1fff7a; --grid-2:#0c9a47; --star:#9dffb8; --horizon:#5bff9e;
}
.theme-amber{
  --neon-1:#ffb000; --neon-2:#ffd277; --neon-3:#ff7a00;
  --bg-0:#0c0700; --bg-1:#1c1100; --panel:rgba(28,17,0,.90); --panel-solid:#1c1100;
  --text:#ffe2a8; --muted:#b48a3f;
  --line:rgba(255,176,0,.36); --line-2:rgba(255,176,0,.18);
  --sky-1:#160b00; --sky-2:#4a2600; --sky-3:#ffb000;
  --sun-1:#ffd277; --sun-2:#ff7a00;
  --grid:#ffb000; --grid-2:#7a4d00; --star:#ffdca0; --horizon:#ffc24d;
}
.theme-tron{
  --neon-1:#38e2ff; --neon-2:#7af9ff; --neon-3:#ffd23f;
  --bg-0:#020912; --bg-1:#06182b; --panel:rgba(6,24,43,.88); --panel-solid:#06182b;
  --text:#d6f4ff; --muted:#6fa3c4;
  --line:rgba(56,226,255,.38); --line-2:rgba(56,226,255,.20);
  --sky-1:#02101f; --sky-2:#0a3358; --sky-3:#38e2ff;
  --sun-1:#aef3ff; --sun-2:#1aa6ff;
  --grid:#38e2ff; --grid-2:#0b5e8a; --star:#cdefff; --horizon:#7af9ff;
}
.theme-vapor{
  --neon-1:#ff8fd1; --neon-2:#6feaff; --neon-3:#fff27a;
  --bg-0:#15102e; --bg-1:#241a4d; --panel:rgba(40,30,82,.84); --panel-solid:#241a4d;
  --text:#fdeeff; --muted:#bda7e0;
  --line:rgba(255,143,209,.40); --line-2:rgba(110,234,255,.30);
  --sky-1:#2a1d54; --sky-2:#6a3f93; --sky-3:#ff8fd1;
  --sun-1:#fff27a; --sun-2:#ff8fd1;
  --grid:#6feaff; --grid-2:#ff8fd1; --star:#fff0ff; --horizon:#ffb8e3;
}

/* ============================================================
   WALLPAPER
   ============================================================ */
#os{ position:fixed; inset:0; overflow:hidden; background:var(--bg-0); color:var(--text); }

.wallpaper{ position:absolute; inset:0; overflow:hidden; z-index:0; }

/* --- Outrun grid sunset (default) --- */
.wp-grid .wp-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 66%, var(--bg-0) 67%);
}
.wp-grid .wp-stars{
  position:absolute; inset:0 0 50% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, var(--star) 50%, transparent),
    radial-gradient(1.2px 1.2px at 28% 48%, var(--star) 50%, transparent),
    radial-gradient(1.6px 1.6px at 47% 14%, var(--star) 50%, transparent),
    radial-gradient(1px 1px at 63% 38%, var(--star) 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 20%, var(--star) 50%, transparent),
    radial-gradient(1.1px 1.1px at 88% 46%, var(--star) 50%, transparent),
    radial-gradient(1.3px 1.3px at 38% 30%, var(--star) 50%, transparent),
    radial-gradient(1px 1px at 7% 40%, var(--star) 50%, transparent),
    radial-gradient(1.2px 1.2px at 55% 52%, var(--star) 50%, transparent),
    radial-gradient(1.4px 1.4px at 70% 8%, var(--star) 50%, transparent);
  opacity:.85;
}
.wp-grid .wp-sun{
  position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  width:340px; height:340px; border-radius:50%;
  background:linear-gradient(180deg, var(--sun-1), var(--sun-2));
  -webkit-mask-image:linear-gradient(180deg,#000 0 56%, transparent 56% 100%),
    repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 9px, #000 9px 16px, transparent 16px 20px, #000 20px 30px, transparent 30px 36px, #000 36px 56px, transparent 56px);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(180deg,#000 0 56%, transparent 56% 100%),
    repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 9px, #000 9px 16px, transparent 16px 20px, #000 20px 30px, transparent 30px 36px, #000 36px 56px, transparent 56px);
  filter:drop-shadow(0 0 38px var(--sun-2));
}
.wp-grid .wp-floor{
  position:absolute; left:-50%; right:-50%; bottom:0; height:50%;
  perspective:320px; perspective-origin:50% 0%; overflow:hidden;
}
.wp-grid .wp-floor::before{
  content:""; position:absolute; left:-50%; right:-50%; top:0; bottom:-40%;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(5% - 1.5px), var(--grid) calc(5% - 1.5px) 5%),
    repeating-linear-gradient(0deg, transparent 0 38px, var(--grid) 38px 40px);
  background-position:0 0;
  transform:rotateX(74deg);
  transform-origin:50% 0%;
  animation:gridrun 1.6s linear infinite;
  opacity:.6;
}
.wp-grid .wp-floor::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg-0) 0%, transparent 30%);
}
@keyframes gridrun{ from{ background-position:0 0; } to{ background-position:0 40px; } }
.wp-grid .wp-glow{
  position:absolute; left:0; right:0; top:calc(50% - 3px); height:6px;
  background:var(--horizon); filter:blur(6px); opacity:.8;
}

/* --- Starfield variant --- */
.wp-stars-only{
  background:radial-gradient(120% 90% at 50% 10%, var(--sky-2), var(--bg-0) 70%);
}
.wp-stars-only .wp-neb{
  position:absolute; inset:0;
  background:
    radial-gradient(40% 30% at 25% 30%, color-mix(in oklab, var(--neon-1) 30%, transparent), transparent),
    radial-gradient(45% 35% at 75% 55%, color-mix(in oklab, var(--neon-2) 26%, transparent), transparent);
  filter:blur(20px);
}
.wp-stars-only .wp-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, var(--star) 50%, transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, var(--star) 50%, transparent),
    radial-gradient(1.6px 1.6px at 47% 14%, var(--star) 50%, transparent),
    radial-gradient(1px 1px at 63% 78%, var(--star) 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 20%, var(--star) 50%, transparent),
    radial-gradient(1.1px 1.1px at 88% 86%, var(--star) 50%, transparent),
    radial-gradient(1.3px 1.3px at 38% 90%, var(--star) 50%, transparent),
    radial-gradient(1px 1px at 7% 60%, var(--star) 50%, transparent),
    radial-gradient(1.2px 1.2px at 55% 42%, var(--star) 50%, transparent),
    radial-gradient(1.4px 1.4px at 70% 8%, var(--star) 50%, transparent),
    radial-gradient(1.1px 1.1px at 92% 32%, var(--star) 50%, transparent),
    radial-gradient(1.3px 1.3px at 18% 82%, var(--star) 50%, transparent);
}

/* --- Void grid variant --- */
.wp-void{ background:var(--bg-0); }
.wp-void .wp-floor{
  position:absolute; left:-50%; right:-50%; bottom:0; height:62%;
  perspective:340px; perspective-origin:50% 0%; overflow:hidden;
}
.wp-void .wp-floor::before{
  content:""; position:absolute; left:-50%; right:-50%; top:0; bottom:-40%;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(4% - 1.5px), var(--grid) calc(4% - 1.5px) 4%),
    repeating-linear-gradient(0deg, transparent 0 38px, var(--grid) 38px 40px);
  transform:rotateX(76deg); transform-origin:50% 0%;
  animation:gridrun 1.8s linear infinite; opacity:.5;
}
.wp-void .wp-ceiling{
  position:absolute; left:-50%; right:-50%; top:0; height:62%;
  perspective:340px; perspective-origin:50% 100%; overflow:hidden;
}
.wp-void .wp-ceiling::before{
  content:""; position:absolute; left:-50%; right:-50%; bottom:0; top:-40%;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(4% - 1.5px), var(--grid-2) calc(4% - 1.5px) 4%),
    repeating-linear-gradient(0deg, transparent 0 38px, var(--grid-2) 38px 40px);
  transform:rotateX(-76deg); transform-origin:50% 100%;
  animation:gridrun 1.8s linear infinite; opacity:.32;
}

/* --- Solid scanline variant --- */
.wp-solid{ background:radial-gradient(130% 100% at 50% 0%, var(--sky-2), var(--bg-0) 75%); }

.wp-vignette{ position:absolute; inset:0; box-shadow:inset 0 0 240px 40px rgba(0,0,0,.7); pointer-events:none; }

/* --- Matrix rain variant --- */
.wp-matrix{ background:var(--bg-0); }
.wp-matrix-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--bg-0); }

/* ============================================================
   CRT OVERLAY
   ============================================================ */
.crt-layer{ position:fixed; inset:0; z-index:9000; pointer-events:none; }
#os.crt-on .crt-layer::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#os.crt-on .crt-layer::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%);
}
#os.crt-on .crt-flicker{
  position:absolute; inset:0; background:var(--neon-2); opacity:0;
  animation:flick 7s steps(1) infinite; mix-blend-mode:overlay;
}
@keyframes flick{ 0%,97%,100%{opacity:0;} 98%{opacity:.02;} 99%{opacity:.05;} }

/* ============================================================
   DESKTOP + ICONS
   ============================================================ */
.desktop{
  position:absolute; inset:0 0 var(--taskbar-h) 0; z-index:10;
}
.icon-field{
  position:absolute; top:18px; left:18px; bottom:18px;
  display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:6px;
}
.desk-icon{
  width:92px; padding:10px 6px 8px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:transparent; border:1px solid transparent; cursor:pointer;
  color:var(--text); text-align:center;
}
.desk-icon:hover{ background:color-mix(in oklab, var(--neon-2) 12%, transparent); border-color:var(--line-2); }
.desk-icon.sel{ background:color-mix(in oklab, var(--neon-1) 18%, transparent); border-color:var(--line); }
.desk-icon .glyph{
  width:46px; height:46px; display:grid; place-items:center;
  border:1.5px solid var(--neon-2); border-radius:10px;
  background:linear-gradient(160deg, color-mix(in oklab,var(--neon-1) 16%, var(--panel-solid)), var(--panel-solid));
  box-shadow:0 0 12px -2px var(--neon-2), inset 0 0 10px -4px var(--neon-1);
  color:var(--neon-2);
}
.desk-icon .glyph svg{ width:26px; height:26px; display:block; }
.desk-icon .label{
  font-size:11.5px; line-height:1.25; letter-spacing:.02em;
  text-shadow:0 1px 3px #000, 0 0 8px color-mix(in oklab,var(--neon-1) 40%, transparent);
}

/* ============================================================
   WINDOWS
   ============================================================ */
.window{
  position:absolute; z-index:20; display:flex; flex-direction:column;
  min-width:240px; min-height:140px;
  background:var(--panel);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1.5px solid var(--neon-1);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 26px -6px var(--neon-1), 0 22px 60px -18px #000;
  overflow:hidden; color:var(--text);
}
.window.focused{ box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 22px -8px var(--neon-1), 0 0 40px -22px var(--neon-2), 0 24px 60px -20px #000; }
.window.maxed{ border-radius:0; }
.window.dragging, .window.resizing{ transition:none; }

.titlebar{
  height:var(--title-h); flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:0 8px 0 10px; cursor:grab; touch-action:none;
  background:linear-gradient(180deg, color-mix(in oklab,var(--neon-1) 24%, var(--panel-solid)), var(--panel-solid));
  border-bottom:1px solid var(--line);
}
.titlebar:active{ cursor:grabbing; }
.titlebar .tb-dot{ width:9px; height:9px; border-radius:50%; background:var(--neon-2); box-shadow:0 0 8px var(--neon-2); flex:0 0 auto; }
.titlebar .tb-title{
  font-size:12.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; text-shadow:0 0 10px color-mix(in oklab,var(--neon-1) 60%, transparent);
}
.win-controls{ display:flex; gap:6px; flex:0 0 auto; }
.win-controls button{
  width:20px; height:18px; border-radius:4px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; line-height:1; font-weight:700;
  background:transparent; border:1px solid var(--line); color:var(--text);
  display:grid; place-items:center;
}
.win-controls button:hover{ background:var(--neon-1); color:#0a0612; box-shadow:0 0 10px var(--neon-1); }
.win-controls .wc-close:hover{ background:#ff4d6d; border-color:#ff4d6d; box-shadow:0 0 10px #ff4d6d; }

.window-body{
  flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 18px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--bg-1) 70%, transparent), transparent 120px);
}
.resize-handle{
  position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; z-index:3; touch-action:none;
  background:repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px);
}

/* ============================================================
   TASKBAR
   ============================================================ */
.taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--taskbar-h); z-index:8000;
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--neon-1) 10%, var(--panel-solid)), var(--bg-0));
  border-top:1.5px solid var(--neon-1);
  box-shadow:0 0 24px -4px var(--neon-1);
}
.start-btn{
  height:34px; display:flex; align-items:center; gap:9px; padding:0 14px 0 12px;
  border:1.5px solid var(--neon-2); border-radius:8px; cursor:pointer;
  background:linear-gradient(160deg, color-mix(in oklab,var(--neon-1) 20%, var(--panel-solid)), var(--panel-solid));
  color:var(--text); font-weight:700; letter-spacing:.08em; font-size:13px;
  text-shadow:0 0 10px var(--neon-1);
}
.start-btn:hover, .start-btn.open{ box-shadow:0 0 16px -2px var(--neon-2); border-color:var(--neon-1); }
.start-btn .logo-mark{ width:18px; height:18px; color:var(--neon-2); display:block; }
.task-divider{ width:1px; height:26px; background:var(--line); }
.task-items{ display:flex; align-items:center; gap:7px; flex:1; overflow:hidden; }
.task-btn{
  height:32px; max-width:190px; min-width:42px; padding:0 12px;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--muted);
  font-size:12px; white-space:nowrap; overflow:hidden;
}
.task-btn .tlabel{ overflow:hidden; text-overflow:ellipsis; }
.task-btn svg{ width:15px; height:15px; flex:0 0 auto; }
.task-btn:hover{ color:var(--text); border-color:var(--line-2); }
.task-btn.active{
  color:var(--text); border-color:var(--neon-1);
  background:color-mix(in oklab,var(--neon-1) 14%, transparent);
  box-shadow:inset 0 -2px 0 var(--neon-1);
}
.task-btn.mini{ opacity:.6; border-style:dashed; }
.sys-tray{ display:flex; align-items:center; gap:12px; padding-right:4px; color:var(--muted); }
.tray-btn{ background:transparent; border:none; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.tray-btn:hover{ color:var(--neon-2); }
.tray-btn svg{ width:17px; height:17px; }
.clock{ text-align:right; line-height:1.15; }
.clock .t{ font-size:13px; font-weight:700; color:var(--text); text-shadow:0 0 8px var(--neon-2); }
.clock .d{ font-size:10px; color:var(--muted); letter-spacing:.04em; }

/* ============================================================
   START MENU
   ============================================================ */
.start-menu{
  position:absolute; left:10px; bottom:calc(var(--taskbar-h) + 8px); z-index:8500;
  width:320px; max-height:74vh; overflow-y:auto; overflow-x:hidden;
  background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--neon-1); border-radius:12px;
  box-shadow:0 0 30px -6px var(--neon-1), 0 24px 60px -16px #000;
  animation:popup .14s ease-out;
}
@keyframes popup{ from{ transform:translateY(10px) scale(.985); } to{ transform:none; } }
.sm-head{
  display:flex; align-items:center; gap:12px; padding:16px 16px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, color-mix(in oklab,var(--neon-1) 20%, transparent), transparent);
}
.sm-avatar{
  width:46px; height:46px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  border:1.5px solid var(--neon-2); color:var(--neon-2); font-weight:800; font-size:18px;
  background:var(--panel-solid); box-shadow:0 0 14px -2px var(--neon-2); overflow:hidden;
}
.avatar-img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.sm-head .sm-who{ min-width:0; }
.sm-head .who{ font-weight:800; font-size:14.5px; color:var(--text); text-shadow:0 0 10px color-mix(in oklab,var(--neon-2) 55%, transparent), 0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-head .role{ font-size:11px; color:var(--neon-2); opacity:.92; letter-spacing:.02em; }
.sm-section{ padding:8px 8px; }
.sm-section + .sm-section{ border-top:1px solid var(--line); }
.sm-cat{ font-size:10px; letter-spacing:.18em; color:var(--muted); padding:6px 10px 4px; text-transform:uppercase; }
.sm-item{
  width:100%; text-align:left; display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--text);
  background:transparent; border:none; font-family:var(--font-mono); font-size:13px;
  position:relative;
}
.sm-item:hover{ background:color-mix(in oklab,var(--neon-1) 16%, transparent); }
.sm-item .si-glyph{ width:22px; height:22px; color:var(--neon-2); display:grid; place-items:center; flex:0 0 auto; }
.sm-item .si-glyph svg{ width:18px; height:18px; }
.sm-item .chev{ margin-left:auto; color:var(--muted); }
.sm-item.has-sub.on{ background:color-mix(in oklab,var(--neon-1) 18%, transparent); }
.sm-item.has-sub.on .chev{ color:var(--neon-2); }
.sm-row{ position:relative; }

/* desktop fly-out submenu (Windows-style) */
.sm-fly{
  position:fixed; z-index:8600;
  width:216px; max-height:calc(100vh - 70px); overflow-y:auto; overflow-x:hidden;
  background:var(--panel); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1.5px solid var(--neon-1); border-radius:10px; padding:6px;
  box-shadow:0 0 26px -6px var(--neon-1), 0 18px 44px -14px #000;
  animation:flyin .13s ease-out;
}
@keyframes flyin{ from{ transform:translateX(-7px); } to{ transform:none; } }
.sm-fly .sm-cat{ padding:4px 10px 4px; }

.sm-sub{
  margin:2px 8px 8px 18px; padding:4px 4px 4px 6px;
  border-left:2px solid var(--line);
}
.sm-sub .sm-cat{ padding-top:2px; }
.swatch-row{ display:flex; gap:8px; padding:8px 10px; flex-wrap:wrap; }
.swatch{ width:26px; height:26px; border-radius:7px; cursor:pointer; border:1.5px solid rgba(255,255,255,.25); }
.swatch.on{ outline:2px solid var(--text); outline-offset:2px; }

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.ctx-menu{
  position:absolute; z-index:8600; min-width:200px;
  background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--neon-1); border-radius:10px; padding:6px;
  box-shadow:0 0 24px -6px var(--neon-1), 0 18px 40px -14px #000; animation:popup .1s ease-out;
}
.ctx-item{
  width:100%; text-align:left; display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:7px; cursor:pointer; color:var(--text);
  background:transparent; border:none; font-family:var(--font-mono); font-size:12.5px;
}
.ctx-item:hover{ background:color-mix(in oklab,var(--neon-1) 16%, transparent); }
.ctx-sep{ height:1px; background:var(--line); margin:4px 6px; }

/* ============================================================
   GENERIC APP CONTENT
   ============================================================ */
.app{ font-size:13.5px; line-height:1.6; color:var(--text); }
.app h2{ font-size:16px; letter-spacing:.02em; margin-bottom:4px; color:var(--text); }
.app h3{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--neon-2); margin:18px 0 10px; }
.app p{ color:var(--text); margin-bottom:10px; }
.app a{ color:var(--neon-2); text-decoration:none; border-bottom:1px dotted var(--line-2); }
.app a:hover{ color:var(--neon-1); }
.muted{ color:var(--muted); }
.tag{
  display:inline-flex; align-items:center; font-size:11px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); color:var(--neon-2); background:color-mix(in oklab,var(--neon-2) 8%, transparent);
}
.btn{
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; cursor:pointer;
  padding:9px 16px; border-radius:8px; color:var(--text);
  border:1.5px solid var(--neon-2); background:color-mix(in oklab,var(--neon-2) 12%, transparent);
  letter-spacing:.04em;
}
.btn:hover{ background:var(--neon-2); color:var(--bg-0); box-shadow:0 0 16px -2px var(--neon-2); }
.btn.pink{ border-color:var(--neon-1); background:color-mix(in oklab,var(--neon-1) 12%, transparent); }
.btn.pink:hover{ background:var(--neon-1); box-shadow:0 0 16px -2px var(--neon-1); }

/* about */
.about-head{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.about-portrait{
  width:120px; height:140px; flex:0 0 auto; border:1.5px solid var(--neon-1); border-radius:10px;
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab,var(--neon-1) 14%, transparent) 0 8px, transparent 8px 16px),
    var(--panel-solid);
  display:grid; place-items:center; color:var(--neon-2); font-weight:800; font-size:34px;
  box-shadow:inset 0 0 20px -6px var(--neon-1); overflow:hidden;
}
.kv{ display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13px; }
.kv .k{ color:var(--muted); }
.stat-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.stat{ border:1px solid var(--line); border-radius:9px; padding:10px 14px; min-width:96px; }
.stat .n{ font-size:22px; font-weight:800; color:var(--neon-1); text-shadow:0 0 12px color-mix(in oklab,var(--neon-1) 60%,transparent); }
.stat .l{ font-size:10.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }

/* skills */
.skill-row{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; margin-bottom:11px; }
.skill-row .sname{ font-size:13px; }
.skill-row .spct{ font-size:11px; color:var(--muted); }
.meter{ grid-column:1 / -1; display:flex; gap:3px; }
.seg{ flex:1; height:9px; border-radius:2px; background:color-mix(in oklab,var(--text) 10%, transparent); border:1px solid var(--line); }
.seg.on{ background:linear-gradient(90deg,var(--neon-2),var(--neon-1)); border-color:transparent; box-shadow:0 0 6px -1px var(--neon-1); }

/* projects */
.case{
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px;
  background:color-mix(in oklab,var(--neon-1) 5%, transparent);
}
.case h4{ font-size:14px; margin-bottom:2px; }
.case .ckicker{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--neon-2); margin-bottom:8px; }
.case .crow{ display:grid; grid-template-columns:88px 1fr; gap:4px 12px; font-size:12.5px; margin-bottom:5px; }
.case .crow .ck{ color:var(--muted); text-transform:uppercase; font-size:10.5px; letter-spacing:.08em; padding-top:2px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* certs */
.cert{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
.cert .badge{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--neon-3); color:var(--neon-3); box-shadow:0 0 12px -3px var(--neon-3);
  background:var(--panel-solid);
}
.cert .badge svg{ width:20px; height:20px; }
.cert .cmeta .ctitle{ font-size:13.5px; font-weight:700; }
.cert .cmeta .corg{ font-size:12px; color:var(--muted); }
.placeholder-note{
  font-size:11px; color:var(--neon-3); border:1px dashed var(--neon-3); border-radius:8px;
  padding:8px 12px; margin-bottom:14px; background:color-mix(in oklab,var(--neon-3) 8%, transparent);
}

/* resume work history */
.job{ margin-bottom:13px; }
.job-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.job-role{ font-size:13.5px; font-weight:700; }
.job-dates{ font-size:11px; color:var(--neon-2); white-space:nowrap; }
.job-org{ font-size:12.5px; color:var(--text); }
.job-loc{ font-size:11.5px; color:var(--muted); }

/* homelab */
.rack{ border:1.5px solid var(--neon-1); border-radius:10px; padding:7px; background:var(--bg-0);
  box-shadow:inset 0 0 22px -8px var(--neon-1); display:flex; flex-direction:column; gap:6px; }
.rack-u{ display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:center;
  padding:9px 11px; border-radius:6px; font-size:12.5px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--neon-1) 12%, var(--panel-solid)), var(--panel-solid));
  border:1px solid var(--line); }
.rack-u .ru-name{ font-weight:700; }
.rack-u .ru-role{ color:var(--muted); font-size:11px; text-align:right; }
.rled{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.rled.up{ background:var(--neon-2); box-shadow:0 0 8px var(--neon-2); animation:rblink 2.6s ease-in-out infinite; }
.rled.standby{ background:var(--neon-3); box-shadow:0 0 7px var(--neon-3); }
@keyframes rblink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.hl-row{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; margin-bottom:10px; }
.hl-row .tag{ white-space:nowrap; }

/* contact */
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.field input, .field textarea{
  width:100%; font-family:var(--font-mono); font-size:13px; color:var(--text);
  background:var(--bg-0); border:1.5px solid var(--line); border-radius:8px; padding:9px 11px; resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--neon-2); box-shadow:0 0 12px -3px var(--neon-2); }
.field.err input, .field.err textarea{ border-color:#ff4d6d; }
.field .ferr{ color:#ff7d92; font-size:11px; margin-top:4px; }
.social-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.social{
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:9px;
  border:1.5px solid var(--line); color:var(--text); cursor:pointer; text-decoration:none; flex:1; min-width:150px;
}
.social:hover{ border-color:var(--neon-2); box-shadow:0 0 14px -4px var(--neon-2); }
.social svg{ width:20px; height:20px; color:var(--neon-2); flex:0 0 auto; }
.social .sh{ font-size:13px; font-weight:700; } .social .ss{ font-size:11px; color:var(--muted); }
.toast{
  margin-top:12px; padding:11px 14px; border-radius:9px; font-size:12.5px;
  border:1.5px solid var(--neon-2); color:var(--neon-2); background:color-mix(in oklab,var(--neon-2) 12%, transparent);
}

/* ============================================================
   TERMINAL
   ============================================================ */
.term{
  font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--text);
  height:100%; display:flex; flex-direction:column;
}
.term-out{ white-space:pre-wrap; word-break:break-word; }
.term-out .ln{ }
.term-prompt{ color:var(--neon-1); }
.term-accent{ color:var(--neon-2); }
.term-dim{ color:var(--muted); }
.term-warn{ color:var(--neon-3); }
.term-inrow{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.term-inrow .ps1{ color:var(--neon-1); white-space:nowrap; }
.term-inrow input{
  flex:1; background:transparent; border:none; outline:none; color:var(--text);
  font-family:var(--font-mono); font-size:13px; caret-color:var(--neon-2);
}
.term-cursor{ display:inline-block; width:8px; height:15px; background:var(--neon-2); animation:blink 1s steps(1) infinite; vertical-align:-2px; }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   NETWORK MAP
   ============================================================ */
.netwrap{ height:100%; display:flex; flex-direction:column; gap:10px; }
.netcanvas{ position:relative; flex:1; min-height:260px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in oklab,var(--neon-1) 8%, transparent), transparent 60%), var(--bg-0); }
.netcanvas svg{ position:absolute; inset:0; width:100%; height:100%; }
.netlegend{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.netlegend .lk{ display:flex; align-items:center; gap:7px; }
.netlegend .swz{ width:18px; height:0; border-top:2px solid; }
.netnode-info{ font-size:12px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-height:42px; }
.netnode-info .nn{ color:var(--neon-2); font-weight:700; }

/* ============================================================
   NOW PLAYING
   ============================================================ */
.player{ display:flex; flex-direction:column; gap:14px; }
.player-art{
  height:150px; border-radius:12px; position:relative; overflow:hidden;
  border:1.5px solid var(--neon-1);
  background:linear-gradient(180deg, var(--sky-2), var(--bg-0));
  display:flex; align-items:flex-end; justify-content:center;
}
.player-art .psun{
  position:absolute; top:24px; left:50%; transform:translateX(-50%); width:90px; height:90px; border-radius:50%;
  background:linear-gradient(180deg,var(--sun-1),var(--sun-2)); filter:drop-shadow(0 0 22px var(--sun-2));
}
.eq{ position:relative; display:flex; align-items:flex-end; gap:4px; height:64px; padding-bottom:8px; z-index:1; }
.eq i{ width:6px; background:linear-gradient(180deg,var(--neon-2),var(--neon-1)); border-radius:2px 2px 0 0; box-shadow:0 0 8px -1px var(--neon-1); }
.player.playing .eq i{ animation:bar .9s ease-in-out infinite; }
@keyframes bar{ 0%,100%{ height:14%; } 50%{ height:100%; } }
.np-title{ font-size:15px; font-weight:700; }
.np-artist{ font-size:12px; color:var(--muted); }
.np-controls{ display:flex; align-items:center; gap:14px; justify-content:center; }
.np-controls button{ background:transparent; border:1.5px solid var(--line); color:var(--text); width:40px; height:40px; border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.np-controls .play{ width:52px; height:52px; border-color:var(--neon-1); color:var(--neon-1); }
.np-controls button:hover{ box-shadow:0 0 14px -3px var(--neon-2); border-color:var(--neon-2); color:var(--neon-2); }
.np-bar{ height:5px; border-radius:3px; background:color-mix(in oklab,var(--text) 12%, transparent); overflow:hidden; }
.np-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--neon-2),var(--neon-1)); }
.tracklist{ border-top:1px solid var(--line); }
.track{ display:flex; align-items:center; gap:10px; padding:8px 4px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line); }
.track:hover{ color:var(--neon-2); }
.track.cur{ color:var(--neon-1); }
.track .tnum{ width:18px; color:var(--muted); text-align:right; }
.track .tlen{ margin-left:auto; color:var(--muted); }

/* ============================================================
   SETTINGS / DISPLAY
   ============================================================ */
.set-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }
.set-tile{ border:1.5px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--panel-solid); }
.set-tile.on{ border-color:var(--neon-1); box-shadow:0 0 14px -3px var(--neon-1); }
.set-prev{ height:74px; position:relative; }
.set-tile .sname{ padding:7px 10px; font-size:12px; display:flex; align-items:center; justify-content:space-between; }
.set-dot{ width:10px; height:10px; border-radius:50%; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.switch{ width:46px; height:24px; border-radius:20px; border:1.5px solid var(--line); background:var(--bg-0); position:relative; cursor:pointer; flex:0 0 auto; }
.switch i{ position:absolute; top:1px; left:1px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:.15s; }
.switch.on{ border-color:var(--neon-2); background:color-mix(in oklab,var(--neon-2) 18%, transparent); }
.switch.on i{ left:23px; background:var(--neon-2); box-shadow:0 0 10px var(--neon-2); }

/* ============================================================
   BOOT + LOGIN
   ============================================================ */
.boot{
  position:fixed; inset:0; z-index:10000; background:#000; color:var(--neon-2);
  font-family:var(--font-mono); font-size:14px; padding:40px 48px; overflow:hidden; cursor:pointer;
}
.boot .bootlines{ white-space:pre-wrap; line-height:1.7; }
.boot .ok{ color:var(--neon-2); } .boot .wt{ color:var(--neon-3); }
.boot .skip{ position:absolute; right:24px; bottom:20px; color:var(--muted); font-size:12px; }

.login{
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; cursor:default;
  background:radial-gradient(130% 100% at 50% 18%, var(--sky-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
}
.login::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(40% 30% at 22% 26%, color-mix(in oklab,var(--neon-1) 22%, transparent), transparent),
    radial-gradient(44% 34% at 80% 70%, color-mix(in oklab,var(--neon-2) 20%, transparent), transparent);
  filter:blur(8px);
}
.login > *{ position:relative; z-index:1; }
.login .brandbar{ position:fixed; z-index:1; }
.login .lavatar{
  width:120px; height:120px; border-radius:18px; display:grid; place-items:center;
  border:2px solid var(--neon-2); color:var(--neon-2); font-weight:800; font-size:46px;
  background:var(--panel-solid); box-shadow:0 0 34px -6px var(--neon-2); overflow:hidden;
}
.login .lname{ font-family:var(--font-display); font-size:30px; letter-spacing:.06em; text-shadow:0 0 18px var(--neon-1); }
.login .lrole{ color:var(--muted); font-size:13px; letter-spacing:.18em; text-transform:uppercase; margin-top:4px; }
.login .lenter{
  margin-top:8px; padding:13px 30px; border-radius:10px; cursor:pointer; font-family:var(--font-mono);
  font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--bg-0);
  background:var(--neon-1); border:none; box-shadow:0 0 26px -4px var(--neon-1); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 38px 2px var(--neon-1); } }
.login .lhint{ color:var(--muted); font-size:11px; letter-spacing:.1em; }
.brandbar{ position:fixed; left:0; right:0; bottom:0; text-align:center; padding:14px; color:var(--muted); font-size:11px; letter-spacing:.2em; }

.fade-in{ animation:fadein .5s ease; }
@keyframes fadein{ from{ transform:scale(.99); } to{ transform:none; } }
.shutdown{ position:fixed; inset:0; z-index:11000; background:#000; display:grid; place-items:center; color:var(--neon-2); font-family:var(--font-mono); cursor:pointer; }

/* scrollbars */
.window-body::-webkit-scrollbar, .start-menu::-webkit-scrollbar, .term::-webkit-scrollbar, .term-out::-webkit-scrollbar{ width:10px; height:10px; }
.window-body::-webkit-scrollbar-track{ background:transparent; }
.window-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.window-body::-webkit-scrollbar-thumb:hover{ background:var(--neon-1); }

/* responsive */
@media (max-width:680px){
  :root{ --taskbar-h:54px; --title-h:38px; }

  /* desktop icons → tidy grid across the top */
  .icon-field{
    top:14px; left:12px; right:12px; bottom:14px;
    flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:6px 4px;
  }
  .desk-icon{ width:80px; padding:9px 4px 7px; }
  .desk-icon .glyph{ width:48px; height:48px; }
  .desk-icon .label{ font-size:11px; }

  /* windows behave like full-screen mobile apps */
  .window{ border-radius:12px; }
  .titlebar .tb-title{ font-size:13.5px; }
  .win-controls button{ width:30px; height:28px; font-size:14px; }
  .resize-handle{ display:none; }

  /* taskbar: icons only, roomy hit targets */
  .taskbar{ gap:6px; padding:0 8px; }
  .start-btn{ height:40px; padding:0 12px; font-size:12px; }
  .task-items{ gap:6px; }
  .task-btn{ height:40px; min-width:44px; padding:0 11px; }
  .task-btn .tlabel{ display:none; }
  .task-btn svg{ width:18px; height:18px; }
  .sys-tray{ gap:10px; }
  .tray-btn{ padding:6px; }
  .clock .t{ font-size:12px; } .clock .d{ display:none; }

  /* start menu: full-width sheet with inline (tap) submenus */
  .start-menu{ left:8px; right:8px; width:auto; max-height:80vh; }
  .sm-item{ padding:12px 12px; font-size:14px; }
  .sm-item.on{ background:color-mix(in oklab,var(--neon-1) 12%, transparent); }

  /* context menu a touch bigger */
  .ctx-item{ padding:11px 12px; font-size:13.5px; }

  /* app content breathes a bit less */
  .window-body{ padding:14px 14px; }
  .about-portrait{ width:96px; height:116px; font-size:28px; }
  .set-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }

  /* login scales down */
  .login .lavatar{ width:96px; height:96px; font-size:36px; }
  .login .lname{ font-size:23px; }
  .boot{ padding:24px 18px; font-size:12px; }
}