@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500;600&family=Rubik:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --bg: #0d1b2a;
  --surface: #0a1520;
  --card: #0f2030;
  --border: rgba(255,255,255,0.08);
  --border-solid: rgba(255,255,255,0.12);
  --border-hi: rgba(255,255,255,0.15);
  --accent: #1db88a;
  --accent-dim: rgba(29,184,138,0.15);
  --accent-light: #22d49f;
  --accent-glow: rgba(29,184,138,0.3);
  --amber: #f5c842;
  --amber-dim: rgba(245,200,66,0.12);
  --red: #FF6E6E;
  --blue: #4f90e8;
  --blue-dim: rgba(79,144,232,0.12);
  --text: #e8f0f7;
  --muted: rgba(255,255,255,0.4);
  --muted2: rgba(255,255,255,0.22);
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Rubik', sans-serif;
  --body: 'Roboto', sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;
  --dm-sans: 'DM Sans', sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.8rem;
  --text-base: 0.875rem;
  --text-md: 0.95rem;
  --text-lg: 1.05rem;
  --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--body); font-size:var(--text-base); font-weight:var(--fw-normal); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; }

/* ════════════════════════════════════════════════════════════════
   AUTH GATE VISIBILITY
═════════════════════════════════════════════════════════════════ */

body.auth-active .shell { display:none !important; }
body.auth-active .topnav { display:none !important; }
body.auth-active .bottombar { display:none !important; }

body.booting .shell,
body.booting .topnav,
body.booting .bottombar { display:none !important; }

body.booting { position:relative; }
body.booting #demoGate { display:none !important; }

body.booting::before {
  content:''; position:fixed; inset:0; z-index:10001; background:var(--bg);
}
body.booting::after {
  content:''; position:fixed; top:50%; left:50%; width:32px; height:32px;
  margin:-16px 0 0 -16px; border:2px solid rgba(255,255,255,0.14);
  border-top-color:var(--accent); border-radius:50%; z-index:10002;
  animation:boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform:rotate(360deg); } }

/* ── TOP NAV ── */
.topnav { display:flex; align-items:center; gap:10px; padding:0 20px; height:48px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }

.logo { display:flex; align-items:center; gap:8px; }

/* New Edu Nexus top-left logo */
.topnav-brand {
  height:48px;
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.topnav-brand-logo {
  height:34px;
  width:auto;
  max-width:150px;
  object-fit:contain;
  display:block;
}

/* Old logo classes kept safely in case any other old component still uses them */
.logo-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#ffffff; border-radius:7px; padding:2px; box-shadow:0 1px 0 rgba(255,255,255,0.08), 0 6px 14px rgba(0,0,0,0.16); }
.logo-icon svg { width:31px; height:31px; display:block; overflow:visible; }
.logo-wordmark { display:flex; flex-direction:column; gap:1px; }
.logo-name { color:#fff; font-size:0.85rem; font-weight:var(--fw-bold); font-family:var(--sans); letter-spacing:0.3px; }
.logo-sub { color:var(--muted); font-size:0.6rem; letter-spacing:0.5px; }

.nav-div { width:1px; height:22px; background:var(--border-solid); margin:0 10px; }
.nav-tabs { display:flex; gap:2px; flex:1; overflow:hidden; }
.nav-tab { padding:5px 11px; border-radius:5px; color:var(--muted); font-size:0.72rem; font-family:var(--sans); cursor:pointer; white-space:nowrap; transition:all 0.15s; font-weight:var(--fw-medium); }
.nav-tab:hover { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); }
.nav-tab.active { background:var(--accent-dim); color:var(--accent); }
.nav-tab.locked { color:var(--muted2); cursor:default; }
.nav-tab.locked::after { content:"🔒"; font-size:7px; margin-left:3px; vertical-align:middle; }

.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.badge-live { background:var(--accent-dim); color:var(--accent); font-size:0.68rem; padding:2px 8px; border-radius:3px; font-family:var(--mono); }
.admin-btn { background:var(--amber-dim); color:var(--amber); font-size:0.72rem; padding:4px 10px; border-radius:5px; border:none; cursor:pointer; font-family:var(--sans); font-weight:var(--fw-semibold); transition:all 0.15s; }
.admin-btn:hover { background:rgba(245,200,66,0.2); }
.admin-btn.active { background:rgba(245,200,66,0.25); border:1px solid rgba(245,200,66,0.4); }

.nav-logout { display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:6px; border:1px solid rgba(245,200,66,0.28); background:rgba(245,200,66,0.06); color:var(--amber); font-size:0.72rem; cursor:pointer; font-family:var(--sans); font-weight:var(--fw-medium); transition:all 0.12s; }
.nav-logout svg { display:block; flex-shrink:0; }
.nav-logout svg path, .nav-logout svg polyline, .nav-logout svg line { stroke:currentColor; }
.nav-logout:hover { background:rgba(255,200,66,0.12); transform:translateY(-1px); }
.nav-logout:active { transform:translateY(0); }
.sidebar .nav-logout { width:calc(100% - 28px); margin:8px 14px; justify-content:flex-start; padding:6px 12px; }

/* ── LAYOUT ── */
.shell { display:flex; flex:1; overflow:hidden; height:calc(100vh - 48px); }

/* ── SIDEBAR ── */
.sidebar { width:200px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; }
.sidebar-section { padding:14px 0; border-bottom:1px solid var(--border); }
.sidebar-label { color:var(--muted2); font-size:0.6rem; letter-spacing:1.8px; text-transform:uppercase; padding:0 14px; margin-bottom:6px; font-family:var(--sans); font-weight:var(--fw-semibold); }
.sidebar-item { display:flex; align-items:center; gap:8px; padding:7px 14px; color:var(--muted); font-size:0.75rem; cursor:pointer; transition:all 0.12s; font-family:var(--body); }
.sidebar-item:hover { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.7); }
.sidebar-item.active { background:var(--accent-dim); color:var(--accent); border-right:2px solid var(--accent); }
.sidebar-item.locked-item { color:var(--muted2); cursor:default; }
.sidebar-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-live { background:var(--accent); }
.dot-soon { background:rgba(255,255,255,0.15); }
.dot-beta { background:var(--amber); }
/* Course Intelligence CSV should look active/live like Smart Course Finder Widget,
   not muted like the other locked-item rows. Used when .locked-item is removed
   from that row's markup (see index.html change). */
.sidebar-count { margin-left:auto; font-size:0.65rem; color:var(--muted2); font-family:var(--mono); }

