*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#070910;--card:#0f1120;--card2:#171a2d;--border:rgba(255,255,255,0.07);
  --blue:#4285F4;--red:#EA4335;--yellow:#FBBC04;--green:#34A853;--purple:#a855f7;
  --orange:#f97316;--teal:#14b8a6;--pink:#ec4899;
  --text:#f0f0f8;--dim:#7a7a8c;--code:#08090f;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse at 15% 20%,rgba(66,133,244,0.12) 0%,transparent 45%),
  radial-gradient(ellipse at 85% 80%,rgba(168,85,247,0.08) 0%,transparent 45%);
  pointer-events:none;z-index:0}

/* ── START SCREEN ── */
#startScreen{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--bg);text-align:center;padding:24px;
  overflow-y:auto}
.start-logo{font-size:clamp(40px,8vw,68px);font-weight:900;letter-spacing:-0.04em;margin-bottom:10px;cursor:pointer}
.s-blue{color:var(--blue)}.s-red{color:var(--red)}.s-yellow{color:var(--yellow)}
.s-green{color:var(--green)}.s-purple{color:var(--purple)}
.start-sub{font-size:16px;color:var(--dim);margin-bottom:6px}
.start-stats{display:flex;gap:16px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 22px;text-align:center;min-width:100px}
.stat-num{font-size:30px;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:12px;color:var(--dim);margin-top:3px}
.start-cat-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 20px;width:100%;max-width:420px}
.start-cat-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--dim)}
.start-cat-select{
  width:100%;
  appearance:none;-webkit-appearance:none;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:600;
  padding:12px 40px 12px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.start-cat-select:hover{border-color:var(--purple);box-shadow:0 0 0 3px rgba(168,85,247,0.12)}
.start-cat-select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(168,85,247,0.18)}
.start-cat-select option,.start-cat-select optgroup{background:#0f0d1a;color:var(--text)}
.play-btn{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-size:20px;
  font-weight:800;padding:18px 54px;border:none;border-radius:14px;cursor:pointer;
  font-family:'Inter',sans-serif;box-shadow:0 8px 28px rgba(66,133,244,0.4);
  transition:all 0.3s;margin-top:6px}
.play-btn:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 12px 36px rgba(66,133,244,0.55)}

/* ── GAME SCREEN ── */
#gameScreen{display:none;flex-direction:column;min-height:100vh;position:relative;z-index:1}

/* ── NAVBAR ── */
.navbar{position:sticky;top:0;z-index:100;background:rgba(7,9,16,0.92);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border);
  padding:0 16px;height:54px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.nav-logo{font-size:16px;font-weight:900;letter-spacing:-0.03em;margin-right:4px;
  white-space:nowrap;cursor:pointer;transition:opacity 0.2s;flex-shrink:0}
.nav-logo:hover{opacity:0.7}
.gl1{color:var(--blue)}.gl2{color:var(--red)}.gl3{color:var(--yellow)}.gl4{color:var(--green)}
.nav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nb{padding:5px 9px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  transition:all 0.2s;font-family:'Inter',sans-serif;white-space:nowrap;flex-shrink:0}
.nb:hover{transform:translateY(-1px)}
.nb.blue{border-color:rgba(66,133,244,0.4);color:var(--blue)}.nb.blue:hover{background:rgba(66,133,244,0.12)}
.nb.green{border-color:rgba(52,168,83,0.4);color:var(--green)}.nb.green:hover{background:rgba(52,168,83,0.12)}
.nb.yellow{border-color:rgba(251,188,4,0.4);color:var(--yellow)}.nb.yellow:hover{background:rgba(251,188,4,0.12)}
.nb.purple{border-color:rgba(168,85,247,0.4);color:var(--purple)}.nb.purple:hover{background:rgba(168,85,247,0.12)}
.nb.cat{border-color:rgba(249,115,22,0.4);color:var(--orange)}.nb.cat:hover{background:rgba(249,115,22,0.12)}
.nav-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.score-pill{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.lvl-lbl{font-size:11px;font-weight:700;color:var(--yellow);white-space:nowrap}
.solved-notif{background:linear-gradient(135deg,var(--green),#2d9544);color:#fff;
  padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;
  opacity:0;transform:scale(0.8);transition:all 0.3s}
.solved-notif.show{opacity:1;transform:scale(1)}

/* ── CATEGORY FILTER BAR ── */
.cat-filter{padding:8px 16px;border-bottom:1px solid var(--border);display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,0.015)}
.cat-filter::-webkit-scrollbar{display:none}
.cf-btn{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--dim);
  font-family:'Inter',sans-serif;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.cf-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
.cf-btn.active{color:#fff;border-color:transparent}
.cf-btn[data-cat="All"].active{background:linear-gradient(135deg,var(--blue),var(--purple))}
.cf-btn[data-cat="JS Fundamentals"].active{background:var(--yellow);color:#000}
.cf-btn[data-cat="Python"].active{background:var(--blue)}
.cf-btn[data-cat="HTML & CSS"].active{background:var(--orange)}
.cf-btn[data-cat="Algorithms"].active{background:var(--red)}
.cf-btn[data-cat="String Methods"].active{background:var(--green)}
.cf-btn[data-cat="Array Methods"].active{background:var(--teal);color:#000}
.cf-btn[data-cat="SQL"].active{background:var(--purple)}
.cf-btn[data-cat="React & Async"].active{background:var(--pink)}

/* ── HINT DRAWER ── */
.hint-drawer{position:fixed;top:54px;left:0;right:0;z-index:90;
  background:linear-gradient(135deg,rgba(66,133,244,0.12),rgba(52,168,83,0.08));
  border-bottom:1px solid rgba(66,133,244,0.3);padding:14px 20px;
  transform:translateY(-110%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);backdrop-filter:blur(16px)}
.hint-drawer.open{transform:translateY(0)}
.hint-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue);margin-bottom:5px}
.hint-txt{font-size:14px;color:#c8d0e8;line-height:1.65;max-width:900px}

/* ── PROGRESS ── */
.progress-area{padding:8px 16px 0;display:flex;align-items:center;gap:6px}
.ch-nav{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;flex:1}
.ch-nav::-webkit-scrollbar{display:none}
.cn{min-width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--card);
  color:var(--dim);font-size:9px;font-weight:700;cursor:pointer;font-family:'JetBrains Mono',monospace;
  transition:all 0.2s;flex-shrink:0}
.cn:hover{border-color:var(--blue);color:var(--blue)}
.cn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.cn.solved{background:rgba(52,168,83,0.2);border-color:var(--green);color:var(--green)}
.prog-right{display:flex;align-items:center;gap:7px;white-space:nowrap}
.prog-lbl{font-size:11px;color:var(--dim)}
.prog-bar-wrap{width:80px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.prog-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:2px;transition:width 0.6s}

/* ── MAIN GRID ── */
.main-content{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── CHALLENGE CARD ── */
.ch-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.4);animation:fadeUp 0.4s ease forwards}
.ch-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.ch-num-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);font-weight:600}
.diff-badge{padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em}
.de{background:rgba(52,168,83,0.12);color:var(--green);border:1px solid rgba(52,168,83,0.25)}
.dm{background:rgba(251,188,4,0.12);color:var(--yellow);border:1px solid rgba(251,188,4,0.25)}
.dh{background:rgba(234,67,53,0.12);color:var(--red);border:1px solid rgba(234,67,53,0.25)}
.cat-badge{padding:2px 8px;border-radius:999px;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.07em;background:rgba(255,255,255,0.06);color:var(--dim);border:1px solid var(--border)}
.ch-title{font-size:clamp(17px,2vw,24px);font-weight:800;letter-spacing:-0.02em;line-height:1.2}
.ch-desc{font-size:13px;color:#bcc4da;line-height:1.7}
.solved-badge{color:var(--green);font-size:11px;font-weight:700}

/* ── CODE DISPLAY ── */
.code-display-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.4);
  animation:fadeUp 0.4s ease 0.08s forwards;opacity:0}
