/* ============================================================
   FAUZI PORTFOLIO — premium retro-computer experience
   FlowBoss-inspired art direction, original implementation.

   Hardware beige : #D5D3B5 #BDBB9D #A6A48B
   CRT            : #07110F #0B1714 #101C18
   Interface blue : #0789FF #0875E8 #0057D9
   Light blue     : #69C8FF #C8EDFF
   Text           : #E7E9DC #B8C5C0
   Status         : #24FF78
   ============================================================ */

:root {
  --case-1:#D5D3B5;
  --case-2:#BDBB9D;
  --case-3:#A6A48B;
  --case-4:#98967f;
  --bezel-1:#282A22;
  --bezel-2:#45483A;
  --crt-1:#07110F;
  --crt-2:#0B1714;
  --crt-3:#101C18;
  --blue:#0789FF;
  --blue-2:#0875E8;
  --blue-3:#0057D9;
  --blue-4:#003b91;
  --ltblue:#69C8FF;
  --ltblue-2:#C8EDFF;
  --text:#E7E9DC;
  --text-dim:#B8C5C0;
  --green:#24FF78;
  --warm:#E4A34D;
  --ink:#050807;
  --font-pixel:'Press Start 2P', monospace;
  --font-term:'VT323', monospace;
  --font-body:'Pixelify Sans', 'VT323', monospace;
}

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

html, body { height:100%; width:100%; overflow:hidden; }

body {
  background:#0a0704;
  color:var(--text);
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.4;
  -webkit-font-smoothing:none;
  position:relative;
}

::selection { background:var(--blue-3); color:var(--ltblue-2); }

/* ============================================================
   ROOM BACKDROP
   ============================================================ */
.room {
  position:fixed; inset:0; z-index:0;
  background-image:url("assets/room.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
}
.room-shade {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(6,14,12,0.06) 0%, rgba(4,10,8,0.38) 82%),
    linear-gradient(180deg, rgba(3,2,1,0.18) 0%, rgba(3,2,1,0.42) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 60%);
}

/* ============================================================
   SOUND TOGGLE
   ============================================================ */
