/* ══════════════════════════════════════════════
   IT-Master Kali Linux Simulator — styles.css
   Dark hacker theme, green terminal, red accents
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#05060a;--surface:#0a0b12;--card:#0e1018;--elevated:#141722;
  --kali-blue:#367bf0;--kali-green:#00ff41;--kali-red:#ef4444;
  --green:#00ff41;--green-dim:#00cc33;--green-bg:rgba(0,255,65,0.06);
  --red:#ef4444;--red-b:#f87171;--red-bg:rgba(239,68,68,0.08);
  --cyan:#22d3ee;--blue:#367bf0;--purple:#a78bfa;--amber:#fbbf24;
  --text:#d4d4d8;--dim:#6b6b80;--muted:#3e3e52;
  --border:rgba(255,255,255,0.05);--border-h:rgba(255,255,255,0.1);
  --grad-kali:linear-gradient(135deg,#367bf0,#2563eb);
  --grad-red:linear-gradient(135deg,#ef4444,#dc2626);
  --glow-green:0 0 20px rgba(0,255,65,0.1);
  --glow-red:0 4px 20px rgba(239,68,68,0.2);
  --r:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;font-size:14px;line-height:1.6;}
a{text-decoration:none;color:inherit;}
::selection{background:var(--kali-blue);color:#fff;}

/* ═══ TOPBAR ═══ */
.topbar{position:sticky;top:0;z-index:100;background:rgba(5,6,10,0.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:52px;}
.topbar::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--kali-blue),var(--kali-green),var(--kali-blue));}
.topbar__inner{max-width:100%;height:100%;padding:0 16px;display:flex;align-items:center;gap:12px;}
.topbar__logo{font-size:16px;font-weight:800;white-space:nowrap;}
.topbar__accent{background:var(--grad-red);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.topbar__sep{width:1px;height:18px;background:rgba(255,255,255,0.06);}
.topbar__title{font-size:12px;color:var(--kali-blue);font-weight:700;white-space:nowrap;}
.topbar__phase{margin-left:auto;font-size:10px;font-weight:700;padding:4px 12px;border-radius:16px;background:var(--green-bg);border:1px solid rgba(0,255,65,0.12);color:var(--green);letter-spacing:0.5px;white-space:nowrap;}
.topbar__nav{display:flex;gap:2px;margin-left:10px;}
.topbar__nav a{padding:6px 12px;font-size:11px;font-weight:600;color:var(--dim);border-radius:6px;transition:all 0.2s;}
.topbar__nav a:hover{color:var(--cyan);background:rgba(34,211,238,0.06);}

/* ═══ APP LAYOUT ═══ */
.app{display:flex;flex:1;min-height:0;}

/* ═══ LEFT PANEL ═══ */
.panel{width:300px;flex-shrink:0;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.06) transparent;}
.panel__section{display:flex;flex-direction:column;gap:6px;}
.panel__section--grow{flex:1;min-height:0;overflow-y:auto;}
.panel__label{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}

/* Target Card */
.target-card{padding:12px;border-radius:8px;background:var(--card);border:1px solid var(--border);}
.target-card__ip{font-family:'Fira Code',monospace;font-size:16px;font-weight:700;color:var(--kali-green);text-shadow:var(--glow-green);}
.target-card__name{font-size:11px;color:var(--dim);margin-top:2px;}
.target-card__status{font-size:11px;color:var(--green);margin-top:4px;}

/* Mission List */
.mission-list{display:flex;flex-direction:column;gap:4px;}
.mission-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:12px;color:var(--dim);border:1px solid transparent;transition:all 0.2s;cursor:default;}
.mission-item--active{background:var(--green-bg);border-color:rgba(0,255,65,0.1);color:var(--text);}
.mission-item--done{opacity:0.5;}
.mission-item--done .mission-item__check{color:var(--green);}
.mission-item__check{width:18px;font-size:12px;flex-shrink:0;text-align:center;}
.mission-item__text{flex:1;line-height:1.4;}

/* Tool List */
.tool-list{display:flex;flex-direction:column;gap:2px;}
.tool-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;transition:all 0.15s;font-size:12px;}
.tool-item:hover{background:rgba(54,123,240,0.06);}
.tool-item__name{font-family:'Fira Code',monospace;font-weight:600;color:var(--kali-blue);min-width:48px;}
.tool-item__desc{color:var(--muted);font-size:11px;}