/* ── MAIN ── */
.main { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ── DASHBOARD VIEW ── */
#view-dashboard { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }

.hero-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.stat-card { background:rgba(255,255,255,0.03); border:0.5px solid var(--border); border-radius:8px; padding:11px 14px; transition:border-color 0.15s; }
.stat-card:hover { border-color:var(--border-solid); }
.stat-label { color:var(--muted2); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px; font-family:var(--sans); }
.stat-value { color:#fff; font-size:1.35rem; font-weight:var(--fw-semibold); line-height:1; font-family:var(--sans); }
.stat-value .up { font-size:0.65rem; color:var(--accent); margin-left:3px; }
.stat-sub { color:var(--muted2); font-size:0.62rem; margin-top:4px; }

.alert-bar { background:rgba(245,200,66,0.07); border:0.5px solid rgba(245,200,66,0.2); border-radius:6px; padding:8px 14px; display:flex; align-items:center; gap:9px; color:rgba(245,200,66,0.85); font-size:0.75rem; }
.alert-dot { width:5px; height:5px; border-radius:50%; background:var(--amber); flex-shrink:0; }

.section-title { color:var(--muted2); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; font-family:var(--sans); }

.tile-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tile-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.tile { border-radius:8px; padding:13px; position:relative; overflow:hidden; cursor:pointer; border:0.5px solid var(--border); transition:all 0.15s; display:flex; flex-direction:column; }
.tile.live { background:rgba(255,255,255,0.03); min-height:250px; }
.tile.live:hover { border-color:var(--accent); background:rgba(29,184,138,0.04); }
.tile.coming { background:rgba(255,255,255,0.015); opacity:0.6; }
.tile.coming:hover { opacity:0.75; }
.tile-tag { font-size:0.62rem; padding:2px 7px; border-radius:3px; display:inline-block; margin-bottom:8px; font-family:var(--sans); font-weight:var(--fw-semibold); }
.tag-live { background:var(--accent-dim); color:var(--accent); }
.tag-soon { background:rgba(255,255,255,0.06); color:var(--muted); }
.tag-beta { background:var(--amber-dim); color:var(--amber); }
.tile-title { color:#fff; font-size:0.85rem; font-weight:var(--fw-semibold); margin-bottom:3px; font-family:var(--sans); }
.tile-desc { color:var(--muted); font-size:0.7rem; line-height:1.5; }
.tile-metric { color:var(--accent); font-size:1.4rem; font-weight:var(--fw-semibold); margin:7px 0 2px; font-family:var(--sans); }
.tile-metric-sub { color:var(--muted2); font-size:0.62rem; }
.lock-overlay { position:absolute; top:12px; right:10px; width:18px; height:18px; background:rgba(255,255,255,0.05); border-radius:4px; display:flex; align-items:center; justify-content:center; }
.mini-chart { height:36px; margin-top:8px; display:flex; align-items:flex-end; gap:2px; }
.bar { border-radius:2px 2px 0 0; flex:1; }
.mini-table { margin-top:8px; }
.mini-row { display:flex; justify-content:space-between; padding:3px 0; border-bottom:0.5px solid rgba(255,255,255,0.05); font-size:0.68rem; color:var(--muted); }
.mini-row:last-child { border-bottom:none; }
.mini-row span:last-child { color:rgba(255,255,255,0.65); font-family:var(--mono); }
.blur-preview { margin-top:8px; filter:blur(3px); opacity:0.25; pointer-events:none; }

.bottombar { height:26px; background:var(--surface); border-top:0.5px solid var(--border); display:flex; align-items:center; padding:0 16px; gap:16px; flex-shrink:0; }
.bb-item { color:var(--muted2); font-size:0.62rem; display:flex; align-items:center; gap:4px; font-family:var(--mono); }
.bb-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* ── COURSES / UNIVERSITY / PRODUCTS VIEWS ── */
#view-courses { flex:1; display:none; flex-direction:column; overflow:hidden; }
#view-university { flex:1; display:none; flex-direction:column; overflow:hidden; }
#view-products { flex:1; display:none; flex-direction:column; overflow:hidden; }

/* Scrollable inner body used by the Products page (and reusable for future simple pages) */
.view-page-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:18px; }

/* ── PRODUCTS PAGE — CTA BUTTONS ── */
/* Primary action — green fill (matches .btn-search style) */
.products-btn-primary { padding:6px 14px; border-radius:7px; background:#f5c842; color:#0d1b2a; font-size:0.72rem; font-weight:var(--fw-bold); font-family:var(--sans); text-decoration:none; border:none; cursor:pointer; transition:background 0.15s; display:inline-block; }
.products-btn-primary:hover:not([aria-disabled]) { background:#f7d265; }
.products-btn-white { padding:6px 14px; border-radius:7px; background:#ffffff; color:#0d1b2a; font-size:0.72rem; font-weight:var(--fw-bold); font-family:var(--sans); text-decoration:none; border:none; cursor:pointer; transition:background 0.15s; display:inline-block; }
.products-btn-white:hover:not([aria-disabled]) { background:#e8e8e8; }
/* Secondary action — accent outline */
.products-btn-secondary { padding:6px 14px; border-radius:7px; border:0.5px solid rgba(255,255,255,0.15); background:transparent; color:var(--muted); font-size:0.72rem; font-weight:var(--fw-semibold); font-family:var(--sans); text-decoration:none; cursor:pointer; display:inline-block; transition:all 0.15s; }
.products-btn-secondary:hover:not([aria-disabled]) { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
/* Ghost — subtle border */
.products-btn-ghost { padding:6px 14px; border-radius:7px; border:0.5px solid var(--border-solid); background:rgba(255,255,255,0.04); color:var(--muted); font-size:0.72rem; font-family:var(--sans); text-decoration:none; cursor:pointer; display:inline-block; transition:all 0.15s; }
.products-btn-ghost:hover:not([aria-disabled]) { color:rgba(255,255,255,0.7); border-color:rgba(255,255,255,0.25); }
/* Disabled state — applied by wireProductLinks() when URL is null */
.products-btn-primary[aria-disabled],
.products-btn-secondary[aria-disabled],
.products-btn-ghost[aria-disabled] { opacity:0.42; cursor:default; pointer-events:none; }

/* ── PRODUCTS PAGE — Course Finder Widget CTA stack (A1d) ──
   Start Pilot (block primary) on its own row, View Demo + Request Access on
   one line below, Agent Login / Manage Widget as the trailing link. */
.product-cta-stack { display:flex; flex-direction:column; gap:9px; align-items:stretch; }
.products-btn-block { width:100%; text-align:center; box-sizing:border-box; }

/* ── PRODUCTS PAGE — single clickable product cards (A1b) ──
   The whole locked card is interactive (Course Intelligence CSV / API Access).
   No inner buttons — clicking anywhere opens the Request Access flow. */
.tile-clickable { cursor:pointer; transition:transform 0.15s, border-color 0.15s, background 0.15s; }
.tile-clickable:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.22); }
.tile-clickable:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tile-click-hint { margin-top:14px; font-size:0.68rem; font-weight:var(--fw-semibold); color:var(--accent); font-family:var(--sans); }

/* ── DASHBOARD — News jump target highlight (A2) ──
   Brief pulse when the Market Intelligence tile is reached via the News nav. */
.tile-highlight { box-shadow:0 0 0 2px var(--accent), 0 0 18px rgba(29,184,138,0.35); transition:box-shadow 0.25s; }


/* ── PRODUCTS PAGE — responsive card grid ──
   Uses auto-fill so cards wrap naturally on narrow widths instead of
   being crushed to a fixed 1/3 column each. Min card width 280px means
   a 900px container → 3 columns; ~600px → 2 columns; ~300px → 1 column. */
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}
@media (max-width: 700px) {
  .product-card-grid { grid-template-columns: 1fr; }
}

/* ── PRODUCTS PAGE — heading/paragraph spacing (scoped to product cards only) ──
   1. Space above the title, matching the existing gap between .tile-desc and .mini-table (8-11px).
   2. Slightly larger title + more breathing room before the paragraph.
   3. More breathing room after the paragraph, before whatever follows (.mini-table). */
.product-card-grid .tile-title {
  margin-top: 3px;
  font-size: 0.92rem;
  margin-bottom: 7px;
}
.product-card-grid .tile-desc {
  margin-bottom: 12px;
}

.courses-topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:10px 18px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.courses-topbar-title { color:#fff; font-size:0.85rem; font-weight:var(--fw-semibold); font-family:var(--sans); display:flex; align-items:center; gap:8px; }
.back-btn { background:rgba(255,255,255,0.05); border:0.5px solid var(--border-solid); color:var(--muted); font-size:0.72rem; padding:4px 10px; border-radius:5px; cursor:pointer; font-family:var(--sans); transition:all 0.15s; }
.back-btn:hover { color:#fff; border-color:rgba(255,255,255,0.25); }

.courses-inner { display:flex; flex:1; overflow:hidden; }

.courses-sidebar { width:220px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0; }
.cs-section { padding:12px 14px; border-bottom:1px solid var(--border); }
.cs-label { color:var(--muted2); font-size:0.6rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; font-family:var(--sans); font-weight:var(--fw-semibold); }

.op-btn { width:100%; text-align:left; background:rgba(255,255,255,0.03); border:0.5px solid var(--border); color:var(--muted); font-family:var(--body); font-size:0.75rem; font-weight:var(--fw-medium); padding:8px 11px; border-radius:7px; cursor:pointer; margin-bottom:4px; display:flex; align-items:center; gap:7px; transition:all 0.15s; }
.op-btn:hover { border-color:var(--accent); color:rgba(255,255,255,0.8); background:var(--accent-dim); }
.op-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.op-btn .ico { font-size:13px; width:16px; text-align:center; }
.qs-marker { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.18); box-shadow:0 0 0 3px rgba(255,255,255,0.03); flex-shrink:0; }

.qs-item { margin-bottom:3px; }
.qs-item .op-btn { justify-content:flex-start; margin-bottom:0; }
.qs-item .op-btn.open { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.qs-item .op-btn:hover .qs-marker,
.qs-item .op-btn.open .qs-marker,
#uniPickerBtn:hover .qs-marker { background:var(--accent); box-shadow:0 0 0 3px rgba(29,184,138,0.10); }
.qs-arrow { margin-left:auto; font-size:0.8rem; color:var(--muted2); transition:transform 0.2s; display:inline-block; }
.qs-item .op-btn.open .qs-arrow { transform:rotate(90deg); color:var(--accent); }
.qs-panel { display:none; background:rgba(0,0,0,0.2); border:0.5px solid var(--accent); border-top:none; border-radius:0 0 7px 7px; padding:9px 9px 11px; animation:qs-drop 0.15s ease; }
.qs-panel.open { display:block; }
@keyframes qs-drop { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.qs-input { width:100%; padding:6px 9px; border:1px solid var(--border-solid); border-radius:6px; background:rgba(255,255,255,0.05); color:#fff; font-size:0.72rem; font-family:var(--body); outline:none; box-sizing:border-box; transition:border-color 0.15s; }
.qs-input::placeholder { color:var(--muted2); }
.qs-input:focus { border-color:var(--accent); }
.qs-select { width:100%; padding:6px 9px; border:1px solid var(--border-solid); border-radius:6px; background:#0f2030; color:#fff; font-size:0.72rem; font-family:var(--body); outline:none; cursor:pointer; margin-bottom:5px; }
.qs-select option { background:#0f2030; }
.qs-suggestions { background:#0c1e30; border:0.5px solid var(--border-solid); border-radius:6px; margin-top:3px; max-height:140px; overflow-y:auto; display:none; }
.qs-sug-item { padding:6px 9px; font-size:0.72rem; cursor:pointer; border-bottom:0.5px solid var(--border); color:var(--muted); transition:background 0.1s; }
.qs-sug-item:last-child { border-bottom:none; }
.qs-sug-item:hover { background:var(--accent-dim); color:var(--accent); }
.qs-sug-item .qs-hi { color:var(--accent); font-weight:600; }
.qs-result { font-size:0.65rem; color:var(--muted2); margin-top:5px; display:flex; justify-content:space-between; align-items:center; }
.qs-clear { background:none; border:none; color:var(--red); font-size:0.65rem; cursor:pointer; padding:0; }

#activeFilterPills { padding:8px 14px; display:flex; flex-wrap:wrap; gap:5px; border-bottom:1px solid var(--border); background:var(--surface); }
.af-pill { background:var(--accent-dim); border:0.5px solid rgba(29,184,138,0.35); color:var(--accent); font-size:0.65rem; padding:3px 8px 3px 9px; border-radius:20px; display:flex; align-items:center; gap:5px; font-family:var(--body); }
.af-pill button { background:none; border:none; cursor:pointer; color:var(--muted); font-size:0.7rem; padding:0; line-height:1; }

.export-btn { background:rgba(255,255,255,0.03); border:0.5px solid var(--border); color:var(--muted); font-family:var(--body); font-weight:var(--fw-medium); font-size:0.75rem; padding:8px 12px; border-radius:7px; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:7px; width:100%; margin-bottom:4px; }
.export-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

.courses-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.smart-search-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:10px 18px; flex-shrink:0; }
.smart-search-wrap { position:relative; max-width:700px; }
.smart-search-ico { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, rgba(29,184,138,0.95), rgba(29,184,138,0.55)); box-shadow:0 0 0 4px rgba(29,184,138,0.10); pointer-events:none; }
.smart-search-input { width:100%; padding:9px 130px 9px 38px; border:1px solid var(--border-solid); border-radius:10px; background:rgba(255,255,255,0.04); color:#fff; font-size:0.8rem; font-family:var(--body); outline:none; transition:all 0.2s; }
.smart-search-input::placeholder { color:var(--muted2); }
.smart-search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,184,138,0.1); }
.smart-search-btns { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:5px; }
.btn-search { padding:5px 12px; border-radius:7px; background:var(--accent); color:#0d1b2a; border:none; font-size:0.72rem; font-weight:var(--fw-bold); cursor:pointer; font-family:var(--sans); transition:all 0.15s; }
.btn-search:hover { background:#22d49f; }
.btn-clear-s { display:none; padding:5px 9px; border-radius:7px; border:0.5px solid var(--border-solid); background:transparent; color:var(--muted); font-size:0.72rem; cursor:pointer; }
.smart-pills { display:none; margin-top:7px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.smart-pill { background:var(--accent-dim); border:0.5px solid rgba(29,184,138,0.3); color:var(--accent); font-size:0.65rem; padding:2px 9px; border-radius:20px; font-family:var(--body); font-weight:var(--fw-medium); }

.tab-bar { display:flex; gap:1px; border-bottom:1px solid var(--border); padding:0 18px; background:var(--surface); flex-shrink:0; }
.tab { padding:9px 15px; cursor:pointer; font-size:0.72rem; font-weight:var(--fw-medium); color:var(--muted); border-bottom:2px solid transparent; transition:all 0.15s; font-family:var(--sans); letter-spacing:0.3px; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:var(--fw-semibold); }
.tab-content { display:none; flex:1; overflow:hidden; padding:14px; min-height:0; }
#tab-data { padding:0; overflow:hidden; }
.tab-content.active { display:flex; flex-direction:column; gap:10px; }

.no-data { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:10px; min-height:200px; }
.no-data .big-icon { font-size:40px; opacity:0.5; }
.no-data div { font-size:0.8rem; }

.table-scroll-wrap { flex:1; overflow:auto; min-height:0; }
table { width:100%; border-collapse:collapse; font-family:var(--body); font-size:0.72rem; }
thead { position:sticky; top:0; z-index:10; }
thead th { background:#0a1a28; border-bottom:1px solid var(--border-solid); padding:8px 12px; text-align:left; font-weight:var(--fw-semibold); color:rgba(255,255,255,0.7); white-space:nowrap; font-family:var(--sans); font-size:0.65rem; letter-spacing:0.8px; text-transform:uppercase; }
thead th.col-highlight { background:#0d2438 !important; color:var(--accent) !important; border-bottom:2px solid var(--accent) !important; }
thead th.protected-col-head { color:rgba(255,255,255,0.9); }
.protected-col-lock { margin-left:8px; font-size:0.72rem; opacity:0.75; }
tbody tr { border-bottom:0.5px solid rgba(255,255,255,0.04); transition:background 0.1s; }
tbody tr:nth-child(even) { background:rgba(255,255,255,0.015); }
tbody tr:hover { background:rgba(29,184,138,0.04); }
tbody td { padding:6px 12px; color:rgba(255,255,255,0.7); white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; border-right:0.5px solid rgba(255,255,255,0.03); }
tbody td.col-highlight { background:rgba(29,184,138,0.05); }
.protected-cell { position:relative; color:rgba(255,255,255,0.55); }
.protected-cell-text { display:inline-block; filter:blur(3px); opacity:0.35; pointer-events:none; }
.protected-cell-lock { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:0.72rem; opacity:0.8; }
.table-action-link { display:inline-flex; align-items:center; justify-content:center; min-width:96px; padding:5px 10px; border-radius:999px; border:0.5px solid var(--accent); background:var(--accent-dim); color:var(--accent); font-size:0.68rem; font-weight:var(--fw-semibold); font-family:var(--sans); text-decoration:none; transition:all 0.15s ease; }
.table-action-link:hover { border-color:#4de1b0; color:#9af4d5; background:rgba(29,184,138,0.18); }
.null-cell { color:rgba(255,255,255,0.2); font-style:italic; }

body.protect-data #view-courses,
body.protect-data #view-university,
body.protect-data #view-courses table,
body.protect-data #view-university table,
body.protect-data #view-courses thead,
body.protect-data #view-university thead,
body.protect-data #view-courses tbody,
body.protect-data #view-university tbody,
body.protect-data #view-courses th,
body.protect-data #view-university th,
body.protect-data #view-courses td,
body.protect-data #view-university td,
body.protect-data #view-courses #activeFilterPills,
body.protect-data #view-courses #smartMatchedPills,
body.protect-data #view-courses .stats-grid,
body.protect-data #view-courses .stat-card-col {
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

body.devtools-open .shell,
body.devtools-open .topnav,
body.devtools-open .bottombar { filter:blur(10px); pointer-events:none; }

#securityWarningOverlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,10,16,0.78); backdrop-filter:blur(8px); z-index:11000; }
body.devtools-open #securityWarningOverlay { display:flex; }
.security-warning-card { width:min(520px, calc(100vw - 32px)); padding:24px 26px; border-radius:16px; border:1px solid rgba(255,110,110,0.45); background:linear-gradient(180deg, rgba(20,28,38,0.98), rgba(10,19,30,0.98)); box-shadow:0 18px 48px rgba(0,0,0,0.45); text-align:center; }
.security-warning-title { color:var(--red); font-family:var(--sans); font-size:1rem; font-weight:var(--fw-bold); letter-spacing:0.04em; text-transform:uppercase; }
.security-warning-body { margin-top:10px; color:rgba(255,255,255,0.82); font-size:0.86rem; line-height:1.6; }

#paginationBar, #universityPaginationBar { display:flex; align-items:center; gap:10px; padding:8px 18px; border-top:0.5px solid var(--border); justify-content:center; flex-shrink:0; }
.pg-btn { padding:4px 11px; border-radius:5px; border:0.5px solid var(--border-solid); background:transparent; color:var(--muted); cursor:pointer; font-size:0.72rem; font-family:var(--sans); transition:all 0.15s; }
.pg-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.pg-btn:disabled { opacity:0.3; cursor:default; }
.pg-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pg-info { color:var(--muted2); font-size:0.68rem; font-family:var(--mono); }
.showing-count { padding:5px 18px; font-family:var(--mono); font-size:0.65rem; color:var(--muted2); border-top:0.5px solid var(--border); }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; padding:14px; overflow-y:auto; }
.stat-card-col { background:rgba(255,255,255,0.03); border:0.5px solid var(--border); border-radius:8px; padding:10px 13px; font-size:0.68rem; }
.stat-card-col .col-name { font-weight:var(--fw-semibold); color:rgba(255,255,255,0.8); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--sans); font-size:0.75rem; }
.stat-row { display:flex; justify-content:space-between; color:var(--muted2); margin-top:3px; }
.stat-row .sv { color:rgba(255,255,255,0.6); font-family:var(--mono); }
.null-bar { height:2px; background:rgba(255,255,255,0.08); border-radius:2px; margin-top:6px; overflow:hidden; }
.null-bar-fill { height:100%; background:var(--red); transition:width 0.3s; border-radius:2px; }

.history-item { background:rgba(255,255,255,0.03); border:0.5px solid var(--border); border-radius:7px; padding:9px 13px; display:flex; justify-content:space-between; align-items:center; font-size:0.7rem; }
.history-item .op { color:var(--accent); font-weight:var(--fw-semibold); font-family:var(--sans); }
.history-item .detail { color:var(--muted); font-size:0.65rem; }

.col-item { display:flex; align-items:center; gap:7px; padding:6px 9px; background:rgba(255,255,255,0.03); border:0.5px solid var(--border); border-radius:7px; margin-bottom:3px; cursor:grab; transition:all 0.15s; user-select:none; }
.col-item:hover { border-color:var(--accent); }
.admin-profile-panel { display:none !important; }
.col-item.dragging { opacity:0.4; cursor:grabbing; }
.col-item.drag-over { border-color:var(--accent); background:var(--accent-dim); }
.col-item .drag-handle { color:var(--muted2); font-size:0.9rem; cursor:grab; flex-shrink:0; }
.col-item .col-nm { flex:1; font-size:0.72rem; color:rgba(255,255,255,0.7); font-family:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.col-item .col-fr { font-size:0.62rem; color:var(--muted2); }
.protected-col-badge { margin-top:4px; display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; background:rgba(245,200,66,0.12); color:var(--amber); font-size:0.58rem; font-weight:var(--fw-semibold); letter-spacing:0.05em; text-transform:uppercase; }
.col-item input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.col-item.hidden-col { opacity:0.45; }

.rename-row { display:flex; gap:7px; align-items:center; margin-bottom:5px; }
.rename-row .old { font-family:var(--mono); font-size:0.7rem; background:rgba(255,255,255,0.03); padding:5px 8px; border-radius:5px; border:0.5px solid var(--border); flex:1; color:var(--muted); }
.rename-row .new-input { font-family:var(--mono); font-size:0.7rem; background:rgba(255,255,255,0.05); padding:5px 8px; border-radius:5px; border:0.5px solid var(--border); flex:1; color:#fff; outline:none; transition:border-color 0.15s; }
.rename-row .new-input:focus { border-color:var(--accent); }

.adv-col, .adv-op, .adv-val { background:#0f2030; border:0.5px solid var(--border-solid); color:#fff; font-family:var(--mono); font-size:0.72rem; padding:5px 8px; border-radius:5px; outline:none; }
.adv-col option, .adv-op option { background:#0f2030; }

.panel-title { font-size:0.8rem; font-weight:var(--fw-semibold); color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:7px; font-family:var(--sans); }

.btn-run { background:var(--accent); color:#0d1b2a; font-family:var(--sans); font-size:0.75rem; font-weight:var(--fw-bold); padding:7px 16px; border:none; border-radius:6px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.btn-run:hover { background:#22d49f; }
.btn-danger { background:transparent !important; border:0.5px solid var(--red) !important; color:var(--red) !important; }
.btn-danger:hover { background:rgba(255,110,110,0.08) !important; }

.loader { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:8000; align-items:center; justify-content:center; }
.loader.show { display:flex; }
.spinner { width:36px; height:36px; border:2px solid var(--border-solid); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

.toast-container { position:fixed; top:18px; right:18px; z-index:9000; display:flex; flex-direction:column; gap:7px; }
.toast { background:var(--card); border:0.5px solid var(--border-solid); border-radius:8px; padding:9px 15px; font-size:0.75rem; font-family:var(--body); animation:slideIn 0.2s ease; max-width:300px; color:rgba(255,255,255,0.8); box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.toast.success { border-color:var(--accent); color:var(--accent); background:rgba(29,184,138,0.1); }
.toast.error { border-color:var(--red); color:var(--red); background:rgba(255,110,110,0.08); }
.toast.info { border-color:var(--amber); color:var(--amber); background:rgba(245,200,66,0.08); }
@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

.university-page-shell { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.university-hero-card { display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:center; padding:18px; border-radius:14px; border:0.5px solid var(--border); background:linear-gradient(135deg, rgba(29,184,138,0.10), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.02)); }
.university-hero-mark { width:88px; height:88px; border-radius:24px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at top, rgba(29,184,138,0.28), rgba(29,184,138,0.12)); border:1px solid rgba(29,184,138,0.26); color:var(--accent); font-size:2rem; font-family:var(--sans); font-weight:var(--fw-bold); }
.university-hero-title { margin:0; color:#fff; font-size:1.5rem; font-family:var(--sans); }
.university-hero-subtitle { margin:8px 0 0; color:var(--muted); font-size:0.78rem; line-height:1.6; max-width:820px; }
.university-tag-row { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.university-tag { padding:4px 10px; border-radius:999px; border:0.5px solid rgba(29,184,138,0.30); background:rgba(29,184,138,0.08); color:var(--accent); font-size:0.66rem; font-weight:var(--fw-semibold); }
.university-stats-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.university-content-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:10px; }
.university-panel, .university-table-panel { background:rgba(255,255,255,0.03); border:0.5px solid var(--border); border-radius:12px; padding:14px; }
.university-panel-title { color:#fff; font-size:0.88rem; font-family:var(--sans); font-weight:var(--fw-semibold); }
.university-panel-sub { color:var(--muted2); font-size:0.7rem; }
.university-chip-list { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.university-chip { padding:5px 10px; border-radius:999px; background:rgba(255,255,255,0.04); border:0.5px solid var(--border-solid); color:rgba(255,255,255,0.78); font-size:0.7rem; }
.university-empty-inline { color:var(--muted2); font-size:0.72rem; }
.university-meta-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.university-meta-row { display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:0.5px solid rgba(255,255,255,0.05); color:var(--muted2); font-size:0.72rem; }
.university-meta-row strong { color:#fff; font-weight:var(--fw-medium); text-align:right; }
.university-table-panel { display:flex; flex-direction:column; min-height:420px; }
.university-table-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.table-inline-link { color:var(--accent); text-decoration:none; cursor:pointer; font-weight:var(--fw-semibold); }
.table-inline-link:hover { color:#8df0c7; }

@media (max-width: 980px) {
  .university-stats-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .university-content-grid { grid-template-columns:1fr; }
  .university-hero-card { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .university-page-shell { padding:12px; }
  .university-stats-grid { grid-template-columns:1fr; }
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(29,184,138,0.3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ════════════════════════════════════════════════════════════════
   DEMO AUTH GATE
═════════════════════════════════════════════════════════════════ */

#demoGate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

/* ── Page grid ── */
#demoGate .page {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.90fr);
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  overflow: hidden;
}

/* ── Hero column ── */
#demoGate .hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 60px 24px 96px;
  overflow: hidden;
  min-height: unset;
}

#demoGate .hero-bg {
  position: absolute; inset: 0; display: block;
  background:
    radial-gradient(ellipse 80% 70% at 10% 60%, rgba(29,184,138,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(79,144,232,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(29,184,138,0.05) 0%, transparent 55%);
  pointer-events: none;
}
#demoGate .hero-grid {
  position: absolute; inset: 0; display: block;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 85% 85% at 40% 50%, black 30%, transparent 100%);
}
#demoGate .hero::after {
  content: ''; position: absolute; top: 14%; bottom: 14%; right: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.09) 30%, rgba(255,255,255,0.09) 70%, transparent);
}

/* ── Hero inner content ── */
#demoGate .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Status badge */
#demoGate .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  background: rgba(29,184,138,0.08);
  border: 1px solid rgba(29,184,138,0.22);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.4px;
  margin-bottom: 40px;
  width: fit-content;
}
#demoGate .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity:1 } 50% { opacity:0.3 } }

/* ── Heading — large serif, 3 stacked lines ── */
#demoGate .hero-heading {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3vw, 3.5rem);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

/* Line 1: "The Higher Education" — white */
/* Line 2: "Intelligence Layer" — green + amber on same line */
#demoGate .hero-heading .hero-line {
  display: block;
  white-space: nowrap;
}
#demoGate .hero-heading .heading-line-two {
  display: block;
  white-space: nowrap;
}
#demoGate .heading-green-inline {
  color: var(--accent);
  font-style: normal;
}
#demoGate .heading-amber-inline {
  color: var(--amber);
  margin-left: 0.16em;
}

/* Tagline */
#demoGate .hero-tagline {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-family: var(--mono);
  color: #ffffff;
  font-weight: 700;
  opacity: 1;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
  white-space: nowrap;
}

@media (max-width: 480px) {
  #demoGate .hero-tagline {
    font-size: 0.65rem;
  }
}

/* Body paragraphs */
#demoGate .hero-body {
  max-width: 620px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 400;
}

/* Audience tags line */
#demoGate .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
#demoGate .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  background: rgba(29,184,138,0.08);
  border: 1px solid rgba(29,184,138,0.22);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.4px;
  font-family: var(--dm-sans);
  width: fit-content;
}
#demoGate .hero-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
  animation: blink 2.4s ease-in-out infinite;
}

/* Feature list — 2-col grid */
#demoGate .feature-list {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 16px 60px;
  max-width: 720px;
  align-items: start;
  margin-bottom: 28px;
  margin-top: 8px;
}
#demoGate .feat-row { display:flex; align-items:flex-start; gap:12px; }
#demoGate .feat-dot-col { display:flex; flex-direction:column; align-items:center; padding-top:4px; }
#demoGate .feat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 7px currentColor; }
#demoGate .feat-dot.g { background:var(--accent); color:var(--accent); }
#demoGate .feat-dot.b { background:var(--blue); color:var(--blue); }
#demoGate .feat-dot.a { background:var(--amber); color:var(--amber); }
#demoGate .feat-dot.p { background:#a07ef5; color:#a07ef5; }
#demoGate .feat-connector { display:none; }
#demoGate .feat-body { padding-bottom:2px; }
#demoGate .feat-row-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.28;
}
#demoGate .feat-row-desc {
  font-size: 0.70rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
  font-weight: 400;
}

/* Footer */
#demoGate .hero-footer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#demoGate .hero-footer::before {
  content: ''; width: 18px; height: 1px;
  background: var(--muted2); margin-top: 6px; flex-shrink: 0;
}
#demoGate .footer-content { display:flex; flex-direction:column; gap:6px; }
#demoGate .footer-top {
  font-size: 0.65rem; color: #ffffff; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.25px; font-weight: 700; line-height: 1;
}
#demoGate .footer-desc {
  font-size: 0.72rem; color: var(--muted); line-height: 1.55;
  font-family: var(--body); max-width: 520px;
  margin-top: 12px;
}

/* ── Auth card ── */
#demoGate .auth-side {
  width: 100%; padding: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; position: relative;
}
#demoGate .auth-side::before { display:none; }
#demoGate .auth-card {
  width: 100%; max-width: 470px; max-height: calc(100vh - 36px);
  position: relative; z-index: 1; background: #0a1622;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 26px;
  padding: 22px 24px 18px; box-shadow: 0 16px 40px rgba(0,0,0,0.32); overflow: hidden;
}
#demoGate .logo-block { display:flex; flex-direction:column; align-items:center; margin-bottom:10px; }
#demoGate .logo-tagline { margin-top:8px; font-size:0.66rem; color:var(--muted2); font-family:var(--mono); letter-spacing:2px; text-transform:uppercase; }
#demoGate .auth-brand-logo img {
  width:190px;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 4px 12px rgba(29,184,138,0.18));
}

