:root{ --bg:#0a0a0e; --panel:#14141bcc; --line:#24242e; --ink:#e8e8ef;
  --dim:#8a8a96; --amber:#F5A623; --green:#4ADE80; --off:#5a5a66; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,monospace; overflow:hidden; }
#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.glass{ position:fixed; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; backdrop-filter:blur(8px); padding:8px 12px; z-index:5; }
#hud{ top:12px; left:12px; display:flex; align-items:center; gap:14px; }
.title{ color:var(--amber); font-weight:700; letter-spacing:1px; }
.clock{ color:var(--dim); font-size:12px; }
.chips{ display:flex; gap:6px; }
.chip{ background:#14141b; color:var(--dim); border:1px solid var(--line);
  border-radius:10px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; }
.chip[data-active="1"]{ color:var(--amber); border-color:var(--amber); background:#2a2410; }
#legend{ top:12px; right:12px; display:flex; gap:12px; font-size:11px; color:var(--dim); }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px;
  vertical-align:middle; }
.dot.in{ background:var(--green); } .dot.out{ background:var(--amber); }
.dot.off{ background:#2a2418; border:1px solid var(--off); }
#transport{ left:50%; transform:translateX(-50%); bottom:14px; display:flex;
  align-items:center; gap:12px; width:min(880px,94vw); }
.stepbtn{ background:var(--amber); color:#1a1205; border:0; border-radius:8px;
  width:34px; height:34px; font-size:13px; cursor:pointer; flex-shrink:0;
  user-select:none; touch-action:none; }
.stepbtn:active{ filter:brightness(0.85); }
.tlabel{ color:var(--dim); font-size:11px; flex-shrink:0; }
#timeline{ flex:1; height:40px; display:block; cursor:pointer; }
#feed{ top:54px; right:12px; width:300px; max-height:calc(100vh - 150px);
  overflow-y:auto; padding:4px 12px; font-size:12px; line-height:1.4; }
#feed .fb{ padding:7px 0; border-bottom:1px solid var(--line); animation:fbin .35s ease; }
@keyframes fbin{ from{ opacity:0; transform:translateY(-4px); } }
#feed .ft{ color:var(--amber); font-weight:700; letter-spacing:.5px; margin-bottom:3px; }
#feed .fm{ color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#feed .fm b{ color:#ffe6b0; } #feed .fm .ar{ color:var(--dim); }
#feed .fl{ color:var(--green); } #feed .fo{ color:var(--off); }
#feed .fq{ color:var(--dim); font-style:italic; }
#feed::-webkit-scrollbar{ width:6px; }
#feed::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
@media(max-width:900px){ #feed{ display:none; } }
#stats{ top:54px; right:12px; width:384px; padding:12px 14px;
  max-height:calc(100vh - 150px); overflow-y:auto; }
#stats::-webkit-scrollbar{ width:6px; }
#stats::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
#statsHead{ position:relative; display:flex; gap:9px; align-items:center; margin-bottom:9px; }
#statsHead .sx{ position:absolute; top:-3px; right:0; color:var(--dim); cursor:pointer; font-size:15px; }
#statsHead .sx:hover{ color:var(--ink); }
.savi{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid var(--line); background:#1c1c24; }
.sinfo{ min-width:0; flex:1; }
.snm{ color:var(--amber); font-weight:700; font-size:14px; text-decoration:none;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:16px; }
.snm:hover{ text-decoration:underline; }
.snow{ font-size:12px; color:var(--ink); margin-top:2px; }
.snow .off{ color:var(--dim); }
#statsKpi{ display:flex; gap:6px; margin-bottom:8px; }
.kc{ flex:1; background:#16161d; border:1px solid var(--line); border-radius:8px;
  padding:5px 4px; text-align:center; min-width:0; }
.kn{ font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.4px; }
.kv{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; }
.ks{ font-size:9px; color:#6a6a76; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#statsCv{ width:100%; height:184px; display:block; }
#statsTick{ margin-top:10px; }
#statsFlows{ margin-top:12px; }
.ssub{ font-size:9px; color:#6a6a76; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.tcols{ display:flex; gap:10px; }
.frow.sum{ border-bottom:1px dashed var(--line); padding-bottom:3px; margin-bottom:2px; }
.frow.sum .pn{ color:var(--dim); }
.fcol{ flex:1; min-width:0; }
.fh{ font-size:10px; color:var(--dim); margin-bottom:4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.fh.in{ color:var(--green); } .fh.out{ color:var(--amber); }
.frow{ display:flex; justify-content:space-between; gap:6px; font-size:11px;
  padding:2px 0; align-items:baseline; }
.frow[data-login]{ cursor:pointer; }
.frow[data-login]:hover .pn{ color:var(--ink); text-decoration:underline; }
.frow .pn{ color:#b8b8c2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow b{ flex-shrink:0; color:#e8e8ef; }
.frow.off .pn{ color:var(--off); font-style:italic; }
.fnone{ color:var(--off); font-size:11px; }
@media(max-width:900px){ #stats{ display:none !important; } }
#overlay{ position:fixed; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:var(--bg); z-index:20; }
#overlay.hidden{ display:none; }
.spin{ width:34px; height:34px; border:3px solid var(--line);
  border-top-color:var(--amber); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(max-width:640px){ #hist{ display:none; } #legend{ display:none; } }

/* --- search --- */
.search{ position:relative; }
#q{ background:#0f0f15; color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:4px 10px; font:inherit; font-size:12px; width:150px; outline:none; }
#q:focus{ border-color:var(--amber); }
#qlist{ position:absolute; top:32px; left:0; width:200px; background:#12121a;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; z-index:9; display:none; }
#qlist.open{ display:block; }
.qrow{ padding:6px 10px; font-size:12px; color:#c9c9d4; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow:hover, .qrow.sel{ background:#20202a; color:var(--amber); }

/* --- big clock --- */
#bigclock{ top:64px; left:12px; padding:8px 14px; line-height:1; }
#bcTime{ font-size:30px; font-weight:700; color:var(--ink); letter-spacing:1px;
  font-variant-numeric:tabular-nums; }
#bcDate{ font-size:11px; color:var(--dim); margin-top:5px; }

/* --- intro modal --- */
#intro{ position:fixed; inset:0; z-index:30; display:flex; align-items:center;
  justify-content:center; background:rgba(6,6,10,0.82); backdrop-filter:blur(3px); }
#intro.hidden{ display:none; }
.introcard{ width:min(460px,92vw); background:#12121a; border:1px solid var(--line);
  border-radius:16px; padding:24px 26px; }
.introcard h1{ color:var(--amber); font-size:20px; margin:0 0 6px; letter-spacing:1px; }
.introcard .sub{ color:var(--dim); font-size:12px; margin-bottom:16px; line-height:1.4; }
.introcard ul{ list-style:none; padding:0; margin:0 0 18px; }
.introcard li{ font-size:13px; color:var(--ink); padding:6px 0; display:flex; gap:11px;
  align-items:flex-start; line-height:1.35; }
.introcard li b{ color:var(--amber); flex-shrink:0; width:22px; text-align:center; }
.introcard button{ width:100%; background:var(--amber); color:#1a1205; border:0;
  border-radius:10px; padding:11px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }

/* --- mobile block --- */
#mobile{ display:none; }
@media(max-width:760px){
  #mobile{ display:flex; position:fixed; inset:0; z-index:200; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; text-align:center;
    background:var(--bg); padding:0 32px; }
  #mobile .mt{ color:var(--amber); font-size:22px; font-weight:700; letter-spacing:1px; }
  #mobile .mp{ color:var(--dim); font-size:14px; line-height:1.55; }
}