.sound-toggle {
  position:fixed; top:16px; right:16px; z-index:300;
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  padding:11px 15px; color:var(--ltblue); cursor:pointer;
  background:
    linear-gradient(180deg, #141b18, #0a100e);
  border:2px solid var(--blue-4);
  border-radius:7px;
  box-shadow:0 0 0 1px rgba(7,137,255,0.15) inset, 0 5px 0 #030a07, 0 8px 18px rgba(0,0,0,0.6);
  text-shadow:0 1px 0 #000;
  transition:color .15s, border-color .15s, transform .08s, box-shadow .08s;
}
.sound-toggle:hover { color:var(--ltblue-2); border-color:var(--blue); }
.sound-toggle:active { transform:translateY(4px); box-shadow:0 1px 0 #030a07, 0 4px 10px rgba(0,0,0,0.6); }
.sound-toggle.on { color:var(--green); border-color:var(--green); box-shadow:0 0 0 1px rgba(36,255,120,0.3) inset, 0 5px 0 #06220f, 0 8px 18px rgba(0,0,0,0.6); }

/* ============================================================
   SCREENS
   ============================================================ */
.screen {
  position:fixed; inset:0; z-index:10;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:22px;
}
.screen.active { display:flex; }

/* ============================================================
   MONITOR — PHYSICAL HARDWARE
   ============================================================ */
.crt-monitor {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:min(1250px, 88vw, calc((100vh - 170px) * 1.6));
  max-width:96vw;
}

/* outer case: beige plastic, rough, lit from top */
.monitor-case {
  position:relative;
  width:100%;
  padding:30px 34px 0;
  border-radius:30px 30px 20px 20px;
  border:3px solid #8a8872;
  z-index:1;
  background-image:
    linear-gradient(168deg,
      #e0ddc0 0%, var(--case-1) 12%, var(--case-2) 42%,
      #c6c4a6 55%, var(--case-3) 78%, #99977f 92%, #8e8c76 100%),
    radial-gradient(circle 6px at 24px 26px, rgba(14,13,8,0.55) 0%, rgba(14,13,8,0) 75%),
    radial-gradient(circle 6px at calc(100% - 24px) 26px, rgba(14,13,8,0.55) 0%, rgba(14,13,8,0) 75%),
    radial-gradient(circle 6px at 24px calc(100% - 30px), rgba(14,13,8,0.5) 0%, rgba(14,13,8,0) 75%),
    radial-gradient(circle 6px at calc(100% - 24px) calc(100% - 30px), rgba(14,13,8,0.5) 0%, rgba(14,13,8,0) 75%),
    radial-gradient(circle 2.5px at 24px 26px, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(circle 2.5px at calc(100% - 24px) 26px, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;
  box-shadow:
    0 3px 0 rgba(255,255,255,0.55) inset,
    0 -26px 42px rgba(0,0,0,0.42) inset,
    -22px 0 38px rgba(0,0,0,0.22) inset,
    22px 0 38px rgba(0,0,0,0.22) inset,
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 36px 60px rgba(0,0,0,0.66),
    0 90px 140px rgba(0,0,0,0.55);
}
/* plastic roughness */
.monitor-case::before {
  content:""; position:absolute; inset:8px; pointer-events:none;
  border-radius:24px 24px 14px 14px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.045) 0 2px, rgba(255,255,255,0.04) 2px 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity:0.5;
  mix-blend-mode:multiply;
}
/* swept top highlight */
.monitor-case::after {
  content:""; position:absolute; top:6px; left:6%; right:6%; height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.42), rgba(255,255,255,0) 68%);
  pointer-events:none;
}

/* inner dark bezel */
.monitor-inner {
  position:relative;
  border-radius:18px;
  padding:24px;
  background:
    radial-gradient(circle 5px at 12px 14px, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 78%),
    radial-gradient(circle 5px at calc(100% - 12px) 14px, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 78%),
    radial-gradient(circle 5px at 12px calc(100% - 14px), rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 78%),
    radial-gradient(circle 5px at calc(100% - 12px) calc(100% - 14px), rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 78%),
    linear-gradient(150deg, var(--bezel-2) 0%, var(--bezel-1) 55%, #15160f 100%);
  background-repeat:no-repeat;
  box-shadow:
    0 0 0 3px #13140e,
    0 0 0 5px #0c0d08,
    0 14px 24px rgba(0,0,0,0.72) inset,
    0 3px 8px rgba(0,0,0,0.9) inset,
    0 2px 0 rgba(255,255,255,0.07) inset;
}

/* CRT glass */
.monitor-screen {
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% 34%, var(--crt-3) 0%, var(--crt-2) 52%, var(--crt-1) 100%);
  box-shadow:
    0 0 0 2px #040806,
    0 0 0 5px #0b0f0a,
    0 0 26px rgba(7,137,255,0.12) inset,
    0 0 90px rgba(0,0,0,0.95) inset,
    0 18px 30px rgba(0,0,0,0.5) inset;
}

/* ============================================================
   CRT EFFECT LAYERS (inside monitor-screen)
   ============================================================ */
.crt-aperture,
.crt-scanlines,
.crt-phosphor,
.crt-rgb,
.crt-noise,
.crt-brackets,
.crt-glass,
.crt-vignette,
.crt-flicker {
  position:absolute; inset:0; pointer-events:none; z-index:6;
}
.crt-aperture {
  background:repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 1px, rgba(0,0,0,0) 1px 4px);
  opacity:0.5;
}
.crt-scanlines {
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;
  opacity:0.8;
}
.crt-phosphor {
  background-image:radial-gradient(rgba(160,230,255,0.10) 0.7px, rgba(0,0,0,0) 0.9px);
  background-size:3px 3px;
  opacity:0.6;
}
.crt-rgb {
  background:repeating-linear-gradient(90deg, rgba(255,0,60,0.05) 0 1px, rgba(0,255,90,0.05) 1px 2px, rgba(0,80,255,0.05) 2px 3px);
  opacity:0.5;
}
.crt-noise {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:0.06;
  animation:noiseShift 0.36s steps(2) infinite;
}
.crt-brackets {
  background:
    linear-gradient(var(--blue-3), var(--blue-3)) 18px 18px / 34px 2px,
    linear-gradient(var(--blue-3), var(--blue-3)) 18px 18px / 2px 34px,
    linear-gradient(var(--blue-3), var(--blue-3)) calc(100% - 18px) 18px / 34px 2px,
    linear-gradient(var(--blue-3), var(--blue-3)) calc(100% - 18px) 18px / 2px 34px,
    linear-gradient(var(--blue-3), var(--blue-3)) 18px calc(100% - 18px) / 34px 2px,
    linear-gradient(var(--blue-3), var(--blue-3)) 18px calc(100% - 18px) / 2px 34px,
    linear-gradient(var(--blue-3), var(--blue-3)) calc(100% - 18px) calc(100% - 18px) / 34px 2px,
    linear-gradient(var(--blue-3), var(--blue-3)) calc(100% - 18px) calc(100% - 18px) / 2px 34px;
  background-repeat:no-repeat;
  opacity:0.5;
}
.crt-glass {
  background:linear-gradient(115deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 42%);
  box-shadow:0 0 90px rgba(0,0,0,0.6) inset;
}
.crt-vignette {
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.62) 100%);
  box-shadow:0 0 18px 6px rgba(0,0,0,0.9) inset;
}
.crt-flicker { background:rgba(150,210,255,0.02); animation:flicker 4.2s infinite; }

/* transition static noise + brightness surge on the glass */
.crt-monitor.switching .monitor-screen::after {
  content:"";
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 2px, rgba(0,0,0,0.3) 2px 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
  animation:noiseShift 0.12s steps(2) infinite, staticFade .26s ease forwards;
}
.crt-monitor.glitching .monitor-screen::after {
  animation:noiseShift 0.1s steps(2) infinite, screenGlitch 0.36s steps(3) 1;
}
.crt-monitor.switching .monitor-screen,
.crt-monitor.glitching .monitor-screen { animation:brightnessSwell .34s ease; }

/* ============================================================
   SCREEN CONTENT
   ============================================================ */
.screen-inner {
  position:absolute; inset:0; z-index:4;
  overflow-y:auto;
  padding:40px 46px;
  scrollbar-width:thin; scrollbar-color:var(--blue-4) transparent;
}
.screen-inner::-webkit-scrollbar { width:10px; }
.screen-inner::-webkit-scrollbar-track { background:rgba(0,0,0,0.35); }
.screen-inner::-webkit-scrollbar-thumb { background:var(--blue-4); border:2px solid rgba(0,0,0,0.4); border-radius:6px; }