#demoGate .tab-row {
  display: flex; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-hi); border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 14px;
}
#demoGate .tab-btn {
  flex: 1; padding: 8px 14px; border: none; border-radius: 10px;
  background: transparent; color: var(--muted); font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.18s; letter-spacing: 0.2px;
}
#demoGate .tab-btn.active {
  background: var(--accent); color: #071018; font-weight: 700;
  box-shadow: 0 2px 12px rgba(29,184,138,0.28);
}

#demoGate .form-header { margin-bottom:12px; text-align:center; }
#demoGate .form-title { font-family:var(--serif); font-size:1.7rem; font-weight:700; color:#fff; line-height:1.15; }
#demoGate .form-sub { font-size:0.8rem; color:var(--muted); margin-top:6px; }
#demoGate .form-divider { display:none; }

#demoGate .field { margin-bottom:10px; }
#demoGate .field.field-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#demoGate .field.field-split > div { min-width:0; }
#demoGate .field-label {
  display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--muted2); margin-bottom: 5px; font-family: 'DM Sans', sans-serif;
}
#demoGate .field-wrap { position:relative; display:flex; align-items:center; }
#demoGate .field-ico { position:absolute; left:13px; color:var(--muted2); pointer-events:none; transition:color 0.15s; display:flex; align-items:center; }
#demoGate .field-wrap:focus-within .field-ico { color:var(--accent); }
#demoGate .field-input {
  width: 100%; padding: 10px 14px 10px 40px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-hi); border-radius: 10px; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.84rem; outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#demoGate .field-input::placeholder { color:rgba(220,233,244,0.2); }
