:root{--bg:#0e1a26;--bg2:#0b141c;--grid:#20464f;--text:#afcbd6;--muted:#79a6b9;--accent:#79a6b9;--warning:#beb780;--good:#b7f1ff;--ink:#cfe1ea;--danger:#ff7a7a;--codeSize:22px}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 60% -10%, #102637 0%, var(--bg) 60%) fixed;color:var(--text);font:16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;cursor:crosshair;user-select:none}
.vignette::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.28) 90%);mix-blend-mode:multiply}
.scanlines::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);animation:scan 8s linear infinite;opacity:.22}
@keyframes scan{0%{background-position-y:0}100%{background-position-y:100%}}
header{position:fixed;inset:0 auto auto 0;right:0;height:56px;display:flex;align-items:center;gap:16px;padding:10px 14px;background:linear-gradient(#0b1823,#0a1219);border-bottom:1px solid var(--grid);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.logo{letter-spacing:.22em;font-weight:700;color:var(--accent)}
.sep{height:18px;width:1px;background:var(--grid);opacity:.8}
.stat{display:flex;gap:8px;align-items:baseline}
.stat label{color:var(--muted)}
.lights{display:flex;gap:8px;margin-left:auto;align-items:center}
.lamp{width:10px;height:10px;border-radius:50%;background:#16303a;box-shadow:0 0 0 1px #132b34 inset,0 0 8px #000}
.lamp.on{background:#5bd1ff;box-shadow:0 0 0 1px #9ee7ff inset,0 0 10px #5bd1ff}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--grid);padding:6px 10px;border-radius:8px;background:#0f1c25;color:var(--text);cursor:pointer}
.btn.toggle.off{color:#7c9eae;border-color:#1a3b44}
.workspace{position:fixed;inset:56px 0 0 0;padding:14px}
.terminal{position:relative;height:100%;width:100%;border:1px solid var(--grid);border-radius:16px;overflow:hidden;background:linear-gradient(180deg, rgba(14,26,38,.7), rgba(8,17,25,.7));display:grid;grid-template-columns: 1fr 360px;opacity:0;transition:opacity .8s ease;z-index:1}
.corner-brand{position:absolute;top:10px;left:14px;pointer-events:none;color:var(--muted);opacity:.7;letter-spacing:.28em;font-size:12px;text-shadow:0 0 6px rgba(121,166,185,.25)}
.terminal.on{opacity:1}
.cloud-wrap{position:relative;padding:24px}
.cloud{position:absolute;inset:12px 12px 12px 12px;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:calc(var(--codeSize) + 12px);gap:12px 10px}
.num{align-self:center;justify-self:center;font-size:var(--codeSize);letter-spacing:.06em;color:var(--accent);opacity:.0;transform:translateY(0);transition:transform .15s linear, opacity .6s ease, text-shadow .2s ease}
.num.ready{opacity:1}
.num.dim{opacity:1}
.num.flash{animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:.45}}
.num.flash-normal{color:var(--warning); text-shadow:0 0 10px var(--warning),0 0 18px rgba(255,255,200,.55)}
.num.flash-special{color:#ffd700; text-shadow:0 0 16px #ffd700,0 0 28px rgba(255,215,0,.75),0 0 40px rgba(255,215,0,.45); font-weight:700; transform:scale(1.08)}
.panel{border-left:1px solid var(--grid);padding:14px;background:#0b151e;display:flex;flex-direction:column;gap:12px}
.panel h4{margin:0 0 4px;font-size:12px;color:var(--muted);letter-spacing:.12em}
.process{position:relative;border:1px solid var(--grid);border-radius:10px;overflow:hidden;height:84px}
.bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg, rgba(121,166,185,.22), rgba(121,166,185,.62));box-shadow:0 0 12px rgba(93,193,238,.35) inset}
.msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);letter-spacing:.2em}
.msg.done{color:var(--good)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:baseline}
.kv label{color:var(--muted)}
.log{flex:1;min-height:0;border:1px solid var(--grid);border-radius:10px;padding:8px;overflow:auto}
.entry{font-size:12px;color:var(--ink);opacity:.95}
.entry+.entry{margin-top:4px;border-top:1px dashed var(--grid);padding-top:4px}
.insp{border:1px solid var(--grid);border-radius:10px;padding:8px;background:rgba(12,20,28,.55);color:var(--accent);font-size:13px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;padding:8px 12px;background:#0c151d;border:1px solid var(--grid);border-radius:10px;color:var(--text);opacity:0;transition:opacity .3s ease}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:5}
.modal.show{display:flex}
.modal .box{width:740px;min-height:280px;border:1px solid var(--grid);border-radius:14px;background:#0b151e;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.45);color:var(--accent);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.modal .box h3{margin:0 0 16px;letter-spacing:.18em;color:var(--warning);flex-shrink:0}
.modal .box p{margin:0 0 12px;font-size:14px;line-height:1.6;max-height:120px;overflow-y:auto}
.boot{position:fixed;inset:56px 14px 14px 14px;border:1px solid var(--grid);border-radius:16px;background:radial-gradient(1400px 900px at 60% -10%, #0e2433 0%, #0a131a 60%);display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:4}
.boot.show{display:flex}
.brand{font-size:28px;letter-spacing:.4em;color:var(--accent);opacity:1;animation:none}
.bootlog{width:min(800px,90%);height:240px;border:1px solid var(--grid);border-radius:12px;padding:10px;overflow:hidden;background:#0b151e;box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
.bootline{opacity:.0;transition:opacity .6s ease}
.bootline.on{opacity:.95}
.bootlog .welcome{color:var(--warning);letter-spacing:.18em;font-size:22px;animation:bootblink .7s steps(2,end) infinite}
.bootlog .hint{color:var(--muted);letter-spacing:.14em;font-size:16px;font-style:italic}
.bootlog .spacer{height:12px}
@keyframes bootblink{50%{opacity:.35}}
.controls{position:fixed;right:12px;top:64px;width:260px;background:#0b151e;border:1px solid var(--grid);border-radius:10px;padding:10px;backdrop-filter:blur(2px);box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:6;pointer-events:auto}
.controls.off{display:none}
.controls h3{margin:0 0 6px;font-size:12px;color:var(--muted);letter-spacing:.12em}
.controls .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.controls input[type="range"]{width:140px}
.controls .lock{display:flex;flex-direction:column;gap:8px}
.controls .lock input{background:#0f1c25;border:1px solid var(--grid);border-radius:8px;padding:6px 8px;color:var(--text);user-select:text;cursor:text}
.controls .lock small{display:none}
.controls.locked #controlsBody{display:none}
@media (max-width: 900px){.terminal{grid-template-columns:1fr}.cloud{inset:12px 12px}.controls{width:220px}}
.controls *{user-select:text}
.danger{color:var(--danger)}
.mood-flash{animation:moodflash 1.2s ease}
@keyframes moodflash{0%{color:var(--warning);text-shadow:0 0 0 rgba(190,183,128,0)}30%{text-shadow:0 0 18px rgba(190,183,128,.6)}100%{color:var(--text);text-shadow:0 0 0 rgba(0,0,0,0)}}
.tip{position:fixed;pointer-events:none;padding:6px 8px;border:1px solid var(--grid);border-radius:8px;background:#0b151e;box-shadow:0 10px 24px rgba(0,0,0,.35);color:var(--accent);font-size:12px;letter-spacing:.03em;opacity:0;transition:opacity .15s ease;z-index:7}
.tip.show{opacity:.95}

/* Management Alerts */
.mgmt-alerts{position:fixed;top:64px;left:14px;width:300px;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:3}
.mgmt-alerts .msg{padding:8px 10px;background:#0b151e;border:1px solid var(--grid);border-radius:8px;color:var(--muted);font-size:11px;letter-spacing:.08em;opacity:0;animation:alertFade 4s ease forwards}
.mgmt-alerts .msg.warn{border-color:var(--warning);color:var(--warning)}
@keyframes alertFade{0%{opacity:0;transform:translateX(-10px)}10%{opacity:.9;transform:translateX(0)}90%{opacity:.9}100%{opacity:0}}


/* Log color scheme (authoritative) */
.entry.mood { color: #d4af37; }           /* gold for mood changes */
.entry.warn { color: var(--danger); }     /* red for efficiency warnings */
.entry.data { color: #79a6b9; }           /* titles accent for DATA REFINED */
.entry.inspo { color: var(--ink); }       /* same as UNPAID BREAK per spec */



/* Strong log color overrides */
.log .entry.mood, .log .entry.mood * { color: #d4af37 !important; }         /* gold */
.log .entry.warn, .log .entry.warn * { color: var(--danger) !important; }   /* red */
.log .entry.data, .log .entry.data * { color: #79a6b9 !important; }         /* accent blue */
.log .entry.inspo, .log .entry.inspo * { color: var(--ink) !important; }    /* unpaid break color */