/* =========================================================
   apoorv@matrix — CRT terminal portfolio
   ========================================================= */

:root{
  --bg:#000600;
  --acc:#00ff9c;          /* primary phosphor */
  --acc-dim:#0b7d55;
  --acc-soft:rgba(0,255,156,.14);
  --white:#d7ffef;
  --warn:#ffd24a;
  --danger:#ff4d5e;
  --panel:rgba(0,14,8,.62);
  --panel-solid:rgba(0,12,7,.9);
  --line:rgba(0,255,156,.22);
  --glow:0 0 6px rgba(0,255,156,.55);
  --mono:'Share Tech Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs:14px;
}
body.theme-amber{ --acc:#ffb642; --acc-dim:#8a5a12; --acc-soft:rgba(255,182,66,.14);
  --white:#fff0d2; --line:rgba(255,182,66,.22); --glow:0 0 6px rgba(255,182,66,.55); --bg:#0a0500; --panel:rgba(16,9,0,.62); --panel-solid:rgba(14,8,0,.9);}
body.theme-cyan{ --acc:#4de3ff; --acc-dim:#0d6f88; --acc-soft:rgba(77,227,255,.14);
  --white:#d6f8ff; --line:rgba(77,227,255,.22); --glow:0 0 6px rgba(77,227,255,.55); --bg:#00060a; --panel:rgba(0,10,16,.62); --panel-solid:rgba(0,9,14,.9);}
body.theme-blood{ --acc:#ff3b52; --acc-dim:#7d1220; --acc-soft:rgba(255,59,82,.14);
  --white:#ffd9de; --line:rgba(255,59,82,.24); --glow:0 0 6px rgba(255,59,82,.55); --bg:#080001; --panel:rgba(16,0,3,.62); --panel-solid:rgba(13,0,2,.9);}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--acc);
  font-family:var(--mono); font-size:var(--fs); line-height:1.5;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  text-shadow:var(--glow);
}
::selection{background:var(--acc); color:#000}

/* ---------- rain canvas ---------- */
#rain{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
.rain-veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.92) 100%)}

/* ---------- CRT ---------- */
.crt-scan{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.38) 2px 4px)}
.crt-scan::after{content:""; position:absolute; left:0; right:0; height:22vh;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.045), transparent);
  animation:sweep 7s linear infinite}
@keyframes sweep{from{top:-25vh}to{top:105vh}}
.crt-vignette{position:fixed; inset:0; z-index:61; pointer-events:none;
  box-shadow:inset 0 0 22vmin rgba(0,0,0,.95); border-radius:2vmin}
.crt-flicker{position:fixed; inset:0; z-index:62; pointer-events:none; background:var(--acc);
  opacity:0; mix-blend-mode:overlay; animation:flick 6s steps(1) infinite}
@keyframes flick{0%,97%{opacity:0}97.5%{opacity:.05}98%{opacity:0}98.5%{opacity:.07}99%{opacity:0}}

/* ---------- boot ---------- */
.boot{position:fixed; inset:0; z-index:40; padding:6vh 6vw; overflow:hidden; cursor:pointer;
  background:rgba(0,0,0,.72)}