#demoGate .field-input:focus { border-color:var(--accent); background:rgba(29,184,138,0.04); box-shadow:0 0 0 3px rgba(29,184,138,0.1); }

#demoGate .pw-eye { position:absolute; right:12px; background:none; border:none; cursor:pointer; color:var(--muted2); padding:4px; display:flex; align-items:center; transition:color 0.15s; }
#demoGate .pw-eye:hover { color:var(--muted); }
#demoGate .forgot { display:block; text-align:right; font-size:0.71rem; color:var(--accent); cursor:pointer; margin-top:-2px; margin-bottom:10px; text-decoration:none; opacity:0.85; transition:opacity 0.15s; }
#demoGate .forgot:hover { opacity:1; }
#demoGate .form-err { background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.25); border-radius:8px; padding:9px 13px; font-size:0.75rem; color:var(--red); display:none; margin-bottom:12px; line-height:1.5; }

#demoGate .btn-primary {
  width: 100%; padding: 11px; background: var(--accent); color: #071018; border: none;
  border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.86rem;
  font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: all 0.18s;
  position: relative; overflow: hidden;
}
#demoGate .btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,0.12), transparent); pointer-events:none; }
#demoGate .btn-primary:hover { background:#22d49f; box-shadow:0 8px 22px rgba(29,184,138,0.24); }
#demoGate .btn-primary:active { box-shadow:none; }

