/* ============================================================
   BREACHLAB — design tokens
   Palette: charcoal-blue console, signal-amber accent, teal success
   Type: IBM Plex Mono (console/data), Inter (UI/body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:        #0A0D13;
  --bg-elev:   #10141D;
  --bg-card:   #141926;
  --border:    #232A3A;
  --border-hi: #333D54;
  --text:      #E8ECF6;
  --text-dim:  #8B93A8;
  --text-faint:#5B6479;

  --accent:      #FF9152;   /* signal amber */
  --accent-dim:  #C96E38;
  --accent-glow: rgba(255,145,82,0.16);

  --teal:        #4FE0C4;   /* success / cleared */
  --teal-glow:   rgba(79,224,196,0.14);

  --danger:      #FF5D73;
  --danger-glow: rgba(255,93,115,0.14);

  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,145,82,0.07), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(79,224,196,0.05), transparent 35%);
  pointer-events:none;
  z-index:0;
}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::selection{background:var(--accent-glow); color:var(--text);}

.mono{font-family:var(--font-mono);}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,19,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:600; font-size:17px; letter-spacing:0.02em;}
.brand-dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);}
.brand-dot.on{background:var(--teal); box-shadow:0 0 12px var(--teal);}
.nav-links{display:flex; align-items:center; gap:8px;}
.nav-links a, .nav-links button{
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--text-dim);
  padding:8px 14px; border-radius:var(--radius-sm); background:transparent; border:none; cursor:pointer;
  transition:color .15s, background .15s;
}
.nav-links a:hover, .nav-links button:hover{color:var(--text); background:var(--bg-elev);}
.nav-cta{
  color:var(--bg) !important; background:var(--accent) !important; font-weight:600 !important;
}
.nav-cta:hover{background:#ffa068 !important;}
.nav-user{display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border-radius:999px; border:1px solid var(--border); font-size:13px;}
.nav-avatar{width:26px; height:26px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px;}

/* ---------- Hero / terminal ---------- */
.hero{padding:88px 0 56px; position:relative; z-index:1;}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--accent);}
.hero h1{
  font-family:var(--font-sans); font-weight:800; font-size:clamp(32px,5vw,52px);
  line-height:1.08; letter-spacing:-0.02em; margin:0 0 18px; max-width:720px;
}
.hero h1 span{color:var(--accent);}
.hero p.lede{color:var(--text-dim); font-size:17px; max-width:560px; margin:0 0 32px;}

.terminal{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; font-family:var(--font-mono); font-size:13.5px; color:var(--text-dim);
  max-width:560px; box-shadow:0 20px 60px -30px rgba(0,0,0,0.6);
}
.terminal .tbar{display:flex; gap:6px; margin-bottom:14px;}
.terminal .tdot{width:9px; height:9px; border-radius:50%; background:var(--border-hi);}
.terminal-line{white-space:pre-wrap;}
.terminal-line .ok{color:var(--teal);}
.terminal-line .warn{color:var(--accent);}
.cursor{display:inline-block; width:7px; height:14px; background:var(--accent); margin-left:2px; animation:blink 1s step-end infinite; vertical-align:text-bottom;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.cursor{animation:none;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .1s, background .15s, border-color .15s;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--accent); color:#180D06;}
.btn-primary:hover{background:#ffa068;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-hi);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- Section headers ---------- */
.section{padding:56px 0; position:relative; z-index:1;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:24px; margin:0 0 6px; letter-spacing:-0.01em;}
.section-head p{color:var(--text-dim); margin:0; font-size:14.5px;}

/* ---------- Lab cards / dossiers ---------- */
.lab-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px;}
.lab-card{
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .15s, transform .15s;
}
.lab-card:hover{border-color:var(--border-hi); transform:translateY(-2px);}
.lab-card .ghost-num{
  position:absolute; top:-18px; right:-6px; font-family:var(--font-mono); font-weight:700;
  font-size:96px; color:var(--text); opacity:0.04; line-height:1; pointer-events:none;
}
.lab-code{font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:0.05em;}
.lab-card h3{font-size:17px; margin:8px 0 8px; letter-spacing:-0.01em;}
.lab-card p{color:var(--text-dim); font-size:13.5px; margin:0 0 16px;}
.lab-meta{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid var(--border-hi); color:var(--text-dim);
}
.chip.easy{border-color:rgba(79,224,196,0.35); color:var(--teal);}
.chip.medium{border-color:rgba(255,145,82,0.4); color:var(--accent);}
.chip.hard{border-color:rgba(255,93,115,0.4); color:var(--danger);}
.status{font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px;}
.status::before{content:""; width:6px; height:6px; border-radius:50%;}
.status.locked{color:var(--text-faint);}
.status.locked::before{background:var(--text-faint);}
.status.in-progress{color:var(--accent);}
.status.in-progress::before{background:var(--accent); box-shadow:0 0 8px var(--accent);}
.status.cleared{color:var(--teal);}
.status.cleared::before{background:var(--teal); box-shadow:0 0 8px var(--teal);}

/* ---------- Profile / stats ---------- */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:32px;}
.stat-card{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px;}
.stat-card .label{font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;}
.stat-card .value{font-size:26px; font-weight:700; font-family:var(--font-mono);}
.stat-card .value.accent{color:var(--accent);}
.stat-card .value.teal{color:var(--teal);}

