/* ═══════════════════════════════════════════════════════════
   CODEVERSE — Terminal / Modern CRT Theme (v3.0 redesign)
   Author  : Codeverse Dev Team
   Style   : refined phosphor-green terminal, deeper space,
             subtler glow, cleaner type, smoother motion.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Core phosphor palette — slightly desaturated for modern feel */
  --col-void       : #000000;
  --col-surface    : #050b07;
  --col-surface-2  : #07120c;
  --col-surface-3  : #0a1810;
  --col-border     : #1f7a3a;
  --col-border-dim : #0d3a1d;
  --col-border-mut : #102a18;

  --col-green      : #2bff88;
  --col-green-mid  : #15c858;
  --col-green-dim  : #0a6e2c;
  --col-green-deep : #054018;

  --col-cyan       : #4ff0ff;
  --col-cyan-dim   : #1c7d8a;
  --col-yellow     : #ffe14d;
  --col-red        : #ff5c5c;

  --col-text       : #8affb0;
  --col-text-bright: #c9ffd6;
  --col-text-dim   : #3d8a52;
  --col-text-mute  : #235a33;
  --col-white      : #e6fff0;

  /* Glow stacks — layered for soft phosphor bloom */
  --glow-green     : 0 0 4px #2bff88cc, 0 0 12px #15c85866, 0 0 28px #15c85822;
  --glow-green-sm  : 0 0 3px #2bff88aa, 0 0 8px #15c85844;
  --glow-cyan      : 0 0 4px #4ff0ffcc, 0 0 12px #4ff0ff55, 0 0 26px #4ff0ff22;
  --glow-cyan-sm   : 0 0 3px #4ff0ffaa, 0 0 8px #4ff0ff44;
  --glow-text      : 0 0 2px #2bff8866, 0 0 10px #15c85833;

  /* Typography */
  --font-mono      : "JetBrainsMono", "JetBrains Mono", "Fira Code", "Cascadia Code", "Courier New", monospace;
  --font-pixel     : "Courier New", "Consolas", monospace;

  /* Geometry */
  --gap            : 16px;
  --radius         : 6px;
  --radius-sm      : 3px;
  --border-w       : 1px;

  /* Easing */
  --ease-out       : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft      : cubic-bezier(0.4, 0, 0.2, 1);

  /* Grid */
  --cols           : 12;
}

/* ── 2. RESET + BASE ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0;
}

html {
  scroll-behavior : smooth;
  font-size       : 15px;
  -webkit-font-smoothing : antialiased;
  text-rendering         : optimizeLegibility;
}

body {
  background-color : var(--col-void);
  color            : var(--col-text);
  font-family      : var(--font-mono);
  font-weight      : 400;
  min-height       : 100vh;
  overflow-x       : hidden;
  line-height      : 1.6;
  letter-spacing   : 0.01em;
  /* Layered ambient: vignette + faint glow + phosphor wash */
  background-image :
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(6,40,20,0.33) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(3,26,12,0.2) 0%, transparent 70%),
    linear-gradient(180deg, rgba(1,6,3,0) 0%, #000000 100%);
  background-attachment : fixed;
}

::selection {
  background : var(--col-green-mid);
  color      : var(--col-void);
  text-shadow: none;
}

/* ── 3. CRT SCANLINES + OVERLAY ───────────────────────────── */
.crt-overlay {
  position         : fixed;
  inset            : 0;
  pointer-events   : none;
  z-index          : 9999;
  mix-blend-mode   : multiply;

  /* Finer scanlines for a more modern, less noisy feel */
  background       :
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.18) 2px,
      rgba(0, 0, 0, 0.18) 3px
    );

  /* Vignette shaped like a CRT tube */
  mask-image       : radial-gradient(ellipse 88% 82% at 50% 50%, white 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, white 60%, transparent 100%);

  animation        : flicker 9s infinite linear;
}

/* Faint RGB-mask edge tint via the overlay */
.crt-overlay::after {
  content    : "";
  position   : absolute;
  inset      : 0;
  background : linear-gradient(90deg, rgba(43,255,136,0.03) 0%, transparent 0.5%, transparent 99.5%, rgba(79,240,255,0.03) 100%);
}