#demoGate .auth-note { text-align:center; font-size:0.68rem; color:var(--muted2); margin-top:10px; line-height:1.5; }
#demoGate .auth-note a { color:var(--accent); text-decoration:none; font-weight:500; cursor:pointer; transition:opacity 0.15s; }
#demoGate .auth-note a:hover { opacity:0.75; }

#demoGate .view { display:none; }
#demoGate .view.active { display:block; animation:fadein 0.22s ease; }
@keyframes fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Captcha ── */
#demoGate .captcha-wrap { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(255,255,255,0.03); border:1px solid var(--border-hi); border-radius:10px; margin-bottom:10px; cursor:pointer; transition:border-color 0.15s, background 0.15s; user-select:none; }
#demoGate .captcha-wrap:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); }
#demoGate .captcha-left { display:flex; align-items:center; gap:12px; }
#demoGate .captcha-checkbox { width:22px; height:22px; border:2px solid var(--border-hi); border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; background:rgba(255,255,255,0.03); }
#demoGate .captcha-checkbox.checked { background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px rgba(29,184,138,0.4); }
#demoGate .captcha-checkbox svg { display:none; }
#demoGate .captcha-checkbox.checked svg { display:block; }
#demoGate .captcha-label { font-size:0.84rem; color:var(--muted); font-family:var(--dm-sans); }
#demoGate .captcha-right { display:flex; flex-direction:column; align-items:center; gap:3px; }
#demoGate .captcha-logo { width:32px; height:32px; background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335); border-radius:6px; display:flex; align-items:center; justify-content:center; }
#demoGate .captcha-brand { font-size:0.55rem; color:var(--muted2); font-family:var(--mono); letter-spacing:0.5px; }
#demoGate .captcha-sub { font-size:0.5rem; color:var(--muted2); font-family:var(--mono); letter-spacing:0.3px; }