/* ============================================================
   BEZEL BOTTOM — vents, power LED, switch
   ============================================================ */
.bezel-lips {
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:14px 26px 18px;
  border-radius:0 0 18px 18px;
}
.bezels-slot {
  flex:1;
  height:7px;
  border-radius:3px;
  background:repeating-linear-gradient(90deg, rgba(20,18,12,0.5) 0 4px, rgba(20,18,12,0) 4px 9px);
  background-color:rgba(255,255,255,0.25);
  box-shadow:0 2px 3px rgba(0,0,0,0.35) inset, 0 1px 0 rgba(255,255,255,0.3);
}
.bezel-right { display:flex; align-items:center; gap:14px; padding-left:14px; }
.monitor-led {
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #b6ffd0, var(--green) 45%, #0c7a3c 100%);
  box-shadow:0 0 12px var(--green), 0 0 26px rgba(36,255,120,0.6), 0 1px 2px rgba(0,0,0,0.6);
  animation:ledPulse 2.6s infinite;
  flex:0 0 auto;
}
.power-line {
  width:26px; height:8px;
  border-radius:4px;
  background:linear-gradient(#b9b69c, #7f7d68);
  box-shadow:0 2px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5) inset;
  flex:0 0 auto;
}

/* neck / stand / shadow */
.monitor-neck {
  width:150px; height:44px;
  background:linear-gradient(90deg, #9c9a83, var(--case-3) 50%, #9c9a83);
  clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  margin-top:-2px;
  box-shadow:0 10px 18px rgba(0,0,0,0.5);
  z-index:0;
}
.monitor-stand {
  width:360px; height:24px;
  border-radius:10px 10px 14px 14px;
  background:linear-gradient(180deg, var(--case-2), var(--case-3), #827f69);
  box-shadow:0 12px 26px rgba(0,0,0,0.65), 0 2px 0 rgba(255,255,255,0.4) inset;
  z-index:0;
}
.monitor-shadow {
  width:460px; height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
  filter:blur(4px);
  margin-top:-8px;
  z-index:0;
}

/* ============================================================
   START SCREEN CONTENT
   ============================================================ */
#startContent { display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }

.boot-panel {
  width:min(740px, 92%);
  font-family:var(--font-term);
  font-size:23px;
  color:var(--green);
  transition:opacity .3s;
}
.boot-panel.done { opacity:0; }
.boot-head {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-pixel); font-size:11px; color:var(--ltblue);
  letter-spacing:2px;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:2px solid rgba(7,137,255,0.4);
}
.boot-led {
  width:10px; height:10px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:ledPulse 1.6s infinite;
}
.boot-lines { min-height:180px; }
.boot-line-item { animation:lineIn .14s ease; }
.boot-line-item .ok { color:var(--ltblue); }
.boot-progress { display:flex; align-items:center; gap:14px; margin-top:16px; }
.boot-progress-track {
  flex:1; height:16px;
  background:rgba(0,0,0,0.55);
  border:2px solid var(--blue-4);
  border-radius:4px; padding:2px;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
}
.boot-progress-bar {
  height:100%; width:0%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, rgba(0,0,0,0.1) 2px 4px),
    linear-gradient(90deg, var(--blue-2), var(--ltblue));
  box-shadow:0 0 12px var(--blue);
  transition:width .24s ease;
}
.boot-percent { font-family:var(--font-pixel); font-size:12px; color:var(--ltblue); min-width:56px; text-align:right; }

