/* =============================================================
   CyberSecProLabs — portal theme (light)
   A clean, professional security-training aesthetic: soft off-white
   surfaces, an indigo→cyan accent, crisp line icons, subtle shadows.
   Class names are kept stable so all templates render unchanged.
   (Code blocks inside lab guides intentionally stay dark/terminal-style.)
   ============================================================= */

:root{
  --bg:          #f5f7fc;
  --bg-2:        #eef2fa;
  --ig-card:     #ffffff;
  --card-2:      #f4f7fd;
  --ig-border:   #e1e7f2;
  --border-soft: #edf1f8;
  --ig-text:     #0f1b33;
  --ig-muted:    #5c6b86;
  --ig-link:     #4f46e5;
  --ig-blue:     #4f46e5;
  --ig-blue-dark:#4338ca;
  --accent-2:    #06b6d4;
  --ig-danger:   #e11d48;
  --ok:          #059669;
  --ig-radius:   14px;

  --ig-grad:      linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
  --ig-grad-soft: linear-gradient(135deg,#6366f1 0%,#22d3ee 100%);

  --shadow:    0 10px 30px rgba(24,39,75,.08);
  --shadow-sm: 0 4px 14px rgba(24,39,75,.06);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(860px 480px at 0% 0%, rgba(6,182,212,.09), transparent 55%),
    var(--bg);
  color:var(--ig-text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--ig-link); text-decoration:none; }

/* ---------- promo banner ---------- */
.ig-promo-banner{
  background:linear-gradient(90deg, rgba(79,70,229,.10), rgba(6,182,212,.10));
  border-bottom:1px solid var(--ig-border);
  color:var(--ig-text); text-align:center; font-size:13px; font-weight:600; padding:9px 12px;
  letter-spacing:.2px;
}
.ig-promo-banner a{ color:var(--ig-blue); text-decoration:none; font-weight:700; }
.ig-promo-banner a:hover{ text-decoration:underline; }

/* ---------- top bar ---------- */
.ig-topbar{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ig-border);
  padding:14px 26px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.ig-logo{
  font-family:"SFMono-Regular",ui-monospace,Consolas,Menlo,monospace;
  font-weight:800; font-size:18px; letter-spacing:.4px;
  color:var(--ig-text); display:inline-flex; align-items:center; gap:9px;
}
.ig-logo .mark{
  width:26px; height:26px; flex:none; border-radius:7px;
  background:var(--ig-grad); display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(79,70,229,.30);
}
.ig-logo .mark svg{ width:15px; height:15px; display:block; }
.ig-logo .brand-accent{ color:var(--ig-blue); }
.ig-topbar .right{ display:flex; align-items:center; gap:20px; font-size:13.5px; color:var(--ig-muted); }
.ig-topbar .right a{ color:var(--ig-muted); font-weight:600; transition:color .15s; }
.ig-topbar .right a:hover{ color:var(--ig-text); }
.ig-topbar .right a.logout{ color:var(--ig-danger); }
.ig-badge{
  display:inline-block; padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:700; color:#fff;
  background:var(--ig-grad);
}

/* ---------- buttons ---------- */
.ig-btn{
  width:100%; padding:11px; margin-top:6px; border:none; border-radius:10px;
  background:var(--ig-grad); color:#fff; font-weight:800; font-size:14px;
  cursor:pointer; letter-spacing:.2px; transition:transform .12s, box-shadow .12s;
  box-shadow:0 6px 18px rgba(79,70,229,.24);
}
.ig-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(79,70,229,.32); }
.ig-btn.ghost{
  background:#fff; color:var(--ig-text); border:1px solid var(--ig-border); box-shadow:var(--shadow-sm);
}
.ig-btn.ghost:hover{ border-color:var(--ig-blue); background:#fbfcff; }

/* ---------- auth screens (login) ---------- */
.ig-form-page,.ig-auth-wrap{
  min-height:calc(100vh - 58px); display:flex; align-items:center; justify-content:center; padding:24px;
}
.ig-auth-card{
  width:380px; background:var(--ig-card); border:1px solid var(--ig-border);
  border-radius:var(--ig-radius); padding:38px 40px 26px; text-align:center; box-shadow:var(--shadow);
}
.ig-auth-card .ig-logo{ font-size:22px; margin-bottom:22px; display:inline-flex; }
.ig-auth-card input{
  width:100%; padding:12px 13px; margin-bottom:10px;
  background:#fbfcff; border:1px solid var(--ig-border); border-radius:9px;
  font-size:13.5px; color:var(--ig-text);
}
.ig-auth-card input::placeholder{ color:#9aa7bf; }
.ig-auth-card input:focus{ outline:none; border-color:var(--ig-blue); box-shadow:0 0 0 3px rgba(79,70,229,.14); }
.ig-error{
  background:rgba(225,29,72,.08); border:1px solid rgba(225,29,72,.28); color:var(--ig-danger);
  padding:9px 11px; border-radius:8px; font-size:13px; margin-bottom:12px;
}
.ig-secondary-card{
  width:380px; background:var(--ig-card); border:1px solid var(--ig-border);
  border-radius:var(--ig-radius); padding:16px; text-align:center; margin-top:12px;
  font-size:13px; color:var(--ig-muted); box-shadow:var(--shadow-sm);
}
.ig-secondary-card a{ color:var(--ig-blue); font-weight:700; }

/* ---------- hero ---------- */
.ig-hero{
  position:relative; text-align:center; padding:92px 24px 70px;
  border-bottom:1px solid var(--border-soft);
  background:
    radial-gradient(620px 320px at 50% 0%, rgba(99,102,241,.12), transparent 70%);
}
.ig-hero .eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ig-blue); background:rgba(79,70,229,.08); border:1px solid rgba(79,70,229,.24);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.ig-hero h1{
  font-size:46px; line-height:1.08; margin:0 0 16px; font-weight:800; letter-spacing:-.5px;
  background:linear-gradient(180deg,#0f1b33, #35507f); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ig-hero p{ font-size:17px; color:var(--ig-muted); max-width:620px; margin:0 auto 30px; }
.ig-hero .ig-btn{ width:auto; padding:13px 28px; display:inline-block; font-size:15px; }
.ig-hero .ig-btn.ghost{ margin-left:10px; }

/* ---------- shell / sections ---------- */
.ig-shell{ max-width:1080px; margin:0 auto; padding:40px 22px 80px; }
.ig-stats{ display:flex; gap:16px; justify-content:center; margin:-84px auto 20px; flex-wrap:wrap; position:relative; z-index:2; }
.ig-stat{
  background:var(--ig-card); border:1px solid var(--ig-border); border-radius:var(--ig-radius);
  padding:20px 30px; text-align:center; min-width:150px; box-shadow:var(--shadow);
}
.ig-stat b{ display:block; font-size:28px; font-weight:800;
  background:var(--ig-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ig-stat span{ color:var(--ig-muted); font-size:12px; letter-spacing:.3px; }

.ig-section-title{ text-align:center; margin:56px 0 30px; }
.ig-section-title h2{ font-size:27px; margin:0 0 8px; font-weight:800; letter-spacing:-.3px; }
.ig-section-title p{ color:var(--ig-muted); font-size:14.5px; margin:0; }

/* ---------- lab cards ---------- */
.ig-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.ig-lab-card{
  position:relative; background:var(--ig-card);
  border:1px solid var(--ig-border); border-radius:var(--ig-radius);
  padding:20px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow-sm);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.ig-lab-card:hover{ transform:translateY(-3px); border-color:rgba(79,70,229,.45); box-shadow:0 14px 34px rgba(24,39,75,.12); }
.ig-lab-card .card-top{ display:flex; align-items:center; gap:12px; }
.ig-lab-card .lab-icon{
  width:44px; height:44px; flex:none; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,70,229,.07); border:1px solid var(--ig-border); color:var(--ig-blue);
}
.ig-lab-card .lab-icon svg{ width:22px; height:22px; }
.ig-lab-card .num{
  margin-left:auto; width:26px; height:26px; border-radius:8px;
  background:var(--bg-2); border:1px solid var(--ig-border); color:var(--ig-muted);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;
  font-family:ui-monospace,monospace;
}
.ig-lab-card h4{ margin:4px 0 0; font-size:15.5px; font-weight:700; }
.ig-lab-card p{ margin:0; color:var(--ig-muted); font-size:12.8px; line-height:1.55; flex:1; }
.ig-lab-card .row{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }

.ig-chip{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px;
  border-radius:20px; background:rgba(79,70,229,.09); color:var(--ig-blue); text-transform:uppercase; letter-spacing:.4px;
  border:1px solid rgba(79,70,229,.22); }
.ig-chip.done{ background:rgba(5,150,105,.10); color:var(--ok); border-color:rgba(5,150,105,.28); }
.ig-chip.sev-rce{ background:rgba(225,29,72,.09); color:var(--ig-danger); border-color:rgba(225,29,72,.26); }
.ig-chip.sev-injection{ background:rgba(234,88,12,.10); color:#c2410c; border-color:rgba(234,88,12,.24); }

.ig-lab-card a.launch{ font-size:12.8px; font-weight:700; color:var(--ig-blue); display:inline-flex; align-items:center; gap:4px; }
.ig-lab-card a.launch:hover{ text-decoration:underline; }
.ig-guide-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ig-muted); margin-top:2px; padding-top:8px; border-top:1px solid var(--border-soft); }
.ig-guide-link:hover{ color:var(--ig-text); }

.ig-nav-cta{ padding:9px 18px !important; border-radius:10px; background:var(--ig-grad); color:#fff !important; font-weight:800; }
.ig-nav-cta:hover{ color:#fff !important; }

.ig-footer{ text-align:center; color:var(--ig-muted); font-size:12px; padding:28px; border-top:1px solid var(--border-soft); }
.ig-footer code, code{ background:var(--bg-2); padding:1px 6px; border-radius:5px; font-size:.92em; }

/* ============================================================
   Per-lab guide page (/lab/<n>)
   ============================================================ */
.ig-guide{ max-width:840px; margin:30px auto; }
.ig-guide-head{ display:flex; align-items:center; gap:16px; }
.ig-guide-head .lab-icon{
  width:54px; height:54px; flex:none; border-radius:13px; color:var(--ig-blue);
  background:rgba(79,70,229,.07); border:1px solid var(--ig-border);
  display:flex; align-items:center; justify-content:center;
}
.ig-guide-head .lab-icon svg{ width:28px; height:28px; }
.ig-guide-head .num{
  width:44px; height:44px; flex:none; border-radius:12px; background:var(--bg-2);
  border:1px solid var(--ig-border); color:var(--ig-muted);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; font-family:ui-monospace,monospace;
}
.ig-guide-head h1{ margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:-.3px; }
.ig-guide-head .ig-chip{ margin-right:6px; }

.ig-goal{ margin:18px 0; padding:14px 18px; background:rgba(79,70,229,.06); border:1px solid var(--ig-border);
  border-left:3px solid var(--ig-blue); border-radius:10px; font-size:14.5px; line-height:1.6; }
.ig-guide-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }

.ig-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--ig-border); margin-bottom:20px; }
.ig-tab{ border:none; background:none; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer;
  color:var(--ig-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.ig-tab.active{ color:var(--ig-text); border-bottom-color:var(--ig-blue); }

.ig-steps-list{ margin:0; padding-left:22px; }
.ig-steps-list li{ margin-bottom:18px; }
.ig-steps-list li::marker{ color:var(--ig-blue); font-weight:700; }
.ig-steps-list .step-text{ font-size:14px; line-height:1.65; margin-bottom:8px; }

/* Code blocks stay dark on purpose - terminal readability */
.code-block{ position:relative; margin:8px 0 2px; }
.code-block pre{ margin:0; background:#0f1629; border:1px solid #1f2b45; border-radius:10px; padding:14px 16px; overflow-x:auto; }
.code-block code{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:12.5px; line-height:1.6; color:#e6edf3; white-space:pre; }
.code-block .copy-btn{ position:absolute; top:8px; right:8px; background:#1c2740; color:#c9d1d9; border:1px solid #2b3a5c;
  border-radius:6px; font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; }
.code-block .copy-btn:hover{ background:#26355a; color:#fff; }
.t-com{ color:#8b98b4; font-style:italic; }
.t-str{ color:#ffab70; }
.t-num{ color:#79c0ff; }
.t-kw{ color:#ff7b72; font-weight:700; }
.t-flag{ color:#c4b5fd; }

.ig-downloads{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.ig-dl{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:10px; background:rgba(79,70,229,.07);
  color:var(--ig-blue); font-weight:700; font-size:13px; border:1px solid var(--ig-border); }
.ig-dl:hover{ background:rgba(79,70,229,.12); border-color:var(--ig-blue); }

.ig-burp-setup{ margin-bottom:20px; padding:14px 18px; background:rgba(234,88,12,.06); border:1px solid rgba(234,88,12,.24); border-radius:10px; }
.ig-burp-setup summary{ cursor:pointer; font-weight:700; color:#c2410c; font-size:13.5px; }
.ig-burp-setup .ig-steps-list{ margin-top:12px; }

.ig-fix{ margin:26px 0; padding:16px 18px; background:rgba(5,150,105,.07); border:1px solid rgba(5,150,105,.26);
  border-left:3px solid var(--ok); border-radius:10px; font-size:14px; line-height:1.6; }

.ig-guide-nav{ display:flex; justify-content:space-between; align-items:center; margin:24px 0 44px;
  padding-top:18px; border-top:1px solid var(--ig-border); }
.ig-back-link{ color:var(--ig-muted); font-weight:600; font-size:13.5px; }
.ig-back-link:hover{ color:var(--ig-text); }

@media (max-width:640px){
  .ig-hero h1{ font-size:33px; }
  .ig-stats{ margin-top:-60px; }
}