/* ── Logo icon wrap ── */
#demoGate .logo-icon-wrap { width:76px; height:76px; background:transparent; border:none; border-radius:24px; display:flex; align-items:center; justify-content:center; box-shadow:none; position:relative; overflow:hidden; }
#demoGate .logo-icon-wrap::before { display:none; }
#demoGate .logo-icon-wrap svg { width:58px; height:64px; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.22)); position:relative; z-index:1; overflow:visible; }

/* ── Forgot password modal ── */
#forgotModal { display:none; position:fixed; inset:0; z-index:10001; background:rgba(5,13,22,0.8); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
#forgotModal.open { display:flex; animation:fadein 0.2s ease; }
#forgotModal .modal-box { background:#0e2033; border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:36px 34px 32px; width:90%; max-width:380px; box-shadow:0 24px 64px rgba(0,0,0,0.6); position:relative; }
#forgotModal .modal-box::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(29,184,138,0.4),transparent); border-radius:18px 18px 0 0; }
#forgotModal .modal-close { position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer; color:var(--muted2); font-size:1.1rem; line-height:1; transition:color 0.15s; }
#forgotModal .modal-close:hover { color:#fff; }
#forgotModal .modal-icon { width:52px; height:52px; border-radius:14px; background:rgba(29,184,138,0.12); border:1px solid rgba(29,184,138,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
#forgotModal .modal-title { font-family:var(--serif); font-size:1.4rem; color:#fff; text-align:center; margin-bottom:6px; }
#forgotModal .modal-sub { font-size:0.78rem; color:var(--muted); text-align:center; margin-bottom:22px; line-height:1.6; }
#forgotModal .modal-divider { height:1px; background:linear-gradient(90deg,transparent,var(--border-hi),transparent); margin:16px 0; }
#forgotModal .modal-success { display:none; text-align:center; background:rgba(29,184,138,0.08); border:1px solid rgba(29,184,138,0.2); border-radius:10px; padding:14px; font-size:0.8rem; color:var(--accent); line-height:1.6; margin-bottom:12px; }
#forgotModal .form-err { display:none; margin-bottom:12px; }
#forgotModal .btn-primary, #resetModal .btn-primary {
  width: 100%; padding: 11px; background: var(--accent); color: #071018; border: none;
  border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.86rem;
  font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: all 0.18s;
  position: relative; overflow: hidden;
}
#forgotModal .btn-primary::after, #resetModal .btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,0.12), transparent); pointer-events:none; }
#forgotModal .btn-primary:hover, #resetModal .btn-primary:hover { background:#22d49f; box-shadow:0 8px 22px rgba(29,184,138,0.24); }
#forgotModal .btn-primary:active, #resetModal .btn-primary:active { box-shadow:none; }
#forgotModal .field-input {
  width: 100%; padding: 10px 14px 10px 40px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-hi); border-radius: 10px; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.84rem; outline: none;
}
#forgotModal .field-input::placeholder { color:rgba(220,233,244,0.2); }
#forgotModal .field-input:focus { border-color:var(--accent); background:rgba(29,184,138,0.04); box-shadow:0 0 0 3px rgba(29,184,138,0.1); }