/* Hint Card */
.hint-card{display:flex;gap:8px;padding:10px;border-radius:8px;background:rgba(54,123,240,0.05);border:1px solid rgba(54,123,240,0.1);font-size:11px;color:var(--dim);line-height:1.5;align-items:flex-start;margin-top:8px;}
.hint-card b{color:var(--kali-green);font-family:'Fira Code',monospace;}

/* Panel Tabs */
.panel__tabs{display:flex;gap:2px;background:rgba(255,255,255,0.02);border-radius:8px;padding:3px;border:1px solid var(--border);}
.panel__tab{flex:1;padding:7px 6px;border:none;border-radius:6px;font-size:10px;font-weight:700;font-family:inherit;cursor:pointer;background:none;color:var(--muted);transition:all 0.2s;white-space:nowrap;}
.panel__tab:hover{color:var(--dim);}
.panel__tab--active{background:rgba(54,123,240,0.12);color:var(--kali-blue);}
.panel__tab-content{display:none;flex:1;overflow-y:auto;min-height:0;}
.panel__tab-content--active{display:flex;flex-direction:column;gap:6px;}

/* Docs */
.docs-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;}
.doc-card{padding:12px;border-radius:8px;background:var(--card);border:1px solid var(--border);cursor:pointer;transition:all 0.2s;}
.doc-card:hover{border-color:var(--border-h);background:var(--elevated);}
.doc-card__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.doc-card__icon{font-size:18px;}
.doc-card__name{font-family:'Fira Code',monospace;font-size:13px;font-weight:700;color:var(--kali-blue);}
.doc-card__tag{font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.8px;text-transform:uppercase;margin-left:auto;}
.doc-card__tag--recon{background:rgba(0,255,65,0.08);color:var(--green);border:1px solid rgba(0,255,65,0.12);}
.doc-card__tag--enum{background:rgba(34,211,238,0.08);color:var(--cyan);border:1px solid rgba(34,211,238,0.12);}
.doc-card__tag--exploit{background:rgba(239,68,68,0.08);color:var(--red-b);border:1px solid rgba(239,68,68,0.12);}
.doc-card__tag--system{background:rgba(167,139,250,0.08);color:var(--purple);border:1px solid rgba(167,139,250,0.12);}
.doc-card__summary{font-size:11px;color:var(--dim);line-height:1.5;margin-bottom:8px;}
.doc-card__syntax{font-family:'Fira Code',monospace;font-size:10px;padding:6px 8px;border-radius:5px;background:rgba(0,0,0,0.3);color:var(--kali-green);margin-bottom:6px;}
.doc-card__when{font-size:10px;color:var(--muted);line-height:1.5;}
.doc-card__when b{color:var(--amber);font-weight:600;}
.doc-card__try{display:inline-block;margin-top:6px;font-family:'Fira Code',monospace;font-size:10px;padding:4px 10px;border-radius:5px;background:rgba(54,123,240,0.08);border:1px solid rgba(54,123,240,0.12);color:var(--kali-blue);cursor:pointer;transition:all 0.15s;}
.doc-card__try:hover{background:rgba(54,123,240,0.15);}

