:root {
  --bg:       #080b14;
  --bg2:      #0c1020;
  --bg3:      #10152a;
  --panel:    #121830;
  --panel2:   #161d38;
  --border:   #1e2d52;
  --border2:  #2a3f70;
  --c-elecblue:  #4D9FFF;  --c-elecblue-d: rgba(77,159,255,0.12);
  --c-violet:    #AA44FF;  --c-violet-d:   rgba(170,68,255,0.12);
  --c-cyan:      #f0f4ff;  --c-cyan-d:     rgba(240,244,255,0.12);
  --c-white:     #f0f4ff;  --c-white-d:    rgba(240,244,255,0.08);
  --c-gaming:    #00E5FF;  --c-gaming-d:   rgba(0,229,255,0.12);
  --c-mobile:    #FFE033;  --c-mobile-d:   rgba(255,224,51,0.12);
  --c-adult:     #E91E8C;  --c-adult-d:    rgba(233,30,140,0.12);
  --c-amber:     #FFB300;  --c-amber-d:    rgba(255,179,0,0.12);
  --c-lime:      #AEEA00;  --c-lime-d:     rgba(174,234,0,0.12);
  --c-sky:       #00D4FF;  --c-sky-d:      rgba(0,212,255,0.12);
  --c-skyblue:   #7C7FFF;  --c-skyblue-d:  rgba(124,127,255,0.12);
  --c-rose:      #FF5CA8;  --c-rose-d:     rgba(255,92,168,0.12);
  --c-gold:      #FFEE58;  --c-gold-d:     rgba(255,238,88,0.12);
  --c-orange:    #FF924C;  --c-orange-d:   rgba(255,146,76,0.12);
  --c-teal:      #1DE9D5;  --c-teal-d:     rgba(29,233,213,0.12);
  --c-mint:      #4DC832;  --c-mint-d:     rgba(77,200,50,0.12);
  --c-red:       #FF5252;  --c-red-d:      rgba(255,82,82,0.12);
  --c-coral:     #FF1744;  --c-coral-d:    rgba(255,23,68,0.12);
  --c-fuchsia:   #FF5FD2;  --c-fuchsia-d:  rgba(255,95,210,0.12);

    /* ── Technical page accent (violet) ── */
    --c-tech:      var(--c-violet);
    --c-tech-d:    var(--c-violet-d);

    /* ── Viewer column colours ── */
    --c-sl:        #4D9FFF;  /* SL Viewer = electric blue */
    --c-sl-d:      rgba(77,159,255,0.10);
    --c-sl-b:      rgba(77,159,255,0.35);
    --c-fs:        #FF6432;  /* Firestorm = orange */
    --c-fs-d:      rgba(255,146,76,0.10);
    --c-fs-b:      rgba(255,146,76,0.35);

  /* legacy aliases kept for sidebar/UI chrome */
  --blue:     #4d9fff;  --blue-dim: rgba(77,159,255,0.12);  --blue-glow: rgba(77,159,255,0.25);
  --teal:     #2dd4bf;  --teal-dim: rgba(29,233,213,0.1);
  --gold:     #fbbf24;  --gold-dim: rgba(255,238,88,0.1);
  --purple:   #7B2CBF;
  --red:      #ef4444;
  --orange:   #f97316;  --orange-dim: rgba(255,146,76,0.1);
  --pink:     #e879f9;  --pink-dim:   rgba(255,95,210,0.1);
  --text:     #b8cae8;
  --text-dim: #5a7099;
  --text-hi:  #e8f0ff;
  --text-mid: #8aa0cc;
  --say-text: #ffffff;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  min-height: 100vh;
}

#app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ═══ SIDEBAR ═══ */
#sidebar {
  width: 258px;
  min-width: 258px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: visible;
}
.logo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--teal), transparent);
  overflow: hidden;
}
.logo-row {
  font-family: 'Oxanium', 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--blue);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: visible;
}
.logo-hex {
  width: 30px; height: 30px;
  background: var(--blue-dim);
  border: 1px solid rgba(61,127,255,0.5);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.logo-sub {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
}

.search-wrap { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-inner:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.search-icon {
  color: var(--c-elecblue);
  font-size: 11px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  flex-shrink: 0;
  pointer-events: none;
}
#global-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-hi);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
}
#global-search::placeholder { color: var(--text-dim); }
#search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; line-height: 1;
  padding: 2px 3px; border-radius: 3px;
  display: none;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
#search-clear:hover { color: var(--text-hi); background: var(--border); }
#search-clear.visible { display: block; }
#search-count {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  color: var(--teal);
  padding: 5px 2px 0;
  min-height: 18px;
}

.nav { flex: 1; padding: 6px 0 20px; }
.nav-group { margin-bottom: 2px; }
.nav-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-mid);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.nav-group-hdr:hover { color: var(--text-hi); }
.nav-group-hdr .ng-arrow { margin-left: auto; font-size: 9px; transition: transform 0.2s; }
.nav-group-hdr.open .ng-arrow { transform: rotate(90deg); }
.nav-items { display: none; }
.nav-items.open { display: block; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 30px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
}
.nav-item:hover { color: var(--text-hi); border-left-color: var(--border2); background: rgba(61,127,255,0.05); }
.nav-item.active { color: var(--blue); border-left-color: var(--blue); background: var(--blue-dim); }
.ni-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; flex-shrink: 0; }
.nav-item:hover .ni-dot { opacity: 1; }

