/* ═══════════════════════════════════════════════════════════════
   APEX Interview Mastery — style.css
   Central stylesheet for ALL pages. Change here = changes everywhere.
   ═══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --bg-base:        #f5f0e8;
  --bg-surface:     #ede7da;
  --bg-card:        #faf7f2;
  --bg-card-hover:  #fff9f3;
  --bg-nav:         rgba(245,240,232,0.94);
  --bg-secondary:   #ede7da;
  --border-soft:    rgba(160,130,100,0.13);
  --border-mid:     rgba(160,130,100,0.22);
  --border-accent:  rgba(45,100,70,0.22);
  --text-primary:   #1c1208;
  --text-secondary: #5a4a35;
  --text-muted:     #9a856a;
  --text-faint:     #c4ad92;
  --accent:         #2d6446;
  --accent-light:   #3a7d57;
  --accent-pale:    #f0f7f3;
  --accent-border:  rgba(45,100,70,0.2);
  --primary:        #2d6446;
  --primary-light:  #3a7d57;
  --danger:         #c0392b;
  --danger-pale:    #fdf2f2;
  --warning:        #b7791f;
  --warning-pale:   #fffbeb;
  --success:        #276749;
  --success-pale:   #f0fdf4;
  --shadow-sm:      0 1px 4px rgba(100,70,40,0.06);
  --shadow-md:      0 4px 20px rgba(100,70,40,0.09);
  --shadow-lg:      0 12px 40px rgba(100,70,40,0.12);
  --shadow-xl:      0 20px 60px rgba(100,70,40,0.14);
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-pill:  100px;
  --transition: 0.2s ease;
  --t:          0.2s ease;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:'DM Sans',sans-serif; }
input, textarea, select { font-family:'DM Sans',sans-serif; }

/* ════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:500;
  background:var(--bg-nav); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-soft);
  height:64px; display:flex; align-items:center;
  padding:0 48px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  margin-right:36px; flex-shrink:0;
  text-decoration:none; color:inherit;
}
.nav-logo-mark {
  width:32px; height:32px; border-radius:9px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
  font-family:'Bricolage Grotesque',sans-serif;
}
.nav-logo-text {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:17px; font-weight:700;
  color:var(--text-primary); letter-spacing:-0.4px;
}
.nav-links { display:flex; gap:2px; flex:1; list-style:none; }
.nav-links a {
  color:var(--text-secondary); font-size:14px; font-weight:500;
  padding:7px 12px; border-radius:var(--r-sm);
  transition:all var(--transition);
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; text-decoration:none;
}
.nav-links a:hover { color:var(--text-primary); background:var(--border-soft); }
.nav-links a.active { color:var(--accent); font-weight:600; }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  min-width:180px; padding:8px; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all 0.18s ease; z-index:600;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown-menu a {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--text-secondary); font-size:14px; font-weight:500;
}
.nav-dropdown-menu a:hover { background:var(--bg-surface); color:var(--accent); }

/* Nav actions */
.nav-actions { display:flex; gap:8px; align-items:center; margin-left:auto; flex-shrink:0; }
.btn-nav-ghost {
  background:transparent; border:1px solid var(--border-mid);
  color:var(--text-secondary); padding:8px 18px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; cursor:pointer; transition:all var(--transition);
}
.btn-nav-ghost:hover { color:var(--text-primary); background:var(--border-soft); }
.btn-nav-primary {
  background:var(--accent); color:#fff; border:none;
  padding:8px 20px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all var(--transition);
  display:flex; align-items:center; gap:7px;
}
.btn-nav-primary:hover { background:var(--accent-light); transform:translateY(-1px); box-shadow:0 6px 18px rgba(45,100,70,0.25); }

/* User menu */
.user-menu-wrap { position:relative; }
.user-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-surface); border:1px solid var(--border-mid);
  color:var(--text-secondary); padding:7px 14px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; cursor:pointer; transition:all var(--transition);
}
.user-btn:hover { color:var(--text-primary); }
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  min-width:220px; padding:8px; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all 0.18s ease; z-index:600;
}
.user-menu-wrap:hover .user-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.user-info-item { padding:12px; border-bottom:1px solid var(--border-soft); margin-bottom:4px; }
.user-info-name { font-weight:700; font-size:14px; color:var(--text-primary); }
.user-info-role { font-size:12px; color:var(--text-muted); }
.user-dropdown-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--text-secondary); font-size:14px; cursor:pointer;
  transition:all var(--transition); border:none; background:none; width:100%;
}
.user-dropdown-link:hover { background:var(--bg-surface); color:var(--text-primary); }
.user-dropdown-link.danger { color:var(--danger); }
.user-dropdown-link.danger:hover { background:var(--danger-pale); }

/* ── MOBILE NAV PILL — iOS 26 Fluid Glass (Version 1 Micro) ── */
@media(max-width:768px) {
  .nav {
    /* Micro pill */
    margin:6px 150px;
    height:30px;
    padding:0 4px 0 10px;
    border-radius:var(--r-pill);

    /* True iOS 26 Fluid Glass — fully transparent */
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(32px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter:blur(32px) saturate(200%) brightness(1.1);

    /* Black border — subtle glass edge */
    border:1px solid rgba(0,0,0,0.15);

    /* Glass shadow + inner highlight */
    box-shadow:
      0 2px 10px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -1px 0 rgba(0,0,0,0.03);

    position:fixed;
    top:0; left:0; right:0;
    z-index:500;
  }
  /* Micro logo */
  .nav-logo-mark {
    width:18px; height:18px;
    font-size:9px;
    border-radius:5px;
  }
  .nav-logo-text {
    font-size:11px;
  }
}

/* ── HAMBURGER BUTTON — micro circle toggle ── */
.nav-hamburger {
  display:none;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  background:transparent;
  border:1.5px solid rgba(0,0,0,0.3);
  border-radius:50%;
  cursor:pointer;
  margin-left:auto;
  flex-shrink:0;
  transition:all 0.3s ease;
  padding:0;
}
/* Filled circle when open */
.nav-hamburger.open {
  background:rgba(0,0,0,0.75);
  border-color:rgba(0,0,0,0.75);
}
/* Hide spans — no lines needed */
.nav-hamburger span {
  display:none;
}

/* ── MOBILE DRAWER ── */
.nav-mobile-drawer {
  display:none;
  position:fixed;
  top:44px; left:0; right:0; bottom:0;
  background:var(--bg-base);
  z-index:490;
  overflow-y:auto;
  padding:24px 20px 40px;
  border-top:1px solid var(--border-soft);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.nav-mobile-drawer.open {
  display:flex;
  opacity:1;
  transform:translateY(0);
}
.nav-mobile-links { list-style:none; display:flex; flex-direction:column; gap:4px; align-items:center; }
.nav-mobile-links a {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 24px; border-radius:var(--r-pill);
  color:var(--text-secondary); font-size:15px; font-weight:500;
  text-decoration:none; transition:all var(--transition);
  border:1px solid transparent;
  width:fit-content; min-width:160px;
  text-align:center;
}
.nav-mobile-links a:hover,
.nav-mobile-links a.active {
  background:var(--accent-pale);
  color:var(--accent);
  border-color:var(--accent-border);
}
.nav-mobile-links a i { font-size:14px; }
.nav-mobile-divider {
  height:1px; background:var(--border-soft);
  margin:12px 0; width:60%;
}
.nav-mobile-section-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--text-faint);
  padding:0; margin:8px 0 4px;
  text-align:center; width:100%;
}
.nav-mobile-actions {
  display:flex; flex-direction:column; gap:8px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--border-soft);
  align-items:center;
}
.nav-mobile-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 32px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:all var(--transition);
  border:none; font-family:'DM Sans',sans-serif;
  min-width:200px;
}
.nav-mobile-btn.ghost {
  background:var(--bg-surface);
  border:1px solid var(--border-mid);
  color:var(--text-secondary);
}
.nav-mobile-btn.primary {
  background:var(--accent);
  color:#fff;
}

@media(max-width:768px) {
  .nav-links, .nav-actions { display:none !important; }
  .nav-logo-text { font-size:15px; }
  .nav-hamburger { display:flex; }
}

/* ════════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════════ */
.page-header { background:var(--bg-surface); border-bottom:1px solid var(--border-soft); padding:48px 48px 40px; }
@media(max-width:768px) { .page-header { padding:32px 20px; } }
.page-header-inner { max-width:1140px; margin:0 auto; }
.page-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:12px;
}
.page-eyebrow::before { content:''; width:20px; height:2px; background:var(--accent); border-radius:1px; }
.page-title {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(28px,4vw,44px); font-weight:800;
  letter-spacing:-1.5px; color:var(--text-primary); margin-bottom:8px;
}
.page-subtitle { color:var(--text-muted); font-size:16px; font-weight:300; }

/* ════════════════════════════════════════════════
   CONTAINER
════════════════════════════════════════════════ */
.container { max-width:1000px; margin:0 auto; padding:32px 48px 72px; }
@media(max-width:768px) { .container { padding:24px 20px 48px; } }

/* ════════════════════════════════════════════════
   SECTION UTILITIES
════════════════════════════════════════════════ */
.section { padding:72px 48px; }
@media(max-width:768px) { .section { padding:48px 20px; } }
.section-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:12px;
}
.section-eyebrow::before { content:''; width:20px; height:2px; background:var(--accent); border-radius:1px; }
.section-title {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(24px,3vw,36px); font-weight:800;
  letter-spacing:-1.5px; color:var(--text-primary); margin-bottom:8px;
}
.section-sub { color:var(--text-muted); font-size:15px; font-weight:300; margin-bottom:40px; }

/* ════════════════════════════════════════════════
   FILTER / SEARCH
════════════════════════════════════════════════ */
.filter-section {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); padding:24px; margin-bottom:24px; box-shadow:var(--shadow-sm);
}
.filter-title {
  font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:700;
  color:var(--text-primary); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.filter-title i { color:var(--accent); }
.filter-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter-tab {
  padding:7px 18px; border-radius:var(--r-pill); font-size:12px; font-weight:600;
  cursor:pointer; border:1.5px solid var(--border-soft);
  background:var(--bg-surface); color:var(--text-muted);
  transition:all var(--transition); font-family:'DM Sans',sans-serif;
}
.filter-tab:hover { border-color:var(--accent-border); color:var(--accent); }
.filter-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.search-wrap { position:relative; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:13px; }
.search-input {
  width:100%; padding:10px 14px 10px 38px; border-radius:var(--r-sm);
  border:1px solid var(--border-mid); background:var(--bg-surface);
  font-size:13px; font-family:'DM Sans',sans-serif;
  color:var(--text-primary); outline:none; transition:all var(--transition);
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,100,70,0.1); background:var(--bg-card); }