.code-header{display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--border);background:var(--card2)}
.cd{width:9px;height:9px;border-radius:50%}
.code-filename{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);margin-left:3px}
.code-body{flex:1;background:var(--code);padding:16px;overflow:auto;min-height:150px;max-height:220px}
.code-text{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.8;color:#fff;white-space:pre;tab-size:2}
.blank{color:var(--yellow);font-weight:700;background:rgba(251,188,4,0.1);
  border:1px dashed rgba(251,188,4,0.4);border-radius:3px;padding:1px 5px;font-style:italic}
.options-area{padding:11px 13px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.opt-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--dim);margin-bottom:1px}
.option{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:9px;
  cursor:pointer;transition:all 0.22s;font-family:'JetBrains Mono',monospace;font-size:12px;color:#fff}
.option:hover{border-color:var(--blue);background:rgba(66,133,244,0.08);transform:translateX(2px)}
.option.correct{border-color:var(--green)!important;background:rgba(52,168,83,0.1)!important;color:var(--green)}
.option.wrong{border-color:var(--red)!important;background:rgba(234,67,53,0.13)!important;color:var(--red)}
.opt-key{min-width:19px;height:19px;border-radius:4px;background:var(--card2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
  color:var(--dim);flex-shrink:0;margin-top:1px;font-family:'Inter',sans-serif}
.option.correct .opt-key{background:var(--green);border-color:var(--green);color:#fff}
.option.wrong .opt-key{background:rgba(234,67,53,0.18);border-color:var(--red);color:var(--red)}
.code-editor{flex:1;background:var(--code);border:none;color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.75;
  padding:14px;resize:none;outline:none;min-height:170px;tab-size:2}
.out-panel{background:var(--code);border-top:1px solid var(--border);
  padding:10px 14px;min-height:90px;max-height:140px;overflow-y:auto}
.out-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--dim);margin-bottom:6px}
.test-row{display:flex;align-items:flex-start;gap:6px;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px}
.test-row:last-child{border-bottom:none}
.tr-txt{font-family:'JetBrains Mono',monospace;color:var(--dim);line-height:1.5}
.tp{color:var(--green)}.tf{color:var(--red)}
.res-sum{padding:5px 0 3px;font-size:12px;font-weight:700}
.res-sum.ap{color:var(--green)}.res-sum.pt{color:var(--yellow)}.res-sum.af{color:var(--red)}
.ed-actions{padding:8px 11px;display:flex;gap:6px;border-top:1px solid var(--border);background:var(--card2)}
.btn-run{padding:6px 13px;background:var(--green);color:#fff;border:none;border-radius:6px;
  font-size:11px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.btn-run:hover{background:#2ea34a;transform:scale(1.03)}
.btn-sub{padding:6px 13px;background:var(--blue);color:#fff;border:none;border-radius:6px;
  font-size:11px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.btn-sub:hover{background:#2d72e6;transform:scale(1.03)}
.btn-rst{padding:6px 10px;background:transparent;color:var(--dim);border:1px solid var(--border);
  border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all 0.2s;margin-left:auto}
.btn-rst:hover{color:var(--red);border-color:var(--red)}

/* ── BOTTOM ── */
.bottom-area{padding:0 16px 28px}
.action-row{display:flex;align-items:center;gap:8px;padding:10px 0;flex-wrap:wrap}
.btn-next-ch{padding:9px 22px;background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all 0.22s;box-shadow:0 4px 14px rgba(66,133,244,0.35)}
.btn-next-ch:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(66,133,244,0.5)}
.btn-prev-ch{padding:9px 16px;background:var(--card);color:var(--text);border:1px solid var(--border);
  border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.btn-prev-ch:hover{border-color:var(--blue);color:var(--blue)}
.ch-result-msg{font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px}
.ch-result-msg.ok{color:var(--green);background:rgba(52,168,83,0.1);border:1px solid rgba(52,168,83,0.25)}
.ch-result-msg.no{color:var(--red);background:rgba(234,67,53,0.09);border:1px solid rgba(234,67,53,0.2)}
.score-window{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.sw-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sw-title{font-size:14px;font-weight:800}
.sw-stats{display:flex;gap:12px}
.sw-stat{text-align:center}
.sw-stat-num{font-size:18px;font-weight:800}
.sw-stat-lbl{font-size:10px;color:var(--dim)}
.sw-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;scrollbar-width:thin}
.sw-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--card2);border-radius:8px;border:1px solid var(--border)}
.sw-item-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);min-width:24px}
.sw-item-name{flex:1;font-size:12px;font-weight:600}
.sw-item-pts{font-size:11px;font-weight:700;color:var(--green);white-space:nowrap}
.sw-empty{color:var(--dim);font-size:12px;text-align:center;padding:18px 0;font-style:italic}

/* ── MODALS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:28px 24px;max-width:680px;width:92%;max-height:85vh;overflow-y:auto;
  box-shadow:0 22px 60px rgba(0,0,0,0.6);animation:fadeUp 0.35s ease;position:relative}
.m-title{font-size:clamp(17px,3.5vw,24px);font-weight:800;margin-bottom:8px;text-align:center}
.m-close{position:absolute;top:13px;right:13px;background:transparent;border:1px solid var(--border);
  color:var(--dim);border-radius:6px;padding:4px 9px;font-size:11px;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all 0.2s}
.m-close:hover{border-color:var(--red);color:var(--red)}
.tr-section{margin-bottom:20px}
.tr-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--dim);margin-bottom:9px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
.tr-item{background:var(--card2);border:1px solid var(--border);border-radius:10px;
  padding:13px 8px;text-align:center;transition:all 0.25s;position:relative;overflow:hidden}
.tr-item.earned{box-shadow:0 0 12px rgba(251,188,4,0.15)}
.tr-item.locked{opacity:0.28;filter:grayscale(1)}
.tr-item:hover{transform:scale(1.04)}
.tr-e{font-size:26px;margin-bottom:4px}
.tr-n{font-size:10px;font-weight:700}
.tr-r{font-size:9px;color:var(--dim);margin-top:2px}
.earned-tag{position:absolute;top:4px;right:4px;font-size:7px;background:var(--green);
  color:#fff;border-radius:3px;padding:1px 3px;font-weight:700}
.tu-toast{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,var(--card),var(--card2));
  border:2px solid var(--yellow);border-radius:14px;padding:13px 17px;z-index:300;
  transform:translateX(200%);transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 8px 28px rgba(251,188,4,0.3);max-width:220px}
.tu-toast.show{transform:translateX(0)}
.tu-e{font-size:32px;display:block;margin-bottom:4px}
.tu-l{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--yellow)}
.tu-n{font-size:14px;font-weight:800;margin-top:2px}
.tu-d{font-size:10px;color:var(--dim);margin-top:2px}
.lb-list{display:flex;flex-direction:column;gap:5px}
.lb-row{display:flex;align-items:center;gap:8px;padding:9px 11px;
  background:var(--card2);border:1px solid var(--border);border-radius:9px;transition:all 0.2s}
.lb-row:hover{transform:translateX(3px);border-color:var(--blue)}
.lb-row.you{border-color:rgba(66,133,244,0.5);background:rgba(66,133,244,0.07)}
.lb-rank{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;min-width:24px}
.lb-name{flex:1;font-weight:600;font-size:12px}
.lb-slvd{font-size:10px;color:var(--dim)}
.lb-sc{font-weight:700;font-size:12px}

/* ── CATEGORY MODAL ── */
.cat-grid-modal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:12px}
.cat-card{background:var(--card2);border:1px solid var(--border);border-radius:10px;
  padding:13px 12px;cursor:pointer;transition:all 0.2s;text-align:center}