/* start main */
.start-main {
  display:none;
  flex-direction:column; align-items:center; text-align:center;
  position:relative;
}
.start-main.show { display:flex; animation:bootIn .55s cubic-bezier(.2,.9,.25,1); }
.start-monogram {
  position:absolute; left:-6px; top:-86px;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:2px;
  color:rgba(105,200,255,0.6);
}
.title {
  font-family:var(--font-pixel);
  font-size:clamp(18px, 2.5vw, 38px);
  letter-spacing:2px; line-height:1.35;
  color:var(--ltblue-2);
  text-shadow:3px 3px 0 var(--blue-4), 0 0 30px rgba(7,137,255,0.65);
  white-space:nowrap;
}
.subtitle {
  font-family:var(--font-pixel);
  font-size:clamp(16px, 2.1vw, 25px);
  letter-spacing:12px;
  color:var(--blue);
  text-shadow:0 0 16px rgba(7,137,255,0.7);
  margin-top:14px;
}
.version {
  font-family:var(--font-term); font-size:22px; letter-spacing:3px;
  color:var(--text-dim);
  margin-top:8px;
}
.start-btn {
  position:relative;
  font-family:var(--font-pixel); font-size:16px; letter-spacing:2px;
  color:var(--ltblue-2); cursor:pointer;
  margin-top:28px;
  padding:17px 36px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.06) 2px 4px),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 55%, var(--blue-3) 100%);
  border:2px solid var(--ltblue);
  border-radius:8px;
  overflow:hidden;
  box-shadow:
    0 0 0 3px var(--blue-4),
    0 0 0 5px rgba(255,255,255,0.25),
    0 7px 0 #00296a,
    0 14px 26px rgba(0,0,0,0.55),
    0 0 30px rgba(7,137,255,0.55);
  animation:btnPulse 1.7s infinite;
  transition:transform .09s, box-shadow .09s, color .12s;
}
.start-btn::before {
  content:""; position:absolute; left:-40px; top:0; bottom:0; width:26px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
  transform:skewX(-20deg);
  animation:btnShine 2.8s ease infinite;
}
.start-btn:hover { color:#fff; box-shadow:0 0 0 3px var(--blue-4), 0 0 0 5px rgba(255,255,255,0.35), 0 7px 0 #00296a, 0 14px 26px rgba(0,0,0,0.55), 0 0 46px rgba(7,137,255,0.85); }
.start-btn:active {
  transform:translateY(6px);
  box-shadow:0 0 0 3px var(--blue-4), 0 0 0 5px rgba(255,255,255,0.25), 0 1px 0 #00296a, 0 6px 14px rgba(0,0,0,0.5), 0 0 30px rgba(7,137,255,0.55);
}
.start-cursor {
  font-family:var(--font-term); font-size:26px; color:var(--green);
  margin-top:10px;
  animation:hintBlink 1.1s infinite;
}

.keyboard-hint {
  margin-top:24px;
  font-family:var(--font-term); font-size:24px; letter-spacing:2px;
  color:var(--text-dim);
  opacity:0; transition:opacity .4s;
  text-shadow:0 2px 8px rgba(0,0,0,0.95);
  z-index:20;
}
.keyboard-hint.show { opacity:1; }
.keyboard-hint kbd {
  font-family:var(--font-pixel); font-size:11px;
  background:#141b17; color:var(--ltblue);
  border:2px solid var(--blue-4); border-bottom-width:4px;
  border-radius:5px; padding:5px 9px; margin:0 3px;
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.dashboard-inner {
  display:flex;
  flex-direction:column;
  padding:0; overflow:hidden;
  background:
    radial-gradient(ellipse 130% 70% at 50% 0%, rgba(7,137,255,0.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(7,17,15,0.25), rgba(4,8,7,0.6));
}

.dash-header {
  flex:0 0 auto;
  background:
    linear-gradient(180deg, rgba(11,23,20,0.96), rgba(7,17,15,0.96));
  border-bottom:2px solid var(--blue-4);
}
.dash-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 26px 10px;
}
.dash-title {
  font-family:var(--font-pixel); font-size:16px; letter-spacing:2px;
  color:var(--ltblue-2);
  text-shadow:2px 2px 0 var(--blue-4), 0 0 18px rgba(7,137,255,0.5);
}
.dash-sub {
  font-family:var(--font-term); font-size:20px; letter-spacing:2px;
  color:var(--text-dim); margin-top:6px;
}
.dash-clock {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:var(--ltblue);
  background:rgba(7,137,255,0.08);
  border:2px solid var(--blue-4);
  border-radius:6px; padding:8px 12px;
  box-shadow:0 0 0 1px rgba(7,137,255,0.12) inset;
  white-space:nowrap;
}

.dash-nav {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 26px 13px;
}
.nav-btn {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:var(--text-dim); cursor:pointer;
  padding:10px 14px;
  background:linear-gradient(180deg, #141c18, #0a100e);
  border:2px solid #263029; border-radius:7px;
  box-shadow:0 3px 0 #030a07;
  transition:color .12s, border-color .12s, transform .08s, box-shadow .08s, background .12s;
}
.nav-btn:hover { color:var(--ltblue); border-color:var(--blue-4); }
.nav-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #030a07; }
.nav-btn.active {
  color:#fff;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0.06) 2px 4px),
    linear-gradient(180deg, var(--blue), var(--blue-3));
  border-color:var(--ltblue);
  box-shadow:0 0 0 2px rgba(105,200,255,0.35), 0 3px 0 #00296a, 0 0 18px rgba(7,137,255,0.55);
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

/* stats */
.stats-panel {
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  padding:12px 26px 14px;
  border-bottom:2px solid rgba(7,137,255,0.22);
  background:rgba(5,11,9,0.6);
}
.stat-cell {
  position:relative;
  background:
    linear-gradient(180deg, rgba(7,137,255,0.10), rgba(0,87,217,0.04));
  border:2px solid rgba(7,137,255,0.35);
  border-radius:9px;
  padding:10px 14px;
  box-shadow:0 4px 0 rgba(0,0,0,0.35), 0 0 14px rgba(7,137,255,0.10) inset;
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
.stat-cell:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.35), 0 0 20px rgba(7,137,255,0.22) inset; }
.stat-num {
  font-family:var(--font-pixel); font-size:24px;
  color:var(--ltblue);
  text-shadow:0 0 14px rgba(7,137,255,0.7), 2px 2px 0 var(--blue-4);
}
.stat-label {
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--text-dim); margin-top:8px;
}

/* main */
.dash-main {
  flex:1 1 auto;
  overflow-y:auto;
  padding:22px 26px 64px;
  scrollbar-width:thin; scrollbar-color:var(--blue-4) transparent;
}
.dash-main::-webkit-scrollbar { width:10px; }
.dash-main::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
.dash-main::-webkit-scrollbar-thumb { background:var(--blue-4); border:2px solid rgba(0,0,0,0.4); border-radius:6px; }

.dash-section { display:none; }
.dash-section.active { display:block; animation:sectionIn .32s ease; }

/* ============================================================
   SECTION STRIP — blue textured header
   ============================================================ */
.section-strip {
  position:relative;
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-pixel); font-size:13px; letter-spacing:2px;
  color:#eaf6ff;
  padding:14px 18px;
  border-radius:9px;
  overflow:hidden;
  text-shadow:0 2px 4px rgba(0,0,0,0.55);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 6px, rgba(0,0,0,0.06) 6px 12px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.07) 2px 4px),
    linear-gradient(180deg, var(--blue), var(--blue-3));
  box-shadow:
    0 0 0 2px #00296a inset,
    0 0 0 4px rgba(0,0,0,0.28) inset,
    0 6px 0 rgba(0,48,111,0.65),
    0 10px 22px rgba(0,0,0,0.5);
  margin-bottom:22px;
}
.section-strip::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:0.45;
}
.strip-dot {
  width:12px; height:12px; border-radius:2px; flex:0 0 auto;
  background:var(--green);
  box-shadow:0 0 12px var(--green);
}