@keyframes flicker {
  0%,  96%  { opacity: 1; }
  96.5%     { opacity: 0.93; }
  97%       { opacity: 1; }
  97.8%     { opacity: 0.88; }
  98.2%     { opacity: 1; }
  99%       { opacity: 0.95; }
  100%      { opacity: 1; }
}

/* ── 4. STATUS BAR (NAV) ──────────────────────────────────── */
.statusbar {
  position         : sticky;
  top              : 0;
  z-index          : 100;
  display          : flex;
  align-items      : center;
  justify-content  : space-between;
  padding          : 8px 18px;
  background       : linear-gradient(180deg, #030a05 0%, rgba(2,6,3,0) 100%), #020705;
  backdrop-filter  : blur(6px);
  border-bottom    : var(--border-w) solid var(--col-border-dim);
  box-shadow       : inset 0 1px 0 rgba(21,200,88,0.07), 0 6px 18px rgba(0,0,0,0.53);
  font-size        : 0.78rem;
  color            : var(--col-text-dim);
  letter-spacing   : 0.05em;
  gap              : 12px;
}

.statusbar__left,
.statusbar__right {
  display     : flex;
  align-items : center;
  gap         : 7px;
}

.statusbar__dot {
  display       : inline-block;
  width         : 11px;
  height        : 11px;
  border-radius : 50%;
  transition    : box-shadow 0.3s;
}
.statusbar__dot--red    { background: var(--col-red);    box-shadow: 0 0 6px var(--col-red),    inset 0 0 3px rgba(0,0,0,0.5); }
.statusbar__dot--yellow { background: var(--col-yellow); box-shadow: 0 0 6px var(--col-yellow), inset 0 0 3px rgba(0,0,0,0.5); }
.statusbar__dot--green  { background: var(--col-green);  box-shadow: 0 0 6px var(--col-green),  inset 0 0 3px rgba(0,0,0,0.5); }

.statusbar__path   { color: var(--col-green-dim); font-size: 0.72rem; }
.statusbar__center {
  color       : var(--col-green);
  font-size   : 0.86rem;
  font-weight : 500;
  letter-spacing: 0.3em;
  text-shadow : var(--glow-green-sm);
}
.statusbar__right  { color: var(--col-cyan-dim); font-variant-numeric: tabular-nums; }

/* ── 5. BENTO GRID ────────────────────────────────────────── */
.bento {
  display               : grid;
  grid-template-columns : repeat(var(--cols), 1fr);
  gap                   : var(--gap);
  padding               : var(--gap);
  max-width             : 1640px;
  margin                : 0 auto;

  grid-template-areas:
    "hero   hero   hero   hero   hero   hero   hero   hero   stats  stats  stats  stats"
    "proj   proj   proj   proj   proj   proj   proj   proj   about  about  about  about"
    "proj   proj   proj   proj   proj   proj   proj   proj   skills skills skills skills"
    "github github github github github github contact contact contact contact contact contact"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

/* ── 6. TERMINAL WINDOW CELLS ─────────────────────────────── */
.cell {
  position    : relative;
  background  : linear-gradient(180deg, var(--col-surface-2) 0%, var(--col-surface) 100%);
  border      : var(--border-w) solid var(--col-border-mut);
  border-radius: var(--radius);
  overflow    : hidden;
  box-shadow  :
    inset 0 1px 0 rgba(21,200,88,0.04),
    0 8px 24px rgba(0,0,0,0.4),
    0 0 0 1px rgba(0,0,0,0.27);
  transition : border-color 0.3s var(--ease-out),
               box-shadow 0.3s var(--ease-out),
               transform 0.3s var(--ease-out);
}

.cell::before {
  /* Top highlight line for a glassy terminal feel */
  content    : "";
  position   : absolute;
  left       : 0; right: 0; top: 0;
  height     : 1px;
  background : linear-gradient(90deg, transparent, rgba(43,255,136,0.2), transparent);
  opacity    : 0.6;
  pointer-events: none;
  z-index    : 1;
}

.cell:hover,
.cell:focus-within {
  border-color : var(--col-border);
  box-shadow   :
    inset 0 1px 0 rgba(43,255,136,0.1),
    0 12px 32px rgba(0,0,0,0.53),
    0 0 24px rgba(21,200,88,0.13);
}

/* Window chrome (title bar) */
.win-chrome {
  display          : flex;
  align-items      : center;
  gap              : 10px;
  padding          : 7px 12px;
  background       : linear-gradient(180deg, #02140a 0%, #010a05 100%);
  border-bottom    : var(--border-w) solid var(--col-border-dim);
  font-size        : 0.72rem;
  color            : var(--col-green-dim);
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
}

.win-btn {
  font-size   : 0.62rem;
  font-weight : 700;
  color       : var(--col-text-mute);
  flex-shrink : 0;
  letter-spacing: 0;
}
.win-btn--close { color: var(--col-red); }
.win-btn--min   { color: var(--col-yellow); }
.win-btn--max   { color: var(--col-green); }

.win-title {
  color       : var(--col-green-dim);
  font-size   : 0.7rem;
  overflow    : hidden;
  text-overflow: ellipsis;
  flex        : 1;
  opacity     : 0.85;
}

/* Grid area assignments */
.cell--hero    { grid-area: hero; }
.cell--stats   { grid-area: stats; }
.cell--projects{ grid-area: proj; }
.cell--about   { grid-area: about; }
.cell--github  { grid-area: github; }
.cell--skills  { grid-area: skills; }
.cell--contact { grid-area: contact; }
.cell--footer  { grid-area: footer; border: none; background: transparent; box-shadow: none; }
.cell--footer::before { display: none; }

/* ── 7. HERO SECTION ──────────────────────────────────────── */
.hero-body {
  padding    : 26px 28px 28px;
  display    : flex;
  flex-direction: column;
  gap        : 14px;
}

.ascii-logo {
  font-size   : clamp(0.32rem, 1.05vw, 0.82rem);
  color       : var(--col-green);
  text-shadow : var(--glow-green-sm);
  line-height : 1.18;
  overflow-x  : auto;
  white-space : pre;
  opacity     : 0.95;
  scrollbar-width : thin;
  scrollbar-color : var(--col-green-dim) transparent;
}

.hero-version {
  font-size     : 0.7rem;
  color         : var(--col-text-dim);
  letter-spacing: 0.14em;
}

/* ── 7b. INTERACTIVE TERMINAL ─────────────────────────────── */
.term {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  background     : linear-gradient(180deg, #020c04 0%, rgba(1,6,2,0) 100%);
  border         : 1px solid var(--col-border-mut);
  border-radius  : var(--radius-sm);
  padding        : 10px 12px;
  min-height     : 180px;
  max-height     : 320px;
  overflow-y     : auto;
  cursor         : text;
  box-shadow     : inset 0 1px 3px rgba(0,0,0,0.65);
  scrollbar-width: thin;
  scrollbar-color: var(--col-green-dim) transparent;
}

.term-output {
  display        : flex;
  flex-direction : column;
  gap            : 1px;
  font-size      : 0.82rem;
  line-height    : 1.55;
  color          : var(--col-text);
  white-space    : pre-wrap;
  word-break     : break-word;
}

.term-line                 { color: var(--col-text); }
.term-line--echo           { color: var(--col-text-bright); margin-top: 2px; }
.term-line--dim            { color: var(--col-text-mute); }
.term-line--accent         { color: var(--col-cyan); text-shadow: var(--glow-cyan-sm); }
.term-line--ok             { color: var(--col-green); text-shadow: var(--glow-text); }
.term-line--err            { color: var(--col-red); }
.term-line .term-cmd       { color: var(--col-green); font-weight: 500; }
.term-line .term-name      { color: var(--col-cyan); }
.term-line .term-perm      { color: var(--col-text-mute); }

/* Input line */
.term-input-line {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  font-size     : 0.85rem;
  padding-top   : 4px;
  cursor        : text;
  font-weight   : 500;
}

.term-prompt {
  color       : var(--col-green);
  text-shadow : var(--glow-green-sm);
  flex-shrink : 0;
  user-select : none;
}

.term-input-wrap {
  position   : relative;
  display    : flex;
  align-items: center;
  flex       : 1;
}

.term-input {
  flex        : 1;
  width       : 100%;
  background  : transparent;
  border      : none;
  outline     : none;
  color       : var(--col-text-bright);
  caret-color : transparent;   /* we draw our own block cursor */
  font-family : var(--font-mono);
  font-size   : 0.85rem;
  padding     : 2px 0;
}

.term-cursor {
  position      : absolute;
  left          : 0;
  color         : var(--col-green);
  text-shadow   : var(--glow-green-sm);
  pointer-events: none;
  animation     : blink 1.05s step-end infinite;
}

/* Keep the block cursor glued to the end of typed text */
.term-input-wrap:has(.term-input:not(:focus)) .term-cursor { opacity: 0; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── 8. STATS CELL ────────────────────────────────────────── */
.stats-body {
  padding : 16px 18px;
  display : flex;
  flex-direction: column;
  gap     : 10px;
}

.stat-row {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  font-size       : 0.78rem;
}

.stat-label  { color: var(--col-text-dim); letter-spacing: 0.09em; font-weight: 500; }
.stat-val--green { color: var(--col-green); text-shadow: var(--glow-text); font-variant-numeric: tabular-nums; }
.stat-val--cyan  { color: var(--col-cyan);  text-shadow: var(--glow-cyan-sm); font-variant-numeric: tabular-nums; }

.stat-val--blink {
  color      : var(--col-green);
  text-shadow: var(--glow-green-sm);
  animation  : pulseStatus 1.8s ease-in-out infinite;
}

@keyframes pulseStatus {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.stat-bar-wrap {
  display     : flex;
  align-items : center;
  gap         : 9px;
  font-size   : 0.72rem;
}

.stat-mini  { color: var(--col-text-dim); width: 30px; flex-shrink: 0; font-weight: 500; }
.stat-pct   { color: var(--col-green); width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.stat-pct.cyan { color: var(--col-cyan); }

.stat-bar {
  flex       : 1;
  height     : 7px;
  background : linear-gradient(180deg, #000c04 0%, #001808 100%);
  border     : 1px solid var(--col-border-mut);
  border-radius: var(--radius-sm);
  overflow   : hidden;
  box-shadow : inset 0 1px 2px rgba(0,0,0,0.65);
}

.stat-bar__fill {
  height     : 100%;
  width      : var(--pct, 0%);
  background : linear-gradient(90deg, var(--col-green-dim) 0%, var(--col-green) 100%);
  box-shadow : var(--glow-green-sm);
  border-radius: var(--radius-sm);
  animation  : barGrow 1.4s var(--ease-soft) forwards;
  transform  : scaleX(0);
  transform-origin: left;
}

.stat-bar__fill--cyan {
  background : linear-gradient(90deg, var(--col-cyan-dim) 0%, var(--col-cyan) 100%);
  box-shadow : var(--glow-cyan-sm);
}

@keyframes barGrow {
  to { transform: scaleX(1); }
}

.stat-divider {
  color      : var(--col-border-mut);
  font-size  : 0.72rem;
  overflow   : hidden;
  margin     : 2px 0;
}

/* ── 9. PROJECTS (ls -la) ────────────────────────────────── */
.ls-header {
  padding      : 7px 16px;
  font-size    : 0.68rem;
  color        : var(--col-text-mute);
  border-bottom: 1px solid var(--col-border-mut);
  letter-spacing: 0.02em;
}

.ls-list {
  list-style : none;
  padding    : 6px 0;
}

.ls-item {
  position   : relative;
  display    : flex;
  align-items: center;
  gap        : 14px;
  padding    : 9px 16px;
  font-size  : 0.79rem;
  cursor     : pointer;
  transition : background 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
  border-bottom: 1px solid #05140c;
}

.ls-item:last-child { border-bottom: none; }

.ls-item:hover,
.ls-item:focus {
  background : linear-gradient(90deg, rgba(6,36,20,0.53) 0%, transparent 100%);
  padding-left : 20px;
  outline    : none;
}

.ls-item:hover .ls-name,
.ls-item:focus .ls-name {
  color      : var(--col-cyan);
  text-shadow: var(--glow-cyan-sm);
}

.ls-perms { color: var(--col-text-mute); font-size: 0.71rem; flex-shrink: 0; }
.ls-size  { color: var(--col-cyan-dim); font-size: 0.71rem; width: 46px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ls-date  { color: var(--col-text-mute); font-size: 0.71rem; flex-shrink: 0; }
.ls-name  {
  color      : var(--col-green);
  font-size  : 0.82rem;
  font-weight: 500;
  transition : color 0.2s, text-shadow 0.2s, transform 0.2s;
}

/* Hover detail panel */
.ls-hover-panel {
  position   : absolute;
  left       : 0;
  right      : 0;
  top        : 100%;
  z-index    : 20;
  background : linear-gradient(180deg, #061410 0%, rgba(3,9,6,0) 100%), #04100a;
  border     : 1px solid var(--col-border);
  border-top : none;
  padding    : 12px 16px;
  font-size  : 0.75rem;
  pointer-events: none;
  opacity    : 0;
  transform  : translateY(-4px);
  transition : opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  box-shadow : 0 12px 24px rgba(0,0,0,0.67);
}

.ls-item:hover .ls-hover-panel,
.ls-item:focus .ls-hover-panel {
  opacity   : 1;
  transform : translateY(0);
}

.ls-hover-title  { color: var(--col-green); margin-bottom: 5px; font-weight: 700; }
.ls-hover-desc   { color: var(--col-text-bright); margin-bottom: 5px; line-height: 1.55; }
.ls-hover-tech   { color: var(--col-cyan); }
.ls-hover-status { color: var(--col-yellow); margin-top: 5px; font-size: 0.7rem; letter-spacing: 0.05em; }

/* ── 10. GITHUB SECTION ───────────────────────────────────── */
.gh-body {
  padding : 16px 18px;
  display : flex;
  flex-direction: column;
  gap     : 7px;
}

.gh-log       { font-size: 0.77rem; line-height: 1.55; }
.gh-log--warn { color: var(--col-yellow); }
.gh-log--info { color: var(--col-cyan-dim); }
.gh-log--err  { color: var(--col-red); }

.gh-tag { font-weight: 700; letter-spacing: 0.04em; }

.gh-coming-soon {
  margin-top  : 16px;
  text-align  : center;
  padding     : 22px 0;
  border      : 1px dashed var(--col-border-dim);
  border-radius: var(--radius-sm);
  background  : rgba(3,16,10,0.33);
}

.gh-cs-line {
  display    : block;
  font-size  : clamp(1.5rem, 4vw, 2.9rem);
  font-weight: 700;
  color      : var(--col-green);
  text-shadow: var(--glow-green);
  line-height: 1.15;
  letter-spacing: 0.22em;
}

.gh-cs-line--accent { color: var(--col-cyan); text-shadow: var(--glow-cyan); }

.gh-cs-sub {
  display    : block;
  font-size  : 0.72rem;
  color      : var(--col-text-dim);
  margin-top : 10px;
  letter-spacing: 0.07em;
}

/* Fake commit graph */
.commit-graph {
  margin-top : 16px;
}

.commit-row {
  display    : flex;
  gap        : 3px;
  flex-wrap  : wrap;
}

.cg-block {
  width  : 11px;
  height : 11px;
  border-radius: 2px;
  transition: transform 0.15s var(--ease-out);
}
.cg-block:hover { transform: scale(1.4); }

.cg-0 { background: #04140a; }
.cg-1 { background: #0a4015; }
.cg-2 { background: #117a26; }
.cg-3 { background: #19b03a; }
.cg-4 { background: var(--col-green); box-shadow: var(--glow-green-sm); }

.commit-legend {
  display     : flex;
  align-items : center;
  gap         : 4px;
  margin-top  : 8px;
  font-size   : 0.65rem;
  color       : var(--col-text-mute);
}
.commit-legend .cg-block { cursor: default; }
.commit-legend .cg-block:hover { transform: none; }

/* ── 11. ABOUT SECTION ────────────────────────────────────── */
.about-body {
  padding : 18px 20px;
  display : flex;
  flex-direction: column;
  gap     : 9px;
}

.about-line { font-size: 0.79rem; color: var(--col-text-bright); }
.about-key  { color: var(--col-green); font-weight: 500; }

.about-divider {
  color      : var(--col-border-mut);
  font-size  : 0.7rem;
  overflow   : hidden;
  margin     : 3px 0;
}

.about-tagline {
  color      : var(--col-cyan);
  font-size  : 0.82rem;
  font-style : italic;
  text-shadow: var(--glow-cyan-sm);
  line-height: 1.5;
}

/* ── 12. SKILLS CELL ──────────────────────────────────────── */
.skills-grid {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 9px;
  padding    : 16px;
}

.skill-tag {
  padding      : 5px 12px;
  border       : 1px solid var(--col-border-mut);
  border-radius: var(--radius-sm);
  background   : #05140c;
  font-size    : 0.74rem;
  color        : var(--col-green);
  cursor       : default;
  transition   : border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}

.skill-tag:hover {
  border-color : var(--col-green);
  box-shadow   : var(--glow-green-sm);
  transform    : translateY(-2px);
}

.skill-tag--cyan {
  color        : var(--col-cyan);
  border-color : var(--col-cyan-dim);
}

.skill-tag--cyan:hover {
  border-color : var(--col-cyan);
  box-shadow   : var(--glow-cyan-sm);
}

/* ── 13. CONTACT FORM ─────────────────────────────────────── */
.contact-body {
  padding : 16px 18px;
  display : flex;
  flex-direction: column;
  gap     : 13px;
}

.contact-log {
  background  : linear-gradient(180deg, #020c04 0%, rgba(1,6,2,0) 100%);
  border      : 1px solid var(--col-border-mut);
  border-radius: var(--radius-sm);
  padding     : 9px 13px;
  font-size   : 0.73rem;
  min-height  : 44px;
  max-height  : 116px;
  overflow-y  : auto;
  display     : flex;
  flex-direction: column;
  gap         : 3px;
  scrollbar-width : thin;
  scrollbar-color : var(--col-green-dim) transparent;
  box-shadow  : inset 0 1px 3px rgba(0,0,0,0.65);
}

.contact-log__line           { color: var(--col-text-dim); }
.contact-log__line--success  { color: var(--col-green); text-shadow: var(--glow-text); }
.contact-log__line--error    { color: var(--col-red); }
.contact-log__line--loading  { color: var(--col-cyan); animation: blink 0.85s step-end infinite; }

.contact-form { display: flex; flex-direction: column; gap: 11px; }

.form-field { display: flex; flex-direction: column; gap: 4px; }

.form-label {
  font-size  : 0.68rem;
  color      : var(--col-text-dim);
  letter-spacing: 0.07em;
  font-weight: 500;
}

.form-input-wrap {
  display    : flex;
  align-items: center;
  border     : 1px solid var(--col-border-mut);
  border-radius: var(--radius-sm);
  background : linear-gradient(180deg, #020c04 0%, rgba(1,6,2,0) 100%);
  transition : border-color 0.2s, box-shadow 0.2s;
}

.form-input-wrap:focus-within {
  border-color : var(--col-green);
  box-shadow   : 0 0 0 1px rgba(43,255,136,0.2), var(--glow-green-sm);
}

.form-input-wrap--textarea { align-items: flex-start; }

.form-prompt {
  padding    : 9px 8px 9px 11px;
  color      : var(--col-green);
  font-size  : 0.85rem;
  font-family: var(--font-mono);
  flex-shrink: 0;
  user-select: none;
}

.form-prompt--top { padding-top: 11px; }

.form-input {
  flex        : 1;
  background  : transparent;
  border      : none;
  outline     : none;
  color       : var(--col-text-bright);
  font-family : var(--font-mono);
  font-size   : 0.84rem;
  padding     : 9px 11px 9px 4px;
  caret-color : var(--col-green);
}

.form-textarea {
  resize      : vertical;
  min-height  : 76px;
  padding-top : 11px;
  line-height : 1.55;
}

.form-input::placeholder { color: var(--col-text-mute); opacity: 0.8; }

.form-submit {
  align-self   : flex-start;
  background   : transparent;
  border       : 1px solid var(--col-green);
  border-radius: var(--radius-sm);
  color        : var(--col-green);
  font-family  : var(--font-mono);
  font-weight  : 500;
  font-size    : 0.82rem;
  padding      : 9px 22px;
  cursor       : pointer;
  letter-spacing: 0.07em;
  transition   : background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s var(--ease-out);
}

.form-submit:hover,
.form-submit:focus {
  background   : #073018;
  box-shadow   : var(--glow-green-sm);
  outline      : none;
  transform    : translateY(-1px);
}
.form-submit:active { transform: translateY(0); }

.form-submit:disabled {
  opacity      : 0.5;
  cursor       : not-allowed;
  transform    : none;
}

/* ── 14. FOOTER ───────────────────────────────────────────── */
.footer-body {
  display          : flex;
  justify-content  : space-between;
  align-items      : center;
  padding          : 10px 6px;
  font-size        : 0.68rem;
  color            : var(--col-text-mute);
  flex-wrap        : wrap;
  gap              : 8px;
  border-top       : 1px solid var(--col-border-mut);
}

.footer-ping { color: var(--col-cyan); font-variant-numeric: tabular-nums; }
.footer-ip   { color: var(--col-green-dim); }

/* ── 14b. SPEED TEST ──────────────────────────────────────── */
.speedtest-area {
  display          : flex;
  flex-direction   : column;
  gap              : 8px;
}

.speedtest-btn {
  align-self       : flex-start;
  background       : transparent;
  border           : 1px solid var(--col-cyan-dim);
  border-radius    : var(--radius-sm);
  color            : var(--col-cyan);
  font-family      : var(--font-mono);
  font-weight      : 500;
  font-size        : 0.74rem;
  padding          : 6px 16px;
  cursor           : pointer;
  letter-spacing   : 0.06em;
  transition       : background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s var(--ease-out);
}

.speedtest-btn:hover,
.speedtest-btn:focus {
  background       : #042020;
  box-shadow       : var(--glow-cyan-sm);
  outline         : none;
  transform       : translateY(-1px);
}

.speedtest-btn:active { transform: translateY(0); }

.speedtest-btn:disabled {
  opacity          : 0.5;
  cursor           : not-allowed;
  transform        : none;
}

.speedtest-results {
  display          : flex;
  gap              : 12px;
}

.speedtest-metric {
  display          : flex;
  flex-direction   : column;
  gap              : 2px;
}

.speedtest-metric__label {
  font-size        : 0.62rem;
  color            : var(--col-text-mute);
  letter-spacing   : 0.08em;
  font-weight      : 500;
}

.speedtest-metric__val {
  font-size        : 0.82rem;
  color            : var(--col-cyan);
  font-variant-numeric: tabular-nums;
  text-shadow      : var(--glow-cyan-sm);
}

.speedtest-progress-wrap {
  display          : flex;
  align-items      : center;
  gap              : 8px;
}

.speedtest-progress-bar {
  flex             : 1;
  height           : 5px;
  background       : #001208;
  border           : 1px solid var(--col-border-mut);
  border-radius    : 2px;
  overflow         : hidden;
}

.speedtest-progress-fill {
  height           : 100%;
  width            : 0%;
  background       : linear-gradient(90deg, var(--col-cyan-dim), var(--col-cyan));
  box-shadow       : var(--glow-cyan-sm);
  transition       : width 0.3s var(--ease-out);
}

.speedtest-progress-label {
  font-size        : 0.62rem;
  color            : var(--col-text-mute);
  min-width        : 90px;
  text-align       : right;
}

/* ── 15. SCROLLBAR GLOBAL ─────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--col-void); }
::-webkit-scrollbar-thumb {
  background: var(--col-border-dim);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--col-green-dim); }

/* ── 16. BOOT SEQUENCE OVERLAY ──────────────────────────── */
.boot-overlay {
  position         : fixed;
  inset            : 0;
  z-index          : 10000;
  background       : #000000;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  transition       : opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  cursor           : pointer;
}

/* Hide site content while boot overlay is active */
body:not(:has(.boot-overlay--done)) .statusbar,
body:not(:has(.boot-overlay--done)) .bento {
  visibility : hidden;
}

.boot-overlay--done {
  opacity    : 0;
  transform  : scale(1.04);
  pointer-events: none;
}

.boot-screen {
  width     : 100%;
  max-width : 720px;
  padding   : 0 24px;
}

.boot-bios {
  font-size   : 0.82rem;
  color       : var(--col-text);
  line-height : 1.6;
  white-space : pre-wrap;
  word-break  : break-word;
  margin-bottom: 16px;
}

.boot-bios__line {
  opacity: 0;
  animation: biosLineIn 0.15s var(--ease-out) forwards;
}

.boot-bios__ok {
  color      : var(--col-green);
  font-weight: 700;
  text-shadow: var(--glow-green-sm);
}

@keyframes biosLineIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.boot-bar-track {
  width      : 100%;
  height     : 8px;
  background : linear-gradient(180deg, #000c04 0%, #001808 100%);
  border     : 1px solid var(--col-border-mut);
  border-radius: var(--radius-sm);
  overflow   : hidden;
  margin-bottom: 12px;
}

.boot-bar-fill {
  height     : 100%;
  width      : 0%;
  background : linear-gradient(90deg, var(--col-green-dim) 0%, var(--col-green) 100%);
  box-shadow : var(--glow-green-sm);
  border-radius: var(--radius-sm);
  transition : width 0.05s linear;
}

.boot-status {
  font-size   : 0.78rem;
  color       : var(--col-cyan);
  text-shadow : var(--glow-cyan-sm);
  margin-bottom: 20px;
  min-height  : 1.2em;
}

.boot-logo {
  font-size      : clamp(0.3rem, 0.9vw, 0.72rem);
  color         : var(--col-green);
  text-shadow   : var(--glow-green);
  line-height   : 1.18;
  overflow-x    : auto;
  white-space   : pre;
  opacity       : 0;
  transform     : scale(0.95);
  transition    : opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  margin-bottom : 16px;
}

.boot-logo--show {
  opacity  : 1;
  transform: scale(1);
}

.boot-skip {
  font-size      : 0.68rem;
  color          : var(--col-text-mute);
  letter-spacing : 0.06em;
  text-align     : center;
  animation      : skipPulse 2s ease-in-out infinite;
}

@keyframes skipPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── 17. PHOSPHOR THEME VARIANTS ───────────────────────────
   Switch with:  theme green | theme amber | theme cyan
   Applied via [data-theme="..."] on <body>.
   Defaults to green (no attribute needed).                  */
[data-theme="amber"] {
  --col-green      : #ffb000;
  --col-green-mid  : #cc8d00;
  --col-green-dim  : #8a5e00;
  --col-green-deep : #5c3f00;

  --col-text       : #ffcc66;
  --col-text-bright: #ffe0a0;
  --col-text-dim   : #8a6d33;
  --col-text-mute  : #5c4822;

  --glow-green     : 0 0 4px #ffb000cc, 0 0 12px #cc8d0066, 0 0 28px #cc8d0022;
  --glow-green-sm  : 0 0 3px #ffb000aa, 0 0 8px #cc8d0044;
  --glow-text      : 0 0 2px #ffb00066, 0 0 10px #cc8d0033;

  --col-border     : #7a5500;
  --col-border-dim : #3d2a00;
  --col-border-mut : #2a1e00;
}

[data-theme="cyan"] {
  --col-green      : #4ff0ff;
  --col-green-mid  : #00c8e0;
  --col-green-dim  : #008a9e;
  --col-green-deep : #005c6a;

  --col-text       : #80f0ff;
  --col-text-bright: #b0f8ff;
  --col-text-dim   : #4da8b8;
  --col-text-mute  : #2d6a78;

  --glow-green     : 0 0 4px #4ff0ffcc, 0 0 12px #00c8e066, 0 0 28px #00c8e022;
  --glow-green-sm  : 0 0 3px #4ff0ffaa, 0 0 8px #00c8e044;
  --glow-text      : 0 0 2px #4ff0ff66, 0 0 10px #00c8e033;

  --col-border     : #1a8a9e;
  --col-border-dim : #0a5a6a;
  --col-border-mut : #0e4455;
}

/* ── 18. RESPONSIVE BREAKPOINTS ───────────────────────────── */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .bento {
    grid-template-areas:
      "hero   hero   hero   hero   hero   hero   hero   hero   hero   hero   hero   hero"
      "stats  stats  stats  stats  stats  stats  about  about  about  about  about  about"
      "proj   proj   proj   proj   proj   proj   proj   proj   proj   proj   proj   proj"
      "skills skills skills skills skills skills github github github github github github"
      "contact contact contact contact contact contact contact contact contact contact contact contact"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }
}

/* Tablets */
@media (max-width: 768px) {
  :root { --gap: 12px; }

  .bento {
    grid-template-columns : 1fr;
    grid-template-areas:
      "hero"
      "stats"
      "proj"
      "about"
      "skills"
      "github"
      "contact"
      "footer";
  }

  .ascii-logo {
    font-size : 0.3rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root { --gap: 10px; }

  .ascii-logo { display: none; }

  .hero-body::before {
    content    : "// CODEVERSE v2.4.1";
    display    : block;
    font-size  : 1.5rem;
    font-weight: 700;
    color      : var(--col-green);
    text-shadow: var(--glow-green-sm);
    letter-spacing: 0.16em;
  }

  .ls-perms  { display: none; }
  .ls-size   { display: none; }

  .form-submit { width: 100%; }
}

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