.cat-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.15)}
.cat-card-icon{font-size:22px;margin-bottom:5px}
.cat-card-name{font-size:12px;font-weight:700}
.cat-card-count{font-size:10px;color:var(--dim);margin-top:2px}

@media(max-width:780px){.main-content{grid-template-columns:1fr}}
@media(max-width:580px){.navbar{padding:0 8px}.nb{padding:4px 7px;font-size:10px}}

/* ══════════════════════════════════
   INTERVIEW LAB
══════════════════════════════════ */
.interview-banner{margin-top:18px;background:linear-gradient(135deg,rgba(168,85,247,0.1),rgba(66,133,244,0.07));
  border:1px solid rgba(168,85,247,0.3);border-radius:16px;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;transition:all 0.3s;opacity:0.35;pointer-events:none}
.interview-banner.unlocked{opacity:1;pointer-events:all;border-color:var(--purple)}
.interview-banner:hover{box-shadow:0 0 24px rgba(168,85,247,0.2)}
.ib-left{display:flex;flex-direction:column;gap:5px}
.ib-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--purple)}
.ib-title{font-size:18px;font-weight:800}
.ib-sub{font-size:12px;color:var(--dim)}
.ib-arrow{font-size:24px;animation:abounce 2s infinite}
@keyframes abounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ══════════════════════════════════
   INTERVIEW LAB
══════════════════════════════════ */
#interviewLab{background:var(--bg);border-top:2px solid rgba(168,85,247,0.25);
  padding:36px 20px 60px;position:relative;display:none}
#interviewLab::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(168,85,247,0.08) 0%,transparent 55%);
  pointer-events:none}
