@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');

:root {
  --g:#00ff41; --a:#ffb300; --r:#ff2233; --b:#00cfff;
  --p:#b44fff; --o:#ff6a00; --teal:#00e5cc; --pink:#ff4488;
  --bg:rgba(6,14,8,0.97); --bdr:#00ff4122; --bhi:#00ff4158;
  --tx:#b8e8c8; --txd:#5a8a6a; --sc:#00ff4102;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:#040a06;}
body{color:var(--tx);font-family:'Share Tech Mono',monospace;width:100vw;cursor:crosshair;}

/* SCANLINES */
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,var(--sc) 3px,var(--sc) 4px);pointer-events:none;z-index:9990;}

/* ── NAVBAR ── */
.navbar{display:flex;align-items:center;height:54px;background:var(--bg);border-bottom:1px solid var(--bhi);padding:0 16px;gap:0;position:relative;z-index:100;flex-shrink:0;}
.navbar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,255,65,.05)0%,transparent 30%,transparent 70%,rgba(0,255,65,.05)100%);pointer-events:none;}
.nav-brand{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;letter-spacing:4px;color:var(--g);text-shadow:0 0 20px var(--g);white-space:nowrap;margin-right:16px;}
.nav-brand b{color:var(--a);}
.nav-links{display:flex;gap:2px;flex:1;}
.nav-link{font-family:'Orbitron',sans-serif;font-size:10.5px;letter-spacing:1.5px;padding:6px 12px;border:1px solid transparent;color:var(--txd);cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.nav-link:hover{color:var(--g);border-color:var(--bhi);}
.nav-link.active{color:var(--g);border-color:var(--g);background:rgba(0,255,65,.06);text-shadow:0 0 8px var(--g);}
.nav-link .nl-icon{font-size:13px;}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.status-pill{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:1px;padding:4px 9px;border:1px solid;}
.pill-g{color:var(--g);border-color:var(--g)44;}
.pill-r{color:var(--r);border-color:var(--r)44;animation:blink 1.8s infinite;}
.pill-a{color:var(--a);border-color:var(--a)44;}
.dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.dot-g{background:var(--g);box-shadow:0 0 5px var(--g);animation:dp 1s infinite;}
.dot-r{background:var(--r);box-shadow:0 0 5px var(--r);animation:dp .7s infinite;}
.dot-a{background:var(--a);box-shadow:0 0 4px var(--a);}
.zulu-block{text-align:right;}
.zulu{font-family:'Orbitron',sans-serif;font-size:14px;color:var(--a);letter-spacing:2px;text-shadow:0 0 8px var(--a);white-space:nowrap;min-width:140px;display:inline-block;}
.zlbl{font-size:9px;color:var(--txd);letter-spacing:2px;}

/* ── PANEL ── */
.panel{background:var(--bg);border:1px solid var(--bdr);position:relative;overflow:hidden;}
.panel::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,255,65,.018)0%,transparent 55%);pointer-events:none;z-index:0;}
.ph{padding:6px 10px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:rgba(0,255,65,.03);flex-shrink:0;position:relative;z-index:1;}
.pt{font-family:'Orbitron',sans-serif;font-size:10.5px;letter-spacing:2px;color:var(--g);text-shadow:0 0 7px var(--g);}
.ps{font-size:9.5px;color:var(--txd);letter-spacing:1px;}
.live{color:var(--g)!important;animation:blink 3s infinite;}

/* ── BUTTONS ── */
.btn{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;padding:6px 14px;border:1px solid;cursor:pointer;transition:all .2s;background:transparent;}
.btn-g{color:var(--g);border-color:var(--g);}
.btn-g:hover{background:rgba(0,255,65,.1);}
.btn-a{color:var(--a);border-color:var(--a);}
.btn-a:hover{background:rgba(255,179,0,.1);}
.btn-r{color:var(--r);border-color:var(--r);}
.btn-r:hover{background:rgba(255,34,51,.1);}
.btn-p{color:var(--p);border-color:var(--p);}
.btn-p:hover{background:rgba(180,79,255,.1);}
.btn-b{color:var(--b);border-color:var(--b);}
.btn-b:hover{background:rgba(0,207,255,.1);}
.btn-t{color:var(--teal);border-color:var(--teal);}
.btn-t:hover{background:rgba(0,229,204,.1);}
.btn:disabled{opacity:.3;cursor:not-allowed;}

