@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --green: #00ff41; --green-dim: #00aa2a; --green-faint: #002a0a;
  --amber: #ffb000; --amber-dim: #aa7300; --red: #ff3131;
  --cyan: #00ffff; --magenta: #ff00ff; --bg: #020c04;
}

body.dark-mode {
  --green: #ff3366; --green-dim: #aa1144; --green-faint: #2a0014;
  --amber: #ff6600; --cyan: #ff00aa; --bg: #0a0204;
}

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

body { background:var(--bg); color:var(--green); font-family:'Share Tech Mono',monospace; min-height:100vh; overflow-x:hidden; }

#matrixCanvas { position:fixed; top:0; left:0; width:100%; height:100%; opacity:0.12; pointer-events:none; z-index:1; }

body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,255,65,0.025) 3px,rgba(0,255,65,0.025) 4px); pointer-events:none; z-index:9999; }
body.dark-mode::before { background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(255,51,102,0.025) 3px,rgba(255,51,102,0.025) 4px); }
body::after { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.92) 100%); pointer-events:none; z-index:9998; }

@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes flicker { 0%,97%,100%{opacity:1} 98%{opacity:0.8} 99%{opacity:0.95} }
@keyframes glitch {
  0%,88%,100%{transform:skewX(0);text-shadow:0 0 20px var(--green),0 0 40px var(--green)}
  90%{transform:skewX(-3deg);text-shadow:4px 0 12px var(--red),-4px 0 12px var(--amber)}
  92%{transform:skewX(2deg) translateX(2px);text-shadow:-4px 0 12px var(--cyan),4px 0 12px var(--amber)}
  94%{transform:skewX(0);text-shadow:0 0 20px var(--green),0 0 40px var(--green)}
}
@keyframes textCorrupt { 0%,80%,100%{filter:none} 85%{filter:hue-rotate(90deg) blur(1px)} 90%{filter:hue-rotate(-45deg)} 95%{filter:none} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scanDown { 0%{transform:translateY(-100vh)} 100%{transform:translateY(100vh)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spinRev { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 5px var(--green),0 0 10px var(--green)} 50%{box-shadow:0 0 15px var(--green),0 0 35px var(--green)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes windowIn { from{opacity:0;transform:scale(0.92) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes notifSlide { from{opacity:0;transform:translateX(120%)} to{opacity:1;transform:translateX(0)} }
@keyframes nodePulse { 0%,100%{r:6;opacity:0.6} 50%{r:9;opacity:1} }
@keyframes packetFlow { 0%{stroke-dashoffset:100;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes scoreBlip { 0%{opacity:0;transform:translateY(0)} 10%{opacity:1} 100%{opacity:0;transform:translateY(-40px)} }
@keyframes bootGlow { 0%{text-shadow:0 0 5px var(--green)} 100%{text-shadow:0 0 25px var(--green),0 0 45px var(--green)} }
@keyframes radioStatic { 0%,100%{opacity:0.3} 25%{opacity:0.7} 50%{opacity:0.2} 75%{opacity:0.6} }
@keyframes barGrow { from{height:0} to{height:var(--h)} }
@keyframes backdoorIn { 0%{opacity:0;transform:scale(1.3) rotate(-2deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes corruptionStripe {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(200px); }
}

.scan-beam { position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,var(--green),transparent); opacity:0.3; animation:scanDown 5s linear infinite; z-index:9997; }

/* BOOT */
#bootScreen { position:fixed; inset:0; background:#000; z-index:10000; display:flex; flex-direction:column; padding:40px 60px; font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--green); letter-spacing:1px; line-height:1.7; overflow:hidden; }
.boot-line { opacity:0; animation:slideUp 0.1s ease both; }
.boot-line.ok { color:var(--green); } .boot-line.warn { color:var(--amber); } .boot-line.err { color:var(--red); } .boot-line.dim { color:var(--green-dim); }
.boot-line.big { font-family:'VT323',monospace; font-size:48px; letter-spacing:8px; margin:20px 0 10px; color:var(--green); animation:bootGlow 1s ease infinite alternate; }
.boot-cursor { display:inline-block; width:10px; height:14px; background:var(--green); animation:blink 0.8s step-end infinite; vertical-align:middle; margin-left:4px; }

/* LOGIN */
#loginScreen { display:none; min-height:100vh; align-items:center; justify-content:center; animation:flicker 9s infinite; position:relative; z-index:5; }
.login-wrap { width:520px; max-width:96vw; }
.logo-block { text-align:center; margin-bottom:28px; animation:slideUp 0.5s ease both; }
.logo-text { font-family:'VT323',monospace; font-size:82px; line-height:1; color:var(--green); text-shadow:0 0 20px var(--green),0 0 40px var(--green); animation:glitch 7s infinite, textCorrupt 13s infinite; letter-spacing:10px; cursor:pointer; user-select:none; }
.logo-text span { color:var(--amber); text-shadow:0 0 20px var(--amber),0 0 40px var(--amber); }
.logo-sub { font-size:10px; color:var(--green-dim); letter-spacing:4px; margin-top:4px; }
.logo-marquee { margin-top:8px; font-size:9px; color:var(--green-dim); letter-spacing:3px; white-space:nowrap; overflow:hidden; }

.login-panel { border:1px solid var(--green-dim); padding:30px; position:relative; background:rgba(0,255,65,0.02); box-shadow:0 0 30px rgba(0,255,65,0.08), inset 0 0 30px rgba(0,255,65,0.02); animation:slideUp 0.5s 0.1s ease both; opacity:0; }
.corner { position:absolute; width:14px; height:14px; border-color:var(--green); border-style:solid; }
.corner.tl{top:-1px;left:-1px;border-width:2px 0 0 2px} .corner.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.corner.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px} .corner.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}

.panel-hdr { font-size:11px; letter-spacing:3px; color:var(--green-dim); border-bottom:1px solid var(--green-faint); padding-bottom:12px; margin-bottom:22px; display:flex; justify-content:space-between; }

.node-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.node-btn { background:transparent; border:1px solid var(--green-faint); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:11px; padding:8px 6px; cursor:pointer; transition:all 0.15s; text-align:left; letter-spacing:1px; position:relative; }
.node-btn:hover { border-color:var(--green); color:var(--green); background:rgba(0,255,65,0.04); }
.node-btn.active { border-color:var(--green); color:var(--bg); background:var(--green); }
.node-btn[data-node="DARKDINGUS"] { color:var(--red); border-color:rgba(255,49,49,0.2); }
.node-btn[data-node="DARKDINGUS"]:hover { border-color:var(--red); background:rgba(255,49,49,0.05); }
.node-btn[data-node="DARKDINGUS"].active { background:var(--red); color:#000; border-color:var(--red); }
.node-ping { display:block; font-size:9px; margin-top:2px; }
.node-btn.active .node-ping { color:var(--bg); }

.field-lbl { font-size:10px; letter-spacing:3px; color:var(--green-dim); display:block; margin-bottom:6px; }
.field-in { width:100%; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:15px; padding:10px 14px; outline:none; transition:all 0.15s; letter-spacing:3px; margin-bottom:14px; }
.field-in:focus { border-color:var(--green); box-shadow:0 0 12px rgba(0,255,65,0.2); background:rgba(0,255,65,0.05); }
.field-in::placeholder { color:rgba(0,255,65,0.2); letter-spacing:1px; }
.field-in.shake { animation:shake 0.4s ease; border-color:var(--red) !important; box-shadow:0 0 15px rgba(255,49,49,0.4) !important; }

.err-msg { font-size:11px; color:var(--red); letter-spacing:2px; min-height:18px; margin-bottom:12px; text-align:center; opacity:0; transition:opacity 0.2s; }
.err-msg.show { opacity:1; }
.hint-msg { font-size:9px; color:var(--green-dim); letter-spacing:2px; text-align:center; margin-bottom:10px; opacity:0.7; }
.hint-msg span { color:var(--amber); }

.connect-btn { width:100%; background:transparent; border:2px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:30px; letter-spacing:8px; padding:12px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; box-shadow:0 0 12px rgba(0,255,65,0.15); }
.connect-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(0,255,65,0.12),transparent); transition:left 0.4s; }
.connect-btn:hover { background:var(--green); color:var(--bg); box-shadow:0 0 25px rgba(0,255,65,0.5); }
.connect-btn:hover::before { left:100%; }

#connectingOverlay { display:none; position:fixed; inset:0; background:rgba(2,12,4,0.98); z-index:500; flex-direction:column; align-items:center; justify-content:center; }
.spinner-wrap { position:relative; width:90px; height:90px; margin-bottom:24px; }
.ring { position:absolute; border-radius:50%; border:2px solid transparent; }
.ring-1{inset:0;border-top-color:var(--green);border-right-color:var(--green);animation:spin 1.2s linear infinite}
.ring-2{inset:12px;border-bottom-color:var(--green-dim);border-left-color:var(--green-dim);animation:spinRev 0.9s linear infinite}
.ring-3{inset:24px;border-top-color:var(--amber);animation:spin 0.6s linear infinite}
.ring-dot{position:absolute;inset:36px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1s infinite}
.conn-status { font-family:'VT323',monospace; font-size:26px; letter-spacing:4px; color:var(--green); text-shadow:0 0 10px var(--green); margin-bottom:18px; }
.conn-progress { width:340px; border:1px solid var(--green-dim); height:10px; background:var(--green-faint); margin-bottom:16px; }
.conn-bar { height:100%; background:var(--green); box-shadow:0 0 8px var(--green); width:0%; transition:width 0.3s ease; }
.conn-log { font-size:10px; color:var(--green-dim); letter-spacing:1px; text-align:left; width:340px; line-height:1.9; }
.conn-log .ok{color:var(--green)} .conn-log .warn{color:var(--amber)} .conn-log .err{color:var(--red)}

.login-footer { margin-top:14px; display:flex; justify-content:space-between; font-size:9px; color:rgba(0,255,65,0.25); letter-spacing:2px; animation:slideUp 0.5s 0.3s ease both; opacity:0; }
.cursor { display:inline-block; width:9px; height:15px; background:var(--green); vertical-align:middle; animation:blink 1s step-end infinite; margin-left:2px; }

#desktop { display:none; min-height:100vh; flex-direction:column; animation:fadeIn 0.6s ease both; position:relative; z-index:5; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 18px; border-bottom:1px solid var(--green-faint); background:rgba(0,255,65,0.03); font-size:10px; letter-spacing:2px; color:var(--green-dim); position:sticky; top:0; z-index:100; backdrop-filter:blur(4px); }
.topbar-logo { font-family:'VT323',monospace; font-size:24px; color:var(--green); letter-spacing:4px; text-shadow:0 0 8px var(--green); cursor:pointer; }
.topbar-logo span { color:var(--amber); }
.topbar-right { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.topbar-pill { border:1px solid var(--green-faint); padding:3px 10px; font-size:9px; letter-spacing:2px; }
.topbar-pill.on { border-color:var(--green); color:var(--green); }
.topbar-pill.score { border-color:var(--amber); color:var(--amber); position:relative; }
.topbar-pill.score .score-blip { position:absolute; left:50%; top:-2px; transform:translateX(-50%); font-size:11px; color:var(--cyan); pointer-events:none; animation:scoreBlip 1.2s ease forwards; }
#topClock { color:var(--green); font-weight:bold; }
.logout-btn { background:transparent; border:1px solid rgba(255,49,49,0.3); color:rgba(255,49,49,0.5); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; padding:3px 10px; cursor:pointer; transition:all 0.2s; }
.logout-btn:hover { border-color:var(--red); color:var(--red); box-shadow:0 0 8px rgba(255,49,49,0.3); }

.app-grid-wrap { flex:1; padding:24px; }
.app-grid-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; border-bottom:1px solid var(--green-faint); padding-bottom:10px; flex-wrap:wrap; gap:8px; }
.app-grid-title { font-size:10px; letter-spacing:4px; color:var(--green-dim); }
.app-grid-stats { font-size:10px; letter-spacing:2px; color:var(--green-dim); }
.app-grid-stats span { color:var(--amber); }

.app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.app-tile { border:1px solid var(--green-faint); padding:18px 14px; cursor:pointer; transition:all 0.18s; background:rgba(0,255,65,0.015); position:relative; animation:slideUp 0.4s ease both; overflow:hidden; }
.app-tile::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:1px; background:var(--green); transition:left 0.4s ease; }
.app-tile:hover { border-color:var(--green); background:rgba(0,255,65,0.05); box-shadow:0 0 16px rgba(0,255,65,0.15); transform:translateY(-2px); }
.app-tile:hover::before { left:100%; }
.app-tile-icon { font-size:26px; margin-bottom:8px; }
.app-tile-name { font-family:'VT323',monospace; font-size:19px; color:var(--green); letter-spacing:2px; line-height:1.1; }
.app-tile-desc { font-size:9px; color:var(--green-dim); letter-spacing:1px; margin-top:4px; line-height:1.5; }
.app-tile-badge { position:absolute; top:6px; right:6px; font-size:7px; letter-spacing:1px; padding:2px 5px; border:1px solid var(--amber); color:var(--amber); }
.app-tile-badge.hot { border-color:var(--red); color:var(--red); }

/* HIDDEN TILE — terminal */
.hidden-tile {
  display:none !important;
  border-color:var(--red);
  background:rgba(255,49,49,0.05);
  animation:slideUp 0.4s ease both, glitch 6s infinite !important;
}
.hidden-tile .app-tile-name { color:var(--red); text-shadow:0 0 8px var(--red); }
.hidden-tile .app-tile-icon { color:var(--red); }
.hidden-tile.revealed {
  display:block !important;
}
.hidden-tile:hover {
  border-color:var(--red);
  background:rgba(255,49,49,0.12);
  box-shadow:0 0 24px rgba(255,49,49,0.4);
}

.netmap-wrap { padding:18px 24px; border-top:1px solid var(--green-faint); background:rgba(0,255,65,0.015); }
.netmap-title { font-size:9px; letter-spacing:3px; color:var(--green-dim); margin-bottom:8px; }
#netmapSvg { width:100%; height:80px; cursor:pointer; }

.window-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.window-backdrop.open { display:flex; }
.window { width:min(720px,96vw); border:1px solid var(--green); background:var(--bg); box-shadow:0 0 40px rgba(0,255,65,0.2); animation:windowIn 0.25s ease both; max-height:90vh; display:flex; flex-direction:column; position:relative; }
.window::before { content:''; position:absolute; inset:-1px; border:1px solid var(--green-faint); pointer-events:none; }
.window-titlebar { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--green-faint); background:rgba(0,255,65,0.05); font-size:11px; letter-spacing:3px; color:var(--green-dim); flex-shrink:0; }
.window-titlebar span { color:var(--green); }
.win-close { background:transparent; border:1px solid rgba(255,49,49,0.3); color:rgba(255,49,49,0.6); font-family:'Share Tech Mono',monospace; font-size:11px; padding:2px 10px; cursor:pointer; transition:all 0.15s; letter-spacing:1px; }
.win-close:hover { border-color:var(--red); color:var(--red); }
.window-body { padding:20px; overflow-y:auto; flex:1; }

.todo-input-row { display:flex; gap:8px; margin-bottom:14px; }
.todo-input { flex:1; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:13px; padding:8px 12px; outline:none; letter-spacing:1px; }
.todo-input:focus { border-color:var(--green); box-shadow:0 0 8px rgba(0,255,65,0.2); }
.todo-add-btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:20px; padding:6px 16px; cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.todo-add-btn:hover { background:var(--green); color:var(--bg); }
.todo-priority-select { background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:11px; padding:8px; outline:none; letter-spacing:1px; cursor:pointer; }
.todo-item { display:flex; align-items:center; gap:10px; border:1px solid var(--green-faint); padding:10px 12px; margin-bottom:6px; font-size:12px; letter-spacing:1px; transition:all 0.15s; animation:slideUp 0.2s ease both; }
.todo-item:hover { border-color:var(--green-dim); background:rgba(0,255,65,0.02); }
.todo-item.prio-high { border-left:3px solid var(--red); }
.todo-item.prio-med { border-left:3px solid var(--amber); }
.todo-item.prio-low { border-left:3px solid var(--green-dim); }
.todo-check { width:14px; height:14px; border:1px solid var(--green-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
.todo-check:hover { border-color:var(--green); }
.todo-check.done { background:var(--green); border-color:var(--green); }
.todo-check.done::after { content:'✓'; font-size:10px; color:var(--bg); }
.todo-text { flex:1; }
.todo-text.done { text-decoration:line-through; color:var(--green-dim); }
.todo-meta { font-size:9px; color:var(--green-dim); letter-spacing:1px; }
.todo-del { background:transparent; border:none; color:rgba(255,49,49,0.4); cursor:pointer; font-size:14px; transition:color 0.15s; }
.todo-del:hover { color:var(--red); }
.todo-stats { font-size:10px; color:var(--green-dim); letter-spacing:2px; margin-top:12px; text-align:right; }

.notes-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.note-card { border:1px solid var(--green-faint); padding:12px; cursor:pointer; transition:all 0.15s; min-height:70px; position:relative; }
.note-card:hover { border-color:var(--green); background:rgba(0,255,65,0.03); }
.note-card.corrupted { border-color:var(--red); background:rgba(255,49,49,0.05); animation:glitch 8s infinite; }
.note-card.corrupted .note-card-title { color:var(--red); }
.note-card-title { font-size:12px; color:var(--green); letter-spacing:1px; margin-bottom:4px; }
.note-card-preview { font-size:10px; color:var(--green-dim); line-height:1.5; }
.note-card-del { position:absolute; top:6px; right:8px; background:transparent; border:none; color:rgba(255,49,49,0.3); cursor:pointer; font-size:12px; }
.note-card-del:hover { color:var(--red); }
.new-note-area { display:flex; flex-direction:column; gap:8px; }
.note-title-in { background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'VT323',monospace; font-size:20px; padding:8px 12px; outline:none; letter-spacing:2px; }
.note-body-in { background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:12px; padding:10px 12px; outline:none; resize:none; height:100px; letter-spacing:1px; line-height:1.7; }
.note-title-in:focus, .note-body-in:focus { border-color:var(--green); box-shadow:0 0 8px rgba(0,255,65,0.15); }
.note-save-btn { align-self:flex-end; background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:20px; padding:6px 20px; cursor:pointer; letter-spacing:3px; transition:all 0.15s; }
.note-save-btn:hover { background:var(--green); color:var(--bg); }

.timer-display { text-align:center; font-family:'VT323',monospace; font-size:96px; color:var(--green); text-shadow:0 0 20px var(--green); letter-spacing:8px; margin:20px 0; line-height:1; }
.timer-display.running { animation:pulse 2s infinite; }
.timer-display.alert { color:var(--amber); text-shadow:0 0 20px var(--amber); }
.timer-controls { display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
.timer-btn { background:transparent; border:1px solid var(--green-dim); color:var(--green-dim); font-family:'VT323',monospace; font-size:22px; padding:8px 20px; cursor:pointer; letter-spacing:3px; transition:all 0.15s; }
.timer-btn:hover { border-color:var(--green); color:var(--green); background:rgba(0,255,65,0.05); }
.timer-btn.primary { border-color:var(--green); color:var(--green); }
.timer-btn.primary:hover { background:var(--green); color:var(--bg); }
.timer-presets { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.preset-btn { background:transparent; border:1px solid var(--green-faint); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:10px; padding:5px 12px; cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.preset-btn:hover { border-color:var(--green); color:var(--green); }
.timer-label-in { display:block; width:100%; text-align:center; background:transparent; border:none; border-bottom:1px solid var(--green-faint); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:11px; padding:6px; outline:none; letter-spacing:3px; margin-bottom:16px; text-transform:uppercase; }
.timer-label-in:focus { border-bottom-color:var(--green); color:var(--green); }
.timer-session-count { text-align:center; font-size:10px; color:var(--green-dim); letter-spacing:3px; }
.timer-session-count span { color:var(--amber); font-family:'VT323',monospace; font-size:16px; }

.mood-question { font-size:12px; color:var(--green-dim); letter-spacing:2px; margin-bottom:14px; line-height:1.7; }
.mood-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.mood-btn { background:transparent; border:1px solid var(--green-faint); padding:12px 6px; cursor:pointer; transition:all 0.15s; text-align:center; }
.mood-btn:hover { border-color:var(--green); background:rgba(0,255,65,0.04); }
.mood-btn.selected { border-color:var(--amber); background:rgba(255,176,0,0.06); box-shadow:0 0 10px rgba(255,176,0,0.2); }
.mood-emoji { font-size:24px; display:block; margin-bottom:4px; }
.mood-label { font-size:9px; color:var(--green-dim); letter-spacing:1px; }
.mood-note-in { width:100%; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:12px; padding:10px 12px; outline:none; resize:none; height:60px; letter-spacing:1px; margin-bottom:10px; }
.mood-note-in:focus { border-color:var(--green); }
.mood-log-btn { width:100%; background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:24px; padding:10px; cursor:pointer; letter-spacing:6px; transition:all 0.15s; }
.mood-log-btn:hover { background:var(--green); color:var(--bg); }
.mood-history { margin-top:14px; border-top:1px solid var(--green-faint); padding-top:12px; }
.mood-history-title { font-size:10px; letter-spacing:3px; color:var(--green-dim); margin-bottom:10px; }
.mood-entry { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--green-dim); letter-spacing:1px; padding:6px 0; border-bottom:1px solid var(--green-faint); }
.mood-entry-emoji { font-size:18px; }
.mood-entry-note { flex:1; }
.mood-entry-time { font-size:9px; color:rgba(0,255,65,0.3); }

.goal-item { border:1px solid var(--green-faint); padding:12px 14px; margin-bottom:10px; transition:all 0.15s; }
.goal-item:hover { border-color:var(--green-dim); }
.goal-item-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.goal-name { font-size:13px; color:var(--green); letter-spacing:1px; }
.goal-pct { font-family:'VT323',monospace; font-size:20px; color:var(--amber); }
.goal-bar-wrap { height:6px; background:var(--green-faint); border:1px solid var(--green-faint); margin-bottom:6px; }
.goal-bar { height:100%; background:var(--amber); box-shadow:0 0 6px var(--amber); transition:width 0.4s ease; }
.goal-controls { display:flex; gap:6px; align-items:center; }
.goal-ctrl-btn { background:transparent; border:1px solid var(--green-faint); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:14px; width:24px; height:24px; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center; }
.goal-ctrl-btn:hover { border-color:var(--green); color:var(--green); }
.goal-del-btn { background:transparent; border:none; color:rgba(255,49,49,0.3); cursor:pointer; font-size:13px; margin-left:auto; transition:color 0.15s; }
.goal-del-btn:hover { color:var(--red); }
.goal-add-row { display:flex; gap:8px; margin-top:14px; }
.goal-add-in { flex:1; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:12px; padding:8px 12px; outline:none; letter-spacing:1px; }
.goal-add-in:focus { border-color:var(--green); }
.goal-add-btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:20px; padding:6px 16px; cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.goal-add-btn:hover { background:var(--green); color:var(--bg); }

.journal-entry-area { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.journal-date { font-family:'VT323',monospace; font-size:18px; color:var(--amber); letter-spacing:3px; }
.journal-in { background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:13px; padding:12px; outline:none; resize:vertical; min-height:120px; letter-spacing:1px; line-height:1.8; }
.journal-in:focus { border-color:var(--green); box-shadow:0 0 8px rgba(0,255,65,0.15); }
.journal-actions { display:flex; gap:8px; justify-content:flex-end; }
.journal-btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:18px; padding:6px 18px; cursor:pointer; letter-spacing:3px; transition:all 0.15s; }
.journal-btn:hover { background:var(--green); color:var(--bg); }
.journal-btn.export { border-color:var(--amber); color:var(--amber); }
.journal-btn.export:hover { background:var(--amber); color:var(--bg); }
.journal-history { margin-top:14px; border-top:1px solid var(--green-faint); padding-top:12px; max-height:240px; overflow-y:auto; }
.journal-old { border:1px solid var(--green-faint); padding:10px 12px; margin-bottom:6px; font-size:11px; letter-spacing:1px; line-height:1.7; }
.journal-old-date { font-family:'VT323',monospace; color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:4px; }
.journal-old-body { color:var(--green-dim); white-space:pre-wrap; }

.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.stat-cell { border:1px solid var(--green-faint); padding:12px; background:rgba(0,255,65,0.02); }
.stat-num { font-family:'VT323',monospace; font-size:36px; color:var(--amber); line-height:1; }
.stat-lbl { font-size:9px; color:var(--green-dim); letter-spacing:2px; margin-top:4px; text-transform:uppercase; }
.stats-chart { border:1px solid var(--green-faint); padding:16px; }
.stats-chart-title { font-size:10px; letter-spacing:3px; color:var(--green-dim); margin-bottom:12px; }
.ascii-bars { display:flex; align-items:flex-end; gap:6px; height:120px; padding-bottom:24px; position:relative; }
.ascii-bar { flex:1; background:linear-gradient(to top,var(--green),var(--green-dim)); position:relative; min-height:2px; animation:barGrow 0.8s ease both; transition:all 0.2s; }
.ascii-bar:hover { background:linear-gradient(to top,var(--amber),var(--amber-dim)); }
.ascii-bar-val { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--green); letter-spacing:1px; }
.ascii-bar-lbl { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:8px; color:var(--green-dim); letter-spacing:1px; white-space:nowrap; }

.system-health-row { display:flex; justify-content:space-between; font-size:11px; padding:4px 0; border-bottom:1px solid var(--green-faint); letter-spacing:1px; }
.system-health-row .health-name { color:var(--green-dim); }
.system-health-row .health-val { color:var(--green); }
.system-health-row .health-val.warn { color:var(--amber); cursor:pointer; }
.system-health-row .health-val.err { color:var(--red); cursor:pointer; animation:blink 2s infinite; }

.cipher-section { margin-bottom:14px; }
.cipher-lbl { font-size:10px; letter-spacing:3px; color:var(--green-dim); margin-bottom:6px; }
.cipher-area { width:100%; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:13px; padding:10px 12px; outline:none; resize:vertical; min-height:70px; letter-spacing:1px; line-height:1.6; }
.cipher-area:focus { border-color:var(--green); }
.cipher-controls { display:flex; gap:8px; margin-bottom:12px; }
.cipher-btn { flex:1; background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:18px; padding:8px; cursor:pointer; letter-spacing:3px; transition:all 0.15s; }
.cipher-btn:hover { background:var(--green); color:var(--bg); }
.cipher-btn.copy { border-color:var(--amber); color:var(--amber); }
.cipher-btn.copy:hover { background:var(--amber); color:var(--bg); }
.cipher-info { font-size:9px; color:var(--green-dim); letter-spacing:1px; line-height:1.6; margin-top:8px; padding:10px; border:1px dashed var(--green-faint); }

.radio-display { border:1px solid var(--green-dim); padding:20px; background:rgba(0,255,65,0.02); margin-bottom:14px; text-align:center; position:relative; overflow:hidden; }
.radio-display::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,0.04) 2px,rgba(0,255,65,0.04) 3px); animation:radioStatic 0.3s infinite; pointer-events:none; }
.radio-station { font-family:'VT323',monospace; font-size:48px; color:var(--amber); letter-spacing:6px; text-shadow:0 0 15px var(--amber); margin-bottom:4px; }
.radio-name { font-size:11px; color:var(--green); letter-spacing:3px; margin-bottom:10px; min-height:14px; }
.radio-viz { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:30px; }
.viz-bar { width:4px; background:var(--green); transition:height 0.1s; }
.radio-controls { display:flex; gap:6px; justify-content:center; margin-bottom:10px; flex-wrap:wrap; }
.radio-btn { background:transparent; border:1px solid var(--green-faint); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:10px; padding:6px 12px; cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.radio-btn:hover { border-color:var(--green); color:var(--green); }
.radio-btn.active { border-color:var(--amber); color:var(--amber); background:rgba(255,176,0,0.05); }
.radio-btn[data-station="dead"] { border-color:var(--red); color:var(--red); }
.radio-volume { display:flex; align-items:center; gap:10px; }
.radio-volume input { flex:1; }

.shoutbox-msgs { height:240px; overflow-y:auto; border:1px solid var(--green-faint); padding:12px; margin-bottom:12px; background:var(--green-faint); display:flex; flex-direction:column; gap:6px; }
.shout-msg { font-size:11px; letter-spacing:1px; line-height:1.6; animation:slideUp 0.2s ease both; }
.shout-msg .shout-handle { color:var(--amber); }
.shout-msg .shout-handle.bot { color:var(--cyan); }
.shout-msg .shout-handle.ghost { color:var(--red); animation:glitch 4s infinite; }
.shout-msg .shout-time { color:rgba(0,255,65,0.3); font-size:9px; }
.shout-msg .shout-text { color:var(--green); }
.shout-msg .shout-text.ghost { color:var(--red); }
.shout-input-row { display:flex; gap:8px; }
.shout-in { flex:1; background:var(--green-faint); border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:12px; padding:8px 12px; outline:none; letter-spacing:1px; }
.shout-in:focus { border-color:var(--green); }
.shout-btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:20px; padding:6px 16px; cursor:pointer; letter-spacing:2px; transition:all 0.15s; }
.shout-btn:hover { background:var(--green); color:var(--bg); }
.bot-mood-indicator { font-size:9px; color:var(--green-dim); letter-spacing:2px; margin-bottom:8px; }
.bot-mood-indicator span { color:var(--cyan); }

.fortune-box { border:1px solid var(--green-dim); padding:24px; text-align:center; margin-bottom:16px; background:rgba(0,255,65,0.02); min-height:130px; display:flex; align-items:center; justify-content:center; }
.fortune-text { font-family:'VT323',monospace; font-size:26px; color:var(--green); text-shadow:0 0 10px var(--green); letter-spacing:2px; line-height:1.5; transition:opacity 0.3s; }
.fortune-text.cursed { color:var(--red); text-shadow:0 0 10px var(--red); animation:glitch 2s infinite; }
.fortune-btn { width:100%; background:transparent; border:1px solid var(--green); color:var(--green); font-family:'VT323',monospace; font-size:24px; padding:12px; cursor:pointer; letter-spacing:6px; transition:all 0.2s; }
.fortune-btn:hover { background:var(--green); color:var(--bg); }
.fortune-dingus { font-size:10px; color:var(--green-dim); letter-spacing:2px; text-align:center; margin-top:10px; }

.notif { position:fixed; top:55px; right:16px; border:1px solid var(--green); background:rgba(2,12,4,0.97); padding:10px 16px; font-size:11px; letter-spacing:2px; color:var(--green); z-index:1000; animation:notifSlide 0.3s ease; box-shadow:0 0 16px rgba(0,255,65,0.3); max-width:300px; }
.notif.xp { border-color:var(--cyan); color:var(--cyan); }
.notif.warn { border-color:var(--amber); color:var(--amber); }
.notif.err { border-color:var(--red); color:var(--red); animation:notifSlide 0.3s ease, glitch 3s infinite; }

/* BACKDOOR OVERLAY */
.backdoor-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92);
  z-index:5000;
  align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
.backdoor-overlay.open { display:flex; }
.backdoor-content {
  border:2px solid var(--red);
  background:#0a0204;
  padding:36px 44px;
  max-width:520px; text-align:center;
  box-shadow:0 0 60px rgba(255,49,49,0.4);
  animation:backdoorIn 0.4s ease both, glitch 5s infinite;
  position:relative;
}
.backdoor-content::before {
  content:''; position:absolute; inset:-2px;
  border:1px solid var(--amber);
  pointer-events:none;
}
.backdoor-glitch {
  font-family:'VT323',monospace; font-size:32px;
  color:var(--red); letter-spacing:5px;
  text-shadow:0 0 15px var(--red);
  margin-bottom:14px;
  animation:glitch 2s infinite;
}
.backdoor-msg {
  font-family:'Share Tech Mono',monospace; font-size:13px;
  color:var(--amber); letter-spacing:2px;
  line-height:1.7; margin-bottom:14px;
}
.backdoor-hint {
  font-size:11px; color:var(--green-dim); letter-spacing:2px;
  margin-bottom:20px; font-style:italic;
}
.backdoor-btn {
  background:transparent; border:1px solid var(--red);
  color:var(--red); font-family:'VT323',monospace;
  font-size:22px; padding:8px 30px; cursor:pointer;
  letter-spacing:5px; transition:all 0.15s;
}
.backdoor-btn:hover { background:var(--red); color:#000; box-shadow:0 0 20px rgba(255,49,49,0.5); }

/* TERMINAL OVERLAY */
.terminal-overlay {
  display:none; position:fixed; inset:0;
  background:#000; z-index:8000;
}
.terminal-overlay.open { display:block; }
.terminal-overlay iframe {
  width:100%; height:100%; border:none;
}
.terminal-exit {
  position:fixed; top:14px; right:14px;
  background:#000; border:1px solid var(--red);
  color:var(--red); font-family:'Share Tech Mono',monospace;
  font-size:11px; padding:6px 14px; cursor:pointer;
  letter-spacing:3px; transition:all 0.15s;
  z-index:9000;
}
.terminal-exit:hover { background:var(--red); color:#000; box-shadow:0 0 15px rgba(255,49,49,0.5); }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--green-faint); }
::-webkit-scrollbar-thumb { background:var(--green-dim); }
::-webkit-scrollbar-thumb:hover { background:var(--green); }

input[type=range] { -webkit-appearance:none; background:transparent; height:14px; }
input[type=range]::-webkit-slider-runnable-track { height:4px; background:var(--green-faint); border:1px solid var(--green-dim); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:var(--green); margin-top:-6px; cursor:pointer; box-shadow:0 0 5px var(--green); }

/* ═══════════════════════════════════════════════
   MOBILE-AWARE FIXES (main app)
   ═══════════════════════════════════════════════ */
@supports (height: 100dvh) {
  #loginScreen { min-height: 100dvh; }
  #desktop { min-height: 100dvh; }
  .terminal-overlay { height: 100dvh; }
}

@media (hover: none) and (pointer: coarse) {
  /* Disable heavy CRT effects on mobile - they cause jank */
  body::before { display: none; }
  .scan-beam { display: none; }
  .logo-text { animation: none; text-shadow: 0 0 10px var(--green); }

  /* Prevent zoom on focus */
  .field-in, .todo-input, .note-title-in, .note-body-in,
  .journal-in, .mood-note-in, .goal-add-in,
  .shout-in, .cipher-area, .timer-label-in {
    font-size: 16px;
  }

  /* Tighter spacing for mobile */
  .topbar { padding: 6px 10px; }
  .topbar-logo { font-size: 18px; }
  .topbar-right { gap: 8px; }
  .topbar-pill { padding: 2px 6px; font-size: 8px; }
  #topClock { font-size: 9px; }

  .app-grid-wrap { padding: 14px; }
  .app-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .app-tile { padding: 14px 10px; }
  .app-tile-name { font-size: 16px; }
  .app-tile-icon { font-size: 22px; }
  .app-tile-desc { font-size: 9px; }

  /* Bigger touch targets */
  .node-btn { padding: 10px 8px; min-height: 44px; }
  .mood-btn { padding: 14px 6px; min-height: 60px; }
  .preset-btn { padding: 8px 12px; }

  /* Windows: full-width on mobile */
  .window { width: 96vw; max-height: 88dvh; }
  .window-body { padding: 14px; }

  /* Login form spacing */
  .login-wrap { padding: 0 10px; }
  .logo-text { font-size: 56px; letter-spacing: 6px; }
  .login-panel { padding: 20px; }

  /* Terminal overlay button placement */
  .terminal-exit {
    top: 10px; right: 10px;
    font-size: 10px; padding: 8px 12px;
  }

  /* Disable backdrop blur on mobile (perf killer on Safari) */
  .window-backdrop { backdrop-filter: none; background: rgba(0,0,0,0.88); }
  .topbar { backdrop-filter: none; }
}

@media (max-width: 480px) {
  .app-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mood-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .timer-display { font-size: 64px; letter-spacing: 4px; }
  .logo-text { font-size: 48px; letter-spacing: 4px; }
  .notes-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   MOBILE PASS v6.2 — iPhone-first refinements
   ═══════════════════════════════════════════════ */

/* Kill the double-tap-zoom delay everywhere taps matter —
   the logo-click backdoor is unplayable without this */
button, input, select, textarea, .app-tile, .logo-text, .topbar-logo,
.node-btn, .mood-btn, .todo-check, .health-val, svg circle {
  touch-action: manipulation;
}

/* iOS paints a grey/teal flash on tapped elements — kill it, the app has
   its own feedback (sound + active states) */
* { -webkit-tap-highlight-color: transparent; }

@media (hover: none) and (pointer: coarse) {
  /* iOS zooms any focused input under 16px — cover the stragglers */
  select, .todo-priority-select { font-size: 16px; }

  /* Bigger tap targets for the tiny controls */
  .logout-btn { padding: 8px 12px; font-size: 10px; }
  .win-close { padding: 8px 14px; font-size: 12px; }
  .todo-del, .note-card-del, .goal-del-btn { padding: 8px; min-width: 36px; min-height: 36px; }
  .goal-ctrl-btn { min-width: 40px; min-height: 36px; }

  /* Keyboard-friendly windows: anchor to top so the focused field
     isn't hidden when the iOS keyboard claims half the screen */
  .window-backdrop { align-items: flex-start; padding-top: max(12px, env(safe-area-inset-top)); }
  .window { max-height: 82dvh; }

  /* Connecting overlay: fit narrow screens */
  .conn-progress, .conn-log { width: min(340px, 86vw); }

  /* Notifications: don't cover half the screen */
  .notif { max-width: min(300px, 80vw); right: 10px; top: max(55px, env(safe-area-inset-top)); }

  /* Backdoor reveal overlay fits the phone */
  .backdoor-content { width: min(92vw, 560px); padding: 24px 16px; }

  /* Notch / home-indicator breathing room */
  .topbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #desktop { padding-bottom: env(safe-area-inset-bottom); }
  .terminal-exit { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
}

/* Phone-width topbar: two tidy rows — logo, then one full-width status line */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .topbar-logo { font-size: 20px; }
  .topbar-right { width: 100%; justify-content: space-between; gap: 4px; flex-wrap: nowrap; }
  .topbar-pill.on { display: none; }   /* CONNECTED — implied by being here */
  #topNode { display: none; }          /* node is login-screen lore */
  .topbar-pill.score { white-space: nowrap; padding: 2px 5px; }
  #topHandle { font-size: 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
  #topClock { font-size: 9px; }
  .logout-btn { padding: 6px 8px !important; font-size: 9px !important; white-space: nowrap; }
  .app-grid-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Small phones: single stat line, tighter login */
@media (max-width: 380px) {
  .node-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-text { font-size: 40px; letter-spacing: 3px; }
  .connect-btn { font-size: 24px; letter-spacing: 5px; }
}

/* ═══════════════════════════════════════════════
   v6.4 — NETWORK RANKINGS (leaderboard)
   ═══════════════════════════════════════════════ */
.lb-row { display:flex; align-items:baseline; gap:10px; padding:7px 4px; border-bottom:1px solid var(--green-faint); font-size:11px; letter-spacing:1px; }
.lb-row:last-child { border-bottom:none; }
.lb-rank { color:var(--green-dim); font-size:10px; width:22px; flex-shrink:0; }
.lb-handle { color:var(--green); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-star { color:var(--magenta); text-shadow:0 0 8px var(--magenta); }
.lb-endings { color:var(--green-dim); font-size:9px; letter-spacing:1px; white-space:nowrap; }
.lb-lvl { color:var(--cyan); font-size:10px; white-space:nowrap; }
.lb-xp { color:var(--amber); font-size:10px; width:70px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lb-row.me { background:rgba(0,255,65,0.06); box-shadow:inset 2px 0 0 var(--green); }
.lb-row.ascended .lb-handle { text-shadow:0 0 8px rgba(255,0,255,0.5); }
.lb-empty { font-size:10px; color:var(--green-dim); letter-spacing:2px; padding:8px 0; }