/* ════════════════════════════════════════════════════════════════════
   CYBER SAMACHAR — WHOLE-WEBSITE STYLESHEET (consolidated)
   ════════════════════════════════════════════════════════════════════

   Every CSS rule used across the site, merged into one file, in load order:

     1. features.css ................... shared personalization + law styles
     2. Unified app — core/theme ....... main inline <style> (vars, layout, components)
     3. Unified app — #pf-styles ....... profile page
     4. Unified app — footer ........... site footer
     5. Unified app — dynamic cards .... database-driven card treatments
     6. Unified app — device UI ........ desktop / tablet / mobile chrome
     7. auth.html ...................... authentication portal styles

   Generated from "Cyber Samachar Unified.html" + "auth.html" + features.css.
   Fonts are loaded via <link> in each HTML <head>, not here.
   ════════════════════════════════════════════════════════════════════ */

/* ========================================================================
   1 · features.css  —  shared personalization + law extensions
   ======================================================================== */

/* ════════════════════════════════════════════════════════════
   CYBER SAMACHAR — PERSONALIZATION + LAW EXTENSIONS
   ════════════════════════════════════════════════════════════ */

/* ── PERSONALIZE PAGE ─────────────────────────────── */
.pz-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 28px;
  margin: 18px 0 22px;
  position: relative; overflow: hidden;
}
.pz-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 18%, var(--accent-bg) 0%, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(168,85,247,.08) 0%, transparent 40%);
  pointer-events:none;
}
.pz-hero > * { position:relative; }
.pz-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; color: var(--accent); text-transform: uppercase;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.pz-eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.8s infinite;
}
.pz-hero h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700; letter-spacing:-.5px; line-height:1.1; margin-bottom:10px;
}
.pz-hero h2 .accent { color: var(--accent); }
.pz-hero p { color: var(--text2); max-width: 720px; font-size: 14px; line-height:1.6; }
.pz-hero-meta {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;
}
.pz-chip {
  padding: 5px 11px; background: var(--bg-input); border:1px solid var(--border);
  border-radius: 999px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; color: var(--text2); letter-spacing:.5px;
  display:inline-flex; align-items:center; gap:6px;
}
.pz-chip .dot {
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent);
}

.pz-section {
  margin-bottom: 28px;
}
.pz-section-head {
  display:flex; align-items:flex-end; gap:14px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.pz-section-head .pz-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--accent); background: var(--accent-bg);
  border:1px solid var(--accent-border);
  padding: 4px 9px; border-radius:6px; letter-spacing:1px;
}
.pz-section-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing:-.2px; flex:1;
}
.pz-section-head .pz-status {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text3);
}
.pz-section-head .pz-status.on { color: var(--accent); }

/* ── ROLE PROFILE ─────────────────────────────── */
.pz-role-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.pz-role {
  position:relative; padding: 16px 14px;
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: 16px; cursor:pointer;
  transition: all var(--tr);
  display:flex; flex-direction:column; gap:8px;
  text-align:left;
}
.pz-role:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: var(--shadow); }
.pz-role.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--green-glow);
}
.pz-role .pz-role-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-input); border:1px solid var(--border);
  color: var(--text2);
}
.pz-role.active .pz-role-icon { background: var(--accent); color: #000; border-color: var(--accent); }
[data-theme="light"] .pz-role.active .pz-role-icon { color: #fff; }
.pz-role .pz-role-icon svg { width:18px; height:18px; }
.pz-role h4 {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing:-.1px;
}
.pz-role .pz-role-sub {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text3); letter-spacing: 1px; text-transform: uppercase;
}
.pz-role .pz-role-desc {
  font-size: 11.5px; color: var(--text2); line-height:1.55;
}
.pz-role .pz-role-tags {
  display:flex; gap:4px; flex-wrap:wrap; margin-top: 2px;
}
.pz-role .pz-role-tags span {
  padding: 2px 7px; background: var(--bg-input);
  border:1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; color: var(--text2);
  letter-spacing:.3px;
}
.pz-role .pz-role-check {
  position:absolute; top:14px; right:14px;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--tr);
}
.pz-role.active .pz-role-check {
  border-color: var(--accent); background: var(--accent);
}
.pz-role .pz-role-check svg { width:10px; height:10px; opacity:0; color:#000; }
[data-theme="light"] .pz-role.active .pz-role-check svg { color: #fff; }
.pz-role.active .pz-role-check svg { opacity: 1; }

.pz-role-preview {
  margin-top: 12px; padding: 14px 16px;
  background: var(--bg-card); border:1px solid var(--accent-border);
  border-radius: 14px; display:flex; gap:14px; flex-wrap:wrap;
  align-items: center;
}
.pz-role-preview .pz-pre-label {
  font-family: var(--font-mono); font-size: 9px; font-weight:700;
  color: var(--accent); letter-spacing: 1.4px; text-transform:uppercase;
}
.pz-role-preview .pz-pre-snippet {
  font-family: var(--font-mono); font-size: 11px; color: var(--text2);
  flex: 1; min-width: 200px;
}
.pz-role-preview .pz-pre-snippet b { color: var(--text); font-weight: 700; }
.pz-role-preview .pz-pre-priority {
  display:flex; gap:6px; flex-wrap:wrap;
}
.pz-role-preview .pz-pre-priority span {
  padding: 3px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .5px;
  background: var(--accent-bg); color: var(--accent);
  border:1px solid var(--accent-border);
}

/* ── DAILY CYBER BRIEF ─────────────────────────── */
.pz-brief {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-h) 100%);
  border:1px solid var(--border);
  border-radius: 20px; padding: 0; overflow:hidden;
  position:relative;
}
.pz-brief::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--accent), var(--blue));
}
.pz-brief-top {
  display:flex; align-items:center; gap:14px; padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.pz-brief-date {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text3); letter-spacing: 1.5px; text-transform: uppercase;
}
.pz-brief-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing:-.2px; flex:1;
}
.pz-brief-actions {
  display:flex; gap:6px;
}
.pz-brief-actions button {
  padding: 7px 11px; border-radius:8px;
  background: var(--bg-input); border:1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  letter-spacing:.6px; cursor:pointer; display:inline-flex;
  align-items:center; gap:5px;
}
.pz-brief-actions button:hover { color: var(--accent); border-color: var(--accent-border); }

.pz-brief-player {
  padding: 14px 20px; display: grid;
  grid-template-columns: auto 1fr auto auto; gap: 14px;
  align-items: center; border-bottom: 1px solid var(--border);
}
.pz-play-btn {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: #000;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all var(--tr);
  box-shadow: 0 6px 18px var(--green-glow);
}
[data-theme="light"] .pz-play-btn { color: #fff; }
.pz-play-btn:hover { transform: scale(1.06); }
.pz-play-btn svg { width: 18px; height: 18px; margin-left: 2px; }
.pz-play-btn.playing svg { margin-left: 0; }
.pz-waveform {
  display:flex; align-items:center; gap: 2px; height: 40px;
  overflow:hidden;
}
.pz-waveform .bar {
  flex: 1; background: var(--text3); border-radius: 1px;
  transition: background var(--tr), height .15s ease;
}
.pz-waveform .bar.played { background: var(--accent); }
.pz-waveform .bar.active { background: var(--accent); height: 100% !important; }
.pz-brief-timer {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text2); letter-spacing: .5px;
  min-width: 78px; text-align:right;
}
.pz-brief-speed {
  padding: 4px 9px; border-radius:6px; background: var(--bg-input);
  border:1px solid var(--border); cursor:pointer;
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  font-weight: 700;
}
.pz-brief-speed:hover { color: var(--accent); border-color: var(--accent-border); }

.pz-brief-body { padding: 18px 20px; }
.pz-brief-script {
  font-size: 13.5px; line-height: 1.75; color: var(--text);
  position:relative; padding-left: 14px;
  border-left: 2px solid var(--accent-border);
}
.pz-brief-script .b-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--accent); letter-spacing: 1px; text-transform: uppercase;
  margin-right: 6px;
}
.pz-brief-script p { margin-bottom: 10px; }
.pz-brief-script p:last-child { margin-bottom: 0; }
.pz-brief-script b { color: var(--text); font-weight: 700; }

.pz-brief-footer {
  display:flex; flex-wrap:wrap; gap: 8px;
  padding: 14px 20px; border-top:1px solid var(--border);
  align-items:center;
}
.pz-brief-footer .pz-tag {
  padding: 4px 9px; border-radius: 6px;
  background: var(--bg-input); border:1px solid var(--border);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: var(--text2); letter-spacing: .8px; text-transform: uppercase;
}
.pz-brief-footer .pz-tag.cat {
  background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border);
}
.pz-brief-footer .pz-deliver {
  margin-left:auto; display:flex; gap:6px;
}
.pz-brief-footer .pz-deliver button {
  padding: 6px 11px; border-radius: 8px; cursor:pointer;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .5px; background: var(--bg-input); border:1px solid var(--border);
  color: var(--text2); display:inline-flex; gap:5px; align-items:center;
}
.pz-brief-footer .pz-deliver button:hover { color: var(--accent); border-color: var(--accent-border); }

/* ── KEYWORD ALERTS ─────────────────────────────── */
.pz-alerts {
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: 20px; padding: 20px;
}
.pz-alerts-form {
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px; margin-bottom: 14px;
}
.pz-kw-input-wrap {
  display:flex; align-items:center; gap: 8px;
  background: var(--bg-input); border:1px solid var(--border);
  border-radius: 12px; padding: 10px 14px;
}
.pz-kw-input-wrap:focus-within { border-color: var(--accent); }
.pz-kw-input-wrap .pz-kw-icon {
  font-family: var(--font-mono); font-size: 14px; color: var(--text3);
}
.pz-kw-input-wrap input {
  flex:1; background:none; border:none; outline:none;
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  letter-spacing: .3px;
}
.pz-kw-input-wrap input::placeholder { color: var(--text3); }
.pz-add-kw {
  padding: 10px 18px;
  background: var(--accent); color: #000;
  border-radius: 12px; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .8px;
  cursor:pointer; transition: all var(--tr);
}
[data-theme="light"] .pz-add-kw { color: #fff; }
.pz-add-kw:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--green-glow); }

.pz-channel-row {
  display:flex; gap: 8px; flex-wrap:wrap; align-items:center;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg-input); border:1px dashed var(--border);
  border-radius: 12px;
}
.pz-channel-row .pz-ch-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: var(--text3); letter-spacing: 1.4px; text-transform: uppercase;
}
.pz-ch {
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-card); border:1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text2); cursor:pointer; letter-spacing: .5px;
  display:inline-flex; gap:6px; align-items:center;
  transition: all var(--tr);
}
.pz-ch:hover { color: var(--text); border-color: var(--border2); }
.pz-ch.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.pz-ch .pz-ch-dot {
  width:6px;height:6px;border-radius:50%;
  background: var(--text4);
  transition: background var(--tr);
}
.pz-ch.on .pz-ch-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.pz-freq-row {
  display:flex; gap:6px; align-items:center; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
}
.pz-freq-row .pz-freq-label {
  font-size: 9px; font-weight: 700; color: var(--text3);
  letter-spacing: 1.4px; text-transform: uppercase; margin-right: 6px;
}
.pz-freq-row button {
  padding: 5px 10px; border-radius: 6px;
  background: var(--bg-input); border:1px solid var(--border);
  color: var(--text2); cursor:pointer; font-family: inherit;
  font-size: 10px; font-weight: 600;
}
.pz-freq-row button.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }

.pz-alert-list {
  display:flex; flex-direction:column; gap: 8px;
}
.pz-alert-item {
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-input); border:1px solid var(--border);
}
.pz-alert-item .pz-alert-kw {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--text); padding: 5px 10px;
  background: var(--accent-bg); border:1px solid var(--accent-border);
  color: var(--accent); border-radius: 8px;
  letter-spacing: .3px;
}
.pz-alert-item .pz-alert-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  letter-spacing: .4px;
}
.pz-alert-item .pz-alert-meta b { color: var(--text); }
.pz-alert-item .pz-alert-channels {
  display:flex; gap: 4px;
}
.pz-alert-item .pz-alert-channels span {
  width:22px; height:22px; border-radius: 50%;
  background: var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text2);
}
.pz-alert-item .pz-alert-channels span svg { width: 11px; height: 11px; }
.pz-alert-del {
  width:28px; height:28px; border-radius:8px;
  background: var(--bg-card); border:1px solid var(--border);
  color: var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all var(--tr);
}
.pz-alert-del:hover { color: var(--red); border-color: var(--red); }
.pz-alert-del svg { width: 13px; height: 13px; }

.pz-empty {
  padding: 24px; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text3); letter-spacing: .5px;
  border:1px dashed var(--border); border-radius:12px;
}

/* ── MAP-TO-LAW BUTTON IN ARTICLE ─────────────── */
.mtl-bar {
  margin: 18px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-bg), transparent);
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.mtl-bar::before {
  content:'⚖'; position:absolute; top:-10px; right:-10px;
  font-size:80px; opacity:.06; transform: rotate(-12deg);
}
.mtl-bar .mtl-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-size: 20px; flex-shrink:0;
}
[data-theme="light"] .mtl-bar .mtl-icon { color: #fff; }
.mtl-bar .mtl-text { flex:1; min-width: 180px; }
.mtl-bar .mtl-title {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  color: var(--text); margin-bottom: 2px;
}
.mtl-bar .mtl-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text2); letter-spacing: .3px;
}
.mtl-bar .mtl-go {
  padding: 9px 16px; border-radius: 10px;
  background: var(--accent); color: #000;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .6px; cursor: pointer; transition: all var(--tr);
  display:inline-flex; align-items:center; gap:6px;
}
[data-theme="light"] .mtl-bar .mtl-go { color: #fff; }
.mtl-bar .mtl-go:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--green-glow); }

/* Map-to-Law banner at top of Law page */
.mtl-banner {
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-card));
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  animation: slideDown .4s ease-out;
}
.mtl-banner .mtl-banner-icon {
  width: 36px; height:36px; border-radius: 10px;
  background: var(--accent); color: #000;
  display:flex;align-items:center;justify-content:center;
  font-size: 18px; flex-shrink: 0;
}
[data-theme="light"] .mtl-banner .mtl-banner-icon { color: #fff; }
.mtl-banner .mtl-banner-body { flex:1; min-width: 200px; }
.mtl-banner .mtl-banner-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 3px;
}
.mtl-banner .mtl-banner-title {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  color: var(--text);
}
.mtl-banner .mtl-banner-count {
  padding: 5px 10px; border-radius: 999px;
  background: var(--accent); color: #000;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
}
[data-theme="light"] .mtl-banner .mtl-banner-count { color: #fff; }
.mtl-banner .mtl-banner-close {
  width:28px;height:28px;border-radius:8px;
  background: var(--bg-input); border:1px solid var(--border);
  color: var(--text2); cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size: 16px;
}
.mtl-banner .mtl-banner-close:hover { color: var(--red); border-color: var(--red); }

.ltree-node.section.mtl-hit {
  box-shadow: 0 0 0 2px var(--accent), 0 8px 24px var(--green-glow);
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.ltree-node.section.mtl-hit .sec-num {
  background: var(--accent); color: #000; border-color: var(--accent);
}
[data-theme="light"] .ltree-node.section.mtl-hit .sec-num { color: #fff; }

/* ── BARE ACT DOWNLOAD CARD ─────────────────── */
.ltd-download {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: var(--bg-input); border:1px solid var(--border);
  border-radius: 10px;
}
.ltd-dl-btn {
  display:flex; align-items:center; gap: 9px;
  padding: 10px 12px;
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text2); cursor:pointer; letter-spacing: .3px;
  transition: all var(--tr);
  text-decoration: none;
}
.ltd-dl-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.ltd-dl-btn .ltd-dl-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent-bg); border:1px solid var(--accent-border);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.ltd-dl-btn .ltd-dl-icon svg { width: 13px; height: 13px; }
.ltd-dl-btn .ltd-dl-meta {
  flex:1; min-width: 0;
  display:flex; flex-direction:column;
  line-height: 1.3;
}
.ltd-dl-btn .ltd-dl-meta b { color: var(--text); font-size: 11.5px; }
.ltd-dl-btn .ltd-dl-meta i {
  font-style: normal; color: var(--text3); font-size: 9px; letter-spacing: .8px;
}

.ltd-compare-btn {
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 14px;
  background: var(--bg-input); border:1px solid var(--border);
  border-radius: 10px; cursor:pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--text); letter-spacing: .4px;
  transition: all var(--tr);
}
.ltd-compare-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.ltd-compare-btn.set-as-b {
  background: rgba(168,85,247,.08); border-color: var(--purple); color: var(--purple);
}

/* ── COMPARE MODE BAR + DRAWER ─────────────── */
.law-tree-actions button.cmp-toggle.active {
  background: var(--accent-bg); color: var(--accent);
  border-color: var(--accent);
}
.cmp-bar {
  display: none;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-card-h));
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  align-items: center; gap: 12px; flex-wrap: wrap;
}
.cmp-bar.on { display:flex; }
.cmp-bar .cmp-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); display:flex; align-items:center; gap:6px;
}
.cmp-bar .cmp-slot {
  flex:1; min-width: 160px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg-input); border:1px dashed var(--border);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text3); letter-spacing: .3px;
  display:flex; align-items:center; gap: 8px;
  cursor:pointer;
}
.cmp-bar .cmp-slot.filled {
  border-style: solid; border-color: var(--accent-border);
  background: var(--accent-bg); color: var(--text);
}
.cmp-bar .cmp-slot.filled.b {
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.06);
}
.cmp-bar .cmp-slot .cmp-slot-letter {
  width: 22px; height:22px; border-radius:50%;
  background: var(--accent); color: #000;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
[data-theme="light"] .cmp-bar .cmp-slot .cmp-slot-letter { color: #fff; }
.cmp-bar .cmp-slot.b .cmp-slot-letter {
  background: var(--purple); color: #fff;
}
.cmp-bar .cmp-slot .cmp-slot-clear {
  margin-left: auto; opacity: 0; color: var(--text3); font-size: 14px;
  width: 18px; height:18px; display:flex; align-items:center; justify-content:center;
  border-radius: 50%; background: var(--bg-card);
}
.cmp-bar .cmp-slot.filled .cmp-slot-clear { opacity: 1; }
.cmp-bar .cmp-vs {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: var(--accent); letter-spacing: 1px;
}
.cmp-bar .cmp-go {
  padding: 9px 16px; border-radius: 10px;
  background: var(--accent); color: #000;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .5px; cursor:pointer; transition: all var(--tr);
}
[data-theme="light"] .cmp-bar .cmp-go { color: #fff; }
.cmp-bar .cmp-go:disabled {
  background: var(--bg-input); color: var(--text3); cursor: not-allowed; box-shadow: none;
  border:1px solid var(--border);
}
.cmp-bar .cmp-go:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--green-glow); }

.ltree-node.section.cmp-a { box-shadow: 0 0 0 2px var(--accent); }
.ltree-node.section.cmp-b { box-shadow: 0 0 0 2px var(--purple); }

/* compare drawer */
.cmp-drawer {
  position: fixed; inset: 60px 10px 10px 10px;
  background: var(--bg2); border:1px solid var(--border);
  border-radius: 18px; z-index: 200;
  display: none; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.cmp-drawer.open { display: flex; animation: panelIn .35s ease-out; }
.cmp-drawer-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap: 12px;
}
.cmp-drawer-head h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  flex:1;
}
.cmp-drawer-head .cmp-export {
  padding: 7px 12px; border-radius: 8px;
  background: var(--bg-input); border:1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  letter-spacing: .5px; cursor:pointer;
}
.cmp-drawer-head .cmp-export:hover { color: var(--accent); border-color: var(--accent-border); }
.cmp-drawer-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-input); border:1px solid var(--border);
  color: var(--text2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
}
.cmp-drawer-close:hover { color: var(--red); border-color: var(--red); }