.sidebar-status {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.status-text { font-family:'Share Tech Mono','Courier New',monospace; font-size:9px; color:var(--text-dim); }
.sidebar-top-btn {
  margin-left: auto;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.sidebar-top-btn:hover { color: var(--c-teal); border-color: var(--c-teal); }

/* ═══ MAIN ═══ */
html { overflow-x: hidden; } /* clip horizontal overflow at html level — body left as default to keep position:sticky working on #sidebar */
#main { flex:1; max-width: 1400px; margin: 0 auto; padding:20px 52px 40px; min-width:0; }

.page-hdr {
  margin-bottom: 40px;
  padding-bottom: 22px;
  position: relative;
}
.page-hdr-art {
  position: absolute;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  opacity: 0.13;
  pointer-events: none;
  color: var(--c-elecblue);
}
.page-hdr-art svg { width: 100%; height: 100%; display: block; }
.page-hdr > *:not(.page-hdr-art) { position: relative; z-index: 1; }
@media (max-width: 880px) {
  .page-hdr-art { width: 200px; height: 200px; right: -80px; opacity: 0.10; }
}
@media (max-width: 640px) {
  .page-hdr-art { display: none; }
}
.page-hdr::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--c-elecblue), transparent);
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(77,159,255,0.3);
}
.eyebrow {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:10px;
  color:var(--teal); letter-spacing:3px; text-transform:uppercase;
  margin-bottom:8px;
}
.page-hdr h1 {
  font-family:'Oxanium','Courier New',monospace; font-size:1.75rem;
  font-weight:700; color:var(--text-hi); letter-spacing:1px; line-height:1.2;
}
.page-hdr p { color:var(--text-dim); margin-top:10px; font-size:13px; max-width:580px; }
.stat-row { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

/* ═══ GRID STATUS PILL (dynamic, hero area) ═══ */
.grid-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 14px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.grid-status-pill:hover {
  border-color: var(--blue);
  color: var(--text);
  background: var(--blue-dim);
}
.gsp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gsp-label { color: var(--text); font-weight: 600; }
.gsp-url { color: var(--blue); }

/* State: loading / fallback (neutral green) */
.gsp-loading .gsp-dot,
.gsp-fallback .gsp-dot {
  background: #2bb673;
  box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.7);
  animation: gspPulseSlow 2.4s ease-out infinite;
}
/* State: ok (green, slow pulse) */
.gsp-ok .gsp-dot {
  background: #2bb673;
  box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.7);
  animation: gspPulseSlow 2.4s ease-out infinite;
}
/* State: warn (amber, medium pulse) */
.gsp-warn .gsp-dot {
  background: #e0a040;
  box-shadow: 0 0 0 0 rgba(224, 160, 64, 0.7);
  animation: gspPulseMed 1.6s ease-out infinite;
}
.gsp-warn { border-color: #e0a040; }
.gsp-warn .gsp-url { color: #e0a040; }
/* State: major (red, fast pulse) */
.gsp-major .gsp-dot {
  background: #d8453a;
  box-shadow: 0 0 0 0 rgba(216, 69, 58, 0.8);
  animation: gspPulseFast 1.0s ease-out infinite;
}
.gsp-major { border-color: #d8453a; }
.gsp-major .gsp-url { color: #d8453a; }

@keyframes gspPulseSlow {
  0%   { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(43, 182, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); }
}
@keyframes gspPulseMed {
  0%   { box-shadow: 0 0 0 0 rgba(224, 160, 64, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 160, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 160, 64, 0); }
}
@keyframes gspPulseFast {
  0%   { box-shadow: 0 0 0 0 rgba(216, 69, 58, 0.8); }
  70%  { box-shadow: 0 0 0 10px rgba(216, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 69, 58, 0); }
}

/* ═══ SESSION CHECKLIST PANEL ═══ */
#session-checklist {
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-left: 6px solid var(--c-amber);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
#session-checklist.hidden { display: none; }
.sc-panel-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.sc-panel-body { flex: 1; }
.sc-panel-title {
  font-family: 'Oxanium', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-amber);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sc-panel-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.sc-panel-item {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
}
.sc-panel-item-icon { font-size: 14px; flex-shrink: 0; }
.sc-panel-dismiss {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-top: 12px;
}
.sc-panel-dismiss:hover { color: var(--c-amber); border-color: var(--c-amber); }
.sidebar-checklist-btn {
  display: none;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.sidebar-checklist-btn:hover { color: var(--c-amber); }
@media (max-width: 768px) { .sc-panel-items { grid-template-columns: 1fr; } }

.stat-chip {
  background:var(--panel); border:1px solid var(--border);
  border-radius:6px; padding:5px 12px;
  display:flex; align-items:center; gap:6px;
}
.sc-val { font-family:'Oxanium','Courier New',monospace; font-size:12px; font-weight:600; color:var(--blue); }
.stat-chip:hover { border-color:var(--blue); background:var(--blue-dim); }
.tech-chip {
  color: var(--c-skyblue);
  background: var(--c-skyblue-d);
  border-color: #7C7FFF;
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
}
.tech-chip:hover { border-color: var(--c-skyblue); background: rgba(124,127,255,0.15); }
.page-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.page-nav-link {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.page-nav-link:hover { color: var(--text-hi); background: var(--blue-dim); }
.page-nav-link.active { color: var(--blue); border-bottom-color: var(--blue); background: var(--blue-dim); }
.pn-icon { font-size: 13px; flex-shrink: 0; }
.nav-item-modal { color: var(--text-mid); }
.nav-item-modal:hover { color: var(--text-hi); }
.ni-modal-hint {
  font-size: 10px;
  color: var(--c-white);
  background: rgba(240,244,255,0.1);
  border: 1px solid rgba(240,244,255,0.2);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  letter-spacing: 0;
  vertical-align: middle;
}
.home-btn {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.home-btn:hover { color: var(--c-teal); border-color: var(--c-teal); }
.home-btn.active {
  color: var(--c-teal);
  border-color: var(--c-teal);
  background: rgba(29,233,213,0.08);
  cursor: default;
}
.sc-lbl { font-size:11px; color:var(--text-dim); }

.section { margin-bottom:56px; scroll-margin-top:24px; }

.section-hdr {
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.section-hdr::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:50px; height:1px; background:var(--teal);
}
.sec-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.si-b { background:var(--blue-dim); border:1px solid rgba(61,127,255,0.3); }
.si-g { background:var(--gold-dim); border:1px solid rgba(255,198,84,0.3); }
.si-t { background:var(--teal-dim); border:1px solid rgba(94,255,200,0.3); }
.si-p { background:rgba(240,244,255,0.22); border:1px solid rgba(240,244,255,0.6); }
.si-m { background:rgba(255,224,51,0.1); border:1px solid rgba(255,224,51,0.3); color:var(--c-mobile); }
.sec-title { font-family:'Oxanium','Courier New',monospace; font-size:1rem; font-weight:600; color:var(--text-hi); letter-spacing:1px; }
.sec-count {
  margin-left:auto;
  font-family:'Share Tech Mono','Courier New',monospace; font-size:10px;
  color:var(--text-dim); background:var(--panel);
  border:1px solid var(--border); border-radius:4px; padding:2px 8px;
}

#no-results { display:none; text-align:center; padding:80px 0; color:var(--text-dim); }
.nr-code { font-family:'Share Tech Mono','Courier New',monospace; font-size:2.5rem; color:var(--border2); margin-bottom:12px; }

/* ═══ FAQ ═══ */
.faq-list { display:flex; flex-direction:column; gap:0; }

.faq-item {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color 0.2s, box-shadow 0.2s;
  position:relative; margin-bottom:5px;
}
.faq-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:6px; background:var(--border2); transition:background 0.2s, box-shadow 0.2s;
  border-radius:10px 0 0 10px;
}
.faq-item:hover { border-color:var(--border2); }
.faq-item.hidden { display:none; }

/* Per-tag left edge colours */
.faq-item.edge-acc::before { background:var(--border2); }
.faq-item.edge-acc:hover::before, .faq-item.edge-acc.open::before { background: var(--c-elecblue); }
.faq-item.edge-acc:hover, .faq-item.edge-acc.open { border-color:rgba(77,159,255,0.35); }

.faq-item.edge-app::before { background:var(--border2); }
.faq-item.edge-app:hover::before, .faq-item.edge-app.open::before { background: var(--c-violet); }
.faq-item.edge-app:hover, .faq-item.edge-app.open { border-color:rgba(170,68,255,0.35); }

.faq-item.edge-eco::before { background:var(--border2); }
.faq-item.edge-eco:hover::before, .faq-item.edge-eco.open::before { background: var(--c-amber); }
.faq-item.edge-eco:hover, .faq-item.edge-eco.open { border-color:rgba(255,179,0,0.35); }

.faq-item.edge-grp::before { background:var(--border2); }
.faq-item.edge-grp:hover::before, .faq-item.edge-grp.open::before { background: var(--c-sky); }
.faq-item.edge-grp:hover, .faq-item.edge-grp.open { border-color:rgba(0,212,255,0.6); }

.faq-item.edge-inv::before { background:var(--border2); }
.faq-item.edge-inv:hover::before, .faq-item.edge-inv.open::before { background: var(--c-rose); }
.faq-item.edge-inv:hover, .faq-item.edge-inv.open { border-color:rgba(255,92,168,0.35); }

.faq-item.edge-lnd::before { background:var(--border2); }
.faq-item.edge-lnd:hover::before, .faq-item.edge-lnd.open::before { background: var(--c-orange); }
.faq-item.edge-lnd:hover, .faq-item.edge-lnd.open { border-color:rgba(255,146,76,0.35); }

.faq-item.edge-mov::before { background:var(--border2); }
.faq-item.edge-mov:hover::before, .faq-item.edge-mov.open::before { background: var(--c-mint); }
.faq-item.edge-mov:hover, .faq-item.edge-mov.open { border-color:rgba(77,200,50,0.35); }

.faq-item.edge-mob::before { background:var(--border2); }
.faq-item.edge-mob:hover::before, .faq-item.edge-mob.open::before { background: #FFE033; }
.faq-item.edge-mob:hover, .faq-item.edge-mob.open { border-color:rgba(255,224,51,0.35); }

.faq-item.edge-gaming::before { background:var(--border2); }
.faq-item.edge-gaming:hover::before, .faq-item.edge-gaming.open::before { background: var(--c-gaming); }
.faq-item.edge-gaming:hover, .faq-item.edge-gaming.open { border-color:rgba(0,229,255,0.35); }

.faq-item.edge-rul::before { background:var(--border2); }
.faq-item.edge-rul:hover::before, .faq-item.edge-rul.open::before { background: var(--c-red); }
.faq-item.edge-rul:hover, .faq-item.edge-rul.open { border-color:rgba(255,82,82,0.35); }

.faq-item.edge-aud::before { background:var(--border2); }
.faq-item.edge-aud:hover::before, .faq-item.edge-aud.open::before { background: var(--c-fuchsia); }
.faq-item.edge-aud:hover, .faq-item.edge-aud.open { border-color:rgba(255,95,210,0.35); }

.faq-item.edge-aud-cyan::before { background:var(--border2); }
.faq-item.edge-aud-cyan:hover::before, .faq-item.edge-aud-cyan.open::before { background:var(--c-cyan); }
.faq-item.edge-aud-cyan:hover, .faq-item.edge-aud-cyan.open { border-color:rgba(34,211,238,0.35); }

.faq-item.edge-sex::before { background:var(--border2); }
.faq-item.edge-sex:hover::before, .faq-item.edge-sex.open::before { background: var(--c-adult); }
.faq-item.edge-sex:hover, .faq-item.edge-sex.open { border-color:rgba(255,95,210,0.35); }

.faq-item.open { box-shadow:0 4px 24px rgba(0,0,0,0.35); }

.faq-q {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 14px 22px;
  cursor:pointer; user-select:none;
}
.faq-q-text { flex:1; font-size:13px; font-weight:500; color:var(--text-hi); line-height:1.4; }

.faq-tag {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  letter-spacing:1px; padding:3px 8px; border-radius:4px;
  white-space:nowrap; flex-shrink:0;
}
.t-acc { color:var(--c-elecblue); background:var(--c-elecblue-d); border:1px solid rgba(77,159,255,0.3); }
.t-app { color:var(--c-violet);   background:var(--c-violet-d);   border:1px solid rgba(170,68,255,0.3); }
.t-eco { color:var(--c-amber);    background:var(--c-amber-d);    border:1px solid rgba(255,179,0,0.3); }
.t-grp { color:var(--c-sky);      background:var(--c-sky-d);      border:1px solid rgba(0,212,255,0.55); }
.t-inv { color:var(--c-rose);     background:var(--c-rose-d);     border:1px solid rgba(255,92,168,0.3); }
.t-lnd { color:var(--c-orange);   background:var(--c-orange-d);   border:1px solid rgba(255,146,76,0.3); }
.t-mov { color:var(--c-mint);     background:var(--c-mint-d);     border:1px solid rgba(77,200,50,0.3); }
.t-mob { color:var(--c-mobile); background:rgba(255,224,51,0.15); border:1px solid rgba(255,224,51,0.4); }
.t-gaming { color:var(--c-gaming); background:var(--c-gaming-d); border:1px solid rgba(0,229,255,0.3); }
.t-rul { color:var(--c-red);      background:var(--c-red-d);      border:1px solid rgba(255,82,82,0.3); }
.t-aud { color:var(--c-fuchsia);  background:var(--c-fuchsia-d);  border:1px solid rgba(255,95,210,0.3); }
.t-sex { color:var(--c-adult);    background:var(--c-adult-d);    border:1px solid rgba(233,30,140,0.3); }

.faq-tog {
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:15px; line-height:1;
  flex-shrink:0; transition:all 0.2s;
}
.faq-item.open .faq-tog { transform:rotate(45deg); border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }

.faq-body {
  display:none; padding:16px 20px 18px 22px;
  border-top:1px solid var(--border);
}
.faq-item.open .faq-body { display:block; }

.faq-body p { font-size:13px; color:var(--text); margin-bottom:10px; line-height:1.7; }
.faq-body p:last-child { margin-bottom:0; }
.faq-body strong { color:var(--text-hi); font-weight:600; }
.faq-body code {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:11px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:4px; padding:1px 6px; color:var(--gold);
}

.steps {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; margin:10px 0;
  display:flex; flex-direction:column; gap:8px;
}
.step { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text); }
.sn {
  width:20px; height:20px; border-radius:6px;
  background:var(--blue-dim); border:1px solid rgba(61,127,255,0.4);
  color:var(--blue); font-family:'Share Tech Mono','Courier New',monospace; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; line-height:1; overflow:hidden;
}
.sn[onclick] {
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.sn[onclick]:hover {
  background: rgba(61,127,255,0.22);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61,127,255,0.18);
  color: var(--text-hi);
}
@keyframes sn-pulse {
  0%   { box-shadow: 0 0 0 0px rgba(61,127,255,0.6); }
  50%  { box-shadow: 0 0 0 5px rgba(61,127,255,0.0); }
  100% { box-shadow: 0 0 0 0px rgba(61,127,255,0.0); }
}
@keyframes say-pulse {
  0%   { box-shadow: 0 0 0 0px rgba(77,159,255,0.7); }
  40%  { box-shadow: 0 0 0 10px rgba(77,159,255,0.0); }
  100% { box-shadow: 0 0 0 0px rgba(77,159,255,0.0); }
}
.say-animate {
  animation: say-pulse 2s ease-out 2;
}
.sn-animate {
  animation: sn-pulse 0.55s ease-out 2;
}

.tip-box {
  background:rgba(94,255,200,0.04); border-left:2px solid var(--teal);
  border-radius:0 6px 6px 0; padding:10px 14px; margin-top:12px;
}
.tip-label {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  color:var(--teal); letter-spacing:2px; text-transform:uppercase; margin-bottom:5px;
}
.tip-box p { font-size:12.5px; color:var(--text-mid); margin:0; }

/* ═══ LANDMARKS ═══ */
.lm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px; }

.lm-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:18px 20px;
  transition:border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position:relative; overflow:hidden;
}
.lm-card::after {
  content:''; position:absolute; top:0; right:0;
  width:70px; height:70px;
  background:radial-gradient(circle at top right, rgba(255,198,84,0.06), transparent 70%);
  pointer-events:none;
}
.lm-card:hover { border-color:rgba(255,198,84,0.5); transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.4); }
.lm-card.hidden { display:none; }

.lm-name { font-family:'Oxanium','Courier New',monospace; font-size:12px; font-weight:600; color:var(--gold); margin-bottom:6px; }
.lm-region { font-family:'Share Tech Mono','Courier New',monospace; font-size:10px; color:var(--text-dim); margin-bottom:10px; word-break:break-all; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lm-copy-btn {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.lm-copy-btn:hover { color: var(--c-gold); border-color: var(--c-gold); }
.lm-copy-btn.ok { color: var(--c-teal); border-color: var(--c-teal); }
.lm-desc { font-size:12.5px; color:var(--text); line-height:1.55; margin-bottom:14px; }
.lm-badge {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  letter-spacing:1px; padding:2px 8px; border-radius:3px; text-transform:uppercase;
}
.b-help    { color:var(--teal);   background:var(--teal-dim);            border:1px solid rgba(94,255,200,0.2); }
.b-social  { color:var(--blue);   background:var(--blue-dim);            border:1px solid rgba(61,127,255,0.2); }
.b-shop    { color:var(--gold);   background:var(--gold-dim);            border:1px solid rgba(255,198,84,0.2); }
.b-info    { color:var(--purple); background:rgba(170,68,255,0.08);    border:1px solid rgba(170,68,255,0.2); }
.b-sandbox { color:#ff9a6b;       background:rgba(255,154,107,0.08);    border:1px solid rgba(255,154,107,0.2); }
.b-mentor  { color:var(--teal);   background:var(--teal-dim);            border:1px solid rgba(94,255,200,0.2); }

/* ═══ SCRIPTS ═══ */
.script-list { display:flex; flex-direction:column; gap:3px; }

.sc-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
  transition:border-color 0.2s; position:relative;
}
.sc-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:6px; background:var(--border2); transition:background 0.2s;
}
.sc-card:hover { border-color:var(--border2); }
.sc-card:hover::before { background:var(--sc-color, var(--teal)); }
.sc-card.open { border-color:var(--sc-color-a, rgba(29,233,213,0.3)); }
.sc-card.open::before { background:var(--sc-color, var(--teal)); }
.sc-card.hidden { display:none; }

.sc-hdr {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 14px 22px;
  cursor:pointer; user-select:none;
}
.sc-title { flex:1; font-size:13px; font-weight:500; color:var(--text-hi); }
.sc-cat {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  letter-spacing:1px; padding:3px 8px; border-radius:4px;
  color:var(--teal); background:var(--teal-dim);
  border:1px solid rgba(94,255,200,0.25); white-space:nowrap;
}
.sc-tog {
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:15px; line-height:1;
  flex-shrink:0; transition:all 0.2s;
}
.sc-card.open .sc-tog { transform:rotate(45deg); border-color:var(--sc-color, var(--teal)); color:var(--sc-color, var(--teal)); background:var(--sc-color-dim, var(--teal-dim)); }

.sc-body {
  display:none; padding:16px 20px 18px 22px;
  border-top:1px solid var(--border);
}
.sc-card.open .sc-body { display:block; }
.sc-body p { font-size:13px; color:var(--text); margin-bottom:10px; line-height:1.7; }
.sc-body p:last-child { margin-bottom:0; }
.sc-body strong { color:var(--text-hi); font-weight:600; }

.say-block {
  background:var(--bg3); border:1px solid var(--border);
  border-left:2px solid var(--blue); border-radius:0 8px 8px 0;
  padding:12px 14px; margin:12px 0; position:relative;
}
.say-label {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  color:var(--blue); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px;
}
.say-text {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:12px;
  color:var(--say-text); line-height:1.6; white-space:pre-wrap;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px 6px;
  margin: 0 -6px 10px;
  transition: color 0.15s, background 0.15s;
}
.say-text:last-child { margin-bottom: 0; }
.say-text:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .say-text:hover { background: rgba(26,106,191,0.08); }
.say-text.copied { color: var(--c-teal) !important; background: var(--c-teal-d); }
.copy-btn {
  position:absolute; top:10px; right:10px;
  background:var(--blue-dim); border:1px solid rgba(61,127,255,0.3);
  color:var(--blue); border-radius:5px; padding:3px 10px;
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  letter-spacing:1px; cursor:pointer; transition:all 0.15s;
}
.copy-btn:hover { background:rgba(61,127,255,0.22); }
.copy-btn.ok { color:var(--teal); border-color:rgba(94,255,200,0.3); background:var(--teal-dim); }

.bullets {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; margin-top:10px;
  display:flex; flex-direction:column; gap:7px;
}
.bullet { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text); }
.bullet::before { content:'▸'; color:var(--teal); flex-shrink:0; margin-top:1px; font-size:11px; }

mark { background:rgba(255,198,84,0.22); color:var(--gold); border-radius:2px; padding:0 2px; }

@media (max-width:880px) {
  #sidebar { width:220px; min-width:220px; }
  #main { padding:28px 24px 28px; }
}
@media (max-width:640px) {
  #app { flex-direction:column; }
  #sidebar { width:100%; height:auto; position:relative; }
  .nav { display:none; }
  .page-hdr h1 { font-size:1.3rem; }
}

.nav-collapse-row {
  padding: 8px 14px 4px;
  display: flex;
  justify-content: flex-end;
}
#nav-toggle-btn {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#nav-toggle-btn:hover { color: var(--text); border-color: var(--border2); }
#footer {
  position: static;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding: 14px 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.footer-left { display:flex; align-items:center; gap:14px; }
.footer-text {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.footer-divider {
  color: var(--border2);
  font-size: 16px;
}
.footer-link {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 13px;
  color: var(--c-teal);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--c-skyblue); }
.footer-top-btn {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.footer-top-btn:hover { color: var(--c-teal); border-color: var(--c-teal); }

/* ═══ MEMBERSHIP TIER TABLE ═══ */
.tier-table { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin:10px 0; }
.tier-row { display:grid; grid-template-columns:1fr 160px 160px; border-bottom:1px solid var(--border); }
.tier-row:last-child { border-bottom:none; }
.tier-header { background:var(--bg3); }
.tier-header .tier-price { font-family:'Share Tech Mono','Courier New',monospace; font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; padding:8px 12px; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--border); }
.tier-name { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; font-size:12.5px; color:var(--text-hi); }
.tier-name .tier-desc { font-size:11px; color:var(--text-dim); margin-top:3px; font-weight:400; line-height:1.4; }
.tier-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.tier-price { font-family:'Share Tech Mono','Courier New',monospace; font-size:13px; color:var(--c-amber); font-weight:600; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--border); padding:12px 8px; }
.tier-free { color:var(--c-mint); }
.tier-pm { font-size:9px; color:var(--text-dim); margin-left:1px; font-weight:400; }

/* ═══ LANDMARK FOOTER & OPEN IN SL ═══ */
.lm-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lm-badges { display:flex; flex-wrap:wrap; gap:5px; }
.sl-btn {
  font-family:'Share Tech Mono','Courier New',monospace;
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:5px; text-decoration:none;
  color:var(--c-teal); background:var(--c-teal-d);
  border:1px solid rgba(29,233,213,0.35);
  transition:background 0.15s, border-color 0.15s;
  white-space:nowrap; flex-shrink:0;
}
.sl-btn:hover { background:rgba(29,233,213,0.2); border-color:var(--c-teal); }
.si-v { background:rgba(255,23,68,0.1); border:1px solid rgba(255,23,68,0.3); color:var(--c-coral); }
.si-w { background:rgba(124,127,255,0.1); border:1px solid #7C7FFF; color:var(--c-skyblue); }

/* ═══ VIDEO LINKS ═══ */
.vid-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.vid-card {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; display:flex; align-items:center; gap:14px;
  position:relative; transition:border-color 0.2s;
}
.vid-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:6px; background:var(--border2); border-radius:10px 0 0 10px;
  transition:background 0.2s;
}
.vid-card:hover { border-color:var(--c-coral); }
.vid-card:hover::before { background:var(--c-coral); }
.xref {
  margin-top: 12px;
  padding: 7px 12px;
  background: var(--panel2);
  border-left: 3px solid var(--border2);
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--text-dim);
}
.xref-link {
  color: var(--c-teal);
  text-decoration: none;
  font-size: 11px;
  transition: color 0.15s;
}
.xref-link:hover { color: #fff; text-decoration: underline; }
.vid-title-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-hi);
  text-decoration: none;
  margin-bottom: 3px;
  display: block;
  transition: color 0.15s;
}
.vid-title-link:hover { color: var(--c-skyblue); text-decoration: underline; }
.vid-title-link--video { color: var(--text-hi); }
.vid-title-link--video:hover { color: var(--c-coral); }
.vid-card.web:hover { border-color:var(--c-skyblue); }
.vid-card.web:hover::before { background:var(--c-skyblue); }
.vid-thumb {
  width:42px; height:42px; flex-shrink:0;
  background:rgba(255,82,82,0.1); border:1px solid rgba(255,82,82,0.3);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--c-coral);
}
.vid-info { flex:1; min-width:0; }
.vid-title { font-size:13px; font-weight:500; color:var(--text-hi); margin-bottom:3px; }
.vid-sub { font-family:'Share Tech Mono','Courier New',monospace; font-size:9px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ QUICK INDEX ═══ */


/* ═══ VIDEO LINKS ═══ */
.video-grid { display:flex; flex-direction:column; gap:10px; }
.video-card {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px 20px; display:flex; gap:18px; align-items:flex-start;
  transition:border-color 0.2s;
}
.video-card:hover { border-color:var(--c-red); }
.video-card.hidden { display:none; }
.video-thumb {
  width:52px; height:52px; flex-shrink:0;
  background:rgba(255,90,90,0.1); border:1px solid rgba(255,90,90,0.3);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--c-red);
}
.video-info { flex:1; min-width:0; }
.video-title { font-size:14px; font-weight:600; color:var(--text-hi); margin-bottom:5px; }
.video-desc { font-size:12.5px; color:var(--text); line-height:1.55; margin-bottom:8px; }
.video-meta {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  color:var(--text-dim); letter-spacing:1px; text-transform:uppercase;
}
.mp-btn {
  font-family:'Share Tech Mono','Courier New',monospace;
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:5px; text-decoration:none;
  color:var(--c-amber); background:var(--c-amber-d);
  border:1px solid rgba(255,179,0,0.35);
  transition:background 0.15s, border-color 0.15s;
  white-space:nowrap;
}
.mp-btn:hover { background:rgba(255,179,0,0.2); border-color:var(--c-amber); }