.profile-panel{
  display:flex; align-items:center; gap:16px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:28px;
}
.profile-avatar{
  width:52px; height:52px; border-radius:14px; background:var(--accent-glow); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:19px; flex-shrink:0;
}
.profile-name{font-size:17px; font-weight:700; margin:0 0 3px;}
.profile-rank{font-family:var(--font-mono); font-size:12.5px; color:var(--accent); letter-spacing:0.03em;}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:calc(100vh - 65px); display:flex; align-items:center; justify-content:center; padding:40px 20px; position:relative; z-index:1;}
.auth-card{width:100%; max-width:400px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px;}
.auth-card h1{font-size:22px; margin:0 0 6px;}
.auth-card .sub{color:var(--text-dim); font-size:14px; margin:0 0 26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:500; color:var(--text-dim); margin-bottom:7px;}
.field input{
  width:100%; background:var(--bg-elev); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; border-radius:var(--radius-sm); font-size:14.5px; font-family:var(--font-sans);
  transition:border-color .15s;
}
.field input:focus{border-color:var(--accent); outline:none;}
.form-msg{font-size:13.5px; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:16px; display:none;}
.form-msg.show{display:block;}
.form-msg.error{background:var(--danger-glow); color:var(--danger); border:1px solid rgba(255,93,115,0.3);}
.form-msg.ok{background:var(--teal-glow); color:var(--teal); border:1px solid rgba(79,224,196,0.3);}
.auth-foot{margin-top:20px; text-align:center; font-size:13.5px; color:var(--text-dim);}
.auth-foot a{color:var(--accent); font-weight:600;}

/* ---------- Lab detail page ---------- */
.lab-header{padding:44px 0 28px; border-bottom:1px solid var(--border); position:relative; z-index:1;}
.lab-header .lab-code{font-size:13px; margin-bottom:10px;}
.lab-header h1{font-size:clamp(26px,4vw,36px); margin:0 0 10px;}
.lab-header p{color:var(--text-dim); font-size:15px; max-width:640px; margin:0;}

.step-track{display:flex; gap:6px; margin:20px 0 0;}
.step-dot{flex:1; height:4px; border-radius:2px; background:var(--border-hi);}
.step-dot.done{background:var(--teal);}
.step-dot.active{background:var(--accent);}

.step-panel{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:20px;}
.step-panel.done{border-color:rgba(79,224,196,0.35);}
.step-label{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.step-label .n{width:20px; height:20px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px;}
.step-panel.done .step-label{color:var(--teal);}
.step-panel.done .step-label .n{background:var(--teal-glow); color:var(--teal);}
.step-panel h3{font-size:17px; margin:0 0 10px;}
.step-panel .desc{color:var(--text-dim); font-size:14.5px; margin:0 0 16px;}
.step-panel .hint-toggle{font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); cursor:pointer; margin-bottom:14px; display:inline-block;}
.step-panel .hint-toggle:hover{color:var(--accent);}
.step-panel .hint-box{display:none; background:var(--bg-elev); border:1px dashed var(--border-hi); border-radius:var(--radius-sm); padding:12px 14px; font-size:13.5px; color:var(--text-dim); margin-bottom:16px;}
.step-panel .hint-box.show{display:block;}

.sim-box{background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-bottom:18px; font-family:var(--font-mono); font-size:13px; overflow-x:auto;}
.sim-box .sim-title{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px;}