.cmp-drawer-grid {
  flex: 1; overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cmp-drawer-side {
  padding: 20px 22px; overflow: auto;
  border-right: 1px solid var(--border);
}
.cmp-drawer-side:last-child { border-right: none; }
.cmp-side-pill {
  display:inline-block; padding: 4px 10px;
  background: var(--accent); color: #000;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; border-radius: 999px; margin-bottom: 8px;
}
[data-theme="light"] .cmp-side-pill { color: #fff; }
.cmp-drawer-side.b .cmp-side-pill { background: var(--purple); color:#fff; }
.cmp-side-num {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--accent); letter-spacing: -.3px; margin-bottom: 4px;
}
.cmp-drawer-side.b .cmp-side-num { color: var(--purple); }
.cmp-side-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  margin-bottom: 14px; line-height: 1.3;
}
.cmp-side-act {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text3); letter-spacing: .5px; margin-bottom: 16px;
}
.cmp-side-block {
  margin-bottom: 14px;
}
.cmp-side-block h6 {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: var(--text3); letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 6px;
}
.cmp-side-block p {
  font-size: 12.5px; line-height: 1.65; color: var(--text);
}
.cmp-side-block .cmp-pen {
  padding: 9px 12px; border-radius: 8px;
  background: rgba(255,45,74,.06); border:1px solid rgba(255,45,74,.2);
  color: var(--red); font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
}
.cmp-side-block .cmp-pen.proc {
  background: rgba(0,179,255,.06); border-color: rgba(0,179,255,.2); color: var(--blue);
}
.cmp-side-tags { display:flex; gap: 5px; flex-wrap: wrap; }
.cmp-side-tags span {
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-input); border:1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
}
.cmp-diff-bar {
  padding: 10px 20px; border-top:1px solid var(--border);
  display:flex; gap: 16px; flex-wrap:wrap;
  background: var(--bg-input);
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  letter-spacing: .4px;
}
.cmp-diff-bar .pill {
  padding: 3px 9px; border-radius: 6px;
  background: var(--bg-card); border:1px solid var(--border);
}
.cmp-diff-bar .pill b { color: var(--text); }
.cmp-diff-bar .pill.same { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.cmp-diff-bar .pill.diff { background: rgba(255,140,0,.08); border-color: rgba(255,140,0,.3); color: var(--orange); }

/* ════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (wide screens) ─────────────
   Container caps were too tight at 1200px for 1440+
   ════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  body:not([data-device]) .container,
  body[data-device="desktop"] .container {
    max-width: 1360px;
  }
  .pz-role-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1680px) {
  body:not([data-device]) .container,
  body[data-device="desktop"] .container {
    max-width: 1440px;
    padding: 0 28px;
  }
}

/* Desktop: news grid breathing room */
@media (min-width: 1280px) {
  body:not([data-device]) .news-grid,
  body[data-device="desktop"] .news-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — TABLET (820 → 1023) ───────────────
   ════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .pz-hero { padding: 22px 22px; }
  .pz-hero h2 { font-size: 28px; }
  .pz-role-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .cmp-drawer { inset: 50px 8px 8px 8px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — SMALL TABLET / LARGE PHONE
   ════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .pz-hero {
    padding: 20px 18px; border-radius: 18px;
    margin: 14px 0 18px;
  }
  .pz-hero h2 { font-size: 24px; line-height:1.15; }
  .pz-hero p { font-size: 13px; }
  .pz-hero-meta { margin-top: 12px; gap: 6px; }
  .pz-hero-meta .pz-chip { font-size: 9px; padding: 4px 9px; }

  .pz-section { margin-bottom: 22px; }
  .pz-section-head { gap: 10px; padding-bottom: 8px; margin-bottom: 12px; }
  .pz-section-head h3 { font-size: 16px; }
  .pz-section-head .pz-status { font-size: 8px; letter-spacing: 1px; }

  .pz-role-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pz-role { padding: 14px 12px; border-radius: 14px; }
  .pz-role h4 { font-size: 13px; }
  .pz-role .pz-role-desc { font-size: 11px; }
  .pz-role .pz-role-tags span { font-size: 8px; padding: 2px 6px; }
  .pz-role-preview { padding: 12px 14px; }
  .pz-role-preview .pz-pre-snippet { font-size: 10.5px; min-width: 0; flex-basis: 100%; }

  .pz-brief-top { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  .pz-brief-title { font-size: 14px; flex-basis: 100%; }
  .pz-brief-date { font-size: 9px; }
  .pz-brief-actions button { font-size: 9px; padding: 6px 9px; }
  .pz-brief-player {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    padding: 12px 16px;
    gap: 10px;
  }
  .pz-brief-player .pz-play-btn { width: 42px; height: 42px; grid-row: 1 / 3; }
  .pz-waveform { height: 32px; grid-column: 2 / 4; }
  .pz-brief-timer { grid-column: 2; font-size: 10px; min-width: auto; text-align:left; }
  .pz-brief-speed { grid-column: 3; justify-self: end; }
  .pz-brief-body { padding: 14px 16px; }
  .pz-brief-script { font-size: 12.5px; }
  .pz-brief-footer { padding: 12px 16px; gap: 6px; }
  .pz-brief-footer .pz-deliver { margin-left: 0; width: 100%; }
  .pz-brief-footer .pz-deliver button { flex: 1; justify-content: center; font-size: 9px; padding: 7px 8px; }

  .pz-alerts { padding: 16px; border-radius: 16px; }
  .pz-alerts-form { grid-template-columns: 1fr; gap: 8px; }
  .pz-add-kw { padding: 11px; }
  .pz-channel-row { padding: 8px 10px; }
  .pz-ch { padding: 5px 10px; font-size: 9px; }
  .pz-freq-row button { font-size: 9px; padding: 5px 8px; }
  .pz-alert-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px 12px;
  }
  .pz-alert-item .pz-alert-kw { font-size: 12px; padding: 4px 8px; }
  .pz-alert-item .pz-alert-meta {
    grid-column: 1 / -1; font-size: 9.5px;
    order: 3;
  }
  .pz-alert-item .pz-alert-channels { gap: 3px; }
  .pz-alert-item .pz-alert-channels span { width: 20px; height: 20px; }
  .pz-alert-del { width: 26px; height: 26px; }

  .mtl-bar { padding: 12px 14px; gap: 10px; border-radius: 12px; }
  .mtl-bar .mtl-icon { width: 36px; height: 36px; font-size: 16px; }
  .mtl-bar .mtl-title { font-size: 12.5px; }
  .mtl-bar .mtl-sub { font-size: 9.5px; }
  .mtl-bar .mtl-go { padding: 8px 14px; font-size: 11px; width: 100%; justify-content: center; }
  .mtl-banner { padding: 12px 14px; gap: 10px; }
  .mtl-banner .mtl-banner-icon { width: 32px; height: 32px; }
  .mtl-banner .mtl-banner-title { font-size: 12px; }

  .cmp-bar { padding: 10px 12px; gap: 8px; }
  .cmp-bar .cmp-slot { padding: 8px 10px; font-size: 10px; min-width: 0; flex-basis: 42%; }
  .cmp-bar .cmp-vs { font-size: 11px; }
  .cmp-bar .cmp-go { width: 100%; padding: 9px; }

  .cmp-drawer { inset: 46px 6px 6px 6px; border-radius: 14px; }
  .cmp-drawer-head { padding: 12px 14px; gap: 8px; }
  .cmp-drawer-head h3 { font-size: 13px; }
  .cmp-drawer-head .cmp-export { font-size: 9px; padding: 6px 10px; }
  .cmp-drawer-grid { grid-template-columns: 1fr; }
  .cmp-drawer-side { padding: 16px 16px; border-right: none; border-bottom:1px dashed var(--border); }
  .cmp-side-num { font-size: 18px; }
  .cmp-side-title { font-size: 13.5px; }
  .cmp-diff-bar { padding: 9px 14px; gap: 8px; font-size: 9px; }

  .ltd-download { grid-template-columns: 1fr; }
  .ltd-compare-btn { font-size: 11px; padding: 8px 12px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE (< 480px)
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pz-hero { padding: 18px 16px; }
  .pz-hero h2 { font-size: 22px; }
  .pz-hero p { font-size: 12px; }
  .pz-eyebrow { font-size: 9px; }
  .pz-section-head { flex-wrap: wrap; }
  .pz-section-head .pz-status { flex-basis: 100%; order: 3; }
  .pz-role-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pz-role { padding: 12px 10px; }
  .pz-role .pz-role-icon { width: 30px; height: 30px; }
  .pz-role .pz-role-icon svg { width: 15px; height: 15px; }
  .pz-role h4 { font-size: 12px; }
  .pz-role .pz-role-sub { font-size: 8px; }
  .pz-role .pz-role-desc { font-size: 10.5px; line-height:1.45; }
  .pz-role .pz-role-tags { display: none; }
  .pz-role .pz-role-check { width: 16px; height: 16px; top: 10px; right: 10px; }
  .pz-role-preview { padding: 10px 12px; gap: 8px; }
  .pz-role-preview .pz-pre-priority { width: 100%; }
  .pz-role-preview .pz-pre-priority span { font-size: 8px; padding: 2px 6px; }

  .pz-brief-actions { width: 100%; }
  .pz-brief-actions button { flex: 1; justify-content: center; }
  .pz-brief-script { font-size: 12px; padding-left: 10px; }
  .pz-brief-script .b-tag { font-size: 9px; }
  .pz-brief-footer .pz-tag { font-size: 8px; padding: 3px 7px; }

  .pz-kw-input-wrap input { font-size: 12px; }
  .pz-alert-item .pz-alert-kw { font-size: 11px; }

  .mtl-bar .mtl-icon { width: 32px; height: 32px; font-size: 14px; }
  .mtl-bar .mtl-title { font-size: 12px; }

  .cmp-drawer { inset: 44px 4px 4px 4px; border-radius: 12px; }
  .cmp-bar .cmp-slot { flex-basis: 100%; }
  .cmp-bar .cmp-vs { width: 100%; text-align:center; font-size: 10px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Very narrow (< 360px)
   ════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .pz-hero h2 { font-size: 20px; }
  .pz-role-grid { grid-template-columns: 1fr; }
  .pz-brief-player { grid-template-columns: 1fr; }
  .pz-brief-player .pz-play-btn { grid-row: auto; justify-self: center; }
  .pz-waveform { grid-column: auto; height: 26px; }
  .pz-brief-timer { grid-column: auto; text-align: center; }
  .pz-brief-speed { grid-column: auto; justify-self: center; }
}

/* ════════════════════════════════════════════════
   FALLBACK — keep base CSS quirks tidy
   ════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .cmp-drawer-grid { grid-template-columns: 1fr; }
  .cmp-drawer-side { border-right: none; border-bottom:1px solid var(--border); }
  .ltd-download { grid-template-columns: 1fr; }
}

/* ========================================================================
   2 · Unified app  —  core / theme / layout / components
   ======================================================================== */

+
  `__unified_device_chrome` markup + `__unified_device_js` <script>
  near the end of <body>. Everything else is the shared layer, intact.

  Inherited shared layer:
    • Theme system (data-theme + CSS variable palette)
    • Font packs (FONT_PACKS)
    • Language map (T.en, T.hi, langByCode, setLang)
    • Page router (showPage)
    • Data layer (NEWS, LAW_LIB, LAW_ACTS, REPORT_PATHS)
    • Bookmarks / audience / archive / law-tree state
    • Search controller (handleNavSearch)
    • Tweaks panel + EDITMODE persistence bridge

  Companion files:
    • features.md  → feature catalogue + architecture reference
    • rule.md      → standing design rules
    • changes.md   → session-by-session changelog (append-only)
    • features.css → shared stylesheet
    • features.js  → shared scripts
    • law-data.js  → cyber-law dataset

  Any change to features, behavior, or architecture must be reflected
  in features.md AND logged in changes.md the same session.
  ════════════════════════════════════════════════════════════════════
-->
<html lang="en" data-theme="light" data-lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyber Samachar — Unified Multi-Device App (Beta v1.1)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Playfair+Display:wght@500;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&family=Merriweather:wght@400;700;900&family=Lora:wght@400;500;600;700&family=Bebas+Neue&family=Archivo:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="features.css">
<style>
/* ── TWEAK DEFAULTS ── */
/* (TWEAK_DEFAULTS JS removed here — it is app config, not CSS) */

:root {
 --font-display: 'Chakra Petch', sans-serif;
 --font-body: 'Inter', sans-serif;
 --font-mono: 'IBM Plex Mono', monospace;
 --green: #00ff41;
 --green-dim: #00cc33;
 --green-glow: rgba(0,255,65,0.35);
 --red: #ff2d4a;
 --red-dim: #d11731;
 --red-glow: rgba(255,45,74,0.35);
 --orange: #ff8c00;
 --yellow: #e6c200;
 --blue: #00d4ff;
 --purple: #a855f7;
 --radius: 14px;
 --radius-lg: 22px;
 --radius-xl: 28px;
 --tr: 0.25s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] {
 --bg: #060a10;
 --bg2: #0a0f18;
 --bg3: #0f1520;
 --bg-card: rgba(15,21,32,0.85);
 --bg-card-h: rgba(22,30,45,0.92);
 --bg-input: rgba(255,255,255,0.04);
 --text: #f0f4fa;
 --text2: rgba(240,244,250,0.62);
 --text3: rgba(240,244,250,0.35);
 --text4: rgba(240,244,250,0.15);
 --border: rgba(255,255,255,0.07);
 --border2: rgba(0,255,65,0.22);
 --accent: var(--green);
 --accent-bg: rgba(0,255,65,0.06);
 --accent-border: rgba(0,255,65,0.18);
 --nav-bg: rgba(6,10,16,0.88);
 --shadow: 0 4px 24px rgba(0,0,0,0.35);
 --shadow-h: 0 12px 48px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,65,0.05);
}
[data-theme="light"] {
 --bg: #f4f6f9;
 --bg2: #ffffff;
 --bg3: rgba(255,255,255,0.7);
 --bg-card: rgba(255,255,255,0.85);
 --bg-card-h: #ffffff;
 --bg-input: rgba(10,20,40,0.04);
 --text: #0a1628;
 --text2: rgba(10,22,40,0.72);
 --text3: rgba(10,22,40,0.48);
 --text4: rgba(10,22,40,0.16);
 --border: rgba(10,22,40,0.09);
 --border2: rgba(0,130,70,0.3);
 --accent: #009150;
 --accent-bg: rgba(0,145,80,0.08);
 --accent-border: rgba(0,145,80,0.22);
 --nav-bg: rgba(244,246,249,0.85);
 --shadow: 0 4px 18px rgba(10,22,40,0.08);
 --shadow-h: 0 14px 42px rgba(10,22,40,0.14), 0 0 24px rgba(0,145,80,0.08);
 --green: #009150;
 --green-dim: #006e3b;
 --green-glow: rgba(0,145,80,0.28);
 --red: #dc2538;
 --red-dim: #a81a28;
 --red-glow: rgba(220,37,56,0.28);
 --orange: #b05800;
 --yellow: #857000;
 --blue: #0066aa;
 --purple: #6d28d9;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
 font-family: var(--font-body);
 background: var(--bg);
 color: var(--text);
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 font-size: 14px;
 line-height: 1.65;
 min-height: 100vh;
 padding-bottom: 36px;
 transition: background var(--tr), color var(--tr);
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }
img { max-width: 100%; display: block; }
::selection { background: #ff9d4f !important; color: #ffffff !important; text-shadow: none !important; }
::-moz-selection { background: #ff9d4f !important; color: #ffffff !important; }
*::selection { background: #ff9d4f !important; color: #ffffff !important; }
*::-moz-selection { background: #ff9d4f !important; color: #ffffff !important; }
/* Keep SVG icons themselves their original color when their button text is selected */
.nav-bell svg ::selection, .nav-bell svg::selection,
.theme-toggle svg ::selection, .theme-toggle svg::selection,
.nav-menu-btn svg ::selection, .nav-menu-btn svg::selection,
.sidebar-link svg ::selection, .sidebar-link svg::selection { background: transparent !important; }
/* Dark-mode: prevent selection inverting nav-bell stroke to black */
[data-theme="dark"] .nav-bell svg path { fill: none !important; stroke: #ffffff !important; }
[data-theme="dark"] .nav-bell:hover svg path { stroke: var(--accent) !important; }
/* Keep bell icon WHITE in dark mode across all interaction states (focus/active/clicked) */
[data-theme="dark"] .nav-bell:focus svg,
[data-theme="dark"] .nav-bell:focus-visible svg,
[data-theme="dark"] .nav-bell:active svg,
[data-theme="dark"] .nav-bell.open svg,
[data-theme="dark"] .nav-bell:focus svg path,
[data-theme="dark"] .nav-bell:focus-visible svg path,
[data-theme="dark"] .nav-bell:active svg path,
[data-theme="dark"] .nav-bell.open svg path {
  color: #ffffff !important; stroke: #ffffff !important; fill: none !important;
}
[data-theme="dark"] .nav-bell { outline: none; }
[data-theme="dark"] .nav-bell:focus { outline: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-border); border-radius: 4px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes scanline { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 6px var(--green-glow)} 50%{box-shadow:0 0 20px var(--green-glow)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes matrixDrop { 0%{opacity:1} 100%{opacity:0;transform:translateY(100vh)} }
@keyframes panelIn { 0%{opacity:0;transform:translateY(40px) scale(.96);filter:blur(6px)} 60%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes cardLift { from{transform:translateY(0)} to{transform:translateY(-4px)} }
@keyframes badgePulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--green-glow)} 50%{transform:scale(1.06);box-shadow:0 0 0 6px transparent} }
@keyframes accentSweep { 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
.fade-up { animation: fadeUp .45s ease-out both; }
@keyframes navIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes tickerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroIn { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes ringPulse { 0%{box-shadow:0 0 0 0 var(--green-glow)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* ── MATRIX BACKGROUND ── */
#matrixCanvas { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.25;transition:opacity .5s; }
[data-theme="light"] .card-img-wrap,[data-theme="light"] .hero-img,[data-theme="light"] .hero-side-img,[data-theme="light"] .article-panel-header { background:linear-gradient(135deg,#e8ecf2 0%,#f5e8ec 60%,#eaf0f5 100%); }
.ambient-orbs { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.orb { position:absolute;border-radius:50%;filter:blur(80px);opacity:.35; }
.orb-g { width:540px;height:540px;top:-160px;right:-140px;background:radial-gradient(circle,var(--green),transparent 65%); }
.orb-r { width:460px;height:460px;bottom:-120px;left:-120px;background:radial-gradient(circle,var(--red),transparent 65%);opacity:.22; }
[data-theme="light"] .orb { opacity:.22; }
[data-theme="light"] .orb-r { opacity:.16; }
.scanline { position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--green-glow),transparent);animation:scanline 7s linear infinite;pointer-events:none;z-index:0; }
[data-theme="light"] .scanline { display: none; }

/* ── BREAKING TICKER (top) ── */
.ticker-wrap {
 position: fixed; top: 12px; left: 12px; right: 12px; z-index: 60;
 height: 32px; display: flex; align-items: center;
 animation: tickerIn .5s ease-out .05s both;
 background: linear-gradient(90deg,rgba(255,20,50,.25),rgba(220,15,40,.22));
 border: 1px solid rgba(255,60,90,.55); border-radius: 12px;
 backdrop-filter: blur(14px); overflow: hidden;
 box-shadow: 0 6px 22px rgba(255,45,74,.25);
}
.ticker-label {
 flex-shrink: 0; padding: 0 16px; height: 100%;
 display: flex; align-items: center; gap: 6px;
 background: linear-gradient(135deg,var(--red),var(--red-dim)); color: #fff;
 font-family: var(--font-mono); font-size: 9px;
 font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; z-index: 2;
 border-radius: 12px 0 0 12px;
 border-right: 1px solid rgba(255,255,255,.18);
}
.ticker-label .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.ticker-track { display: flex; white-space: nowrap; animation: ticker 50s linear infinite; }
.ticker-item { padding: 0 40px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #ffffff; }

/* ── NAVBAR ── */
.navbar {
 position: fixed; top: 58px; left: 16px; right: 16px; z-index: 50;
 height: 62px; padding: 0 22px;
 animation: navIn .55s ease-out .15s both;
 display: flex; align-items: center; gap: 10px;
 background: var(--nav-bg);
 backdrop-filter: blur(24px) saturate(1.6);
 border: 1px solid var(--border); border-radius: 100px;
 transition: all var(--tr);
 box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.navbar.scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.28); }
.nav-menu-btn {
 width: 40px; height: 40px; border-radius: 50%;
 background: linear-gradient(135deg,var(--accent-bg),rgba(255,45,74,.06));
 border: 1px solid var(--accent-border);
 color: var(--accent);
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0; transition: all var(--tr);
}
.nav-menu-btn:hover { border-color: var(--accent); animation: glowPulse 2s infinite; }
.nav-brand {
 display: flex; align-items: center; gap: 8px;
 font-family: var(--font-display); font-weight: 700; font-size: 17px;
 letter-spacing: .5px; flex-shrink: 0; white-space: nowrap;
}
.nav-brand .accent { color: var(--accent); }
.brand-beta {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ff8a4c;
  background: rgba(255,138,76,.14);
  border: 1px solid rgba(255,138,76,.45);
  border-radius: 5px;
  padding: 2px 6px 1px;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
[data-theme="dark"] .brand-beta {
  color: #ffb066;
  background: rgba(255,138,76,.18);
  border-color: rgba(255,138,76,.55);
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link {
 padding: 6px 12px; border-radius: 6px; flex-shrink: 0;
 font-size: 10px; font-weight: 600; letter-spacing: .8px;
 text-transform: uppercase; color: var(--text3);
 font-family: var(--font-mono); transition: all var(--tr); white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--accent); background: var(--accent-bg); }
.nav-spacer { flex: 1; }
.nav-search { position: relative; width: 190px; flex-shrink: 0; }
.nav-search input {
 width: 100%; padding: 9px 14px 9px 34px;
 background: var(--bg-input); border: 1px solid var(--border);
 border-radius: 100px; color: var(--text); font-size: 12px;
 font-family: var(--font-body); outline: none; transition: all var(--tr);
}
.nav-search input:focus { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.nav-search input::placeholder { color: var(--text3); }
.nav-search .s-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 13px; pointer-events: none; }
.nav-live {
 display: flex; align-items: center; gap: 5px;
 padding: 6px 12px; border-radius: 100px;
 background: var(--accent-bg); border: 1px solid var(--accent-border);
 font-family: var(--font-mono); font-size: 9px; color: var(--text3); flex-shrink: 0;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; flex-shrink: 0; }
.nav-bell {
 position: relative; width: 38px; height: 38px; border-radius: 50%;
 background: linear-gradient(135deg,var(--accent-bg),rgba(255,45,74,.06));
 border: 1px solid var(--accent-border);
 color: var(--accent);
 display: flex; align-items: center; justify-content: center;
 font-size: 15px; transition: all var(--tr); flex-shrink: 0;
}
.nav-bell svg { color: #ffffff !important; stroke: #ffffff !important; fill: none !important; display: block; opacity: 1 !important; }
.nav-bell:hover { border-color: var(--accent); background: var(--accent-bg); animation: ringPulse 1s ease-out; }
/* Dark-mode hover: keep bell icon WHITE (don't flip to green/black) */
[data-theme="dark"] .nav-bell:hover svg,
[data-theme="dark"] .nav-bell:hover svg path {
  stroke: #ffffff !important; color: #ffffff !important; fill: none !important;
}
[data-theme="dark"] .nav-bell:hover { background: rgba(255,255,255,0.08); border-color: #ffffff; }
/* Light-mode hover: switch to accent color */
[data-theme="light"] .nav-bell:hover svg,
[data-theme="light"] .nav-bell:hover svg path {
  stroke: var(--accent) !important; color: var(--accent) !important;
}
.nav-bell:hover svg { animation: wiggle .4s ease-in-out; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }
[data-theme="light"] .nav-bell { background: rgba(0,145,80,0.08); border-color: rgba(0,145,80,0.3); color: #009150; }
[data-theme="light"] .nav-bell svg { color: #009150 !important; stroke: #009150 !important; }
.bell-badge {
 position: absolute; top: -4px; right: -4px;
 min-width: 15px; height: 15px; padding: 0 3px;
 border-radius: 8px; background: var(--red);
 color: #fff; font-size: 8px; font-weight: 700; font-family: var(--font-mono);
 display: flex; align-items: center; justify-content: center;
 animation: pulse 2s infinite;
}
.theme-toggle {
 width: 38px; height: 38px; border-radius: 50%;
 background: var(--bg-input); border: 1px solid var(--border);
 display: flex; align-items: center; justify-content: center;
 color: var(--text2); transition: all var(--tr); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(20deg); }
.theme-toggle svg { transition: transform .35s cubic-bezier(.4,0,.2,1); }
.lang-btn {
 padding: 7px 12px; border-radius: 100px;
 background: var(--bg-input); border: 1px solid var(--border);
 color: var(--text2); font-size: 11px; font-family: var(--font-display);
 font-weight: 600; display: flex; align-items: center; gap: 4px;
 transition: all var(--tr); flex-shrink: 0;
}
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.hamburger { display: none; color: var(--accent); font-size: 22px; padding: 4px; flex-shrink: 0; }

/* ── SIDEBAR ── */
.sidebar-overlay { position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity .3s; }
.sidebar-overlay.open { display:block;opacity:1; }
.sidebar {
 position:fixed;top:0;left:0;bottom:0;z-index:201;width:270px;
 background:var(--bg-card);border-right:1px solid var(--border);
 backdrop-filter:blur(20px);transform:translateX(-100%);
 transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;
 box-shadow:6px 0 40px rgba(0,0,0,.35); padding: 0;
}
.sidebar.open { transform:translateX(0); }
.sidebar-header {
 display: flex; align-items: center; justify-content: space-between;
 padding: 20px 20px 16px; border-bottom: 1px solid var(--border);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.sidebar-close { width:30px;height:30px;border-radius:50%;background:var(--bg-input);border:1px solid var(--border);color:var(--text3);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tr); }
.sidebar-close:hover { color:var(--red);border-color:var(--red); }
.sidebar-nav { padding: 12px; display:flex;flex-direction:column;gap:2px; }
.sidebar-section { font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;padding:14px 8px 6px; }
.sidebar-link {
 padding:10px 12px;border-radius:8px;font-family:var(--font-display);font-size:13px;
 font-weight:600;color:var(--text2);display:flex;align-items:center;gap:10px;
 transition:all var(--tr);
}
.sidebar-link:hover,.sidebar-link.active { background:var(--accent-bg);color:var(--accent); }
.sidebar-link.page-active { background:var(--accent-bg);color:var(--accent);border-left:3px solid var(--accent);padding-left:9px; }
.sidebar-link .sl-icon { width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:currentColor; }
.sidebar-link .sl-icon svg { width:18px;height:18px;display:block; }
.sl-badge { margin-left:auto;padding:1px 7px;border-radius:10px;background:var(--accent-border);color:var(--accent);font-family:var(--font-mono);font-size:9px;font-weight:700; }
.sidebar-footer { margin:16px 12px 0;padding:14px;border-radius:10px;background:var(--accent-bg);border:1px solid var(--accent-border); }
.sidebar-footer .status { display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--accent);letter-spacing:.4px; }

/* ── LAYOUT ── */
.main { position:relative;z-index:1;padding-top:138px;padding-bottom:20px; }
.container { max-width:1200px;margin:0 auto;padding:0 20px; }

/* ── PAGE SYSTEM ── */
.page { display:none; }
.page.active { display:block; }

/* ── HERO ── */
.hero-section { padding: 28px 0 24px; animation: heroIn .55s ease-out .25s both; }
.hero-logo { display:flex;flex-direction:column;align-items:center;margin-bottom:24px; }
.hero-logo svg { filter:drop-shadow(0 0 20px rgba(0,255,65,.25)); }
.hero-logo-text {
 font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:3px;
 text-transform:uppercase;margin-top:10px;white-space:nowrap;
 background:linear-gradient(180deg,#ffffff 0%,#aabbc8 60%,#778899 100%);
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-logo-sub { font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text2);letter-spacing:2.2px;text-transform:uppercase;margin-top:8px; }
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  margin-top: 14px;
  text-align: center;
  text-wrap: balance;
  max-width: 640px;
}
.hero-tagline::before,
.hero-tagline::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent-border);
  vertical-align: middle;
  margin: 0 14px;
  transform: translateY(-2px);
}
.hero-grid { display:grid;grid-template-columns:1fr 380px;gap:20px; }
.hero-main {
  background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
 overflow:hidden;cursor:pointer;transition:all var(--tr);position:relative;
 backdrop-filter:blur(14px);box-shadow:var(--shadow);
}
.hero-main:hover { border-color:var(--border2);box-shadow:var(--shadow-h); }
.hero-img { height:340px;background:linear-gradient(135deg,#0a1628 0%,#1a0d14 50%,#091520 100%);position:relative;overflow:hidden;border-radius:20px 20px 0 0; }
.hero-img-placeholder { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.15; }
.hero-img-watermark { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1; }
.hero-img-watermark img { width:34%;max-width:150px;opacity:.14;filter:drop-shadow(0 2px 18px rgba(0,0,0,.28)); }
[data-theme="light"] .hero-img-watermark img { content:url('logo-mark-dark.png');opacity:.1; }
.hero-side-watermark { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
#catGrid .intel-stat { border-color: var(--border) !important; }
.hero-side-watermark img { width:46%;max-width:44px;opacity:.16;filter:drop-shadow(0 1px 6px rgba(0,0,0,.25)); }
[data-theme="light"] .hero-side-watermark img { content:url('logo-mark-dark.png');opacity:.12; }
.hero-img-pattern { width:100%;height:100%;background-image:repeating-linear-gradient(0deg,var(--border) 0px,var(--border) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,var(--border) 0px,var(--border) 1px,transparent 1px,transparent 40px); }
.hero-breaking { position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:linear-gradient(135deg,var(--red),var(--red-dim));color:#fff;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;animation:pulse 1.5s infinite;box-shadow:0 4px 14px var(--red-glow); }
.hero-severity { position:absolute;top:14px;right:14px; }
.hero-body { padding:20px 22px 22px; }
.hero-tags { display:flex;align-items:center;gap:6px;margin-bottom:12px; }
.hero-title { font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.3;margin-bottom:10px; }
.hero-title:hover { color:var(--accent); }
.hero-summary { font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.hero-meta { display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:10px;color:var(--text3); }
.hero-sidebar { display:flex;flex-direction:column;gap:12px; }
.hero-side-card {
 background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
 overflow:hidden;cursor:pointer;transition:all var(--tr);display:flex;gap:0;
 backdrop-filter:blur(12px);box-shadow:var(--shadow);
}
.hero-side-card:hover { border-color:var(--border2);transform:translateX(2px); }
.hero-side-img { width:80px;height:74px;flex-shrink:0;background:linear-gradient(135deg,#0a1628,#0d2040);position:relative;overflow:hidden; }
.hero-side-body { padding:10px 12px;flex:1;min-width:0; }
.hero-side-title { font-family:var(--font-display);font-size:12px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:5px; }
.hero-side-meta { font-family:var(--font-mono);font-size:9px;color:var(--text3); }

/* ── SECTION HEADER ── */
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.section-title { font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);display:flex;align-items:center;gap:8px; }
.section-title::before { content:'';width:3px;height:16px;background:var(--accent);border-radius:2px; }
.section-more { font-family:var(--font-mono);font-size:10px;color:var(--accent);letter-spacing:.5px;transition:all var(--tr); }
.section-more:hover { letter-spacing:1px; }

/* ── CATEGORY TABS ── */
.cat-tabs { display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;padding-bottom:4px; }

/* ── AUDIENCE MODE TOGGLE ── */
.audience-bar { display:flex; align-items:stretch; gap:10px; margin:14px 0 18px; padding:0; border-radius:18px; background:transparent; border:none; flex-wrap:wrap; }
.audience-bar > .audience-bar-label { display:none; }
.audience-bar > .audience-bar-meta { display:none; }
.audience-bar > .audience-toggle { display:none; }
.audience-split { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin:14px 0 18px; }
.feed-audience-split {
  max-width: 460px; margin: 28px auto 22px;
  position: relative; padding-top: 14px;
}
.feed-audience-split::before {
  content: 'Choose your feed';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1.8px;
  color: var(--text2); text-transform: uppercase;
  padding: 0 12px; background: var(--bg);
}
.audience-card {
  position:relative; padding:6px 10px 6px 10px; border-radius:999px;
  background:var(--bg-card); border:1px solid var(--border);
  backdrop-filter:blur(14px); box-shadow:var(--shadow);
  cursor:pointer; transition:all var(--tr);
  display:flex; align-items:center; gap:7px;
  overflow:hidden; text-align:left;
  min-height:30px;
}
.audience-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:transparent; transition:background var(--tr);
}
.audience-card .ac-icon {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-input); border:1px solid var(--border);
  transition:all var(--tr);
}
.audience-card .ac-icon svg { width:11px; height:11px; color:var(--text2); transition:color var(--tr); }
.audience-card .ac-body { flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.audience-card .ac-head { display:flex; align-items:center; gap:5px; margin-bottom:0; flex-wrap:nowrap; min-width:0; }
.audience-card .ac-title { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--text); letter-spacing:.3px; white-space:nowrap; }
.audience-card .ac-pill { display:none; }
.audience-card .ac-desc { display:none; }
.audience-card .ac-check {
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--tr);
}
.audience-card .ac-check svg { width:9px; height:9px; opacity:0; transition:opacity var(--tr); }
.audience-card:hover { border-color:var(--border2); }
/* General → Light Orange */
.audience-card.general.active { border-color:rgba(255,157,79,.6); background:rgba(255,157,79,.12); }
.audience-card.general.active::before { background:transparent; }
.audience-card.general.active .ac-icon { background:rgba(255,157,79,.18); border-color:rgba(255,157,79,.45); }
.audience-card.general.active .ac-icon svg { color:#ff9d4f; }
.audience-card.general.active .ac-title { color:#c5651a; }
.audience-card.general.active .ac-check { border-color:#ff9d4f; background:#ff9d4f; }
.audience-card.general.active .ac-check svg { opacity:1; color:#fff; }
/* Professional → Corporate Light Navy Blue */
.audience-card.pro.active { border-color:rgba(30,64,128,.5); background:rgba(30,64,128,.10); }
.audience-card.pro.active::before { background:transparent; }
.audience-card.pro.active .ac-icon { background:rgba(30,64,128,.18); border-color:rgba(30,64,128,.45); }
.audience-card.pro.active .ac-icon svg { color:#1e4080; }
.audience-card.pro.active .ac-title { color:#1e4080; }
.audience-card.pro.active .ac-check { border-color:#1e4080; background:#1e4080; }
.audience-card.pro.active .ac-check svg { opacity:1; color:#fff; }
[data-theme="dark"] .audience-card.pro.active { border-color:rgba(120,160,220,.55); background:rgba(120,160,220,.12); }
[data-theme="dark"] .audience-card.pro.active .ac-icon { background:rgba(120,160,220,.18); border-color:rgba(120,160,220,.4); }
[data-theme="dark"] .audience-card.pro.active .ac-icon svg { color:#7da4dc; }
[data-theme="dark"] .audience-card.pro.active .ac-title { color:#a8c2e8; }
[data-theme="dark"] .audience-card.pro.active .ac-check { border-color:#7da4dc; background:#7da4dc; }
@media(max-width:640px) {
  .feed-audience-split { max-width:100%; }
  .audience-card { padding:7px 10px 7px 12px; gap:7px; }
  .audience-card .ac-icon { width:22px; height:22px; }
  .audience-card .ac-title { font-size:11px; }
}
.audience-bar-label { font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--accent); letter-spacing:1.3px; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.audience-bar-label::before { content:''; width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--green-glow);animation:pulse 2s infinite; }
.audience-toggle { display:inline-flex; gap:3px; background:var(--bg-input); border:1px solid var(--border); border-radius:100px; padding:3px; }
.audience-opt { padding:7px 14px; border-radius:100px; font-family:var(--font-display); font-size:11px; font-weight:600; color:var(--text2); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:all var(--tr); cursor:pointer; letter-spacing:.3px; line-height:1; }
.audience-opt svg { width:13px;height:13px; flex-shrink:0; }
.audience-opt:hover { color:var(--text); background:rgba(255,255,255,0.03); }
[data-theme="light"] .audience-opt:hover { background:rgba(10,22,40,0.04); }
.audience-opt.active { background:var(--accent); color:#000; box-shadow:0 4px 14px var(--green-glow); }
.audience-opt.active svg { color:#000; }
.audience-opt.pro.active { background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; box-shadow:0 4px 14px rgba(168,85,247,.4); }
.audience-opt.pro.active svg { color:#fff; }
.audience-bar-meta { font-family:var(--font-mono); font-size:10px; color:var(--text3); margin-left:auto; flex:1; text-align:right; min-width:140px; }
.audience-bar-meta strong { color:var(--text2); font-weight:700; }
@media(max-width:640px) {
  .audience-bar { padding:8px 10px; gap:8px; }
  .audience-bar-label { font-size:8px; }
  .audience-opt { padding:6px 10px; font-size:10px; gap:5px; }
  .audience-bar-meta { display:none; }
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
 padding:8px 18px;border-radius:14px;white-space:nowrap;
 font-family:var(--font-display);font-size:12px;font-weight:600;
 border:1px solid transparent;color:var(--text3);transition:all var(--tr);
 display:flex;align-items:center;gap:6px;
}
.cat-tab:hover { color:var(--text2);background:rgba(255,255,255,.04); }
.cat-tab.active { background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent); }
.cat-tab .ct-count { font-family:var(--font-mono);font-size:9px;padding:1px 6px;border-radius:9px;background:var(--bg-input);color:var(--text3); }
.cat-tab.active .ct-count { background:var(--accent-border);color:var(--accent); }

/* ── NEWS CARDS ── */
.news-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px; }
.news-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:18px;
 overflow:hidden;cursor:pointer;transition:all var(--tr); position:relative;
 backdrop-filter:blur(14px);display:flex;flex-direction:column;
 box-shadow:var(--shadow);
}
.news-card:hover { border-color:var(--border2);box-shadow:var(--shadow-h);transform:translateY(-4px) scale(1.005); }
.news-card:hover .card-title { color:var(--accent); }
.news-card .card-img-wrap > * { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.news-card:hover .card-img-wrap > * { transform: scale(1.06); }
.news-card::after {
 content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
 box-shadow: 0 0 0 0 transparent; transition: box-shadow .35s ease;
}
.news-card:hover::after { box-shadow: 0 0 30px var(--green-glow); }
.card-img-wrap { height:170px;background:linear-gradient(135deg,#0a1628 0%,#1a0d14 60%,#091520 100%);position:relative;overflow:hidden;border-radius:18px 18px 0 0; }
.card-img-grid { position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,var(--border) 0px,var(--border) 1px,transparent 1px,transparent 32px),repeating-linear-gradient(90deg,var(--border) 0px,var(--border) 1px,transparent 1px,transparent 32px);opacity:.6; }
/* Real cover photo (fills the card image area when a `cover` URL is supplied + loads OK) */
.card-cover-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2; }
/* Logo watermark — shown when no cover is supplied OR the cover image fails to load (replaces the grid placeholder) */
.card-img-watermark { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1; }
.card-img-watermark img { width:42%;max-width:118px;opacity:.14;filter:drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
[data-theme="light"] .card-img-watermark img { content:url('logo-mark-dark.png');opacity:.1; }
.card-img-label { position:absolute;bottom:8px;left:8px;right:8px;font-family:var(--font-mono);font-size:9px;color:var(--text3);text-align:center;z-index:3; }
.card-body { padding:14px 16px 12px;flex:1;display:flex;flex-direction:column; }
.card-tags { display:flex;align-items:center;gap:5px;margin-bottom:10px; }
.card-title { font-family:var(--font-display);font-size:14px;font-weight:700;line-height:1.38;margin-bottom:8px;transition:color var(--tr);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.card-summary { font-size:12px;color:var(--text2);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px; }
.card-footer { display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border);margin-top:auto; }
.card-meta { font-family:var(--font-mono);font-size:9px;color:var(--text3);display:flex;align-items:center;gap:8px; }
.card-actions { display:flex;align-items:center;gap:4px; }
.card-action {
 width:28px;height:28px;border-radius:6px;border:1px solid var(--border);
 display:flex;align-items:center;justify-content:center;font-size:12px;
 color:var(--text3);transition:all var(--tr);
}
.card-action:hover { border-color:var(--accent);color:var(--accent); }
.card-action.liked,.card-action.bookmarked { color:#ff9d4f;border-color:rgba(255,157,79,0.45);background:rgba(255,157,79,0.12); }
.card-action.liked svg, .card-action.bookmarked svg { color:#ff9d4f !important; stroke:#ff9d4f !important; }

/* ── BADGES ── */
.severity-badge {
 display:inline-flex;align-items:center;gap:4px;
 padding:2px 8px;border-radius:4px;
 font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.severity-badge .dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; animation:pulse 2s infinite; }
.severity-badge.critical { background:linear-gradient(135deg,rgba(255,45,74,.16),rgba(255,45,74,.08));color:var(--red);border:1px solid rgba(255,45,74,.3); }
.severity-badge.critical .dot { background:var(--red);box-shadow:0 0 6px var(--red); }
.severity-badge.high { background:rgba(255,140,0,.1);color:var(--orange);border:1px solid rgba(255,140,0,.22); }
.severity-badge.high .dot { background:var(--orange); }
.severity-badge.medium { background:rgba(230,194,0,.08);color:var(--yellow);border:1px solid rgba(230,194,0,.2); }
.severity-badge.medium .dot { background:var(--yellow); }
.severity-badge.low { background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border); }
.severity-badge.low .dot { background:var(--accent); }
.cat-badge {
 display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;
 font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.cat-badge.malware { background:rgba(168,85,247,.1);color:var(--purple);border:1px solid rgba(168,85,247,.2); }
.cat-badge.breach { background:rgba(255,51,51,.08);color:var(--red);border:1px solid rgba(255,51,51,.18); }
.cat-badge.nation { background:rgba(0,212,255,.08);color:var(--blue);border:1px solid rgba(0,212,255,.18); }
.cat-badge.vuln { background:rgba(255,140,0,.08);color:var(--orange);border:1px solid rgba(255,140,0,.18); }
.cat-badge.fraud { background:rgba(230,194,0,.08);color:var(--yellow);border:1px solid rgba(230,194,0,.18); }
.cat-badge.general { background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border); }

/* ── CRITICAL ALERT BANNER ── */
.critical-alert {
 margin-bottom:24px;padding:18px 22px 18px 26px;border-radius:var(--radius-lg);
 background:linear-gradient(135deg,rgba(255,45,74,.08) 0%,rgba(255,45,74,.04) 100%),var(--bg-card);
 border:1px solid rgba(255,45,74,.22);
 cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden;
 backdrop-filter:blur(14px);
 box-shadow:var(--shadow);
 color:var(--text);
}
.critical-alert::before {
 content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
 background:var(--red);
}
.critical-alert:hover { border-color:rgba(255,45,74,.4);box-shadow:0 8px 24px rgba(255,45,74,.16);transform:translateY(-1px); }
.critical-alert .alert-title { color:var(--text); }
.critical-alert .alert-summary { color:var(--text2); }
.critical-alert .alert-top span { color:var(--text2) !important; }
.critical-alert .top-stripe { display:none; }
.critical-alert::after { display:none; }
@keyframes stripeShift { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
.alert-top { display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap; }
.alert-title { font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.35;margin-bottom:8px;color:var(--text); }
.alert-summary { font-size:13px;color:var(--text2);line-height:1.65; }
.alert-badge { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:6px;background:rgba(255,45,74,.12);color:var(--red);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;border:1px solid rgba(255,45,74,.3); }
.alert-title { font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.35;margin-bottom:6px; }
.alert-summary { font-size:13px;color:var(--text2);max-width:680px;line-height:1.6; }

/* ── SKELETON ── */
.skel { background:linear-gradient(90deg,var(--border) 25%,rgba(255,255,255,.04) 37%,var(--border) 63%);background-size:800px 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:4px; }

/* ── PAGE SKELETON LOADER ── */
.page-skeleton {
 position: fixed; inset: 0; z-index: 9999;
 background: var(--bg);
 overflow: hidden;
 transition: opacity .45s ease, visibility .45s ease;
}
.page-skeleton.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ps-nav {
 height: 60px; border-bottom: 1px solid var(--border);
 display: flex; align-items: center; gap: 14px; padding: 0 22px;
 background: var(--nav-bg); backdrop-filter: blur(20px);
}
.ps-nav-mark { width: 28px; height: 28px; border-radius: 6px; }
.ps-nav-brand { width: 160px; height: 14px; border-radius: 4px; }
.ps-nav-links { display: flex; gap: 14px; margin-left: 24px; }
.ps-nav-link { width: 56px; height: 10px; border-radius: 4px; }
.ps-nav-spacer { flex: 1; }
.ps-nav-search { width: 220px; height: 32px; border-radius: 100px; }
.ps-nav-pill { width: 60px; height: 22px; border-radius: 100px; }
.ps-nav-circle { width: 36px; height: 36px; border-radius: 50%; }
.ps-ticker { height: 36px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.ps-ticker-label { width: 80px; height: 12px; border-radius: 4px; }
.ps-ticker-line { flex: 1; height: 10px; border-radius: 4px; }
.ps-container { max-width: 1280px; margin: 0 auto; padding: 28px 24px; }
.ps-hero-logo { width: 280px; height: 200px; margin: 0 auto 20px; border-radius: 12px; }
.ps-hero-sub { width: 240px; height: 10px; margin: 0 auto 28px; border-radius: 4px; }
.ps-alert {
 height: 110px; border-radius: 14px; margin-bottom: 20px;
 border: 1px solid var(--border);
 padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.ps-alert-badge { width: 84px; height: 20px; border-radius: 4px; }
.ps-alert-title { width: 70%; height: 18px; border-radius: 4px; }
.ps-alert-sum { width: 50%; height: 12px; border-radius: 4px; }
.ps-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-bottom: 24px; }
.ps-main-card { height: 420px; border-radius: 14px; }
.ps-side { display: flex; flex-direction: column; gap: 14px; }
.ps-side-card { height: 132px; border-radius: 12px; }
.ps-section-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 18px; }
.ps-section-bar { width: 4px; height: 18px; border-radius: 2px; }
.ps-section-title { width: 180px; height: 16px; border-radius: 4px; }
.ps-section-sub { width: 80px; height: 10px; border-radius: 4px; margin-left: auto; }
.ps-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ps-card {
 border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
 display: flex; flex-direction: column;
}
.ps-card-img { height: 160px; border-radius: 0; }
.ps-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.ps-card-tag { width: 70px; height: 18px; border-radius: 4px; }
.ps-card-title { width: 92%; height: 14px; border-radius: 4px; }
.ps-card-title-2 { width: 76%; height: 14px; border-radius: 4px; }
.ps-card-meta { width: 60%; height: 10px; border-radius: 4px; margin-top: 4px; }
@media(max-width:980px) {
 .ps-grid { grid-template-columns: 1fr; }
 .ps-news-grid { grid-template-columns: repeat(2,1fr); }
 .ps-nav-links, .ps-nav-search { display: none; }
}
@media(max-width:640px) {
 .ps-news-grid { grid-template-columns: 1fr; }
 .ps-nav-pill { display: none; }
 .ps-hero-logo { width: 220px; height: 160px; }
}
[data-theme="light"] .skel { background:linear-gradient(90deg,rgba(10,22,40,0.06) 25%,rgba(10,22,40,0.02) 37%,rgba(10,22,40,0.06) 63%);background-size:800px 100%; }

/* ── ARTICLE OVERLAY ── */
.article-overlay {
 position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.85);
 backdrop-filter:blur(14px) saturate(1.2);
 -webkit-backdrop-filter:blur(14px) saturate(1.2);
 display:flex;align-items:stretch;
 opacity:0;pointer-events:none;transition:opacity .35s ease, backdrop-filter .35s ease;
}
.article-overlay.open { opacity:1;pointer-events:auto; }
.article-overlay::before {
 content:''; position:absolute; inset:0;
 background:radial-gradient(ellipse at 50% 0%, rgba(0,255,65,.06), transparent 60%);
 pointer-events:none;
}
[data-theme="light"] .article-overlay { background:rgba(10,22,40,.55); }
[data-theme="light"] .article-overlay::before { background:radial-gradient(ellipse at 50% 0%, rgba(0,145,80,.08), transparent 60%); }

/* Dim matrix + orbs when article open */
body.article-open #matrixCanvas { opacity:.04 !important; }
body.article-open .orb { opacity:.05 !important; }
body.article-open .scanline { opacity:0; }

.article-panel {
 margin:auto;width:100%;max-width:720px;max-height:92vh;
 background:var(--bg-card);border:1px solid var(--accent-border);border-radius:20px;
 overflow-y:auto;animation:panelIn .45s cubic-bezier(.2,.9,.25,1.05);position:relative;
 backdrop-filter:blur(28px) saturate(1.3);
 -webkit-backdrop-filter:blur(28px) saturate(1.3);
 box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px var(--accent-border), 0 0 60px rgba(0,255,65,.08);
}
.reading-bar-wrap { position:sticky;top:0;left:0;right:0;height:3px;background:var(--border);z-index:10; }
.reading-bar { height:100%;width:0;background:var(--accent);transition:width .1s linear; }
.article-panel-header { height:260px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a1628,#0d2040); }
/* Featured-image area: real cover photo on top of a centred logo watermark.
   Watermark shows while the image loads, if it fails, or when no image exists. */
.article-panel-header .article-cover-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2; }
.article-panel-header .article-img-watermark { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1; }
.article-panel-header .article-img-watermark img { width:30%;max-width:180px;opacity:.14;filter:drop-shadow(0 2px 18px rgba(0,0,0,.3)); }
[data-theme="light"] .article-panel-header .article-img-watermark img { content:url('logo-mark-dark.png');opacity:.1; }
.article-panel-header .img-overlay { position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,var(--bg-card));z-index:3; }
.article-close {
 position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
 background:rgba(0,0,0,.5);border:1px solid var(--border);color:var(--text);
 font-size:16px;display:flex;align-items:center;justify-content:center;
 backdrop-filter:blur(10px);transition:all var(--tr); z-index:5;
}
.article-close:hover { border-color:var(--red);color:var(--red); }
.article-body { padding:22px 28px 32px; }
.article-body h1 { font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.3;margin:12px 0 14px; }
.article-meta-row { display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--text3); }
.article-content { font-size:14px;color:var(--text2);line-height:1.75; }
.article-content p { margin-bottom:14px; }
.article-content h3 { font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);margin:20px 0 10px; }
.share-bar { display:flex;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap; }
.share-btn { display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-family:var(--font-mono);font-size:10px;font-weight:600;border:1px solid var(--border);color:var(--text2);transition:all var(--tr); }
.share-btn:hover { border-color:var(--accent);color:var(--accent); }
.share-btn.wa:hover { border-color:#25d366;color:#25d366; }
.share-btn.tw:hover { border-color:#1da1f2;color:#1da1f2; }
.advisory { margin-top:24px;padding:16px;border-radius:10px;background:rgba(255,140,0,.06);border:1px solid rgba(255,140,0,.18);display:flex;gap:12px; }
.advisory-icon { font-size:22px;flex-shrink:0; }
.advisory h4 { font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--orange);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px; }
.advisory p { font-size:11px;color:var(--text2);line-height:1.6; }

/* ── RELATED ARTICLES ── */
.related-grid { display:flex;flex-direction:column;gap:8px;margin-top:24px; }
.related-item { display:flex;gap:10px;padding:10px;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:all var(--tr); }
.related-item:hover { background:var(--accent-bg);border-color:var(--accent-border); }
.related-item-title { font-family:var(--font-display);font-size:12px;font-weight:600;line-height:1.35; }
.related-item-meta { font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:3px; }

/* ── THREAT INTEL DASHBOARD ── */
.intel-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px; }
.intel-stat {
 padding:22px;border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border);
 backdrop-filter:blur(14px);transition:all var(--tr);box-shadow:var(--shadow);
}
.intel-stat:hover { border-color:var(--border2);transform:translateY(-1px); }
.intel-stat-val { font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1;margin-bottom:4px; }
.intel-stat-val.red { color:var(--red); }
.intel-stat-val.orange { color:var(--orange); }
.intel-stat-val.green { color:var(--accent); }
.intel-stat-val.blue { color:var(--blue); }
.intel-stat-label { font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px; }
.intel-stat-delta { font-family:var(--font-mono);font-size:9px;margin-top:4px; }
.intel-stat-delta.up { color:var(--red); }
.intel-stat-delta.down { color:var(--accent); }
.intel-panels { display:grid;grid-template-columns:1fr 360px;gap:16px; }
.intel-panel { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:22px;backdrop-filter:blur(14px);box-shadow:var(--shadow); }
.intel-panel-title { font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between; }
.threat-row { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border); }
.threat-row:last-child { border-bottom:none; }
.threat-rank { font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text4);width:20px;flex-shrink:0; }
.threat-body { flex:1;min-width:0; }
.threat-name { font-family:var(--font-display);font-size:12px;font-weight:700; }
.threat-sub { font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:2px; }
.threat-bar-wrap { width:80px;height:4px;background:var(--border);border-radius:2px;flex-shrink:0; }
.threat-bar { height:100%;border-radius:2px;background:var(--accent); }
.threat-bar.red { background:var(--red); }
.threat-bar.orange { background:var(--orange); }
.cve-list { display:flex;flex-direction:column;gap:8px; }
.cve-item { padding:12px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--border);cursor:pointer;transition:all var(--tr); }
.cve-item:hover { border-color:var(--border2); }
.cve-id { font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);margin-bottom:4px; }
.cve-title { font-family:var(--font-display);font-size:12px;font-weight:600;margin-bottom:5px; }
.cve-meta { display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:9px;color:var(--text3); }
.cvss-tag { padding:1px 7px;border-radius:3px;background:rgba(255,140,0,.1);color:var(--orange);border:1px solid rgba(255,140,0,.2);font-family:var(--font-mono);font-size:9px;font-weight:700; }
.cvss-tag.critical-cvss { background:rgba(255,51,51,.1);color:var(--red);border-color:rgba(255,51,51,.22); }
.india-map-placeholder { height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:8px;gap:8px;margin-top:12px; }
.india-map-placeholder .map-label { font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px; }

/* ── SEARCH PAGE ── */
.search-hero { padding:32px 0 24px;text-align:center; }
.search-hero h2 { font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:8px; }
.search-hero p { color:var(--text2);font-size:13px;margin-bottom:24px; }
.search-box { display:flex;gap:10px;max-width:600px;margin:0 auto 20px; }
.search-box input {
 flex:1;padding:12px 18px;background:var(--bg-card);border:1px solid var(--border);
 border-radius:10px;color:var(--text);font-size:14px;outline:none;
 font-family:var(--font-body);transition:all var(--tr);backdrop-filter:blur(10px);
}
.search-box input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg); }
.search-box button { padding:12px 24px;border-radius:10px;background:var(--accent);color:#000;font-family:var(--font-display);font-size:13px;font-weight:700;transition:all var(--tr); }
.search-box button:hover { box-shadow:0 4px 16px var(--green-glow); }
.search-filters { display:flex;gap:8px;justify-content:center;flex-wrap:wrap; }
.search-results { margin-top:28px; }
.search-result-count { font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-bottom:16px; }

/* ── SPONSOR SLOTS ── */
.sponsor-slot {
 margin: 22px 0;
 padding: 14px 18px;
 border-radius: 12px;
 background: var(--bg-card);
 border: 1px dashed var(--border);
 display: flex; align-items: center; gap: 14px;
 position: relative; overflow: hidden;
 transition: all var(--tr);
 backdrop-filter: blur(6px);
}
.sponsor-slot:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.sponsor-slot::before {
 content:''; position:absolute; inset:0; pointer-events:none;
 background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,255,65,0.025) 14px 15px);
}
.sponsor-tag {
 font-family: var(--font-mono); font-size: 8px; font-weight: 700;
 letter-spacing: 1.5px; text-transform: uppercase;
 padding: 3px 8px; border-radius: 4px;
 background: rgba(255,140,0,.12); color: var(--orange);
 border: 1px solid rgba(255,140,0,.25); flex-shrink: 0;
}
.sponsor-body { flex: 1; min-width: 0; }
.sponsor-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 3px; }
.sponsor-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.sponsor-cta {
 padding: 7px 14px; border-radius: 7px;
 background: var(--accent-bg); color: var(--accent);
 border: 1px solid var(--accent-border);
 font-family: var(--font-mono); font-size: 10px; font-weight: 700;
 letter-spacing: .8px; text-transform: uppercase;
 white-space: nowrap; flex-shrink: 0; cursor: pointer;
 transition: all var(--tr);
}
.sponsor-cta:hover { background: var(--accent); color: #000; }
.sponsor-banner {
 margin: 22px 0; padding: 28px 24px; border-radius: 14px;
 background: linear-gradient(135deg, rgba(0,212,255,.05), rgba(168,85,247,.05));
 border: 1px dashed var(--border2);
 text-align: center; position: relative; overflow: hidden;
}
.sponsor-banner::after {
 content:'YOUR BRAND HERE — 728×120 LEADERBOARD';
 position:absolute; bottom:6px; right:10px;
 font-family: var(--font-mono); font-size: 8px; color: var(--text3); letter-spacing: 1px;
}
.sponsor-banner-tag {
 display:inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
 letter-spacing: 1.5px; color: var(--text3); margin-bottom: 6px; text-transform:uppercase;
}
.sponsor-banner-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text2); margin-bottom: 4px; }
.sponsor-banner-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
[data-theme="light"] .sponsor-slot { background:#ffffff; }
[data-theme="light"] .sponsor-banner { background: linear-gradient(135deg, rgba(0,145,80,.05), rgba(0,140,210,.05)); }
@media(max-width:640px) {
 .sponsor-slot { flex-direction: column; align-items: flex-start; padding: 14px; }
 .sponsor-banner { padding: 20px 14px; }
}

/* ── NEWSLETTER ── */
.newsletter {
 margin-top:32px;padding:40px 32px;border-radius:20px;text-align:center;
 background:linear-gradient(135deg,rgba(0,255,65,.04) 0%,rgba(0,212,255,.04) 100%);
 border:1px solid var(--accent-border);position:relative;overflow:hidden;
}
.newsletter::before { content:none; }
.newsletter h2 { font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:8px; }
.newsletter h2 .accent { color:var(--accent); }
.newsletter p { color:var(--text2);font-size:13px;max-width:440px;margin:0 auto 22px; }
.nl-form { display:flex;gap:10px;max-width:440px;margin:0 auto; }
.nl-form input { flex:1;min-width:0;padding:11px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none;transition:all var(--tr); }
.nl-form input:focus { border-color:var(--accent); }
.nl-form button {
  padding:11px 22px;border-radius:8px;
  background:linear-gradient(135deg,#ff9d4f,#ff7a1a);
  color:#ffffff;font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  border:1px solid rgba(255,157,79,.4);
  transition:all var(--tr);white-space:nowrap;
  box-shadow:0 4px 14px rgba(255,122,26,.25);
}
.nl-form button:hover {
  background:linear-gradient(135deg,#ffae6b,#ff8a30);
  box-shadow:0 6px 20px rgba(255,122,26,.4);
  transform:translateY(-1px);
}
[data-theme="dark"] .nl-form button { color:#ffffff; }
[data-theme="light"] .nl-form button { color:#ffffff; }
.nl-note { margin-top:10px;font-family:var(--font-mono);font-size:9px;color:var(--text3); }

/* ── BOOKMARKS PAGE ── */
.empty-state { text-align:center;padding:60px 20px; }
.empty-icon { font-size:48px;margin-bottom:16px; }
.empty-title { font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:8px; }
.empty-desc { font-size:13px;color:var(--text2);margin-bottom:20px; }
.empty-btn { padding:10px 24px;border-radius:8px;background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;transition:all var(--tr); }
.empty-btn:hover { background:var(--accent);color:#000; }

/* ── SCROLL TO TOP ── */
.scroll-top { position:fixed;bottom:20px;right:20px;z-index:45;width:40px;height:40px;border-radius:50%;background:#ff8c00;color:#1a0e00;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(255,140,0,.45);opacity:0;transform:translateY(20px) scale(.8);transition:all .3s;pointer-events:none; }
[data-theme="light"] .scroll-top { background:#e0700a; color:#fff; box-shadow:0 4px 16px rgba(194,65,12,.32); }
.scroll-top.visible { opacity:1;transform:translateY(0) scale(1);pointer-events:auto; }
.scroll-top:hover { transform:translateY(-3px) scale(1.1); }

/* ── TWEAKS PANEL ── */
.tweaks-panel {
 display:none;position:fixed;bottom:24px;right:24px;z-index:500;
 width:260px;background:var(--bg-card);border:1px solid var(--border);
 border-radius:14px;padding:16px;backdrop-filter:blur(20px);
 box-shadow:0 12px 48px rgba(0,0,0,.4);animation:slideDown .2s ease-out;
}
.tweaks-panel.open { display:block; }
.tweaks-title { font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:6px; }
.tweak-group { margin-bottom:14px; }
.tweak-label { font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px; }
.tweak-options { display:flex;gap:6px;flex-wrap:wrap; }
.tweak-opt { padding:5px 12px;border-radius:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;border:1px solid var(--border);color:var(--text2);transition:all var(--tr); }
.tweak-opt:hover { border-color:var(--accent);color:var(--accent); }
.tweak-opt.active { background:var(--accent-bg);border-color:var(--accent);color:var(--accent); }
.tweak-swatch { width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--tr);flex-shrink:0; }
.tweak-swatch.active { border-color:var(--text);transform:scale(1.15); }
.tweak-partition { height:1px;background:linear-gradient(90deg,transparent,var(--border) 20%,var(--accent-border) 50%,var(--border) 80%,transparent);margin:18px -4px 16px;position:relative; }
.tweak-partition::before { content:'·'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:0 8px; background:var(--bg-card); color:var(--accent); font-family:var(--font-mono); font-size:10px; }
.tweak-lang-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; max-height:230px; overflow-y:auto; padding-right:2px; }
.tweak-lang-grid::-webkit-scrollbar { width:3px; } .tweak-lang-grid::-webkit-scrollbar-thumb { background:var(--accent-border); border-radius:3px; }
.tweak-lang-opt { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 9px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text2); cursor:pointer; transition:all var(--tr); text-align:left; }
.tweak-lang-opt:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.tweak-lang-opt.active { border-color:var(--accent); background:var(--accent-bg); color:var(--accent); box-shadow: 0 0 0 1px var(--accent-border); }
.tweak-lang-opt .tl-native { font-family:var(--font-display); font-size:13px; font-weight:700; line-height:1; }
.tweak-lang-opt .tl-en { font-family:var(--font-mono); font-size:8px; font-weight:600; color:var(--text3); letter-spacing:.6px; text-transform:uppercase; line-height:1; }
.tweak-lang-opt.active .tl-en { color:var(--accent); }

/* Device View frame — wraps the page when not desktop */
body[data-device="laptop"] .main,
body[data-device="tablet"] .main,
body[data-device="mobile"] .main { transition: max-width .35s cubic-bezier(.4,0,.2,1), padding .35s; }
body[data-device="laptop"] .main { max-width: 1280px; margin: 0 auto; }
body[data-device="tablet"] .main { max-width: 820px; margin: 0 auto; padding-left: 14px; padding-right: 14px; }
body[data-device="mobile"] .main { max-width: 430px; margin: 0 auto; padding-left: 10px; padding-right: 10px; }
body[data-device="tablet"] .container,
body[data-device="mobile"] .container { padding-left: 8px; padding-right: 8px; }
body[data-device="tablet"] .hero-grid { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .hero-grid { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .news-grid { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .nav-links { display:flex; gap:2px; margin:0 0 0 2px; }
body[data-device="mobile"] .nav-link {
  padding:6px 10px; font-size:10px; white-space:nowrap; flex-shrink:0;
  background:var(--bg-input); border:1px solid var(--border); border-radius:8px;
  color:var(--text2);
}
body[data-device="mobile"] .nav-link.active,
body[data-device="mobile"] .nav-link:hover { background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent); }
body[data-device="mobile"] .navbar { overflow:visible; flex-wrap:nowrap; gap:6px; padding:6px 10px; }
body[data-device="mobile"] .navbar .nav-links { min-width:0; flex-shrink:1; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
body[data-device="mobile"] .navbar .nav-links::-webkit-scrollbar { display:none; }
body[data-device="mobile"] .navbar > * { flex-shrink:0; }
body[data-device="mobile"] .nav-spacer { display:none; }
body[data-device="mobile"] .nav-brand { font-size:12px; letter-spacing:.2px; }
body[data-device="mobile"] .nav-search { width: 130px; }
body[data-device="mobile"] .nav-search input { padding:7px 10px 7px 28px; font-size:11px; }
body[data-device="mobile"] .nav-bell { width:32px; height:32px; }
body[data-device="mobile"] .nav-menu-btn { width:34px; height:34px; }
body[data-device="mobile"] .theme-toggle { width:32px; height:32px; }
body[data-device="mobile"] .lang-btn { padding:5px 8px; font-size:10px; }
body[data-device="mobile"] .hero-logo svg, body[data-device="mobile"] .hero-title { font-size:18px; }

/* ─────────────────────────────────────────────
   HIDDEN-NAV MODE (used when iframed inside a
   device wrapper that provides its own chrome,
   e.g. Cyber Samachar Phone.html)
   ───────────────────────────────────────────── */
body.hidenav .navbar,
body.hidenav .ticker-wrap,
body.hidenav #scrollTop,
body.hidenav .tweaks-panel,
body.hidenav .sidebar-overlay,
body.hidenav .sidebar { display: none !important; }
/* Exception: when the phone shell asks the iframe to open the menu
   (via window.toggleSidebar()), the sidebar + overlay need to show
   on top of the hidden chrome — override the display:none lock. */
body.hidenav .sidebar.open,
body.hidenav .sidebar-overlay.open { display: block !important; }
body.hidenav .main { padding-top: 12px !important; }

/* ─────────────────────────────────────────────
   STRONGER DEVICE-MODE POLISH
   Activates when ?device=mobile|tablet is passed
   by the wrapper (or via Tweaks panel).
   ───────────────────────────────────────────── */
body[data-device="mobile"] .container { padding-left: 12px; padding-right: 12px; }
body[data-device="mobile"] .hero-logo-sub { font-size: 10px; letter-spacing: 1.4px; }
body[data-device="mobile"] .nl-form { flex-direction: column; }
body[data-device="mobile"] .nl-form button { width: 100%; }
body[data-device="mobile"] .hero-tagline { white-space: nowrap; max-width: 100%; font-size: clamp(12px, 3.4vw, 15px); margin-top: 12px; }
body[data-device="mobile"] .hero-tagline::before,
body[data-device="mobile"] .hero-tagline::after { width: 14px; margin: 0 7px; }
body[data-device="mobile"] .feed-audience-split { max-width: 100%; margin-top: 22px; }
body[data-device="mobile"] .feed-audience-split::before { font-size: 9.5px; letter-spacing: 1.4px; }
body[data-device="mobile"] .critical-alert { padding: 14px 12px 12px; }
body[data-device="mobile"] .alert-title { font-size: 14px; line-height: 1.35; }
body[data-device="mobile"] .alert-summary { font-size: 11px; line-height: 1.45; }
body[data-device="mobile"] .hero-section { padding-top: 14px; padding-bottom: 14px; }
body[data-device="mobile"] .hero-grid { gap: 10px; }
body[data-device="mobile"] .hero-side-card { padding: 10px 12px; }
body[data-device="mobile"] .cat-tabs { gap: 4px; }
body[data-device="mobile"] .cat-tab { padding: 5px 9px; font-size: 10px; }
body[data-device="mobile"] .law-tree-wrap { padding: 18px 12px; min-height: 480px; }
body[data-device="mobile"] .law-tree-toolbar { gap: 6px; }
body[data-device="mobile"] .law-tree-toolbar .law-tree-search { min-width: 0; padding: 6px 10px; }
body[data-device="mobile"] .law-tree-actions button { padding: 6px 9px; font-size: 9px; }
body[data-device="mobile"] .law-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
body[data-device="mobile"] .ltree-detail { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 70vh; transform: translateY(120%); }
body[data-device="mobile"] .ltree-detail.open { transform: translateY(0); }
body[data-device="mobile"] .news-card { padding: 12px; }
body[data-device="mobile"] .news-card .news-title { font-size: 14px; line-height: 1.35; }
body[data-device="mobile"] .archive-stats { grid-template-columns: 1fr 1fr; gap: 8px; }

body[data-device="tablet"] .container { padding-left: 20px; padding-right: 20px; }
body[data-device="tablet"] .law-tree-wrap { padding: 28px 22px; }
body[data-device="tablet"] .ltree-mm { padding: 18px 8px; }
body[data-device="tablet"] .lmm-branch { gap: 60px; }
body[data-device="tablet"] .lmm-acts-col { gap: 36px; }
body[data-device="tablet"] .lmm-sections { min-width: 220px; max-width: 280px; }
.device-frame-rule { position:fixed; pointer-events:none; z-index:45; border:1px dashed var(--accent-border); border-radius:18px; opacity:0; transition: opacity .35s; }
body[data-device="laptop"] .device-frame-rule,
body[data-device="tablet"] .device-frame-rule,
body[data-device="mobile"] .device-frame-rule { opacity:1; }
.device-frame-rule::after { content:attr(data-label); position:absolute; top:-11px; left:18px; padding:1px 8px; background:var(--bg); color:var(--accent); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px; border:1px solid var(--accent-border); border-radius:4px; }
body[data-device="laptop"] .device-frame-rule { top:104px; bottom:14px; left:calc(50% - 644px); right:calc(50% - 644px); }
body[data-device="tablet"]  .device-frame-rule { top:104px; bottom:14px; left:calc(50% - 414px); right:calc(50% - 414px); }
body[data-device="mobile"]  .device-frame-rule { top:104px; bottom:14px; left:calc(50% - 219px); right:calc(50% - 219px); }
@media (max-width: 900px) { .device-frame-rule { display:none; } }

/* Navbar language dropdown */
.lang-dd { position:absolute; top:48px; right:0; min-width:230px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:8px; backdrop-filter:blur(20px); box-shadow:0 12px 40px rgba(0,0,0,.4); display:none; max-height:440px; overflow-y:auto; z-index:120; }
.lang-dd.open { display:block; animation: slideDown .18s ease-out; }
.lang-dd-head { font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--text3); letter-spacing:1.2px; padding:6px 8px 4px; text-transform:uppercase; }
.lang-dd-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:7px; cursor:pointer; transition:all var(--tr); }
.lang-dd-item:hover { background:var(--accent-bg); }
.lang-dd-item.active { background:var(--accent-bg); }
.lang-dd-item .lddi-native { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text); }
.lang-dd-item.active .lddi-native, .lang-dd-item:hover .lddi-native { color:var(--accent); }
.lang-dd-item .lddi-en { font-family:var(--font-mono); font-size:9px; font-weight:600; color:var(--text3); letter-spacing:.8px; }
.lang-dd-item.active .lddi-en { color:var(--accent); }
.lang-dd-sep { height:1px; background:linear-gradient(90deg,transparent,var(--accent-border),transparent); margin:8px 6px; }
.font-dd-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:7px; cursor:pointer; transition:all var(--tr); }
.font-dd-item:hover, .font-dd-item.active { background:var(--accent-bg); }
.font-dd-item .fddi-name { font-family: var(--preview-font, inherit); font-size:13px; font-weight:700; color:var(--text); }
.font-dd-item.active .fddi-name, .font-dd-item:hover .fddi-name { color:var(--accent); }
.font-dd-item .fddi-meta { font-family:var(--font-mono); font-size:9px; font-weight:600; color:var(--text3); letter-spacing:.6px; }
.font-dd-item.active .fddi-meta { color:var(--accent); }
.tweaks-close { position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--bg-input);border:1px solid var(--border);color:var(--text3);font-size:12px;display:flex;align-items:center;justify-content:center;transition:all var(--tr); }
.tweaks-close:hover { color:var(--red);border-color:var(--red); }

/* ── BELL DROPDOWN ── */
.bell-dropdown { display:none;position:absolute;top:calc(100% + 6px);right:0;width:300px;max-height:360px;overflow-y:auto;background:var(--nav-bg);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:60;padding:8px; }
.bell-dropdown.open { display:block;animation:slideDown .2s ease-out; }
.bell-dd-head { display:flex;align-items:center;justify-content:space-between;padding:6px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px; }
.bell-dd-head span { font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px; }
.bell-item { display:flex;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background var(--tr); }
.bell-item:hover { background:var(--accent-bg); }
.bell-item.unread { border-left:2px solid var(--accent); }
.bell-item-icon { font-size:16px;flex-shrink:0;margin-top:2px; }
.bell-item-title { font-family:var(--font-display);font-size:11px;font-weight:600;line-height:1.3; }
.bell-item-time { font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:2px; }

/* ── TM TRADEMARK MARK ── */
.tm-mark {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 0.55em;
 height: 0.55em;
 vertical-align: super;
 line-height: 0;
 margin-left: 3px;
 color: var(--accent);
 position: relative;
 top: -0.2em;
}
.tm-mark svg { width: 100%; height: 100%; display: block; }
.tm-hero {
 position: absolute;
 bottom: 14%;
 right: 6%;
 width: 22px;
 height: 22px;
 margin: 0;
 background: transparent;
 border-radius: 50%;
 z-index: 2;
 color: var(--accent);
 filter: drop-shadow(0 0 6px rgba(0,255,65,.4));
}
[data-theme="light"] .tm-hero { background: transparent; filter: none; }
.hero-logo-wrap {
 display: inline-flex;
 align-items: flex-start;
 gap: 0;
 position: relative;
}
[data-theme="light"] .tm-mark { color: var(--accent); }

/* ── SIDEBAR EXTRA BADGES ── */
.sl-badge.sl-badge-red { background:rgba(255,45,74,.16); color:var(--red); border:1px solid rgba(255,45,74,.35); }
.sl-badge.sl-badge-yellow { background:rgba(230,194,0,.14); color:var(--yellow); border:1px solid rgba(230,194,0,.28); }
.sl-section-new { display:inline-block; margin-left:6px; padding:1px 5px; border-radius:4px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.6px; vertical-align:middle; }

/* ─────────────────────────────────────────────
   ── REPORT CYBERCRIME WIZARD ────────────────
   ───────────────────────────────────────────── */
.report-hero { padding:28px 0 18px; }
.report-hero h2 { font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:.5px; margin-bottom:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.report-hero h2 .rh-tag { padding:4px 10px; border-radius:6px; background:rgba(255,45,74,.12); color:var(--red); border:1px solid rgba(255,45,74,.3); font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; }
.report-hero p { color:var(--text2); font-size:13px; max-width:780px; line-height:1.65; margin-bottom:18px; }
.report-hotline-bar {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:0 0 24px;
}
.report-hotline {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border);
  backdrop-filter:blur(14px); transition:all var(--tr); text-decoration:none; color:inherit; box-shadow:var(--shadow);
}
.report-hotline:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-h); }
.report-hotline.urgent { border-color:rgba(255,45,74,.35); background:linear-gradient(135deg,rgba(255,45,74,.08),var(--bg-card) 70%); }
.report-hotline.urgent:hover { border-color:var(--red); box-shadow:0 12px 36px rgba(255,45,74,.22); }
.rh-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); }
.report-hotline.urgent .rh-icon { background:rgba(255,45,74,.14); border-color:rgba(255,45,74,.35); color:var(--red); }
.rh-icon svg { width:24px; height:24px; }
.rh-body { flex:1; min-width:0; }
.rh-eyebrow { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1.2px; color:var(--text3); text-transform:uppercase; }
.rh-line1 { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:.5px; color:var(--text); }
.report-hotline.urgent .rh-line1 { color:var(--red); font-size:30px; letter-spacing:2px; }
.rh-line2 { font-size:12px; color:var(--text2); margin-top:2px; }
@media(max-width:720px) { .report-hotline-bar { grid-template-columns:1fr; } }

.wizard-shell {
  background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow); overflow:hidden;
  margin-bottom:22px;
}
.wizard-progress {
  display:flex; align-items:center; gap:0; padding:16px 22px; border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,var(--accent-bg),transparent 60%);
  overflow-x:auto; scrollbar-width:none;
}
.wizard-progress::-webkit-scrollbar { display:none; }
.wp-step { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wp-step + .wp-step { padding-left:14px; }
.wp-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text3); flex-shrink:0; transition:all var(--tr); }
.wp-label { font-family:var(--font-display); font-size:11px; font-weight:600; color:var(--text3); letter-spacing:.4px; white-space:nowrap; transition:color var(--tr); }
.wp-step.done .wp-num { background:var(--accent); border-color:var(--accent); color:#000; }
.wp-step.done .wp-label { color:var(--text2); }
.wp-step.current .wp-num { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-border); }
.wp-step.current .wp-label { color:var(--accent); }
.wp-connector { width:30px; height:1.5px; background:var(--border); flex-shrink:0; margin-left:14px; }
.wp-step.done + .wp-step .wp-connector,
.wp-step.done .wp-connector { background:var(--accent); }

.wizard-body { padding:26px 28px; min-height:280px; }
.wizard-step { display:none; }
.wizard-step.active { display:block; animation: fadeUp .35s ease-out both; }
.wizard-step h3 { font-family:var(--font-display); font-size:20px; font-weight:700; margin-bottom:6px; letter-spacing:.3px; }
.wizard-step .ws-sub { font-size:12px; color:var(--text3); margin-bottom:18px; font-family:var(--font-mono); letter-spacing:.3px; }

.wiz-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.wiz-opt {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 14px 14px 16px; border-radius:12px;
  background:var(--bg-input); border:1.5px solid var(--border);
  cursor:pointer; transition:all var(--tr); text-align:left;
}
.wiz-opt:hover { border-color:var(--accent-border); background:var(--accent-bg); }
.wiz-opt.selected { border-color:var(--accent); background:var(--accent-bg); box-shadow:0 0 0 1px var(--accent); }
.wiz-opt-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:1px solid var(--border); flex-shrink:0; color:var(--accent); }
.wiz-opt-icon svg { width:18px; height:18px; }
.wiz-opt-body { flex:1; min-width:0; }
.wiz-opt-title { font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:2px; }
.wiz-opt-desc { font-size:11px; color:var(--text3); font-family:var(--font-mono); line-height:1.45; letter-spacing:.2px; }
.wiz-opt-meta { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.wiz-tag { padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.5px; background:var(--bg-card); color:var(--text2); border:1px solid var(--border); text-transform:uppercase; }
.wiz-tag.urgent { background:rgba(255,45,74,.12); color:var(--red); border-color:rgba(255,45,74,.3); }

.wiz-field { display:block; margin-bottom:14px; }
.wiz-field label { display:block; font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--text3); letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.wiz-field input, .wiz-field textarea, .wiz-field select {
  width:100%; padding:11px 14px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-family:var(--font-body); font-size:13px;
  outline:none; transition:all var(--tr); resize:vertical;
}
.wiz-field input:focus, .wiz-field textarea:focus, .wiz-field select:focus { border-color:var(--accent); background:rgba(255,255,255,0.04); }
[data-theme="light"] .wiz-field input:focus, [data-theme="light"] .wiz-field textarea:focus, [data-theme="light"] .wiz-field select:focus { background:#ffffff; }
.wiz-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:640px) { .wiz-row { grid-template-columns:1fr; } }

.wizard-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-top:1px solid var(--border); background:var(--bg-input);
  flex-wrap:wrap; gap:10px;
}
.wiz-help { font-family:var(--font-mono); font-size:10px; color:var(--text3); }
.wiz-help b { color:var(--accent); }
.wiz-actions { display:flex; gap:8px; }
.wiz-btn {
  padding:10px 22px; border-radius:8px; font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.6px; transition:all var(--tr); display:inline-flex; align-items:center; gap:6px;
}
.wiz-btn.secondary { background:var(--bg-card); border:1px solid var(--border); color:var(--text2); }
.wiz-btn.secondary:hover { border-color:var(--accent); color:var(--accent); }
.wiz-btn.primary { background:var(--accent); color:#000; border:1px solid var(--accent); }
.wiz-btn.primary:hover { box-shadow:0 4px 18px var(--green-glow); transform:translateY(-1px); }
.wiz-btn.primary:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.wiz-btn.urgent { background:linear-gradient(135deg,var(--red),var(--red-dim)); color:#fff; border:1px solid var(--red); }
.wiz-btn.urgent:hover { box-shadow:0 4px 18px var(--red-glow); }

/* Wizard summary / pre-fill card */
.wiz-summary { background:var(--bg-input); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:14px; }
.wiz-summary h4 { font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.wiz-summary h4::before { content:''; width:3px; height:14px; background:var(--accent); border-radius:2px; }
.wiz-summary-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:7px 0; border-bottom:1px dashed var(--border); }
.wiz-summary-row:last-child { border-bottom:0; }
.wiz-summary-row .ws-key { font-family:var(--font-mono); font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; flex-shrink:0; min-width:140px; }
.wiz-summary-row .ws-val { font-size:13px; color:var(--text); text-align:right; flex:1; }

.wiz-law-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-top:6px; }
.wiz-law-chip {
  display:flex; flex-direction:column; gap:3px;
  padding:10px 12px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--accent-border);
}
.wiz-law-chip .wlc-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.wiz-law-chip .wlc-num { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.6px; }
.wiz-law-chip .wlc-act { font-family:var(--font-mono); font-size:8px; padding:1px 6px; border-radius:4px; background:var(--accent-bg); color:var(--accent); letter-spacing:.6px; }
.wiz-law-chip .wlc-title { font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text); line-height:1.4; }
.wiz-law-chip.bns { border-color:rgba(168,85,247,.4); }
.wiz-law-chip.bns .wlc-num { color:var(--purple); }
.wiz-law-chip.bns .wlc-act { color:var(--purple); background:rgba(168,85,247,.14); }
.wiz-law-chip.dpdp { border-color:rgba(0,212,255,.4); }
.wiz-law-chip.dpdp .wlc-num { color:var(--blue); }
.wiz-law-chip.dpdp .wlc-act { color:var(--blue); background:rgba(0,212,255,.12); }

.wiz-success {
  text-align:center; padding:24px 14px;
}
.wiz-success-icon { width:74px; height:74px; border-radius:50%; margin:0 auto 16px; background:var(--accent-bg); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); animation: badgePulse 1.4s ease-out 0s 2; }
.wiz-success-icon svg { width:38px; height:38px; }
.wiz-success h3 { font-size:24px; margin-bottom:6px; }
.wiz-success p { color:var(--text2); font-size:13px; line-height:1.7; max-width:480px; margin:0 auto 18px; }
.wiz-cta-grid { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* What-to-keep checklist */
.checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; margin-top:10px; }
.checklist li {
  list-style:none; padding:10px 14px 10px 36px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border); font-size:12px; color:var(--text2);
  position:relative; line-height:1.5;
}
.checklist li::before { content:''; position:absolute; left:14px; top:14px; width:14px; height:14px; border-radius:3px; background:var(--accent-bg); border:1.5px solid var(--accent); }
.checklist li::after { content:''; position:absolute; left:18px; top:16px; width:6px; height:10px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); }

/* ─────────────────────────────────────────────
   ── FIND YOUR CYBER CELL ────────────────────
   ───────────────────────────────────────────── */
.cell-hero { padding:28px 0 16px; }
.cell-hero h2 { font-family:var(--font-display); font-size:28px; font-weight:700; margin-bottom:8px; letter-spacing:.5px; }
.cell-hero p { color:var(--text2); font-size:13px; max-width:760px; line-height:1.65; margin-bottom:16px; }
.cell-locate {
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg,var(--accent-bg),rgba(0,212,255,.04));
  border:1px solid var(--accent-border); margin-bottom:18px; flex-wrap:wrap;
}
.cell-locate-info { flex:1; min-width:200px; }
.cell-locate-info b { display:block; font-family:var(--font-display); font-size:13px; color:var(--text); margin-bottom:2px; }
.cell-locate-info span { font-family:var(--font-mono); font-size:11px; color:var(--text3); }
.cell-search {
  display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;
}
.cell-search input, .cell-search select {
  padding:11px 16px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-family:var(--font-body); font-size:13px; outline:none;
  transition:all var(--tr);
}
.cell-search input { flex:1; min-width:220px; }
.cell-search input:focus, .cell-search select:focus { border-color:var(--accent); }
.cell-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.cell-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:18px; backdrop-filter:blur(14px); transition:all var(--tr); position:relative;
  overflow:hidden;
}
.cell-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--accent),var(--blue)); }
.cell-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow-h); }
.cell-card.nearest { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border), 0 0 24px var(--green-glow); }
.cell-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.cell-card-loc { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--accent); text-transform:uppercase; margin-bottom:3px; }
.cell-card-title { font-family:var(--font-display); font-size:16px; font-weight:700; line-height:1.3; }
.cell-card-distance { padding:4px 9px; border-radius:6px; background:var(--accent-bg); color:var(--accent); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.6px; white-space:nowrap; }
.cell-card-distance.nearest { background:var(--accent); color:#000; }
.cell-card-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:12px; color:var(--text2); border-bottom:1px dashed var(--border); }
.cell-card-row:last-of-type { border-bottom:0; }
.cell-card-row svg { width:14px; height:14px; color:var(--text3); flex-shrink:0; }
.cell-card-row a { color:var(--accent); }
.cell-card-row.juris { font-family:var(--font-mono); font-size:11px; color:var(--text3); line-height:1.5; }
.cell-card-actions { display:flex; gap:6px; margin-top:12px; }
.cell-act-btn { flex:1; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input); color:var(--text2); font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.4px; transition:all var(--tr); display:flex; align-items:center; justify-content:center; gap:5px; }
.cell-act-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.cell-act-btn svg { width:13px; height:13px; }

