/* ============================================================
 *  hackervoice — style.css   (v2: hacker desktop)
 *  matrix rain + tiling-wm chrome + vaporwave neon
 *  sections:
 *   0 font  1 tokens  2 base  3 background/crt  4 statusbar
 *   5 desktop icons  6 windows(wm)  7 terminal  8 dock
 *   9 launcher  10 toast  11 hint  12 responsive
 * ============================================================ */

/* ---------- 0. font ---------- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("jbmono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("jbmono-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

/* ---------- 1. design tokens ---------- */
:root {
  --bg:      #070810;
  --bg2:     #0b0d18;
  --win:     rgba(10, 13, 24, 0.86);
  --win-b:   #1d2540;
  --fg:      #cdd6ee;
  --dim:     #8b9bc0;
  --dimmer:  #7c89b0;   /* raised to meet 4.5:1 text contrast on the near-black background */

  --green:   #39ff14;
  --green-s: #86ffa3;
  --cyan:    #24e3f0;
  --magenta: #ff2e97;
  --purple:  #a855f7;
  --blue:    #5b8cff;
  --amber:   #ffbf3a;
  --red:     #ff4d6d;

  --grad: linear-gradient(90deg, var(--cyan), var(--magenta));
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bar-h: 30px;
}

/* ---------- 2. base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;                 /* the desktop is the viewport */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
kbd {
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--dimmer); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; color: var(--green-s);
}
::selection { background: var(--magenta); color: #fff; }

/* ---------- 3. background: matrix + grid + crt ---------- */
.matrix {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  opacity: 0.55;
}
/* faint synthwave horizon grid fading up from the bottom */
.grid-glow {
  position: fixed; left: 0; right: 0; bottom: 0; height: 42vh; z-index: 0;
  pointer-events: none; opacity: 0.28;
  background:
    linear-gradient(0deg, rgba(255,46,151,0.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(36,227,240,0.35) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  rgba(168,85,247,0.30) 0 1px, transparent 1px 46px);
  transform: perspective(320px) rotateX(70deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(0deg, #000 5%, transparent 85%);
          mask-image: linear-gradient(0deg, #000 5%, transparent 85%);
}
/* CRT: scanlines + vignette + gentle flicker */
.crt {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  animation: flicker 6s infinite steps(30);
}
@keyframes flicker { 0%,100%{opacity:.9} 48%{opacity:.86} 50%{opacity:1} 52%{opacity:.88} }
@media (prefers-reduced-motion: reduce) {
  .crt, .grid-glow { animation: none; }
  .matrix { opacity: 0.3; }
  .win { animation: none; }                 /* no window entrance zoom */
  .term .caret { animation: none; }         /* steady cursor, no blink */
  .dvd.corner { animation: none; }          /* no corner-hit pop */
}

/* ---------- 4. statusbar (top) ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 50;
  display: flex; align-items: stretch; justify-content: space-between;
  background: linear-gradient(180deg, #0c1020, #080a14);
  border-bottom: 1px solid var(--win-b);
  box-shadow: 0 1px 0 rgba(36,227,240,0.15), 0 6px 20px rgba(0,0,0,0.5);
  font-size: 12px; user-select: none;
}
.bar-left, .bar-right { display: flex; align-items: center; }
.bar-left { gap: 4px; padding-left: 6px; }
.bar-right { gap: 0; }
.tag {
  border: 0; background: transparent; color: var(--dim);
  padding: 0 9px; height: 100%; display: flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent; letter-spacing: .5px;
}
.tag span { color: var(--dimmer); font-size: 11px; }
.tag:hover { color: var(--fg); }
.tag.is-active {
  color: #061018; background: var(--green);
  border-bottom-color: var(--green-s);
}
.tag.is-active span { color: rgba(6,16,24,0.7); }
.bar-sep { width: 1px; height: 60%; background: var(--win-b); margin: 0 6px; align-self: center; }
.bar-title {
  color: var(--green-s); font-weight: 700; letter-spacing: .5px;
  text-shadow: 0 0 8px rgba(57,255,20,0.4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.bar-title::before { content: "❯ "; color: var(--cyan); }
.mod {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%;
  color: var(--dim); font-size: 11px; letter-spacing: .5px;
  border-left: 1px solid var(--win-b);
}
.mod b { color: var(--fg); font-weight: 700; }
.m-net b { color: var(--cyan); }
.m-cpu b { color: var(--magenta); }
.m-mem b { color: var(--purple); }
.m-clock b { color: var(--green-s); text-shadow: 0 0 8px rgba(57,255,20,0.4); }

/* ---------- 5. desktop + launcher icons ---------- */
.desktop {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 10;
  overflow: hidden;
}
.icons {
  position: absolute; top: 18px; left: 18px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, min-content);
  gap: 8px 12px; z-index: 11;
}
.icon {
  width: 104px; padding: 12px 4px 9px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; position: relative; transition: transform .1s, background .1s, border-color .1s;
}
.icon:hover, .icon:focus-visible {
  background: rgba(36,227,240,0.06); border-color: rgba(36,227,240,0.4);
  transform: translateY(-2px); outline: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 22px rgba(36,227,240,0.15);
}
.icon-glyph {
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px;
  border: 1px solid var(--win-b); border-radius: 12px;
  background: radial-gradient(120% 120% at 30% 20%, #131a2e, #0a0d18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.4);
  position: relative;
}
.icon:hover .icon-glyph { border-color: var(--cyan); box-shadow: 0 0 18px rgba(36,227,240,0.35); }
.icon-label {
  font-size: 12px; color: var(--fg); letter-spacing: 0; line-height: 1.2; width: 100%;
  text-align: center; word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;  /* reserve 2 lines so icons align in the grid */
}
.icon-dot {
  position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--bg); box-shadow: 0 0 8px currentColor;
}
.s-online  { color: var(--green); }  .s-online  .icon-dot,  .st-online  { background: var(--green); }
.s-beta    { color: var(--amber); }  .s-beta    .icon-dot,  .st-beta    { background: var(--amber); }
.s-soon    { color: var(--purple); } .s-soon    .icon-dot,  .st-soon    { background: var(--purple); }
.s-offline { color: var(--red); }    .s-offline .icon-dot,  .st-offline { background: var(--red); }
/* app icons get a subtly different tile; private-service icons a zone-colored dot */
.icon.kind-app .icon-glyph { border-color: rgba(36,227,240,0.35); background: radial-gradient(120% 120% at 30% 20%, #10202e, #0a0d18); }
.icon-dot.dz-friend { background: var(--cyan); color: var(--cyan); }
.icon-dot.dz-admin { background: var(--magenta); color: var(--magenta); }

/* ---------- 6. windows (the WM) ---------- */
.win {
  position: absolute; z-index: 20; min-width: 260px;
  background: var(--win); border: 1px solid var(--win-b); border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: winIn .13s ease-out;
}
@keyframes winIn { from { opacity: 0; transform: scale(.98) translateY(6px); } }
.win.is-focused { border-color: var(--cyan); box-shadow: 0 18px 60px rgba(0,0,0,0.7), 0 0 26px rgba(36,227,240,0.18); }
.win-bar {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  background: linear-gradient(180deg, #10141f, #0a0d16);
  border-bottom: 1px solid var(--win-b); cursor: grab; user-select: none;
}
.win-bar:active { cursor: grabbing; }
.win-accent { width: 8px; height: 8px; border-radius: 2px; background: var(--grad); flex: 0 0 auto; }
.win-title { flex: 1; font-size: 12px; color: var(--fg); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-title .wt-dim { color: var(--dim); }
.win-ctrls { display: flex; gap: 7px; align-items: center; }
/* 22x22 clickable target (WCAG) with the classic 12px dot drawn in the content box */
.win-ctrls button {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 5px; box-sizing: border-box;
  position: relative; cursor: pointer; background: var(--dimmer); background-clip: content-box;
}
.win-ctrls .c-close { background: var(--red); background-clip: content-box; }
.win-ctrls button:hover { filter: brightness(1.25); box-shadow: 0 0 8px currentColor; }
.win-body { padding: 14px; overflow: auto; max-height: 70vh; }
.win-body p { margin: 0 0 10px; }

/* info window (project details) */
.info-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.info-glyph { font-size: 34px; width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--win-b); border-radius: 12px; background: #0a0d18; }
.info-meta .info-name { font-size: 16px; font-weight: 700; color: #fff; }
.info-meta .info-status { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
.info-meta .info-status .d { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.info-desc { color: var(--dim); margin-bottom: 14px; }
.info-url { color: var(--green-s); font-size: 12px; word-break: break-all; margin-bottom: 14px; }
.info-url::before { content: "url: "; color: var(--dim); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); color: #05070d; font-weight: 700;
  border: 0; border-radius: 8px; padding: 9px 16px; letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(255,46,151,0.3);
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(36,227,240,0.4); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--win-b); box-shadow: none; }

/* ---------- 7. terminal ---------- */
.win.terminal .win-body { background: rgba(3,5,10,0.92); padding: 0; }
.term {
  padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: var(--green-s);
  white-space: pre-wrap; word-break: break-word;
  min-height: 400px;   /* fits neofetch + welcome.sh + prompt so the window doesn't grow line-by-line */
}
.term .ascii { color: var(--cyan); text-shadow: 0 0 10px rgba(36,227,240,0.4); display: block; }
.term .neofetch { display: flex; align-items: center; gap: 18px; margin: 6px 0 12px; flex-wrap: wrap; }
.term .nf-logo { color: var(--magenta); text-shadow: 0 0 12px rgba(255,46,151,0.4); white-space: pre; font-size: 13px; line-height: 1.15; }
.term .nf-info { margin: 0; }
.term .nf-info .k { color: var(--cyan); }
.term .nf-info .v { color: var(--fg); }
.term .nf-bar { margin-top: 6px; letter-spacing: 2px; }
.term .about { color: var(--dim); margin: 4px 0 12px; }
.term .line .p { color: var(--magenta); }        /* prompt $ */
.term .line .ok { color: var(--green); }
.term .caret { color: var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term .ascii b { font-weight: 700; }
.term .ascii i { font-style: italic; color: var(--green-s); }

/* interactive console */
.term-console { margin-top: 4px; }
.term-out { white-space: pre-wrap; word-break: break-word; }
.term-out.term-err { color: var(--red); }
.term-out.term-ok { color: var(--green); }
.term-out.term-hint { color: var(--dim); font-style: italic; }
.term-promptline { display: flex; align-items: baseline; gap: 8px; }
.term-ps1 { color: var(--magenta); white-space: nowrap; }
.term-cmd { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--green-s); font-family: inherit; font-size: inherit; padding: 0; caret-color: var(--green); }
.term-cmd::placeholder { color: var(--dimmer); }
.term-cmd-done { color: var(--green-s); }

/* dino runner + snake */
.dino-screen { margin: 6px 0 2px; color: var(--green-s); line-height: 1.15; font-size: 13px; text-shadow: 0 0 5px rgba(57,255,20,0.4); white-space: pre; overflow-x: auto; }
/* pipes.sh — 3D screensaver window */
.pipes-app { min-width: 300px; }
.pipes-canvas { display: block; border-radius: 4px; background: #05060c; box-shadow: inset 0 0 20px rgba(0,0,0,0.6); }
/* ls colors */
/* ls coloring (dircolors-style): green=executable, cyan=directory, dim=comment, magenta=decorative */
.term-out .fx { color: var(--green); font-weight: 700; }
.term-out .fd { color: var(--cyan); font-weight: 700; }
.term-out .fh { color: var(--dim); }
.term-out .fs { color: var(--magenta); }

/* ---------- 7b. dvd logo + matrix boost + svc command chip ---------- */
.dvd {
  position: fixed; top: 0; left: 0; z-index: 3; pointer-events: none; opacity: .85;
  color: #39ff14; will-change: transform; filter: drop-shadow(0 0 14px currentColor);
  display: flex; flex-direction: column; align-items: center;
  font-family: "Arial Black", Impact, sans-serif; font-style: italic; user-select: none;
}
.dvd-word { position: relative; font-size: 42px; font-weight: 900; letter-spacing: -3px; line-height: .8; color: currentColor; }
.dvd-word::after {   /* the swoosh ellipse through the letters */
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 17px;
  transform: translateY(-50%) skewX(-12deg); border: 3px solid currentColor; border-radius: 50%;
}
.dvd-sub { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: 6px; font-style: normal; color: #05070d; background: currentColor; padding: 0 4px 0 8px; border-radius: 3px; }
.dvd.corner { animation: dvdpop .7s ease; }
@keyframes dvdpop { 0%, 100% { filter: drop-shadow(0 0 14px currentColor); } 40% { filter: drop-shadow(0 0 30px currentColor) brightness(1.6) saturate(1.4); } }

.matrix.matrix-boost { opacity: 1; filter: brightness(1.7) saturate(1.3); transition: opacity .4s, filter .4s; }

.svc-cmd { font-size: 10px; color: var(--green-s); background: rgba(57,255,20,0.1); border: 1px solid rgba(57,255,20,0.3); border-radius: 4px; padding: 0 5px; font-family: var(--mono); }

/* ---------- 8. dock ---------- */
.dock {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 55;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: rgba(10,13,24,0.7); border: 1px solid var(--win-b); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0,0,0,0.55); max-width: calc(100vw - 24px);
}
.dock-btn {
  border: 0; background: transparent; border-radius: 10px; padding: 6px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 46px;
  transition: background .1s, transform .1s;
}
.dock-btn:hover { background: rgba(36,227,240,0.1); transform: translateY(-2px); }
.dock-btn .di { font-size: 18px; line-height: 1; color: var(--green-s); }
.dock-btn .dl { font-size: 10px; color: var(--dim); letter-spacing: .3px; }
.dock-btn[data-action="admin"] .di { color: var(--red); }
.dock-sep { width: 1px; height: 26px; background: var(--win-b); margin: 0 2px; }

/* ---------- 9. command launcher (rofi/dmenu style) ---------- */
.launcher {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center;
  padding-top: 16vh; background: rgba(4,5,10,0.55); backdrop-filter: blur(3px);
}
.launcher[hidden] { display: none; }
.launcher-box {
  width: min(560px, 92vw); background: rgba(9,12,22,0.97);
  border: 1px solid var(--cyan); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 30px rgba(36,227,240,0.2);
}
.launcher-prompt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--win-b); }
.lp-sign { color: var(--magenta); font-size: 18px; }
#launcher-input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg);
  font-family: var(--mono); font-size: 16px;
}
.launcher-list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow: auto; }
.launcher-list li {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.launcher-list li .li-glyph { font-size: 18px; width: 24px; text-align: center; }
.launcher-list li .li-name { color: var(--fg); font-weight: 700; }
.launcher-list li .li-type { margin-left: auto; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.launcher-list li.sel { background: linear-gradient(90deg, rgba(36,227,240,0.16), rgba(255,46,151,0.12)); }
.launcher-list li.sel::before { content: "❯"; color: var(--cyan); margin-right: -4px; }
.launcher-list .empty { color: var(--dim); padding: 12px; }

/* ---------- 10. toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 80;
  background: rgba(10,13,24,0.96); border: 1px solid var(--magenta); color: var(--fg);
  padding: 9px 16px; border-radius: 8px; font-size: 13px; max-width: 90vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,46,151,0.25);
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
}
.toast::before { content: "⚠ "; color: var(--magenta); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 11. hint ---------- */
.hint {
  position: fixed; right: 14px; bottom: 16px; z-index: 40;
  color: var(--dimmer); font-size: 11px; letter-spacing: .3px; max-width: 46vw; text-align: right;
}
.hint kbd { color: var(--dim); }

/* ---------- 11b. auth: login + zones + health + accounts ---------- */
/* generic status dot */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #666; box-shadow: 0 0 8px currentColor; vertical-align: middle; }
.dot.st-online { background: var(--green); color: var(--green); }
.dot.st-beta { background: var(--amber); color: var(--amber); }
.dot.st-soon { background: var(--purple); color: var(--purple); }
.dot.st-offline { background: var(--red); color: var(--red); }

/* login form */
.login-intro { margin: 0 0 12px; color: var(--dim); }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.fld { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); }
.fld input {
  flex: 1; background: #05070d; border: 1px solid var(--win-b); border-radius: 6px;
  color: var(--fg); font-family: var(--mono); font-size: 14px; padding: 8px 10px; outline: none;
}
.fld input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(36,227,240,0.18); }
.login-msg { min-height: 16px; font-size: 12px; color: var(--dim); }
.login-msg.err { color: var(--red); }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* zone window */
.zone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.zone-who { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; }
.zone-role {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #05070d;
  background: var(--grad); padding: 1px 7px; border-radius: 999px; font-weight: 700;
}
.zone-sec { margin-top: 14px; }
.zone-sec h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--dim); border-bottom: 1px solid var(--win-b); padding-bottom: 5px;
}
.zone-refresh { text-transform: none; letter-spacing: 0; color: var(--dimmer); font-weight: 400; }
.zone-empty { color: var(--dimmer); font-size: 12px; font-style: italic; }

/* private links */
.zone-links { display: flex; flex-direction: column; gap: 6px; }
.zone-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  background: #0b0e18; border: 1px solid var(--win-b); text-decoration: none;
}
.zone-link:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(36,227,240,0.2); }
.zl-icon { font-size: 18px; width: 22px; text-align: center; }
.zl-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.zl-label { color: #fff; font-weight: 700; font-size: 13px; }
.zl-desc { color: var(--dim); font-size: 11px; }
.zl-zone { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--win-b); color: var(--dim); }
.zl-zone.z-admin { color: var(--magenta); border-color: rgba(255,46,151,0.4); }
.zl-zone.z-friend { color: var(--cyan); border-color: rgba(36,227,240,0.4); }
.zl-zone.z-public { color: var(--green); border-color: rgba(57,255,20,0.4); }

/* health rows */
.zone-health { display: flex; flex-direction: column; gap: 4px; }
.health-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; background: #0b0e18; }
.hr-name { flex: 1; color: var(--fg); font-size: 13px; }
.hr-status { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.hr-meta { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }

/* accounts */
.user-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; background: #0b0e18; }
.ur-role { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--win-b); }
.ur-role.r-admin { color: var(--magenta); border-color: rgba(255,46,151,0.45); }
.ur-role.r-friend { color: var(--cyan); border-color: rgba(36,227,240,0.45); }
.ur-role.r-public { color: var(--green); border-color: rgba(57,255,20,0.45); }
.ur-name { flex: 1; color: var(--fg); font-size: 13px; }
.ur-you { color: var(--dimmer); font-size: 10px; }
.ur-del { border: 0; background: transparent; color: var(--dim); font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.ur-del:hover:not(.ur-lock) { color: var(--red); background: rgba(255,77,109,0.12); }
.ur-lock { cursor: default; color: var(--dimmer); }
.user-add { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.user-add input, .user-add select {
  background: #05070d; border: 1px solid var(--win-b); border-radius: 6px; color: var(--fg);
  font-family: var(--mono); font-size: 12px; padding: 6px 8px; outline: none;
}
.user-add input[name="u"] { flex: 1; min-width: 90px; }
.user-add input[name="p"] { flex: 1; min-width: 90px; }
.user-add input:focus, .user-add select:focus { border-color: var(--cyan); }
.user-msg { min-height: 14px; font-size: 11px; color: var(--dim); }
.user-msg.err { color: var(--red); }

/* ---------- 11c. service management ---------- */
.svc-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.svc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: #0b0e18; }
.svc-ic { font-size: 16px; width: 22px; text-align: center; }
.svc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-name { color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.svc-mon { color: var(--green); font-size: 9px; }
.svc-url { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-edit { border: 0; background: transparent; color: var(--dim); font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.svc-edit:hover { color: var(--cyan); background: rgba(36,227,240,0.12); }
.svc-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #05070d; border: 1px solid var(--win-b); border-radius: 8px; }
.svc-form-row { display: flex; gap: 6px; }
.svc-form input, .svc-form select {
  background: #0b0e18; border: 1px solid var(--win-b); border-radius: 6px; color: var(--fg);
  font-family: var(--mono); font-size: 12px; padding: 7px 8px; outline: none; min-width: 0;
}
.svc-form input:focus, .svc-form select:focus { border-color: var(--cyan); }
.svc-in-icon { width: 46px; text-align: center; flex: 0 0 auto; }
.svc-in-name { flex: 1; }
.svc-form-row select { flex: 0 0 auto; }
.svc-in-wide { width: 100%; }
.svc-form-actions { display: flex; align-items: center; gap: 8px; }
.svc-msg { margin: 0; }

/* ---------- 11d. file browser ---------- */
.files-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.files-tab {
  border: 1px solid var(--win-b); background: #0b0e18; color: var(--dim);
  border-radius: 999px; padding: 4px 14px; font-size: 12px; letter-spacing: .5px;
}
.files-tab:hover { color: var(--fg); border-color: var(--cyan); }
.files-tab.on { color: #05070d; background: var(--grad); border-color: transparent; font-weight: 700; }
.files-hint { color: var(--dimmer); font-size: 11px; font-style: italic; margin-left: auto; }
.files-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.crumb { border: 0; background: transparent; color: var(--cyan); padding: 2px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.crumb:hover { background: rgba(36,227,240,0.12); }
.crumb-sep { color: var(--dimmer); }
.files-list { display: flex; flex-direction: column; gap: 3px; }
.file-row { display: flex; align-items: center; gap: 4px; background: #0b0e18; border: 1px solid transparent; border-radius: 6px; }
.file-row:hover { border-color: var(--win-b); }
.file-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: 0; padding: 8px 10px; border-radius: 6px;
}
.file-open:hover { background: rgba(36,227,240,0.08); }
.is-file .file-open:hover { background: rgba(57,255,20,0.08); }
.file-copy { background: transparent; border: 0; color: var(--dim); font-size: 14px; padding: 6px 10px; border-radius: 6px; flex: 0 0 auto; }
.file-copy:hover { color: var(--cyan); background: rgba(36,227,240,0.12); }
.file-ic { font-size: 16px; width: 20px; text-align: center; flex: 0 0 auto; }
.file-name { flex: 1; color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 11e. health widget (right-side desktop dashboard) ---------- */
.health-widget {
  position: absolute; top: 18px; right: 18px; z-index: 12; width: 248px;
  background: rgba(9,12,22,0.55); border: 1px solid var(--win-b); border-radius: 12px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 12px 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(57,255,20,0.04);
  font-size: 12px;
}
.health-widget[hidden] { display: none; }
.hw-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green-s);
  text-shadow: 0 0 8px rgba(57,255,20,0.4); margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px;
}
.hw-when { margin-left: auto; color: var(--dimmer); letter-spacing: 0; text-transform: none; font-size: 10px; }
.hw-list { display: flex; flex-direction: column; gap: 7px; }
.hw-row { display: flex; align-items: center; gap: 8px; }
.hw-name { flex: 1; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-lat { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--dim); }
.hw-lat.s-online { color: var(--green); } .hw-lat.s-offline { color: var(--red); } .hw-lat.s-beta { color: var(--amber); }
.hw-empty { color: var(--dimmer); font-style: italic; }

/* ---------- 11f. app panes + preview + dock user ---------- */
.app-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); border-bottom: 1px solid var(--win-b); padding-bottom: 6px; margin-bottom: 10px; }
#dock-session { display: inline-flex; align-items: center; gap: 4px; }   /* keep chip + logout on one centered row */
.dock-user { display: inline-flex; align-items: center; gap: 7px; padding: 0 6px 0 10px; font-size: 12px; color: var(--fg); white-space: nowrap; }
.dock-user b { color: #fff; }
.du-role { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--win-b); }
.du-role.r-admin { color: var(--magenta); border-color: rgba(255,46,151,0.4); }
.du-role.r-friend { color: var(--cyan); border-color: rgba(36,227,240,0.4); }
.preview-media { background: #05070d; border: 1px solid var(--win-b); border-radius: 8px; padding: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; max-height: 60vh; overflow: auto; }
.preview-img, .preview-vid { max-width: 100%; max-height: 56vh; border-radius: 4px; }
.preview-frame { width: 100%; height: 56vh; border: 0; background: #fff; border-radius: 4px; }
.preview-audio { padding: 24px 12px; }
.preview-audio audio { width: 100%; }
.preview-text { margin: 0 0 10px; background: #05070d; border: 1px solid var(--win-b); border-radius: 8px; padding: 12px; max-height: 56vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; color: var(--green-s); }
.preview-none { color: var(--dim); padding: 28px 16px; text-align: center; background: #05070d; border: 1px solid var(--win-b); border-radius: 8px; margin-bottom: 10px; }
.preview-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- 11g. "hacking in" easter egg ---------- */
.hack-overlay {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden;
  background: rgba(0, 8, 2, 0.86); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.hack-overlay::before {   /* CRT scanlines over the whole thing */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}
.hack-overlay.flash { animation: hv-flash .45s ease-out; }
@keyframes hv-flash { 0% { background: rgba(190,255,190,.92); } 100% { background: rgba(0,8,2,0.86); } }
.hack-overlay.fade { opacity: 0; transition: opacity .8s ease; }
.hack-log {
  position: absolute; left: 6%; right: 6%; top: 9%; margin: 0; max-height: 74vh; overflow: hidden;
  color: var(--green); font-size: clamp(11px, 1.7vw, 16px); line-height: 1.5;
  text-shadow: 0 0 8px rgba(57,255,20,.6); white-space: pre-wrap; word-break: break-word;
}
.hack-log .hl { color: #04120a; background: var(--green); padding: 0 6px; font-weight: 700; box-shadow: 0 0 22px var(--green); }
.hack-in {
  position: relative; font-family: "Arial Black", Impact, sans-serif; font-weight: 900; font-style: italic;
  font-size: clamp(52px, 15vw, 210px); letter-spacing: -5px; line-height: .85; color: #fff; text-align: center;
  text-shadow: 0 0 11px rgba(57,255,20,.55), 0 0 24px rgba(36,227,240,.35), 6px 6px 0 var(--magenta);
  -webkit-text-stroke: 3px var(--green);
  display: inline-flex; gap: .26em;
}
.hw { display: inline-block; opacity: 0; will-change: transform; }
.hw1.show { animation: hv-slam .5s cubic-bezier(.18,1.5,.4,1) forwards; }        /* "I'M" rises */
.hw2.show { animation: hv-slam-hard .5s cubic-bezier(.14,1.7,.4,1) forwards; }    /* "IN" lands hard */
@keyframes hv-slam {
  0% { opacity: 0; transform: scale(3) rotate(-7deg); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.92) rotate(3deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes hv-slam-hard {
  0% { opacity: 0; transform: scale(4.2) rotate(6deg); filter: blur(9px); }
  55% { opacity: 1; transform: scale(.84) rotate(-4deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hack-climax { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hack-skip { position: absolute; right: 16px; bottom: 14px; color: rgba(120,160,130,.5); font-size: 12px; letter-spacing: .5px; }

/* hackerman (already wearing shades) pops in at the climax */
.hackerman-wrap { position: relative; width: clamp(150px, 26vw, 300px); }
.hackerman { display: block; width: 100%; height: auto; opacity: 0; transform: scale(.55); filter: drop-shadow(0 0 20px rgba(57,255,20,.35)); }
.hackerman.in { animation: hv-hman .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes hv-hman { to { opacity: 1; transform: scale(1); } }

/* 😎 a second pair of sunglasses descends and lands over his face */
.shades {
  position: absolute; left: 50%; top: 41%; z-index: 2;
  display: flex; align-items: flex-start; justify-content: center;
  transform: translate(-50%, calc(-50% - 150vh)) rotate(-5deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.6));
}
.shades.drop { animation: hv-shades 1.2s cubic-bezier(.3,1.22,.5,1) .5s forwards; }
@keyframes hv-shades {
  0% { transform: translate(-50%, calc(-50% - 150vh)) rotate(-5deg); }
  74% { transform: translate(-50%, calc(-50% + 12px)) rotate(4deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.lens {
  width: clamp(26px, 6vw, 72px); height: clamp(18px, 4vw, 48px);
  background: linear-gradient(160deg, #0b0b0b 38%, #16281d 56%, #060606 76%);
  border: 3px solid #040404; border-radius: 8px 8px 13px 13px;
  box-shadow: 0 7px 16px rgba(0,0,0,.7), inset 0 0 20px rgba(0,255,120,.16);
  position: relative; overflow: hidden;
}
.lens::after {   /* static glossy corner */
  content: ""; position: absolute; top: 12%; left: 12%; width: 45%; height: 32%;
  background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 70%);
  border-radius: 50%; transform: rotate(-18deg);
}
.lens::before {   /* the diagonal shine wave that sweeps across on impact */
  content: ""; position: absolute; top: -30%; left: -90%; width: 60%; height: 160%;
  background: linear-gradient(108deg, transparent 15%, rgba(255,255,255,.92) 50%, transparent 85%);
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
}
.shades.landed .lens::before { animation: hv-shine .6s ease-out forwards; }
.shades.landed .lens:last-child::before { animation-delay: .12s; }   /* wave crosses left lens, then right */
@keyframes hv-shine {
  0% { opacity: 0; transform: translateX(0) skewX(-20deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(360%) skewX(-20deg); }
}
.bridge { width: clamp(8px, 2vw, 24px); height: clamp(4px, 1vw, 10px); background: #040404; border-radius: 4px; margin-top: clamp(4px, 1.1vw, 13px); }

/* full-screen shake (applied to <body>) */
.shake { animation: hv-shake .16s infinite steps(2); }
@keyframes hv-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-4px,3px); } 50% { transform: translate(4px,-3px); } 75% { transform: translate(-3px,-4px); } }
.shake-hard { animation: hv-shake-hard .5s ease-out; }
@keyframes hv-shake-hard {
  0% { transform: translate(0,0); } 12% { transform: translate(-16px,11px); } 26% { transform: translate(15px,-11px); }
  40% { transform: translate(-13px,-9px); } 55% { transform: translate(11px,9px); } 72% { transform: translate(-7px,5px); } 100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .shake, .shake-hard { animation: none; }
  .hw { opacity: 1; }
  .hw1.show, .hw2.show { animation: none; opacity: 1; transform: none; }
  .shades { transform: translate(-50%, -50%) rotate(0); }
  .shades.drop, .shades.landed .lens::before { animation: none; }
  .hackerman { opacity: 1; transform: none; }
  .hackerman.in { animation: none; }
}

/* ---------- 12. responsive ---------- */
/* windows never exceed the viewport; scale their scroll area down as height shrinks */
.win { max-width: calc(100vw - 12px); }
.win-body { max-height: 72vh; }

/* fewer icon rows when the desktop is short (landscape phones / small windows) */
@media (max-height: 760px) { .icons { grid-template-rows: repeat(5, min-content); } }
@media (max-height: 620px) { .icons { grid-template-rows: repeat(4, min-content); } }

/* tablets / smaller desktop windows */
@media (max-width: 1024px) {
  .win-body { max-height: 68vh; }
}
@media (max-width: 900px) {
  .health-widget { display: none; }   /* the floating right widget doesn't fit; hidden on small screens */
}

/* narrow: switch icons to a wrapping row grid, trim the statusline + dock */
@media (max-width: 720px) {
  .icons {
    grid-auto-flow: row; grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, 84px);
    top: 12px; left: 12px; right: 12px; bottom: 84px; gap: 8px 6px;
    overflow-y: auto;                        /* many icons scroll instead of hiding behind the dock */
    -webkit-overflow-scrolling: touch;
  }
  .icon { width: 84px; }
  .mod.m-net, .mod.m-mem { display: none; }
  .hint { display: none; }
  .bar-title { max-width: 38vw; }
  .win-body { max-height: 62vh; padding: 12px; }
  .dock { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 4px; padding: 5px 6px; }
  .dock-btn { min-width: 40px; padding: 5px 7px; }
  .dock-btn .di { font-size: 16px; }
  .dock-sep { height: 22px; }
  .term { font-size: 13px; }
}

/* phones */
@media (max-width: 560px) {
  body { font-size: 13px; }
  .tag span { display: none; }             /* keep only the workspace numbers */
  .tag { padding: 0 8px; }
  .bar-title { max-width: 30vw; }
  .term { font-size: 12.5px; }
  .nf-logo { font-size: 11px; }
  .neofetch { gap: 12px; }
  .dino-screen { font-size: 11px; }
  .dock-user { max-width: 42vw; padding: 0 4px 0 8px; }
  .dock-user b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 460px) {
  .mod.m-cpu { display: none; }            /* clock only on the right */
  .dock { max-width: calc(100vw - 12px); overflow-x: auto; }
  .dock .dl { display: none; }             /* dock icons only, saves width */
  .dock-btn { min-width: 32px; padding: 5px; }
  .icons { grid-template-columns: repeat(auto-fill, 76px); }
  .icon { width: 76px; padding: 10px 3px 8px; }
  .icon-glyph { width: 46px; height: 46px; font-size: 22px; }
  .du-role { display: none; }              /* just the name in the dock */
}