.qi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.qi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.qi-card:hover {
  border-color: var(--blue);
  background: var(--blue-dim);
  transform: translateY(-2px);
}
.qi-card.hidden { display: none; }
.qi-icon { font-size: 20px; flex-shrink: 0; width: 24px; text-align: center; }
.qi-info { flex: 1; min-width: 0; }
.qi-title { font-size: 12.5px; font-weight: 600; color: var(--text-hi); line-height: 1.3; }
.qi-sub   { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.qi-arrow {
  font-size: 18px;
  color: var(--text-dim);
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.qi-card:hover .qi-arrow { color: var(--blue); transform: translateX(3px); }

/* Quick Index card colours — one per topic */
.qi-elecblue { border-left:6px solid rgba(77,159,255,0.5); }
.qi-elecblue:hover { border-color:var(--c-elecblue); background:var(--c-elecblue-d); }
.qi-elecblue:hover .qi-arrow { color:var(--c-elecblue); }

.qi-violet { border-left:6px solid rgba(170,68,255,0.5); }
.qi-violet:hover { border-color:var(--c-violet); background:var(--c-violet-d); }
.qi-violet:hover .qi-arrow { color:var(--c-violet); }

.qi-white { border-left:6px solid rgba(18,24,48,0.5); }
.qi-white:hover { border-color:#121830; background:rgba(18,24,48,0.5); }
.qi-white:hover .qi-arrow { color:#8090b0; }

.qi-clara { border-left:6px solid #FFFFFF; }
.qi-clara:hover { border-color:#ffffff; background:rgba(255,255,255,0.08); }
.qi-clara:hover .qi-arrow { color:#ffffff; }

.qi-cyan { border-left:6px solid rgba(240,244,255,0.5); }
.qi-cyan:hover { border-color:var(--c-cyan); background:var(--c-cyan-d); }
.qi-cyan:hover .qi-arrow { color:var(--c-cyan); }

.qi-fuchsia { border-left:6px solid rgba(255,95,210,0.5); }
.qi-fuchsia:hover { border-color:var(--c-fuchsia); background:var(--c-fuchsia-d); }
.qi-fuchsia:hover .qi-arrow { color:var(--c-fuchsia); }

.qi-adult { border-left:6px solid rgba(233,30,140,0.5); }
.qi-adult:hover { border-color:var(--c-adult); background:var(--c-adult-d); }
.qi-adult:hover .qi-arrow { color:var(--c-adult); }

.qi-mint-blue { border-left:6px solid rgba(0,229,255,0.5); }
.qi-mint-blue:hover { border-color:#90E0EF; background:rgba(0,229,255,0.12); }
.qi-mint-blue:hover .qi-arrow { color:#90E0EF; }

.qi-gaming { border-left:6px solid rgba(0,229,255,0.5); }
.qi-gaming:hover { border-color:var(--c-gaming); background:var(--c-gaming-d); }
.qi-gaming:hover .qi-arrow { color:var(--c-gaming); }

.qi-mobile { border-left:6px solid #FFE033; }
.qi-mobile:hover { border-color:#FFE033; background:var(--c-mobile-d); }
.qi-mobile:hover .qi-arrow { color:var(--c-mobile); }

.qi-tech { border-left:6px solid rgba(124,127,255,0.5); }
.qi-tech:hover { border-color:var(--c-skyblue); background:var(--c-skyblue-d); }
.qi-tech:hover .qi-arrow { color:var(--c-skyblue); }

.qi-amber { border-left:6px solid rgba(255,179,0,0.5); }
.qi-amber:hover { border-color:var(--c-amber); background:var(--c-amber-d); }
.qi-amber:hover .qi-arrow { color:var(--c-amber); }

.qi-lime { border-left:6px solid rgba(174,234,0,0.5); }
.qi-lime:hover { border-color:var(--c-lime); background:var(--c-lime-d); }
.qi-lime:hover .qi-arrow { color:var(--c-lime); }

.qi-sky { border-left:6px solid #00D4FF; }
.qi-sky:hover { border-color:#00D4FF; background:var(--c-sky-d); }
.qi-sky:hover .qi-arrow { color:var(--c-sky); }

.qi-rose { border-left:6px solid rgba(255,92,168,0.5); }
.qi-rose:hover { border-color:var(--c-rose); background:var(--c-rose-d); }
.qi-rose:hover .qi-arrow { color:var(--c-rose); }

.qi-gold { border-left:6px solid rgba(255,238,88,0.5); }
.qi-gold:hover { border-color:var(--c-gold); background:var(--c-gold-d); }
.qi-gold:hover .qi-arrow { color:var(--c-gold); }

.qi-orange { border-left:6px solid rgba(255,146,76,0.5); }
.qi-orange:hover { border-color:var(--c-orange); background:var(--c-orange-d); }
.qi-orange:hover .qi-arrow { color:var(--c-orange); }

.qi-teal { border-left:6px solid rgba(29,233,213,0.5); }
.qi-teal:hover { border-color:var(--c-teal); background:var(--c-teal-d); }
.qi-teal:hover .qi-arrow { color:var(--c-teal); }

.qi-skyblue { border-left:6px solid #7C7FFF; }
.qi-skyblue:hover { border-color:var(--c-skyblue); background:var(--c-skyblue-d); }
.qi-skyblue:hover .qi-arrow { color:var(--c-skyblue); }

.qi-mint { border-left:6px solid rgba(77,200,50,0.5); }
.qi-mint:hover { border-color:var(--c-mint); background:var(--c-mint-d); }
.qi-mint:hover .qi-arrow { color:var(--c-mint); }

.qi-red { border-left:6px solid rgba(255,82,82,0.5); }
.qi-red:hover { border-color:var(--c-red); background:var(--c-red-d); }
.qi-red:hover .qi-arrow { color:var(--c-red); }

.qi-coral { border-left:6px solid rgba(213,0,0,0.5); }
.qi-coral:hover { border-color:var(--c-coral); background:var(--c-coral-d); }
.qi-coral:hover .qi-arrow { color:var(--c-coral); }

/* qi-fuchsia retired — replaced by qi-adult */



/* ═══ SHORTCUTS MODAL ═══ */
.shortcuts-modal-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-left: 6px solid #8c8c9b;
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  width: 100%;
  max-width: 460px;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.shortcuts-modal-btn:hover { background: rgba(140,140,155,0.1); border-color: #8c8c9b; transform: translateY(-2px); }
.shortcuts-modal-icon { font-size: 28px; flex-shrink: 0; }
.shortcuts-modal-info { flex: 1; }
.shortcuts-modal-title { font-size: 14px; font-weight: 500; color: var(--text-hi); margin-bottom: 4px; }
.shortcuts-modal-sub { font-family: 'Share Tech Mono','Courier New',monospace; font-size: 10px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.shortcuts-modal-arrow { color: #8c8c9b; font-size: 24px; flex-shrink: 0; }

#shortcuts-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,6,14,0.92);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#shortcuts-modal.open { display: block; }
#shortcuts-modal-inner {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 24px auto;
  max-width: 780px;
  padding: 28px 32px 36px;
  position: relative;
}
#shortcuts-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#shortcuts-modal-close:hover { color: var(--text-hi); border-color: var(--text-mid); }
.shortcuts-title {
  font-family: 'Oxanium','Courier New',monospace;
  font-size: 1rem; font-weight: 600;
  color: var(--text-hi); letter-spacing: 1px;
  margin-bottom: 6px; padding-right: 40px;
}
.shortcuts-subtitle {
  font-size: 12px; color: var(--text-dim); margin-bottom: 20px;
}
.shortcuts-group-hdr {
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mid); margin: 18px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.shortcuts-table { width: 100%; border-collapse: collapse; }
.shortcuts-table tr { border-bottom: 1px solid var(--border); }
.shortcuts-table tr:last-child { border-bottom: none; }
.shortcuts-table td { padding: 7px 8px; font-size: 12.5px; vertical-align: middle; }
.shortcuts-table td:first-child { color: var(--text); width: 38%; }
.shortcuts-table td:nth-child(2), .shortcuts-table td:nth-child(3) { width: 24%; }
.shortcuts-table td:last-child { width: 14%; text-align: right; }
.sc-kbd {
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 11px;
  color: var(--c-skyblue);
  background: rgba(124,127,255,0.1);
  border: 1px solid #7C7FFF;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.sc-col-hdr { font-family: 'Share Tech Mono','Courier New',monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.sc-copy-btn {
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sc-copy-btn:hover { color: var(--c-teal); border-color: var(--c-teal); }
@media (max-width: 640px) { #shortcuts-modal-inner { margin: 10px; padding: 18px 12px 24px; } }

/* ═══ CLARA MODAL BUTTON ═══ */
.clara-modal-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-left: 6px solid var(--c-white);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  width: 100%;
  max-width: 460px;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.clara-modal-btn:hover { background: rgba(240,244,255,0.08); border-color: var(--c-white); transform: translateY(-2px); }
.clara-modal-icon { font-size: 28px; flex-shrink: 0; }
.clara-modal-info { flex: 1; }
.clara-modal-title { font-size: 14px; font-weight: 500; color: var(--text-hi); margin-bottom: 4px; }
.clara-modal-sub { font-family: 'Share Tech Mono','Courier New',monospace; font-size: 10px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.clara-modal-arrow { color: var(--c-white); font-size: 24px; flex-shrink: 0; }

/* ═══ CLARA MODAL ═══ */
#checklist-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,6,14,0.92);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#checklist-modal.open { display: block; }
#checklist-modal-inner {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-left: 4px solid var(--c-amber);
  border-radius: 12px;
  margin: 60px auto;
  max-width: 600px;
  padding: 28px 32px 32px;
  position: relative;
}
#checklist-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#checklist-modal-close:hover { color: var(--text-hi); border-color: var(--text-mid); }
@media (max-width: 640px) { #checklist-modal-inner { margin: 16px; padding: 20px 16px 24px; } }

#clara-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,6,14,0.92);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#clara-modal.open { display: block; }
#clara-modal-inner {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  margin: 24px auto;
  max-width: 860px;
  padding: 28px 32px 36px;
  position: relative;
}
#clara-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#clara-modal-close:hover { color: var(--text-hi); border-color: var(--text-mid); }
@media (max-width: 640px) { #clara-modal-inner { margin: 10px; padding: 18px 14px 24px; } }

/* ═══ CLARA ═══ */
.clara-intro {
  font-size:13px; color:var(--text-mid); line-height:1.7;
  margin-bottom:22px; max-width:680px;
}
.clara-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.clara-step {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 20px; display:flex; gap:18px; align-items:flex-start;
  transition:border-color 0.2s;
}
.clara-step:hover { border-color:var(--border2); }
.clara-letter {
  font-family:'Oxanium','Courier New',monospace;
  font-size:1.6rem; font-weight:900;
  width:52px; height:52px; flex-shrink:0;
  border:1px solid; border-radius:10px;
  display:flex; align-items:center; justify-content:center; letter-spacing:0;
}
.clara-content { flex:1; min-width:0; }
.clara-name { font-size:14px; font-weight:600; color:var(--text-hi); margin-bottom:4px; }
.clara-alt { font-size:11px; color:var(--text-dim); font-weight:400; }
.clara-goal { font-size:12.5px; color:var(--text-mid); margin-bottom:10px; line-height:1.5; }
.clara-action {
  background:var(--bg3); border:1px solid var(--border); border-radius:7px;
  padding:10px 13px; font-size:12.5px; color:var(--text); line-height:1.6;
}
.clara-action-label {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:9px;
  color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:5px;
}
.clara-examples { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.clara-example {
  font-family:'Share Tech Mono','Courier New',monospace; font-size:11.5px;
  color:var(--gold); background:var(--bg3); border:1px solid var(--border);
  border-left:2px solid rgba(255,198,84,0.5); border-radius:0 6px 6px 0;
  padding:7px 12px; line-height:1.5;
}
.clara-proscons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
.clara-pro-col, .clara-con-col {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.clara-col-hdr {
  font-family:'Oxanium','Courier New',monospace;
  font-size:11px; font-weight:700; letter-spacing:1px;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.pro-hdr { color:var(--teal); }
.con-hdr { color:var(--red); }
.clara-pc-item { display:flex; flex-direction:column; gap:3px; }
.clara-pc-title { font-size:12.5px; font-weight:600; color:var(--text-hi); }
.clara-pc-desc  { font-size:12px; color:var(--text-mid); line-height:1.55; }
.warn-item .clara-pc-title { color:var(--red); }
@media (max-width:700px) {
  .clara-proscons { grid-template-columns:1fr; }
  .clara-step { flex-direction:column; gap:12px; }
  .clara-letter { width:42px; height:42px; font-size:1.3rem; }
}


/* ═══════════════════════════════════════
   TECHNICAL PAGE — SHARED COMPONENTS
   (sidebar-logo, nav-link, qa-card, viewer
    columns, flowcharts, fc-modal, etc.)
   ═══════════════════════════════════════ */

/* ── Technical sidebar logo (uses .sidebar-logo* vs .logo* in index) ── */
.sidebar-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sidebar-logo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--teal), transparent);
}
.sidebar-logo-row {
  font-family: 'Oxanium', 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.sidebar-logo-sub {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Sidebar nav (technical page) ── */
.sidebar-nav { padding: 12px 0; flex: 1; }
.nav-section-hdr {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mid);
  padding: 14px 18px 5px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.nav-link:hover { color: var(--text-hi); background: var(--blue-dim); border-left-color: var(--c-tech); }
.nav-link .ni-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mid); flex-shrink: 0; }
.nav-link:hover .ni-dot { background: var(--c-tech); }
.nav-link.fs-link:hover { color: var(--text-hi); background: rgba(255,100,50,0.08); border-left-color: var(--c-fs); }
.nav-link.fs-link:hover .ni-dot { background: var(--c-fs); }
.sidebar-home {
  margin: 12px 14px;
  padding: 8px 14px;
  background: var(--c-tech-d);
  border: 1px solid rgba(167,139,255,0.3);
  border-radius: 6px;
  color: var(--c-tech);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background 0.15s;
}
.sidebar-home:hover { background: rgba(167,139,255,0.2); }
.sidebar-nav-toggle {
  display: none;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 8px 18px;
  color: var(--text-dim);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.sidebar-nav-toggle:hover { color: var(--text-hi); }
.sidebar-nav-toggle::after { content: ' ▼'; }
.sidebar-nav-toggle.open::after { content: ' ▲'; }
@media (max-width: 768px) {
  .sidebar-nav-toggle { display: block; }
  .sidebar-nav.mobile-open { display: block; }
}

/* ── Tech page header ── */
#page-header { padding: 0 0 24px 0; margin-bottom: 0; position: relative; }
#page-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--c-elecblue), transparent);
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(77,159,255,0.3);
}
#page-header > *:not(.page-hdr-art) { position: relative; z-index: 1; }
.header-eyebrow {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--c-tech);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.header-title {
  font-family: 'Oxanium', 'Courier New', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.header-title span { color: var(--c-tech); }
.header-sub { font-size: 13px; color: var(--text-mid); max-width: 580px; }

/* ── Tech search box ── */
.tech-search-wrap { margin: 0 0 32px 0; max-width: 600px; position: relative; }
#tech-search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 40px 10px 16px;
  color: var(--text-hi);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
#tech-search:focus { border-color: var(--c-tech); }
#tech-search::placeholder { color: var(--text-dim); }
#tech-clear {
  display: none;
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 14px; padding: 2px 4px;
}
#tech-clear:hover { color: var(--text-hi); }

/* ── Q&A cards (technical page) ── */
.qa-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  margin-bottom: 5px;
}
.qa-card.open { overflow: visible; }
.qa-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--border2);
  transition: background 0.2s;
  border-radius: 10px 0 0 10px;
}
.qa-card:hover { border-color: var(--border2); }
.qa-card:hover::before, .qa-card.open::before { background: var(--c-tech); }
.qa-card.open { border-color: rgba(167,139,255,0.35); }
.qa-card.hidden { display: none; }
.qa-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 22px;
  cursor: pointer;
  user-select: none;
}
.qa-q-text { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-hi); line-height: 1.4; }
.qa-tag {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
  color: var(--c-tech); background: var(--c-tech-d);
  border: 1px solid rgba(167,139,255,0.3);
}
.qa-tog {
  font-size: 18px; color: var(--text-dim);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border2);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s, border-color 0.2s;
  font-weight: 300;
}
.qa-card.open .qa-tog { transform: rotate(45deg); color: var(--c-tech); border-color: var(--c-tech); background: var(--c-tech-d); }
.qa-body { display: none; padding: 0 20px 18px 22px; }
.qa-card.open .qa-body { display: block; }
.qa-body p { color: var(--text); margin-bottom: 10px; line-height: 1.7; }
.qa-body a { color: var(--c-tech); text-decoration: none; }
.qa-body a:hover { text-decoration: underline; }

/* ── Viewer column layout ── */
.viewer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.viewer-col { border-radius: 8px; padding: 12px 14px; }
.vc-sl { background: var(--c-sl-d); border: 1px solid var(--c-sl-b); }
.vc-fs { background: var(--c-fs-d); border: 1px solid var(--c-fs-b); }
.vc-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.vc-sl .vc-label { color: var(--c-sl); }
.vc-fs .vc-label { color: var(--c-fs); }
.vc-col-body { font-size: 12.5px; color: var(--text); line-height: 1.65; }
.vc-col-body .say-block { margin-top: 10px; }
.vc-col-body .say-text { font-size: 12px; padding-right: 60px; }
.vc-col-body .say-label { font-size: 8px; }
.vc-col-body .copy-btn { font-size: 8px; padding: 3px 8px; }
.vc-col-body .bullets { margin: 6px 0; }
.vc-col-body .bullet { font-size: 12px; }
.vc-col-body .steps { margin: 6px 0; }
.vc-col-body .step { font-size: 12px; }
.vc-col-body p { margin-bottom: 6px; }
@media (max-width: 640px) { .viewer-cols { grid-template-columns: 1fr; } }

/* ── Technical link button ── */
.link-btn {
  display: inline-block; margin-top: 10px;
  padding: 6px 14px;
  background: var(--c-tech-d); border: 1px solid rgba(167,139,255,0.4);
  border-radius: 6px; color: var(--c-tech);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px; letter-spacing: 1px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.link-btn:hover { background: rgba(167,139,255,0.2); border-color: var(--c-tech); text-decoration: none; }

/* ── Tech sn (step numbers use tech accent) ── */
.qa-body .sn {
  min-width: 24px; height: 24px;
  background: var(--c-tech-d); border: 1px solid rgba(167,139,255,0.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px; color: var(--c-tech); flex-shrink: 0;
}

/* ── Tech tip-box (left border uses c-tech) ── */
.qa-body .tip-box { border-left-color: var(--c-tech); }
.qa-body .tip-label { color: var(--c-tech); }

/* ── Tech say-block ── */
.qa-body .say-block { background: var(--panel2); border: 1px solid var(--border2); border-radius: 8px; padding: 12px 14px; margin-top: 14px; position: relative; }
.qa-body .say-label { color: var(--c-tech); }
.qa-body .say-block .copy-btn { background: var(--c-tech-d); border: 1px solid rgba(167,139,255,0.4); color: var(--c-tech); }
.qa-body .say-block .copy-btn:hover { background: rgba(167,139,255,0.25); }

/* ── Firestorm card overrides ── */
.fs-card:hover { border-color: rgba(255,100,50,0.35) !important; }
.fs-card:hover .qa-tog { color: var(--c-fs); border-color: var(--c-fs); }
.fs-card:hover::before { background: var(--c-fs) !important; }
.fs-card.open { border-color: rgba(255,100,50,0.35) !important; }
.fs-card.open .qa-tog { color: var(--c-fs); border-color: var(--c-fs); background: rgba(255,100,50,0.1); }
.fs-card.open::before { background: var(--c-fs) !important; }
.fs-section .qa-card:hover { border-color: rgba(255,100,50,0.35); }
.fs-section .qa-card:hover::before { background: var(--c-fs); }
.fs-section .qa-card.open { border-color: rgba(255,100,50,0.35); }
.fs-section .qa-card.open::before { background: var(--c-fs); }
.fs-section .qa-card.open .qa-tog { color: var(--c-fs); border-color: var(--c-fs); background: rgba(255,100,50,0.1); }
.fs-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  vertical-align: middle; flex-shrink: 0;
  position: relative; top: -1px;
}

/* ── Flowchart (diagnostic flowcharts on technical page) ── */
.fc { font-family: 'Roboto', sans-serif; width: 100%; overflow: hidden; }
.fc-node { border-radius: 8px; padding: 12px 16px; margin: 0 auto 6px; text-align: center; font-size: 13px; position: relative; max-width: 520px; cursor: default; width: 100%; }
.fc-start { background: rgba(167,139,255,0.2); border: 2px solid var(--c-tech); color: var(--text-hi); font-weight: 600; border-radius: 30px; }
.fc-q { background: rgba(58,134,255,0.1); border: 1px solid rgba(58,134,255,0.5); color: var(--text-hi); border-radius: 8px; }
.fc-action { background: rgba(29,233,213,0.08); border: 1px solid rgba(29,233,213,0.35); color: var(--text); border-radius: 6px; font-size: 12.5px; text-align: left; padding: 10px 14px; }
.fc-end-ok { background: rgba(105,255,71,0.1); border: 2px solid rgba(105,255,71,0.5); color: #69FF47; font-weight: 600; border-radius: 30px; }
.fc-end-bad { background: rgba(255,82,82,0.1); border: 2px solid rgba(255,82,82,0.4); color: #FF5252; font-weight: 600; border-radius: 30px; }
.fc-end-ticket { background: rgba(255,179,0,0.1); border: 2px solid rgba(255,179,0,0.4); color: #FFB300; font-weight: 600; border-radius: 30px; }
.fc-arrow { text-align: center; color: var(--text-dim); font-size: 18px; line-height: 1; margin: 0 auto; display: block; }
.fc-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto; max-width: 700px; }
.fc-branch-col { display: flex; flex-direction: column; align-items: center; }
.fc-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 2px 10px; border-radius: 3px; margin-bottom: 4px; }
.fc-label-yes { color: #69FF47; background: rgba(105,255,71,0.1); border: 1px solid rgba(105,255,71,0.3); }
.fc-label-no  { color: #FF5252; background: rgba(255,82,82,0.1);  border: 1px solid rgba(255,82,82,0.3); }
.fc-sep { border: none; border-top: 1px dashed var(--border2); margin: 16px auto; max-width: 700px; }
.fc-merge { text-align: center; color: var(--text-dim); font-size: 11px; letter-spacing: 1px; font-family: 'Share Tech Mono', monospace; margin: 4px 0; }
.fc-note { font-size: 11px; color: var(--text-mid); text-align: center; margin-top: 4px; }

/* ── Flowchart button grid ── */
.fc-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 4px; }
.fc-btn { background: var(--panel); border: 1px solid var(--border); border-left: 6px solid var(--c-tech); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; text-align: left; width: 100%; }
.fc-btn:hover { transform: translateY(-2px); }
.fc-btn-icon { font-size: 24px; flex-shrink: 0; }
.fc-btn-info { flex: 1; }
.fc-btn-title { font-size: 13px; font-weight: 500; color: var(--text-hi); line-height: 1.3; margin-bottom: 3px; }
.fc-btn-sub { font-family: 'Share Tech Mono', 'Courier New', monospace; font-size: 9px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; }
.fc-btn-arrow { font-size: 20px; flex-shrink: 0; }
.fc-btn.fc-violet { border-left-color: var(--c-violet); }
.fc-btn.fc-violet:hover { border-color: var(--c-violet); background: var(--c-violet-d); }
.fc-btn.fc-violet .fc-btn-arrow { color: var(--c-violet); }
.fc-btn.fc-mint { border-left-color: var(--c-mint); }
.fc-btn.fc-mint:hover { border-color: var(--c-mint); background: var(--c-mint-d); }
.fc-btn.fc-mint .fc-btn-arrow { color: var(--c-mint); }
.fc-btn.fc-rose { border-left-color: var(--c-rose); }
.fc-btn.fc-rose:hover { border-color: var(--c-rose); background: var(--c-rose-d); }
.fc-btn.fc-rose .fc-btn-arrow { color: var(--c-rose); }

/* ── Flowchart modal ── */
#fc-modal { display: none; position: fixed; inset: 0; background: rgba(4,6,14,0.92); z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#fc-modal.open { display: block; }
#fc-modal-inner { background: var(--panel); border: 1px solid var(--border2); border-radius: 12px; margin: 24px auto; max-width: 1100px; padding: 28px 32px 36px; position: relative; }
#fc-modal-title { font-family: 'Oxanium', 'Courier New', monospace; font-size: 1rem; font-weight: 600; color: var(--text-hi); letter-spacing: 1px; margin-bottom: 16px; padding-right: 40px; }
#fc-modal-close { position: absolute; top: 20px; right: 20px; background: var(--panel2); border: 1px solid var(--border2); border-radius: 6px; color: var(--text-dim); font-size: 18px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
#fc-modal-close:hover { color: var(--text-hi); border-color: var(--text-mid); }
#fc-modal-body { overflow-x: auto; }

/* ── Tech active chip ── */
.tech-chip-active {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--c-tech); background: var(--c-tech-d);
  border: 1px solid rgba(167,139,255,0.5);
  border-radius: 6px; padding: 5px 12px;
  display: inline-flex; align-items: center; cursor: default;
}

/* ── Tech page responsive overrides ── */
@media (max-width: 768px) {
  #sidebar { width: 100%; min-width: 0; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border); overflow-y: visible; }
  .sidebar-nav { display: none; }
  .sidebar-logo { padding: 14px 18px; }
  #main { padding: 24px 16px 60px; }
  .header-title { font-size: 1.3rem; }
  .header-sub { font-size: 12px; }
  .fc-btn-grid { grid-template-columns: 1fr; }
  .sec-hdr { flex-wrap: wrap; gap: 10px; }
  .say-text { padding-right: 0; padding-bottom: 36px; }
  .say-block .copy-btn { top: auto; bottom: 10px; right: 12px; }
  #fc-modal-inner { margin: 8px; padding: 16px 12px 20px; }
  #fc-modal-title { font-size: 0.85rem; }
  .fc-branch { grid-template-columns: 1fr !important; }
  .fc-branch-col { width: 100%; }
  .fc-node { max-width: 100% !important; width: 100% !important; }
}
@media (max-width: 900px) and (min-width: 769px) {
  #sidebar { width: 200px; min-width: 200px; }
  #main { padding: 28px 28px 60px; }
  .viewer-cols { grid-template-columns: 1fr; }
}


/* ── COOKIE NOTICE ── */
/* Load fonts from Google with swap so layout never breaks if blocked */
  @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700;900&family=Share+Tech+Mono&family=Roboto:wght@300;400;500;600&display=swap');

  /* ── COOKIE NOTICE ── */
  #cookie-notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 620px;
    width: calc(100% - 40px);
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    font-size: 12.5px;
    color: var(--text-mid);
  }
  #cookie-notice.hidden { display: none; }
  #cookie-notice p { flex: 1; line-height: 1.5; margin: 0; }
  #cookie-notice a { color: var(--text); text-decoration: underline; }
  #cookie-notice button {
    background: var(--purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    transition: opacity 0.15s;
    flex-shrink: 0;
  }
  #cookie-notice button:hover { opacity: 0.85; }

/* ── Unified sidebar additions ── */

/* ── Unified sidebar — cross-page nav items ── */
.nav-item--xpage { opacity: 0.75; }
.nav-item--xpage:hover { opacity: 1; }
.nav-item--xpage::after {
  content: '↗';
  font-size: 8px;
  margin-left: 4px;
  color: var(--text-dim);
  vertical-align: middle;
}
/* Other-page nav group header — slightly dimmer */
.nav-group--other > .nav-group-hdr {
  color: var(--text-dim);
  opacity: 0.8;
}
.nav-group--other > .nav-group-hdr:hover { opacity: 1; }
/* Firestorm nav items in tech Q&A group */
.nav-item--fs { padding-left: 36px; }
.nav-item--fs .ni-dot { background: var(--c-fs); opacity: 0.7; }
.nav-item--fs:hover .ni-dot { opacity: 1; }



/* ══════════════════════════════════════════════════
   LIGHT THEME  —  Pantone Warm Gray 1 C (#D7D2CB)
   Toggle via data-theme="light" on <html>
   ══════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Structural backgrounds ── */
  --bg:       #F5F3F0;
  --bg2:      #EEECEA;
  --bg3:      #E6E3DF;
  --panel:    #F5F3F0;
  --panel2:   #EEECEA;
  --border:   #CCC8C2;
  --border2:  #A8A49F;

  /* ── Text ── */
  --text:     #28201a;
  --text-dim: #7a7068;
  --text-hi:  #100800;
  --text-mid: #48403a;

  /* ── Legacy aliases ── */
  --blue:     #1a6abf;
  --blue-dim: rgba(26,106,191,0.10);
  --blue-glow:rgba(26,106,191,0.20);
  --teal:     #008878;
  --teal-dim: rgba(0,136,120,0.10);
  --gold:     #907800;
  --gold-dim: rgba(144,120,0,0.10);
  --purple:   #7c22cc;
  --red:      #b82020;
  --orange:   #b85800;
  --orange-dim:rgba(184,88,0,0.10);
  --pink:     #a02080;
  --pink-dim: rgba(160,32,128,0.10);

  /* ── Accent colours: solid for light bg ── */
  --c-elecblue:   #1a6abf;  --c-elecblue-d: rgba(26,106,191,0.10);
  --c-violet:     #7c22cc;  --c-violet-d:   rgba(124,34,204,0.10);
  --c-cyan:       #0a2030;  --c-cyan-d:     rgba(10,32,48,0.08);
  --c-white:      #28201a;  --c-white-d:    rgba(40,32,26,0.06);
  --c-gaming:     #007898;  --c-gaming-d:   rgba(0,120,152,0.10);
  --c-mobile:     #987000;  --c-mobile-d:   rgba(152,112,0,0.10);
  --c-adult:      #c4006e;  --c-adult-d:    rgba(196,0,110,0.10);
  --c-amber:      #b07800;  --c-amber-d:    rgba(176,120,0,0.10);
  --c-lime:       #5a8c00;  --c-lime-d:     rgba(90,140,0,0.10);
  --c-sky:        #0078b0;  --c-sky-d:      rgba(0,120,176,0.10);
  --c-skyblue:    #4040a8;  --c-skyblue-d:  rgba(64,64,168,0.10);
  --c-rose:       #c03070;  --c-rose-d:     rgba(192,48,112,0.10);
  --c-gold:       #907800;  --c-gold-d:     rgba(144,120,0,0.10);
  --c-orange:     #b85800;  --c-orange-d:   rgba(184,88,0,0.10);
  --c-teal:       #008878;  --c-teal-d:     rgba(0,136,120,0.10);
  --c-mint:       #2c9018;  --c-mint-d:     rgba(44,144,24,0.10);
  --c-red:        #b82020;  --c-red-d:      rgba(184,32,32,0.10);
  --c-coral:      #900000;  --c-coral-d:    rgba(144,0,0,0.10);
  --c-fuchsia:    #a02080;  --c-fuchsia-d:  rgba(160,32,128,0.10);
  --c-tech:       var(--c-violet);
  --c-tech-d:     var(--c-violet-d);
  --c-sl:         #1a6abf;  --c-sl-d: rgba(26,106,191,0.08); --c-sl-b: rgba(26,106,191,0.30);
  --c-fs:         #b85800;  --c-fs-d: rgba(184,88,0,0.08);   --c-fs-b: rgba(184,88,0,0.30);
}

/* ── Light theme structural overrides ── */
[data-theme="light"] body {
  background: var(--bg2);
}
[data-theme="light"] #app {
  background: var(--bg2);
}
[data-theme="light"] #sidebar {
  background: var(--bg3);
  border-right-color: var(--border);
}
[data-theme="light"] .logo,
[data-theme="light"] .sidebar-logo {
  background: var(--bg2);
  border-bottom-color: var(--border);
}
[data-theme="light"] .logo::before,
[data-theme="light"] .sidebar-logo::before {
  background: linear-gradient(90deg, var(--c-elecblue), transparent);
}
[data-theme="light"] #main {
  background: var(--bg2);
}
[data-theme="light"] .page-nav {
  border-bottom-color: var(--border);
}
[data-theme="light"] .page-nav-link {
  color: var(--text-mid);
  background: var(--bg3);
}
[data-theme="light"] .page-nav-link:hover {
  background: rgba(26,106,191,0.10);
  color: var(--text-hi);
}
[data-theme="light"] .page-nav-link.active {
  background: rgba(26,106,191,0.12);
  color: var(--c-elecblue);
  border-bottom-color: var(--c-elecblue);
}
[data-theme="light"] .search-wrap {
  border-bottom-color: var(--border);
}
[data-theme="light"] .search-inner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
}
[data-theme="light"] #global-search,
[data-theme="light"] #tech-search {
  background: transparent;
  color: var(--text-hi);
}
[data-theme="light"] .nav-group-hdr {
  color: var(--text-mid);
}
[data-theme="light"] .nav-group-hdr:hover {
  color: var(--text-hi);
  background: rgba(26,106,191,0.08);
}
[data-theme="light"] .nav-item:hover {
  background: rgba(26,106,191,0.08);
  border-left-color: var(--c-elecblue);
}
[data-theme="light"] .nav-collapse-row button {
  color: var(--text-dim);
  border-color: var(--border);
}
[data-theme="light"] .sidebar-checklist-btn {
  background: rgba(26,106,191,0.10);
  border-top-color: var(--border);
  color: var(--c-elecblue);
}
[data-theme="light"] .sidebar-checklist-btn:hover {
  background: rgba(26,106,191,0.18);
}
[data-theme="light"] .sidebar-status {
  border-top-color: var(--border);
  background: var(--bg);
}
[data-theme="light"] .status-dot {
  background: var(--c-elecblue);
}
[data-theme="light"] .sidebar-top-btn {
  border-color: var(--border);
  color: var(--text-mid);
}
[data-theme="light"] .sidebar-top-btn:hover {
  color: var(--c-teal);
  border-color: var(--c-teal);
}

/* ── Light theme: page header ── */
[data-theme="light"] .page-hdr {
  border-bottom-color: var(--border);
}
[data-theme="light"] .page-hdr::after {
  background: var(--c-elecblue);
}
[data-theme="light"] .eyebrow,
[data-theme="light"] .header-eyebrow {
  color: var(--c-elecblue);
}
[data-theme="light"] #page-header::after {
  background: linear-gradient(90deg, transparent, var(--c-elecblue), transparent);
  opacity: 0.45;
}

/* ── Light theme: stat chips ── */
[data-theme="light"] .stat-chip {
  background: var(--panel);
  border-color: var(--border);
}

/* ── Light theme: section headers ── */
[data-theme="light"] .section-hdr,
[data-theme="light"] .sec-hdr {
  border-bottom-color: var(--border);
}
[data-theme="light"] .section-hdr::after,
[data-theme="light"] .sec-hdr::after {
  background: var(--c-elecblue);
}
[data-theme="light"] .sec-hdr::after {
  background: var(--c-violet);
}
[data-theme="light"] .sec-icon,
[data-theme="light"] .sec-icon-wrap {
  background: rgba(26,106,191,0.10);
  border-color: rgba(26,106,191,0.30);
}

/* ── Light theme: qi-cards ── */
[data-theme="light"] .qi-card {
  background: var(--panel);
  border-color: var(--border);
}
[data-theme="light"] .qi-card:hover {
  border-color: var(--border2);
}
[data-theme="light"] .qi-card.qi-elecblue:hover { background: rgba(26,106,191,0.08); }
[data-theme="light"] .qi-card.qi-adult:hover    { background: rgba(196,0,110,0.08); }
[data-theme="light"] .qi-card.qi-violet:hover   { background: rgba(124,34,204,0.08); }
[data-theme="light"] .qi-card.qi-amber:hover    { background: rgba(176,120,0,0.08); }
[data-theme="light"] .qi-card.qi-lime:hover     { background: rgba(90,140,0,0.08); }
[data-theme="light"] .qi-card.qi-sky:hover      { background: rgba(0,120,176,0.08); }
[data-theme="light"] .qi-card.qi-rose:hover     { background: rgba(192,48,112,0.08); }
[data-theme="light"] .qi-card.qi-gold:hover     { background: rgba(144,120,0,0.08); }
[data-theme="light"] .qi-card.qi-orange:hover   { background: rgba(184,88,0,0.08); }
[data-theme="light"] .qi-card.qi-teal:hover     { background: rgba(0,136,120,0.08); }
[data-theme="light"] .qi-card.qi-mint:hover     { background: rgba(44,144,24,0.08); }
[data-theme="light"] .qi-card.qi-red:hover      { background: rgba(184,32,32,0.08); }
[data-theme="light"] .qi-card.qi-gaming:hover   { background: rgba(0,120,152,0.08); }
[data-theme="light"] .qi-card.qi-mobile:hover   { background: rgba(152,112,0,0.08); }
[data-theme="light"] .qi-card.qi-tech:hover     { background: rgba(64,64,168,0.08); }
[data-theme="light"] .qi-card.qi-coral:hover    { background: rgba(144,0,0,0.08); }
[data-theme="light"] .qi-card.qi-skyblue:hover  { background: rgba(64,64,168,0.08); }
[data-theme="light"] .qi-card.qi-fuchsia:hover  { background: rgba(160,32,128,0.08); }
[data-theme="light"] .qi-card.qi-white:hover    { background: rgba(40,32,26,0.06); }
[data-theme="light"] .qi-card.qi-clara:hover    { background: rgba(60,48,96,0.08); }

/* ── Light theme: FAQ accordions ── */
[data-theme="light"] .faq-item {
  background: var(--panel);
  border-color: var(--border);
}
[data-theme="light"] .faq-item:hover {
  border-color: var(--border2);
}
/* Per-category edge + hover + tag colours */
[data-theme="light"] .faq-item.edge-acc { border-left-color: #1a6abf; }
[data-theme="light"] .faq-item.edge-acc:hover { background: rgba(26,106,191,0.06); }
[data-theme="light"] .faq-item.edge-acc .faq-tag { background: rgba(26,106,191,0.10); color: #0c3d7a; border-color: rgba(26,106,191,0.30); }

[data-theme="light"] .faq-item.edge-app { border-left-color: #7c22cc; }
[data-theme="light"] .faq-item.edge-app:hover { background: rgba(124,34,204,0.06); }
[data-theme="light"] .faq-item.edge-app .faq-tag { background: rgba(124,34,204,0.10); color: #4a1280; border-color: rgba(124,34,204,0.30); }

[data-theme="light"] .faq-item.edge-eco { border-left-color: #b07800; }
[data-theme="light"] .faq-item.edge-eco:hover { background: rgba(176,120,0,0.06); }
[data-theme="light"] .faq-item.edge-eco .faq-tag { background: rgba(176,120,0,0.10); color: #704800; border-color: rgba(176,120,0,0.30); }

[data-theme="light"] .faq-item.edge-grp { border-left-color: #0078b0; }
[data-theme="light"] .faq-item.edge-grp:hover { background: rgba(0,120,176,0.06); }
[data-theme="light"] .faq-item.edge-grp .faq-tag { background: rgba(0,120,176,0.10); color: #004870; border-color: rgba(0,120,176,0.30); }

[data-theme="light"] .faq-item.edge-inv { border-left-color: #c03070; }
[data-theme="light"] .faq-item.edge-inv:hover { background: rgba(192,48,112,0.06); }
[data-theme="light"] .faq-item.edge-inv .faq-tag { background: rgba(192,48,112,0.10); color: #7a1040; border-color: rgba(192,48,112,0.30); }

[data-theme="light"] .faq-item.edge-lnd { border-left-color: #b85800; }
[data-theme="light"] .faq-item.edge-lnd:hover { background: rgba(184,88,0,0.06); }
[data-theme="light"] .faq-item.edge-lnd .faq-tag { background: rgba(184,88,0,0.10); color: #703000; border-color: rgba(184,88,0,0.30); }

[data-theme="light"] .faq-item.edge-mov { border-left-color: #2c9018; }
[data-theme="light"] .faq-item.edge-mov:hover { background: rgba(44,144,24,0.06); }
[data-theme="light"] .faq-item.edge-mov .faq-tag { background: rgba(44,144,24,0.10); color: #185008; border-color: rgba(44,144,24,0.30); }

[data-theme="light"] .faq-item.edge-rul { border-left-color: #b82020; }
[data-theme="light"] .faq-item.edge-rul:hover { background: rgba(184,32,32,0.06); }
[data-theme="light"] .faq-item.edge-rul .faq-tag { background: rgba(184,32,32,0.10); color: #700808; border-color: rgba(184,32,32,0.30); }

[data-theme="light"] .faq-item.edge-gaming { border-left-color: #007898; }
[data-theme="light"] .faq-item.edge-gaming:hover { background: rgba(0,120,152,0.06); }
[data-theme="light"] .faq-item.edge-gaming .faq-tag { background: rgba(0,120,152,0.10); color: #004860; border-color: rgba(0,120,152,0.30); }

[data-theme="light"] .faq-item.edge-aud { border-left-color: #3838a8; }
[data-theme="light"] .faq-item.edge-aud:hover { background: rgba(56,56,168,0.06); }
[data-theme="light"] .faq-item.edge-aud .faq-tag { background: rgba(56,56,168,0.10); color: #1c1870; border-color: rgba(56,56,168,0.30); }

[data-theme="light"] .faq-item.edge-sex { border-left-color: #c4006e; }
[data-theme="light"] .faq-item.edge-sex:hover { background: rgba(196,0,110,0.06); }
[data-theme="light"] .faq-item.edge-sex .faq-tag { background: rgba(196,0,110,0.10); color: #7a0040; border-color: rgba(196,0,110,0.30); }

[data-theme="light"] .faq-item.edge-mob { border-left-color: #987000; }
[data-theme="light"] .faq-item.edge-mob:hover { background: rgba(152,112,0,0.06); }
[data-theme="light"] .faq-item.edge-mob .faq-tag { background: rgba(152,112,0,0.10); color: #5a4000; border-color: rgba(152,112,0,0.30); }

/* ── Light theme: script cards ── */
[data-theme="light"] .sc-card {
  background: var(--panel);
  border-color: var(--border);
}
[data-theme="light"] .sc-card:hover {
  border-color: var(--border2);
}

/* ── Light theme: landmark cards ── */
[data-theme="light"] .lm-card {
  background: var(--panel);
  border-color: var(--border);
}

/* ── Light theme: video / website cards ── */
[data-theme="light"] .vid-card,
[data-theme="light"] .web-card {
  background: var(--panel);
  border-color: var(--border);
}

/* ── Light theme: viewer columns ── */
[data-theme="light"] .vc-col {
  background: var(--panel);
  border-color: var(--border);
}
[data-theme="light"] .vc-col-hdr.sl-hdr {
  background: var(--c-sl-d);
  border-bottom-color: var(--c-sl-b);
}
[data-theme="light"] .vc-col-hdr.fs-hdr {
  background: var(--c-fs-d);
  border-bottom-color: var(--c-fs-b);
}

/* ── Light theme: modals ── */
[data-theme="light"] .modal-overlay,
[data-theme="light"] #shortcuts-modal,
[data-theme="light"] #clara-modal,
[data-theme="light"] #checklist-modal,
[data-theme="light"] #fc-modal {
  background: rgba(40,32,26,0.5);
}
[data-theme="light"] .modal-inner,
[data-theme="light"] .shortcuts-inner,
[data-theme="light"] .clara-inner,
[data-theme="light"] .checklist-inner,
[data-theme="light"] #fc-modal-inner {
  background: var(--panel);
  border-color: var(--border);
}

/* ── Light theme: footer / disclaimer ── */
[data-theme="light"] #footer {
  background: var(--bg);
  border-top-color: var(--border);
}
[data-theme="light"] .footer-text,
[data-theme="light"] .footer-link { color: var(--text-mid); }
[data-theme="light"] #footer + div {
  background: var(--bg) !important;
  border-top-color: var(--border) !important;
}

/* ── Theme toggle button ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  padding: 3px 8px;
  color: var(--text-mid);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  letter-spacing: 0.5px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.theme-toggle:hover { color: var(--text-hi); border-color: var(--text-mid); }



/* ── Theme toggle switch ── */
.nav-collapse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
}
.theme-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.theme-switch-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  user-select: none;
}



/* ══════════════════════════════════════════════════
   LIGHT THEME  —  Pantone Warm Gray 1 C (#D7D2CB)
   Toggled via data-theme="light" on <html>
   ══════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:       #F5F3F0;
  --bg2:      #EEECEA;
  --bg3:      #E6E3DF;
  --panel:    #F5F3F0;
  --panel2:   #EEECEA;
  --border:   #CCC8C2;
  --border2:  #A8A49F;
  --text:     #28201a;
  --text-dim: #7a7068;
  --text-hi:  #100800;
  --text-mid: #48403a;
  --blue:     #1a6abf;  --blue-dim: rgba(26,106,191,0.10); --blue-glow: rgba(26,106,191,0.20);
  --teal:     #008878;  --teal-dim: rgba(0,136,120,0.10);
  --gold:     #907800;  --gold-dim: rgba(144,120,0,0.10);
  --purple:   #7c22cc;
  --red:      #b82020;
  --orange:   #b85800;  --orange-dim: rgba(184,88,0,0.10);
  --pink:     #a02080;  --pink-dim: rgba(160,32,128,0.10);
  --c-elecblue: #1a6abf;  --c-elecblue-d: rgba(26,106,191,0.10);
  --c-violet:   #7c22cc;  --c-violet-d:   rgba(124,34,204,0.10);
  --c-gaming:   #007898;  --c-gaming-d:   rgba(0,120,152,0.10);
  --c-mobile:   #987000;  --c-mobile-d:   rgba(152,112,0,0.10);
  --c-adult:    #c4006e;  --c-adult-d:    rgba(196,0,110,0.10);
  --c-amber:    #b07800;  --c-amber-d:    rgba(176,120,0,0.10);
  --c-lime:     #5a8c00;  --c-lime-d:     rgba(90,140,0,0.10);
  --c-sky:      #0078b0;  --c-sky-d:      rgba(0,120,176,0.10);
  --c-skyblue:  #4040a8;  --c-skyblue-d:  rgba(64,64,168,0.10);
  --c-rose:     #c03070;  --c-rose-d:     rgba(192,48,112,0.10);
  --c-gold:     #907800;  --c-gold-d:     rgba(144,120,0,0.10);
  --c-orange:   #b85800;  --c-orange-d:   rgba(184,88,0,0.10);
  --c-teal:     #008878;  --c-teal-d:     rgba(0,136,120,0.10);
  --c-mint:     #2c9018;  --c-mint-d:     rgba(44,144,24,0.10);
  --c-red:      #b82020;  --c-red-d:      rgba(184,32,32,0.10);
  --c-coral:    #900000;  --c-coral-d:    rgba(144,0,0,0.10);
  --c-fuchsia:  #a02080;  --c-fuchsia-d:  rgba(160,32,128,0.10);
  --c-cyan:     #0a2030;  --c-cyan-d:     rgba(10,32,48,0.08);
  --c-white:    #28201a;  --c-white-d:    rgba(40,32,26,0.06);
  --c-tech:     var(--c-violet); --c-tech-d: var(--c-violet-d);
  --c-sl:  #1a6abf; --c-sl-d: rgba(26,106,191,0.08); --c-sl-b: rgba(26,106,191,0.30);
  --c-fs:  #b85800; --c-fs-d: rgba(184,88,0,0.08);   --c-fs-b: rgba(184,88,0,0.30);
  --say-text: #1a6abf;
}
[data-theme="light"] body { background: var(--bg2); }
[data-theme="light"] #app { background: var(--bg2); }
[data-theme="light"] #sidebar { background: var(--bg3); border-right-color: var(--border); }
[data-theme="light"] .logo,
[data-theme="light"] .sidebar-logo { background: var(--bg2); border-bottom-color: var(--border); }
[data-theme="light"] .logo::before,
[data-theme="light"] .sidebar-logo::before { background: linear-gradient(90deg, var(--c-elecblue), transparent); }
[data-theme="light"] #main { background: var(--bg2); }
[data-theme="light"] .page-nav { border-bottom-color: var(--border); }
[data-theme="light"] .page-nav-link { color: var(--text-mid); background: var(--bg3); }
[data-theme="light"] .page-nav-link:hover { background: rgba(26,106,191,0.10); color: var(--text-hi); }
[data-theme="light"] .page-nav-link.active { background: rgba(26,106,191,0.12); color: var(--c-elecblue); border-bottom-color: var(--c-elecblue); }
[data-theme="light"] .search-wrap { border-bottom-color: var(--border); }
[data-theme="light"] .search-inner { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
[data-theme="light"] #global-search,
[data-theme="light"] #tech-search { background: transparent; color: var(--text-hi); }
[data-theme="light"] .nav-group-hdr { color: var(--text-mid); }
[data-theme="light"] .nav-group-hdr:hover { color: var(--text-hi); background: rgba(26,106,191,0.08); }
[data-theme="light"] .nav-item:hover { background: rgba(26,106,191,0.08); border-left-color: var(--c-elecblue); }
[data-theme="light"] .nav-collapse-row button { color: var(--text-dim); border-color: var(--border); }
[data-theme="light"] .sidebar-checklist-btn { background: rgba(26,106,191,0.10); border-top-color: var(--border); color: var(--c-elecblue); }
[data-theme="light"] .sidebar-checklist-btn:hover { background: rgba(26,106,191,0.18); }
[data-theme="light"] .sidebar-status { border-top-color: var(--border); background: var(--bg); }
[data-theme="light"] .status-dot { background: var(--c-elecblue); }
[data-theme="light"] .sidebar-top-btn { border-color: var(--border); color: var(--text-mid); }
[data-theme="light"] .sidebar-top-btn:hover { color: var(--c-teal); border-color: var(--c-teal); }
[data-theme="light"] .page-hdr::after { background: linear-gradient(90deg, transparent, var(--c-elecblue), transparent); opacity: 0.45; }
[data-theme="light"] .eyebrow,
[data-theme="light"] .header-eyebrow { color: var(--c-elecblue); }
[data-theme="light"] #page-header::after { background: linear-gradient(90deg, transparent, var(--c-elecblue), transparent); opacity: 0.45; }
[data-theme="light"] .stat-chip { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .section-hdr,
[data-theme="light"] .sec-hdr { border-bottom-color: var(--border); }
[data-theme="light"] .section-hdr::after { background: var(--c-elecblue); }
[data-theme="light"] .sec-hdr::after { background: var(--c-violet); }
[data-theme="light"] .sec-icon,
[data-theme="light"] .sec-icon-wrap { background: rgba(26,106,191,0.10); border-color: rgba(26,106,191,0.30); }
[data-theme="light"] .qi-card { background: var(--panel); border-color: var(--border); }

[data-theme="light"] .qi-card.qi-elecblue { border-left-color: #1a6abf; }
[data-theme="light"] .qi-card.qi-adult    { border-left-color: #c4006e; }
[data-theme="light"] .qi-card.qi-violet   { border-left-color: #7c22cc; }
[data-theme="light"] .qi-card.qi-clara    { border-left-color: #3c3060; }
[data-theme="light"] .qi-card.qi-amber    { border-left-color: #b07800; }
[data-theme="light"] .qi-card.qi-lime     { border-left-color: #5a8c00; }
[data-theme="light"] .qi-card.qi-sky      { border-left-color: #0078b0; }
[data-theme="light"] .qi-card.qi-rose     { border-left-color: #c03070; }
[data-theme="light"] .qi-card.qi-gold     { border-left-color: #907800; }
[data-theme="light"] .qi-card.qi-orange   { border-left-color: #b85800; }
[data-theme="light"] .qi-card.qi-teal     { border-left-color: #008878; }
[data-theme="light"] .qi-card.qi-mint     { border-left-color: #2c9018; }
[data-theme="light"] .qi-card.qi-red      { border-left-color: #b82020; }
[data-theme="light"] .qi-card.qi-gaming   { border-left-color: #007898; }
[data-theme="light"] .qi-card.qi-mobile   { border-left-color: #987000; }
[data-theme="light"] .qi-card.qi-tech     { border-left-color: #3838a8; }
[data-theme="light"] .qi-card.qi-coral    { border-left-color: #900000; }
[data-theme="light"] .qi-card.qi-skyblue  { border-left-color: #4040a8; }
[data-theme="light"] .qi-card.qi-fuchsia  { border-left-color: #a02080; }
[data-theme="light"] .qi-card.qi-white    { border-left-color: #808080; }

[data-theme="light"] .qi-card.qi-elecblue:hover { background: rgba(26,106,191,0.08); }
[data-theme="light"] .qi-card.qi-adult:hover   { background: rgba(196,0,110,0.08); }
[data-theme="light"] .qi-card.qi-violet:hover  { background: rgba(124,34,204,0.08); }
[data-theme="light"] .qi-card.qi-amber:hover   { background: rgba(176,120,0,0.08); }
[data-theme="light"] .qi-card.qi-lime:hover    { background: rgba(90,140,0,0.08); }
[data-theme="light"] .qi-card.qi-sky:hover     { background: rgba(0,120,176,0.08); }
[data-theme="light"] .qi-card.qi-rose:hover    { background: rgba(192,48,112,0.08); }
[data-theme="light"] .qi-card.qi-gold:hover    { background: rgba(144,120,0,0.08); }
[data-theme="light"] .qi-card.qi-orange:hover  { background: rgba(184,88,0,0.08); }
[data-theme="light"] .qi-card.qi-teal:hover    { background: rgba(0,136,120,0.08); }
[data-theme="light"] .qi-card.qi-mint:hover    { background: rgba(44,144,24,0.08); }
[data-theme="light"] .qi-card.qi-red:hover     { background: rgba(184,32,32,0.08); }
[data-theme="light"] .qi-card.qi-gaming:hover  { background: rgba(0,120,152,0.08); }
[data-theme="light"] .qi-card.qi-mobile:hover  { background: rgba(152,112,0,0.08); }
[data-theme="light"] .qi-card.qi-tech:hover    { background: rgba(64,64,168,0.08); }
[data-theme="light"] .qi-card.qi-coral:hover   { background: rgba(144,0,0,0.08); }
[data-theme="light"] .qi-card.qi-skyblue:hover { background: rgba(64,64,168,0.08); }
[data-theme="light"] .qi-card.qi-fuchsia:hover { background: rgba(160,32,128,0.08); }
[data-theme="light"] .qi-card.qi-white:hover   { background: rgba(40,32,26,0.06); }
[data-theme="light"] .qi-card.qi-clara:hover   { background: rgba(60,48,96,0.08); }
[data-theme="light"] .faq-item { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .faq-item.edge-acc { border-left-color: #1a6abf; }
[data-theme="light"] .faq-item.edge-acc:hover { background: rgba(26,106,191,0.06); }
[data-theme="light"] .faq-item.edge-acc .faq-tag { background: rgba(26,106,191,0.12); color: #0c3d7a; border-color: rgba(26,106,191,0.35); }
[data-theme="light"] .faq-item.edge-app { border-left-color: #7c22cc; }
[data-theme="light"] .faq-item.edge-app:hover { background: rgba(124,34,204,0.06); }
[data-theme="light"] .faq-item.edge-app .faq-tag { background: rgba(124,34,204,0.12); color: #4a1280; border-color: rgba(124,34,204,0.35); }
[data-theme="light"] .faq-item.edge-eco { border-left-color: #b07800; }
[data-theme="light"] .faq-item.edge-eco:hover { background: rgba(176,120,0,0.06); }
[data-theme="light"] .faq-item.edge-eco .faq-tag { background: rgba(176,120,0,0.12); color: #704800; border-color: rgba(176,120,0,0.35); }
[data-theme="light"] .faq-item.edge-grp { border-left-color: #0078b0; }
[data-theme="light"] .faq-item.edge-grp:hover { background: rgba(0,120,176,0.06); }
[data-theme="light"] .faq-item.edge-grp .faq-tag { background: rgba(0,120,176,0.12); color: #004870; border-color: rgba(0,120,176,0.35); }
[data-theme="light"] .faq-item.edge-inv { border-left-color: #c03070; }
[data-theme="light"] .faq-item.edge-inv:hover { background: rgba(192,48,112,0.06); }
[data-theme="light"] .faq-item.edge-inv .faq-tag { background: rgba(192,48,112,0.12); color: #7a1040; border-color: rgba(192,48,112,0.35); }
[data-theme="light"] .faq-item.edge-lnd { border-left-color: #b85800; }
[data-theme="light"] .faq-item.edge-lnd:hover { background: rgba(184,88,0,0.06); }
[data-theme="light"] .faq-item.edge-lnd .faq-tag { background: rgba(184,88,0,0.12); color: #703000; border-color: rgba(184,88,0,0.35); }
[data-theme="light"] .faq-item.edge-mov { border-left-color: #2c9018; }
[data-theme="light"] .faq-item.edge-mov:hover { background: rgba(44,144,24,0.06); }
[data-theme="light"] .faq-item.edge-mov .faq-tag { background: rgba(44,144,24,0.12); color: #185008; border-color: rgba(44,144,24,0.35); }
[data-theme="light"] .faq-item.edge-rul { border-left-color: #b82020; }
[data-theme="light"] .faq-item.edge-rul:hover { background: rgba(184,32,32,0.06); }
[data-theme="light"] .faq-item.edge-rul .faq-tag { background: rgba(184,32,32,0.12); color: #700808; border-color: rgba(184,32,32,0.35); }
[data-theme="light"] .faq-item.edge-gaming { border-left-color: #007898; }
[data-theme="light"] .faq-item.edge-gaming:hover { background: rgba(0,120,152,0.06); }
[data-theme="light"] .faq-item.edge-gaming .faq-tag { background: rgba(0,120,152,0.12); color: #004860; border-color: rgba(0,120,152,0.35); }
[data-theme="light"] .faq-item.edge-aud { border-left-color: #3838a8; }
[data-theme="light"] .faq-item.edge-aud:hover { background: rgba(56,56,168,0.06); }
[data-theme="light"] .faq-item.edge-aud .faq-tag { background: rgba(56,56,168,0.12); color: #1c1870; border-color: rgba(56,56,168,0.35); }
[data-theme="light"] .faq-item.edge-sex { border-left-color: #c4006e; }
[data-theme="light"] .faq-item.edge-sex:hover { background: rgba(196,0,110,0.06); }
[data-theme="light"] .faq-item.edge-sex .faq-tag { background: rgba(196,0,110,0.12); color: #7a0040; border-color: rgba(196,0,110,0.35); }
[data-theme="light"] .faq-item.edge-mob { border-left-color: #987000; }
[data-theme="light"] .faq-item.edge-mob:hover { background: rgba(152,112,0,0.06); }
[data-theme="light"] .faq-item.edge-mob .faq-tag { background: rgba(152,112,0,0.12); color: #5a4000; border-color: rgba(152,112,0,0.35); }
[data-theme="light"] .sc-card { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .sc-card:hover { border-color: var(--border2); }
[data-theme="light"] .lm-card { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .vid-card,
[data-theme="light"] .web-card { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .vc-col { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .vc-col-hdr.sl-hdr { background: var(--c-sl-d); border-bottom-color: var(--c-sl-b); }
[data-theme="light"] .vc-col-hdr.fs-hdr { background: var(--c-fs-d); border-bottom-color: var(--c-fs-b); }
[data-theme="light"] #footer { background: var(--bg); border-top-color: var(--border); }
[data-theme="light"] .footer-text,
[data-theme="light"] .footer-link { color: var(--text-mid); }


/* ── Theme toggle switch ── */
.nav-collapse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
}
.theme-switch {
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}
.theme-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 5px;
  transition: background 0.2s, border-color 0.2s;
}
.theme-switch-knob {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 1px;
  transform: translateY(-50%);
  background: var(--text-dim);
  border-radius: 3px;
  transition: left 0.2s, background 0.2s;
  z-index: 2;
}
.theme-switch-sun,
.theme-switch-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  transition: opacity 0.2s;
  z-index: 1;
  pointer-events: none;
}
.theme-switch-sun {
  right: 3px;
  opacity: 1;
  color: #FFD700;
}
.theme-switch-moon {
  left: 3px;
  opacity: 0;
  color: var(--c-elecblue);
}
/* Light theme active state */
[data-theme="light"] .theme-switch-track {
  background: rgba(26,106,191,0.20);
  border-color: #1a6abf;
}
[data-theme="light"] .theme-switch-knob {
  left: 19px;
  background: #1a6abf;
}
[data-theme="light"] .theme-switch-sun {
  opacity: 0;
}
[data-theme="light"] .theme-switch-moon {
  opacity: 1;
}


/* ── Light theme: flowchart nodes ── */
[data-theme="light"] .fc-start {
  background: rgba(124,34,204,0.10);
  border-color: #7c22cc;
  color: #100800;
}
[data-theme="light"] .fc-q {
  background: rgba(26,106,191,0.08);
  border-color: rgba(26,106,191,0.40);
  color: #100800;
}
[data-theme="light"] .fc-action {
  background: rgba(0,136,120,0.08);
  border-color: rgba(0,136,120,0.30);
  color: #100800;
}
[data-theme="light"] .fc-end-ok {
  background: rgba(44,144,24,0.10);
  border-color: rgba(44,144,24,0.50);
  color: #1a5008;
}
[data-theme="light"] .fc-end-bad {
  background: rgba(184,32,32,0.10);
  border-color: rgba(184,32,32,0.40);
  color: #700808;
}
[data-theme="light"] .fc-end-ticket {
  background: rgba(176,120,0,0.10);
  border-color: rgba(176,120,0,0.40);
  color: #704800;
}
[data-theme="light"] .fc-label { color: var(--text-mid); background: var(--panel2); border-color: var(--border); }
[data-theme="light"] .fc-label-yes { color: #1a5008 !important; background: rgba(44,144,24,0.10) !important; border-color: rgba(44,144,24,0.30) !important; }
[data-theme="light"] .fc-label-no { color: #700808 !important; background: rgba(184,32,32,0.10) !important; border-color: rgba(184,32,32,0.30) !important; }
[data-theme="light"] .fc-arrow { color: var(--text-mid); }
[data-theme="light"] .fc-sep { border-top-color: var(--border); }
[data-theme="light"] .fc-merge { color: var(--text-mid); }
[data-theme="light"] .fc-note { color: var(--text-mid); }
[data-theme="light"] .fc-btn {
  background: var(--panel);
  border-color: var(--border);
}
[data-theme="light"] .fc-btn:hover { background: rgba(26,106,191,0.08); }


/* ══════════════════════════════════════════
   Adult Hub — sidebar button + warning modal
   ══════════════════════════════════════════ */
.sidebar-adult-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  color: #ff7aa5;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.sidebar-adult-btn:hover { color: #ff4d8f; background: rgba(255,77,143,0.06); }
.sidebar-adult-btn .sab-arrow { float: right; color: #ff4d8f; opacity: 0.6; }

#adult-warning-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,6,14,0.92);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#adult-warning-modal.open { display: block; }
#adult-warning-modal-inner {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-left: 4px solid #ff4d8f;
  border-radius: 12px;
  margin: 80px auto;
  max-width: 520px;
  padding: 28px 32px 24px;
  position: relative;
}
#adult-warning-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#adult-warning-modal-close:hover { color: var(--text-hi); border-color: var(--text-mid); }
.awm-eyebrow {
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ff4d8f;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.awm-title {
  font-family: 'Oxanium','Courier New',monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  padding-right: 40px;
}
.awm-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 18px;
}
.awm-body p { margin-bottom: 10px; }
.awm-body p:last-child { margin-bottom: 0; }
.awm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.awm-btn {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.awm-btn-cancel {
  background: var(--panel2);
  border: 1px solid var(--border2);
  color: var(--text-mid);
}
.awm-btn-cancel:hover { color: var(--text-hi); border-color: var(--text-mid); }
.awm-btn-confirm {
  background: rgba(255,77,143,0.12);
  border: 1px solid rgba(255,77,143,0.5);
  color: #ff7aa5;
}
.awm-btn-confirm:hover {
  background: rgba(255,77,143,0.2);
  border-color: #ff4d8f;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255,77,143,0.3);
}
@media (max-width: 640px) {
  #adult-warning-modal-inner { margin: 16px; padding: 22px 18px 20px; }
  .awm-actions { flex-direction: column; }
}

[data-theme="light"] .sidebar-adult-btn { color: #c4145a; }
[data-theme="light"] .sidebar-adult-btn:hover { color: #ff1f6e; background: rgba(255,31,110,0.06); }
[data-theme="light"] .sidebar-adult-btn .sab-arrow { color: #c4145a; }
[data-theme="light"] #adult-warning-modal { background: rgba(240,240,250,0.92); }
[data-theme="light"] .awm-btn-confirm { background: rgba(196,20,90,0.08); border-color: rgba(196,20,90,0.5); color: #c4145a; }
[data-theme="light"] .awm-btn-confirm:hover { background: rgba(196,20,90,0.18); color: #ffffff; border-color: #c4145a; }


/* ──────── MOBILE FIXES (May 2026) ──────── */
/* Grid status pill: prevent multi-line wrap and URL overflow on narrow screens */
@media (max-width: 720px) {
  .grid-status-pill {
    font-size: 10px;
    padding: 7px 12px;
    gap: 7px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .grid-status-pill .gsp-url {
    display: none;
  }
  .grid-status-pill .gsp-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Sidebar TOP button: convert to floating action button (FAB) at bottom-right.
     The sidebar-status row sits at the top of the page on mobile and scrolls off-screen
     as the user scrolls down — taking the in-flow TOP button with it. Detach via fixed
     positioning so the button stays accessible at bottom-right while scrolled. Hidden
     when at top of page, fades in once user has scrolled past 80px. Body class
     .is-scrolled is toggled by a scroll listener on each page. */
  .sidebar-top-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    margin-left: 0;
    padding: 8px 14px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--panel);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  body.is-scrolled .sidebar-top-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Sidebar theme toggle: visible on mobile inside .sidebar-status, since the desktop
     .theme-switch sits inside .nav which is hidden on mobile. Compact pill-button style
     matching .sidebar-top-btn. Icon swaps based on current theme. */
  .sidebar-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-dim);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: auto;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .sidebar-theme-btn:hover {
    color: var(--c-teal);
    border-color: var(--c-teal);
  }
  /* When mobile theme button is shown alongside TOP fab, the auto margin
     pushes theme button to the right of the .sidebar-status row */
}

/* Theme icon swap (works at any viewport — only the button itself is mobile-only) */
.sidebar-theme-btn .stb-moon { display: none; }
[data-theme="light"] .sidebar-theme-btn .stb-sun { display: none; }
[data-theme="light"] .sidebar-theme-btn .stb-moon { display: inline; }

/* Hide the mobile theme button entirely on desktop */
@media (min-width: 721px) {
  .sidebar-theme-btn { display: none; }
}

/* Light theme styling for the mobile theme button */
[data-theme="light"] .sidebar-theme-btn {
  color: var(--text-mid);
  border-color: var(--border);
}
[data-theme="light"] .sidebar-theme-btn:hover {
  color: var(--c-teal);
  border-color: var(--c-teal);
}


/* ──────── HERO SEARCH BAR ──────── */
/* Site-wide hero search styling. Used on technical.html, index.html, bellisseria.html.
   Accent colour overridable via --hero-accent (defaults to electric blue).
   Pages set the variable inline on .hero-search-wrap, e.g.:
     <div class="hero-search-wrap" style="--hero-accent: var(--c-tech);"> */

.hero-search-wrap {
  --hero-accent: var(--c-elecblue);
  margin: 24px 0 0;
  max-width: 760px;
  position: relative;
}

.hero-search-frame {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search-frame:focus-within {
  border-color: var(--hero-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-accent) 14%, transparent);
}

.hero-search-icon {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  color: var(--hero-accent);
  font-size: 18px;
  padding: 0 14px 0 16px;
  font-weight: 700;
  user-select: none;
  letter-spacing: -1px;
}

.hero-search-input {
  flex: 1;
  width: auto;
  background: transparent;
  border: none;
  padding: 18px 0;
  color: var(--text-hi);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 16px;
  outline: none;
  min-width: 0;
  border-radius: 0;
}

.hero-search-input:focus { border-color: transparent; }
.hero-search-input::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.hero-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 10px;
  margin-right: 10px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  user-select: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.hero-search-frame:focus-within .hero-search-kbd { opacity: 0; }

.hero-search-clear {
  display: none;
  position: static;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 8px 14px;
  flex-shrink: 0;
}

.hero-search-clear.visible { display: inline-block; }
.hero-search-clear:hover { color: var(--text-hi); }

.hero-search-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
  min-height: 28px;
}

.hero-search-count {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 12px;
  color: var(--hero-accent);
  letter-spacing: 0.05em;
  min-height: 16px;
  white-space: nowrap;
}

.hero-search-count.no-results { color: var(--c-fs); }

.hero-search-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero-search-chips::before {
  content: '// try:';
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-right: 2px;
}

.search-chip {
  display: inline-block;
  padding: 2px 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--hero-accent);
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s, opacity 0.2s;
  opacity: 0.85;
}

.search-chip:hover {
  text-decoration-color: currentColor;
  opacity: 1;
}

/* Mobile responsive adjustments */
@media (max-width: 720px) {
  .hero-search-icon { padding: 0 10px 0 12px; font-size: 16px; }
  .hero-search-input { font-size: 15px; padding: 15px 0; }
  .hero-search-kbd { display: none; }
  .hero-search-meta { gap: 10px; }
  .hero-search-chips { gap: 12px; }
}

/* Light theme */
[data-theme="light"] .hero-search-frame {
  background: var(--bg);
  border-color: var(--border2);
}
[data-theme="light"] .hero-search-input { color: var(--text-hi); }
[data-theme="light"] .hero-search-kbd {
  background: var(--bg2);
  color: var(--text-mid);
}
/* .search-chip uses var(--hero-accent) which auto-adapts to light theme via CSS variables */