/* generic panel */
.panel {
  background:
    linear-gradient(180deg, rgba(11,23,20,0.92), rgba(7,17,15,0.92));
  border:2px solid rgba(7,137,255,0.32);
  border-radius:11px;
  padding:20px 22px;
  box-shadow:0 10px 26px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(105,200,255,0.12);
}
.panel-head {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:2px;
  color:var(--ltblue);
  padding-bottom:10px; margin-bottom:14px;
  border-bottom:1px dashed rgba(7,137,255,0.4);
}
.about-text { font-family:var(--font-body); font-size:22px; line-height:1.6; color:var(--text); }
.about-text b { color:var(--ltblue); }
.about-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tag {
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--ltblue);
  background:rgba(7,137,255,0.12);
  border:2px solid rgba(7,137,255,0.4);
  border-radius:5px; padding:6px 10px;
  box-shadow:0 3px 0 rgba(0,0,0,0.4);
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-layout {
  display:grid;
  grid-template-columns:248px 1fr;
  gap:26px; align-items:start;
}
.profile-photo-col { position:relative; }
.folder-tabs { display:flex; gap:4px; margin-bottom:6px; }
.folder-tab {
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--text-dim);
  padding:7px 12px;
  background:linear-gradient(180deg, #1a2621, #0d1411);
  border:2px solid var(--blue-4);
  border-bottom:none;
  border-radius:7px 7px 0 0;
}
.folder-tab.active { color:var(--ltblue); background:linear-gradient(180deg, #0b1714, #0b1714); }
.portrait-frame {
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:10px;
  overflow:hidden;
  border:3px solid var(--blue-4);
  background:var(--crt-1);
  box-shadow:
    0 0 0 3px #050907,
    0 12px 28px rgba(0,0,0,0.65),
    0 0 24px rgba(7,137,255,0.30) inset;
}
.portrait-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.portrait-scan {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 2px, rgba(0,0,0,0) 2px 4px);
  mix-blend-mode:multiply;
}
.portrait-id {
  position:absolute; left:8px; bottom:8px; z-index:2;
  font-family:var(--font-pixel); font-size:8px; letter-spacing:1px;
  color:var(--green);
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(36,255,120,0.4);
  border-radius:4px; padding:5px 7px;
}
.profile-name {
  font-family:var(--font-pixel); font-size:20px; letter-spacing:2px;
  color:var(--ltblue-2);
  text-shadow:2px 2px 0 var(--blue-4);
  margin-bottom:18px;
}
.meta-table {
  border:2px solid rgba(7,137,255,0.32);
  border-radius:10px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.meta-row {
  display:grid; grid-template-columns:170px 1fr; gap:14px;
  padding:12px 16px;
  font-family:var(--font-body); font-size:20px;
  border-bottom:1px solid rgba(7,137,255,0.16);
}
.meta-row:last-child { border-bottom:none; }
.meta-row:nth-child(odd) { background:rgba(7,137,255,0.06); }
.meta-row:nth-child(even) { background:rgba(0,0,0,0.15); }
.meta-key {
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--blue);
  align-self:center;
}
.meta-val { color:var(--text); }
.meta-val.highlight-green { color:var(--green); }

/* ============================================================
   WANTED NEWS TICKER
   ============================================================ */
.news-ticker {
  display:flex; align-items:stretch;
  margin:26px 0 110px;
  border:2px solid var(--blue-4);
  border-radius:9px; overflow:hidden;
  background:#050b09;
  box-shadow:0 10px 26px rgba(0,0,0,0.6), 0 0 20px rgba(7,137,255,0.18) inset;
}
.news-ticker-label {
  position:relative;
  flex:0 0 auto; display:flex; align-items:center;
  padding:0 16px;
  font-family:var(--font-pixel); font-size:11px; letter-spacing:2px;
  color:#fff; text-shadow:0 2px 3px rgba(0,0,0,0.55);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0 2px, rgba(0,0,0,0.08) 2px 4px),
    linear-gradient(180deg, var(--blue), var(--blue-3));
  box-shadow:0 0 0 2px #00296a inset;
  animation:labelPulse 1.5s infinite;
}
.news-ticker-viewport {
  flex:1 1 auto; overflow:hidden; position:relative;
  display:flex; align-items:center;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.news-ticker-track { display:flex; width:max-content; animation:tickerScroll 22s linear infinite; }
.news-ticker:hover .news-ticker-track { animation-play-state:paused; }
.news-ticker-text {
  font-family:var(--font-term); font-size:21px; letter-spacing:1px;
  color:var(--warm);
  white-space:nowrap; padding:12px 46px;
}
.news-ticker-text b { color:var(--green); }

/* ============================================================
   JOURNEY TIMELINE
   ============================================================ */
.timeline { position:relative; padding-left:14px; }
.tl-item { position:relative; padding-left:58px; margin-bottom:20px; }
.tl-item:not(:last-child)::after {
  content:"";
  position:absolute; left:26px; top:32px;
  width:4px; height:calc(100% + 20px);
  background:linear-gradient(180deg, var(--blue), var(--blue-3));
  box-shadow:0 0 12px rgba(7,137,255,0.55);
  border-radius:2px;
  z-index:1;
}
.tl-node {
  position:absolute; left:16px; top:20px;
  width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1d3a48, var(--crt-1) 70%);
  border:4px solid var(--blue);
  box-shadow:0 0 14px rgba(7,137,255,0.8);
  z-index:2;
}
.tl-item.complete .tl-node { border-color:var(--blue-4); box-shadow:0 0 10px rgba(7,137,255,0.4); }
.tl-item.current .tl-node { border-color:var(--green); box-shadow:0 0 16px var(--green); animation:ledPulse 2s infinite; }
.tl-card {
  background:linear-gradient(180deg, rgba(11,23,20,0.92), rgba(7,17,15,0.92));
  border:2px solid rgba(7,137,255,0.32);
  border-radius:11px; padding:16px 20px;
  box-shadow:0 10px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.35);
}
.tl-item.current .tl-card {
  border-color:rgba(36,255,120,0.5);
  box-shadow:0 10px 24px rgba(0,0,0,0.5), 0 0 20px rgba(36,255,120,0.18);
}
.tl-badge {
  display:inline-block;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--ltblue);
  background:rgba(7,137,255,0.14);
  border:2px solid rgba(7,137,255,0.4);
  border-radius:5px; padding:4px 8px; margin-bottom:10px;
}
.tl-name { font-family:var(--font-pixel); font-size:13px; letter-spacing:1px; color:var(--text); line-height:1.6; }
.tl-sub { font-family:var(--font-body); font-size:20px; color:var(--text-dim); margin-top:6px; }
.tl-status { font-family:var(--font-term); font-size:20px; letter-spacing:1px; color:var(--text-dim); margin-top:8px; }
.tl-status.green { color:var(--green); }