.answer-row{display:flex; gap:10px;}
.answer-row input{
  flex:1; background:var(--bg-elev); border:1px solid var(--border); color:var(--text);
  padding:11px 13px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:14px;
}
.answer-row input:focus{border-color:var(--accent); outline:none;}
.step-feedback{margin-top:12px; font-size:13.5px; font-family:var(--font-mono); display:none;}
.step-feedback.show{display:block;}
.step-feedback.ok{color:var(--teal);}
.step-feedback.err{color:var(--danger);}
.locked-note{color:var(--text-faint); font-size:13.5px; font-family:var(--font-mono);}

/* generic simulated UI atoms used inside lab challenges */
.fake-app{background:#0D1119; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
.fake-app .fake-topbar{background:var(--bg-elev); padding:8px 12px; font-size:11px; color:var(--text-faint); border-bottom:1px solid var(--border); font-family:var(--font-mono);}
.fake-app .fake-body{padding:16px;}
table.data-tbl{width:100%; border-collapse:collapse; font-size:13px;}
table.data-tbl th, table.data-tbl td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border);}
table.data-tbl th{color:var(--text-faint); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;}

/* ---------- Leaderboard ---------- */
.lb-row{display:grid; grid-template-columns:32px 1fr auto auto; gap:14px; align-items:center; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:8px; background:var(--bg-card);}
.lb-rank{font-family:var(--font-mono); color:var(--text-faint); font-size:13px;}
.lb-rank.top{color:var(--accent); font-weight:700;}
.lb-points{font-family:var(--font-mono); color:var(--teal); font-size:13.5px;}

/* ---------- Loading states ---------- */
.loading-row{
  display:flex; align-items:center; gap:10px; padding:28px 4px;
  color:var(--text-faint); font-family:var(--font-mono); font-size:13px; letter-spacing:0.02em;
}
.spinner{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border-hi); border-top-color:var(--accent);
  animation:breachlab-spin .7s linear infinite;
}
@keyframes breachlab-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:1.6s; } }

.skeleton-card{
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  min-height:190px;
}
.skeleton-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.045) 50%, transparent 70%);
  background-size:200% 100%;
  animation:breachlab-shimmer 1.5s ease-in-out infinite;
}
@keyframes breachlab-shimmer{
  0%{ background-position:150% 0; }
  100%{ background-position:-50% 0; }
}
@media (prefers-reduced-motion: reduce){ .skeleton-card::after{ animation:none; opacity:0.5; } }

.skeleton-bar{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  height:76px; position:relative; overflow:hidden; margin-bottom:28px;
}
.skeleton-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.045) 50%, transparent 70%);
  background-size:200% 100%;
  animation:breachlab-shimmer 1.5s ease-in-out infinite;
}

/* ---------- Lab intro / vulnerability overview ---------- */
.intro-panel{
  background:var(--bg-card); border:1px solid var(--border); border-top:2px solid var(--accent);
  border-radius:var(--radius); padding:26px; margin-bottom:24px;
}
.intro-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.intro-summary{color:var(--text-dim); font-size:14.5px; line-height:1.65; margin:0 0 20px;}
.code-compare{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){ .code-compare{grid-template-columns:1fr;} }
.code-block{border-radius:var(--radius-sm); border:1px solid var(--border); overflow:hidden; background:var(--bg-elev);}
.code-block.bad{border-color:rgba(255,93,115,0.35);}
.code-block.good{border-color:rgba(79,224,196,0.35);}
.code-block-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 12px; border-bottom:1px solid var(--border);
}
.code-block.bad .code-block-label{color:var(--danger); background:var(--danger-glow);}
.code-block.good .code-block-label{color:var(--teal); background:var(--teal-glow);}
.code-block pre{margin:0; padding:14px; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:var(--text); overflow-x:auto; white-space:pre;}

/* ---------- Remediation summary (shown after clearing a lab) ---------- */
.remediation-box{
  margin-top:16px; padding-top:16px; border-top:1px dashed rgba(79,224,196,0.3);
}
.remediation-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px;
}
.remediation-box ul{margin:0; padding:0; list-style:none;}
.remediation-box li{
  display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-dim);
  margin-bottom:8px; line-height:1.5;
}
.remediation-box li::before{content:"✓"; color:var(--teal); font-weight:700; flex-shrink:0;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border); padding:28px 0; color:var(--text-faint); font-size:13px; position:relative; z-index:1;}

@media (max-width:640px){
  .nav-links a span, .nav-links button span{display:none;}
  .hero{padding:56px 0 40px;}
}