/* ─────────────────────────────────────────────
   ── SCAM OF THE WEEK ────────────────────────
   ───────────────────────────────────────────── */
.scam-hero { padding:28px 0 18px; position:relative; }
.scam-hero h2 { font-family:var(--font-display); font-size:30px; font-weight:700; margin-bottom:8px; letter-spacing:.5px; }
.scam-hero h2 .sh-tag { padding:4px 10px; border-radius:6px; background:rgba(230,194,0,.16); color:var(--yellow); border:1px solid rgba(230,194,0,.3); font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; font-weight:700; text-transform:uppercase; margin-right:10px; vertical-align:middle; }
.scam-hero p { color:var(--text2); font-size:13px; max-width:760px; line-height:1.65; }

.scam-card-wrap {
  display:grid; grid-template-columns: 1fr 320px; gap:18px;
  margin-bottom:24px;
}
@media(max-width:920px) { .scam-card-wrap { grid-template-columns:1fr; } }
.scam-card {
  background:var(--bg-card); border:1.5px solid var(--accent-border); border-radius:18px;
  overflow:hidden; backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.scam-card-head {
  padding:18px 22px; background:linear-gradient(135deg, rgba(230,194,0,.10), rgba(255,140,0,.06));
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.scam-card-head .sc-num { width:38px; height:38px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--yellow); letter-spacing:.5px; }
.scam-card-head .sc-meta { flex:1; min-width:0; }
.scam-card-head .sc-eyebrow { font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--text3); letter-spacing:1.4px; text-transform:uppercase; }
.scam-card-head .sc-title { font-family:var(--font-display); font-size:20px; font-weight:700; line-height:1.3; margin-top:2px; }
.scam-card-head .sc-pill { padding:3px 9px; border-radius:5px; background:rgba(255,45,74,.14); color:var(--red); border:1px solid rgba(255,45,74,.3); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }

.scam-strip {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  background:var(--bg-input);
}
@media(max-width:780px) { .scam-strip { grid-template-columns:repeat(2, 1fr); } }
.scam-panel {
  position:relative; padding:18px 18px 16px; border-right:1px dashed var(--border); border-bottom:1px dashed var(--border);
  min-height:200px; display:flex; flex-direction:column; gap:8px;
  background:var(--bg-card);
}
.scam-panel:nth-child(odd) { background:linear-gradient(135deg, var(--bg-card), var(--bg-input)); }
.scam-panel-num {
  position:absolute; top:-1px; left:-1px;
  padding:4px 9px; border-bottom-right-radius:10px;
  font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:1px;
  background:var(--accent); color:#000;
}
.scam-panel.danger .scam-panel-num { background:var(--red); color:#fff; }
.scam-panel.warning .scam-panel-num { background:var(--yellow); color:#000; }
.scam-panel-visual {
  flex:1; min-height:90px; border-radius:8px;
  background-image:
    linear-gradient(135deg,rgba(0,255,65,.04),rgba(0,212,255,.04)),
    repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 14px);
  border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; color:var(--text3); text-align:center; padding:14px; letter-spacing:.4px;
  position:relative; overflow:hidden;
}
.scam-panel.danger .scam-panel-visual { background-image:linear-gradient(135deg,rgba(255,45,74,.06),rgba(255,140,0,.04)), repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 14px); border-color:rgba(255,45,74,.25); }
.scam-bubble {
  position:absolute; padding:6px 10px; border-radius:10px;
  background:var(--bg); border:1.5px solid var(--accent); font-family:var(--font-mono); font-size:10px; color:var(--text); max-width:78%; line-height:1.4; box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.scam-bubble.right { right:8px; top:14px; }
.scam-bubble.left { left:8px; bottom:14px; border-color:var(--red); }
.scam-bubble.danger { border-color:var(--red); }
.scam-emoji-row { display:flex; gap:6px; justify-content:center; align-items:center; font-size:28px; }
.scam-glyph { font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:1px; color:var(--accent); }
.scam-glyph.danger { color:var(--red); }
.scam-glyph.warn { color:var(--yellow); }
.scam-panel-caption { font-family:var(--font-display); font-size:13px; font-weight:700; line-height:1.4; color:var(--text); }
.scam-panel-detail { font-family:var(--font-mono); font-size:10px; color:var(--text2); line-height:1.6; letter-spacing:.2px; }

.scam-side { display:flex; flex-direction:column; gap:14px; }
.scam-side-card { padding:18px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border); }
.scam-side-card h4 { font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--text2); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.scam-side-card h4::before { content:''; width:3px; height:14px; background:var(--accent); border-radius:2px; }
.scam-side-card.danger h4::before { background:var(--red); }
.scam-side-card ul { padding-left:18px; font-size:12px; color:var(--text2); line-height:1.7; }
.scam-side-card ul li { margin-bottom:6px; }
.scam-share-card { padding:16px 18px; border-radius:14px; background:linear-gradient(135deg,var(--accent-bg),rgba(0,212,255,.04)); border:1px solid var(--accent-border); text-align:center; }
.scam-share-card h4 { font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:6px; color:var(--accent); }
.scam-share-card p { font-size:12px; color:var(--text2); margin-bottom:12px; line-height:1.5; }
.scam-share-row { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.scam-share-btn { width:34px; height:34px; border-radius:9px; background:var(--bg-card); border:1px solid var(--border); color:var(--text2); display:flex; align-items:center; justify-content:center; transition:all var(--tr); }
.scam-share-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.scam-share-btn svg { width:16px; height:16px; }

.scam-archive-section { margin-top:30px; }
.scam-archive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.scam-archive-card { padding:16px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border); cursor:pointer; transition:all var(--tr); }
.scam-archive-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow-h); }
.scam-archive-date { font-family:var(--font-mono); font-size:9px; color:var(--text3); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.scam-archive-title { font-family:var(--font-display); font-size:14px; font-weight:700; line-height:1.35; margin-bottom:6px; }
.scam-archive-meta { font-family:var(--font-mono); font-size:10px; color:var(--text3); }

/* ─────────────────────────────────────────────
   ── ABOUT US ────────────────────────────────
   ───────────────────────────────────────────── */
.about-hero { padding:36px 0 24px; text-align:center; }
.about-hero h2 { font-family:var(--font-display); font-size:34px; font-weight:700; margin-bottom:10px; letter-spacing:.5px; }
.about-hero h2 .accent { color:var(--accent); }
.about-hero p.lead { color:var(--text2); font-size:14px; max-width:680px; margin:0 auto 22px; line-height:1.75; }
.about-placeholder {
  margin:18px auto 28px; max-width:780px; padding:28px 26px;
  border-radius:18px; background:var(--bg-card); border:1.5px dashed var(--accent-border);
  text-align:left; backdrop-filter:blur(12px);
}
.about-placeholder h3 { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent); letter-spacing:1.6px; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.about-placeholder h3::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
.about-placeholder p { font-size:13px; color:var(--text2); line-height:1.7; margin-bottom:10px; }
.about-placeholder .ap-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:14px; }
.about-placeholder .ap-slot {
  padding:14px; border-radius:10px; background:var(--bg-input); border:1px dashed var(--border);
  font-family:var(--font-mono); font-size:11px; color:var(--text3); letter-spacing:.4px;
}
.about-placeholder .ap-slot b { color:var(--accent); font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.6px; display:block; margin-bottom:4px; text-transform:uppercase; }
.about-values { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; max-width:980px; margin:0 auto 24px; }
.about-value { padding:18px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border); }