/* ============================================================
   SKILLS INVENTORY
   ============================================================ */
.skills-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.skill-group {
  position:relative;
  background:linear-gradient(180deg, rgba(11,23,20,0.92), rgba(7,17,15,0.92));
  border:2px solid rgba(7,137,255,0.32);
  border-radius:11px; padding:16px 18px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.35);
  transition:border-color .12s, transform .12s;
}
.skill-group:hover { border-color:var(--blue); transform:translateY(-2px); }
.skill-group-title {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:var(--ltblue);
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px dashed rgba(7,137,255,0.38);
}
.skill-group-title::before {
  content:""; width:9px; height:9px; flex:0 0 auto;
  background:var(--green); box-shadow:0 0 8px var(--green);
}
.skill-tags { display:flex; flex-wrap:wrap; gap:7px; }
.skill-tag {
  font-family:var(--font-body); font-size:18px;
  color:var(--text);
  background:rgba(7,137,255,0.10);
  border:2px solid rgba(7,137,255,0.35);
  border-radius:6px;
  padding:4px 10px;
  box-shadow:0 3px 0 rgba(0,0,0,0.35);
  transition:border-color .1s, color .1s, background .1s;
}
.skill-tag:hover { border-color:var(--ltblue); color:var(--ltblue-2); background:rgba(7,137,255,0.18); }

/* ============================================================
   PROJECT ARCHIVE
   ============================================================ */