/* ════════════════════════════════════════════════
   QUESTION CARDS
════════════════════════════════════════════════ */
.question-container {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); margin-bottom:8px;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color var(--transition);
}
.question-container:hover { border-color:var(--accent-border); }
.question-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer; user-select:none; gap:12px;
}
.question-header:hover { background:var(--accent-pale); }
.question-text {
  font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700;
  color:var(--text-primary); line-height:1.4; flex:1; letter-spacing:-0.2px;
}
.question-details { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.difficulty-badge {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.question-toggle {
  width:28px; height:28px; border-radius:50%; background:var(--bg-surface);
  border:1px solid var(--border-soft); display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--text-muted);
  transition:transform .25s ease; flex-shrink:0;
}
.question-toggle.rotated { transform:rotate(180deg); }
.question-content { display:none; padding:4px 16px 16px; }

/* ════════════════════════════════════════════════
   RICH SECTIONS (Answer, Code, Table, Output)
════════════════════════════════════════════════ */
.rich-section { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-md); margin:6px 0; overflow:hidden; }
.rich-s-hdr { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--border-soft); background:var(--bg-surface); }
.rich-icon { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.rich-icon.ans    { background:var(--accent-pale); color:var(--accent); }
.rich-icon.tbl    { background:rgba(30,64,175,0.08); color:#1e40af; }
.rich-icon.code   { background:rgba(0,0,0,0.06); color:#555; }
.rich-icon.before-ic { background:rgba(183,121,31,0.1); color:#b7791f; }
.rich-icon.res    { background:var(--accent-pale); color:var(--accent); }
.rich-lbl { font-family:'Bricolage Grotesque',sans-serif; font-size:12px; font-weight:700; color:var(--text-primary); }
.rich-sub { font-size:11px; color:var(--text-muted); margin-left:auto; font-family:'DM Mono',monospace; }
.rich-s-body { padding:16px 18px; }
.ans-txt { font-size:14px; color:var(--text-secondary); line-height:1.75; font-weight:300; }
.ans-txt br { display:block; content:''; margin-top:6px; }

/* Tables */
.rich-two-tbl { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:580px) { .rich-two-tbl { grid-template-columns:1fr; } }
.rich-tbl-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.rich-tbl-wrap { overflow-x:auto; border-radius:var(--r-sm); border:1px solid var(--border-soft); }
.rich-tbl { width:100%; border-collapse:collapse; font-size:12px; font-family:'DM Mono',monospace; }
.rich-tbl thead tr { background:var(--bg-surface); }
.rich-tbl th { padding:8px 12px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.rich-tbl td { padding:8px 12px; border-bottom:1px solid var(--border-soft); color:var(--text-secondary); }
.rich-tbl .td-null { color:var(--text-faint); font-style:italic; }
.rich-tbl tbody tr:last-child td { border-bottom:none; }
.rich-tbl tbody tr:hover { background:rgba(245,240,232,0.6); }

/* Code blocks */
.rich-code-blk { background:#1a1612; border-radius:0; overflow:hidden; }
.rich-code-bar { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:rgba(0,0,0,0.25); border-bottom:1px solid rgba(255,255,255,0.06); }
.rich-lang-tag { font-family:'DM Mono',monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#e6a050; }
.rich-cp-btn { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); padding:3px 10px; border-radius:5px; cursor:pointer; font-size:11px; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:4px; transition:all .2s; }
.rich-cp-btn:hover { background:rgba(255,255,255,0.13); color:#fff; }
.rich-code-blk pre { margin:0!important; padding:16px 20px!important; background:transparent!important; font-size:12.5px!important; line-height:1.75!important; font-family:'DM Mono',monospace!important; text-shadow:none!important; overflow-x:auto; }
.rich-code-blk code { font-family:'DM Mono',monospace!important; background:transparent!important; text-shadow:none!important; }

/* Prism token colors */
.token.comment   { color:#6b5a3e!important; font-style:italic; }
.token.keyword   { color:#e6a050!important; font-weight:600; }
.token.string    { color:#a8d080!important; }
.token.number    { color:#c5a3ff!important; }
.token.function  { color:#7ec8e3!important; }
.token.operator  { color:#e6a050!important; }
.token.punctuation { color:#c4a882!important; }
.token.selector,.token.property { color:#7ec8e3!important; }
.token.tag       { color:#e6a050!important; }
.token.attr-name { color:#a8d080!important; }
.token.attr-value { color:#c5a3ff!important; }

/* State pills */
.state-pill { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; padding:3px 12px; border-radius:var(--r-pill); margin-bottom:10px; }
.state-pill.before { background:rgba(183,121,31,0.1); color:#92400e; border:1px solid rgba(183,121,31,0.25); }
.state-pill.after  { background:var(--accent-pale); color:var(--accent); border:1px solid var(--accent-border); }
.rich-note { margin-top:8px; font-size:12px; color:var(--text-muted); font-style:italic; }

/* Output block */
.rich-out-blk { background:#0f1117; border-radius:var(--r-sm); overflow:hidden; border:1px solid rgba(255,255,255,0.05); font-family:'DM Mono',monospace; }
.rich-out-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.06); }
.d-r { width:9px; height:9px; border-radius:50%; background:#ff5f57; }
.d-y { width:9px; height:9px; border-radius:50%; background:#febc2e; }
.d-g { width:9px; height:9px; border-radius:50%; background:#28c840; }
.out-t { font-size:10px; color:rgba(255,255,255,0.25); margin-left:4px; }
.out-body { padding:12px 16px; font-size:12px; line-height:1.85; color:#c9bfa8; }
.out-body .l   { display:block; }
.out-body .ok  { color:#a8d080; }
.out-body .info { color:#7ec8e3; }
.out-body .dim { color:rgba(255,255,255,0.25); font-style:italic; }

/* Takeaway */
.rich-takeaway { display:flex; gap:12px; align-items:flex-start; background:var(--accent-pale); border:1px solid var(--accent-border); border-radius:var(--r-md); padding:14px 18px; margin:6px 0 2px; }
.rich-tk-icon { width:30px; height:30px; background:var(--accent); color:#fff; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.rich-tk-body h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:11px; font-weight:800; color:var(--accent); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.rich-tk-body p  { font-size:13px; color:var(--text-secondary); line-height:1.65; font-weight:300; }

/* Details toggle */
.details-toggle-btn { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:7px 16px; border-radius:var(--r-pill); border:1.5px solid var(--accent-border); background:var(--accent-pale); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; user-select:none; }
.details-toggle-btn:hover { background:var(--accent); color:#fff; }
.details-toggle-btn .toggle-icon { width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; transition:background 0.2s; }
.details-toggle-btn:hover .toggle-icon { background:#fff; color:var(--accent); }
.details-body { display:none; margin-top:4px; }
.details-body.open { display:block; }

/* Join badges */
.join-type-header { display:flex; align-items:center; gap:10px; padding:12px 0 4px; margin-top:8px; }
.join-badge { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; font-weight:800; padding:4px 14px; border-radius:var(--r-pill); }
.join-badge.inner { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.join-badge.left  { background:var(--accent-pale); color:var(--accent); border:1px solid var(--accent-border); }
.join-badge.right { background:rgba(124,58,237,0.08); color:#7c3aed; border:1px solid rgba(124,58,237,0.2); }
.join-badge.full  { background:rgba(183,121,31,0.08); color:#b7791f; border:1px solid rgba(183,121,31,0.2); }
.join-badge-desc  { font-size:12px; color:var(--text-muted); font-weight:300; }

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; cursor:pointer;
  transition:all 0.25s; border:none; font-family:'DM Sans',sans-serif;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 12px 32px rgba(45,100,70,0.22); }
.btn-secondary { background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border-mid); box-shadow:var(--shadow-sm); }
.btn-secondary:hover { color:var(--text-primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { opacity:0.9; }
.btn-sm { padding:8px 18px; font-size:13px; border-radius:var(--r-sm); }
.btn-white { background:#fff; color:var(--accent); border:none; padding:12px 26px; border-radius:var(--r-pill); font-size:14px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:8px; transition:all var(--transition); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,0.12); }
.btn-white-outline { background:transparent; border:1.5px solid rgba(255,255,255,0.4); color:rgba(255,255,255,0.85); padding:12px 24px; border-radius:var(--r-pill); font-size:14px; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all var(--transition); }
.btn-white-outline:hover { border-color:#fff; color:#fff; }

/* ════════════════════════════════════════════════
   FORMS
════════════════════════════════════════════════ */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.form-input, .form-textarea, .form-select {
  width:100%; padding:12px 16px;
  background:var(--bg-surface); border:1px solid var(--border-mid);
  border-radius:var(--r-sm); color:var(--text-primary); font-size:15px;
  transition:all var(--transition); outline:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,100,70,0.1); background:var(--bg-card);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-faint); }
.form-textarea { min-height:120px; resize:vertical; }

/* ════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════ */
.alert { padding:14px 16px; border-radius:var(--r-md); font-size:14px; display:none; margin-bottom:16px; align-items:flex-start; gap:10px; }
.alert.show { display:flex; }
.alert-success { background:var(--success-pale); border:1px solid rgba(39,103,73,0.2); color:var(--success); }
.alert-error   { background:var(--danger-pale);  border:1px solid rgba(192,57,43,0.2); color:var(--danger); }
.alert-info    { background:var(--accent-pale);  border:1px solid var(--accent-border); color:var(--accent); }
.alert-warning { background:var(--warning-pale); border:1px solid rgba(183,121,31,0.2); color:var(--warning); }

/* ════════════════════════════════════════════════
   SPINNER
════════════════════════════════════════════════ */
.spinner {
  width:18px; height:18px; border:2px solid transparent;
  border-top-color:currentColor; border-radius:50%;
  animation:spin 0.7s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════
   CARDS GRID (Home page)
════════════════════════════════════════════════ */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px) { .cards-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px) { .cards-grid { grid-template-columns:1fr; } }
.card {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); padding:28px; transition:all 0.3s ease;
  cursor:pointer; position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),rgba(45,100,70,0.25)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
.card:hover { transform:translateY(-4px); border-color:var(--accent-border); box-shadow:var(--shadow-xl); background:var(--bg-card-hover); }
.card:hover::after { transform:scaleX(1); }
.card-icon { width:46px; height:46px; border-radius:var(--r-md); background:var(--bg-surface); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--text-secondary); margin-bottom:18px; transition:all var(--transition); }
.card:hover .card-icon { background:var(--accent-pale); border-color:var(--accent-border); color:var(--accent); }
.card-title { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:8px; letter-spacing:-0.3px; }
.card-desc  { color:var(--text-muted); font-size:14px; line-height:1.65; margin-bottom:20px; font-weight:300; }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border-soft); }
.card-count { font-size:13px; font-weight:700; color:var(--text-secondary); font-family:'DM Mono',monospace; }
.card-badge { background:var(--bg-surface); color:var(--text-muted); font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:0.5px; }
.card-badge.featured { background:var(--accent-pale); color:var(--accent); border:1px solid var(--accent-border); }

/* ════════════════════════════════════════════════
   STATS BAR (Home page)
════════════════════════════════════════════════ */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); margin:0 48px; }
@media(max-width:768px) { .stats-bar { margin:0 20px; grid-template-columns:repeat(2,1fr); } }
@media(max-width:400px) { .stats-bar { grid-template-columns:1fr; } }
.stat-item { padding:28px 24px; border-right:1px solid var(--border-soft); transition:background var(--transition); }
.stat-item:last-child { border-right:none; }
@media(max-width:768px) { .stat-item:nth-child(2) { border-right:none; } .stat-item:nth-child(3) { border-top:1px solid var(--border-soft); } }
.stat-item:hover { background:var(--bg-card-hover); }
.stat-num { font-family:'Bricolage Grotesque',sans-serif; font-size:38px; font-weight:800; letter-spacing:-2px; color:var(--text-primary); line-height:1; }
.stat-num .plus { color:var(--accent); }
.stat-lbl { color:var(--text-muted); font-size:13px; font-weight:500; margin-top:6px; }

/* ════════════════════════════════════════════════
   HERO (Home page)
════════════════════════════════════════════════ */
.hero { padding:96px 48px 72px; position:relative; overflow:hidden; }
@media(max-width:768px) { .hero { padding:60px 20px 48px; } }
.hero::after { content:''; position:absolute; top:-100px; right:-80px; width:600px; height:600px; background:radial-gradient(circle, rgba(45,100,70,0.06) 0%, rgba(180,140,80,0.03) 40%, transparent 70%); border-radius:50%; pointer-events:none; }
.hero-inner { position:relative; z-index:2; max-width:760px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-pale); border:1px solid var(--accent-border); color:var(--accent); padding:6px 16px; border-radius:var(--r-pill); font-size:13px; font-weight:600; margin-bottom:28px; }
.badge-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(50px,7.5vw,88px); font-weight:800; line-height:0.92; letter-spacing:-3.5px; color:var(--text-primary); margin-bottom:24px; }
.hero-h1 .dim { color:var(--text-faint); }
.hero-h1 .hi  { color:var(--accent); position:relative; display:inline-block; }
.hero-h1 .hi::after { content:''; position:absolute; bottom:-6px; left:0; right:0; height:4px; background:var(--accent); border-radius:2px; opacity:0.3; }
.hero-sub { color:var(--text-secondary); font-size:18px; font-weight:300; line-height:1.65; max-width:540px; margin-bottom:40px; }
@media(max-width:768px) { .hero-sub { font-size:16px; } }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ════════════════════════════════════════════════
   WHY STRIP (Home page)
════════════════════════════════════════════════ */
.why-strip { background:var(--bg-surface); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:56px 48px; }
@media(max-width:768px) { .why-strip { padding:40px 20px; } }
.why-inner { display:grid; grid-template-columns:1fr 2fr; gap:64px; align-items:start; }
@media(max-width:768px) { .why-inner { grid-template-columns:1fr; gap:32px; } }
.why-left h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); margin-bottom:10px; line-height:1.15; }
.why-left p  { color:var(--text-muted); font-size:15px; font-weight:300; line-height:1.7; }
.why-features { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:480px) { .why-features { grid-template-columns:1fr; } }
.why-icon { width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent-pale); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:14px; margin-bottom:10px; }
.why-item h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:5px; }
.why-item p  { color:var(--text-muted); font-size:13px; line-height:1.6; font-weight:300; }

/* ════════════════════════════════════════════════
   CTA BANNER (Home page)
════════════════════════════════════════════════ */
.cta-banner { margin:0 48px 72px; background:var(--accent); border-radius:var(--r-xl); padding:52px; display:flex; align-items:center; justify-content:space-between; gap:32px; position:relative; overflow:hidden; }
@media(max-width:768px) { .cta-banner { margin:0 20px 48px; padding:32px 24px; flex-direction:column; align-items:flex-start; gap:24px; } }
.cta-banner::before { content:''; position:absolute; top:-60px; right:-40px; width:280px; height:280px; background:rgba(255,255,255,0.05); border-radius:50%; }
.cta-content { position:relative; z-index:2; }
.cta-content h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:28px; font-weight:800; letter-spacing:-1px; color:#fff; margin-bottom:8px; }
.cta-content p  { color:rgba(255,255,255,0.7); font-size:15px; font-weight:300; }
.cta-btns { display:flex; gap:10px; flex-shrink:0; position:relative; z-index:2; flex-wrap:wrap; }

/* ════════════════════════════════════════════════
   PAGE SYSTEM (index.html SPA)
════════════════════════════════════════════════ */
.page { display:none; min-height:100vh; }
.page.active { display:block; }

/* ════════════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════════════ */
.login-wrap { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:60px 24px; position:relative; }
.login-wrap::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 30% 30%, rgba(45,100,70,0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(180,140,80,0.04) 0%, transparent 60%); pointer-events:none; }
.login-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:24px; padding:44px; width:100%; max-width:440px; box-shadow:var(--shadow-xl); position:relative; z-index:2; }
.login-logo { display:flex; align-items:center; gap:10px; margin-bottom:28px; justify-content:center; }
.login-logo-mark { width:34px; height:34px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.login-logo-text { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); }
.login-title { font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); margin-bottom:6px; text-align:center; }
.login-subtitle { color:var(--text-muted); font-size:14px; text-align:center; margin-bottom:28px; font-weight:300; }
.login-tabs { display:flex; background:var(--bg-surface); border-radius:var(--r-sm); padding:4px; margin-bottom:28px; gap:2px; }
.login-tab { flex:1; padding:9px 8px; border-radius:6px; border:none; background:transparent; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition); text-align:center; white-space:nowrap; }
.login-tab.active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-sm); }
.login-panel { display:none; }
.login-panel.active { display:block; }
.login-submit { width:100%; background:var(--accent); color:#fff; border:none; padding:13px; border-radius:var(--r-sm); font-size:15px; font-weight:600; cursor:pointer; transition:all var(--transition); margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
.login-submit:hover { background:var(--accent-light); transform:translateY(-1px); box-shadow:0 8px 22px rgba(45,100,70,0.25); }
.login-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--border-soft); }
.login-divider span { color:var(--text-faint); font-size:12px; }
.login-footer-txt { text-align:center; color:var(--text-muted); font-size:13px; margin-top:18px; }
.login-footer-txt a { color:var(--accent); font-weight:600; cursor:pointer; }
.input-wrap { position:relative; }
.input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:14px; pointer-events:none; }
.input-wrap .form-input { padding-left:40px; }
.pw-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); cursor:pointer; font-size:14px; transition:color var(--transition); }
.pw-toggle:hover { color:var(--accent); }
.status-result { background:var(--bg-surface); border:1px solid var(--border-mid); border-radius:var(--r-md); padding:20px; display:none; }
.status-result.show { display:block; }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-soft); }
.status-row:last-child { border-bottom:none; }
.status-row-label { font-size:13px; color:var(--text-muted); }
.status-row-value { font-size:13px; font-weight:600; color:var(--text-primary); }
.status-badge { padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; text-transform:uppercase; }
.status-badge.pending  { background:var(--warning-pale); color:var(--warning); }
.status-badge.approved { background:var(--success-pale); color:var(--success); }
.status-badge.rejected { background:var(--danger-pale);  color:var(--danger);  }

/* ════════════════════════════════════════════════
   ADMIN PAGE
════════════════════════════════════════════════ */
.admin-guard { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 20px; text-align:center; }
.admin-guard h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:24px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); margin-bottom:8px; }
.admin-guard p  { color:var(--text-muted); font-size:15px; margin-bottom:24px; }
.admin-wrap { padding:0 0 72px; }
.admin-header { background:var(--bg-surface); border-bottom:1px solid var(--border-soft); padding:32px 48px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media(max-width:768px) { .admin-header { padding:24px 20px; } }
.admin-title { font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); }
.admin-title span { color:var(--accent); }
.admin-content { padding:40px 48px; }
@media(max-width:768px) { .admin-content { padding:24px 20px; } }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px; }
@media(max-width:768px) { .admin-stats { grid-template-columns:repeat(2,1fr); } }
.admin-stat { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.admin-stat-num { font-family:'Bricolage Grotesque',sans-serif; font-size:32px; font-weight:800; letter-spacing:-1.5px; color:var(--text-primary); }
.admin-stat-lbl { color:var(--text-muted); font-size:13px; margin-top:4px; }
.admin-section { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:28px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.admin-section-title { font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:20px; display:flex; align-items:center; gap:10px; letter-spacing:-0.3px; }
.admin-section-title i { color:var(--accent); }
.quick-approve-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
@media(max-width:560px) { .quick-approve-grid { grid-template-columns:1fr; } }
.request-item { background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:20px; margin-bottom:12px; transition:all var(--transition); }
.request-item:hover { border-color:var(--accent-border); }
.request-item:last-child { margin-bottom:0; }
.request-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.request-name  { font-weight:700; color:var(--text-primary); font-size:15px; }
.request-email { color:var(--text-muted); font-size:13px; margin-top:2px; }
.request-meta  { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.request-meta-item { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:4px 10px; font-size:12px; color:var(--text-secondary); }
.request-actions { display:flex; gap:8px; flex-wrap:wrap; }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state i { font-size:32px; margin-bottom:12px; display:block; color:var(--text-faint); }

/* ════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media(max-width:768px) { .about-grid { grid-template-columns:1fr; } }
.about-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); }
.about-card h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.about-card h3 i { color:var(--accent); }
.about-card p  { color:var(--text-muted); font-size:14px; line-height:1.75; font-weight:300; }
.about-full { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.about-full h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.about-full h3 i { color:var(--accent); }
.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:560px) { .feature-list { grid-template-columns:1fr; } }
.feature-item { display:flex; align-items:flex-start; gap:12px; }
.feature-check { width:24px; height:24px; border-radius:50%; background:var(--accent-pale); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:11px; flex-shrink:0; margin-top:2px; }
.feature-item-text h4 { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.feature-item-text p  { font-size:13px; color:var(--text-muted); line-height:1.5; font-weight:300; }
.tech-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tech-tag { background:var(--bg-surface); border:1px solid var(--border-soft); color:var(--text-secondary); font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--r-pill); }

/* ════════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; }
@media(max-width:768px) { .contact-grid { grid-template-columns:1fr; } }
.contact-info-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); height:fit-content; }
.contact-info-card h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.contact-info-card h3 i { color:var(--accent); }
.contact-method { display:flex; align-items:flex-start; gap:14px; padding:16px; background:var(--bg-surface); border-radius:var(--r-lg); margin-bottom:12px; border:1px solid var(--border-soft); transition:all var(--transition); cursor:pointer; }
.contact-method:last-child { margin-bottom:0; }
.contact-method:hover { border-color:var(--accent-border); background:var(--accent-pale); }
.contact-method-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--accent-pale); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:16px; flex-shrink:0; }
.contact-method-title { font-weight:700; font-size:14px; color:var(--text-primary); margin-bottom:3px; }
.contact-method-desc  { font-size:12px; color:var(--text-muted); font-weight:300; }
.contact-method-link  { font-size:12px; color:var(--accent); font-weight:600; margin-top:3px; }
.contact-form-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); }
.contact-form-card h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.contact-form-card h3 i { color:var(--accent); }
.contact-submit { width:100%; background:var(--accent); color:#fff; border:none; padding:13px; border-radius:var(--r-sm); font-size:15px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; transition:all var(--transition); margin-top:4px; }
.contact-submit:hover { background:var(--accent-light); transform:translateY(-1px); box-shadow:0 8px 22px rgba(45,100,70,0.22); }
.contact-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.faq-block { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; margin-top:20px; box-shadow:var(--shadow-sm); }
.faq-block h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.faq-block h3 i { color:var(--accent); }
.faq-item { border-bottom:1px solid var(--border-soft); }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%; background:none; border:none; padding:16px 0; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font-family:'DM Sans',sans-serif; }
.faq-q-text { font-size:14px; font-weight:600; color:var(--text-primary); }
.faq-q-icon { color:var(--accent); font-size:13px; transition:transform var(--transition); flex-shrink:0; }
.faq-item.open .faq-q-icon { transform:rotate(180deg); }
.faq-a { display:none; padding:0 0 16px; color:var(--text-muted); font-size:14px; line-height:1.7; font-weight:300; }
.faq-item.open .faq-a { display:block; }

/* ════════════════════════════════════════════════
   QUIZ PAGE
════════════════════════════════════════════════ */
/* Quiz Hub */
.quiz-hub-wrap { max-width:1000px; margin:0 auto; padding:40px 48px 80px; }
@media(max-width:768px) { .quiz-hub-wrap { padding:24px 20px 60px; } }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:48px; }
.hub-card { background:var(--bg-card); border:2px solid var(--border-soft); border-radius:var(--r-xl); padding:32px 28px; cursor:pointer; transition:all .25s ease; box-shadow:var(--shadow-sm); text-align:left; position:relative; overflow:hidden; }
.hub-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.hub-card:hover { transform:translateY(-4px); border-color:var(--accent-border); box-shadow:var(--shadow-lg); }
.hub-card:hover::before { transform:scaleX(1); }
.hub-icon  { width:56px; height:56px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; background:var(--accent-pale); border:1px solid var(--accent-border); color:var(--accent); }
.hub-title { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--text-primary); margin-bottom:8px; }
.hub-desc  { font-size:13px; color:var(--text-muted); font-weight:300; line-height:1.65; margin-bottom:16px; }
.hub-meta  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hub-q-count { font-family:'DM Mono',monospace; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-pale); border:1px solid var(--accent-border); padding:4px 12px; border-radius:99px; }
.hub-levels { display:flex; gap:4px; }
.hub-lvl { font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px; font-family:'DM Mono',monospace; }
.lvl-b { background:#d1fae5; color:#065f46; }
.lvl-i { background:#fef9c3; color:#713f12; }
.lvl-a { background:rgba(45,100,70,.08); color:#2d6446; }
.hub-arrow { position:absolute; bottom:24px; right:24px; width:32px; height:32px; border-radius:50%; background:var(--accent-pale); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:13px; transition:all .2s; }
.hub-card:hover .hub-arrow,.hub-card.active-hub .hub-arrow { background:var(--accent); color:#fff; transform:translateX(3px); }

/* Quiz section */
.quiz-section { display:none; }
.quiz-section.active { display:block; }
.quiz-back-bar { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
.quiz-back-btn { display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--border-mid); background:var(--bg-card); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.quiz-back-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.quiz-back-label { font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; }

/* APEX Quiz (timed) */
.quiz-wrap { max-width:820px; margin:0 auto; padding:40px 24px 80px; }
@media(max-width:600px) { .quiz-wrap { padding:24px 16px 60px; } }
.start-screen {}
.start-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:40px; text-align:center; box-shadow:var(--shadow-md); margin-bottom:20px; }
.start-icon  { font-size:56px; margin-bottom:16px; display:block; }
.start-title { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,4vw,36px); font-weight:800; letter-spacing:-1.5px; color:var(--text-primary); margin-bottom:8px; }
.start-sub   { color:var(--text-muted); font-size:15px; font-weight:300; margin-bottom:32px; }
.start-chips { display:flex; justify-content:center; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.start-chip  { background:var(--bg-secondary); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 24px; min-width:90px; text-align:center; }
.chip-num    { font-family:'Bricolage Grotesque',sans-serif; font-size:28px; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1; }
.chip-lbl    { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:3px; }
.start-cats  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
@media(max-width:500px) { .start-cats { grid-template-columns:1fr; } }
.cat-card    { background:var(--bg-secondary); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:18px; text-align:center; }
.cat-emoji   { font-size:24px; display:block; margin-bottom:8px; }
.cat-name    { font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.cat-desc    { font-size:12px; color:var(--text-muted); font-weight:300; line-height:1.5; }
.start-btn   { background:var(--accent); color:#fff; border:none; padding:15px 40px; border-radius:var(--r-pill); font-size:16px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:10px; transition:all 0.25s; box-shadow:var(--shadow-md); }
.start-btn:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 14px 32px rgba(45,100,70,0.25); }
.start-note  { margin-top:14px; font-size:13px; color:var(--text-muted); }
.quiz-screen { display:none; }
.quiz-topbar { display:flex; gap:12px; align-items:stretch; margin-bottom:16px; flex-wrap:wrap; }
.quiz-progress-wrap { flex:1; min-width:200px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 18px; box-shadow:var(--shadow-sm); }
.prog-top    { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.prog-label  { font-size:12px; font-weight:600; color:var(--text-secondary); }
.prog-count  { font-size:12px; font-weight:700; color:var(--accent); font-family:'DM Mono',monospace; }
.prog-bar    { height:7px; background:var(--bg-secondary); border-radius:var(--r-pill); overflow:hidden; }
.prog-fill   { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-light)); border-radius:var(--r-pill); transition:width 0.5s ease; width:0%; }
.quiz-timer  { display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 18px; font-family:'DM Mono',monospace; font-size:16px; font-weight:500; color:var(--text-secondary); box-shadow:var(--shadow-sm); white-space:nowrap; }
.quiz-timer i { color:var(--accent); }
.quiz-timer.warn { color:var(--danger); border-color:rgba(192,57,43,0.25); background:rgba(192,57,43,0.04); }
.quiz-timer.warn i { color:var(--danger); }
.q-dots-wrap  { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.q-dots-label { font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; }
.q-dots       { display:flex; flex-wrap:wrap; gap:6px; }
.dot { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border-mid); background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:all var(--transition); font-family:'DM Mono',monospace; }
.dot:hover   { border-color:rgba(45,100,70,0.35); color:var(--accent); }
.dot.current { background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.1); }
.dot.ok      { background:rgba(39,103,73,0.12); border-color:#276749; color:#276749; }
.dot.wrong   { background:rgba(192,57,43,0.1); border-color:var(--danger); color:var(--danger); }
.dot.skipped { background:#fef3c7; border-color:var(--warning); color:var(--warning); }
.q-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:28px 30px; box-shadow:var(--shadow-md); transition:border-color var(--transition); }
.q-card.answered { border-color:var(--accent-border); }
@media(max-width:600px) { .q-card { padding:20px 18px; } }
.q-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.q-num-badge   { font-family:'DM Mono',monospace; font-size:11px; font-weight:600; color:var(--text-faint); background:var(--bg-secondary); border:1px solid var(--border-soft); padding:3px 10px; border-radius:var(--r-sm); }
.q-level-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); text-transform:capitalize; }
.q-level-badge.basic        { background:#fef3c7; color:#92400e; }
.q-level-badge.intermediate { background:#dbeafe; color:#1e40af; }
.q-level-badge.advanced     { background:var(--accent-pale); color:var(--accent); border:1px solid var(--accent-border); }
.q-text { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(16px,2.5vw,19px); font-weight:700; color:var(--text-primary); line-height:1.45; letter-spacing:-0.3px; margin-bottom:22px; }
.q-options { display:flex; flex-direction:column; gap:10px; }
.q-opt { display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--bg-secondary); border:1.5px solid var(--border-soft); border-radius:var(--r-lg); cursor:pointer; transition:all var(--transition); font-family:'DM Sans',sans-serif; text-align:left; width:100%; }
.q-opt:hover:not(.disabled) { border-color:rgba(45,100,70,0.3); background:rgba(45,100,70,0.04); color:var(--text-primary); }
.q-opt.correct  { border-color:#276749; background:rgba(39,103,73,0.08); }
.q-opt.incorrect { border-color:var(--danger); background:rgba(192,57,43,0.06); }
.q-opt.disabled { cursor:not-allowed; }
.opt-circle { width:30px; height:30px; border-radius:50%; background:var(--bg-card); border:1.5px solid var(--border-mid); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text-muted); flex-shrink:0; transition:all var(--transition); font-family:'DM Mono',monospace; }
.q-opt.correct .opt-circle  { background:#276749; border-color:#276749; color:#fff; }
.q-opt.incorrect .opt-circle { background:var(--danger); border-color:var(--danger); color:#fff; }
.opt-text { font-size:14px; color:var(--text-secondary); line-height:1.5; flex:1; }
.q-opt.correct .opt-text   { color:#276749; font-weight:500; }
.q-opt.incorrect .opt-text { color:var(--danger); }
.opt-icon { margin-left:auto; font-size:14px; display:none; flex-shrink:0; }
.q-opt.correct .opt-icon,.q-opt.incorrect .opt-icon { display:block; }
.q-explanation { background:var(--accent-pale); border:1px solid var(--accent-border); border-radius:var(--r-md); padding:14px 18px; margin-top:16px; font-size:13px; color:var(--text-secondary); line-height:1.7; display:none; }
.q-explanation.show { display:block; }
.q-explanation-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:6px; }
.q-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap; }
.q-skip-btn,.q-next-btn { padding:10px 24px; border-radius:var(--r-pill); font-size:14px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; display:flex; align-items:center; gap:8px; border:none; }
.q-skip-btn { background:var(--bg-surface); color:var(--text-muted); border:1px solid var(--border-mid); }
.q-skip-btn:hover { color:var(--text-primary); background:var(--border-soft); }
.q-next-btn { background:var(--accent); color:#fff; }
.q-next-btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.result-screen { display:none; }
.result-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:40px; text-align:center; box-shadow:var(--shadow-md); }
.result-score { font-family:'Bricolage Grotesque',sans-serif; font-size:72px; font-weight:800; letter-spacing:-4px; color:var(--accent); line-height:1; }
.result-label { font-size:16px; color:var(--text-muted); margin:8px 0 6px; font-weight:300; }
.result-msg   { font-family:'Bricolage Grotesque',sans-serif; font-size:24px; font-weight:800; color:var(--text-primary); margin-bottom:8px; letter-spacing:-0.5px; }
.result-sub   { font-size:14px; color:var(--text-muted); margin-bottom:28px; }
.result-stats { display:flex; gap:16px; justify-content:center; margin-bottom:28px; flex-wrap:wrap; }
.result-stat-pill { display:flex; align-items:center; gap:8px; padding:8px 18px; border-radius:var(--r-pill); border:1px solid var(--border-soft); background:var(--bg-surface); font-size:13px; font-weight:600; font-family:'DM Mono',monospace; }
.result-stat-pill.correct-s { color:#276749; border-color:#6ee7b7; background:#f0fdf4; }
.result-stat-pill.wrong-s   { color:#b91c1c; border-color:#fca5a5; background:#fef2f2; }
.restart-btn { background:var(--accent); color:#fff; border:none; padding:12px 36px; border-radius:var(--r-pill); font-size:15px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.restart-btn:hover { background:var(--accent-light); transform:translateY(-2px); }

/* Simple Q&A quiz (SQL/PL/SQL style) */
.sq-wrap { max-width:700px; margin:0 auto; }
.sq-header { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:20px 24px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.sq-progress-bar  { width:100%; height:6px; background:var(--bg-surface); border-radius:3px; margin-bottom:12px; overflow:hidden; }
.sq-progress-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.sq-info      { display:flex; justify-content:space-between; align-items:center; }
.sq-counter   { font-size:13px; color:var(--text-muted); font-weight:500; }
.sq-score-pill { font-family:'DM Mono',monospace; font-size:13px; font-weight:700; color:var(--accent); background:var(--accent-pale); border:1px solid var(--accent-border); padding:4px 14px; border-radius:var(--r-pill); }
.sq-card      { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); }
.sq-q-num     { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); margin-bottom:10px; }
.sq-q-text    { font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.5; letter-spacing:-.3px; margin-bottom:24px; }
.sq-level-badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; margin-bottom:16px; font-family:'DM Mono',monospace; }
.sq-options   { display:flex; flex-direction:column; gap:10px; }
.sq-opt       { background:var(--bg-surface); border:2px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 18px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .18s ease; font-size:14px; color:var(--text-secondary); font-family:'DM Sans',sans-serif; text-align:left; }
.sq-opt:hover { border-color:var(--accent-border); background:var(--accent-pale); color:var(--text-primary); }
.sq-opt.correct  { background:#d1fae5; border-color:#6ee7b7; color:#065f46; font-weight:600; }
.sq-opt.wrong    { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.sq-opt.disabled { cursor:not-allowed; opacity:.75; }
.sq-opt-letter { width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; font-family:'DM Mono',monospace; }
.sq-opt.correct .sq-opt-letter { background:#6ee7b7; color:#065f46; }
.sq-opt.wrong .sq-opt-letter   { background:#fca5a5; color:#991b1b; }
.sq-explanation { margin-top:16px; padding:14px 18px; background:var(--accent-pale); border:1px solid var(--accent-border); border-radius:var(--r-md); font-size:13px; color:var(--text-secondary); line-height:1.7; display:none; }
.sq-explanation.show { display:block; }
.sq-explanation strong { color:var(--accent); }
.sq-nav       { display:flex; justify-content:flex-end; margin-top:20px; }
.sq-next-btn  { background:var(--accent); color:#fff; border:none; padding:10px 24px; border-radius:var(--r-pill); font-size:14px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; display:none; align-items:center; gap:8px; }
.sq-next-btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.sq-next-btn.show { display:flex; }
.sq-start { text-align:center; padding:48px 32px; }
.sq-start .sq-start-icon { font-size:56px; display:block; margin-bottom:20px; }
.sq-start h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--text-primary); margin-bottom:10px; }
.sq-start p  { font-size:15px; color:var(--text-muted); font-weight:300; margin-bottom:28px; line-height:1.7; }
.sq-start-btn { background:var(--accent); color:#fff; border:none; padding:14px 36px; border-radius:var(--r-pill); font-size:15px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.sq-start-btn:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(45,100,70,.25); }
.sq-result { text-align:center; padding:48px 32px; }
.sq-result-score { font-family:'Bricolage Grotesque',sans-serif; font-size:80px; font-weight:800; letter-spacing:-4px; color:var(--accent); line-height:1; }
.sq-result-label { font-size:16px; color:var(--text-muted); margin:8px 0 24px; font-weight:300; }
.sq-result-msg   { font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:8px; font-family:'Bricolage Grotesque',sans-serif; }
.sq-result-sub   { font-size:14px; color:var(--text-muted); margin-bottom:32px; }
.sq-result-stats { display:flex; gap:20px; justify-content:center; margin-bottom:28px; flex-wrap:wrap; }
.sq-stat-pill    { display:flex; align-items:center; gap:8px; padding:8px 18px; border-radius:var(--r-pill); border:1px solid var(--border-soft); background:var(--bg-surface); font-size:13px; font-weight:600; font-family:'DM Mono',monospace; }
.sq-stat-pill.correct-stat { color:#276749; border-color:#6ee7b7; background:#f0fdf4; }
.sq-stat-pill.wrong-stat   { color:#b91c1c; border-color:#fca5a5; background:#fef2f2; }
.sq-restart-btn { background:var(--accent); color:#fff; border:none; padding:12px 36px; border-radius:var(--r-pill); font-size:15px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.sq-restart-btn:hover { background:var(--accent-light); transform:translateY(-2px); }

/* ════════════════════════════════════════════════
   PDF RESOURCES PAGE
════════════════════════════════════════════════ */
.pdf-page-wrap { max-width:1300px; margin:0 auto; padding:32px 48px 72px; display:grid; grid-template-columns:280px 1fr; gap:24px; min-height:calc(100vh - 200px); }
@media(max-width:1024px) { .pdf-page-wrap { grid-template-columns:1fr; padding:24px 20px 48px; } .pdf-sidebar { order:2; position:static!important; } .pdf-viewer-wrap { order:1; } .pdf-iframe { height:500px!important; } .pdf-placeholder,.pdf-loading,.pdf-error { height:500px!important; } }
@media(max-width:600px) { .pdf-iframe { height:400px!important; } .pdf-placeholder,.pdf-loading,.pdf-error { height:400px!important; } }
.pdf-sidebar { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:24px; height:fit-content; position:sticky; top:80px; box-shadow:var(--shadow-sm); }
.pdf-sidebar-title { font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:800; letter-spacing:-.3px; color:var(--text-primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.pdf-sidebar-title i { color:var(--accent); }
.pdf-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.pdf-item { background:var(--bg-surface); border:2px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 16px; cursor:pointer; display:flex; align-items:flex-start; gap:12px; transition:all .2s ease; }
.pdf-item:hover { border-color:var(--accent-border); background:var(--accent-pale); transform:translateX(3px); }
.pdf-item.active { border-color:var(--accent); background:var(--accent-pale); box-shadow:0 0 0 3px rgba(45,100,70,.08); }
.pdf-item-icon { width:36px; height:36px; border-radius:var(--r-md); background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.pdf-item.active .pdf-item-icon { background:var(--accent-light); }
.pdf-item-info h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:13px; font-weight:700; color:var(--text-primary); margin:0 0 3px; letter-spacing:-.2px; }
.pdf-item-info p  { font-size:11px; color:var(--text-muted); margin:0; font-weight:300; line-height:1.4; }
.pdf-cat-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; margin-top:4px; font-family:'DM Mono',monospace; }
.cat-apex         { background:#dbeafe; color:#1e40af; }
.cat-sql          { background:#d1fae5; color:#065f46; }
.cat-plsql        { background:rgba(45,100,70,.08); color:#2d6446; }
.cat-basic        { background:#d1fae5; color:#065f46; }
.cat-intermediate { background:#fef9c3; color:#713f12; }
.cat-advanced     { background:rgba(45,100,70,.08); color:#2d6446; }
.cat-expert       { background:#fce7f3; color:#9d174d; }
.pdf-viewer-wrap   { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.pdf-viewer-header { padding:16px 20px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--bg-surface); }
.pdf-viewer-title  { font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; flex:1; }
.pdf-ctrl-btns     { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pdf-ctrl-btn { display:none; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--border-mid); background:var(--bg-card); color:var(--text-secondary); font-size:12px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .2s ease; }
.pdf-ctrl-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.pdf-ctrl-btn.show { display:flex; }
.pdf-ctrl-btn.dl-btn { background:var(--accent); color:#fff; border-color:var(--accent); }
.pdf-ctrl-btn.dl-btn:hover { background:var(--accent-light); }
.viewer-modes { display:none; align-items:center; gap:4px; }
.viewer-modes.show { display:flex; }
.mode-btn { padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--border-mid); background:var(--bg-card); color:var(--text-muted); font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; font-family:'DM Mono',monospace; }
.mode-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mode-btn:hover:not(.active) { border-color:var(--accent-border); color:var(--accent); }
.pdf-placeholder { height:680px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px; color:var(--text-muted); }
.pdf-placeholder .ph-icon { width:80px; height:80px; border-radius:var(--r-xl); background:var(--accent-pale); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--accent); margin-bottom:20px; }
.pdf-placeholder h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; margin-bottom:8px; }
.pdf-placeholder p  { font-size:14px; font-weight:300; max-width:320px; line-height:1.7; color:var(--text-muted); }
.pdf-loading { height:680px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.pdf-loading.show { display:flex; }
.pdf-spinner { width:48px; height:48px; border:4px solid var(--border-soft); border-top:4px solid var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.pdf-loading p { font-size:14px; color:var(--text-muted); font-weight:300; }
.pdf-iframe { width:100%; height:680px; border:none; display:none; background:#f8f8f8; touch-action:auto; -ms-touch-action:auto; }
.pdf-iframe.show { display:block; }
.pdf-error { height:680px; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px; gap:16px; }
.pdf-error.show { display:flex; }
.pdf-error i  { font-size:40px; color:#ef4444; }
.pdf-error h3 { font-family:'Bricolage Grotesque',sans-serif; color:#ef4444; font-size:18px; font-weight:800; }
.pdf-error p  { font-size:13px; color:var(--text-muted); max-width:360px; line-height:1.7; }
.pdf-err-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pdf-err-btn  { padding:8px 18px; border-radius:var(--r-pill); border:1px solid var(--border-mid); background:var(--bg-card); color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.pdf-err-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.pdf-err-btn:hover { opacity:.85; }
.pdf-toast { position:fixed; bottom:24px; right:24px; background:var(--accent); color:#fff; padding:12px 20px; border-radius:var(--r-lg); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(45,100,70,.3); z-index:9999; transform:translateY(80px); opacity:0; transition:all .3s ease; font-family:'DM Sans',sans-serif; }
.pdf-toast.show { transform:translateY(0); opacity:1; }
.pdf-coming-section { max-width:1300px; margin:0 auto; padding:0 48px 72px; }
@media(max-width:768px) { .pdf-coming-section { padding:0 20px 48px; } }
.pdf-coming-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:16px; }
.pdf-card-coming { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:24px; opacity:.6; box-shadow:var(--shadow-sm); }
.pdf-card-coming .pc-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--bg-surface); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-faint); margin-bottom:12px; }
.pdf-card-coming h4 { font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:6px; letter-spacing:-.2px; }
.pdf-card-coming p  { font-size:13px; color:var(--text-muted); font-weight:300; line-height:1.6; margin-bottom:14px; }
.pc-soon-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-faint); background:var(--bg-surface); border:1px solid var(--border-soft); padding:4px 12px; border-radius:99px; font-family:'DM Mono',monospace; }

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.footer { background:var(--bg-surface); border-top:1px solid var(--border-soft); padding:48px 48px 28px; }
@media(max-width:768px) { .footer { padding:40px 20px 24px; } }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--border-soft); }
@media(max-width:900px) { .footer-top { grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:560px) { .footer-top { grid-template-columns:1fr; gap:24px; } }
.footer-logo      { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-logo-mark { width:28px; height:28px; border-radius:7px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
.footer-logo-text { font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); }
.footer-brand-desc { color:var(--text-muted); font-size:13px; line-height:1.7; font-weight:300; }
.footer-col h4   { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:14px; letter-spacing:0.3px; }
.footer-col ul   { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col ul a { color:var(--text-muted); font-size:13px; transition:color var(--transition); text-decoration:none; }
.footer-col ul a:hover { color:var(--accent); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-copy { color:var(--text-faint); font-size:12px; }
.footer-made { color:var(--text-faint); font-size:12px; display:flex; align-items:center; gap:4px; }
.footer-made i { color:var(--accent); font-size:10px; }

/* ════════════════════════════════════════════════
   AUTH ICON BUTTONS (Login page)
════════════════════════════════════════════════ */
.auth-icon-btn { width:100%; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-sm); background:var(--bg-surface); border:1px solid var(--border-mid); color:var(--text-primary); font-size:14px; font-weight:600; cursor:pointer; transition:all var(--transition); margin-bottom:10px; font-family:'DM Sans',sans-serif; }
.auth-icon-btn:hover { border-color:var(--accent); background:var(--accent-pale); color:var(--accent); }
.auth-icon-btn i { font-size:16px; color:var(--accent); }
.google-btn { border-color:rgba(66,133,244,0.3); }
.google-btn:hover { border-color:#4285F4; background:#f0f4ff; color:#4285F4; }


/* ════════════════════════════════════════════════
   QUIZ PAGE — Additional Component Styles
   (results screen, score ring, sq-dots, sq-qcard)
════════════════════════════════════════════════ */


*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

.nav-links a.active{color:var(--accent);font-weight:600;}
.nav-dropdown{position:relative;}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);min-width:180px;padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.18s ease;z-index:600;}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-secondary);font-size:14px;}
.nav-dropdown-menu a:hover{background:var(--bg-surface);color:var(--accent);}
@media(max-width:768px){.nav{padding:0 20px;}.nav-links{display:none;}}

/* PAGE HEADER */
.page-header{background:var(--bg-surface);border-bottom:1px solid var(--border-soft);padding:48px 48px 40px;}
@media(max-width:768px){.page-header{padding:32px 20px;}}
.page-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;}
.page-eyebrow::before{content:'';width:20px;height:2px;background:var(--accent);border-radius:1px;}
.page-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:8px;}
.page-subtitle{color:var(--text-muted);font-size:16px;font-weight:300;}

/* CONTAINER */
.container{max-width:1000px;margin:0 auto;padding:32px 48px 72px;}
@media(max-width:768px){.container{padding:24px 20px 48px;}}

/* FILTER */
.filter-section{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-sm);}
.filter-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.filter-title i{color:var(--accent);}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.filter-tab{padding:7px 18px;border-radius:var(--r-pill);font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border-soft);background:var(--bg-surface);color:var(--text-muted);transition:all var(--transition);font-family:'DM Sans',sans-serif;}
.filter-tab:hover{border-color:var(--accent-border);color:var(--accent);}
.filter-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.search-wrap{position:relative;}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:13px;}
.search-input{width:100%;padding:10px 14px 10px 38px;border-radius:var(--r-sm);border:1px solid var(--border-mid);background:var(--bg-surface);font-size:13px;font-family:'DM Sans',sans-serif;color:var(--text-primary);outline:none;transition:all var(--transition);}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,100,70,0.1);background:var(--bg-card);}

/* QUESTION CARD */
.question-container{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);margin-bottom:8px;box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color var(--transition);}
.question-container:hover{border-color:var(--accent-border);}
.question-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;user-select:none;gap:12px;}
.question-header:hover{background:var(--accent-pale);}
.question-text{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.4;flex:1;letter-spacing:-0.2px;}
.question-details{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.difficulty-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.question-toggle{width:28px;height:28px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted);transition:transform .25s ease;flex-shrink:0;}
.question-toggle.rotated{transform:rotate(180deg);}
.question-content{display:none;padding:4px 16px 16px;}

/* RICH SECTIONS */
.rich-section{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-md);margin:6px 0;overflow:hidden;}
.rich-s-hdr{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface);}
.rich-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.rich-icon.ans{background:var(--accent-pale);color:var(--accent);}
.rich-icon.tbl{background:rgba(30,64,175,0.08);color:#1e40af;}
.rich-icon.code{background:rgba(0,0,0,0.06);color:#555;}
.rich-icon.before-ic{background:rgba(183,121,31,0.1);color:#b7791f;}
.rich-icon.res{background:var(--accent-pale);color:var(--accent);}
.rich-lbl{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:700;color:var(--text-primary);}
.rich-sub{font-size:11px;color:var(--text-muted);margin-left:auto;font-family:'DM Mono',monospace;}
.rich-s-body{padding:16px 18px;}
.ans-txt{font-size:14px;color:var(--text-secondary);line-height:1.75;font-weight:300;}
.ans-txt br{display:block;content:'';margin-top:6px;}

/* TABLES */
.rich-two-tbl{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:580px){.rich-two-tbl{grid-template-columns:1fr;}}
.rich-tbl-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.rich-tbl-wrap{overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--border-soft);}
.rich-tbl{width:100%;border-collapse:collapse;font-size:12px;font-family:'DM Mono',monospace;}
.rich-tbl thead tr{background:var(--bg-surface);}
.rich-tbl th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);border-bottom:1px solid var(--border-soft);white-space:nowrap;}
.rich-tbl td{padding:8px 12px;border-bottom:1px solid var(--border-soft);color:var(--text-secondary);}
.rich-tbl .td-null{color:var(--text-faint);font-style:italic;}
.rich-tbl tbody tr:last-child td{border-bottom:none;}
.rich-tbl tbody tr:hover{background:rgba(245,240,232,0.6);}

/* CODE */
.rich-code-blk{background:#1a1612;border-radius:0;overflow:hidden;}
.rich-code-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(0,0,0,0.25);border-bottom:1px solid rgba(255,255,255,0.06);}
.rich-lang-tag{font-family:'DM Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#e6a050;}
.rich-cp-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);padding:3px 10px;border-radius:5px;cursor:pointer;font-size:11px;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:4px;transition:all .2s;}
.rich-cp-btn:hover{background:rgba(255,255,255,0.13);color:#fff;}
.rich-code-blk pre{margin:0!important;padding:16px 20px!important;background:transparent!important;font-size:12.5px!important;line-height:1.75!important;font-family:'DM Mono',monospace!important;text-shadow:none!important;overflow-x:auto;}
.rich-code-blk code{font-family:'DM Mono',monospace!important;background:transparent!important;text-shadow:none!important;}
.token.comment{color:#6b5a3e!important;font-style:italic;}
.token.keyword{color:#e6a050!important;font-weight:600;}
.token.string{color:#a8d080!important;}
.token.number{color:#c5a3ff!important;}
.token.function{color:#7ec8e3!important;}
.token.operator{color:#e6a050!important;}
.token.punctuation{color:#c4a882!important;}

/* STATE PILLS */
.state-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;padding:3px 12px;border-radius:var(--r-pill);margin-bottom:10px;}
.state-pill.before{background:rgba(183,121,31,0.1);color:#92400e;border:1px solid rgba(183,121,31,0.25);}
.state-pill.after{background:var(--accent-pale);color:var(--accent);border:1px solid var(--accent-border);}
.rich-note{margin-top:8px;font-size:12px;color:var(--text-muted);font-style:italic;}

/* OUTPUT */
.rich-out-blk{background:#0f1117;border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,0.05);font-family:'DM Mono',monospace;}
.rich-out-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(0,0,0,0.3);border-bottom:1px solid rgba(255,255,255,0.06);}
.d-r{width:9px;height:9px;border-radius:50%;background:#ff5f57;}
.d-y{width:9px;height:9px;border-radius:50%;background:#febc2e;}
.d-g{width:9px;height:9px;border-radius:50%;background:#28c840;}
.out-t{font-size:10px;color:rgba(255,255,255,0.25);margin-left:4px;}
.out-body{padding:12px 16px;font-size:12px;line-height:1.85;color:#c9bfa8;}
.out-body .l{display:block;}
.out-body .ok{color:#a8d080;}
.out-body .info{color:#7ec8e3;}
.out-body .dim{color:rgba(255,255,255,0.25);font-style:italic;}

/* TAKEAWAY */
.rich-takeaway{display:flex;gap:12px;align-items:flex-start;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-md);padding:14px 18px;margin:6px 0 2px;}
.rich-tk-icon{width:30px;height:30px;background:var(--accent);color:#fff;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.rich-tk-body h4{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:800;color:var(--accent);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.5px;}
.rich-tk-body p{font-size:13px;color:var(--text-secondary);line-height:1.65;font-weight:300;}

/* INNER DETAILS TOGGLE */
.details-toggle-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 16px;border-radius:var(--r-pill);border:1.5px solid var(--accent-border);background:var(--accent-pale);color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;user-select:none;}
.details-toggle-btn:hover{background:var(--accent);color:#fff;}
.details-toggle-btn .toggle-icon{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;transition:background 0.2s;}
.details-toggle-btn:hover .toggle-icon{background:#fff;color:var(--accent);}
.details-body{display:none;margin-top:4px;}
.details-body.open{display:block;}

/* JOIN BADGES */
.join-type-header{display:flex;align-items:center;gap:10px;padding:12px 0 4px;margin-top:8px;}
.join-badge{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;padding:4px 14px;border-radius:var(--r-pill);}
.join-badge.inner{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;}
.join-badge.left{background:var(--accent-pale);color:var(--accent);border:1px solid var(--accent-border);}
.join-badge.right{background:rgba(124,58,237,0.08);color:#7c3aed;border:1px solid rgba(124,58,237,0.2);}
.join-badge.full{background:rgba(183,121,31,0.08);color:#b7791f;border:1px solid rgba(183,121,31,0.2);}
.join-badge-desc{font-size:12px;color:var(--text-muted);font-weight:300;}

/* FOOTER */
.footer{background:var(--bg-surface);border-top:1px solid var(--border-soft);padding:48px 48px 28px;}
@media(max-width:768px){.footer{padding:40px 20px 24px;}}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--border-soft);}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;gap:24px;}}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-logo-mark{width:28px;height:28px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;}
.footer-logo-text{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);}
.footer-brand-desc{color:var(--text-muted);font-size:13px;line-height:1.7;font-weight:300;}
.footer-col h4{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:14px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.footer-col ul a{color:var(--text-muted);font-size:13px;transition:color var(--transition);}
.footer-col ul a:hover{color:var(--accent);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.footer-copy{color:var(--text-faint);font-size:12px;}


.quiz-hub-wrap{max-width:1000px;margin:0 auto;padding:40px 48px 80px;}
@media(max-width:768px){.quiz-hub-wrap{padding:24px 20px 60px;}}

/* Hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px;}
.hub-card{background:var(--bg-card);border:2px solid var(--border-soft);border-radius:var(--r-xl);padding:32px 28px;cursor:pointer;transition:all .25s ease;box-shadow:var(--shadow-sm);text-align:left;position:relative;overflow:hidden;}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.hub-card:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow-lg);}
.hub-card:hover::before{transform:scaleX(1);}
.hub-card.active-hub{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,100,70,.12),var(--shadow-lg);transform:translateY(-2px);}
.hub-card.active-hub::before{transform:scaleX(1);}
.hub-icon{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;background:var(--accent-pale);border:1px solid var(--accent-border);color:var(--accent);}
.hub-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;}
.hub-desc{font-size:13px;color:var(--text-muted);font-weight:300;line-height:1.65;margin-bottom:16px;}
.hub-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hub-q-count{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 12px;border-radius:99px;}
.hub-levels{display:flex;gap:4px;}
.hub-lvl{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;font-family:'DM Mono',monospace;}
.lvl-b{background:#d1fae5;color:#065f46;}
.lvl-i{background:#fef9c3;color:#713f12;}
.lvl-a{background:rgba(45,100,70,.08);color:#2d6446;}
.hub-arrow{position:absolute;bottom:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--accent-pale);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;transition:all .2s;}
.hub-card:hover .hub-arrow,.hub-card.active-hub .hub-arrow{background:var(--accent);color:#fff;transform:translateX(3px);}

/* Quiz container */
.quiz-section{display:none;}
.quiz-section.active{display:block;}

/* Back button */
.quiz-back-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft);}
.quiz-back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.quiz-back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.quiz-back-label{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;}


/* Simple Q&A quiz (SQL/PLSQL) */
.sq-wrap{max-width:700px;margin:0 auto;}
.sq-header{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:20px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.sq-progress-bar{width:100%;height:6px;background:var(--bg-surface);border-radius:3px;margin-bottom:12px;overflow:hidden;}
.sq-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease;}
.sq-info{display:flex;justify-content:space-between;align-items:center;}
.sq-counter{font-size:13px;color:var(--text-muted);font-weight:500;}
.sq-score-pill{font-family:'DM Mono',monospace;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 14px;border-radius:var(--r-pill);}
.sq-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-sm);}
.sq-q-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;}
.sq-q-text{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.5;letter-spacing:-.3px;margin-bottom:24px;}
.sq-level-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-bottom:16px;font-family:'DM Mono',monospace;}
.sq-options{display:flex;flex-direction:column;gap:10px;}
.sq-opt{background:var(--bg-surface);border:2px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .18s ease;font-size:14px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;text-align:left;}
.sq-opt:hover{border-color:var(--accent-border);background:var(--accent-pale);color:var(--text-primary);}
.sq-opt.correct{background:#d1fae5;border-color:#6ee7b7;color:#065f46;font-weight:600;}
.sq-opt.wrong{background:#fee2e2;border-color:#fca5a5;color:#991b1b;}
.sq-opt.disabled{cursor:not-allowed;opacity:.75;}
.sq-opt-letter{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;font-family:'DM Mono',monospace;}
.sq-opt.correct .sq-opt-letter{background:#6ee7b7;color:#065f46;}
.sq-opt.wrong .sq-opt-letter{background:#fca5a5;color:#991b1b;}
.sq-explanation{margin-top:16px;padding:14px 18px;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-md);font-size:13px;color:var(--text-secondary);line-height:1.7;display:none;}
.sq-explanation.show{display:block;}
.sq-explanation strong{color:var(--accent);}
.sq-nav{display:flex;justify-content:flex-end;margin-top:20px;}
.sq-next-btn{background:var(--accent);color:#fff;border:none;padding:10px 24px;border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;display:none;align-items:center;gap:8px;}
.sq-next-btn:hover{background:var(--accent-light);transform:translateY(-1px);}
.sq-next-btn.show{display:flex;}
.sq-start{text-align:center;padding:48px 32px;}
.sq-start .sq-start-icon{font-size:56px;display:block;margin-bottom:20px;}
.sq-start h2{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);margin-bottom:10px;}
.sq-start p{font-size:15px;color:var(--text-muted);font-weight:300;margin-bottom:28px;line-height:1.7;}
.sq-start-btn{background:var(--accent);color:#fff;border:none;padding:14px 36px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-start-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,100,70,.25);}
.sq-result{text-align:center;padding:48px 32px;}
.sq-result-score{font-family:'Bricolage Grotesque',sans-serif;font-size:80px;font-weight:800;letter-spacing:-4px;color:var(--accent);line-height:1;}
.sq-result-label{font-size:16px;color:var(--text-muted);margin:8px 0 24px;font-weight:300;}
.sq-result-msg{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:8px;font-family:'Bricolage Grotesque',sans-serif;}
.sq-result-sub{font-size:14px;color:var(--text-muted);margin-bottom:32px;}
.sq-restart-btn{background:var(--accent);color:#fff;border:none;padding:12px 32px;border-radius:var(--r-pill);font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-restart-btn:hover{background:var(--accent-light);transform:translateY(-2px);}



/*  QUIZ HUB  */
.quiz-hub-wrap{max-width:1000px;margin:0 auto;padding:40px 48px 80px;}
@media(max-width:768px){.quiz-hub-wrap{padding:24px 20px 60px;}}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px;}
.hub-card{background:var(--bg-card);border:2px solid var(--border-soft);border-radius:var(--r-xl);padding:32px 28px;cursor:pointer;transition:all .25s ease;box-shadow:var(--shadow-sm);text-align:left;position:relative;overflow:hidden;}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.hub-card:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow-lg);}
.hub-card:hover::before{transform:scaleX(1);}
.hub-icon{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;background:var(--accent-pale);border:1px solid var(--accent-border);color:var(--accent);}
.hub-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;}
.hub-desc{font-size:13px;color:var(--text-muted);font-weight:300;line-height:1.65;margin-bottom:16px;}
.hub-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hub-q-count{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 12px;border-radius:99px;}
.hub-levels{display:flex;gap:4px;}
.hub-lvl{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;font-family:'DM Mono',monospace;}
.lvl-b{background:#d1fae5;color:#065f46;}
.lvl-i{background:#fef9c3;color:#713f12;}
.lvl-a{background:rgba(45,100,70,.08);color:#2d6446;}
.hub-arrow{position:absolute;bottom:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--accent-pale);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;transition:all .2s;}
.hub-card:hover .hub-arrow{background:var(--accent);color:#fff;transform:translateX(3px);}
.quiz-back-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft);}
.quiz-back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.quiz-back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.quiz-back-label{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;}


/*  Simple Quiz — Round Circle Format (matches APEX quiz)  */
.sq-wrap{max-width:900px;margin:0 auto;}

/* Q-dots navigator */
.sq-dots-wrap{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.sq-dots-label{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;}
.sq-dots-grid{display:flex;flex-wrap:wrap;gap:5px;}
.sq-dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-mid);background:var(--bg-surface);cursor:pointer;transition:all .15s;font-size:9px;font-weight:700;color:var(--text-faint);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;}
.sq-dot:hover{border-color:var(--accent);color:var(--accent);}
.sq-dot.current{border-color:var(--accent);background:var(--accent);color:#fff;}
.sq-dot.answered-c{background:#276749;border-color:#276749;color:#fff;}
.sq-dot.answered-w{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.sq-dot.skipped{background:#d97706;border-color:#d97706;color:#fff;}

/* Progress */
.sq-prog-wrap{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
.sq-prog-bar{flex:1;height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden;}
.sq-prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease;}
.sq-prog-txt{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;font-family:'DM Mono',monospace;}
.sq-score-pill{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:3px 12px;border-radius:99px;white-space:nowrap;}

/* Question card */
.sq-qcard{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:28px 32px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.sq-q-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sq-q-num-badge{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-soft);padding:4px 12px;border-radius:99px;}
.sq-q-lvl-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:99px;font-family:'DM Mono',monospace;text-transform:capitalize;}
.sq-q-lvl-badge.basic{background:#d1fae5;color:#065f46;}
.sq-q-lvl-badge.intermediate{background:#fef9c3;color:#713f12;}
.sq-q-lvl-badge.advanced{background:rgba(45,100,70,.08);color:#2d6446;}
.sq-q-text{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;color:var(--text-primary);line-height:1.5;letter-spacing:-.3px;margin-bottom:24px;}

/* Round circle options */
.sq-opts{display:flex;flex-direction:column;gap:10px;}
.sq-opt{background:var(--bg-surface);border:1.5px solid var(--border-mid);border-radius:var(--r-lg);padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .18s ease;font-size:14px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;text-align:left;width:100%;}
.sq-opt:hover:not(.disabled){border-color:var(--accent-border);background:var(--accent-pale);color:var(--text-primary);}
.sq-opt.disabled{cursor:not-allowed;}
.sq-opt-circle{width:32px;height:32px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;font-family:'DM Mono',monospace;color:var(--text-muted);transition:all .18s;}
.sq-opt:hover:not(.disabled) .sq-opt-circle{border-color:var(--accent);color:var(--accent);}
.sq-opt.correct{background:#f0fdf4;border-color:#276749;}
.sq-opt.correct .sq-opt-circle{background:#276749;border-color:#276749;color:#fff;}
.sq-opt.wrong{background:#fef2f2;border-color:#b91c1c;}
.sq-opt.wrong .sq-opt-circle{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.sq-opt-icon{margin-left:auto;font-size:15px;}

/* Explanation */
.sq-exp{margin-top:16px;padding:14px 18px;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-md);font-size:13px;color:var(--text-secondary);line-height:1.7;display:none;}
.sq-exp.show{display:block;}
.sq-exp strong{color:var(--accent);}

/* Nav buttons */
.sq-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;}
.sq-nav-btn{display:flex;align-items:center;gap:7px;padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-nav-btn:hover{background:var(--accent-pale);border-color:var(--accent-border);color:var(--accent);}
.sq-nav-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.sq-nav-btn.primary:hover{background:var(--accent-light);}
.sq-nav-btn:disabled{opacity:.4;cursor:not-allowed;}
.sq-nav-btn.hidden{visibility:hidden;}

/* Start screen */
.sq-start{text-align:center;padding:56px 32px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.sq-start-icon{font-size:60px;display:block;margin-bottom:20px;}
.sq-start h2{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);margin-bottom:10px;}
.sq-start p{font-size:15px;color:var(--text-muted);font-weight:300;margin-bottom:28px;line-height:1.7;max-width:480px;margin-left:auto;margin-right:auto;}
.sq-start-btn{background:var(--accent);color:#fff;border:none;padding:14px 40px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-start-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,100,70,.25);}

/* Result screen */
.sq-result{text-align:center;padding:48px 32px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.sq-result-ring{width:140px;height:140px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;}
.sq-result-ring-inner{width:100px;height:100px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:1;}
.sq-result-score-num{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;letter-spacing:-2px;color:var(--accent);}
.sq-result-score-lbl{font-size:11px;color:var(--text-muted);font-weight:600;font-family:'DM Mono',monospace;}
.sq-result-msg{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:8px;}
.sq-result-sub{font-size:14px;color:var(--text-muted);margin-bottom:32px;font-weight:300;}
.sq-result-stats{display:flex;gap:20px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;}
.sq-stat-pill{display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--r-pill);border:1px solid var(--border-soft);background:var(--bg-surface);font-size:13px;font-weight:600;font-family:'DM Mono',monospace;}
.sq-stat-pill.correct-stat{color:#276749;border-color:#6ee7b7;background:#f0fdf4;}
.sq-stat-pill.wrong-stat{color:#b91c1c;border-color:#fca5a5;background:#fef2f2;}
.sq-restart-btn{background:var(--accent);color:#fff;border:none;padding:12px 36px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-restart-btn:hover{background:var(--accent-light);transform:translateY(-2px);}



.quiz-wrap{max-width:820px;margin:0 auto;padding:40px 24px 80px;}
@media(max-width:600px){.quiz-wrap{padding:24px 16px 60px;}}

/* 
   START SCREEN
 */
.start-screen{}
.start-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:40px;text-align:center;box-shadow:var(--shadow-md);margin-bottom:20px;}
.start-icon{font-size:56px;margin-bottom:16px;display:block;}
.start-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:8px;}
.start-sub{color:var(--text-muted);font-size:15px;font-weight:300;margin-bottom:32px;}
.start-chips{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;}
.start-chip{background:var(--bg-secondary);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 24px;min-width:90px;text-align:center;}
.chip-num{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-1px;line-height:1;}
.chip-lbl{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-top:3px;}
.start-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;}
@media(max-width:500px){.start-cats{grid-template-columns:1fr;}}
.cat-card{background:var(--bg-secondary);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:18px;text-align:center;}
.cat-emoji{font-size:24px;display:block;margin-bottom:8px;}
.cat-name{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
.cat-desc{font-size:12px;color:var(--text-muted);font-weight:300;line-height:1.5;}
.start-btn{background:var(--primary);color:#fff;border:none;padding:15px 40px;border-radius:var(--r-pill);font-size:16px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:10px;transition:all 0.25s;box-shadow:var(--shadow-md);}
.start-btn:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 14px 32px rgba(45,100,70,0.25);}
.start-note{margin-top:14px;font-size:13px;color:var(--text-muted);}

/* 
   QUIZ SCREEN
 */
.quiz-screen{display:none;}

/* top bar */
.quiz-topbar{display:flex;gap:12px;align-items:stretch;margin-bottom:16px;flex-wrap:wrap;}
.quiz-progress-wrap{flex:1;min-width:200px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--shadow-sm);}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.prog-label{font-size:12px;font-weight:600;color:var(--text-secondary);}
.prog-count{font-size:12px;font-weight:700;color:var(--primary);font-family:'DM Mono',monospace;}
.prog-bar{height:7px;background:var(--bg-secondary);border-radius:var(--r-pill);overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:var(--r-pill);transition:width 0.5s ease;width:0%;}

.quiz-timer{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;font-family:'DM Mono',monospace;font-size:16px;font-weight:500;color:var(--text-secondary);box-shadow:var(--shadow-sm);white-space:nowrap;}
.quiz-timer i{color:var(--primary);}
.quiz-timer.warn{color:var(--danger);border-color:rgba(192,57,43,0.25);background:rgba(192,57,43,0.04);}
.quiz-timer.warn i{color:var(--danger);}

/* dots */
.q-dots-wrap{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.q-dots-label{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;}
.q-dots{display:flex;flex-wrap:wrap;gap:6px;}
.dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-mid);background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all var(--t);font-family:'DM Mono',monospace;}
.dot:hover{border-color:rgba(45,100,70,0.35);color:var(--primary);}
.dot.current{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.1);}
.dot.ok{background:rgba(39,103,73,0.12);border-color:#276749;color:#276749;}
.dot.wrong{background:rgba(192,57,43,0.1);border-color:var(--danger);color:var(--danger);}
.dot.skipped{background:#fef3c7;border-color:var(--warning);color:var(--warning);}

/* question card */
.q-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:28px 30px;box-shadow:var(--shadow-md);transition:border-color var(--t);}
.q-card.answered{border-color:var(--accent-border);}
@media(max-width:600px){.q-card{padding:20px 18px;}}
.q-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.q-num-badge{font-family:'DM Mono',monospace;font-size:11px;font-weight:600;color:var(--text-faint);background:var(--bg-secondary);border:1px solid var(--border-soft);padding:3px 10px;border-radius:var(--r-sm);}
.q-level-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);text-transform:capitalize;}
.q-level-badge.basic{background:#fef3c7;color:#92400e;}
.q-level-badge.intermediate{background:#dbeafe;color:#1e40af;}
.q-level-badge.advanced{background:var(--accent-pale);color:var(--primary);border:1px solid var(--accent-border);}

.q-text{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(16px,2.5vw,19px);font-weight:700;color:var(--text-primary);line-height:1.45;letter-spacing:-0.3px;margin-bottom:22px;}

/* options */
.q-options{display:flex;flex-direction:column;gap:10px;}
.q-opt{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--bg-secondary);border:1.5px solid var(--border-soft);border-radius:var(--r-lg);cursor:pointer;transition:all var(--t);font-family:'DM Sans',sans-serif;text-align:left;width:100%;}
.q-opt:hover:not(.disabled){border-color:rgba(45,100,70,0.3);background:rgba(45,100,70,0.04);color:var(--text-primary);}
.q-opt.correct{border-color:#276749;background:rgba(39,103,73,0.08);}
.q-opt.incorrect{border-color:var(--danger);background:rgba(192,57,43,0.06);}
.q-opt.disabled{cursor:not-allowed;}
.opt-circle{width:30px;height:30px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0;transition:all var(--t);font-family:'DM Mono',monospace;}
.q-opt.correct .opt-circle{background:#276749;border-color:#276749;color:#fff;}
.q-opt.incorrect .opt-circle{background:var(--danger);border-color:var(--danger);color:#fff;}
.opt-text{font-size:14px;color:var(--text-secondary);line-height:1.5;flex:1;}
.q-opt.correct .opt-text{color:#276749;font-weight:500;}
.q-opt.incorrect .opt-text{color:var(--danger);}
.opt-icon{margin-left:auto;font-size:14px;display:none;flex-shrink:0;}
.q-opt.correct .opt-icon,.q-opt.incorrect .opt-icon{display:block;}

/* explanation */
.q-exp{display:none;margin-top:16px;padding:14px 16px;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-lg);font-size:13px;color:var(--text-secondary);line-height:1.7;font-weight:300;}
.q-exp.show{display:block;}
.q-exp strong{color:var(--primary);font-weight:700;}

/* nav */
.q-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap;}
.nav-btn{padding:10px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:8px;transition:all var(--t);border:1.5px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);}
.nav-btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-mid);background:var(--bg-card-hover);}
.nav-btn:disabled{opacity:0.35;cursor:not-allowed;}
.nav-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.nav-btn.primary:hover:not(:disabled){background:var(--primary-light);box-shadow:0 8px 20px rgba(45,100,70,0.22);}
.nav-btn.skip{color:var(--warning);border-color:rgba(183,121,31,0.3);background:rgba(183,121,31,0.04);}
.nav-btn.skip:hover:not(:disabled){background:rgba(183,121,31,0.08);border-color:rgba(183,121,31,0.5);}
.submit-btn-wrap{text-align:center;margin-top:20px;display:none;}
.submit-btn{background:var(--primary);color:#fff;border:none;padding:14px 40px;border-radius:var(--r-pill);font-size:16px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:10px;transition:all 0.25s;box-shadow:var(--shadow-md);}
.submit-btn:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 14px 32px rgba(45,100,70,0.25);}

/* 
   RESULTS SCREEN
 */
.results-screen{display:none;}
.results-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:44px 36px;text-align:center;box-shadow:var(--shadow-xl);}
@media(max-width:600px){.results-card{padding:32px 20px;}}
.results-emoji{font-size:64px;display:block;margin-bottom:16px;}
.results-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:6px;}
.results-sub{color:var(--text-muted);font-size:15px;font-weight:300;margin-bottom:28px;}

/* circular ring */
.score-ring-wrap{display:flex;justify-content:center;margin-bottom:28px;}
.score-ring{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;}
.score-ring-inner{width:116px;height:116px;border-radius:50%;background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.score-pct{font-family:'Bricolage Grotesque',sans-serif;font-size:38px;font-weight:800;letter-spacing:-2px;color:var(--primary);line-height:1;}
.score-lbl{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}

.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.r-stat{background:var(--bg-secondary);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:16px 12px;text-align:center;}
.r-stat-num{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:4px;}
.r-stat-num.c{color:#276749;} .r-stat-num.w{color:var(--danger);} .r-stat-num.s{color:var(--warning);}
.r-stat-lbl{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}

.results-msg{background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-lg);padding:14px 18px;color:var(--primary);font-size:14px;font-weight:500;margin-bottom:24px;line-height:1.65;}
.results-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.res-btn{padding:12px 26px;border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:8px;transition:all var(--t);text-decoration:none;}
.res-btn.primary{background:var(--primary);color:#fff;border:none;box-shadow:var(--shadow-md);}
.res-btn.primary:hover{background:var(--primary-light);transform:translateY(-2px);}
.res-btn.secondary{background:var(--bg-secondary);color:var(--text-secondary);border:1.5px solid var(--border-mid);}
.res-btn.secondary:hover{color:var(--text-primary);border-color:var(--border-mid);}



/*  QUIZ HUB  */
.quiz-hub-wrap{max-width:1000px;margin:0 auto;padding:40px 48px 80px;}
@media(max-width:768px){.quiz-hub-wrap{padding:24px 20px 60px;}}

/* Hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px;}
.hub-card{background:var(--bg-card);border:2px solid var(--border-soft);border-radius:var(--r-xl);padding:32px 28px;cursor:pointer;transition:all .25s ease;box-shadow:var(--shadow-sm);text-align:left;position:relative;overflow:hidden;}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.hub-card:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow-lg);}
.hub-card:hover::before{transform:scaleX(1);}
.hub-card.active-hub{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,100,70,.12),var(--shadow-lg);transform:translateY(-2px);}
.hub-card.active-hub::before{transform:scaleX(1);}
.hub-icon{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;background:var(--accent-pale);border:1px solid var(--accent-border);color:var(--accent);}
.hub-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;}
.hub-desc{font-size:13px;color:var(--text-muted);font-weight:300;line-height:1.65;margin-bottom:16px;}
.hub-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hub-q-count{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 12px;border-radius:99px;}
.hub-levels{display:flex;gap:4px;}
.hub-lvl{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;font-family:'DM Mono',monospace;}
.lvl-b{background:#d1fae5;color:#065f46;}
.lvl-i{background:#fef9c3;color:#713f12;}
.lvl-a{background:rgba(45,100,70,.08);color:#2d6446;}
.hub-arrow{position:absolute;bottom:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--accent-pale);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;transition:all .2s;}
.hub-card:hover .hub-arrow,.hub-card.active-hub .hub-arrow{background:var(--accent);color:#fff;transform:translateX(3px);}

/* Quiz container */
.quiz-section{display:none;}
.quiz-section.active{display:block;}

/* Back button */
.quiz-back-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft);}
.quiz-back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.quiz-back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.quiz-back-label{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;}


/* Simple Q&A quiz (SQL/PLSQL) */
.sq-wrap{max-width:700px;margin:0 auto;}
.sq-header{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:20px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.sq-progress-bar{width:100%;height:6px;background:var(--bg-surface);border-radius:3px;margin-bottom:12px;overflow:hidden;}
.sq-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease;}
.sq-info{display:flex;justify-content:space-between;align-items:center;}
.sq-counter{font-size:13px;color:var(--text-muted);font-weight:500;}
.sq-score-pill{font-family:'DM Mono',monospace;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 14px;border-radius:var(--r-pill);}
.sq-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-sm);}
.sq-q-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;}
.sq-q-text{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary);line-height:1.5;letter-spacing:-.3px;margin-bottom:24px;}
.sq-level-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-bottom:16px;font-family:'DM Mono',monospace;}
.sq-options{display:flex;flex-direction:column;gap:10px;}
.sq-opt{background:var(--bg-surface);border:2px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .18s ease;font-size:14px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;text-align:left;}
.sq-opt:hover{border-color:var(--accent-border);background:var(--accent-pale);color:var(--text-primary);}
.sq-opt.correct{background:#d1fae5;border-color:#6ee7b7;color:#065f46;font-weight:600;}
.sq-opt.wrong{background:#fee2e2;border-color:#fca5a5;color:#991b1b;}
.sq-opt.disabled{cursor:not-allowed;opacity:.75;}
.sq-opt-letter{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;font-family:'DM Mono',monospace;}
.sq-opt.correct .sq-opt-letter{background:#6ee7b7;color:#065f46;}
.sq-opt.wrong .sq-opt-letter{background:#fca5a5;color:#991b1b;}
.sq-explanation{margin-top:16px;padding:14px 18px;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-md);font-size:13px;color:var(--text-secondary);line-height:1.7;display:none;}
.sq-explanation.show{display:block;}
.sq-explanation strong{color:var(--accent);}
.sq-nav{display:flex;justify-content:flex-end;margin-top:20px;}
.sq-next-btn{background:var(--accent);color:#fff;border:none;padding:10px 24px;border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;display:none;align-items:center;gap:8px;}
.sq-next-btn:hover{background:var(--accent-light);transform:translateY(-1px);}
.sq-next-btn.show{display:flex;}
.sq-start{text-align:center;padding:48px 32px;}
.sq-start .sq-start-icon{font-size:56px;display:block;margin-bottom:20px;}
.sq-start h2{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);margin-bottom:10px;}
.sq-start p{font-size:15px;color:var(--text-muted);font-weight:300;margin-bottom:28px;line-height:1.7;}
.sq-start-btn{background:var(--accent);color:#fff;border:none;padding:14px 36px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-start-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,100,70,.25);}
.sq-result{text-align:center;padding:48px 32px;}
.sq-result-score{font-family:'Bricolage Grotesque',sans-serif;font-size:80px;font-weight:800;letter-spacing:-4px;color:var(--accent);line-height:1;}
.sq-result-label{font-size:16px;color:var(--text-muted);margin:8px 0 24px;font-weight:300;}
.sq-result-msg{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:8px;font-family:'Bricolage Grotesque',sans-serif;}
.sq-result-sub{font-size:14px;color:var(--text-muted);margin-bottom:32px;}
.sq-restart-btn{background:var(--accent);color:#fff;border:none;padding:12px 32px;border-radius:var(--r-pill);font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-restart-btn:hover{background:var(--accent-light);transform:translateY(-2px);}



/*  QUIZ HUB  */
.quiz-hub-wrap{max-width:1000px;margin:0 auto;padding:40px 48px 80px;}
@media(max-width:768px){.quiz-hub-wrap{padding:24px 20px 60px;}}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px;}
.hub-card{background:var(--bg-card);border:2px solid var(--border-soft);border-radius:var(--r-xl);padding:32px 28px;cursor:pointer;transition:all .25s ease;box-shadow:var(--shadow-sm);text-align:left;position:relative;overflow:hidden;}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.hub-card:hover{transform:translateY(-4px);border-color:var(--accent-border);box-shadow:var(--shadow-lg);}
.hub-card:hover::before{transform:scaleX(1);}
.hub-icon{width:56px;height:56px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;background:var(--accent-pale);border:1px solid var(--accent-border);color:var(--accent);}
.hub-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;}
.hub-desc{font-size:13px;color:var(--text-muted);font-weight:300;line-height:1.65;margin-bottom:16px;}
.hub-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hub-q-count{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:4px 12px;border-radius:99px;}
.hub-levels{display:flex;gap:4px;}
.hub-lvl{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;font-family:'DM Mono',monospace;}
.lvl-b{background:#d1fae5;color:#065f46;}
.lvl-i{background:#fef9c3;color:#713f12;}
.lvl-a{background:rgba(45,100,70,.08);color:#2d6446;}
.hub-arrow{position:absolute;bottom:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--accent-pale);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;transition:all .2s;}
.hub-card:hover .hub-arrow{background:var(--accent);color:#fff;transform:translateX(3px);}
.quiz-back-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-soft);}
.quiz-back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.quiz-back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.quiz-back-label{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;}


/*  Simple Quiz — Round Circle Format (matches APEX quiz)  */
.sq-wrap{max-width:900px;margin:0 auto;}

/* Q-dots navigator */
.sq-dots-wrap{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.sq-dots-label{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;}
.sq-dots-grid{display:flex;flex-wrap:wrap;gap:5px;}
.sq-dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-mid);background:var(--bg-surface);cursor:pointer;transition:all .15s;font-size:9px;font-weight:700;color:var(--text-faint);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;}
.sq-dot:hover{border-color:var(--accent);color:var(--accent);}
.sq-dot.current{border-color:var(--accent);background:var(--accent);color:#fff;}
.sq-dot.answered-c{background:#276749;border-color:#276749;color:#fff;}
.sq-dot.answered-w{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.sq-dot.skipped{background:#d97706;border-color:#d97706;color:#fff;}

/* Progress */
.sq-prog-wrap{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;}
.sq-prog-bar{flex:1;height:6px;background:var(--bg-surface);border-radius:3px;overflow:hidden;}
.sq-prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease;}
.sq-prog-txt{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;font-family:'DM Mono',monospace;}
.sq-score-pill{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-pale);border:1px solid var(--accent-border);padding:3px 12px;border-radius:99px;white-space:nowrap;}

/* Question card */
.sq-qcard{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:28px 32px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.sq-q-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sq-q-num-badge{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-soft);padding:4px 12px;border-radius:99px;}
.sq-q-lvl-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:99px;font-family:'DM Mono',monospace;text-transform:capitalize;}
.sq-q-lvl-badge.basic{background:#d1fae5;color:#065f46;}
.sq-q-lvl-badge.intermediate{background:#fef9c3;color:#713f12;}
.sq-q-lvl-badge.advanced{background:rgba(45,100,70,.08);color:#2d6446;}
.sq-q-text{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;color:var(--text-primary);line-height:1.5;letter-spacing:-.3px;margin-bottom:24px;}

/* Round circle options */
.sq-opts{display:flex;flex-direction:column;gap:10px;}
.sq-opt{background:var(--bg-surface);border:1.5px solid var(--border-mid);border-radius:var(--r-lg);padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all .18s ease;font-size:14px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;text-align:left;width:100%;}
.sq-opt:hover:not(.disabled){border-color:var(--accent-border);background:var(--accent-pale);color:var(--text-primary);}
.sq-opt.disabled{cursor:not-allowed;}
.sq-opt-circle{width:32px;height:32px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;font-family:'DM Mono',monospace;color:var(--text-muted);transition:all .18s;}
.sq-opt:hover:not(.disabled) .sq-opt-circle{border-color:var(--accent);color:var(--accent);}
.sq-opt.correct{background:#f0fdf4;border-color:#276749;}
.sq-opt.correct .sq-opt-circle{background:#276749;border-color:#276749;color:#fff;}
.sq-opt.wrong{background:#fef2f2;border-color:#b91c1c;}
.sq-opt.wrong .sq-opt-circle{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.sq-opt-icon{margin-left:auto;font-size:15px;}

/* Explanation */
.sq-exp{margin-top:16px;padding:14px 18px;background:var(--accent-pale);border:1px solid var(--accent-border);border-radius:var(--r-md);font-size:13px;color:var(--text-secondary);line-height:1.7;display:none;}
.sq-exp.show{display:block;}
.sq-exp strong{color:var(--accent);}

/* Nav buttons */
.sq-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;}
.sq-nav-btn{display:flex;align-items:center;gap:7px;padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-nav-btn:hover{background:var(--accent-pale);border-color:var(--accent-border);color:var(--accent);}
.sq-nav-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.sq-nav-btn.primary:hover{background:var(--accent-light);}
.sq-nav-btn:disabled{opacity:.4;cursor:not-allowed;}
.sq-nav-btn.hidden{visibility:hidden;}

/* Start screen */
.sq-start{text-align:center;padding:56px 32px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.sq-start-icon{font-size:60px;display:block;margin-bottom:20px;}
.sq-start h2{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);margin-bottom:10px;}
.sq-start p{font-size:15px;color:var(--text-muted);font-weight:300;margin-bottom:28px;line-height:1.7;max-width:480px;margin-left:auto;margin-right:auto;}
.sq-start-btn{background:var(--accent);color:#fff;border:none;padding:14px 40px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-start-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,100,70,.25);}

/* Result screen */
.sq-result{text-align:center;padding:48px 32px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.sq-result-ring{width:140px;height:140px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;}
.sq-result-ring-inner{width:100px;height:100px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:1;}
.sq-result-score-num{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;letter-spacing:-2px;color:var(--accent);}
.sq-result-score-lbl{font-size:11px;color:var(--text-muted);font-weight:600;font-family:'DM Mono',monospace;}
.sq-result-msg{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:8px;}
.sq-result-sub{font-size:14px;color:var(--text-muted);margin-bottom:32px;font-weight:300;}
.sq-result-stats{display:flex;gap:20px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;}
.sq-stat-pill{display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--r-pill);border:1px solid var(--border-soft);background:var(--bg-surface);font-size:13px;font-weight:600;font-family:'DM Mono',monospace;}
.sq-stat-pill.correct-stat{color:#276749;border-color:#6ee7b7;background:#f0fdf4;}
.sq-stat-pill.wrong-stat{color:#b91c1c;border-color:#fca5a5;background:#fef2f2;}
.sq-restart-btn{background:var(--accent);color:#fff;border:none;padding:12px 36px;border-radius:var(--r-pill);font-size:15px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;}
.sq-restart-btn:hover{background:var(--accent-light);transform:translateY(-2px);}

/* ════════════════════════════════════════════════
   MOBILE DRAWER — User Info Section
════════════════════════════════════════════════ */
.nav-mobile-user {
  background:var(--bg-surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  padding:14px 16px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:200px;
}
.nav-mobile-user-avatar {
  width:38px; height:38px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700;
  flex-shrink:0;
  font-family:'Bricolage Grotesque',sans-serif;
}
.nav-mobile-user-info { flex:1; min-width:0; }
.nav-mobile-user-name {
  font-size:14px; font-weight:700;
  color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-mobile-user-role {
  font-size:11px; color:var(--text-muted); margin-top:1px;
}
.nav-mobile-logout {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-radius:var(--r-md);
  color:#c0392b;
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  border:1px solid rgba(192,57,43,0.15);
  background:rgba(192,57,43,0.04);
  width:100%;
  font-family:'DM Sans',sans-serif;
  margin-top:4px;
}
.nav-mobile-logout:hover {
  background:rgba(192,57,43,0.1);
  border-color:rgba(192,57,43,0.3);
}