/* ── LEGAL DOC (Terms & Privacy) ── */
.legal-doc {
  max-width:820px; margin:0 auto 40px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:32px 36px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.legal-block { padding:18px 0; border-bottom:1px dashed var(--border); }
.legal-block:first-child { padding-top:0; }
.legal-block:last-child { border-bottom:0; padding-bottom:0; }
.legal-block h3 {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:.4px; color:var(--text); margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.legal-block h3::before {
  content:''; width:3px; height:14px; background:var(--accent); border-radius:2px;
}
.legal-block p { font-size:13.5px; line-height:1.75; color:var(--text2); margin-bottom:8px; }
.legal-block p:last-child { margin-bottom:0; }
.legal-block strong { color:var(--text); font-weight:700; }
.legal-block em { color:var(--text); font-style:italic; }
.legal-block code {
  font-family:var(--font-mono); font-size:11.5px;
  padding:1px 6px; border-radius:5px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--accent);
}
.legal-list { list-style:none; padding:0; margin:8px 0 0; }
.legal-list li {
  font-size:13px; line-height:1.7; color:var(--text2);
  padding:6px 0 6px 22px; position:relative;
}
.legal-list li::before {
  content:''; position:absolute; left:4px; top:14px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
@media(max-width:640px) {
  .legal-doc { padding:22px 18px; border-radius:14px; }
  .legal-block h3 { font-size:15px; }
  .legal-block p, .legal-list li { font-size:12.5px; }
}
.about-value-icon { width:42px; height:42px; border-radius:11px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.about-value-icon svg { width:22px; height:22px; }
.about-value h4 { font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:4px; letter-spacing:.4px; }
.about-value p { font-size:12px; color:var(--text2); line-height:1.6; }


@media(max-width:1280px) { .container{max-width:100%;padding:0 24px;} }
@media(max-width:1024px) {
 .hero-grid{grid-template-columns:1fr;gap:14px;}
 .hero-sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
 .hero-side-card{display:flex;}
 .intel-panels{grid-template-columns:1fr;}
 .intel-grid{grid-template-columns:repeat(2,1fr);}
 .archive-stats{grid-template-columns:repeat(2,1fr);}
 .hero-logo img{width:300px!important;}
 .tm-hero{font-size:12px;bottom:16px;right:4px;width:16px;height:16px;}
}
@media(max-width:820px) {
 .hero-sidebar{grid-template-columns:1fr;}
 .archive-row{grid-template-columns:70px 1fr auto;gap:10px;}
}
@media(max-width:768px) {
 body{font-size:13px;}
 .ticker-wrap{height:26px;top:8px;left:8px;right:8px;}
 .ticker-item{font-size:10px;padding:0 28px;}
 .ticker-label{padding:0 12px;font-size:8px;}
 /* Navbar = clean strip; never scrolls as a whole (dropdowns stay visible, no vertical scroll) */
 .navbar{
   top:40px;left:8px;right:8px;height:auto;min-height:50px;
   padding:6px 10px;gap:6px;flex-wrap:nowrap;border-radius:16px;
   overflow:visible;
 }
 .navbar > *{flex-shrink:0;}
 .nav-menu-btn{width:34px;height:34px;}
 /* Compact brand so nav-links are visible immediately without scrolling */
 .nav-brand{font-size:12px;letter-spacing:.2px;}
 .nav-brand .tm-mark{font-size:8px;width:11px;height:11px;}
 .main{padding-top:148px;}
 .container{padding:0 14px;}
 .nav-search,.nav-live{display:inline-flex;}
 .nav-search{width:130px;flex-shrink:0;}
 .nav-search input{padding:7px 10px 7px 28px;font-size:11px;}
 .nav-live{padding:5px 9px;font-size:8px;}
 .nav-spacer{display:none;}
 /* Nav links: visible immediately, compact, no border separator */
 .nav-links{display:flex;order:0;width:auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:2px;margin:0 0 0 2px;padding:0;border:none;flex-shrink:1;}
 .nav-links::-webkit-scrollbar{display:none;}
 .nav-link{
   white-space:nowrap;padding:6px 10px;font-size:10px;flex-shrink:0;
   background:var(--bg-input);border:1px solid var(--border);border-radius:8px;
   color:var(--text2);
 }
 .nav-link.active,.nav-link:hover{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent);}
 .news-grid{grid-template-columns:1fr;gap:12px;}
 .hero-title{font-size:17px;}
 .hero-img{height:200px;}
 .hero-logo img{width:240px!important;}
 .hero-logo-sub{font-size:10px;}
 .tm-hero{font-size:11px;bottom:14px;right:2px;width:14px;height:14px;}
 .intel-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
 .intel-stat{padding:14px;}
 .intel-stat-val{font-size:24px;}
 .article-panel{max-height:96vh;border-radius:14px;margin:6px;}
 .article-body{padding:16px 18px 24px;}
 .article-body h1{font-size:18px;}
 .article-panel-header{height:180px;}
 .newsletter{padding:24px 16px;}
 .nl-form{flex-direction:column;}
 .alert-title{font-size:16px;}
 .alert-summary{font-size:12px;}
 .critical-alert{padding:16px 18px;}
 .archive-stats{grid-template-columns:repeat(2,1fr);}
 .archive-row{grid-template-columns:60px 1fr;gap:10px;padding:12px 8px;}
 .archive-sev{grid-column:1/-1;justify-self:start;}
 .search-hero h2{font-size:22px;}
 .search-box{flex-direction:column;}
 .share-btn{width:32px;height:32px;}
 .tweaks-panel{right:12px;left:12px;bottom:12px;width:auto;}
 .scroll-top{bottom:14px;right:14px;width:36px;height:36px;}
 .nav-bell{width:32px;height:32px;}
 .lang-btn{padding:5px 8px;font-size:10px;}
 .theme-toggle{width:32px;height:32px;}
 /* Pages: ensure full-width readable layouts on mobile */
 .legal-doc{padding:20px 16px;border-radius:12px;}
 .about-hero{padding:24px 0 16px;}
 .about-hero h2{font-size:26px;}
 .law-tree-wrap{overflow-x:auto;padding:14px 12px;}
 .ltree{font-size:11px;}
 .ltree-children{padding-left:24px;}
}
@media(max-width:480px) {
 .intel-grid{grid-template-columns:1fr;}
 .archive-stats{grid-template-columns:1fr 1fr;gap:8px;}
 .cat-tabs{gap:4px;}
 .cat-tab{padding:6px 10px;font-size:10px;}
 .hero-title{font-size:16px;}
 .hero-img{height:170px;}
 .hero-logo img{width:200px!important;}
 .tm-hero{font-size:10px;bottom:12px;right:2px;width:12px;height:12px;}
 .hero-body{padding:14px 16px 16px;}
 .card-img-wrap{height:140px;}
 .card-body{padding:12px 14px 10px;}
 .card-title{font-size:13px;}
 .card-summary{font-size:11px;}
 .nav-brand{font-size:12px;}
 .navbar{padding:8px 10px;gap:5px;border-radius:16px;}
 .lang-btn{padding:5px 8px;font-size:10px;}
 .nav-link{padding:5px 10px;font-size:10px;}
 .alert-title{font-size:15px;}
 .section-title{font-size:11px;}
 .main{padding-top:140px;}
}
@media(max-width:380px) {
 .nav-brand .accent + .tm-mark{font-size:0.45em;}
 .hero-logo img{width:180px!important;}
 .navbar{height:50px;}
 .nav-menu-btn{width:32px;height:32px;}
 .nav-bell{width:32px;height:32px;}
 .theme-toggle{width:32px;height:32px;}
}

/* ── LOGO THEME HANDLING ── */
.logo-img-nav { filter: none; }
[data-theme="light"] .logo-img-nav { filter: invert(1) brightness(0.4) contrast(1.2); }
.logo-img-hero { filter: drop-shadow(0 0 24px rgba(0,255,65,.18)); }
[data-theme="light"] .logo-img-hero { filter: invert(1) brightness(0.25) contrast(1.3); }

/* ── BREAKING TAB CORNERS ── */
.hero-breaking, .alert-badge { border-radius: 8px !important; }
.ticker-wrap { border-radius: 12px !important; }
.ticker-label { border-radius: 12px 0 0 12px !important; }

/* ── GLOBAL ROUNDED CORNERS — remove sharp/pointed corners everywhere ── */
/* Bump big-card surfaces to a softer, more visible radius */
.critical-alert, .hero-side-card, .hero-main, .news-card,
.intel-stat, .intel-panel, .legal-doc, .article-panel,
.about-value, .scam-card, .scam-archive-card, .cell-card,
.wizard-shell, .archive-row, .audience-card { border-radius: 20px !important; }
.audience-card { border-radius: 999px !important; }
.critical-alert { border-radius: 22px !important; }
.hero-main, .news-card { border-radius: 22px !important; }
.intel-stat { border-radius: 24px !important; }
/* Inner image strips should follow the outer card radius (top corners only) */
.hero-img { border-radius: 22px 22px 0 0 !important; }
.card-img-wrap { border-radius: 22px 22px 0 0 !important; }
.article-panel-header { border-radius: 20px 20px 0 0 !important; }
.hero-side-img { border-radius: 20px 0 0 20px !important; }
.nav-link, .card-action, .severity-badge, .cat-badge,
.alert-badge, .skel, .cvss-tag, .sl-section-new, .sl-badge,
.wiz-tag, .wiz-law-chip .wlc-act, .ps-card-tag, .ps-card-title,
.ps-card-title-2, .ps-card-meta, .ps-alert-badge, .ps-alert-title,
.ps-alert-sum, .ps-nav-brand, .ps-nav-link, .ps-ticker-label,
.ps-ticker-line, .ps-hero-sub, .ps-section-title, .ps-section-sub,
.tweak-opt, .tweak-lang-opt, .cell-card-distance, .scam-card-head .sc-pill,
.scam-hero h2 .sh-tag, .report-hero h2 .rh-tag,
.archive-sev, .archive-row, .archive-stat,
.share-btn, .empty-btn, .nl-form button, .nl-form input,
.search-box input, .search-box button, .wiz-field input,
.wiz-field textarea, .wiz-field select { border-radius: 10px !important; }

.tweak-opt, .nav-link, .card-action, .severity-badge, .cat-badge,
.alert-badge, .cvss-tag, .sl-section-new, .sl-badge,
.wiz-tag, .ps-card-tag { border-radius: 8px !important; }

/* small chip/dot rounding stays as-is — only square corners get fixed */
.section-title::before, .wiz-summary h4::before { border-radius:4px !important; }

/* ── LIGHT MODE OPTIMIZATION ── */
[data-theme="light"] {
  --bg: #f0f3f7;
  --bg-card: rgba(255,255,255,0.92);
}
[data-theme="light"] body { background: linear-gradient(180deg,#f0f3f7 0%,#e8ecf2 100%); }
[data-theme="light"] .navbar { background: rgba(255,255,255,0.82); border-color: rgba(10,22,40,0.1); }
[data-theme="light"] .news-card, [data-theme="light"] .hero-main, [data-theme="light"] .hero-side-card { background: #ffffff; border-color: rgba(10,22,40,0.08); box-shadow: 0 2px 12px rgba(10,22,40,0.06); }
[data-theme="light"] .news-card:hover, [data-theme="light"] .hero-main:hover { box-shadow: 0 8px 28px rgba(10,22,40,0.1); border-color: rgba(0,145,80,0.3); }
[data-theme="light"] .intel-stat, [data-theme="light"] .intel-panel { background: #ffffff; box-shadow: 0 2px 12px rgba(10,22,40,0.05); }
[data-theme="light"] .critical-alert { background: linear-gradient(135deg,rgba(220,37,56,.06),rgba(220,37,56,.02)),#ffffff; border-color: rgba(220,37,56,.22); }
[data-theme="light"] .hero-logo-text { background: linear-gradient(180deg,#0a1628 0%,#3a4a5a 60%,#6a7888 100%); -webkit-background-clip:text;background-clip:text; }
[data-theme="light"] #matrixCanvas { opacity: 0.22; }
[data-theme="light"] .orb { opacity: 0.12; }
[data-theme="light"] .ticker-wrap { background: linear-gradient(90deg,rgba(220,37,56,.18),rgba(220,37,56,.10)); border-color: rgba(220,37,56,.45); box-shadow: 0 4px 14px rgba(220,37,56,.16); }
[data-theme="light"] .ticker-item { color: var(--red); }
[data-theme="light"] .ticker-label { background: linear-gradient(135deg,var(--red),var(--red-dim)); color: #fff; }
[data-theme="light"] .article-panel { background: #ffffff; }
[data-theme="light"] .sidebar { background: #ffffff; }
[data-theme="light"] .alert-badge { background: rgba(220,37,56,.12); color: var(--red); border-color: rgba(220,37,56,.35); }

/* ── SHARE ICONS ── */
.share-bar { display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0;margin:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.share-label { font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-right:4px; }
.share-btn { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all var(--tr); }
.share-btn:hover { transform:translateY(-2px);border-color:var(--accent); }
.share-btn.wa:hover { background:#25D366;color:#fff;border-color:#25D366; }
.share-btn.tw:hover { background:#1DA1F2;color:#fff;border-color:#1DA1F2; }
.share-btn.li:hover { background:#0A66C2;color:#fff;border-color:#0A66C2; }
.share-btn.fb:hover { background:#1877F2;color:#fff;border-color:#1877F2; }
.share-btn.tg:hover { background:#0088cc;color:#fff;border-color:#0088cc; }
.share-btn.copy:hover { background:var(--accent);color:#000;border-color:var(--accent); }
.share-btn.native:hover { background:var(--accent);color:#000;border-color:var(--accent); }

/* ── ARCHIVE PAGE ── */
.archive-hero { padding:28px 0 20px; }
.archive-hero h2 { font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:6px; }
.archive-hero p { color:var(--text2);font-size:13px;margin-bottom:18px; }
.archive-timeline { display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px; }
.archive-timeline::-webkit-scrollbar { height:4px; }
.archive-year { padding:8px 14px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);font-family:var(--font-mono);font-size:11px;font-weight:700;cursor:pointer;transition:all var(--tr);flex-shrink:0; }
.archive-year.active { background:var(--accent-bg);border-color:var(--accent);color:var(--accent); }
.archive-month-block { margin-bottom:32px; }
.archive-month-head { display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border); }
.archive-month-title { font-family:var(--font-display);font-size:18px;font-weight:700; }
.archive-month-count { font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-left:auto; }
.archive-row { display:grid;grid-template-columns:90px 1fr auto;gap:16px;padding:14px 16px;border-radius:12px;cursor:pointer;transition:all var(--tr);align-items:center;background:var(--bg-card);border:1px solid var(--border);backdrop-filter:blur(10px);box-shadow:var(--shadow);margin-bottom:10px;position:relative;overflow:hidden; }
.archive-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.55; transition:all var(--tr); }
.archive-row[data-sev="critical"]::before { background:var(--red); opacity:.85; }
.archive-row[data-sev="high"]::before { background:var(--orange); opacity:.75; }
.archive-row[data-sev="medium"]::before { background:var(--yellow); opacity:.7; }
.archive-row:hover { border-color:var(--accent-border); background:var(--bg-card-h); box-shadow:var(--shadow-h); transform:translateX(2px); }
.archive-row:hover::before { opacity:1; width:4px; }
.archive-date { font-family:var(--font-mono);font-size:11px;color:var(--text3);font-weight:700; }
.archive-title-row { font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.4; }
.archive-meta { font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:4px; }
.archive-sev { flex-shrink:0; }
.archive-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px; }
.archive-stat { padding:16px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border); }
.archive-stat-num { font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--accent); }
.archive-stat-label { font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-top:2px; }

/* ── CYBER LAW PAGE ── */
.law-hero { padding:28px 0 20px; }
.law-hero h2 { font-family:var(--font-display);font-size:30px;font-weight:700;margin-bottom:6px;letter-spacing:-.5px; }
.law-hero p { color:var(--text2);font-size:13px;margin-bottom:20px;max-width:720px;line-height:1.6; }
.law-tabs { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px; }
.law-tab { padding:9px 16px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all var(--tr);display:flex;align-items:center;gap:8px; }
.law-tab:hover { color:var(--accent);border-color:var(--accent-border); }
.law-tab.active { background:var(--accent-bg);border-color:var(--accent);color:var(--accent); }
.law-tab .lt-count { font-family:var(--font-mono);font-size:9px;padding:1px 6px;border-radius:6px;background:var(--accent-border);color:var(--accent);font-weight:700; }
.law-act { margin-bottom:28px; padding:22px 24px; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border); backdrop-filter:blur(14px); box-shadow:var(--shadow); }
.law-act-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap; }
.law-act-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px; }
.law-act-badge { font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border); }
.law-act-badge.bns { background:rgba(168,85,247,.1);color:var(--purple);border-color:rgba(168,85,247,.25); }
.law-act-badge.ipc { background:rgba(255,138,76,.1);color:var(--orange);border-color:rgba(255,138,76,.25); }
.law-act-badge.it { background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border); }
.law-act-badge.dpdp { background:rgba(0,179,255,.1);color:var(--blue);border-color:rgba(0,179,255,.25); }
.law-act-badge.other { background:rgba(255,45,74,.08);color:var(--red);border-color:rgba(255,45,74,.22); }
.law-act-year { font-family:var(--font-mono);font-size:10px;color:var(--text3);font-weight:700; }
.law-act-title { font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.3;margin-bottom:6px; }
.law-act-sub { font-size:13px;color:var(--text2);line-height:1.6; }
.law-section-list { display:flex;flex-direction:column;gap:10px; }
.law-section-item { padding:14px 16px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);transition:all var(--tr); }
.law-section-item:hover { border-color:var(--accent-border);background:var(--accent-bg); }
.law-section-head { display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap; }
.law-section-num { font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-bg);padding:2px 8px;border-radius:5px;border:1px solid var(--accent-border);flex-shrink:0; }
.law-section-title { font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.4; }
.law-section-desc { font-size:12.5px;color:var(--text2);line-height:1.6; }
.law-section-pen { display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--font-mono);font-size:10px;color:var(--red);font-weight:700;background:rgba(255,45,74,.08);padding:3px 8px;border-radius:5px;border:1px solid rgba(255,45,74,.18); }
.law-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px; }
.law-stat { padding:18px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow); }
.law-stat-num { font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--accent); }
.law-stat-label { font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-top:4px; }
.law-disclaimer { margin-top:32px;padding:16px 20px;border-radius:10px;background:var(--bg-input);border:1px dashed var(--border);font-size:11.5px;color:var(--text3);line-height:1.6; }
.law-disclaimer strong { color:var(--text2); }
@media(max-width:820px) { .law-stats{grid-template-columns:repeat(2,1fr);} .law-act-title{font-size:18px;} }

/* ── CYBER LAW — OSINT-STYLE TREE ── */
.law-view-toggle { display:inline-flex;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:3px;margin-bottom:16px;gap:2px; }
.law-view-toggle button { padding:7px 14px;border-radius:6px;background:transparent;border:none;font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;letter-spacing:.4px;text-transform:uppercase;transition:all var(--tr); }
.law-view-toggle button.active { background:var(--accent-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-border); }
.law-tree-toolbar { display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px; }
.law-tree-search { flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 12px; }
.law-tree-search input { flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-mono);font-size:12px; }
.law-tree-search input::placeholder { color:var(--text3); }
.law-tree-search-icon { color:var(--text3);font-family:var(--font-mono);font-size:14px; }
.law-tree-actions { display:flex;gap:6px; }
.law-tree-actions button { padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:10px;color:var(--text2);cursor:pointer;letter-spacing:.6px;text-transform:uppercase;transition:all var(--tr); }
.law-tree-actions button:hover { color:var(--accent);border-color:var(--accent-border); }

.law-tree-wrap {
  position:relative;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-bg) 0%, transparent 55%),
    var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 28px;
  overflow:auto;
  min-height:560px;
  box-shadow:var(--shadow);
}
[data-theme="dark"] .law-tree-wrap { background-color:#070b13; }
[data-theme="light"] .law-tree-wrap { background-color:#fbfcfd; }

.ltree { display:flex;align-items:flex-start;font-family:var(--font-mono);min-width:max-content; }
.ltree-col { display:flex;flex-direction:column;align-items:flex-start; }
.ltree-row { display:flex;align-items:flex-start;position:relative; }

.ltree-node {
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border-radius:7px;
  background:var(--bg-input);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--tr);
  position:relative;
  z-index:2;
}
.ltree-node:hover { background:var(--accent-bg);border-color:var(--accent);color:var(--accent);transform:translateX(2px); }
.ltree-node .lt-toggle { font-family:var(--font-mono);color:var(--text3);font-size:10px;width:10px;display:inline-block;text-align:center; }
.ltree-node.expanded .lt-toggle { color:var(--accent); }
.ltree-node .lt-count { font-family:var(--font-mono);font-size:9px;background:rgba(255,255,255,.05);padding:1px 6px;border-radius:4px;color:var(--text3);font-weight:700; }
.ltree-node.expanded .lt-count { background:var(--accent-border);color:var(--accent); }
.ltree-node.dim { opacity:.25; }
.ltree-node.match { box-shadow:0 0 0 2px var(--yellow); }

/* root */
.ltree-node.root {
  background:var(--accent);
  color:#000;border-color:var(--accent);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  padding:12px 18px;
  box-shadow:0 0 0 4px var(--accent-bg), 0 8px 28px var(--green-glow);
}
[data-theme="light"] .ltree-node.root { color:#fff; }
.ltree-node.root:hover { transform:none;color:#000; }
[data-theme="light"] .ltree-node.root:hover { color:#fff; }

/* statute */
.ltree-node.act { font-family:var(--font-display);font-size:12px;letter-spacing:.3px;padding:9px 14px; }
.ltree-node.act.it { border-color:rgba(0,255,65,.35);color:var(--green); }
.ltree-node.act.bns { border-color:rgba(168,85,247,.4);color:var(--purple); }
.ltree-node.act.ipc { border-color:rgba(255,138,76,.4);color:var(--orange); }
.ltree-node.act.dpdp { border-color:rgba(0,179,255,.4);color:var(--blue); }
.ltree-node.act.other { border-color:rgba(255,45,74,.35);color:var(--red); }
.ltree-node.act.expanded { background:var(--accent-bg); }

/* section leaf */
.ltree-node.section { font-size:10.5px;padding:7px 12px;font-weight:500;color:var(--text2); }
.ltree-node.section .sec-num { font-weight:700;color:var(--accent);background:var(--accent-bg);padding:1px 6px;border-radius:4px;font-size:10px;border:1px solid var(--accent-border); }
.ltree-node.section.severe .sec-num { color:var(--red);background:rgba(255,45,74,.08);border-color:rgba(255,45,74,.2); }
.ltree-node.section:hover { color:var(--text); }
.ltree-node.section.active { background:var(--accent-bg);color:var(--accent);border-color:var(--accent); }

/* connector – from a node to its children */
.ltree-children { padding-left:48px;display:flex;flex-direction:column;gap:6px;position:relative; }
.ltree-children::before {
  content:'';position:absolute;left:24px;top:14px;bottom:18px;width:1px;
  background:linear-gradient(var(--accent-border), var(--border));
}
.ltree-children > .ltree-branch::before {
  content:'';position:absolute;left:-24px;top:18px;width:24px;height:1px;
  background:var(--accent-border);
}
.ltree-children > .ltree-branch:last-child::after {
  content:'';position:absolute;left:-24px;top:18px;bottom:0;width:1px;
  background:var(--bg-card);
}
.ltree-branch { position:relative;display:flex;align-items:flex-start;padding:6px 0; }

/* legend */
.ltree-legend { display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;background:var(--bg-input);border-radius:8px;border:1px solid var(--border);font-family:var(--font-mono);font-size:10px; }
.ltree-legend-item { display:flex;align-items:center;gap:6px;color:var(--text3); }
.ltree-legend-dot { width:10px;height:10px;border-radius:3px;border:1px solid currentColor; }

/* detail side-panel */
.ltree-detail {
  position:fixed;top:60px;right:14px;bottom:50px;width:420px;max-width:calc(100vw - 28px);
  background:var(--bg2);border:1px solid var(--accent-border);border-radius:var(--radius-lg);
  padding:0;z-index:90;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--border);
  transform:translateX(440px);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  display:flex;flex-direction:column;overflow:hidden;
  backdrop-filter:blur(20px);
}
.ltree-detail.open { transform:translateX(0);opacity:1;pointer-events:auto; }
.ltree-detail-head { padding:18px 22px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, var(--accent-bg), transparent); }
.ltree-detail-pill { display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);margin-bottom:10px; }
.ltree-detail-num { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);margin-bottom:4px; }
.ltree-detail-title { font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3; }
.ltree-detail-close { position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--tr); }
.ltree-detail-close:hover { color:var(--red);border-color:var(--red); }
.ltree-detail-body { padding:20px 22px;overflow-y:auto;flex:1; }
.ltree-detail-section { margin-bottom:18px; }
.ltree-detail-section h5 { font-family:var(--font-mono);font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:8px; }
.ltree-detail-section p { font-size:13px;line-height:1.65;color:var(--text); }
.ltree-detail-pen { padding:12px 14px;border-radius:8px;background:rgba(255,45,74,.06);border:1px solid rgba(255,45,74,.2);color:var(--red);font-family:var(--font-mono);font-size:12px;font-weight:600;line-height:1.5; }
.ltree-detail-pen.proc { background:rgba(0,179,255,.06);border-color:rgba(0,179,255,.2);color:var(--blue); }
.ltree-detail-act { padding:12px 14px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border);font-size:12px;line-height:1.5;color:var(--text2); }
.ltree-detail-act b { color:var(--text);font-family:var(--font-display); }

@media(max-width:780px) {
  .ltree-detail { top:50px;right:8px;left:8px;bottom:40px;width:auto;transform:translateY(120%); }
  .ltree-detail.open { transform:translateY(0); }
  .ltree-children { padding-left:32px; }
  .ltree-children::before { left:14px; }
  .ltree-children > .ltree-branch::before { left:-18px;width:18px; }
}