/* ── Reset password modal ── */
#resetModal { display:none; position:fixed; inset:0; z-index:10001; background:rgba(5,13,22,0.8); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
#resetModal.open { display:flex; animation:fadein 0.2s ease; }
#resetModal .modal-box { background:#0e2033; border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:36px 34px 32px; width:90%; max-width:380px; box-shadow:0 24px 64px rgba(0,0,0,0.6); position:relative; }
#resetModal .modal-box::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(29,184,138,0.4),transparent); border-radius:18px 18px 0 0; }
#resetModal .modal-close { position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer; color:var(--muted2); font-size:1.1rem; line-height:1; transition:color 0.15s; }
#resetModal .modal-close:hover { color:#fff; }
#resetModal .modal-icon { width:52px; height:52px; border-radius:14px; background:rgba(29,184,138,0.12); border:1px solid rgba(29,184,138,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
#resetModal .modal-title { font-family:var(--serif); font-size:1.4rem; color:#fff; text-align:center; margin-bottom:6px; }
#resetModal .modal-sub { font-size:0.78rem; color:var(--muted); text-align:center; margin-bottom:22px; line-height:1.6; }
#resetModal .modal-divider { height:1px; background:linear-gradient(90deg,transparent,var(--border-hi),transparent); margin:16px 0; }
#resetModal .modal-success { display:none; text-align:center; background:rgba(29,184,138,0.08); border:1px solid rgba(29,184,138,0.2); border-radius:10px; padding:14px; font-size:0.8rem; color:var(--accent); line-height:1.6; margin-bottom:12px; }
#resetModal .form-err { display:none; margin-bottom:12px; }
#resetModal .field-input { width: 100%; padding: 10px 14px 10px 40px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-hi); border-radius: 10px; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.84rem; outline: none; }
#resetModal .field-input::placeholder { color:rgba(220,233,244,0.2); }
#resetModal .field-input:focus { border-color:var(--accent); background:rgba(29,184,138,0.04); box-shadow:0 0 0 3px rgba(29,184,138,0.1); }
#resetModal .pw-eye { position:absolute; right:12px; background:none; border:none; cursor:pointer; color:var(--muted2); padding:4px; display:flex; align-items:center; transition:color 0.15s; }
#resetModal .pw-eye:hover { color:var(--muted); }

/* ── Modals & overlays ── */
#customConfirm { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.confirm-box { background:#0c1e2e; border:1px solid var(--border-solid); border-radius:13px; padding:26px 30px; max-width:340px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,0.5); }

#adminLoginBox { display:none; position:fixed; top:55px; right:18px; z-index:8500; background:#0c1e2e; border:1px solid var(--border-solid); border-radius:11px; padding:14px; min-width:250px; box-shadow:0 8px 30px rgba(0,0,0,0.5); }

#uniPickerModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:9998; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.uni-picker-box { background:#0c1e2e; border:1px solid var(--border-solid); border-radius:15px; padding:22px; width:90%; max-width:820px; max-height:82vh; display:flex; flex-direction:column; box-shadow:0 16px 50px rgba(0,0,0,0.6); }

#sheetTabsBar { display:none; background:var(--surface); border-bottom:1px solid var(--border); }

.cb-item { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:0.72rem; color:var(--muted); }
.cb-item input { accent-color:var(--accent); }

/* ── Expanded uni view ── */
body.uni-expanded .courses-sidebar,
body.uni-expanded #uni-sidebar { display:none !important; }
body.uni-expanded .courses-main,
body.uni-expanded .courses-inner { flex:1 1 auto !important; }

/* ── Mobile auth modal (≤960px only; hidden / inert on desktop) ── */
#mobileAuthBtn,
#mobileAuthBackdrop,
#mobileAuthClose { display: none; }

#mobileAuthBtn {
  align-items: center;
  gap: 6px;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--accent);
  background: rgba(10,22,34,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
#mobileAuthBtn .mab-sep { color: var(--muted2); font-weight: 400; margin: 0 1px; }

#mobileAuthBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(0,0,0,0.6);
}

#mobileAuthClose {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: none;
  border: none;
  color: var(--muted2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
#mobileAuthClose:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 960px) {
  #demoGate { overflow-y: auto; align-items: flex-start; }
  #demoGate .page { grid-template-columns:1fr; gap:24px; padding:28px 20px 36px; height:auto; min-height:100vh; overflow-y:visible; }
  #demoGate .hero { padding:12px 4px 0; justify-content:flex-start; }
  #demoGate .hero-heading { font-size:2.5rem; }
  #demoGate .hero-heading .hero-line,
  #demoGate .hero-heading .heading-line-two { white-space:normal; }
  #demoGate .feature-list { grid-template-columns:1fr 1fr; }
  #demoGate .field.field-split { grid-template-columns:1fr; gap:10px; }
  #demoGate .auth-card { max-width:100%; max-height:none; }

  /* Full-width hero: hide the inline auth card by default on mobile */
  #demoGate .auth-side { display: none; }
  /* Fixed top-right trigger button */
  #mobileAuthBtn { display: inline-flex; }

  /* When the modal is open (body.mobile-auth-open) ── show backdrop + centered card */
  body.mobile-auth-open #mobileAuthBackdrop { display: block; }
  body.mobile-auth-open #mobileAuthClose { display: block; }
  body.mobile-auth-open #demoGate .auth-side {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10010;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Let taps on the empty area fall through to the backdrop to close */
    pointer-events: none;
  }
  body.mobile-auth-open #demoGate .auth-card {
    pointer-events: auto;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Utility */
.accent-text { color:var(--accent); }

/* ════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — hamburger overlay (≤768px only)
   Desktop (≥769px) is completely unchanged: the sidebar stays static
   in the flex row and the hamburger / backdrop / close button are hidden.
═════════════════════════════════════════════════════════════════ */

/* Hidden by default → never appear on desktop. */
.sidebar-hamburger,
.sidebar-backdrop,
.sidebar-close { display:none; }