.bootlog{margin:0; white-space:pre-wrap; font-size:13px; line-height:1.45; letter-spacing:.3px}
.bootlog b{color:var(--white)}
.bootlog .ok{color:var(--acc)}
.bootlog .warn{color:var(--warn)}
.bootlog .err{color:var(--danger)}
.boot-skip{position:fixed; bottom:4vh; left:0; right:0; text-align:center; color:var(--acc-dim);
  font-size:12px; animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
body:not(.booting) .boot{display:none}

/* ---------- shell ---------- */
.shell{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:24px; perspective:1600px; overflow:hidden}
body.booting .shell{opacity:0; pointer-events:none}
.tilt{flex:0 0 auto; width:min(1180px,100%); height:min(760px,100%); min-height:0;
  transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.window{
  width:100%; height:100%; min-height:0; display:flex; flex-direction:column;
  background:var(--panel); backdrop-filter:blur(3px) saturate(1.2);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 90px rgba(0,0,0,.85), inset 0 0 90px rgba(0,255,156,.04);
  animation:powerOn .85s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes powerOn{
  0%{transform:scaleY(.004) scaleX(.7); filter:brightness(3); opacity:0}
  45%{transform:scaleY(.02) scaleX(1); filter:brightness(2.2); opacity:1}
  70%{transform:scaleY(1) scaleX(1); filter:brightness(1.6)}
  100%{transform:none; filter:none}
}

/* titlebar */
.titlebar{display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-bottom:1px solid var(--line); background:linear-gradient(var(--acc-soft), transparent)}
.dots{display:flex; gap:6px}
.d{width:10px; height:10px; border-radius:50%; display:block; opacity:.85}
.d.r{background:#ff5f57}.d.y{background:#febc2e}.d.g{background:#28c840}
.title{flex:1; color:var(--white); opacity:.8; font-size:12px; letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badges{display:flex; gap:8px; align-items:center}
.badge{font-size:11px; border:1px solid var(--line); padding:1px 7px; border-radius:3px; color:var(--acc); opacity:.9}
.badge.live{color:var(--acc); animation:pulse 1.8s ease-in-out infinite}

/* body layout */
.term-body{flex:1; display:grid; grid-template-columns:246px 1fr; min-height:0}
.sidebar{border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), transparent)}
.side-head{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:2px; color:var(--white); opacity:.75}
.side-head .dim{letter-spacing:0; opacity:.55; font-size:11px}
.tree{flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 6px}
.side-foot{border-top:1px solid var(--line); padding:10px 12px; font-size:11px; color:var(--acc-dim)}
.meter{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.meter span{width:26px; opacity:.8}
.meter i{flex:1; height:6px; border:1px solid var(--line); display:block; position:relative}
.meter b{position:absolute; inset:1px auto 1px 1px; background:var(--acc); opacity:.55; width:61%; display:block}
.meter b.net{width:100%; animation:netpulse 2.4s ease-in-out infinite}
@keyframes netpulse{0%,100%{opacity:.25}50%{opacity:.7}}
.meter em{font-style:normal; opacity:.75; width:44px; text-align:right}
.hint{margin-top:8px; opacity:.7}
.hint b{color:var(--acc)}

/* tree nodes */
.node{display:flex; align-items:center; gap:7px; padding:3px 8px; cursor:pointer; border-radius:3px;
  white-space:nowrap; color:var(--acc); opacity:.82; user-select:none}
.node:hover{background:var(--acc-soft); opacity:1; transform:translateX(2px)}
.node.active{background:var(--acc-soft); opacity:1; box-shadow:inset 2px 0 0 var(--acc)}
.node .ico{width:14px; flex:0 0 14px; text-align:center; opacity:.9}
.node .nm{overflow:hidden; text-overflow:ellipsis}
.node.file{color:var(--white); opacity:.72}
.node.file:hover{opacity:1}
.node .lock{margin-left:auto; opacity:.55; font-size:10px}
.children{margin-left:12px; border-left:1px dashed var(--line); padding-left:4px; overflow:hidden}
.children[hidden]{display:none}

/* main output */
.main{display:flex; flex-direction:column; min-width:0; min-height:0}
.viewport{flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 18px}
.stream>*{animation:fadeIn .18s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(2px)}to{opacity:1; transform:none}}
.line{white-space:pre-wrap; word-break:break-word}
.echo{color:var(--white); opacity:.85; margin-top:14px}
.echo .ps{color:var(--acc); opacity:.7}
.err{color:var(--danger)}
.warn{color:var(--warn)}
.dim{opacity:.55}
.white{color:var(--white)}
.tag{color:var(--acc); border:1px solid var(--line); padding:0 6px; border-radius:2px; font-size:11px}

/* file document rendering */
.doc{border:1px solid var(--line); margin:10px 0 4px; background:rgba(0,0,0,.35)}
.doc-head{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:6px 10px;
  border-bottom:1px solid var(--line); background:var(--acc-soft); font-size:11px; color:var(--white)}
.doc-head .fname{color:var(--acc); letter-spacing:1px}
.doc-head .sep{opacity:.4}
.doc-body{padding:12px 14px}
.h2{color:var(--white); letter-spacing:2px; margin:14px 0 6px; border-bottom:1px dashed var(--line); padding-bottom:3px}
.h2:first-child{margin-top:0}
.bul{display:flex; gap:8px}
.bul .b{color:var(--acc); opacity:.8}
.kv{display:flex; gap:10px}
.kv .k{color:var(--acc); opacity:.7; min-width:132px}
.kv .v{color:var(--white); opacity:.9}
.code{color:var(--white); background:var(--acc-soft); padding:0 4px; border-radius:2px}
.metric{color:var(--warn)}
.hr{border-top:1px dashed var(--line); margin:12px 0}
.lsgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2px 18px; margin-top:6px}
.lsitem{cursor:pointer; display:flex; gap:8px; padding:2px 4px; border-radius:2px;
  min-width:0; white-space:nowrap}
.lsitem .n{overflow:hidden; text-overflow:ellipsis}
.lsitem .dim{margin-left:auto; font-size:10px}
.lsitem:hover{background:var(--acc-soft)}
.lsitem .n{color:var(--white)}
.lsitem.dir .n{color:var(--acc)}
a.link{color:var(--white); text-decoration:none; border-bottom:1px dotted var(--acc)}
a.link:hover{background:var(--acc); color:#000; text-shadow:none}

/* prompt */
.prompt{display:flex; gap:8px; align-items:center; padding:10px 18px; border-top:1px solid var(--line);
  background:linear-gradient(transparent, var(--acc-soft))}
.ps1{white-space:nowrap; color:var(--acc)}
.ps1 .user{color:var(--acc)} .ps1 .path{color:var(--white)}
.inputwrap{position:relative; flex:1; min-width:0}
.inputwrap input{
  width:100%; background:transparent; border:0; outline:0; color:transparent; caret-color:transparent;
  font:inherit; letter-spacing:inherit; padding:0; position:relative; z-index:2}
.mirror{position:absolute; inset:0; pointer-events:none; display:flex; align-items:center;
  white-space:pre; color:var(--white); overflow:hidden}
.caret{display:inline-block; width:9px; height:1.15em; background:var(--acc); margin-left:1px;
  animation:blink 1.1s steps(1) infinite; box-shadow:var(--glow)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ghost{opacity:.3; color:var(--acc)}

/* statusbar */
.statusbar{display:flex; gap:16px; align-items:center; padding:6px 12px; border-top:1px solid var(--line);
  font-size:11px; color:var(--acc-dim); background:rgba(0,0,0,.35); overflow:hidden; white-space:nowrap}
.sb b{color:var(--acc)}
.sb.grow{flex:1; overflow:hidden; text-overflow:ellipsis; text-align:center}

/* decrypt/glitch */
.scr{color:var(--acc); opacity:.85}
.glitch{animation:glx .22s steps(2) 3}
@keyframes glx{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}100%{transform:none}}
.redalert{animation:red .35s ease 3}
@keyframes red{50%{filter:hue-rotate(-90deg) saturate(2)}}

/* mobile nav */
.mobile-nav{display:none; position:fixed; z-index:30; left:0; right:0; bottom:0; gap:6px; padding:8px;
  background:var(--panel-solid); border-top:1px solid var(--line); overflow-x:auto}
.mobile-nav button{flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--acc);
  font:inherit; font-size:12px; padding:6px 12px; border-radius:3px}
.mobile-nav button:active{background:var(--acc); color:#000}

/* scrollbars */
*::-webkit-scrollbar{width:8px; height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--acc-dim); border-radius:8px}

/* responsive */
@media (max-width:900px){
  .shell{padding:0; height:100dvh}
  .statusbar{display:none}
  .tilt{height:100%; transform:none !important}
  .window{border-radius:0; border-left:0; border-right:0}
  .term-body{grid-template-columns:1fr}
  .sidebar{display:none}
  .statusbar .sb:not(.grow){display:none}
  .mobile-nav{display:flex}
  .prompt{padding-bottom:12px}
  .main{padding-bottom:52px}
  .viewport{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important}
  .crt-scan::after{display:none}
}