/* ── MIND MAP LAYOUT — root on LEFT, acts column in middle, sections column on right ── */
.ltree-mm {
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
  min-height:560px;
  padding:24px 12px;
  min-width:max-content;
}
.lmm-svg {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.lmm-svg path {
  fill:none;
  stroke:var(--accent-border);
  stroke-width:1.6;
  transition: stroke .3s, stroke-width .3s, opacity .3s;
}
.lmm-svg path.active { stroke:var(--accent); stroke-width:2.2; }
.lmm-svg path.sec-link { stroke-width:1.2; opacity:.7; }
.lmm-svg path.sec-link.it   { stroke: var(--green); }
.lmm-svg path.sec-link.bns  { stroke: var(--purple); }
.lmm-svg path.sec-link.ipc  { stroke: var(--orange); }
.lmm-svg path.sec-link.dpdp { stroke: var(--blue); }
.lmm-svg path.sec-link.other { stroke: var(--red); }
.lmm-svg path.dim { opacity:.18; }

/* Dark-mode mind-map connectors — boost visibility so the curved paths
   between root → acts → tertiary sections stand out against the dark
   background after a secondary node is clicked. */
[data-theme="dark"] .lmm-svg path {
  stroke: rgba(255,255,255,.42) !important;
  stroke-width: 1.5;
}
[data-theme="dark"] .lmm-svg path.active {
  stroke: #ff8a4c !important;
  stroke-width: 2.6;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(255,138,76,.45));
}
[data-theme="dark"] .lmm-svg path.sec-link {
  stroke-width: 1.8 !important;
  opacity: .92 !important;
}
[data-theme="dark"] .lmm-svg path.sec-link.it   { stroke: #6bff8a !important; }
[data-theme="dark"] .lmm-svg path.sec-link.bns  { stroke: #d4a4ff !important; }
[data-theme="dark"] .lmm-svg path.sec-link.ipc  { stroke: #ffb066 !important; }
[data-theme="dark"] .lmm-svg path.sec-link.dpdp { stroke: #6bd4ff !important; }
[data-theme="dark"] .lmm-svg path.sec-link.other { stroke: #ff8aa0 !important; }
[data-theme="dark"] .lmm-svg path.dim { opacity:.42 !important; }

/* root column — pinned to the left, vertically centered */
.lmm-root-col {
  display:flex; align-items:center; justify-content:flex-start;
  padding:0 28px 0 12px;
  flex-shrink:0;
  position:relative;
  z-index:3;
}
.lmm-root {
  display:inline-flex; align-items:center; gap:10px;
  background:#ff8a4c;
  color:#1a0a04;
  border:2px solid #ff8a4c;
  border-radius:14px;
  padding:20px 24px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    0 0 0 6px rgba(255,138,76,.12),
    0 12px 40px rgba(255,138,76,.35);
  transition: transform .25s, box-shadow .25s;
  white-space:nowrap;
  position:relative;
}
/* Dark-mode root: orange POP. High-contrast pill that never disappears against
   the dark page background — orange fill, dark-brown text, white outline, dual
   ring/halo of black + orange glow. */
[data-theme="dark"] .lmm-root {
  background: #ff8a4c !important;
  color: #1a0a04 !important;
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.55),
    0 0 0 6px rgba(255,138,76,.22),
    0 0 26px rgba(255,138,76,.55),
    0 14px 44px rgba(0,0,0,.6) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="dark"] .lmm-root .lmm-root-chevron,
[data-theme="dark"] .lmm-root .lmm-root-sub { color: #1a0a04 !important; }
[data-theme="dark"] .lmm-root-chevron { background: rgba(255,255,255,.24) !important; }
/* Light-mode root: same orange POP, white lettering for crisp contrast. */
[data-theme="light"] .lmm-root {
  background: #ff8a4c !important;
  color: #ffffff !important;
  border-color: #d96a2c !important;
  box-shadow:
    0 0 0 6px rgba(255,138,76,.18),
    0 12px 40px rgba(255,138,76,.32) !important;
}
[data-theme="light"] .lmm-root .lmm-root-chevron,
[data-theme="light"] .lmm-root .lmm-root-sub { color: #ffffff !important; }
[data-theme="light"] .lmm-root-chevron { background: rgba(255,255,255,.22) !important; }
.lmm-root:hover { transform:scale(1.04); }
.lmm-root::before {
  content:''; position:absolute; inset:-12px;
  border-radius:20px;
  border:1px dashed rgba(255,138,76,.55);
  opacity:.55;
  animation: lmmPulse 4s ease-in-out infinite;
}
@keyframes lmmPulse { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.06);opacity:.2;} }
.lmm-root-chevron {
  font-family:var(--font-mono); font-size:13px;
  width:20px; height:20px;
  background:rgba(0,0,0,.15); border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .3s;
}
.lmm-root.expanded .lmm-root-chevron { transform:rotate(90deg); }
.lmm-root-sub {
  display:block;
  font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:1.2px; opacity:.7;
  margin-top:3px; text-transform:none;
}

/* acts column — single vertical stack of all 5 acts */
.lmm-acts-col {
  display:flex; flex-direction:column;
  gap:48px;
  padding:14px 0;
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.lmm-acts-col.collapsed { opacity:0; pointer-events:none; transform:translateX(-12px); transition: all .35s; }
.lmm-acts-col.expanded  { opacity:1; transform:translateX(0); transition: all .4s; }

.lmm-branch {
  display:flex; align-items:flex-start; gap:80px;
  position:relative;
}

.lmm-act {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px;
  border-radius:11px;
  background:var(--bg-input);
  border:1.5px solid var(--border);
  font-family:var(--font-display);
  font-size:14px; font-weight:700;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition: all var(--tr);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  position:relative;
  z-index:3;
  min-width:180px;
}
.lmm-act:hover { transform:translateX(3px); box-shadow:0 8px 22px rgba(0,0,0,.2); }
.lmm-act.it   { border-color:rgba(0,255,65,.45);   color:var(--green); }
.lmm-act.bns  { border-color:rgba(168,85,247,.45); color:var(--purple); }
.lmm-act.ipc  { border-color:rgba(255,138,76,.45); color:var(--orange); }
.lmm-act.dpdp { border-color:rgba(0,179,255,.45);  color:var(--blue); }
.lmm-act.other { border-color:rgba(255,45,74,.45); color:var(--red); }
.lmm-act.expanded { border-width:2px; padding:12px 17px; }
.lmm-act.it.expanded   { background:rgba(0,255,65,.08);  border-color:var(--green); }
.lmm-act.bns.expanded  { background:rgba(168,85,247,.10);border-color:var(--purple); }
.lmm-act.ipc.expanded  { background:rgba(255,138,76,.10);border-color:var(--orange); }
.lmm-act.dpdp.expanded { background:rgba(0,179,255,.10); border-color:var(--blue); }
.lmm-act.other.expanded { background:rgba(255,45,74,.10); border-color:var(--red); }
.lmm-act-count {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:5px;
  background:rgba(127,127,127,.18);
  color:inherit;
  margin-left:auto;
}
.lmm-act-chevron {
  font-family:var(--font-mono); font-size:12px;
  width:14px; height:14px;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:.7;
  transition: transform .25s;
}
.lmm-act.expanded .lmm-act-chevron { transform:rotate(90deg); opacity:1; }

/* sections column — vertical stack of tertiary nodes, generous spacing */
.lmm-sections {
  display:flex; flex-direction:column; gap:14px;
  padding:4px 4px;
  min-width:260px; max-width:340px;
  position:relative;
  z-index:2;
}
.lmm-sec {
  display:flex; align-items:center; gap:9px;
  padding:9px 13px;
  border-radius:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px;
  color:var(--text2);
  cursor:pointer;
  transition: all var(--tr);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lmm-sec:hover { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); transform:translateX(4px); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.lmm-sec.severe .lmm-sec-num { color:var(--red); background:rgba(255,45,74,.10); border-color:rgba(255,45,74,.25); }
.lmm-sec.active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.lmm-sec-num {
  font-weight:700; font-size:10.5px;
  background:var(--accent-bg);
  color:var(--accent);
  border:1px solid var(--accent-border);
  padding:2px 7px; border-radius:5px;
  flex-shrink:0;
  min-width:34px; text-align:center;
}
.lmm-sec-title { overflow:hidden; text-overflow:ellipsis; flex:1; font-size:11px; }
.lmm-sec.dim { opacity:.25; }
.lmm-sec.match { box-shadow:0 0 0 2px var(--yellow); }

.lmm-empty {
  font-family:var(--font-mono); font-size:12px;
  color:var(--text3);
  text-align:center;
  padding:60px 30px;
  letter-spacing:.6px;
  z-index:3; position:relative;
}
.lmm-empty kbd {
  display:inline-block; padding:3px 10px; margin:0 3px;
  background:var(--accent-bg); color:var(--accent);
  border:1px solid var(--accent-border); border-radius:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
}

@media(max-width:820px) {
  .ltree-mm { flex-direction:column; gap:24px; padding:10px 6px; min-width:0; }
  .lmm-root-col { padding:0; justify-content:center; }
  .lmm-acts-col { gap:18px; padding:0 6px; }
  .lmm-branch { flex-direction:column; gap:10px; align-items:stretch; }
  .lmm-act { min-width:0; }
  .lmm-sections { max-width:none; min-width:0; padding-left:18px; gap:8px; }
  .lmm-svg { display:none; }
}



/* ═══════════════════════════════════════════════════════════════════
   MASTER-DESKTOP LAYOUT (FLUID)
   The master file is the desktop feature surface, but it must also
   adapt to the display size — it should never force horizontal scroll
   or hide controls behind the edge of the viewport. Approach:

   1. NO `min-width` forcing a 1440 px floor.
   2. Navbar stays one horizontal strip; if the viewport is genuinely
      narrower than its content it becomes a swipeable scroll-strip
      (every child has `flex-shrink: 0`) so no control is hidden.
   3. Grids use `auto-fit / minmax(…)` so the dashboard goes from
      3-col → 2-col → 1-col gracefully as the viewport shrinks,
      instead of cliff-jumping to mobile-style stacking.
   4. Container padding uses `clamp()` so spacing stays comfortable
      at every width.

   Device wrappers (Phone / Tab / PC) set `body[data-device="…"]`
   and continue to use their own device-tuned rules below — this
   lock only fires when the master file is opened standalone.
   ═══════════════════════════════════════════════════════════════════ */
body:not([data-device]) {
  min-width: 0 !important;
  overflow-x: hidden !important;
}
body:not([data-device]) .container {
  max-width: 1320px !important;
  padding: 0 clamp(16px, 3vw, 40px) !important;
  margin: 0 auto !important;
}
/* Navbar: clean horizontal strip, never wrap, never scrolls as a whole.
   Overflow stays visible so the bell + language dropdowns aren't clipped and
   no vertical scrollbar can appear. If the nav-links don't fit, only that
   group scrolls horizontally (hidden scrollbar) — the bar itself stays put. */
body:not([data-device]) .navbar {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  height: 62px !important;
  padding: 0 18px !important;
  overflow: visible !important;
}
body:not([data-device]) .navbar .nav-links {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
body:not([data-device]) .navbar > * {
  flex-shrink: 0 !important;
}
body:not([data-device]) .nav-spacer { flex: 1 1 8px !important; min-width: 8px !important; }
body:not([data-device]) .nav-links { display: flex !important; gap: 2px !important; margin-left: 6px !important; }
body:not([data-device]) .nav-link { padding: 6px 12px !important; font-size: 10px !important; }
body:not([data-device]) .nav-search { width: clamp(160px, 18vw, 240px) !important; flex-shrink: 0 !important; }
body:not([data-device]) .nav-search input { padding: 9px 14px 9px 34px !important; font-size: 12px !important; }
body:not([data-device]) .nav-live { display: inline-flex !important; }
body:not([data-device]) .nav-bell { width: 38px !important; height: 38px !important; }
body:not([data-device]) .nav-menu-btn { width: 40px !important; height: 40px !important; }
body:not([data-device]) .theme-toggle { width: 38px !important; height: 38px !important; }
body:not([data-device]) .lang-btn { padding: 7px 12px !important; font-size: 11px !important; }
body:not([data-device]) .nav-brand { font-size: clamp(13px, 1.4vw, 17px) !important; letter-spacing: .35px !important; }
body:not([data-device]) .hamburger { display: none !important; }
body:not([data-device]) .main { padding-top: 140px !important; }
/* Hero: side-by-side wide; stacks only on real-narrow viewports */
body:not([data-device]) .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
  gap: clamp(12px, 1.6vw, 22px) !important;
}
@media (max-width: 880px) {
  body:not([data-device]) .hero-grid { grid-template-columns: 1fr !important; }
}
body:not([data-device]) .hero-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  grid-template-columns: none !important;
}
@media (max-width: 880px) {
  body:not([data-device]) .hero-sidebar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}
/* Fluid card grids — desktop feel, degrades gracefully */
body:not([data-device]) .news-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
body:not([data-device]) .intel-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
body:not([data-device]) .archive-stats {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
body:not([data-device]) .law-stats {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
body:not([data-device]) .scam-card-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
}
body:not([data-device]) .scam-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
body:not([data-device]) .wiz-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
body:not([data-device]) .report-hotline-bar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}
body:not([data-device]) .feed-audience-split { max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; }
body:not([data-device]) .ticker-wrap { top: 12px !important; left: 16px !important; right: 16px !important; height: 32px !important; }
/* Mind-map: keep the radial layout on wide screens; gracefully stack on narrow */
body:not([data-device]) .ltree-mm {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  padding: clamp(14px, 2vw, 32px) !important;
}
@media (max-width: 820px) {
  body:not([data-device]) .ltree-mm { flex-direction: column !important; gap: 24px !important; }
}
body:not([data-device]) .ltree-detail {
  top: auto !important; right: 28px !important; left: auto !important; bottom: 28px !important;
  width: min(380px, calc(100vw - 56px)) !important; transform: none !important;
}
@media (max-width: 780px) {
  body:not([data-device]) .ltree-detail {
    right: 12px !important; left: 12px !important; bottom: 12px !important;
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET NAVBAR — horizontal-scroll fix
   At 834 px viewport the navbar's flex children (5 nav-links + search
   + live time + bell + lang + theme) overflow and clip. Keep the
   navbar a clean non-scrolling strip (so the bell + language dropdowns
   aren't clipped and no vertical scroll appears); only the nav-links
   group scrolls horizontally (hidden scrollbar) when space is tight.
   ═══════════════════════════════════════════════════════════════════ */
body[data-device="tablet"] .navbar {
  overflow: visible !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 0 14px !important;
}
body[data-device="tablet"] .navbar > * {
  flex-shrink: 0 !important;
}
/* Drop the spring spacer so the controls form one continuous strip
   instead of being shoved off-screen by it. */
body[data-device="tablet"] .nav-spacer { display: none !important; }
/* Keep the brand compact but readable. */
body[data-device="tablet"] .nav-brand { font-size: 13px !important; letter-spacing: .25px !important; }
body[data-device="tablet"] .nav-brand .tm-mark { font-size: 9px !important; width: 12px !important; height: 12px !important; }
/* Inline nav-links — visible immediately; this group is the only part that
   scrolls horizontally (hidden scrollbar) if the bar is cramped. */
body[data-device="tablet"] .navbar .nav-links { display: flex !important; gap: 2px !important; margin-left: 4px !important; min-width: 0 !important; flex-shrink: 1 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; }
body[data-device="tablet"] .navbar .nav-links::-webkit-scrollbar { display: none !important; }
body[data-device="tablet"] .nav-link {
  padding: 6px 10px !important;
  font-size: 10px !important;
  white-space: nowrap;
}
/* Search: keep visible but narrower so time/notif/lang/theme stay onscreen. */
body[data-device="tablet"] .nav-search { width: 170px !important; flex-shrink: 0 !important; }
body[data-device="tablet"] .nav-search input {
  padding: 8px 12px 8px 30px !important;
  font-size: 11px !important;
}
/* Time/live pill — never clipped. */
body[data-device="tablet"] .nav-live {
  display: inline-flex !important;
  padding: 6px 10px !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  white-space: nowrap;
}
/* Notification bell, language pill, theme toggle — uniform tablet sizing. */
body[data-device="tablet"] .nav-bell {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important;
}
body[data-device="tablet"] .lang-btn {
  padding: 6px 11px !important;
  font-size: 10px !important;
  white-space: nowrap;
}
body[data-device="tablet"] .theme-toggle {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important;
}
body[data-device="tablet"] .nav-menu-btn { width: 38px !important; height: 38px !important; }
/* Make sure the bell-dropdown stays correctly anchored even when the
   navbar itself is scrolled horizontally. */
body[data-device="tablet"] .nav-bell + .bell-dropdown,
body[data-device="tablet"] .bell-dropdown { right: 8px !important; left: auto !important; }

/* ═══════════════════════════════════════════════════════════════════
   COMING-SOON PAGE
   Rendered when the user clicks a feature whose UI/backend isn't ready
   yet (e.g. CVE Database, Newsletter). Use `showComingSoon('Feature
   Name')` to route here with a customised heading.
   ═══════════════════════════════════════════════════════════════════ */
.soon-card {
  max-width: 640px;
  margin: 48px auto 64px;
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.soon-card::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, var(--accent-bg), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(255,140,0,.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.soon-card > * { position: relative; z-index: 1; }
.soon-glyph {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.soon-glyph svg { width: 44px; height: 44px; }
.soon-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.soon-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--text);
  margin-bottom: 12px;
  text-wrap: balance;
}
.soon-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text2);
  max-width: 460px;
  margin: 0 auto 22px;
  text-wrap: pretty;
}
.soon-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px; justify-content: center;
  margin-bottom: 28px;
}
.soon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--text3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
}
.soon-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}
.soon-actions {
  display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center;
}
.soon-cta {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: .4px;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
  transition: all var(--tr);
}
.soon-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.soon-cta.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .soon-cta.primary { color: #051408; }
.soon-cta.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff;
}
[data-theme="dark"] .soon-cta.primary:hover { color: #051408; }

/* ========================================================================
   3 · Unified app  —  #pf-styles (profile page)
   ======================================================================== */

/* ── HERO HEADER ── */
.pf-hero { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--bg-card); box-shadow:var(--shadow); margin-bottom:18px; animation:panelIn .5s ease-out both; }
.pf-cover { position:relative; height:150px; overflow:hidden; background:linear-gradient(120deg,#06281c 0%,#08321f 35%,#041e2e 100%); }
[data-theme="light"] .pf-cover { background:linear-gradient(120deg,#06281c 0%,#0a3a26 40%,#072437 100%); }
.pf-cover-grid { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(0,255,65,.08) 0,rgba(0,255,65,.08) 1px,transparent 1px,transparent 34px),repeating-linear-gradient(90deg,rgba(0,255,65,.08) 0,rgba(0,255,65,.08) 1px,transparent 1px,transparent 34px); mask-image:linear-gradient(180deg,#000,transparent 92%); }
.pf-cover-scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(0,255,65,.55),transparent); animation:scanline 6s linear infinite; }
.pf-cover-wm { position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:200px; opacity:.10; filter:grayscale(.2); pointer-events:none; }
.pf-cover-tag { position:absolute; top:14px; left:16px; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; background:rgba(0,0,0,.35); border:1px solid rgba(0,255,65,.3); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#7dffa8; backdrop-filter:blur(8px); }
.pf-cover-tag .dot { width:6px; height:6px; border-radius:50%; background:#00ff41; box-shadow:0 0 8px rgba(0,255,65,.7); animation:pulse 2s infinite; }
.pf-hero-body { padding:0 26px 22px; display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap; }
.pf-avatar-wrap { margin-top:-46px; flex-shrink:0; position:relative; }
.pf-avatar { width:104px; height:104px; border-radius:24px; background:linear-gradient(135deg,#0d2a1e,#08203a); border:3px solid var(--bg-card); box-shadow:0 0 0 2px var(--accent-border),0 8px 28px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--accent); letter-spacing:1px; overflow:hidden; }
.pf-avatar-status { position:absolute; bottom:6px; right:6px; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg-card); box-shadow:0 0 10px var(--green-glow); }
.pf-id { flex:1; min-width:240px; padding-top:14px; }
.pf-id-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.pf-name { font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.3px; }
.pf-utype { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:100px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent); font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.pf-prof { color:var(--text2); font-size:13px; margin-bottom:12px; }
.pf-prof strong { color:var(--text); font-weight:600; }
.pf-verifs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-verif { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:8px; background:var(--bg-input); border:1px solid var(--border); font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.4px; color:var(--text2); }
.pf-verif.ok { color:#e0218a; border-color:rgba(224,33,138,.4); background:rgba(224,33,138,.1); }
.pf-verif svg { width:11px; height:11px; }
.pf-hero-side { display:flex; flex-direction:column; align-items:flex-end; gap:12px; padding-top:14px; }
.pf-hero-meta { display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.pf-hm { text-align:right; }
.pf-hm-k { font-family:var(--font-mono); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin-bottom:2px; }
.pf-hm-v { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text); }
.pf-hm-v.accent { color:var(--accent); }
.pf-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pf-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; background:var(--bg-input); border:1px solid var(--border); color:var(--text2); font-family:var(--font-display); font-size:12px; font-weight:600; transition:all 0.2s cubic-bezier(.4,0,.2,1); white-space:nowrap; }
.pf-btn svg { width:13px; height:13px; }
.pf-btn:hover { color:var(--text); border-color:var(--accent-border); background:var(--accent-bg); transform:translateY(-1px); }
.pf-btn.primary { background:linear-gradient(135deg,#ff8c00,#ff6a00); color:#fff; border-color:transparent; }
[data-theme="dark"] .pf-btn.primary { color:#fff; }
.pf-btn.primary:hover { box-shadow:0 6px 20px rgba(255,140,0,.45); color:#fff; }
[data-theme="dark"] .pf-btn.primary:hover { color:#fff; }
.pf-btn.danger { color:var(--red); }
.pf-btn.danger:hover { border-color:var(--red); background:rgba(255,45,74,.08); color:var(--red); }

/* ── INNER TAB NAV ── */
.pf-tabs-wrap { position:sticky; top:60px; z-index:30; margin-bottom:18px; }
.pf-tabs { display:flex; gap:6px; overflow-x:auto; padding:8px; background:var(--nav-bg); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); scrollbar-width:none; }
.pf-tabs::-webkit-scrollbar { display:none; }
.pf-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; white-space:nowrap; font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text3); border:1px solid transparent; transition:all 0.2s cubic-bezier(.4,0,.2,1); flex-shrink:0; }
.pf-tab svg { width:14px; height:14px; }
.pf-tab:hover { color:var(--text2); background:rgba(127,127,127,.06); }
.pf-tab.active { color:var(--accent); background:var(--accent-bg); border-color:var(--accent-border); }
.pf-tab .pf-tab-badge { font-family:var(--font-mono); font-size:9px; padding:0 6px; border-radius:9px; background:var(--bg-input); color:var(--text3); }
.pf-tab.active .pf-tab-badge { background:var(--accent-border); color:var(--accent); }

/* ── LAYOUT ── */
.pf-layout { display:grid; grid-template-columns:minmax(0,1fr) 318px; gap:18px; align-items:start; }
.pf-rail { position:sticky; top:124px; display:flex; flex-direction:column; gap:14px; }
.pf-pane { display:none; flex-direction:column; gap:16px; animation:fadeUp .4s ease-out both; }
.pf-simple { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.pf-stats.pf-stats-3 { grid-template-columns:repeat(3,1fr); }
.pf-tabs.pf-tabs-simple { justify-content:center; }
.pf-tabs.pf-tabs-simple .pf-tab { padding:10px 18px; font-size:13px; }
.pf-pane.active { display:flex; }

/* ── CARDS ── */
.pf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.pf-card-pad { padding:18px 20px; }
.pf-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); }
.pf-card-title { font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--text); display:flex; align-items:center; gap:9px; }
.pf-card-title::before { content:''; width:3px; height:15px; background:var(--accent); border-radius:2px; }
.pf-card-title .sub { font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.5px; text-transform:none; color:var(--text3); margin-left:4px; }
.pf-card-wm { position:absolute; right:-6px; bottom:-10px; width:90px; opacity:.05; pointer-events:none; }
.pf-link-btn { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.5px; color:var(--accent); display:inline-flex; align-items:center; gap:5px; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-link-btn:hover { gap:8px; }

/* ── INFO GRID (key/value) ── */
.pf-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border-radius:10px; overflow:hidden; }
.pf-info { background:var(--bg-card); padding:13px 15px; }
.pf-info-k { font-family:var(--font-mono); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.pf-info-v { font-size:13.5px; font-weight:500; color:var(--text); word-break:break-word; }

/* ── STAT GRID ── */
.pf-stats { display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
.pf-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:15px; position:relative; overflow:hidden; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-stat:hover { border-color:var(--accent-border); transform:translateY(-2px); box-shadow:var(--shadow-h); }
.pf-stat-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); color:var(--accent); margin-bottom:10px; }
.pf-stat-ico svg { width:16px; height:16px; }
.pf-stat-num { font-family:var(--font-display); font-size:26px; font-weight:700; line-height:1; letter-spacing:.5px; }
.pf-stat-lbl { font-family:var(--font-mono); font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); margin-top:6px; }
.pf-stat-delta { position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--accent); }
.pf-stat.r .pf-stat-ico{ background:rgba(255,45,74,.1); color:var(--red);} .pf-stat.b .pf-stat-ico{ background:rgba(0,212,255,.1); color:var(--blue);} .pf-stat.p .pf-stat-ico{ background:rgba(168,85,247,.1); color:var(--purple);} .pf-stat.o .pf-stat-ico{ background:rgba(255,140,0,.12); color:var(--orange);}

/* ── INTEREST BARS ── */
.pf-bars { display:flex; flex-direction:column; gap:13px; }
.pf-bar-row { display:flex; flex-direction:column; gap:6px; }
.pf-bar-top { display:flex; align-items:center; justify-content:space-between; }
.pf-bar-name { font-family:var(--font-display); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px; }
.pf-bar-name .dot { width:7px; height:7px; border-radius:2px; }
.pf-bar-pct { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text2); }
.pf-bar-track { height:7px; border-radius:100px; background:var(--bg-input); overflow:hidden; }
.pf-bar-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--green-dim),var(--accent)); width:0; transition:width 1s cubic-bezier(.4,0,.2,1); box-shadow:0 0 10px var(--green-glow); }

/* ── CHIPS (multi-select) ── */
.pf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pf-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:100px; background:var(--bg-input); border:1px solid var(--border); font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text2); transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-chip:hover { border-color:var(--accent-border); color:var(--text); }
.pf-chip.on { background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent); }
.pf-chip.on::before { content:'✓'; font-size:10px; }
.pf-dd { padding:9px 12px; border-radius:10px; background:var(--bg-input); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:13px; outline:none; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-dd:focus { border-color:var(--accent); }
.pf-field-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pf-field { display:flex; flex-direction:column; gap:6px; }
.pf-field label { font-family:var(--font-mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); }

/* ── TOGGLE SWITCH ── */
.pf-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.pf-toggle-row:last-child { border-bottom:none; }
.pf-tog-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pf-tog-name { font-size:13px; font-weight:500; color:var(--text); }
.pf-tog-desc { font-family:var(--font-mono); font-size:9.5px; color:var(--text3); }
.pf-switch { width:42px; height:23px; border-radius:100px; background:var(--bg-input); border:1px solid var(--border); position:relative; transition:all 0.2s cubic-bezier(.4,0,.2,1); flex-shrink:0; }
.pf-switch::after { content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--text3); transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-switch.on { background:linear-gradient(135deg,#ff8c00,#ff6a00); border-color:#ff8c00; }
.pf-switch.on::after { left:21px; background:#fff; box-shadow:0 0 8px rgba(255,140,0,.55); }

/* ── ARTICLE LIST / SAVED ── */
.pf-arts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pf-art { display:flex; gap:12px; padding:11px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); transition:all 0.2s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.pf-art:hover { border-color:var(--accent-border); background:var(--bg-card-h); transform:translateY(-2px); box-shadow:var(--shadow); }
.pf-art-thumb { width:70px; height:70px; border-radius:9px; flex-shrink:0; position:relative; overflow:hidden; background:linear-gradient(135deg,#0a1628,#0d2040); display:flex; align-items:center; justify-content:center; }
[data-theme="light"] .pf-art-thumb { background:linear-gradient(135deg,#e8ecf2,#eef2f6); }
.pf-art-thumb .pf-thumb-wm { width:54%; opacity:.16; }
[data-theme="light"] .pf-thumb-wm { content:url('logo-mark-dark.png'); opacity:.12; }
.pf-art-thumb .pf-thumb-cat { position:absolute; bottom:4px; left:4px; font-family:var(--font-mono); font-size:7.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.5); color:#fff; }
.pf-art-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.pf-art-title { font-family:var(--font-display); font-size:12.5px; font-weight:700; line-height:1.34; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; transition:color 0.2s cubic-bezier(.4,0,.2,1); }
.pf-art:hover .pf-art-title { color:var(--accent); }
.pf-art-meta { font-family:var(--font-mono); font-size:9px; color:var(--text3); display:flex; align-items:center; gap:8px; margin-top:auto; }
.pf-art-prog { margin-top:7px; }
.pf-art-prog-track { height:4px; border-radius:100px; background:var(--bg-card); overflow:hidden; }
.pf-art-prog-fill { height:100%; border-radius:100px; background:var(--accent); box-shadow:0 0 6px var(--green-glow); }
.pf-art-prog-lbl { font-family:var(--font-mono); font-size:8.5px; color:var(--text3); margin-top:3px; }

/* ── SESSIONS TABLE ── */
.pf-table { width:100%; border-collapse:collapse; }
.pf-table th { font-family:var(--font-mono); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-weight:700; }
.pf-table td { padding:11px 10px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text2); vertical-align:middle; }
.pf-table tr:last-child td { border-bottom:none; }
.pf-table .dev-name { color:var(--text); font-weight:600; display:flex; align-items:center; gap:8px; }
.pf-table .dev-ico { width:26px; height:26px; border-radius:7px; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pf-table .dev-ico svg { width:14px; height:14px; }
.pf-this { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); padding:1px 6px; border-radius:5px; background:var(--accent-bg); border:1px solid var(--accent-border); }
.pf-end { font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--red); transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-end:hover { text-decoration:underline; }

/* ── DEVICE CARDS ── */
.pf-dev-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.pf-dev { padding:16px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); text-align:center; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-dev.cur { border-color:var(--accent-border); background:var(--accent-bg); }
.pf-dev-ico { width:46px; height:46px; margin:0 auto 10px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.pf-dev-ico svg { width:24px; height:24px; }
.pf-dev-name { font-family:var(--font-display); font-size:13px; font-weight:700; }
.pf-dev-sub { font-family:var(--font-mono); font-size:9px; color:var(--text3); margin-top:3px; }

/* ── ACHIEVEMENTS ── */
.pf-badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; }
.pf-badge2 { padding:16px 12px; border-radius:14px; background:var(--bg-input); border:1px solid var(--border); text-align:center; transition:all 0.2s cubic-bezier(.4,0,.2,1); position:relative; }
.pf-badge2.unlocked { border-color:var(--accent-border); background:var(--accent-bg); }
.pf-badge2.unlocked:hover { transform:translateY(-3px); box-shadow:var(--shadow-h); }
.pf-badge2.locked { opacity:.5; filter:grayscale(.6); }
.pf-badge-ring { width:52px; height:52px; margin:0 auto 9px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:2px solid var(--accent-border); color:var(--accent); }
.pf-badge2.locked .pf-badge-ring { border-color:var(--border); color:var(--text3); border-style:dashed; }
.pf-badge-ring svg { width:24px; height:24px; }
.pf-badge-name { font-family:var(--font-display); font-size:11px; font-weight:700; line-height:1.3; }
.pf-badge-sub { font-family:var(--font-mono); font-size:8px; color:var(--text3); margin-top:4px; letter-spacing:.4px; }
.pf-badge-lock { position:absolute; top:8px; right:8px; color:var(--text3); }
.pf-badge-lock svg { width:11px; height:11px; }

/* ── RAIL WIDGETS ── */
.pf-rail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.pf-rail-title { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text3); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.pf-rail-title::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--green-glow); }
.pf-streak { text-align:center; padding:6px 0 4px; }
.pf-streak-num { font-family:var(--font-display); font-size:44px; font-weight:700; line-height:1; color:var(--accent); }
.pf-streak-lbl { font-family:var(--font-mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin-top:5px; }
.pf-streak-dots { display:flex; justify-content:center; gap:5px; margin-top:14px; }
.pf-sd { width:13px; height:13px; border-radius:4px; background:var(--bg-input); border:1px solid var(--border); }
.pf-sd.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 7px var(--green-glow); }
.pf-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border-radius:10px; overflow:hidden; }
.pf-mini { background:var(--bg-card); padding:12px; }
.pf-mini-num { font-family:var(--font-display); font-size:19px; font-weight:700; }
.pf-mini-lbl { font-family:var(--font-mono); font-size:8px; letter-spacing:.6px; text-transform:uppercase; color:var(--text3); margin-top:3px; }
.pf-threat { display:flex; align-items:center; gap:12px; }
.pf-threat-ring { width:54px; height:54px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--red); background:conic-gradient(var(--red) 0 75%,var(--bg-input) 75% 100%); position:relative; }
.pf-threat-ring::after { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--bg-card); }
.pf-threat-ring span { position:relative; z-index:1; }
.pf-threat-txt .l1 { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--red); }
.pf-threat-txt .l2 { font-family:var(--font-mono); font-size:9px; color:var(--text3); margin-top:2px; }
.pf-rail-bars .pf-bar-row { margin-bottom:11px; }
.pf-rail-bars .pf-bar-name { font-size:11px; }

/* ── COMPLETION RING (overview) ── */
.pf-overview-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.pf-ring-card { display:flex; align-items:center; gap:16px; }
.pf-ring { width:84px; height:84px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; }
.pf-ring::after { content:''; position:absolute; inset:8px; border-radius:50%; background:var(--bg-card); }
.pf-ring-val { position:relative; z-index:1; font-family:var(--font-display); font-size:21px; font-weight:700; }
.pf-ring-txt .l1 { font-family:var(--font-display); font-size:14px; font-weight:700; }
.pf-ring-txt .l2 { font-family:var(--font-mono); font-size:9.5px; color:var(--text3); margin-top:4px; line-height:1.5; }

/* ── PLACEHOLDER / STUB ── */
.pf-stub { text-align:center; padding:40px 24px; }
.pf-stub-ico { width:56px; height:56px; margin:0 auto 16px; border-radius:16px; background:var(--accent-bg); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.pf-stub-ico svg { width:26px; height:26px; }
.pf-stub-title { font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:7px; }
.pf-stub-desc { font-size:12.5px; color:var(--text2); max-width:380px; margin:0 auto 16px; line-height:1.6; }
.pf-stub-wm { width:60px; opacity:.06; margin:18px auto 0; }
.pf-newsletter-list { display:flex; flex-direction:column; }
.pf-carousel { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.pf-carousel::-webkit-scrollbar { display:none; }
.pf-rec { width:230px; flex-shrink:0; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); overflow:hidden; transition:all 0.2s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.pf-rec:hover { border-color:var(--accent-border); transform:translateY(-3px); box-shadow:var(--shadow); }
.pf-rec-thumb { height:96px; background:linear-gradient(135deg,#0a1628,#0d2040); display:flex; align-items:center; justify-content:center; position:relative; }
[data-theme="light"] .pf-rec-thumb { background:linear-gradient(135deg,#e8ecf2,#eef2f6); }
.pf-rec-thumb .pf-thumb-wm { width:42%; opacity:.15; }
.pf-rec-score { position:absolute; top:8px; right:8px; font-family:var(--font-mono); font-size:8.5px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--accent); color:#04140b; }
.pf-rec-body { padding:12px; }
.pf-rec-title { font-family:var(--font-display); font-size:12.5px; font-weight:700; line-height:1.34; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:7px; }
.pf-rec-meta { font-family:var(--font-mono); font-size:8.5px; color:var(--text3); display:flex; gap:8px; }

/* ── EDIT MODAL ── */
.pf-modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(2,6,12,.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; }
.pf-modal-overlay.open { display:flex; animation:fadeUp .25s ease-out; }
.pf-modal { width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:var(--bg-card); border:1px solid var(--border2); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:panelIn .4s ease-out; }
.pf-modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-card); z-index:2; }
.pf-modal-head h3 { font-family:var(--font-display); font-size:16px; font-weight:700; }
.pf-modal-head .sub { font-family:var(--font-mono); font-size:9px; letter-spacing:.6px; color:var(--text3); margin-top:3px; }
.pf-modal-close { width:30px; height:30px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border); color:var(--text3); font-size:15px; display:flex; align-items:center; justify-content:center; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.pf-modal-close:hover { color:var(--red); border-color:var(--red); }
.pf-modal-body { padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.pf-modal-body input, .pf-modal-body select { padding:10px 12px; border-radius:10px; background:var(--bg-input); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:13px; outline:none; transition:all 0.2s cubic-bezier(.4,0,.2,1); width:100%; }
.pf-modal-body input:focus, .pf-modal-body select:focus { border-color:var(--accent); }
.pf-modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--bg-card); }

/* ── SETUP WIZARD OVERLAY ── */
.wz-overlay { position:fixed; inset:0; z-index:240; background:rgba(2,6,12,.82); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.wz-overlay.open { display:flex; animation:fadeUp .3s ease-out; }
.wz { width:100%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border2); border-radius:20px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.55); animation:panelIn .45s ease-out; }
.wz-head { padding:20px 26px 16px; border-bottom:1px solid var(--border); position:relative; }
.wz-eyebrow { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.wz-head h2 { font-family:var(--font-display); font-size:21px; font-weight:700; }
.wz-head h2 .accent { color:var(--accent); }
.wz-close { position:absolute; top:18px; right:20px; width:30px; height:30px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border); color:var(--text3); font-size:15px; display:flex; align-items:center; justify-content:center; transition:all 0.2s cubic-bezier(.4,0,.2,1); }
.wz-close:hover { color:var(--red); border-color:var(--red); }
.wz-steps { display:flex; gap:6px; margin-top:16px; }
.wz-step-dot { flex:1; height:4px; border-radius:100px; background:var(--bg-input); overflow:hidden; }
.wz-step-dot .fill { display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease; box-shadow:0 0 8px var(--green-glow); }
.wz-step-dot.done .fill { width:100%; }
.wz-step-dot.cur .fill { width:100%; }
.wz-body { padding:24px 26px; overflow-y:auto; flex:1; }
.wz-stepnum { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text3); margin-bottom:8px; }
.wz-q { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:6px; }
.wz-qsub { font-size:12.5px; color:var(--text2); margin-bottom:18px; }
.wz-pane { display:none; animation:fadeUp .35s ease-out both; }
.wz-pane.active { display:block; }
.wz-opt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.wz-opt { display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); transition:all 0.2s cubic-bezier(.4,0,.2,1); text-align:left; }
.wz-opt:hover { border-color:var(--accent-border); }
.wz-opt.sel { border-color:var(--accent); background:var(--accent-bg); }
.wz-opt-ico { width:34px; height:34px; border-radius:9px; background:var(--bg-card); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.wz-opt-ico svg { width:18px; height:18px; }
.wz-opt-txt { font-family:var(--font-display); font-size:13px; font-weight:600; }
.wz-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 26px; border-top:1px solid var(--border); }
.wz-review { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:12px; overflow:hidden; }
.wz-review-row { display:flex; justify-content:space-between; gap:12px; background:var(--bg-card); padding:12px 15px; }
.wz-review-k { font-family:var(--font-mono); font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); }
.wz-review-v { font-size:13px; font-weight:500; text-align:right; }
.wz-success { text-align:center; padding:20px 10px; }
.wz-success-ring { width:84px; height:84px; margin:0 auto 18px; border-radius:50%; background:var(--accent-bg); border:2px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); animation:ringPulse 2s infinite; }
.wz-success-ring svg { width:42px; height:42px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .pf-layout { grid-template-columns:1fr; }
  .pf-rail { position:static; flex-direction:row; flex-wrap:wrap; }
  .pf-rail-card { flex:1; min-width:240px; }
}
@media(max-width:680px){
  .pf-stats { grid-template-columns:repeat(2,1fr); }
  .pf-info-grid { grid-template-columns:1fr; }
  .pf-arts { grid-template-columns:1fr; }
  .pf-field-row { grid-template-columns:1fr; }
  .pf-hero-body { padding:0 16px 18px; gap:14px; }
  .pf-hero-side { align-items:flex-start; }
  .pf-hero-meta, .pf-actions { justify-content:flex-start; }
  .pf-name { font-size:20px; }
  .pf-tabs-wrap { top:54px; }
  .pf-table { font-size:11px; }
  .pf-table th:nth-child(3), .pf-table td:nth-child(3) { display:none; }
}
body[data-device="mobile"] .pf-layout { grid-template-columns:1fr; }
body[data-device="mobile"] .pf-stats { grid-template-columns:repeat(2,1fr); }
body[data-device="mobile"] .pf-arts { grid-template-columns:1fr; }
body[data-device="mobile"] .pf-rail { position:static; }
body[data-device="tablet"] .pf-layout { grid-template-columns:1fr; }
body[data-device="tablet"] .pf-rail { flex-direction:row; flex-wrap:wrap; position:static; }