@media (max-width: 768px) {
  /* Hamburger now lives inside .topnav, so .main no longer needs the 44px reserved strip. */
  .main { position:relative; }

  /* Topnav → two-row flex layout on mobile.
     Row 1: hamburger · logo · Live badge · greeting
     Row 2: Data Points + Coming Soon pills */
  .topnav { height:auto; padding:6px 10px; flex-wrap:wrap; gap:4px 8px; align-items:center; }

  /* Desktop navigation tabs have no function on mobile (sidebar covers navigation). */
  .nav-tabs { display:none; }
  .nav-div  { display:none; }

  /* nav-right: flex:1 keeps it on row 1 (fills remaining space after hamburger+logo);
     justify-content:flex-end pushes greeting+badge to the far right. */
  .nav-right { flex:1; justify-content:flex-end; gap:4px 6px; }

  /* stat-pill-nav is a direct child of .topnav — width:100% forces it to its own row. */
  .stat-pill-nav { width:100%; }

  /* Reorder nav-right items: greeting first, Live badge second, Reset hidden. */
  #navUserGreeting { order:1; }
  .badge-live      { order:2; }
  #resetBtn        { display:none !important; }

  /* Sidebar → fixed, full-height overlay hidden off-canvas to the left. */
  .sidebar {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:1200;
    width:240px;
    max-width:82vw;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
  }
  body.sidebar-open .sidebar { transform:translateX(0); }

  /* Dark backdrop behind the sidebar. */
  .sidebar-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:1100;
    background:rgba(0,0,0,0.5);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity:1; pointer-events:auto; }

  /* Hamburger trigger — now a static flex item inside .topnav (moved from .main in HTML).
     No absolute positioning needed; topnav's flex row handles placement. */
  .sidebar-hamburger {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:static;
    width:42px;
    height:42px;
    border-radius:7px;
    border:0.5px solid var(--border-solid);
    background:var(--surface);
    color:#fff;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
  }

  /* Close (✕) button inside the sidebar. */
  .sidebar-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:8px;
    right:8px;
    z-index:1300;
    width:30px;
    height:30px;
    border-radius:50%;
    border:0.5px solid var(--border-solid);
    background:transparent;
    color:var(--muted);
    font-size:1rem;
    line-height:1;
    cursor:pointer;
  }

  /* Dashboard grids → 2 columns on mobile (matching the university-stats-grid precedent). */
  .hero-stats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Bottom bar → wraps into a clean 2-row layout instead of squeezing into one row.
     Row 1: Data live · Last refresh · API version (even columns, no text wrap)
     Row 2: Copyright line, full width, own row. */
  .bottombar {
    height:auto;
    flex-wrap:wrap;
    align-items:flex-start;
    padding:6px 10px;
    gap:4px 10px;
  }
  .bb-item {
    flex:1 1 auto;
    white-space:nowrap;
  }
  .bb-item:last-child {
    flex:1 1 100%;
    margin-left:0 !important;
    justify-content:flex-start;
    white-space:normal;
  }
}


/* ════════════════════════════════════════════════════════════════
   PRODUCT CARD — Course Finder Widget CTAs
═════════════════════════════════════════════════════════════════ */

.product-card {
  background: rgba(29,184,138,0.04);
  border: 0.5px solid rgba(29,184,138,0.22);
  border-radius: 10px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-card-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  font-family: var(--sans);
}

.product-card-desc {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  max-width: 760px;
}

.product-card-note {
  color: var(--muted2);
  font-size: 0.68rem;
  line-height: 1.5;
  font-style: italic;
}

.product-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.product-cta-primary,
.product-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  padding: 7px 16px;
}

.product-cta-primary {
  background: var(--accent);
  color: #0d1b2a;
  border: none;
}

.product-cta-primary:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,184,138,0.25);
}

.product-cta-secondary {
  background: transparent;
  color: var(--muted);
  border: 0.5px solid var(--border-solid);
}

.product-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 640px) {
  .product-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .product-cta-primary,
  .product-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PRODUCT INTEREST — "Request Access" CTA + modal (locked product cards)
   Self-contained styles (field-input/btn-primary are scoped elsewhere).
   ════════════════════════════════════════════════════════════════════════ */

/* CTA row inside locked (.tile.coming) product cards. The blanket opacity
   dimming is removed for product cards only so the "Request Access" button
   reads as actionable — the lock icon, "Partner Only" tag and greyed metric
   values still communicate the locked state. (Dashboard .tile.coming tiles
   elsewhere keep their original dimmed look.) */
.product-card-grid .tile.coming { opacity:1; }
.product-card-grid .tile.coming:hover { opacity:1; }
.product-interest-row { margin-top:13px; }
.product-interest-btn { width:100%; text-align:center; }

#productInterestModal {
  display:none; position:fixed; inset:0; z-index:10050;
  background:rgba(5,13,22,0.8); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:20px;
}
#productInterestModal.open { display:flex; animation:fadein 0.2s ease; }

#productInterestModal .pi-box {
  background:#0e2033; border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  padding:30px 28px 26px; width:100%; max-width:420px; position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
#productInterestModal .pi-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(29,184,138,0.4),transparent);
  border-radius:16px 16px 0 0;
}
#productInterestModal .pi-close {
  position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer;
  color:var(--muted2); font-size:1.05rem; line-height:1; transition:color 0.15s;
}
#productInterestModal .pi-close:hover { color:#fff; }

#productInterestModal .pi-title {
  font-family:var(--serif); font-size:1.3rem; color:#fff; margin-bottom:6px; padding-right:24px;
}
#productInterestModal .pi-sub {
  font-size:0.76rem; color:var(--muted); line-height:1.6; margin-bottom:6px;
}
#productInterestModal .pi-divider {
  height:1px; background:linear-gradient(90deg,transparent,var(--border-hi),transparent); margin:16px 0;
}

#productInterestModal .pi-field { margin-bottom:13px; }
#productInterestModal .pi-label {
  display:block; font-size:0.68rem; color:rgba(255,255,255,0.7); font-family:var(--sans);
  font-weight:var(--fw-semibold); margin-bottom:5px; letter-spacing:0.2px;
}
#productInterestModal .pi-optional { color:var(--muted2); font-weight:var(--fw-normal); }
#productInterestModal .pi-input {
  width:100%; box-sizing:border-box; padding:9px 12px; border-radius:8px;
  border:0.5px solid var(--border-solid); background:rgba(255,255,255,0.04); color:#fff;
  font-size:0.8rem; font-family:var(--body); outline:none; transition:all 0.15s;
}
#productInterestModal .pi-input::placeholder { color:rgba(220,233,244,0.25); }
#productInterestModal .pi-input:focus {
  border-color:var(--accent); background:rgba(29,184,138,0.04); box-shadow:0 0 0 3px rgba(29,184,138,0.1);
}
#productInterestModal .pi-textarea { resize:vertical; min-height:64px; line-height:1.5; }

#productInterestModal .pi-err {
  display:none; background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.25);
  border-radius:8px; padding:9px 13px; font-size:0.74rem; color:var(--red);
  line-height:1.5; margin-bottom:12px;
}
#productInterestModal .pi-success {
  display:none; text-align:center; background:rgba(29,184,138,0.08); border:1px solid rgba(29,184,138,0.2);
  border-radius:10px; padding:14px; font-size:0.8rem; color:var(--accent); line-height:1.6; margin:4px 0;
}

#productInterestModal .pi-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
#productInterestModal .pi-btn-ghost {
  padding:8px 16px; border-radius:7px; border:0.5px solid var(--border-solid);
  background:transparent; color:var(--muted); cursor:pointer; font-size:0.76rem; font-family:var(--sans);
  transition:all 0.15s;
}
#productInterestModal .pi-btn-ghost:hover { color:rgba(255,255,255,0.8); border-color:var(--border-hi); }
#productInterestModal .pi-btn-primary {
  padding:8px 18px; border-radius:7px; border:none; background:var(--accent); color:#0d1b2a;
  cursor:pointer; font-size:0.76rem; font-weight:var(--fw-bold); font-family:var(--sans);
  transition:background 0.15s;
}
#productInterestModal .pi-btn-primary:hover { background:var(--accent-light); }
#productInterestModal .pi-btn-primary:disabled { opacity:0.5; cursor:default; }

/* ════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ════════════════════════════════════════════════════════════════════════ */
#cookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11000;
  background: rgba(10, 22, 34, 0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  padding: 14px 20px;
  display: flex;
  justify-content: center;
}

.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1100px;
  width: 100%;
}

.cookie-text {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.cookie-text strong {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-family: var(--sans);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.cookie-btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 0.5px solid var(--border-solid);
}

.cookie-btn-ghost:hover {
  color: rgba(255,255,255,0.8);
  border-color: var(--border-hi);
}

.cookie-btn-primary {
  background: var(--accent);
  color: #0d1b2a;
}

.cookie-btn-primary:hover {
  background: var(--accent-light);
}

/* Mobile: stack vertically */
@media (max-width: 960px) {
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
}