/* Panel CTA */
.panel__cta{flex-shrink:0;padding:14px;border-radius:8px;background:var(--red-bg);border:1px solid rgba(239,68,68,0.1);margin-top:auto;}
.panel__cta-badge{font-size:8px;font-weight:700;color:var(--red-b);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.panel__cta-title{font-size:13px;font-weight:800;margin-bottom:4px;}
.panel__cta p{font-size:10px;color:var(--dim);line-height:1.5;margin-bottom:10px;}
.panel__cta-btn{display:block;text-align:center;padding:9px;border-radius:7px;background:var(--grad-red);color:#fff;font-size:11px;font-weight:700;transition:all 0.25s;box-shadow:var(--glow-red);}
.panel__cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(239,68,68,0.25);}

/* ═══ TERMINAL AREA ═══ */
.terminal-area{flex:1;display:flex;flex-direction:column;padding:14px;gap:10px;min-width:0;}

/* Safety Banner */
.safety-banner{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:8px;background:rgba(54,123,240,0.04);border:1px solid rgba(54,123,240,0.08);font-size:11px;color:var(--dim);flex-shrink:0;}
.safety-banner b{color:var(--kali-blue);}

/* Terminal */
.terminal{flex:1;display:flex;flex-direction:column;background:#0a0a0a;border-radius:var(--r);border:1px solid rgba(54,123,240,0.12);overflow:hidden;min-height:500px;box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 60px rgba(54,123,240,0.03);}
.terminal__bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#111125;border-bottom:1px solid rgba(255,255,255,0.04);user-select:none;flex-shrink:0;}
.terminal__dots{display:flex;gap:6px;}
.terminal__dots i{width:11px;height:11px;border-radius:50%;display:block;}
.terminal__dots i:nth-child(1){background:#ff5f57;}
.terminal__dots i:nth-child(2){background:#febc2e;}
.terminal__dots i:nth-child(3){background:#28c840;}
.terminal__bar-title{flex:1;text-align:center;font-family:'Fira Code',monospace;font-size:11px;color:var(--muted);}
.terminal__bar-tag{font-family:'Fira Code',monospace;font-size:9px;padding:2px 8px;border-radius:4px;background:rgba(54,123,240,0.08);color:var(--kali-blue);border:1px solid rgba(54,123,240,0.1);}

.terminal__body{flex:1;overflow-y:auto;padding:12px 16px;font-family:'Fira Code',monospace;font-size:13px;line-height:1.7;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.06) transparent;cursor:text;}

/* Terminal Lines */
.tl{white-space:pre-wrap;word-break:break-all;margin-bottom:1px;}
.tl--prompt{color:var(--kali-green);}
.tl--out{color:var(--text);}
.tl--err{color:var(--red-b);}
.tl--info{color:var(--cyan);}
.tl--sys{color:var(--kali-blue);}
.tl--dim{color:var(--muted);}
.tl--success{color:var(--green);font-weight:600;}
.tl--warn{color:var(--amber);}
.tl--mission{color:var(--amber);font-weight:600;}
.tl .port{color:var(--kali-green);font-weight:600;}
.tl .service{color:var(--cyan);}
.tl .vuln{color:var(--red-b);font-weight:600;}
.tl .path{color:var(--amber);}
.tl .hl{color:var(--kali-blue);font-weight:600;}

/* Input inline */
.terminal__input-line{display:flex;align-items:flex-end;gap:0;margin-top:2px;}
.terminal__prompt{font-family:'Fira Code',monospace;font-size:13px;color:var(--kali-blue);white-space:pre;margin-right:6px;flex-shrink:0;line-height:1.7;}
.terminal__input{flex:1;background:none;border:none;outline:none;font-family:'Fira Code',monospace;font-size:13px;color:var(--text);caret-color:var(--kali-green);padding:0;line-height:1.7;}

/* Bottom CTA */
.bottom-cta{flex-shrink:0;border-radius:8px;background:var(--red-bg);border:1px solid rgba(239,68,68,0.08);}
.bottom-cta__inner{display:flex;align-items:center;gap:14px;padding:12px 16px;flex-wrap:wrap;}
.bottom-cta__text{flex:1;min-width:220px;}
.bottom-cta__text strong{display:block;font-size:13px;margin-bottom:2px;}
.bottom-cta__text span{font-size:11px;color:var(--dim);}
.bottom-cta__btn{padding:9px 18px;border-radius:7px;background:var(--grad-red);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;transition:all 0.25s;box-shadow:var(--glow-red);}
.bottom-cta__btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(239,68,68,0.25);}

/* ═══ FOOTER ═══ */
.footer{background:var(--bg);text-align:center;padding:28px 16px;border-top:1px solid var(--border);}
.footer__inner{max-width:600px;margin:0 auto;}
.footer__brand{font-size:16px;font-weight:800;margin-bottom:12px;}
.footer__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.footer__links a{font-size:11px;color:var(--dim);transition:color 0.2s;}
.footer__links a:hover{color:var(--cyan);}
.footer__regions{margin-bottom:10px;font-size:11px;color:var(--muted);}
.footer__regions a{color:var(--muted);transition:color 0.2s;}
.footer__regions a:hover{color:#fff;}
.footer__regions span{margin:0 6px;color:rgba(255,255,255,0.08);}
.footer__contact{font-size:11px;color:var(--muted);margin-bottom:8px;}
.footer__copy{font-size:9px;color:rgba(255,255,255,0.15);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){.panel{display:none;}}
@media(max-width:600px){
  .terminal__body{font-size:11px;padding:8px 10px;}
  .terminal__input,.terminal__prompt{font-size:11px;}
  .topbar__nav{display:none;}.topbar__title{display:none;}
  .terminal-area{padding:8px;}
}

/* Scanline */
.terminal__body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 4px);pointer-events:none;z-index:1;}