.lab-header{text-align:center;margin-bottom:30px}
.lab-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--purple);margin-bottom:8px}
.lab-title{font-size:clamp(26px,4vw,44px);font-weight:900;letter-spacing:-0.03em;margin-bottom:8px}
.lab-title span{background:linear-gradient(135deg,var(--purple),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lab-sub{font-size:14px;color:var(--dim);max-width:540px;margin:0 auto;line-height:1.7}

/* ── LAB TAG ROW + LANGUAGE DROPDOWN ── */
.lab-tag-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.lab-lang-select{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  padding:4px 26px 4px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  transition:border-color 0.2s,background-color 0.2s;
}
.lab-lang-select:hover{border-color:var(--purple);background-color:rgba(168,85,247,0.08)}
.lab-lang-select option{background:#0f0d1a;color:var(--text)}

/* ── TYPE SELECTOR ── */
.int-type-row{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.int-type-btn{padding:10px 18px;border-radius:11px;border:1px solid rgba(168,85,247,0.15);
  background:#0f0d1a;color:var(--text);font-size:12px;font-weight:700;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.25s;
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.int-type-btn:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 5px 16px rgba(168,85,247,0.18)}
.int-type-btn.active{background:linear-gradient(135deg,rgba(168,85,247,0.18),rgba(66,133,244,0.1));
  border-color:var(--purple);box-shadow:0 0 14px rgba(168,85,247,0.22)}
.int-type-icon{font-size:16px}

/* ── INTERVIEW PANEL ── */
.int-panel{background:#0c0a18;border:1px solid rgba(168,85,247,0.15);
  border-radius:18px;padding:24px;max-width:980px;margin:0 auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.int-panel-header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:18px;flex-wrap:wrap}
.int-panel-title{font-size:19px;font-weight:800;letter-spacing:-0.02em}
.int-panel-meta{font-size:11px;color:var(--dim);margin-top:3px}

/* ── HEARTS ── */
.hearts-row{display:flex;align-items:center;gap:5px;flex-shrink:0}
.hearts-lbl{font-size:10px;color:var(--dim);margin-right:3px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap}
.heart{font-size:20px;cursor:pointer;transition:transform 0.15s;
  filter:grayscale(1) opacity(0.25);user-select:none}
.heart.lit{filter:none}
.heart:hover{transform:scale(1.3)}
@keyframes heartPulse{0%{transform:scale(1)}40%{transform:scale(1.55)}70%{transform:scale(0.92)}100%{transform:scale(1)}}
@keyframes heartScore{0%{filter:none;transform:scale(1)}30%{transform:scale(1.65);
  filter:drop-shadow(0 0 10px var(--heart-glow))}60%{transform:scale(0.95)}100%{transform:scale(1);filter:none}}
.heart.scoring{animation:heartScore 0.65s ease forwards}
.hearts-score-lbl{font-size:11px;font-weight:700;margin-left:6px;color:var(--dim);white-space:nowrap}

/* ── SHARED INT ELEMENTS ── */
.int-desc{font-size:13px;color:#bcc4da;line-height:1.75;margin-bottom:16px}
.int-note{background:rgba(168,85,247,0.07);border:1px solid rgba(168,85,247,0.2);
  border-radius:9px;padding:11px 13px;font-size:12px;color:#d4b8f8;line-height:1.65;margin-bottom:16px}
.int-editor{width:100%;background:#05040d;border:1px solid rgba(168,85,247,0.15);
  border-radius:11px;color:#e0e8ff;font-family:'JetBrains Mono',monospace;
  font-size:12px;line-height:1.75;padding:14px;resize:none;outline:none;
  min-height:190px;tab-size:2;margin-bottom:12px;transition:border-color 0.2s}
.int-editor:focus{border-color:var(--purple);box-shadow:0 0 12px rgba(168,85,247,0.12)}
.int-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-int-run{padding:8px 18px;background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.btn-int-run:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(168,85,247,0.4)}
.btn-int-rst{padding:8px 12px;background:transparent;color:var(--dim);border:1px solid var(--border);
  border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.btn-int-rst:hover{color:var(--red);border-color:var(--red)}
.btn-next-q{padding:8px 18px;background:var(--card2);color:var(--text);border:1px solid rgba(168,85,247,0.2);
  border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all 0.2s;margin-left:auto}
.btn-next-q:hover{border-color:var(--purple);color:var(--purple)}
.btn-prev-q{padding:8px 18px;background:var(--card2);color:var(--text);border:1px solid rgba(168,85,247,0.2);
  border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all 0.2s}
.btn-prev-q:hover{border-color:var(--purple);color:var(--purple)}
.int-output{background:#05040d;border:1px solid rgba(168,85,247,0.15);border-radius:11px;
  padding:12px 14px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:#c0c8e8;line-height:1.7;min-height:70px;white-space:pre-wrap;display:none}

/* ── VOICE ── */
.voice-zone{background:rgba(66,133,244,0.05);border:1px solid rgba(66,133,244,0.18);
  border-radius:13px;padding:18px;margin-bottom:16px;text-align:center}
.voice-btn{padding:12px 28px;background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;border:none;border-radius:11px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.3s;
  display:inline-flex;align-items:center;gap:9px}
.voice-btn:hover{transform:scale(1.04);box-shadow:0 5px 18px rgba(66,133,244,0.4)}
.voice-btn.listening{background:linear-gradient(135deg,var(--red),#ff6b35);animation:voicePulse 1s infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(234,67,53,0.5)}50%{box-shadow:0 0 0 12px rgba(234,67,53,0)}}
.voice-status{margin-top:10px;font-size:12px;color:var(--dim);min-height:18px}
.voice-transcript{background:#05040d;border:1px solid rgba(168,85,247,0.15);border-radius:9px;
  padding:11px 13px;margin-top:10px;font-size:13px;color:#e0e8ff;line-height:1.65;
  min-height:56px;display:none;text-align:left}
.keyword-match{color:var(--green);font-weight:700;background:rgba(52,168,83,0.1);
  border-radius:3px;padding:1px 3px}
.voice-feedback{margin-top:12px;font-size:13px;font-weight:700;padding:9px 14px;
  border-radius:9px;display:none}
.voice-feedback.good{color:var(--green);background:rgba(52,168,83,0.1);border:1px solid rgba(52,168,83,0.25)}
.voice-feedback.partial{color:var(--yellow);background:rgba(251,188,4,0.1);border:1px solid rgba(251,188,4,0.25)}
.voice-feedback.retry{color:var(--red);background:rgba(234,67,53,0.1);border:1px solid rgba(234,67,53,0.2)}
.concept-q{font-size:17px;font-weight:700;color:#e8eaf8;line-height:1.5;margin-bottom:14px}
.concept-expected{font-size:11px;color:var(--dim);margin-top:12px;font-style:italic;line-height:1.6}

/* ── STACK SUB-TABS ── */
.stack-tabs{display:flex;gap:6px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}
.stack-tab{padding:8px 16px;border-radius:9px;border:1px solid var(--border);background:var(--card2);
  color:var(--dim);font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s}
.stack-tab:hover{border-color:var(--orange);color:var(--orange)}
.stack-tab.active{border-color:var(--orange);color:var(--orange);background:rgba(249,115,22,0.1)}
.stack-tab.fe.active{border-color:var(--teal);color:var(--teal);background:rgba(20,184,166,0.1)}
.stack-tab.fe:hover{border-color:var(--teal);color:var(--teal)}
.stack-tab.be.active{border-color:var(--blue);color:var(--blue);background:rgba(66,133,244,0.1)}
.stack-tab.be:hover{border-color:var(--blue);color:var(--blue)}
.stack-tab.fs.active{border-color:var(--orange);color:var(--orange);background:rgba(249,115,22,0.1)}
.stack-tab.fs:hover{border-color:var(--orange);color:var(--orange)}

/* ── AI PROMPT LAB SPECIFIC ── */
.ai-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:999px;font-size:10px;font-weight:700;
  background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);color:var(--purple);
  margin-bottom:10px}
.ai-scenario{font-size:12px;color:var(--dim);font-style:italic;margin-bottom:14px;
  background:rgba(255,255,255,0.03);border-radius:8px;padding:10px 12px;line-height:1.65;
  border-left:3px solid var(--purple)}
.ai-option-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--dim);margin:12px 0 6px}

/* ── MODALS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:30px 26px;max-width:700px;width:92%;max-height:85vh;overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,0.6);animation:fadeUp 0.4s ease;position:relative}
.m-title{font-size:clamp(18px,4vw,26px);font-weight:800;margin-bottom:8px;text-align:center}
.m-close{position:absolute;top:14px;right:14px;background:transparent;border:1px solid var(--border);
  color:var(--dim);border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all 0.2s}
.m-close:hover{border-color:var(--red);color:var(--red)}
.lb-list{display:flex;flex-direction:column;gap:5px}
.lb-row{display:flex;align-items:center;gap:9px;padding:9px 12px;
  background:var(--card2);border:1px solid var(--border);border-radius:9px;transition:all 0.2s}
.lb-row:hover{transform:translateX(4px);border-color:var(--blue)}
.lb-row.you{border-color:rgba(66,133,244,0.5);background:rgba(66,133,244,0.07)}
.lb-rank{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;min-width:26px}
.lb-name{flex:1;font-weight:600;font-size:12px}
.lb-slvd{font-size:10px;color:var(--dim)}
.lb-sc{font-weight:700;font-size:13px}

@media(max-width:800px){.main-content{grid-template-columns:1fr}}
@media(max-width:640px){.navbar{padding:0 8px}.nb{padding:4px 7px;font-size:10px}
  .int-type-row{flex-direction:column;align-items:stretch}}

/* ═══════════════════════════════════════════════════════
   CAPSTONE STYLES — Dev|Play
   Appended after style.css — all new capstone UI elements
═══════════════════════════════════════════════════════ */

/* ── STREAK PILL (navbar) ── */
.streak-pill {
  background: linear-gradient(135deg, rgba(234,67,53,0.25), rgba(249,115,22,0.2));
  border: 1px solid rgba(234,67,53,0.4);
  color: #fca5a5;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}

/* ── INTERVIEW TIMER (floating bottom-right) ── */
.interview-timer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 17, 32, 0.92);
  border: 1px solid rgba(66,133,244,0.3);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
#gameScreen:not([style*="display: none"]) ~ .interview-timer,
#gameScreen[style*="display: flex"] ~ * .interview-timer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Always show when game screen is visible */
#gameScreen .interview-timer {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Re-scope so it shows when game is running */
.interview-timer {
  opacity: 0.6;
  pointer-events: auto;
}
.timer-label { font-size: 14px; }
.timer-disp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
  min-width: 38px;
  text-align: center;
  transition: color 0.3s;
}
.timer-toggle-btn {
  padding: 5px 11px;
  background: rgba(66,133,244,0.15);
  border: 1px solid rgba(66,133,244,0.4);
  color: var(--blue);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.timer-toggle-btn:hover { background: rgba(66,133,244,0.25); }

.interview-timer.active {
  border-color: rgba(66,133,244,0.55);
  box-shadow: 0 6px 24px rgba(66,133,244,0.22);
  opacity: 1;
}
.interview-timer.warning .timer-disp { color: var(--yellow); }
.interview-timer.warning { border-color: rgba(251,188,4,0.4); }
.interview-timer.danger  .timer-disp { color: var(--red); animation: timerPulse 0.6s infinite; }
.interview-timer.danger  { border-color: rgba(234,67,53,0.5); }
.interview-timer.expired .timer-disp { color: var(--red); }
.interview-timer.expired { border-color: rgba(234,67,53,0.6); box-shadow: 0 0 20px rgba(234,67,53,0.25); }

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── DAILY CHALLENGE BANNER ── */
.daily-banner {
  padding: 0 16px;
  margin-bottom: 0;
}
.daily-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(52,168,83,0.1), rgba(66,133,244,0.07));
  border: 1px solid rgba(52,168,83,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 8px 0;
  transition: all 0.3s;
}
.daily-inner:hover {
  border-color: rgba(52,168,83,0.5);
  box-shadow: 0 4px 18px rgba(52,168,83,0.12);
}
.daily-inner.done {
  background: rgba(52,168,83,0.07);
  border-color: rgba(52,168,83,0.2);
}
.daily-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 3px;
}
.daily-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.daily-meta  { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.daily-done  { font-size: 12px; font-weight: 700; color: var(--green); }
.daily-go-btn {
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--green), #2d9544);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}
.daily-go-btn:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(52,168,83,0.4); }

/* ── SOLUTION REVEAL BUTTON ── */
.btn-reveal-sol {
  padding: 7px 16px;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.4);
  color: var(--purple);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  animation: fadeUp 0.3s ease;
}
.btn-reveal-sol:hover {
  background: rgba(168,85,247,0.2);
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(168,85,247,0.3);
}

/* ── DASHBOARD MODAL ── */
.dash-summary {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dash-stat-big {
  text-align: center;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 90px;
  flex: 1;
}
.dash-num { font-size: 24px; font-weight: 800; line-height: 1.1; }
.dash-lbl { font-size: 10px; color: var(--dim); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }

.dash-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin: 16px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.dash-diff-row {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.dash-diff-card {
  flex: 1;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.dash-diff-name  { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.dash-diff-nums  { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.dash-mini-bar   { height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.dash-mini-fill  { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

.dash-cats { display: flex; flex-direction: column; gap: 6px; }
.dash-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.dash-cat-name     { width: 140px; font-weight: 600; flex-shrink: 0; }
.dash-cat-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.dash-cat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--purple)); border-radius: 3px; transition: width 0.6s ease; }
.dash-cat-frac     { font-size: 11px; color: var(--dim); min-width: 42px; text-align: right; font-family: 'JetBrains Mono', monospace; }

/* ── CERTIFICATE MODAL ── */
.cert-frame {
  position: relative;
  background: linear-gradient(160deg, #0c0e1e 0%, #141630 60%, #0c0e1e 100%);
  border: 2px solid rgba(251,188,4,0.35);
  border-radius: 16px;
  padding: 30px 28px;
  overflow: hidden;
  margin-bottom: 18px;
}
.cert-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-20deg);
  font-size: 80px;
  font-weight: 900;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  letter-spacing: -0.04em;
  user-select: none;
}
.cert-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(251,188,4,0.2);
  padding-bottom: 14px;
}
.cert-logo-text {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cert-badge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(251,188,4,0.8);
}
.cert-presented {
  font-size: 13px;
  color: var(--dim);
  text-align: center;
  margin-bottom: 10px;
  font-style: italic;
}
.cert-name-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(251,188,4,0.4);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  font-family: 'Inter', sans-serif;
  outline: none;
  padding: 6px 12px;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  transition: border-color 0.2s;
}
.cert-name-input::placeholder { color: rgba(255,255,255,0.2); font-weight: 400; font-size: 18px; }
.cert-name-input:focus         { border-bottom-color: rgba(251,188,4,0.8); }
.cert-body-text {
  text-align: center;
  font-size: 14px;
  color: #c8d0e8;
  line-height: 1.8;
  margin-bottom: 20px;
}
.cert-hl {
  font-weight: 800;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cert-stats-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cert-stat       { text-align: center; }
.cert-stat-n     { font-size: 22px; font-weight: 800; }
.cert-stat-l     { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.cert-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(251,188,4,0.15);
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cert-date { font-size: 11px; color: var(--dim); font-style: italic; }
.cert-sig  { font-size: 11px; color: rgba(251,188,4,0.7); font-weight: 700; letter-spacing: 0.07em; }
.cert-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── SHARE CARD ── */
.share-text-box {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #e0e8ff;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

/* ── MILESTONE TOAST ── */
.milestone-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  z-index: 400;
  background: linear-gradient(135deg, rgba(52,168,83,0.18), rgba(66,133,244,0.12));
  border: 1px solid rgba(52,168,83,0.5);
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.milestone-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast-cert-link {
  background: transparent;
  border: none;
  color: var(--green);
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ── SHARED CAPSTONE ACTION BUTTONS ── */
.cap-action-btn {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  transition: all 0.22s;
}
.cap-action-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.4); }
.cap-action-btn.purple {
  background: rgba(168,85,247,0.14);
  border-color: rgba(168,85,247,0.4);
  color: var(--purple);
}
.cap-action-btn.purple:hover { background: rgba(168,85,247,0.22); box-shadow: 0 5px 16px rgba(168,85,247,0.3); }
.cap-action-btn.blue {
  background: rgba(66,133,244,0.14);
  border-color: rgba(66,133,244,0.4);
  color: var(--blue);
}
.cap-action-btn.blue:hover { background: rgba(66,133,244,0.22); box-shadow: 0 5px 16px rgba(66,133,244,0.3); }
.cap-action-btn.green {
  background: rgba(52,168,83,0.14);
  border-color: rgba(52,168,83,0.4);
  color: var(--green);
}
.cap-action-btn.green:hover { background: rgba(52,168,83,0.22); box-shadow: 0 5px 16px rgba(52,168,83,0.3); }

/* ── PRINT STYLES (Certificate) ── */
@media print {
  body > *:not(#certModal) { display: none !important; }
  #certModal { display: block !important; position: static !important; background: #fff !important; }
  #certModal .modal { box-shadow: none !important; border: none !important; max-height: none !important; }
  .cert-actions { display: none !important; }
  .m-close     { display: none !important; }
  #confettiCanvas { display: none !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .dash-diff-row   { flex-direction: column; }
  .dash-cat-name   { width: 100px; }
  .cert-frame      { padding: 20px 16px; }
  .cert-name-input { font-size: 20px; }
  .cert-stats-row  { gap: 8px; }
  .interview-timer { bottom: 14px; right: 14px; padding: 8px 11px; }
  .timer-disp      { font-size: 15px; }
  .milestone-toast { font-size: 12px; padding: 10px 16px; white-space: normal; max-width: 90vw; }
  .daily-banner    { padding: 0 8px; }
}

/* ═══════════════════════════════════════════════════════
   CODE RANGER — Brand Logo Gradient
   Replaces the old multi-color "Dev | Play" letters
═══════════════════════════════════════════════════════ */
.logo-grad {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: -0.04em;
}


/* ═══════════════════════════════════════════════════════
   RESUME BUILDER — sits below Interview Lab modes
═══════════════════════════════════════════════════════ */

#resumeBuilder {
  max-width: 980px;
  margin: 36px auto 0;
  padding: 28px 24px;
  background: #0c0a18;
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none; /* shown only when interview lab is unlocked, alongside it */
}

#interviewLab[style*="block"] ~ #resumeBuilder,
#resumeBuilder.unlocked {
  display: block;
}

.rb-header {
  text-align: center;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(168,85,247,0.15);
}

.rb-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--purple);
  margin-bottom: 8px;
  padding: 4px 12px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 999px;
}

.rb-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.1;
}

.rb-title span {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rb-sub {
  font-size: 13px;
  color: var(--dim);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Tier toggle */
.rb-tier-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 22px auto 0;
  flex-wrap: wrap;
}

.rb-tier-btn {
  padding: 8px 18px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.rb-tier-btn:hover { border-color: var(--purple); color: var(--purple); }
.rb-tier-btn.active {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(168,85,247,0.1);
}
.rb-tier-btn-num {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-bottom: 2px;
}
.rb-tier-btn-name { display: block; font-size: 13px; }

/* Two-column grid */
.rb-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 24px;
}

/* Form panel (left) */
.rb-form {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 20px;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.rb-form-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rb-form-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.rb-form-section-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
}

.rb-form-row { margin-bottom: 10px; }

.rb-form-row label {
  display: block;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 4px;
  font-weight: 600;
}

.rb-form-row input,
.rb-form-row textarea {
  width: 100%;
  background: #05040d;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 9px 11px;
  transition: border-color 0.2s;
}
.rb-form-row input:focus,
.rb-form-row textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.15);
}
.rb-form-row textarea {
  min-height: 65px;
  resize: vertical;
  line-height: 1.5;
}
.rb-form-row .hint {
  font-size: 10px;
  color: var(--dim);
  font-style: italic;
  margin-top: 3px;
}

.rb-repeat-item {
  background: #05040d;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 10px;
  position: relative;
}
.rb-repeat-item-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.rb-add-btn {
  width: 100%;
  padding: 9px 14px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  color: var(--purple);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.rb-add-btn:hover {
  background: rgba(168,85,247,0.2);
  transform: translateY(-1px);
}
.rb-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 5px;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  line-height: 1;
}
.rb-remove-btn:hover { border-color: var(--red); color: var(--red); }

/* Resume preview frame (right) */
.rb-preview-frame {
  background: #05040d;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 24px;
  position: relative;
}

.rb-preview-label {
  position: absolute;
  top: 10px;
  left: 18px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 700;
}
.rb-preview-rev {
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--purple);
  text-transform: uppercase;
  font-weight: 700;
}

/* Skills empty-state hint */
.rb-skills-empty {
  font-size: 10pt;
  color: #888;
  font-style: italic;
  padding: 12px;
  text-align: center;
  background: #f8f8f8;
  border: 1px dashed #ccc;
  border-radius: 6px;
}

/* The actual resume — Calibri on white paper */
.rb-resume {
  background: #FFFFFF;
  color: #1A1A1A;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 56px 64px;
  font-family: 'Calibri', 'Inter', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.4;
}

.rb-resume-header {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #1A1A1A;
}
.rb-resume-name {
  font-size: 22pt;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.rb-resume-title {
  font-size: 11pt;
  color: #555;
  margin-bottom: 8px;
  font-weight: 400;
}
.rb-resume-contact { font-size: 10pt; color: #555; }
.rb-resume-contact span { margin: 0 6px; }
.rb-resume-contact span:first-child { margin-left: 0; }
.rb-resume-contact span:last-child { margin-right: 0; }

.rb-resume-section { margin-bottom: 18px; }
.rb-resume-section-label {
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1A1A1A;
  text-transform: uppercase;
  border-bottom: 1px solid #1A1A1A;
  padding-bottom: 2px;
  margin-bottom: 8px;
}
.rb-resume-summary { font-size: 10.5pt; color: #1A1A1A; line-height: 1.5; }

.rb-skills-table { font-size: 10pt; line-height: 1.7; }
.rb-skill-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: baseline;
}
.rb-skill-cat { font-weight: 700; color: #1A1A1A; }
.rb-skill-list { color: #1A1A1A; }

.rb-experience-item { margin-bottom: 12px; }
.rb-exp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.rb-exp-title { font-size: 11pt; font-weight: 700; color: #1A1A1A; }
.rb-exp-date { font-size: 10pt; color: #555; font-style: italic; }
.rb-exp-org { font-size: 10pt; color: #1A1A1A; font-style: italic; margin-bottom: 4px; }
.rb-exp-bullets { list-style: none; padding: 0; margin: 0; }
.rb-exp-bullets li {
  font-size: 10pt;
  color: #1A1A1A;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
  margin-bottom: 2px;
}
.rb-exp-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #1A1A1A;
}

.rb-edu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 10pt;
}
.rb-edu-name { color: #1A1A1A; }
.rb-edu-name strong { font-weight: 700; }
.rb-edu-date { color: #555; font-style: italic; }

.rb-empty-hint {
  font-size: 9.5pt;
  color: #aaa;
  font-style: italic;
}

/* Responsive */
@media (max-width: 1100px) {
  .rb-grid { grid-template-columns: 1fr; }
  .rb-form { position: static; max-height: none; }
}
@media (max-width: 768px) {
  .rb-resume { padding: 32px 24px; font-size: 10pt; }
  .rb-resume-name { font-size: 18pt; }
  .rb-skill-row { grid-template-columns: 100px 1fr; gap: 8px; }
}

@media print {
  body > *:not(#resumeBuilder) { display: none !important; }
  #resumeBuilder { background: white !important; padding: 0; border: none; box-shadow: none; max-width: 100%; }
  .rb-header, .rb-tier-toggle, .rb-form, .rb-preview-label, .rb-preview-rev { display: none !important; }
  .rb-grid { grid-template-columns: 1fr; }
  .rb-preview-frame { padding: 0; border: none; background: white; box-shadow: none; }
  .rb-resume { box-shadow: none; max-width: 100%; padding: 0.5in; }
}


/* ═══════════════════════════════════════════════════════
   BUILD LAB — sits between Interview Lab and Resume Builder
═══════════════════════════════════════════════════════ */

#buildLab {
  max-width: 980px;
  margin: 36px auto 0;
  padding: 28px 24px;
  background: #0c0a18;
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* ── LOCKED STATE ── */
.bl-locked {
  text-align: center;
  padding: 30px 24px;
}
.bl-lock-icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.6;
}
.bl-lock-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--purple);
  margin-bottom: 10px;
  padding: 4px 12px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 999px;
}
.bl-lock-title {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.1;
}
.bl-lock-title span {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bl-lock-sub {
  font-size: 13px;
  color: var(--dim);
  max-width: 540px;
  margin: 0 auto 22px;
  line-height: 1.7;
}
.bl-lock-progress {
  max-width: 380px;
  margin: 0 auto;
}
.bl-lock-progress-label {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.bl-lock-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bl-lock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* ── UNLOCKED STATE ── */
.bl-header {
  text-align: center;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(168,85,247,0.15);
}
.bl-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--purple);
  margin-bottom: 8px;
  padding: 4px 12px;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 999px;
}
.bl-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.1;
}
.bl-title span {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bl-sub {
  font-size: 13px;
  color: var(--dim);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.bl-section {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.bl-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.bl-section-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
.bl-section-sub {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 14px;
  line-height: 1.6;
}

/* ── SETUP CARDS ── */
.bl-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.bl-setup-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.22s;
  display: block;
}
.bl-setup-card:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  box-shadow: 0 6px 20px rgba(168,85,247,0.18);
}
.bl-setup-icon { font-size: 26px; margin-bottom: 8px; }
.bl-setup-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.bl-setup-desc { font-size: 11px; color: var(--dim); line-height: 1.5; }

/* ── EXAMPLES GRID ── */
.bl-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.bl-example-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: all 0.22s;
  text-align: left;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  overflow: hidden;
}
.bl-example-card:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  box-shadow: 0 6px 20px rgba(168,85,247,0.18);
}
.bl-example-preview {
  height: 110px;
  position: relative;
  overflow: hidden;
  background: #05040d;
}

/* gradient example preview */
.bl-prev-gradient-bg {
  position: absolute; inset: 0;
  background: linear-gradient(125deg, var(--purple), var(--blue), var(--pink), var(--purple));
  background-size: 400% 400%;
  animation: blGradient 6s ease infinite;
}
@keyframes blGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* rotating shape preview */
.bl-prev-rotating-shape {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: 14px;
  animation: blRotate 3s linear infinite;
}
@keyframes blRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* landing mock preview */
.bl-prev-landing-mock {
  position: absolute; inset: 0;
  background: #fafafa;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bl-prev-landing-h { width: 60%; height: 12px; background: #1a1a1a; border-radius: 3px; }
.bl-prev-landing-p { width: 80%; height: 6px; background: #ccc;     border-radius: 3px; }
.bl-prev-landing-btn {
  width: 70px; height: 18px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 9px;
  margin-top: 6px;
}

/* counter preview */
.bl-prev-counter-num {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: 900;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}
.bl-prev-counter-btns {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
}
.bl-prev-counter-btns span {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  font-size: 16px;
}

.bl-example-name {
  font-size: 13px;
  font-weight: 700;
  padding: 11px 14px 4px;
}
.bl-example-tech {
  font-size: 10px;
  color: var(--purple);
  padding: 0 14px 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.bl-example-desc {
  font-size: 11px;
  color: var(--dim);
  padding: 0 14px 14px;
  line-height: 1.55;
}

/* ── WORKSPACE ── */
.bl-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bl-editor-pane {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bl-tabs {
  display: flex;
  gap: 0;
  background: #05040d;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.bl-tabs::-webkit-scrollbar { display: none; }
.bl-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  transition: all 0.15s;
}
.bl-tab:hover { color: var(--text); background: rgba(168,85,247,0.06); }
.bl-tab.active { color: var(--purple); background: rgba(168,85,247,0.12); }

.bl-editor {
  flex: 1;
  background: #05040d;
  border: none;
  color: #e0e8ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  padding: 14px;
  resize: none;
  outline: none;
  min-height: 300px;
  tab-size: 2;
}

.bl-editor-actions {
  padding: 10px 12px;
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  background: var(--card2);
  flex-wrap: wrap;
}

.bl-btn {
  padding: 7px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.18s;
  white-space: nowrap;
}
.bl-btn:hover {
  border-color: var(--purple);
  background: rgba(168,85,247,0.1);
}
.bl-btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  color: #fff;
}
.bl-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(168,85,247,0.3);
  background: linear-gradient(135deg, var(--purple), var(--blue));
}
.bl-btn-ghost {
  color: var(--dim);
  background: transparent;
}
.bl-btn-ghost:hover { color: var(--red); border-color: var(--red); background: transparent; }

.bl-preview-pane {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bl-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #05040d;
  border-bottom: 1px solid var(--border);
}
.bl-preview-dots { display: flex; gap: 5px; }
.bl-dot { width: 9px; height: 9px; border-radius: 50%; }
.bl-preview-label {
  font-size: 11px;
  color: var(--dim);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 4px;
}
.bl-preview-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: white;
  min-height: 360px;
}

/* ── AI EDU PANEL ── */
.bl-ai-edu {
  background: rgba(66,133,244,0.04);
  border: 1px solid rgba(66,133,244,0.15);
  border-radius: 10px;
  margin-bottom: 14px;
}
.bl-ai-edu summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--blue);
  list-style: none;
  user-select: none;
}
.bl-ai-edu summary::-webkit-details-marker { display: none; }
.bl-ai-edu summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.2s;
}
.bl-ai-edu[open] summary::before { transform: rotate(90deg); }
.bl-ai-edu-body {
  padding: 0 18px 18px;
  font-size: 12px;
  line-height: 1.7;
  color: #c0c8e0;
}
.bl-ai-edu-body h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 6px;
}
.bl-ai-edu-body h4:first-child { margin-top: 0; }
.bl-ai-edu-body ul { padding-left: 22px; margin: 6px 0; }
.bl-ai-edu-body li { margin-bottom: 4px; }
.bl-ai-edu-body a { color: var(--blue); text-decoration: none; }
.bl-ai-edu-body a:hover { text-decoration: underline; }
.bl-ai-edu-body strong { color: var(--text); }
.bl-ai-edu-body p { margin-bottom: 8px; }

/* ── AI CONFIG PANEL ── */
.bl-ai-config {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px;
}
.bl-ai-row {
  margin-bottom: 12px;
}
.bl-ai-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bl-ai-row select,
.bl-ai-row input[type="password"],
.bl-ai-row input[type="text"] {
  width: 100%;
  background: #05040d;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  transition: border-color 0.2s;
}
.bl-ai-row input:focus,
.bl-ai-row select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.15);
}
.bl-ai-row-storage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bl-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
  transition: all 0.18s;
}
.bl-radio-label:hover { border-color: rgba(168,85,247,0.3); color: var(--text); }
.bl-radio-label input[type="radio"] { margin-top: 2px; flex-shrink: 0; }
.bl-radio-label strong { color: var(--text); }