.projects-list { display:flex; flex-direction:column; gap:18px; }
.project-card {
  border:2px solid rgba(7,137,255,0.35);
  border-radius:11px; overflow:hidden;
  background:linear-gradient(180deg, rgba(11,23,20,0.94), rgba(7,17,15,0.94));
  box-shadow:0 12px 28px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.35);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.project-card:hover {
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 18px 34px rgba(0,0,0,0.65), 0 0 24px rgba(7,137,255,0.25);
}
.project-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.07) 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 6px, rgba(0,0,0,0.05) 6px 12px),
    linear-gradient(180deg, var(--blue), var(--blue-3));
  box-shadow:0 2px 0 rgba(0,48,111,0.8) inset, 0 -1px 0 rgba(255,255,255,0.15) inset;
}
.project-num {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:#fff; text-shadow:0 2px 3px rgba(0,0,0,0.55);
}
.project-cat { font-family:var(--font-term); font-size:20px; color:var(--ltblue-2); }
.project-body { padding:16px 18px 18px; }
.project-title {
  font-family:var(--font-pixel); font-size:15px; letter-spacing:1px;
  color:var(--ltblue-2); margin-bottom:10px;
  text-shadow:1px 1px 0 var(--blue-4);
}
.project-desc { font-family:var(--font-body); font-size:20px; line-height:1.5; color:var(--text-dim); margin-bottom:14px; }
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.project-tags span {
  font-family:var(--font-body); font-size:17px;
  color:var(--ltblue);
  background:rgba(7,137,255,0.10);
  border:2px solid rgba(7,137,255,0.32);
  border-radius:5px; padding:3px 9px;
}
.project-foot {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:14px;
  border-top:1px dashed rgba(7,137,255,0.28);
}
.project-status {
  font-family:var(--font-term); font-size:20px; letter-spacing:1px;
  color:var(--green);
}
.project-status:not(:checked) { /* noop */ }
.view-btn {
  font-family:var(--font-pixel); font-size:10px; letter-spacing:1px;
  color:var(--ltblue-2); cursor:pointer;
  padding:11px 15px;
  background:linear-gradient(180deg, var(--blue), var(--blue-3));
  border:2px solid var(--ltblue); border-radius:7px;
  box-shadow:0 0 0 2px var(--blue-4), 0 4px 0 #00296a;
  transition:transform .08s, box-shadow .08s, color .12s;
}
.view-btn:hover { color:#fff; box-shadow:0 0 0 2px var(--blue-4), 0 4px 0 #00296a, 0 0 18px rgba(7,137,255,0.6); }
.view-btn:active { transform:translateY(3px); box-shadow:0 0 0 2px var(--blue-4), 0 1px 0 #00296a; }

/* ============================================================
   CONTACT TERMINAL
   ============================================================ */
.terminal-box {
  border:2px solid var(--blue-4);
  border-radius:11px; overflow:hidden;
  background:var(--crt-1);
  box-shadow:0 14px 34px rgba(0,0,0,0.65), 0 0 28px rgba(7,137,255,0.18) inset;
}
.terminal-bar {
  display:flex; align-items:center; gap:8px;
  padding:11px 15px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, rgba(0,0,0,0.06) 2px 4px),
    linear-gradient(180deg, #15201b, #0a100e);
  border-bottom:2px solid var(--blue-4);
}
.term-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 6px currentColor; }
.term-dot.red { background:#ff5f56; color:#ff5f56; }
.term-dot.yellow { background:#ffbd2e; color:#ffbd2e; }
.term-dot.green { background:#27c93f; color:#27c93f; }
.term-title { font-family:var(--font-pixel); font-size:9px; letter-spacing:1px; color:var(--text-dim); margin-left:8px; }
.terminal-body {
  padding:18px 20px 22px;
  font-family:var(--font-term); font-size:22px; line-height:1.7;
  min-height:220px;
}
.term-line { opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; color:var(--green); }
.term-line.visible { opacity:1; transform:translateY(0); }
.term-prompt { color:var(--blue); margin-right:6px; }
.term-cmd { color:var(--ltblue); }
.term-url { color:var(--warm); text-decoration:none; border-bottom:1px dashed rgba(228,163,77,0.55); }
.term-url:hover { color:#fff; }
.term-na { color:#7f8f88; }
.term-cursor { color:var(--green); animation:hintBlink 1s infinite; }
.terminal-note {
  margin-top:12px;
  font-family:var(--font-body); font-size:17px;
  color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.na-chip {
  font-family:var(--font-pixel); font-size:8px; letter-spacing:1px;
  color:#7f8f88;
  border:1px solid #3a4a44;
  border-radius:4px; padding:4px 7px;
  background:rgba(0,0,0,0.4);
}

/* ============================================================
   PROJECT MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(3,6,5,0.8);
  backdrop-filter:blur(3px);
}
.modal-overlay.hidden { display:none; }
.modal-window {
  width:min(700px, 94vw);
  max-height:86vh;
  display:flex; flex-direction:column;
  border-radius:15px; overflow:hidden;
  border:3px solid var(--case-4);
  background:linear-gradient(160deg, var(--case-2), var(--case-3));
  box-shadow:0 34px 80px rgba(0,0,0,0.85), 0 0 0 2px rgba(255,255,255,0.22) inset;
  animation:modalIn .22s cubic-bezier(.2,.9,.25,1);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0.07) 2px 4px),
    linear-gradient(180deg, var(--blue), var(--blue-3));
}
.modal-header-text {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:2px;
  color:#fff; text-shadow:0 2px 3px rgba(0,0,0,0.55);
}
.modal-x {
  font-family:var(--font-pixel); font-size:15px; line-height:1;
  color:#fff; cursor:pointer;
  background:rgba(0,0,0,0.28);
  border:2px solid rgba(255,255,255,0.55); border-radius:6px;
  width:32px; height:32px;
  transition:background .1s;
}
.modal-x:hover { background:#00306f; }
.modal-body {
  padding:22px 24px;
  overflow-y:auto;
  background:linear-gradient(180deg, #101c18, #0b1714);
}
.modal-project-name {
  font-family:var(--font-pixel); font-size:18px; letter-spacing:1px;
  color:var(--ltblue-2); margin-bottom:16px;
  text-shadow:2px 2px 0 var(--blue-4);
}
.modal-meta { display:flex; gap:12px; margin-bottom:18px; }
.modal-meta-item {
  flex:1;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--text-dim);
  background:rgba(7,137,255,0.08);
  border:2px solid rgba(7,137,255,0.32);
  border-radius:7px; padding:10px 12px;
}
.modal-meta-item b {
  display:block; margin-top:7px;
  font-size:11px; color:var(--ltblue);
}
.modal-section-title {
  font-family:var(--font-pixel); font-size:10px; letter-spacing:2px;
  color:var(--blue);
  margin:16px 0 8px; padding-bottom:6px;
  border-bottom:1px dashed rgba(7,137,255,0.38);
}
.modal-desc { font-family:var(--font-body); font-size:21px; line-height:1.55; color:var(--text); }
.modal-tech { display:flex; flex-wrap:wrap; gap:7px; }
.modal-tech span {
  font-family:var(--font-body); font-size:18px;
  color:var(--ltblue);
  background:rgba(7,137,255,0.12);
  border:2px solid rgba(7,137,255,0.35);
  border-radius:5px; padding:4px 10px;
}
.modal-footer {
  padding:14px 16px;
  display:flex; justify-content:flex-end;
  background:linear-gradient(180deg, var(--case-2), var(--case-3));
  border-top:2px solid #8a8872;
}
.modal-close-btn {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:1px;
  color:var(--ltblue-2); cursor:pointer;
  padding:13px 18px;
  background:linear-gradient(180deg, var(--blue), var(--blue-3));
  border:2px solid var(--ltblue); border-radius:7px;
  box-shadow:0 4px 0 #00296a;
}
.modal-close-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #00296a; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes noiseShift { 0%{background-position:0 0,0 0} 50%{background-position:42px 22px,30px 60px} 100%{background-position:-32px 12px,60px 34px} }
@keyframes staticFade { from{opacity:1} to{opacity:0} }
@keyframes screenGlitch {
  0%{transform:translate(0); filter:hue-rotate(0) brightness(1)}
  22%{transform:translate(-5px,2px); filter:hue-rotate(35deg) brightness(1.25)}
  46%{transform:translate(5px,-3px); filter:hue-rotate(-25deg) brightness(0.92)}
  70%{transform:translate(-3px,-2px); filter:hue-rotate(12deg) brightness(1.15)}
  100%{transform:translate(0); filter:hue-rotate(0) brightness(1)}
}
@keyframes brightnessSwell { 0%{filter:brightness(1)} 45%{filter:brightness(1.35)} 100%{filter:brightness(1)} }
@keyframes flicker { 0%,95%,100%{opacity:0} 96%{opacity:0.45} 97%{opacity:0.08} 98%{opacity:0.35} 99%{opacity:0.12} }
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes btnPulse { 0%,100%{box-shadow:0 0 0 3px var(--blue-4),0 0 0 5px rgba(255,255,255,0.25),0 7px 0 #00296a,0 14px 26px rgba(0,0,0,0.55),0 0 28px rgba(7,137,255,0.5)} 50%{box-shadow:0 0 0 3px var(--blue-4),0 0 0 5px rgba(255,255,255,0.3),0 7px 0 #00296a,0 14px 26px rgba(0,0,0,0.55),0 0 44px rgba(7,137,255,0.9)} }
@keyframes btnShine { 0%,55%{left:-40px} 85%,100%{left:calc(100% + 40px)} }
@keyframes hintBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes labelPulse { 0%,100%{opacity:1} 50%{opacity:0.72} }
@keyframes lineIn { from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:translateX(0)} }
@keyframes bootIn { from{opacity:0; transform:scale(0.95)} to{opacity:1; transform:scale(1)} }
@keyframes sectionIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes modalIn { from{opacity:0; transform:scale(0.94)} to{opacity:1; transform:scale(1)} }

/* dashboard boot: staggered entrance used by JS */
.dash-boot .dash-header { animation:sectionIn .35s ease both; }
.dash-boot .stats-panel { animation:sectionIn .35s ease .08s both; }
.dash-boot .dash-main { animation:sectionIn .35s ease .16s both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  body { font-size:18px; }
  .crt-monitor { width:min(96vw, calc((100vh - 130px) * 1.6)); }
  .monitor-case { padding:16px 16px 0; border-radius:20px 20px 14px 14px; }
  .monitor-inner { padding:12px; }
  .screen-inner { padding:26px 24px; }
  .dash-topbar { padding:12px 16px 8px; }
  .dash-nav { padding:0 16px 10px; }
  .stats-panel { grid-template-columns:repeat(2, 1fr); padding:10px 16px; }
  .dash-main { padding:16px 16px 54px; }
  .profile-layout { grid-template-columns:1fr; }
  .profile-photo-col { max-width:230px; }
  .skills-grid { grid-template-columns:1fr; }
  .meta-row { grid-template-columns:120px 1fr; }
  .modal-meta { flex-direction:column; }
  .monitor-stand { width:240px; }
  .monitor-neck { width:110px; }
  .bezel-lips { padding:10px 14px 14px; }
}

@media (max-width: 560px) {
  .title { white-space:normal; }
  .subtitle { letter-spacing:5px; }
  .sound-toggle { font-size:9px; padding:9px 11px; top:10px; right:10px; }
  .nav-btn { font-size:9px; padding:9px 10px; }
  .dash-title { font-size:12px; }
  .dash-clock { display:none; }
  .stat-num { font-size:18px; }
  .keyboard-hint { font-size:16px; }
  .start-btn { padding:14px 22px; font-size:13px; }
  .start-monogram { display:none; }
  .crt-brackets { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}