/* ── ANIMATIONS ── */
@keyframes dp{0%,100%{transform:scale(1);}50%{transform:scale(1.7);opacity:.5;}}
@keyframes blink{0%,88%,100%{opacity:1;}92%{opacity:.1;}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.8;}100%{transform:scale(2.5);opacity:0;}}
@keyframes slide-in{from{transform:translateX(15px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slide-up{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:rgba(0,255,65,.03);}
::-webkit-scrollbar-thumb{background:rgba(0,255,65,.35);border-radius:2px;}

/* ── PAGE WRAPPER ── */
.page{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.page-body{flex:1;overflow:hidden;display:flex;gap:2px;padding:2px;}

/* ── TAGS ── */
.tag{font-size:9px;padding:2px 5px;border:1px solid;letter-spacing:.5px;}
.tag-r{color:var(--r);border-color:var(--r);}
.tag-a{color:var(--a);border-color:var(--a);}
.tag-g{color:var(--g);border-color:var(--g);}
.tag-b{color:var(--b);border-color:var(--b);}
.tag-p{color:var(--p);border-color:var(--p);}
.tag-o{color:var(--o);border-color:var(--o);}
.tag-t{color:var(--teal);border-color:var(--teal);}

/* ── TICKER ── */
.ticker{background:rgba(0,255,65,.02);border-top:1px solid var(--bdr);overflow:hidden;display:flex;align-items:center;height:28px;flex-shrink:0;}
.tlbl{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;color:var(--g);padding:0 12px;white-space:nowrap;border-right:1px solid var(--bdr);background:rgba(0,255,65,.04);height:100%;display:flex;align-items:center;}
.tscroll{display:flex;gap:40px;animation:tick 60s linear infinite;white-space:nowrap;padding:0 14px;}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.titem{font-size:12px;color:var(--tx);}
.titem em{color:var(--a);font-style:normal;}

/* ── INTEL FEED SHARED ── */
.ifeed-wrap{overflow:hidden;position:relative;flex:1;}
.ifeed-wrap.feed-expanded{overflow-y:auto;}
.fscroll{animation:fmove 100s linear infinite;padding:2px 0;}
.fscroll:hover{animation-play-state:paused;}
.fscroll.feed-paused{animation:none;}
@keyframes fmove{from{transform:translateY(0);}to{transform:translateY(-50%);}}
.fi{padding:4px 10px;border-bottom:1px solid rgba(0,255,65,.04);cursor:pointer;}
.fi:hover{background:rgba(0,255,65,.035);}
.fi-top{display:flex;justify-content:space-between;margin-bottom:1px;}
.ftime{font-size:10px;color:var(--txd);}
.ftext{font-size:13px;color:var(--tx);line-height:1.5;font-family:'Rajdhani',sans-serif;}
.fi-open{background:rgba(0,255,65,.05);border-left:2px solid var(--g);}
.fi-expand{padding:6px 0 4px;animation:slide-up .2s ease-out;}
.fi-desc{font-size:12px;color:var(--txd);line-height:1.6;font-family:'Rajdhani',sans-serif;margin-bottom:6px;}
.fi-cred{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:.5px;color:var(--txd);margin-bottom:6px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.cred-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-left:3px;}
.cred-pip{display:inline-block;width:10px;height:4px;border-radius:1px;margin-right:1px;}
.fi-actions{display:flex;gap:4px;}
.fi-btn{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.5px;padding:4px 10px;border:1px solid var(--bdr);color:var(--txd);background:transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:all .15s;}
.fi-btn:hover{border-color:var(--g);color:var(--g);background:rgba(0,255,65,.06);}
.fi-btn-src{border-color:var(--a);color:var(--a);}
.fi-btn-src:hover{border-color:var(--a);color:#fff;background:rgba(0,170,255,.15);}

/* ── MARKET ROW ── */
.mrow{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;border-bottom:1px solid rgba(0,255,65,.05);}
.msym{color:var(--txd);font-size:11px;width:52px;}
.mpr{font-family:'Orbitron',sans-serif;font-size:14px;}
.mch{font-size:12px;min-width:48px;text-align:right;}
.up{color:var(--g);}
.dn{color:var(--r);}

/* ── SPAWN STYLES ── */
.smsg{font-size:12px;line-height:1.5;font-family:'Rajdhani',sans-serif;}
.slbl{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;margin-bottom:1px;}
.slbl-sp{color:var(--p);text-shadow:0 0 6px var(--p);}
.slbl-s2{color:var(--teal);text-shadow:0 0 6px var(--teal);}
.slbl-op{color:var(--a);}
@keyframes tdot{0%,80%,100%{opacity:.1;}40%{opacity:1;}}
.tdots span{animation:tdot 1.4s infinite;}
.tdots span:nth-child(2){animation-delay:.2s;}
.tdots span:nth-child(3){animation-delay:.4s;}

/* ── FORMS ── */
.input{background:rgba(0,5,2,.98);border:1px solid var(--bdr);color:var(--tx);font-family:'Share Tech Mono',monospace;font-size:12px;padding:6px 10px;outline:none;width:100%;}
.input:focus{border-color:var(--g);}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{font-family:'Orbitron',sans-serif;font-size:9.5px;letter-spacing:1.5px;color:var(--txd);padding:6px 8px;border-bottom:1px solid var(--bdr);text-align:left;}
.tbl td{font-size:12px;padding:6px 8px;border-bottom:1px solid rgba(0,255,65,.05);font-family:'Rajdhani',sans-serif;}
.tbl tr:hover td{background:rgba(0,255,65,.03);}

/* ── THREAT SCORE ── */
.threat-bar{height:3px;background:var(--bdr);border-radius:1px;overflow:hidden;margin-top:3px;}
.threat-fill{height:100%;border-radius:1px;transition:width 1s ease;}

/* ── TUTORIAL TIPS ── */
.tip-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;}
.tip-highlight{position:fixed;z-index:9999;border:2px solid #ffd700;border-radius:4px;pointer-events:none;box-shadow:0 0 0 3000px rgba(0,0,0,.55),0 0 20px rgba(255,215,0,.4);transition:all .3s ease;}
.tip-bubble{position:fixed;z-index:10000;background:#fff;color:#111;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;padding:10px 16px;border-radius:12px;max-width:260px;line-height:1.5;box-shadow:0 4px 20px rgba(0,0,0,.4);animation:tip-pop .25s ease-out;}
.tip-bubble .tip-title{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;color:#b44fff;margin-bottom:4px;}
.tip-bubble .tip-text{color:#222;}
.tip-bubble .tip-btns{display:flex;gap:6px;margin-top:8px;justify-content:flex-end;}
.tip-bubble .tip-btn{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;padding:4px 12px;border:none;border-radius:4px;cursor:pointer;}
.tip-btn-next{background:#b44fff;color:#fff;}
.tip-btn-next:hover{background:#9a3de0;}
.tip-btn-voice{background:linear-gradient(135deg,#00c853,#00b0ff);animation:tipVoicePulse 1.5s infinite;}
.tip-btn-voice:hover{filter:brightness(1.15);}
@keyframes tipVoicePulse{0%,100%{box-shadow:0 0 4px rgba(0,200,83,0.4);}50%{box-shadow:0 0 12px rgba(0,200,83,0.7);}}
.tip-btn-skip{background:transparent;color:#888;border:1px solid #ccc !important;}
.tip-btn-skip:hover{color:#444;}
.tip-arrow{position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg);}
.tip-arrow-bottom{bottom:-6px;left:30px;}
.tip-arrow-top{top:-6px;left:30px;}
.tip-arrow-left{left:-6px;top:50%;margin-top:-6px;}
.tip-arrow-right{right:-6px;top:50%;margin-top:-6px;}
.tip-step{font-family:'Orbitron',sans-serif;font-size:7px;color:#aaa;letter-spacing:1px;margin-bottom:2px;}
.tip-backdrop{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);pointer-events:none;}
.tip-centered{box-shadow:0 8px 40px rgba(0,0,0,.6);}
@keyframes tip-pop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}

/* Persistent cloud hint bubbles */
.hint-cloud{
  position:fixed;z-index:9998;
  background:linear-gradient(135deg,#ffd700,#ffaa00);color:#111;
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;
  padding:10px 36px 10px 16px;border-radius:18px;
  box-shadow:0 4px 20px rgba(255,215,0,.4),0 0 30px rgba(255,170,0,.15);
  animation:cloud-bounce 2s ease-in-out infinite, cloud-in .4s ease-out;
  max-width:300px;line-height:1.4;
}
.hint-cloud::after{
  content:'';position:absolute;bottom:-8px;left:30px;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #ffaa00;
}
.hint-cloud.arrow-top::after{bottom:auto;top:-8px;border-top:none;border-bottom:9px solid #ffaa00;}
.hint-cloud.arrow-left::after{bottom:auto;top:50%;margin-top:-9px;left:-8px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:none;border-right:9px solid #ffaa00;}
.hint-cloud-center::after{left:50%;margin-left:-9px;}
.hint-cloud-center.arrow-top::after{top:-8px;bottom:auto;left:50%;margin-left:-9px;}
.hint-cloud-close{
  position:absolute;top:4px;right:8px;background:none;border:none;color:#88660088;font-size:18px;cursor:pointer;line-height:1;padding:2px 4px;
}
.hint-cloud-close:hover{color:#111;}
@keyframes cloud-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes cloud-bounce-center{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-6px);}}
@keyframes cloud-in{from{opacity:0;transform:translateY(12px) scale(.9);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ══════════════════════════════════════════════
   MOBILE HAMBURGER NAV
   ══════════════════════════════════════════════ */
.nav-hamburger{display:none;background:none;border:none;color:var(--g);font-size:22px;cursor:pointer;padding:4px 8px;z-index:101;}

@media(max-width:900px){
  /* Hamburger visible */
  .nav-hamburger{display:block;}
  /* Nav links become slide-down drawer */
  .nav-links{display:none;position:absolute;top:54px;left:0;right:0;background:rgba(6,14,8,.98);border-bottom:1px solid var(--bhi);flex-direction:column;gap:0;padding:6px 0;z-index:200;}
  .nav-links.open{display:flex;}
  .nav-link{padding:12px 20px;font-size:12px;border-bottom:1px solid var(--bdr);gap:8px;}
  .nav-link .nl-icon{font-size:16px;}
  /* Simplify nav-right */
  .nav-right{gap:6px;}
  .status-pill{font-size:8px;padding:3px 6px;letter-spacing:.5px;}
  .zulu{font-size:12px;min-width:110px;}
  .zlbl{font-size:7px;}
  /* Page body scrollable */
  .page{height:100vh;height:100dvh;overflow:hidden;}
  .page-body{overflow-y:auto;overflow-x:hidden;flex-direction:column;gap:2px;padding:2px;}
  /* Hide extra status pills on small screens */
  .nav-right .status-pill:nth-child(n+3){display:none;}
  /* Panels full width */
  .panel{border-radius:0;}
  /* Ticker smaller */
  .ticker{height:24px;}
  .tlbl{font-size:8px;padding:0 8px;}
  .titem{font-size:10px;}
  /* Hint clouds responsive */
  .hint-cloud{max-width:85vw;font-size:15px;padding:12px 38px 12px 16px;animation:cloud-bounce-center 2s ease-in-out infinite, cloud-in .4s ease-out;}
  /* Tutorial tips responsive — centered modal on mobile */
  .tip-bubble{max-width:85vw;font-size:14px;padding:14px 18px;border-radius:14px;}
  .tip-bubble .tip-title{font-size:11px;margin-bottom:6px;}
  .tip-bubble .tip-text{font-size:14px;line-height:1.6;}
  .tip-bubble .tip-btn{font-size:10px;padding:8px 18px;}
  .tip-bubble .tip-step{font-size:8px;}
  .tip-bubble .tip-btns{margin-top:10px;}
  /* Buttons touch-friendly */
  .btn{padding:8px 16px;font-size:10px;}
  .fi-btn{padding:6px 12px;font-size:9px;}
  /* Tags bigger touch targets */
  .tag{font-size:10px;padding:3px 7px;}
  /* Info bubble full width on mobile */
  .info-bubble{left:4px!important;right:4px!important;max-width:none!important;min-width:0!important;top:auto!important;bottom:60px!important;}
  /* Scrollbars wider for touch */
  ::-webkit-scrollbar{width:6px;height:6px;}
  /* Scanlines off on mobile — saves GPU */
  body::before{display:none;}
  /* Body cursor normal on mobile */
  body{cursor:default;}
  html,body{overflow:auto;}
  /* Touch-friendly inputs */
  .input{font-size:16px!important;padding:8px 10px;}
  select,input,textarea{font-size:16px;}
}