.bl-ai-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.bl-ai-status {
  margin-top: 10px;
  font-size: 11px;
  color: var(--dim);
  min-height: 16px;
  font-family: 'JetBrains Mono', monospace;
}
.bl-ai-status.success { color: var(--green); }
.bl-ai-status.error   { color: var(--red); }
.bl-ai-status.loading { color: var(--blue); }

.bl-ai-response {
  margin-top: 14px;
  background: #05040d;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.75;
  color: #d0d8f0;
  display: none;
  max-height: 500px;
  overflow-y: auto;
}
.bl-ai-response.show { display: block; }
.bl-ai-response h3, .bl-ai-response h4 {
  color: var(--purple);
  font-size: 14px;
  margin: 12px 0 6px;
}
.bl-ai-response h3:first-child, .bl-ai-response h4:first-child { margin-top: 0; }
.bl-ai-response code {
  background: rgba(168,85,247,0.12);
  color: #d4b8f8;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.bl-ai-response pre {
  background: #1a1a2a;
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
}
.bl-ai-response pre code {
  background: transparent;
  padding: 0;
  color: #e0e8ff;
}
.bl-ai-response strong { color: var(--text); }
.bl-ai-response ul, .bl-ai-response ol { padding-left: 24px; margin: 6px 0; }
.bl-ai-response li { margin-bottom: 3px; }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .bl-workspace { grid-template-columns: 1fr; }
  .bl-editor { min-height: 220px; }
  .bl-preview-frame { min-height: 240px; }
}
@media (max-width: 600px) {
  #buildLab { padding: 20px 14px; }
  .bl-editor-actions { flex-direction: column; align-items: stretch; }
  .bl-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════
   RESUME — Download buttons (PDF + DOCX)
═══════════════════════════════════════════════════════ */
.rb-download-bar {
  margin: 26px 0 0;
  padding: 14px 16px;
  background: rgba(168,85,247,0.08);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 11px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rb-dl-btn {
  padding: 9px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rb-dl-btn:hover {
  border-color: var(--purple);
  background: rgba(168,85,247,0.12);
  transform: translateY(-1px);
}
.rb-dl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.rb-dl-btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  color: #fff;
}
.rb-dl-btn-primary:hover {
  box-shadow: 0 4px 14px rgba(168,85,247,0.3);
  background: linear-gradient(135deg, var(--purple), var(--blue));
}

.rb-dl-hint {
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
  margin-left: auto;
}

/* Hide download bar in print so it doesn't appear in the PDF */
@media print {
  .rb-download-bar { display: none !important; }
}

@media (max-width: 600px) {
  .rb-download-bar { flex-direction: column; align-items: stretch; }
  .rb-dl-btn { width: 100%; justify-content: center; }
  .rb-dl-hint { margin-left: 0; text-align: center; margin-top: 4px; }
}