/* ── DEVICE-CHROME ENTRY POINTS ── */
.t-avatar { background:linear-gradient(135deg,#0d2a1e,#08203a) !important; border:1px solid var(--accent-border) !important; color:var(--accent) !important; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.5px; }
.m-tab-avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#0d2a1e,#08203a); border:1px solid var(--accent-border); color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:9px; display:flex; align-items:center; justify-content:center; }
.m-tab.active .m-tab-avatar { box-shadow:0 0 0 2px var(--accent-border); }
/* On tablet/mobile the in-page section tabs must clear the fixed device chrome */
body[data-device="tablet"] #page-profile .pf-tabs-wrap { position:static; top:auto; }
body[data-device="mobile"] #page-profile .pf-tabs-wrap { position:static; top:auto; }
body[data-device="mobile"] #page-profile .pf-hero-side { align-items:flex-start; }
body[data-device="mobile"] #page-profile .pf-hero-meta, body[data-device="mobile"] #page-profile .pf-actions { justify-content:flex-start; }

/* ── DARK MODE: brighter clickable controls ── */
[data-theme="dark"] #page-profile .pf-btn,
[data-theme="dark"] .pf-modal .pf-btn,
[data-theme="dark"] .pf-tab { color:rgba(240,244,250,0.9); }
[data-theme="dark"] #page-profile .pf-btn:hover,
[data-theme="dark"] .pf-modal .pf-btn:hover { color:#5dff8f; border-color:rgba(0,255,65,0.45); background:rgba(0,255,65,0.12); }
[data-theme="dark"] .pf-btn.danger { color:#ff6b80; }
[data-theme="dark"] .pf-btn.danger:hover { color:#ff8497; border-color:#ff6b80; background:rgba(255,75,100,0.14); }
[data-theme="dark"] .pf-tab.active { color:#5dff8f; background:rgba(0,255,65,0.14); border-color:rgba(0,255,65,0.4); }
[data-theme="dark"] .pf-tab:hover { color:rgba(240,244,250,0.95); }
[data-theme="dark"] .pf-link-btn { color:#5dff8f; }
[data-theme="dark"] #page-profile .pf-chip:hover { color:#fff; border-color:rgba(0,255,65,0.45); }
[data-theme="dark"] #page-profile .pf-chip.on { color:#5dff8f; background:rgba(0,255,65,0.14); border-color:rgba(0,255,65,0.45); }
[data-theme="dark"] .pf-modal-close:hover { color:#ff8497; border-color:#ff6b80; }

/* ========================================================================
   4 · Unified app  —  #__site_footer_styles (footer)
   ======================================================================== */

.site-footer {
  position: relative;
  margin-top: 64px;
  padding: 48px 0 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.6;
}
body.hidenav .site-footer { display: none; }
.site-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: 32px;
}
@media (max-width: 880px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .site-footer-inner .sf-brand { grid-column: span 2; }
}
@media (max-width: 520px) {
  .site-footer-inner { grid-template-columns: 1fr; }
  .site-footer-inner .sf-brand { grid-column: span 1; }
}
/* ── Device-class adaptivity (forced preview / unified device layer) ──
   The width media-queries above don't fire when a smaller device UI is
   forced inside a wide window, so mirror them off the device class. */
body[data-device="tablet"] .site-footer { margin-top: 40px; padding: 36px 0 0; }
body[data-device="tablet"] .site-footer-inner {
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
body[data-device="tablet"] .site-footer-inner .sf-brand { grid-column: span 2; }

body[data-device="mobile"] .site-footer { margin-top: 32px; padding: 32px 0 0; }
body[data-device="mobile"] .site-footer-inner {
  grid-template-columns: 1fr;
  gap: 26px;
  padding-bottom: 28px;
}
body[data-device="mobile"] .site-footer-inner .sf-brand { grid-column: span 1; }
body[data-device="mobile"] .sf-tag { max-width: 100%; }
body[data-device="mobile"] .sf-strip {
  flex-direction: column; gap: 6px; padding: 14px 16px; text-align: center;
}
.sf-col h4.sf-h {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}
.sf-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sf-col a {
  color: var(--text2);
  text-decoration: none;
  font-size: 12.5px;
  transition: color var(--tr);
}
.sf-col a:hover { color: var(--accent); }
.sf-brand-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.sf-logo {
  width: 28px; height: 28px;
  object-fit: contain;
}
[data-theme="light"] .sf-logo { content: url('logo-mark-dark.png'); }
.sf-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: var(--text);
}
.sf-wordmark .accent { color: var(--accent); }
.sf-tag {
  font-size: 12.5px;
  color: var(--text2);
  max-width: 380px;
  margin-bottom: 14px;
}
.sf-mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: .3px;
}
.sf-mono a {
  color: var(--text2);
  border-bottom: 1px dotted var(--text3);
  padding-bottom: 1px;
}
.sf-mono a:hover { color: var(--accent); border-color: var(--accent); }
.sf-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text3);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
@media (max-width: 640px) {
  .sf-strip { flex-direction: column; gap: 6px; padding: 14px 16px; text-align: center; }
}
.sf-strip .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--accent);
}

/* ========================================================================
   5 · Unified app  —  #__dynamic_cards (database-driven cards)
   ======================================================================== */

/* ════════ DYNAMIC / DATABASE-DRIVEN CARDS ════════
   Headline tiers · content density · visual-priority treatments.
   Every value pulls from theme tokens, so light + dark both inherit. */

/* — Headline optimisation: type scale moves inversely to headline length,
     headlines wrap & clamp instead of overflowing — */
.card-title { text-wrap: balance; overflow-wrap: anywhere; word-break: break-word; }
.card-title.hl-short { font-size: 20px;   line-height: 1.22; -webkit-line-clamp: 3; }
.card-title.hl-mid   { font-size: 16px;   line-height: 1.30; -webkit-line-clamp: 3; }
.card-title.hl-long  { font-size: 13.5px; line-height: 1.36; -webkit-line-clamp: 4; }

/* — Summary density follows blurb length — */
.card-summary { flex: initial; }
.card-summary.sm-short { -webkit-line-clamp: 2; }
.card-summary.sm-mid   { -webkit-line-clamp: 3; }
.card-summary.sm-long  { -webkit-line-clamp: 3; }

/* — Optional subtitle / deck — */
.card-sub {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 500;
  line-height: 1.45; color: var(--text2); margin: -2px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* — Article-status pill (Developing / Updated / Live) — */
.status-pill {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--border2); color: var(--text2); background: var(--bg-input);
}
.status-pill.st-developing { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.status-pill.st-updated    { color: var(--blue);   border-color: color-mix(in srgb, var(--blue) 45%, transparent);   background: color-mix(in srgb, var(--blue) 12%, transparent); }
.status-pill.st-live       { color: var(--red);    border-color: color-mix(in srgb, var(--red) 45%, transparent);    background: color-mix(in srgb, var(--red) 12%, transparent); }

/* — Tag row — */
.card-tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.mini-tag {
  font-family: var(--font-mono); font-size: 9px; color: var(--text3);
  padding: 2px 7px; border-radius: 100px; background: var(--bg-input); border: 1px solid var(--border);
}

/* — Engagement readout (renders only the metrics present on the record) — */
.card-stats { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.cstat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.cstat svg { width: 12px; height: 12px; opacity: .85; }

/* — Visual-priority flags layered over the cover — */
.card-flags { position: absolute; top: 10px; left: 10px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.card-flag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(4px);
}
.flag-breaking { background: var(--red); color: #fff; box-shadow: 0 2px 12px color-mix(in srgb, var(--red) 55%, transparent); }
.flag-breaking .cf-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: cfPulse 1.2s infinite; }
@keyframes cfPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }
.flag-exclusive { background: var(--purple); color: #fff; box-shadow: 0 2px 12px color-mix(in srgb, var(--purple) 50%, transparent); }
.flag-featured  { background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; }

/* — Breaking: red top accent across the whole card — */
.news-card.is-breaking { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.news-card.is-breaking::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 35%, transparent));
}
/* — Exclusive: purple edge — */
.news-card.is-exclusive { border-color: color-mix(in srgb, var(--purple) 32%, var(--border)); }

/* — No-cover cards: trim the watermark band so they read denser — */
.news-card.no-cover .card-img-wrap { height: 132px; }

/* — Featured: top visual priority — spans two columns, goes horizontal when wide — */
.news-card.is-featured { grid-column: span 2; }
.news-card.is-featured .card-title { font-size: clamp(20px, 2vw, 27px) !important; line-height: 1.2 !important; -webkit-line-clamp: 3 !important; }
.news-card.is-featured .card-sub { font-size: 14px; -webkit-line-clamp: 3; }
.news-card.is-featured .card-img-wrap { height: 220px; }
@media (min-width: 760px) {
  .news-card.is-featured { flex-direction: row; align-items: stretch; }
  .news-card.is-featured .card-img-wrap { width: 44%; height: auto; min-height: 290px; flex-shrink: 0; border-radius: 22px 0 0 22px !important; }
  .news-card.is-featured .card-body { width: 56%; padding: 24px 28px 20px; justify-content: center; }
  .news-card.is-featured.no-cover .card-img-wrap { min-height: 240px; }
}
@media (max-width: 759px) {
  .news-card.is-featured { grid-column: span 1; }
}
/* Device-view mobile: never go horizontal, never span 2 */
body[data-device="mobile"] .news-card.is-featured { grid-column: span 1 !important; flex-direction: column !important; }
body[data-device="mobile"] .news-card.is-featured .card-img-wrap { width: auto; height: 150px; min-height: 0; border-radius: 22px 22px 0 0 !important; }
body[data-device="mobile"] .news-card.is-featured .card-body { width: auto; padding: 14px 16px 12px; }
body[data-device="mobile"] .news-card.is-featured .card-title { font-size: 18px !important; }

/* ========================================================================
   6 · Unified app  —  #__unified_device_ui (desktop / tablet / mobile chrome)
   ======================================================================== */

/* ════════════════════════════════════════════════════════════════
   UNIFIED DEVICE-UI LAYER
   Three presentation shells over one shared logic core. Activated by
   body[data-device="desktop|tablet|mobile"]. Fluid by default — the
   chrome tracks a centered content column so a forced preview on a wide
   monitor reads as a phone/tablet surface (no skeuomorphic bezel).
   ════════════════════════════════════════════════════════════════ */

:root { --m-col: 460px; --t-col: 880px; }

/* The simulated-frame dashed rule from the old standalone master is not
   wanted in the fluid unified app — kill it in every mode. */
.device-frame-rule { display: none !important; }

/* Default visibility: device chrome hidden; desktop navbar + ticker rule. */
.t-topbar, .m-appbar, .m-searchrow, .m-tabbar { display: none; }

/* ── DESKTOP ── keep the existing navbar + ticker, hide device chrome. */
body[data-device="desktop"] .navbar,
body[data-device="desktop"] .ticker-wrap { display: flex; }

/* ── TABLET + MOBILE ── retire the desktop floating navbar, but KEEP the
   breaking ticker — re-docked as a slim strip under the device top bar. */
body[data-device="tablet"] .navbar,
body[data-device="mobile"] .navbar { display: none !important; }

/* Breaking ticker, device variant: squared edge-to-edge strip pinned just
   below the fixed top bar, matched to the device column width. */
body[data-device="tablet"] .ticker-wrap,
body[data-device="mobile"] .ticker-wrap {
  display: flex !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  border-left: none; border-right: none;
  z-index: 79;
}
body[data-device="tablet"] .ticker-wrap {
  top: 113px !important; height: 30px !important;
  width: min(100vw, var(--t-col)) !important;
}
body[data-device="mobile"] .ticker-wrap {
  top: 56px !important; height: 28px !important;
  width: min(100vw, var(--m-col)) !important;
}
body[data-device="tablet"] .ticker-label,
body[data-device="mobile"] .ticker-label { border-radius: 0 !important; }
body[data-device="mobile"] .ticker-label { padding: 0 12px !important; font-size: 8px !important; }
body[data-device="mobile"] .ticker-item { font-size: 10px !important; padding: 0 26px !important; }

/* ── Cyber-law detail panel: re-anchor to the CENTERED device column ──
   The base panel is pinned to the viewport edge, so in a forced narrow
   preview on a wide monitor it escapes the device frame and its close
   button lands off-screen. Dock it inside the column as a slide-up sheet. */
body[data-device="tablet"] .ltree-detail,
body[data-device="mobile"] .ltree-detail {
  top: auto !important; right: auto !important;
  left: 50% !important;
  max-width: none !important;
  transform: translate(-50%, 130%) !important;
  border-radius: var(--radius-lg) !important;
}
body[data-device="tablet"] .ltree-detail.open,
body[data-device="mobile"] .ltree-detail.open { transform: translate(-50%, 0) !important; }
body[data-device="tablet"] .ltree-detail {
  bottom: 28px !important;
  width: min(440px, calc(var(--t-col) - 40px)) !important;
  max-height: 72vh !important;
}
body[data-device="mobile"] .ltree-detail {
  bottom: 76px !important;
  width: calc(var(--m-col) - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: 64vh !important;
}

/* Relocated dropdowns (moved to <body> by JS so they survive a hidden
   navbar) — fix-position them consistently in every mode. */
#bellDropdown, #langDropdown {
  position: fixed !important;
  top: 130px !important; right: 26px !important;
  left: auto !important; bottom: auto !important;
}
body[data-device="tablet"]  #bellDropdown,
body[data-device="tablet"]  #langDropdown {
  top: 116px !important; left: auto !important;
  right: calc((100vw - min(100vw, var(--t-col))) / 2 + 18px) !important;
}
body[data-device="mobile"]  #bellDropdown,
body[data-device="mobile"]  #langDropdown {
  top: 60px !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(min(100vw, var(--m-col)) - 20px) !important;
  max-width: none !important;
}

/* shared little glyphs reused by tablet + mobile bars */
.cs-bell-dot {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--red); color: #fff;
  border: 2px solid var(--bg);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ════════════════════ TABLET ════════════════════ */
.t-topbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, var(--t-col));
  z-index: 80;
  background: var(--nav-bg, var(--bg-card));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .t-topbar { background: rgba(255,255,255,0.9); }
.t-row1 {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
}
.t-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; }
.t-brand-logo { width: 26px; height: 26px; object-fit: contain; }
[data-theme="light"] .t-brand-logo { content: url('logo-mark-dark.png'); }
.t-brand-wm {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: .4px; color: var(--text); white-space: nowrap;
}
.t-brand-wm .accent { color: var(--accent); }
.t-beta {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #ff8a4c;
  background: rgba(255,138,76,.14); border: 1px solid rgba(255,138,76,.45);
  border-radius: 5px; padding: 2px 5px 1px; line-height: 1; flex-shrink: 0;
}
.t-search {
  flex: 1; min-width: 0; max-width: 360px; margin-left: auto;
  height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--border);
}
.t-search .s-icon { color: var(--text3); font-size: 15px; flex-shrink: 0; }
.t-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
}
.t-search input::placeholder { color: var(--text3); }
.t-utils { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.t-iconbtn {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text2);
  transition: all .18s;
}
.t-iconbtn:hover { color: var(--accent); border-color: var(--accent-border); }
.t-iconbtn svg { width: 19px; height: 19px; }
.t-iconbtn .cs-theme-ico svg { width: 19px; height: 19px; }
.t-segnav {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px 11px; flex-wrap: wrap;
}
.t-seg {
  padding: 9px 18px; border-radius: 100px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .3px;
  transition: all .18s; min-height: 40px;
}
.t-seg:hover { color: var(--accent); border-color: var(--accent-border); }
.t-seg.active {
  background: var(--accent-bg); color: var(--accent);
  border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border);
}
body[data-device="tablet"] .t-topbar { display: block; }
body[data-device="tablet"] .main { padding-top: 152px !important; padding-bottom: 28px !important; }
/* tablet content rhythm — distinct from desktop's wide multi-column grid */
body[data-device="tablet"] .news-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
body[data-device="tablet"] .hero-grid { grid-template-columns: 1fr !important; }
body[data-device="tablet"] .hero-sidebar { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
body[data-device="tablet"] .news-card.is-featured { grid-column: span 2 !important; }

/* ════════════════════ MOBILE ════════════════════ */
.m-appbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, var(--m-col));
  height: 56px; z-index: 80;
  align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--nav-bg, var(--bg-card));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .m-appbar,
[data-theme="light"] .m-searchrow,
[data-theme="light"] .m-tabbar { background: rgba(255,255,255,0.92); }
.m-brand { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; cursor: pointer; }
.m-brand-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
[data-theme="light"] .m-brand-logo { content: url('logo-mark-dark.png'); }
.m-brand-wm {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .3px; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.m-brand-wm .accent { color: var(--accent); }
.m-iconbtn {
  position: relative; width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  background: transparent; border: none; color: var(--text2);
  transition: color .18s;
}
.m-iconbtn:hover, .m-iconbtn:active { color: var(--accent); }
.m-iconbtn svg { width: 21px; height: 21px; }
.m-iconbtn .cs-theme-ico svg { width: 20px; height: 20px; }
.m-searchrow {
  position: fixed; top: 56px; left: 50%;
  transform: translate(-50%, -130%);
  width: min(100vw, var(--m-col));
  z-index: 79;
  align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--nav-bg, var(--bg-card));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.m-searchrow.open { transform: translate(-50%, 0); }
.m-searchrow .s-icon { color: var(--text3); font-size: 15px; flex-shrink: 0; }
.m-searchrow input {
  flex: 1; min-width: 0; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; outline: none;
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
}
.m-searchrow input:focus { border-color: var(--accent-border); }
.m-searchrow input::placeholder { color: var(--text3); }
.m-search-x {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text3); cursor: pointer; font-size: 13px;
}
.m-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, var(--m-col));
  height: 62px; z-index: 80;
  align-items: stretch;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--nav-bg, var(--bg-card));
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
}
.m-tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--text3); border-radius: 12px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: .2px;
  transition: color .18s, background .18s;
}
.m-tab svg { width: 21px; height: 21px; }
.m-tab span { line-height: 1; }
.m-tab:active { background: var(--bg-input); }
.m-tab.active { color: var(--accent); }
body[data-device="mobile"] .m-appbar { display: flex; }
body[data-device="mobile"] .m-searchrow { display: flex; }
body[data-device="mobile"] .m-tabbar { display: flex; }
body[data-device="mobile"] .main {
  padding-top: 92px !important;
  padding-bottom: 84px !important;
  max-width: var(--m-col) !important; margin: 0 auto !important;
  padding-left: 12px !important; padding-right: 12px !important;
}
/* lift floating bits clear of the bottom tab bar on phones */
body[data-device="mobile"] .scroll-top { bottom: 78px; }
body[data-device="mobile"] .tweaks-panel { bottom: 84px; }

/* ════════════════════ FORCED-PREVIEW FRAMING ════════════════════
   When a designer forces a narrow mode on a much wider monitor, give
   the centered column a faint edge + shadow so it reads as a surface
   (not a stray column). Real devices never trigger this. */
body.cs-narrowpreview .main {
  box-shadow: 0 0 0 1px var(--border), 0 30px 90px rgba(0,0,0,.28);
  border-radius: 0 0 22px 22px;
}
body.cs-narrowpreview .m-appbar,
body.cs-narrowpreview .t-topbar { box-shadow: 0 1px 0 0 var(--border), 0 0 0 1px var(--border); border-radius: 22px 22px 0 0; }
body.cs-narrowpreview .m-tabbar { box-shadow: 0 0 0 1px var(--border); }

/* ════════════════════ OVERRIDE TOGGLE ════════════════════ */
.ui-override {
  position: fixed; left: 18px; bottom: 18px; z-index: 190;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
body[data-device="mobile"] .ui-override { bottom: 76px; left: 12px; }
.uio-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  border-radius: 100px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text2); backdrop-filter: blur(20px);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  transition: all .18s;
}
.uio-toggle:hover { color: var(--accent); border-color: var(--accent-border); }
.uio-toggle-ico { width: 17px; height: 17px; color: var(--accent); }
.uio-pop {
  display: none;
  width: 188px; padding: 8px;
  border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  box-shadow: 0 14px 44px rgba(0,0,0,.4);
}
.ui-override[data-open="true"] .uio-pop { display: block; animation: slideDown .18s ease-out; }
.uio-head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3);
  padding: 4px 8px 8px;
}
.uio-opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text2);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  text-align: left; transition: all .15s;
}
.uio-opt svg { width: 17px; height: 17px; flex-shrink: 0; }
.uio-opt:hover { background: var(--bg-input); color: var(--text); }
.uio-opt.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.uio-sub {
  margin-left: auto; font-family: var(--font-mono); font-size: 8.5px;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text3);
}
.uio-opt.active .uio-sub { color: var(--accent); }

@media print {
  .ui-override { display: none !important; }
}

/* ========================================================================
   7 · auth.html  —  authentication portal
   ======================================================================== */

:root {
  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --tr: 0.25s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] {
  --bg: #060a10;
  --bg2: #0a0f18;
  --bg3: #0f1520;
  --bg-card: rgba(15,21,32,0.85);
  --bg-card-solid: #0d121c;
  --bg-input: rgba(255,255,255,0.04);
  --text: #f0f4fa;
  --text2: rgba(240,244,250,0.62);
  --text3: rgba(240,244,250,0.35);
  --text4: rgba(240,244,250,0.15);
  --border: rgba(255,255,255,0.09);
  --border2: rgba(0,255,65,0.22);
  --accent: #00ff41;
  --accent-dim: #00cc33;
  --accent-bg: rgba(0,255,65,0.06);
  --accent-border: rgba(0,255,65,0.20);
  --accent-glow: rgba(0,255,65,0.30);
  --red: #ff2d4a;
  --red-bg: rgba(255,45,74,0.08);
  --orange: #ff8c00;
  --orange-bg: rgba(255,140,0,0.09);
  --orange-border: rgba(255,140,0,0.30);
  --orange-glow: rgba(255,140,0,0.30);
  --amber: #ffb347;
  --yellow: #e6c200;
  --blue: #00d4ff;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-h: 0 18px 60px rgba(0,0,0,0.55), 0 0 28px rgba(0,255,65,0.05);
  --nav-bg: rgba(6,10,16,0.88);
  --beta-c: #ffb066; --beta-bg: rgba(255,138,76,0.18); --beta-bd: rgba(255,138,76,0.55);
  --grid-line: rgba(0,255,65,0.05);
  --logo-mark: url('logo-mark.png');
  --logo-full: url('logo.png');
}
[data-theme="light"] {
  --bg: #f4f6f9;
  --bg2: #ffffff;
  --bg3: rgba(255,255,255,0.7);
  --bg-card: rgba(255,255,255,0.90);
  --bg-card-solid: #ffffff;
  --bg-input: rgba(10,20,40,0.04);
  --text: #0a1628;
  --text2: rgba(10,22,40,0.72);
  --text3: rgba(10,22,40,0.48);
  --text4: rgba(10,22,40,0.16);
  --border: rgba(10,22,40,0.10);
  --border2: rgba(0,130,70,0.30);
  --accent: #009150;
  --accent-dim: #006e3b;
  --accent-bg: rgba(0,145,80,0.08);
  --accent-border: rgba(0,145,80,0.22);
  --accent-glow: rgba(0,145,80,0.22);
  --red: #dc2538;
  --red-bg: rgba(220,37,56,0.07);
  --orange: #c2410c;
  --orange-bg: rgba(194,65,12,0.08);
  --orange-border: rgba(194,65,12,0.28);
  --orange-glow: rgba(194,65,12,0.22);
  --amber: #b45309;
  --yellow: #857000;
  --blue: #0066aa;
  --shadow: 0 4px 18px rgba(10,22,40,0.08);
  --shadow-h: 0 16px 50px rgba(10,22,40,0.14), 0 0 24px rgba(0,145,80,0.08);
  --nav-bg: rgba(244,246,249,0.85);
  --beta-c: #b05800; --beta-bg: rgba(255,138,76,0.14); --beta-bd: rgba(255,138,76,0.45);
  --grid-line: rgba(0,130,70,0.06);
  --logo-mark: url('logo-mark-dark.png');
  --logo-full: url('logo-dark.png');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background var(--tr), color var(--tr);
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; background: none; border: none; color: inherit; }
::selection { background: #ff9d4f; color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* high-contrast + reduced-motion (accessibility) */
@media (prefers-contrast: more) {
  [data-theme="dark"]  { --border: rgba(255,255,255,0.28); --text2: rgba(240,244,250,0.85); }
  [data-theme="light"] { --border: rgba(10,22,40,0.32);  --text2: rgba(10,22,40,0.9); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* skip link */
.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 300;
  background: var(--accent); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; transition: top var(--tr);
}
.skip-link:focus { top: 14px; }

/* ── ambient background ── */
.bg-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-wash::before, .bg-wash::after { content: ''; position: absolute; border-radius: 50%; filter: blur(120px); }
.bg-wash::before {
  width: 640px; height: 640px; top: -220px; right: -160px;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%); opacity: 0.5;
}
.bg-wash::after {
  width: 560px; height: 560px; bottom: -240px; left: -180px;
  background: radial-gradient(circle, var(--orange-glow), transparent 68%); opacity: 0.5;
}
[data-theme="light"] .bg-wash::before { opacity: 0.3; }
[data-theme="light"] .bg-wash::after { opacity: 0.25; }
.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,255,65,0.012) 3px, transparent 4px);
}
[data-theme="light"] .scanlines { display: none; }

/* ── MATRIX RAIN CANVAS (Devanagari · green + orange) ── */
#matrixCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.16; transition: opacity 0.5s;
}
[data-theme="light"] #matrixCanvas { opacity: 0.13; }

/* ── DEVICE OVERRIDE DOCK (Auto · Mobile · Tablet · Desktop) ── */
.ui-override { position: fixed; bottom: 18px; left: 18px; z-index: 120; font-family: var(--font-display); }
.uio-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 100px; border: 1px solid var(--border); background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(1.5); color: var(--text2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.22); transition: var(--tr);
}
.uio-toggle:hover { color: var(--accent); border-color: var(--accent-border); }
.uio-toggle-ico { width: 16px; height: 16px; color: var(--accent); }
.uio-pop {
  display: none; position: absolute; bottom: 48px; left: 0; width: 196px; padding: 8px;
  background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-h); backdrop-filter: blur(20px);
}
.ui-override[data-open="true"] .uio-pop { display: block; animation: fadeUp 0.18s ease-out; }
.uio-head { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3); padding: 4px 8px 8px; }
.uio-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid transparent; color: var(--text2); font-size: 13px; text-align: left; transition: var(--tr);
}
.uio-opt svg { width: 17px; height: 17px; flex-shrink: 0; }
.uio-opt:hover { background: var(--bg-input); color: var(--text); }
.uio-opt.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.uio-sub { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.uio-opt.active .uio-sub { color: var(--accent); }
@media print { .ui-override { display: none; } }

/* ── page chrome ── */
.page { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 14px; z-index: 40;
  margin: 14px clamp(14px, 4vw, 32px) 0;
  height: 60px; padding: 0 12px 0 18px;
  display: flex; align-items: center; gap: 12px;
  background: var(--nav-bg); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--border); border-radius: 100px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--logo-mark) center/contain no-repeat;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.brand-wm { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.5px; line-height: 1; white-space: nowrap; }
.brand-wm .accent { color: var(--accent); }
.beta-pill {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--beta-c); background: var(--beta-bg);
  border: 1px solid var(--beta-bd); border-radius: 5px; padding: 2px 6px 1px; line-height: 1;
}
.nav-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.nav-live {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 100px;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 1px;
  color: var(--text2); text-transform: uppercase;
}
.nav-live .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 2s infinite; }
.topbar-signin { font-size: 13px; color: var(--text2); white-space: nowrap; }
.topbar-signin a { color: var(--accent); font-weight: 600; cursor: pointer; }
.topbar-signin a:hover { text-decoration: underline; text-underline-offset: 2px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-input); display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: var(--tr); flex-shrink: 0;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-border); transform: rotate(20deg); }
.theme-toggle svg { width: 18px; height: 18px; }
@media(max-width:620px){ .nav-live { display: none; } .topbar-signin { display: none; } }

/* ── layout ── */
.shell {
  flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 56px) 56px;
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start;
}
@media(min-width:980px){ .shell { grid-template-columns: 0.92fr 1fr; gap: 50px; padding-top: 34px; align-items: start; } }

/* ── BRAND / INFO PANEL ── */
.aside { position: relative; }
@media(min-width:980px){
  /* Pinned + viewport-centered so the brand stack holds the SAME position
     across every view (sign in / create account / forgot) regardless of how
     tall that view's form card is. Future scenes inherit this automatically. */
  .aside {
    position: sticky; top: 88px;
    min-height: calc(100vh - 140px);
    display: flex; flex-direction: column; justify-content: center;
  }
}
@keyframes pulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.3; } }

.hero-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero-logo-img {
  width: clamp(200px, 23vw, 264px); aspect-ratio: 1; margin: -30px 0 -52px -12px;
  background: var(--logo-full) center/contain no-repeat;
  filter: drop-shadow(0 0 24px var(--accent-glow));
}
.hero-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--orange); margin-left: 2px;
}
.hero-tagline {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.2px; color: var(--text); margin: 16px 0 0; text-wrap: balance; line-height: 1.25;
}
.aside-lede { color: var(--text2); font-size: 14.5px; max-width: 46ch; margin-top: 16px; }

/* aside content swap */
.aside-pane { display: none; }
.aside-pane.show { display: block; animation: fadeUp 0.4s var(--tr); }

/* illustration area — cyber shield visual */
.illus {
  position: relative; margin-top: 28px; height: 184px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  background: linear-gradient(180deg, rgba(0,212,255,0.04), transparent 60%), var(--bg2);
}
.illus::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 80% at 70% 40%, #000 30%, transparent 80%);
}
.illus-shield {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  width: 92px; height: 92px; color: var(--accent);
  filter: drop-shadow(0 0 18px var(--accent-glow));
}
.illus-shield svg { width: 100%; height: 100%; }
.illus-meta { position: absolute; right: 22px; top: 24px; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; text-align: right; }
.illus-stat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--text3); display: flex; align-items: center; gap: 7px; }
.illus-stat b { color: var(--accent); font-size: 11px; }
.illus-stat .d { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.illus-tag {
  position: absolute; left: 22px; bottom: 18px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3);
}

/* benefits */
.unlocks { margin-top: 26px; }
.unlocks-label {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px;
}
.unlock-list { list-style: none; display: grid; gap: 0; }
.unlock {
  display: flex; align-items: center; gap: 11px; padding: 10px 2px; font-size: 13px;
  color: var(--text2); border-bottom: 1px solid var(--border); transition: var(--tr);
}
.unlock:last-child { border-bottom: none; }
.unlock:hover { color: var(--text); padding-left: 6px; }
.unlock-ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.unlock-ic svg { width: 16px; height: 16px; }
.unlock b { font-weight: 600; color: var(--text); }

/* recovery flow steps (forgot aside) */
.flow { margin-top: 26px; }
.flow-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.flow-steps { list-style: none; display: grid; gap: 0; position: relative; }
.flow-step { display: flex; align-items: center; gap: 14px; padding: 9px 0; position: relative; transition: var(--tr); }
.flow-num {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text2);
  position: relative; z-index: 1; transition: var(--tr);
}
.flow-step.active .flow-num { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 16px -2px var(--accent-glow); }
.flow-step.active { color: var(--text); }
.flow-step .flow-txt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.flow-step .flow-txt span { font-size: 11.5px; color: var(--text2); }
.flow-steps::before { content: ''; position: absolute; left: 14.5px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, var(--accent-border), var(--border)); z-index: 0; }

/* trust pills */
.trust-row { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 9px; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--bg-input); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; color: var(--text2);
}
.trust-pill svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* ── FORM CARD ── */
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow); backdrop-filter: blur(20px); overflow: hidden; position: relative;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5;
}
.card-pad { padding: clamp(24px, 4vw, 42px); }

/* ── AUTH TABS (segmented view switcher) ── */
.auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 5px; margin-bottom: 26px; border-radius: var(--radius);
  background: var(--bg-input); border: 1px solid var(--border);
}
.auth-tabs.hidden { display: none; }
.auth-tab {
  position: relative; z-index: 1; height: 42px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.2px;
  color: var(--text2); transition: var(--tr); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-tab svg { width: 16px; height: 16px; }
.auth-tab[aria-selected="true"] { color: var(--bg); }
.auth-tab:not([aria-selected="true"]):hover { color: var(--text); }
.auth-tab-ind {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 7px);
  border-radius: 10px; background: linear-gradient(135deg,#ff8c00,#ff6a00); box-shadow: 0 6px 18px -6px rgba(255,140,0,0.6);
  transition: transform var(--tr);
}
.auth-tabs[data-active="signup"] .auth-tab-ind { transform: translateX(calc(100% + 4px)); }

/* views */
.view { display: none; }
.view.show { display: block; animation: viewIn 0.42s cubic-bezier(0.4,0,0.2,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* stepper (signup) */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--text3); transition: var(--tr);
}
.step-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); transition: var(--tr); white-space: nowrap; }
.step-line { flex: 1; height: 1.5px; background: var(--border); margin: 0 12px; transition: var(--tr); }
.step.active .step-num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.step.active .step-lbl { color: var(--text); }
.step.done .step-num { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.step.done .step-lbl { color: var(--text2); }
.step.done + .step-line { background: var(--accent); }
@media(max-width:560px){ .step-lbl { display: none; } .step-line { margin: 0 8px; } }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.3px; }
.card-desc { color: var(--text2); font-size: 13.5px; margin-top: 6px; }
.head-lock {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.head-lock svg { width: 21px; height: 21px; }
/* recovery context reads warm (orange) vs the green of sign-in/verified */
#view-forgot #fp-scene-request .head-lock { background: var(--orange-bg); border-color: var(--orange-border); color: var(--orange); }

/* scenes (sub-states within a view) */
.scene { display: none; animation: fadeUp 0.4s var(--tr); }
.scene.show { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── form fields ── */
.field { margin-top: 18px; }
.field-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2); margin-bottom: 8px;
}
.field-label .req { color: var(--accent); margin-left: 2px; }
.field-hint-txt { font-size: 12.5px; color: var(--text3); margin: -2px 0 10px; }
.input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 14px; transition: var(--tr); height: 52px;
}
.input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.input-wrap.invalid { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.input-wrap.valid { border-color: var(--accent-border); }
.input-wrap .lead-ic { color: var(--text3); display: flex; flex-shrink: 0; }
.input-wrap .lead-ic svg { width: 17px; height: 17px; }
.input-wrap input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 14.5px; color: var(--text); height: 100%;
}
.input-wrap input::placeholder { color: var(--text3); }
.input-wrap .field-state { flex-shrink: 0; display: flex; align-items: center; }
.input-wrap .field-state svg { width: 17px; height: 17px; }
.peek { color: var(--text3); display: flex; align-items: center; padding: 4px; border-radius: 6px; transition: var(--tr); flex-shrink: 0; }
.peek:hover { color: var(--text); }
.peek svg { width: 18px; height: 18px; }
.cc-select { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--border); height: 28px; position: relative; }
.cc-select select { appearance: none; background: none; border: none; outline: none; cursor: pointer; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); padding-right: 16px; }
.cc-select::after { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--text3); border-bottom: 1.5px solid var(--text3); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.cc-select select option { background: var(--bg-card-solid); color: var(--text); }

.hint { font-size: 11.5px; margin-top: 7px; min-height: 14px; display: flex; align-items: center; gap: 6px; }
.hint.err { color: var(--red); }
.hint.ok { color: var(--accent); }
.hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* password strength */
.strength { margin-top: 12px; }
.strength-bar { display: flex; gap: 5px; height: 5px; }
.strength-seg { flex: 1; border-radius: 999px; background: var(--border); transition: var(--tr); }
.strength-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.strength-meta .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.strength-meta .val { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
.req-list { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media(max-width:480px){ .req-list { grid-template-columns: 1fr; } }
.req-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text3); transition: var(--tr); }
.req-check { width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--text4); display: flex; align-items: center; justify-content: center; transition: var(--tr); }
.req-check svg { width: 10px; height: 10px; opacity: 0; transform: scale(0.5); transition: var(--tr); }
.req-item.met { color: var(--text); }
.req-item.met .req-check { background: var(--accent); border-color: var(--accent); }
.req-item.met .req-check svg { opacity: 1; transform: scale(1); color: var(--bg); }

/* options row (login) */
.opt-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; flex-wrap: wrap; }
.forgot-link { font-size: 13px; color: var(--orange); font-weight: 600; transition: var(--tr); cursor: pointer; }
.forgot-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* checkbox (remember + consent) */
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text2); user-select: none; }
.check.consent-row { align-items: flex-start; gap: 12px; font-size: 12.5px; line-height: 1.5; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--border); background: var(--bg-input); display: flex; align-items: center; justify-content: center; transition: var(--tr); }
.check.consent-row .check-box { margin-top: 1px; }
.check-box svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.5); transition: var(--tr); color: var(--bg); }
.check input:checked ~ .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible ~ .check-box { box-shadow: 0 0 0 4px var(--accent-bg); }
.check a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.check.shake { animation: shake 0.4s; }
@keyframes shake { 0%,100%{ transform: translateX(0); } 20%,60%{ transform: translateX(-5px); } 40%,80%{ transform: translateX(5px); } }

/* captcha */
.sec-block { margin-top: 22px; }
.sec-block.bordered { padding-top: 20px; border-top: 1px solid var(--border); }
.captcha {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  transition: var(--tr); cursor: pointer; user-select: none;
}
.captcha:hover { border-color: var(--accent-border); }
.captcha.checked { border-color: var(--accent-border); background: var(--accent-bg); }
.captcha-box { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--text4); display: flex; align-items: center; justify-content: center; transition: var(--tr); background: var(--bg2); }
.captcha.checked .captcha-box { background: var(--accent); border-color: var(--accent); }
.captcha-box svg { width: 14px; height: 14px; opacity: 0; color: var(--bg); transition: var(--tr); }
.captcha.checked .captcha-box svg { opacity: 1; }
.captcha.loading .captcha-box { border-color: var(--accent); }
.captcha.loading .captcha-box::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin 0.7s linear infinite; }
.captcha-txt { flex: 1; font-size: 13px; font-weight: 500; }
.captcha-brand { font-family: var(--font-mono); font-size: 9px; color: var(--text3); text-align: right; line-height: 1.4; }
.captcha-brand b { color: var(--text2); font-size: 10px; display: block; }

/* notice */
.notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 13px; border-radius: var(--radius); font-size: 12px; line-height: 1.5; background: var(--bg-input); border: 1px solid var(--border); color: var(--text2); }
.notice svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--text3); }
.notice.warn { background: var(--red-bg); border-color: rgba(255,45,74,0.25); color: var(--text); }
.notice.warn svg { color: var(--red); }
.notice b { color: var(--text); font-weight: 600; }
.notice-mono { font-family: var(--font-mono); }

/* consent block */
.consent { margin-top: 22px; display: grid; gap: 11px; }

/* inline alert */
.alert { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 13px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; background: var(--red-bg); border: 1px solid rgba(255,45,74,0.28); color: var(--text); animation: fadeUp 0.3s var(--tr); }
.alert.hidden { display: none; }
.alert .a-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--red); }
.alert.warn { background: var(--orange-bg); border-color: rgba(255,140,0,0.32); }
.alert.warn .a-ic { color: var(--orange); }
.alert b { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }
.alert .a-body { flex: 1; }
.alert .a-sub { color: var(--text2); }
.alert .a-mono { font-family: var(--font-mono); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 22px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.3px;
  transition: var(--tr); position: relative; overflow: hidden; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg,#ff8c00,#ff6a00); color: #fff; box-shadow: 0 8px 28px -8px rgba(255,140,0,0.6); width: 100%; margin-top: 22px; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 34px -8px var(--orange-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--bg-input); color: var(--text3); box-shadow: none; cursor: not-allowed; transform: none; filter: none; border: 1px solid var(--border); }
.btn-ghost { border: 1px solid var(--border); color: var(--text2); background: var(--bg-input); height: 48px; font-size: 14px; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent-border); }
.btn-block { width: 100%; }
.btn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading .btn-label { opacity: 0; }
.btn.loading .spinner { display: block; position: absolute; }
.btn .auth-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(0,0,0,0.22); transition: width 0.2s linear; }

/* auth progress steps */
.auth-steps { margin-top: 14px; display: none; }
.auth-steps.show { display: block; animation: fadeUp 0.3s var(--tr); }
.auth-step { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text3); padding: 4px 0; transition: var(--tr); }
.auth-step .as-ic { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.auth-step .as-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text4); transition: var(--tr); }
.auth-step.run { color: var(--text2); }
.auth-step.run .as-dot { border-color: var(--accent); border-top-color: transparent; animation: spin 0.7s linear infinite; }
.auth-step.ok { color: var(--text); }
.auth-step.ok .as-dot { background: var(--accent); border-color: var(--accent); }
.auth-step .as-check { width: 12px; height: 12px; color: var(--accent); display: none; }
.auth-step.ok .as-check { display: block; }
.auth-step.ok .as-dot { display: none; }

/* divider + alt-auth (login) */
.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 4px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }
.alt-auth { display: grid; gap: 10px; margin-top: 16px; }
.alt-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); font-size: 13.5px; font-weight: 500; color: var(--text2); transition: var(--tr); position: relative; cursor: not-allowed; }
.alt-btn .alt-ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text2); }
.alt-btn .alt-ic svg { width: 19px; height: 19px; }
.alt-btn .alt-label { flex: 1; text-align: left; }
.alt-btn .soon { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--beta-c); background: var(--beta-bg); border: 1px solid var(--beta-bd); border-radius: 5px; padding: 3px 7px 2px; line-height: 1; }
.alt-btn:hover { border-color: var(--border2); }
.alt-btn[aria-disabled="true"] { opacity: 0.72; }

/* create-account / cross-nav CTA */
.cta-create { margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--accent-border); background: var(--accent-bg); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cta-create .cta-txt { font-size: 13px; color: var(--text2); }
.cta-create .cta-txt b { display: block; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin-bottom: 1px; }
.cta-create .cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--accent); color: var(--bg); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; transition: var(--tr); white-space: nowrap; cursor: pointer; }
.cta-create .cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta-create .cta-btn svg { width: 15px; height: 15px; }

.alt-line { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text3); }
.alt-line a { color: var(--accent); font-weight: 600; cursor: pointer; }
.alt-line a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* card nav (forgot) */
.card-nav { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.card-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-nav-row .cn-txt { font-size: 13px; color: var(--text2); }
.card-nav-row .cn-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--accent); transition: var(--tr); cursor: pointer; }
.card-nav-row .cn-link svg { width: 15px; height: 15px; }
.card-nav-row .cn-link:hover { gap: 10px; }

/* security messaging block (forgot) */
.sec-notes { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 11px; }
.sec-notes-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: -1px; }
.sec-note { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.sec-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.sec-note b { color: var(--text); font-weight: 600; }

/* ── STATE scenes (icon-led) ── */
.state-icon { width: 76px; height: 76px; margin: 4px auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; animation: pop 0.5s var(--tr); }
.state-icon svg { width: 36px; height: 36px; }
.state-icon.warn { background: var(--orange-bg); border: 1.5px solid rgba(255,140,0,0.32); color: var(--orange); }
.state-icon.danger { background: var(--red-bg); border: 1.5px solid rgba(255,45,74,0.30); color: var(--red); }
.state-icon.ok { background: var(--accent-bg); border: 1.5px solid var(--accent-border); color: var(--accent); }
.state-icon.ok::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--accent-border); opacity: 0.4; animation: ring 1.8s ease-out infinite; }
@keyframes ring { 0%{ transform: scale(0.9); opacity: 0.5; } 100%{ transform: scale(1.4); opacity: 0; } }
@keyframes pop { 0%{ transform: scale(0.3); opacity: 0; } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); opacity: 1; } }
.state-wrap { text-align: center; padding: 8px 0 4px; }
.state-wrap h2 { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.3px; }
.state-wrap > p { color: var(--text2); font-size: 13.5px; margin-top: 10px; max-width: 44ch; margin-inline: auto; }
.state-wrap .state-email { font-family: var(--font-mono); color: var(--text); font-size: 12.5px; }
.state-back { margin-top: 22px; }

/* verify channel buttons (login + forgot) */
.vbtns { display: grid; gap: 11px; margin: 24px 0 4px; text-align: left; }
.vbtn { display: flex; align-items: center; gap: 13px; width: 100%; height: 60px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); transition: var(--tr); text-align: left; }
.vbtn:hover { border-color: var(--accent-border); background: var(--accent-bg); transform: translateY(-1px); }
.vbtn .vb-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.vbtn .vb-ic svg { width: 19px; height: 19px; }
.vbtn .vb-txt { flex: 1; }
.vbtn .vb-txt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.vbtn .vb-txt span { font-size: 11.5px; color: var(--text2); }
.vbtn .vb-stat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.vbtn .vb-stat.pending { color: var(--orange); background: var(--orange-bg); border: 1px solid rgba(255,140,0,0.3); }

/* lockout countdown */
.lock-timer { margin: 22px auto 4px; max-width: 260px; padding: 16px; border-radius: var(--radius); background: var(--bg-input); border: 1px solid var(--border); text-align: center; }
.lock-timer .lt-val { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--text); letter-spacing: 1px; }
.lock-timer .lt-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); margin-top: 4px; }

/* sent meta box (forgot verified) */
.sent-meta { margin: 22px auto 4px; max-width: 360px; padding: 15px 18px; border-radius: var(--radius); background: var(--bg-input); border: 1px solid var(--border); text-align: left; display: grid; gap: 10px; }
.sent-row { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--text2); }
.sent-row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.sent-row .sr-val { margin-left: auto; font-family: var(--font-mono); color: var(--text); font-size: 12px; }
.sent-row .sr-val.exp { color: var(--orange); }

/* resend hint (forgot otp) */
.resend-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-top: 16px; }
.resend-hint b { color: var(--text2); }
.otp-edit-link { color: var(--orange); font-weight: 600; border-bottom: 1px dotted var(--orange-border); transition: var(--tr); cursor: pointer; }
.otp-edit-link:hover { border-bottom-style: solid; }
.btn-link-resend { display: block; margin: 4px auto 0; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent); transition: var(--tr); }
.btn-link-resend:disabled { color: var(--text4); cursor: not-allowed; }
.btn-link-resend:not(:disabled):hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── OTP boxes (FORGOT — single 6-box row) ── */
#view-forgot .otp-inputs { display: flex; justify-content: center; gap: clamp(7px, 2vw, 11px); margin: 26px 0 4px; }
.otp-box {
  width: clamp(42px, 13vw, 54px); height: clamp(52px, 15vw, 62px);
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input);
  font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--text);
  text-align: center; outline: none; transition: var(--tr); caret-color: var(--accent);
}
.otp-box:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.otp-box.filled { border-color: var(--accent-border); }
#view-forgot .otp-inputs.invalid .otp-box { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); animation: otpShake 0.4s; }
#view-forgot .otp-inputs.ok .otp-box { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
@keyframes otpShake { 0%,100%{ transform: translateX(0); } 20%,60%{ transform: translateX(-5px); } 40%,80%{ transform: translateX(5px); } }
.otp-hint { justify-content: center; min-height: 16px; margin-top: 12px; }
.demo-otp { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 4px auto 18px; max-width: 360px; padding: 9px 14px; border-radius: 10px; border: 1px dashed var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text3); }
.demo-otp svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.demo-otp b { color: var(--accent); letter-spacing: 2px; font-size: 12px; }

/* ── VERIFICATION CENTER (SIGNUP) ── */
.verify-banner { display: flex; align-items: center; gap: 11px; padding: 13px 15px; margin-bottom: 6px; background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--radius); font-size: 12.5px; color: var(--text); }
.verify-banner svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.vtrack { display: flex; gap: 10px; margin: 22px 0; }
.vtrack-item { flex: 1; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); font-size: 12px; transition: var(--tr); }
.vtrack-item .vt-ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); color: var(--text3); }
.vtrack-item .vt-ic svg { width: 15px; height: 15px; }
.vtrack-item b { display: block; font-weight: 600; font-size: 12px; color: var(--text2); }
.vtrack-item span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.vtrack-item.active { border-color: var(--accent-border); }
.vtrack-item.active .vt-ic { color: var(--accent); border-color: var(--accent-border); }
.vtrack-item.verified .vt-ic { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.vtrack-item.verified b { color: var(--text); }
.vtrack-item.verified span { color: var(--accent); }
.otp-card { display: none; }
.otp-card.show { display: block; animation: fadeUp 0.35s var(--tr); }
.otp-sent { font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.otp-sent b { color: var(--text); }
#view-signup .otp-inputs { display: flex; gap: 9px; margin: 20px 0 6px; justify-content: space-between; }
#view-signup .otp-inputs input { flex: 1; min-width: 0; aspect-ratio: 1; max-width: 56px; text-align: center; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); outline: none; transition: var(--tr); }
#view-signup .otp-inputs input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
#view-signup .otp-inputs.invalid input { border-color: var(--red); }
#view-signup .otp-inputs.verified input { border-color: var(--accent-border); color: var(--accent); }
.otp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.otp-timer { font-family: var(--font-mono); font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 7px; }
.otp-timer .clock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.otp-timer.expired { color: var(--red); }
.resend { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; color: var(--text3); display: inline-flex; align-items: center; gap: 6px; }
.resend:disabled { cursor: not-allowed; }
.resend:not(:disabled) { color: var(--accent); }
.resend:not(:disabled):hover { text-decoration: underline; }
.resend svg { width: 13px; height: 13px; }
.otp-status { margin-top: 14px; min-height: 16px; font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.otp-status.ok { color: var(--accent); }
.otp-status.err { color: var(--red); }
.otp-status svg { width: 15px; height: 15px; }
.demo-hint { margin-top: 16px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text3); display: flex; align-items: center; gap: 8px; }
.demo-hint svg { width: 13px; height: 13px; flex-shrink: 0; }
.demo-hint b { color: var(--text2); }

/* signup success */
.success { text-align: center; padding: 14px 0 6px; }
.success-mark { width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; background: var(--accent-bg); border: 1.5px solid var(--accent-border); display: flex; align-items: center; justify-content: center; position: relative; animation: pop 0.5s var(--tr); }
.success-mark::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--accent-border); opacity: 0.4; animation: ring 1.8s ease-out infinite; }
.success-mark svg { width: 44px; height: 44px; color: var(--accent); }
.success h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.3px; }
.success p { color: var(--text2); font-size: 14px; margin-top: 10px; max-width: 40ch; margin-inline: auto; }
.success-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px 0 6px; }
.success-chips .trust-pill { background: var(--accent-bg); border-color: var(--accent-border); color: var(--text); }

/* ══════════════════ SETUP WIZARD (view-setup) ══════════════════ */
.wiz-head { margin-bottom: 26px; }
.wiz-head.hidden { display: none; }
.wiz-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wiz-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); }
.wiz-count { font-family: var(--font-mono); font-size: 11px; color: var(--text2); }
.wiz-count b { color: var(--text); }
.wiz-track { height: 5px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); overflow: hidden; }
.wiz-fill { display: block; height: 100%; width: 14%; border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--accent)); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
.wiz-dots { display: flex; gap: 6px; margin-top: 12px; }
.wiz-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--border); transition: var(--tr); }
.wiz-dot.done { background: var(--orange); }
.wiz-dot.active { background: var(--accent); }

.wiz-step { display: none; }
.wiz-step.show { display: block; animation: viewIn 0.4s cubic-bezier(0.4,0,0.2,1); }
.opt, .opt-inline { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.opt { margin-left: 2px; }
.opt-inline { font-size: 11px; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.wiz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media(max-width:560px){ .wiz-grid2 { grid-template-columns: 1fr; } }
body[data-device="mobile"] .wiz-grid2 { grid-template-columns: 1fr; }

.wiz-select { flex: 1; min-width: 0; height: 100%; background: none; border: none; outline: none; font-family: var(--font-body); font-size: 14.5px; color: var(--text); appearance: none; cursor: pointer; padding-right: 22px; }
.wiz-select option { background: var(--bg-card-solid); color: var(--text); }
.input-wrap:has(.wiz-select) { position: relative; }
.input-wrap:has(.wiz-select)::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.input-wrap:has(select:disabled) { opacity: 0.55; }

.wiz-textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; font-family: var(--font-body); font-size: 14.5px; color: var(--text); resize: vertical; min-height: 96px; outline: none; transition: var(--tr); }
.wiz-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.wiz-textarea::placeholder { color: var(--text3); }
.bio-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text3); text-transform: none; letter-spacing: 0; }

/* multi-select chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.sel-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text2); font-size: 13px; font-weight: 500; transition: var(--tr); cursor: pointer; user-select: none; }
.sel-chip:hover { border-color: var(--orange-border); color: var(--text); }
.sel-chip .chip-tick { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--tr); }
.sel-chip .chip-tick svg { width: 9px; height: 9px; opacity: 0; transform: scale(0.5); color: #fff; transition: var(--tr); }
.sel-chip.on { background: var(--orange-bg); border-color: var(--orange); color: var(--text); }
.sel-chip.on .chip-tick { background: var(--orange); border-color: var(--orange); }
.sel-chip.on .chip-tick svg { opacity: 1; transform: scale(1); }

/* preference toggles */
.pref-group { margin-top: 18px; }
.pref-group:first-child { margin-top: 6px; }
.pref-group-label { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
.pref-group-label svg { width: 15px; height: 15px; color: var(--orange); }
.pref-list { display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pref-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--bg-input); cursor: pointer; transition: var(--tr); }
.pref-item:hover { background: var(--accent-bg); }
.pref-item .pref-txt { flex: 1; font-size: 13.5px; color: var(--text); }
.pref-item .pref-txt span { display: block; font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.pref-switch { width: 42px; height: 24px; border-radius: 999px; background: var(--border); position: relative; flex-shrink: 0; transition: var(--tr); }
.pref-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: var(--tr); }
.pref-item.on .pref-switch { background: var(--accent); }
.pref-item.on .pref-switch::after { transform: translateX(18px); }

/* avatar upload */
.avatar-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 8px; }
.avatar-prev { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border); background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text3); overflow: hidden; background-size: cover; background-position: center; }
.avatar-prev svg { width: 34px; height: 34px; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.avatar-remove { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--red); }
.avatar-remove:hover { text-decoration: underline; }
.avatar-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }

.wiz-nav { display: flex; gap: 12px; margin-top: 28px; }
.wiz-nav.hidden { display: none; }
#wiz-back.hidden { display: none; }

/* capabilities list (success) */
.caps-list { list-style: none; display: inline-grid; gap: 11px; text-align: left; margin: 22px auto 6px; }
.caps-list li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text); }
.caps-list li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }

/* ── toasts ── */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 36px); }
.toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; min-width: 260px; max-width: 360px; border-radius: var(--radius); background: var(--bg-card-solid); border: 1px solid var(--border); box-shadow: var(--shadow-h); animation: toastIn 0.35s var(--tr); backdrop-filter: blur(20px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut 0.3s var(--tr) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
.toast-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.toast-ic svg { width: 17px; height: 17px; }
.toast.ok .toast-ic { background: var(--accent-bg); color: var(--accent); }
.toast.err .toast-ic { background: var(--red-bg); color: var(--red); }
.toast.info .toast-ic { background: var(--bg-input); color: var(--blue); }
.toast.warn .toast-ic { background: var(--orange-bg); color: var(--orange); }
.toast-body b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.toast-body span { font-size: 12px; color: var(--text2); }

/* ── footer ── */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 26px clamp(20px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-left { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3); }
.footer-left .brand-mark { width: 22px; height: 22px; filter: none; opacity: 0.7; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { font-size: 12.5px; color: var(--text2); transition: var(--tr); }
.footer-links a:hover { color: var(--accent); }

/* responsive */
@media(max-width:980px){
  .aside { order: -1; position: static; }
  .aside-lede { max-width: none; }
  .illus { display: none; }
  .unlock-list { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .unlock:nth-last-child(2) { border-bottom: none; }
}
@media(max-width:760px){
  .shell { padding-bottom: 44px; }
  .hero-logo-img { width: clamp(190px, 44vw, 230px); }
  .unlock-list { grid-template-columns: 1fr; }
  .unlock:nth-last-child(2) { border-bottom: 1px solid var(--border); }
}
@media(max-width:560px){
  .topbar { margin: 10px 12px 0; top: 10px; height: 56px; padding: 0 10px 0 14px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-wm { font-size: 15px; }
  .shell { padding: 18px 16px 40px; gap: 26px; }
  .card-pad { padding: 24px 18px; }
  .card-title { font-size: 21px; }
  .input-wrap { height: 50px; }
  #view-signup .otp-inputs { gap: 6px; }
  #view-signup .otp-inputs input { font-size: 18px; border-radius: 11px; }
  .vtrack { flex-direction: column; gap: 8px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .opt-row { gap: 8px; }
  .aside { order: 2; }
}
@media(max-width:360px){ .beta-pill { display: none; } #view-signup .otp-inputs input { font-size: 15px; } }

/* ══════════════════════════════════════════════════════════════════
   DEVICE PREVIEW MODES — driven by the floating dock + auto-detection.
   Simulate mobile / tablet widths even on a wide monitor by capping the
   page width and collapsing to a single column. Desktop drops the
   attribute entirely and keeps the full fluid layout.
   ══════════════════════════════════════════════════════════════════ */
body[data-device="mobile"] .page,
body[data-device="tablet"] .page {
  margin: 0 auto; min-height: 100vh;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  box-shadow: 0 0 60px rgba(0,0,0,0.35);
  transition: max-width 0.38s cubic-bezier(0.4,0,0.2,1);
}
body[data-device="tablet"] .page { max-width: 860px; }
body[data-device="mobile"] .page { max-width: 462px; }

/* single column + stacked brand panel */
body[data-device="tablet"] .shell,
body[data-device="mobile"] .shell {
  grid-template-columns: 1fr !important; gap: 28px; align-items: start !important; padding-top: 22px;
}
body[data-device="tablet"] .aside,
body[data-device="mobile"] .aside {
  order: -1; position: static !important; min-height: 0 !important;
  display: block !important; top: auto !important;
}
body[data-device="tablet"] .aside-lede,
body[data-device="mobile"] .aside-lede { max-width: none; }
body[data-device="tablet"] .unlock-list { grid-template-columns: 1fr 1fr; gap: 0 24px; }
body[data-device="mobile"] .unlock-list { grid-template-columns: 1fr; }

/* tablet chrome trims */
body[data-device="tablet"] .nav-live { display: none; }
body[data-device="tablet"] .hero-logo-img { width: clamp(200px, 30vw, 240px); }

/* mobile chrome shrink (mirrors the ≤560px breakpoint) */
body[data-device="mobile"] .topbar { margin: 10px 12px 0; top: 10px; height: 56px; padding: 0 10px 0 14px; }
body[data-device="mobile"] .brand-mark { width: 28px; height: 28px; }
body[data-device="mobile"] .brand-wm { font-size: 15px; }
body[data-device="mobile"] .nav-live,
body[data-device="mobile"] .topbar-signin { display: none; }
body[data-device="mobile"] .shell { padding: 18px 16px 40px; gap: 26px; }
body[data-device="mobile"] .card-pad { padding: 24px 18px; }
body[data-device="mobile"] .card-title { font-size: 21px; }
body[data-device="mobile"] .input-wrap { height: 50px; }
body[data-device="mobile"] .hero-logo-img { width: clamp(180px, 52vw, 220px); }
body[data-device="mobile"] .req-list { grid-template-columns: 1fr; }
body[data-device="mobile"] #view-signup .otp-inputs { gap: 6px; }
body[data-device="mobile"] #view-signup .otp-inputs input { font-size: 18px; border-radius: 11px; }
body[data-device="mobile"] .vtrack { flex-direction: column; gap: 8px; }
body[data-device="mobile"] .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
body[data-device="mobile"] .opt-row { gap: 8px; }
/* mobile: auth card on top, brand/info panel moved to the very bottom */
body[data-device="mobile"] .aside { order: 2; }
