/* ═══════════════════════════════════════════════════════
   SEONOVA — Bioluminescent Sci-Fi Theme  (shared tokens)
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;700;900&family=Exo+2:ital,wght@0,200;0,300;0,400;1,200&display=swap');

:root {
  --void:       #020510;
  --deep:       #060d1f;
  --panel:      #0a1628;
  --panel2:     #0d1f38;
  --cyan:       #00f5d4;
  --cyan-dim:   rgba(0,245,212,.08);
  --violet:     #b44fff;
  --violet-dim: rgba(180,79,255,.10);
  --amber:      #ffb830;
  --red:        #ff4d6d;
  --green:      #00e676;
  --text:       #c8e0f0;
  --text-dim:   #4a7090;
  --border:     rgba(0,245,212,.18);
  --border-v:   rgba(180,79,255,.20);
  --glow:       0 0 20px rgba(0,245,212,.25);
  --glow-v:     0 0 20px rgba(180,79,255,.30);
  --glow-a:     0 0 20px rgba(255,184,48,.25);
  --mono:       'Share Tech Mono', monospace;
  --display:    'Orbitron', sans-serif;
  --body:       'Exo 2', sans-serif;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: crosshair;
  min-height: 100vh;
}

/* ── Scanlines overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Grid background ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,245,212,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── Orbs ── */
.orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.orb-1 { width:500px;height:500px; background:radial-gradient(circle,rgba(0,245,212,.10) 0%,transparent 70%); top:-150px;left:-150px; animation:drift1 14s ease-in-out infinite; }
.orb-2 { width:450px;height:450px; background:radial-gradient(circle,rgba(180,79,255,.08) 0%,transparent 70%); bottom:-100px;right:-100px; animation:drift2 17s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-20px)} }

/* ── Navbar ── */
.sn-nav {
  position: fixed; top:0;left:0;right:0; z-index:900;
  background: rgba(2,5,16,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem; height: 60px;
}
.sn-nav-logo {
  font-family: var(--display); font-size:.9rem; font-weight:700;
  letter-spacing:.25em; color:var(--cyan); text-shadow:var(--glow);
  text-decoration:none; display:flex; align-items:center; gap:.65rem;
}
.sn-logo-dot {
  width:8px;height:8px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.5);opacity:.4} }

.sn-nav-links { display:flex; gap:2.5rem; list-style:none; }
.sn-nav-links a {
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none; transition:color .2s,text-shadow .2s;
}
.sn-nav-links a:hover { color:var(--cyan); text-shadow:var(--glow); }
.sn-nav-links .sn-user { color:var(--text-dim); font-size:.65rem; letter-spacing:.12em; }

.sn-badge {
  font-size:.55rem; letter-spacing:.12em; padding:.25rem .6rem;
  border:1px solid; font-family:var(--display);
}
.sn-badge-free   { color:var(--violet); border-color:var(--border-v); background:var(--violet-dim); }
.sn-badge-starter{ color:#60a5fa; border-color:rgba(96,165,250,.3); background:rgba(96,165,250,.08); }
.sn-badge-pro    { color:var(--violet); border-color:var(--border-v); background:var(--violet-dim); }
.sn-badge-agency { color:var(--amber); border-color:rgba(255,184,48,.3); background:rgba(255,184,48,.08); }

.sn-nav-cta {
  font-family:var(--display); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--void); background:var(--cyan); border:none;
  padding:.6rem 1.5rem; cursor:crosshair; text-decoration:none;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition:box-shadow .2s,opacity .2s;
}
.sn-nav-cta:hover { box-shadow:0 0 30px rgba(0,245,212,.6); opacity:.9; color:var(--void); }
.sn-nav-cta-ghost {
  font-family:var(--display); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--border); padding:.55rem 1.25rem;
  text-decoration:none; cursor:crosshair; transition:all .2s;
}
.sn-nav-cta-ghost:hover { border-color:var(--cyan); color:var(--cyan); }

/* ── Page wrapper ── */
.sn-page { padding-top:60px; position:relative; z-index:1; }
.sn-container { max-width:1280px; margin:0 auto; padding:2.5rem 2rem; }

/* ── Section tag ── */
.sn-tag {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
}
.sn-tag::before { content:''; display:inline-block; width:24px;height:1px; background:var(--cyan); box-shadow:var(--glow); }

/* ── Panel / Card ── */
.sn-panel {
  background:var(--panel); border:1px solid var(--border);
  position:relative; transition:border-color .3s,box-shadow .3s;
}
.sn-panel:hover { border-color:rgba(0,245,212,.35); }
.sn-panel-v { border-color:var(--border-v); }
.sn-panel-a { border-color:rgba(255,184,48,.25); }
.sn-panel-r { border-color:rgba(255,77,109,.25); }
.sn-panel-g { border-color:rgba(0,230,118,.25); }

/* corner brackets */
.sn-panel::before, .sn-panel::after,
.sn-corners::before, .sn-corners::after {
  content:''; position:absolute; width:12px;height:12px; pointer-events:none;
}
.sn-panel::before { top:-1px;left:-1px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.sn-panel::after  { bottom:-1px;right:-1px; border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan); }

.sn-panel-header {
  padding:1rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,245,212,.03);
}
.sn-panel-title {
  font-family:var(--display); font-size:.65rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.sn-panel-title-v { color:var(--violet); }
.sn-panel-title-a { color:var(--amber); }
.sn-panel-title-r { color:var(--red); }
.sn-panel-title-g { color:var(--green); }
.sn-panel-body { padding:1.5rem; }

/* ── Metric stat cell ── */
.sn-stat {
  text-align:center; padding:1.25rem 1rem;
}
.sn-stat-val {
  font-family:var(--display); font-weight:900; line-height:1;
  color:var(--cyan); text-shadow:0 0 20px rgba(0,245,212,.4);
}
.sn-stat-val-v { color:var(--violet); text-shadow:0 0 20px rgba(180,79,255,.4); }
.sn-stat-val-a { color:var(--amber); text-shadow:var(--glow-a); }
.sn-stat-val-g { color:var(--green); }
.sn-stat-val-r { color:var(--red); }
.sn-stat-label {
  font-size:.55rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-dim); margin-top:.4rem;
}

/* ── Table ── */
.sn-table { width:100%; border-collapse:collapse; }
.sn-table th {
  font-family:var(--display); font-size:.58rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-dim); padding:.75rem 1rem;
  border-bottom:1px solid var(--border); text-align:left;
}
.sn-table td {
  font-size:.78rem; padding:.65rem 1rem;
  border-bottom:1px solid rgba(0,245,212,.06); color:var(--text);
  vertical-align:top;
}
.sn-table tr:last-child td { border-bottom:none; }
.sn-table tr:hover td { background:rgba(0,245,212,.03); }

/* ── Buttons ── */
.sn-btn {
  font-family:var(--display); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; cursor:crosshair;
  border:none; padding:.8rem 2rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; transition:all .25s;
}
.sn-btn-primary {
  background:var(--cyan); color:var(--void);
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.sn-btn-primary:hover { box-shadow:0 0 40px rgba(0,245,212,.55); color:var(--void); opacity:.9; }
.sn-btn-ghost {
  background:transparent; color:var(--violet);
  border:1px solid var(--border-v);
}
.sn-btn-ghost:hover { background:var(--violet-dim); border-color:var(--violet); box-shadow:var(--glow-v); color:var(--violet); }
.sn-btn-outline {
  background:transparent; color:var(--text-dim); border:1px solid var(--border);
}
.sn-btn-outline:hover { border-color:var(--cyan); color:var(--cyan); }
.sn-btn-sm { padding:.5rem 1.25rem; font-size:.55rem; }
.sn-btn-danger { background:transparent; color:var(--red); border:1px solid rgba(255,77,109,.3); }
.sn-btn-danger:hover { background:rgba(255,77,109,.1); border-color:var(--red); }

/* ── Inputs ── */
.sn-field-block { margin-bottom:1.25rem; }
.sn-field-label {
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:.45rem; display:flex; align-items:center; gap:.4rem;
}
.sn-field-label::before { content:'//'; color:var(--cyan); opacity:.6; }
.sn-field-row {
  display:flex; border:1px solid var(--border); transition:border-color .25s,box-shadow .25s;
}
.sn-field-row:focus-within {
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(0,245,212,.15),var(--glow);
}
.sn-field-row.error { border-color:var(--red); }
.sn-field-icon {
  width:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,245,212,.04); border-right:1px solid var(--border);
  color:var(--text-dim); flex-shrink:0; transition:color .25s;
}
.sn-field-row:focus-within .sn-field-icon { color:var(--cyan); }
.sn-field-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--mono); font-size:.82rem;
  padding:.75rem .85rem; letter-spacing:.04em;
}
.sn-field-input::placeholder { color:var(--text-dim); opacity:.7; }
.sn-field-btn {
  width:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-left:1px solid var(--border);
  color:var(--text-dim); cursor:crosshair; transition:color .2s; flex-shrink:0;
}
.sn-field-btn:hover { color:var(--cyan); }
.sn-error-msg {
  font-size:.6rem; letter-spacing:.1em; color:var(--red);
  margin-top:.35rem; display:flex; align-items:center; gap:.35rem;
}
.sn-error-msg::before { content:'▲'; font-size:.5rem; }

/* ── Submit button ── */
.sn-submit {
  width:100%; background:var(--cyan); color:var(--void);
  border:none; font-family:var(--display); font-size:.65rem; font-weight:700;
  letter-spacing:.25em; text-transform:uppercase; padding:.95rem;
  cursor:crosshair; transition:box-shadow .3s,opacity .2s;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.sn-submit:hover { box-shadow:0 0 40px rgba(0,245,212,.55),0 0 80px rgba(0,245,212,.15); opacity:.92; }

/* ── Status badge ── */
.sn-status { display:flex; align-items:center; gap:.4rem; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }
.sn-status-dot { width:5px;height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); animation:pulse 1.5s ease-in-out infinite; }
.sn-blink { animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Hero banner ── */
.sn-hero-banner {
  background:var(--panel); border:1px solid var(--border);
  padding:2rem 2.5rem; margin-bottom:2rem; position:relative;
}
.sn-hero-banner::before { content:''; position:absolute; top:0;left:0; width:3px;height:100%; background:linear-gradient(to bottom,var(--cyan),var(--violet)); }
.sn-hero-title { font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:.08em; color:#fff; margin-bottom:.4rem; }
.sn-hero-sub { font-family:var(--body); font-size:.82rem; color:var(--text-dim); font-weight:300; }

/* ── Alert/flash ── */
.sn-alert {
  padding:.85rem 1.25rem; border:1px solid; margin-bottom:1rem;
  font-size:.72rem; letter-spacing:.05em; display:flex; align-items:center; gap:.75rem;
}
.sn-alert-success { border-color:rgba(0,230,118,.3); background:rgba(0,230,118,.07); color:var(--green); }
.sn-alert-error   { border-color:rgba(255,77,109,.3); background:rgba(255,77,109,.07); color:var(--red); }
.sn-alert-warning { border-color:rgba(255,184,48,.3); background:rgba(255,184,48,.07); color:var(--amber); }
.sn-alert-info    { border-color:var(--border); background:var(--cyan-dim); color:var(--cyan); }
.sn-alert-close { margin-left:auto; background:none; border:none; color:inherit; cursor:crosshair; font-size:1rem; opacity:.6; }
.sn-alert-close:hover { opacity:1; }

/* ── Loading overlay ── */
#loadingOverlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(2,5,16,.92); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; flex-direction:column; gap:1rem;
}
#loadingOverlay.active { display:flex; }
.sn-spinner {
  width:48px;height:48px; border:2px solid var(--border);
  border-top-color:var(--cyan); border-radius:50%;
  animation:spin .8s linear infinite;
  box-shadow:0 0 20px rgba(0,245,212,.3);
}
@keyframes spin { to{transform:rotate(360deg)} }
.sn-loading-text { font-family:var(--display); font-size:.65rem; letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase; }

/* ── Divider ── */
.sn-divider {
  display:flex; align-items:center; gap:1rem;
  margin:1.5rem 0; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim);
}
.sn-divider::before,.sn-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Paywall overlay ── */
.sn-paywall {
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); background:rgba(2,5,16,.75);
  padding:2rem; text-align:center;
}
.sn-paywall-icon { font-size:1.8rem; color:var(--amber); margin-bottom:.75rem; }
.sn-paywall-title { font-family:var(--display); font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.1em; margin-bottom:.5rem; }
.sn-paywall-sub { font-size:.72rem; color:var(--text-dim); font-family:var(--body); margin-bottom:1.25rem; }

/* ── Severity indicators ── */
.sn-sev { font-family:var(--display); font-size:.58rem; font-weight:600; letter-spacing:.1em; }
.sn-sev-error   { color:var(--red); }
.sn-sev-warning { color:var(--amber); }
.sn-sev-info    { color:#60a5fa; }

/* ── Score ring ── */
.sn-ring-wrap { position:relative; display:inline-block; }
.sn-ring-wrap svg { display:block; }
.ring-track  { fill:none; stroke:rgba(0,245,212,.1); stroke-width:6; }
.ring-fill   { fill:none; stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); transform:rotate(-90deg); transform-origin:center; }
.ring-good    { stroke:var(--green); filter:drop-shadow(0 0 8px rgba(0,230,118,.5)); }
.ring-warning { stroke:var(--amber); filter:drop-shadow(0 0 8px rgba(255,184,48,.5)); }
.ring-poor    { stroke:var(--red);   filter:drop-shadow(0 0 8px rgba(255,77,109,.5)); }
.sn-score-num { font-family:var(--display); font-size:2.2rem; font-weight:900; color:#fff; }
.sn-score-denom { font-size:.75rem; color:var(--text-dim); }

/* ── Footer ── */
.sn-footer {
  border-top:1px solid var(--border); padding:1.5rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2;
}
.sn-footer-logo { font-family:var(--display); font-size:.85rem; font-weight:700; letter-spacing:.25em; color:var(--cyan); text-shadow:var(--glow); }
.sn-footer-copy { font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }

/* ── Chart.js overrides ── */
canvas { display:block; }

/* ── Reveal animation ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Upgrade modal ── */
.sn-modal-backdrop { position:fixed; inset:0; z-index:9500; background:rgba(2,5,16,.85); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; }
.sn-modal-backdrop.open { display:flex; }
.sn-modal {
  background:var(--panel); border:1px solid var(--border);
  max-width:440px; width:90%; padding:2.5rem; text-align:center;
  position:relative; animation:slideUp .4s ease both;
  box-shadow:var(--glow);
}
.sn-modal::before { content:''; position:absolute; top:-1px;left:-1px; width:12px;height:12px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.sn-modal::after  { content:''; position:absolute; bottom:-1px;right:-1px; width:12px;height:12px; border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan); }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ═══════════════════════════════════════════════════════
   COMPONENT SPECIFIC STYLES
   ═══════════════════════════════════════════════════════ */

/* ── Dashboard (dashboard.html) ── */
.db-grid { display:grid; grid-template-columns:1fr 380px; gap:1.5rem; align-items:start; }
@media(max-width:1024px){ .db-grid{grid-template-columns:1fr;} }

.sn-upgrade-banner {
  border:1px solid rgba(180,79,255,.35); background:rgba(180,79,255,.06);
  padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; position:relative;
}
.sn-upgrade-banner::before { content:''; position:absolute; left:0;top:0;bottom:0; width:2px; background:var(--violet); }

.sn-stat-strip { display:flex; gap:0; border:1px solid var(--border); }
.sn-stat-strip-item { flex:1; padding:1rem 1.25rem; text-align:center; border-right:1px solid var(--border); }
.sn-stat-strip-item:last-child { border-right:none; }
.sn-stat-strip-val { font-family:var(--display); font-size:1.6rem; font-weight:900; color:var(--cyan); text-shadow:var(--glow); line-height:1; }
.sn-stat-strip-lbl { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-top:.35rem; }

.sn-analyzer { background:var(--panel); border:1px solid var(--border); padding:1.75rem; position:relative; margin-bottom:1.5rem; }
.sn-analyzer::before { content:''; position:absolute;top:0;left:0;width:2px;height:100%; background:linear-gradient(to bottom,var(--cyan),transparent); }
.sn-analyze-row { display:flex; border:1px solid var(--border); transition:border-color .25s,box-shadow .25s; }
.sn-analyze-row:focus-within { border-color:var(--cyan); box-shadow:var(--glow); }
.sn-analyze-input { flex:1; background:transparent; border:none; outline:none; font-family:var(--mono); font-size:.82rem; color:var(--text); padding:.85rem 1rem; }
.sn-analyze-input::placeholder { color:var(--text-dim); }
.sn-analyze-btn {
  background:var(--cyan); color:var(--void); border:none;
  font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; padding:0 1.75rem; cursor:crosshair;
  transition:box-shadow .25s,opacity .2s; white-space:nowrap;
}
.sn-analyze-btn:hover { box-shadow:0 0 30px rgba(0,245,212,.5); }

.sn-audit-row {
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem; border-bottom:1px solid rgba(0,245,212,.06);
  transition:background .2s;
}
.sn-audit-row:last-child { border-bottom:none; }
.sn-audit-row:hover { background:rgba(0,245,212,.03); }
.sn-score-chip {
  font-family:var(--display); font-size:.7rem; font-weight:700;
  width:40px; height:40px; border:1px solid; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.05em;
}
.sn-chip-good    { border-color:var(--green); color:var(--green); }
.sn-chip-warning { border-color:var(--amber); color:var(--amber); }
.sn-chip-poor    { border-color:var(--red);   color:var(--red); }
.sn-audit-url { flex:1; font-size:.78rem; min-width:0; }
.sn-audit-url a { color:var(--text); text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-audit-url a:hover { color:var(--cyan); }
.sn-audit-time { font-size:.62rem; color:var(--text-dim); letter-spacing:.05em; white-space:nowrap; }

.sn-sidebar-panel { background:var(--panel); border:1px solid var(--border); margin-bottom:1.25rem; position:relative; overflow:hidden; }
.sn-sidebar-panel::before { content:''; position:absolute; top:0;left:0; width:100%; height:2px; }
.sn-sidebar-panel.accent-c::before { background:linear-gradient(90deg,var(--cyan),transparent); }
.sn-sidebar-panel.accent-v::before { background:linear-gradient(90deg,var(--violet),transparent); }
.sn-sidebar-panel.accent-a::before { background:linear-gradient(90deg,var(--amber),transparent); }
.sn-sidebar-panel.accent-r::before { background:linear-gradient(90deg,var(--red),transparent); }
.sn-sidebar-panel.accent-g::before { background:linear-gradient(90deg,var(--green),transparent); }
.sn-sidebar-header { padding:.9rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sn-sidebar-body { padding:1.25rem; }

.sn-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-bottom:1.0rem; }
.sn-mini-stat { background:var(--panel); padding:.85rem .5rem; text-align:center; }
.sn-mini-val { font-family:var(--display); font-size:1.2rem; font-weight:900; line-height:1; }
.sn-mini-lbl { font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-top:.3rem; }

.sn-kv-row { display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; border-bottom:1px solid rgba(0,245,212,.06); font-size:.75rem; }
.sn-kv-row:last-child { border-bottom:none; }
.sn-kv-key { color:var(--text-dim); font-size:.65rem; letter-spacing:.08em; }
.sn-kv-val { font-weight:600; }

.sn-kw-table { width:100%; border-collapse:collapse; font-size:.72rem; }
.sn-kw-table th { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); padding:.5rem .6rem; border-bottom:1px solid var(--border); text-align:left; }
.sn-kw-table td { padding:.55rem .6rem; border-bottom:1px solid rgba(0,245,212,.05); color:var(--text); }
.sn-kw-table tr:last-child td { border-bottom:none; }
.sn-kw-table tr:hover td { background:rgba(0,245,212,.03); }

.sn-change-up   { font-size:.62rem; color:var(--green); }
.sn-change-down { font-size:.62rem; color:var(--red); }
.sn-change-new  { font-size:.62rem; color:var(--cyan); }

.sn-local-item { background:rgba(0,245,212,.03); border:1px solid rgba(0,245,212,.08); padding:.75rem 1rem; margin-bottom:.75rem; }
.sn-local-item:last-child { margin-bottom:0; }

.sn-empty { text-align:center; padding:3rem 1rem; }
.sn-empty-icon { width:48px;height:48px; border:1px solid var(--border); display:flex;align-items:center;justify-content:center; margin:0 auto 1rem; color:var(--text-dim); font-size:1.25rem; }
.sn-empty p { font-size:.78rem; color:var(--text-dim); font-family:var(--body); }

/* ── Pricing (pricing.html) ── */
.pricing-hero { text-align:center; padding:3rem 0 2.5rem; }
.pricing-hero-tag { display:inline-flex;align-items:center;gap:.6rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.25rem; }
.pricing-hero-tag::before,.pricing-hero-tag::after { content:'';width:24px;height:1px;background:var(--cyan);box-shadow:var(--glow); }
.pricing-hero h1 { font-family:var(--display);font-size:clamp(2rem,4vw,3.5rem);font-weight:900;color:#fff;letter-spacing:.05em;line-height:1.05;margin-bottom:1rem; }
.pricing-hero h1 span { color:var(--cyan);text-shadow:0 0 40px rgba(0,245,212,.5); }
.pricing-hero p { font-family:var(--body);font-size:.92rem;font-weight:300;color:var(--text-dim);max-width:50ch;margin:0 auto; }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); margin:2.5rem 0 1.5rem; }
.pricing-card {
  background:var(--panel); padding:2rem 1.75rem;
  display:flex; flex-direction:column; gap:.85rem;
  position:relative; overflow:hidden; transition:background .3s;
}
.pricing-card::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:transparent; transition:background .3s; }
.pricing-card:hover { background:var(--panel2); }
.pricing-card.highlighted { background:var(--panel2); }
.pricing-card.highlighted::before { background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.pricing-card.current::before { background:var(--cyan); }

.plan-badge-wrap { position:absolute; top:0;left:50%;transform:translateX(-50%); }
.plan-badge-chip {
  font-family:var(--display); font-size:.55rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; padding:.3rem 1rem;
  background:var(--cyan); color:var(--void); display:inline-block; white-space:nowrap;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
.plan-name { font-family:var(--display); font-size:.85rem; font-weight:700; letter-spacing:.15em; color:#fff; text-transform:uppercase; }
.plan-price { font-family:var(--display); font-size:2.4rem; font-weight:900; color:var(--cyan); text-shadow:var(--glow); line-height:1; }
.plan-price span { font-family:var(--mono); font-size:.75rem; font-weight:400; color:var(--text-dim); }

.feature-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.feature-list li { font-family:var(--body); font-size:.78rem; color:var(--text); display:flex; align-items:flex-start; gap:.5rem; font-weight:300; }
.feature-list li .fi { color:var(--green); flex-shrink:0; margin-top:.1rem; font-size:.75rem; }
.feature-list li .fx { color:var(--red); flex-shrink:0; margin-top:.1rem; font-size:.75rem; opacity:.5; }
.feature-list li.locked { opacity:.4; }

.plan-btn { width:100%; font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:.85rem; border:none; cursor:crosshair; transition:all .25s; text-align:center; text-decoration:none; display:block; }
.plan-btn-primary { background:var(--cyan); color:var(--void); clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); }
.plan-btn-primary:hover { box-shadow:0 0 30px rgba(0,245,212,.5); color:var(--void); }
.plan-btn-outline { background:transparent; border:1px solid var(--border); color:var(--text-dim); }
.plan-btn-outline:hover { border-color:var(--cyan); color:var(--cyan); }
.plan-btn-current { background:rgba(0,245,212,.1); border:1px solid var(--border); color:var(--cyan); cursor:default; }

.skip-bar { text-align:center; margin:.5rem 0 2.5rem; }
.skip-link { background:transparent; border:none; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--text-dim); cursor:crosshair; text-decoration:none; transition:color .2s; }
.skip-link:hover { color:var(--cyan); }

.compare-wrap { background:var(--panel); border:1px solid var(--border); padding:2rem; margin-bottom:3rem; position:relative; }
.compare-wrap::before { content:''; position:absolute;top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.compare-wrap::after  { content:''; position:absolute;bottom:-1px;right:-1px; width:14px;height:14px; border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan); }
.compare-title { font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.2em; color:#fff; text-transform:uppercase; margin-bottom:1.5rem; }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th { font-family:var(--display); font-size:.58rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding:.65rem 1rem; border-bottom:1px solid var(--border); text-align:center; color:var(--text-dim); }
.compare-table th:first-child { text-align:left; }
.compare-table td { font-size:.75rem; padding:.6rem 1rem; border-bottom:1px solid rgba(0,245,212,.05); color:var(--text-dim); text-align:center; }
.compare-table td:first-child { text-align:left; color:var(--text); font-family:var(--body); font-weight:300; }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:hover td { background:rgba(0,245,212,.025); }
.ct-check { color:var(--green); font-size:.85rem; }
.ct-cross { color:var(--red); opacity:.5; font-size:.85rem; }

/* ── Backlink Network (backlink_network.html) ── */
.graph-panel {
  background: var(--panel); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  box-shadow: var(--glow);
}
.graph-panel::before { content:''; position:absolute; top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); z-index:2; }
.graph-panel::after  { content:''; position:absolute; bottom:-1px;right:-1px; width:14px;height:14px; border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan); z-index:2; }

.graph-toolbar {
  padding: .85rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,245,212,.03);
}
.graph-loading {
  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align: center; z-index: 3;
}
.graph-loading-ring {
  width: 40px; height: 40px; border: 1.5px solid var(--border);
  border-top-color: var(--cyan); border-radius: 50%;
  animation: spin .8s linear infinite; margin: 0 auto .75rem;
  box-shadow: 0 0 20px rgba(0,245,212,.3);
}
.graph-loading-text { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }

/* ── SEO Report (report.html) ── */
.report-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
@media(max-width:900px){ .report-grid{grid-template-columns:1fr;} }

.report-col3 { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1.5rem; }
@media(max-width:700px){ .report-col3{grid-template-columns:repeat(2,1fr);} }

.sn-metric-card { background:var(--panel); padding:1.25rem 1rem; text-align:center; position:relative; transition:background .25s; }
.sn-metric-card:hover { background:var(--panel2); }
.sn-metric-card::after { content:''; position:absolute; bottom:0;left:0;right:0; height:2px; background:transparent; transition:background .3s; }
.sn-metric-card:hover::after { background:var(--cyan); }
.sn-mc-val { font-family:var(--display); font-size:1.6rem; font-weight:900; line-height:1; color:var(--cyan); text-shadow:var(--glow); margin-bottom:.3rem; }
.sn-mc-label { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); }
.sn-mc-sub { font-size:.6rem; color:var(--text-dim); margin-top:.25rem; }

.sn-score-panel { background:var(--panel); border:1px solid var(--border); padding:2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; position:relative; }
.sn-score-panel::before { content:''; position:absolute;top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.ring-center { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); text-align:center; }

.meta-panel { background:var(--panel); border:1px solid var(--border); position:relative; }
.meta-panel::before { content:''; position:absolute;top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.meta-panel-header { padding:1rem 1.5rem; border-bottom:1px solid var(--border); font-family:var(--display); font-size:.65rem; font-weight:600; letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; }
.meta-panel-body { padding:1.5rem; }
.meta-field-label { font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; }
.meta-field-label::before { content:'//'; color:var(--cyan); opacity:.6; }
.meta-field-value { border-left:2px solid var(--cyan); padding-left:.85rem; font-size:.82rem; color:var(--text); font-family:var(--body); font-weight:300; line-height:1.6; margin-bottom:.5rem; }
.meta-progress { height:2px; background:rgba(0,245,212,.1); margin-bottom:.4rem; }
.meta-progress-bar { height:100%; transition:width 1s ease; }
.meta-hint { font-size:.58rem; color:var(--text-dim); letter-spacing:.06em; }

.sn-section-hdr { display:flex; align-items:center; gap:.75rem; margin:2.5rem 0 1rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; }
.sn-section-hdr-title { font-family:var(--display); font-size:.82rem; font-weight:700; letter-spacing:.15em; color:#fff; text-transform:uppercase; }

.tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1.5rem; }
@media(max-width:700px){ .tech-grid{grid-template-columns:repeat(2,1fr);} }
.tech-cell { background:var(--panel); padding:1.25rem 1rem; text-align:center; position:relative; }
.tech-cell::after { content:''; position:absolute; bottom:0;left:0;right:0; height:2px; }
.tech-cell.ok::after { background:var(--green); }
.tech-cell.fail::after { background:var(--red); }
.tech-cell.warn::after { background:var(--amber); }
.tech-cell-icon { font-size:1.4rem; margin-bottom:.5rem; }
.tech-cell-label { font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.25rem; }
.tech-cell-status { font-family:var(--display); font-size:.65rem; font-weight:600; letter-spacing:.08em; }

.action-panel { background:var(--panel); border:1px solid var(--border); margin-bottom:1.5rem; position:relative; overflow:hidden; }
.action-panel::before { content:''; position:absolute;top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--red);border-left:2px solid var(--red); }
.action-panel-hdr { padding:1rem 1.5rem; border-bottom:1px solid var(--border); font-family:var(--display); font-size:.65rem; font-weight:600; letter-spacing:.2em; color:var(--red); text-transform:uppercase; }

.suggest-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
@media(max-width:768px){ .suggest-grid{grid-template-columns:1fr;} }
.suggest-card { background:var(--panel); border:1px solid var(--border); position:relative; }
.suggest-card::before { content:''; position:absolute;top:0;left:0; width:2px;height:100%; background:transparent; transition:background .3s; }
.suggest-card:hover::before { background:var(--violet); }
.suggest-card-hdr { padding:1rem 1.5rem; border-bottom:1px solid var(--border); font-family:var(--display); font-size:.65rem; font-weight:600; letter-spacing:.15em; color:var(--violet); text-transform:uppercase; display:flex; align-items:center; gap:.5rem; }
.suggest-card-body { padding:1.25rem 1.5rem; }
.suggest-item { padding:.85rem 0; border-bottom:1px solid rgba(0,245,212,.06); }
.suggest-item:last-child { border-bottom:none; }
.suggest-issue { font-size:.78rem; font-weight:600; color:#fff; margin-bottom:.4rem; display:flex; align-items:flex-start; gap:.5rem; }
.suggest-text { font-family:var(--body); font-size:.75rem; color:var(--text-dim); font-weight:300; line-height:1.6; margin-bottom:.5rem; }
.suggest-code { background:var(--deep); border:1px solid var(--border); padding:.75rem 1rem; font-size:.7rem; color:var(--cyan); font-family:var(--mono); overflow-x:auto; position:relative; }
.code-label { font-size:.52rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.4rem; }

.fix-card { background:var(--panel); border:1px solid rgba(180,79,255,.25); padding:1.5rem; margin-bottom:1rem; position:relative; }
.fix-card::before { content:''; position:absolute;left:0;top:0;bottom:0; width:2px;background:var(--violet); }
.fix-card-title { font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--violet); margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.fix-code { background:var(--deep); border:1px solid var(--border); padding:1rem; font-size:.72rem; color:var(--text); font-family:var(--mono); overflow-x:auto; position:relative; white-space:pre-wrap; }
.copy-btn { position:absolute; top:.5rem; right:.5rem; font-family:var(--display); font-size:.5rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:.3rem .75rem; cursor:crosshair; transition:all .2s; }
.copy-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.copy-btn.copied { border-color:var(--green); color:var(--green); }

.comp-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.08em; color:#60a5fa; background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.2); padding:.35rem .85rem; margin:.25rem; font-family:var(--mono); }

.ai-section-banner { background:rgba(180,79,255,.06); border:1px solid var(--border-v); padding:1rem 1.5rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:.75rem; }
.ai-section-banner-title { font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.15em; color:var(--violet); text-transform:uppercase; }

.gen-meta-label { font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.4rem; }
.gen-meta-val { background:var(--deep); border:1px solid var(--border); padding:.75rem 1rem; font-size:.82rem; color:var(--text); font-family:var(--body); font-weight:300; line-height:1.6; margin-bottom:1rem; }

/* ── Registration (register.html) ── */
.register-page {
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem;
}
.register-panel {
  width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--glow), 0 40px 80px rgba(0,0,0,.6);
  position: relative;
  animation: slideUp .6s ease both;
}
.register-panel::before { content:''; position:absolute; top:-1px;left:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-left:2px solid var(--cyan); }
.register-panel::after  { content:''; position:absolute; bottom:-1px;right:-1px; width:14px;height:14px; border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan); }
.rp-corner-tr { position:absolute; top:-1px;right:-1px; width:14px;height:14px; border-top:2px solid var(--cyan);border-right:2px solid var(--cyan); }
.rp-corner-bl { position:absolute; bottom:-1px;left:-1px; width:14px;height:14px; border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan); }

.rp-header {
  padding:1.4rem 2rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,245,212,.03);
}
.rp-logo { font-family:var(--display); font-size:.9rem; font-weight:700; letter-spacing:.25em; color:var(--cyan); text-shadow:var(--glow); display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.rp-body { padding:2rem 2rem 1.75rem; }
.rp-title { font-family:var(--display); font-size:.95rem; font-weight:700; letter-spacing:.15em; color:#fff; margin-bottom:.35rem; }
.rp-sub { font-family:var(--body); font-size:.75rem; font-weight:300; color:var(--text-dim); margin-bottom:1.75rem; }
.rp-bottom { border-top:1px solid var(--border); padding:.75rem 2rem; display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,.2); }
.rp-bottom-label { font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); }
.rp-bottom-secure { display:flex; align-items:center; gap:.35rem; font-size:.5rem; letter-spacing:.12em; color:var(--text-dim); }
.rp-bottom-secure i { color:var(--cyan); }


/* ── Responsive ── */
@media (max-width:768px) {
  .sn-nav { padding:0 1.25rem; }
  .sn-nav-links { display:none; }
  .sn-container { padding:1.5rem 1rem; }
  .sn-footer { flex-direction:column; gap:.5rem; text-align:center; }
}

/* ── PDF Report (report_pdf_client.html) ── */
.pdf-body { font-family: Helvetica, Arial, sans-serif; color: #1a1a2e; font-size: 12px; margin:0; padding:0; }
.pdf-header { background: #6c63ff; color: #fff; padding: 28px 36px 20px; }
.pdf-header h1 { margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:0.5px; }
.pdf-header p  { margin:0; font-size:11px; color: #f0f0f0; }
.pdf-badge-score { background: #5a53d6; padding:4px 16px; font-size:28px; font-weight:800; color:#fff; }
.pdf-section { padding:18px 36px 6px; }
.pdf-section h2 { font-size:14px; font-weight:700; color:#6c63ff; border-bottom:2px solid #e8e8f7; padding-bottom:5px; margin:0 0 10px; text-transform:uppercase; letter-spacing:0.5px; }
table.pdf-metrics-grid { width:100%; border-collapse:separate; border-spacing:8px; }
table.pdf-metrics-grid td { background:#f4f3ff; border-radius:8px; padding:10px 8px; text-align:center; vertical-align:middle; width: 16%; }
.pdf-metric-val { font-size:20px; font-weight:800; color:#6c63ff; }
.pdf-metric-lbl { font-size:9px; color:#666; text-transform:uppercase; letter-spacing:0.5px; margin-top:3px; }
table.pdf-issue-table { width:100%; border-collapse:collapse; margin-top:6px; }
table.pdf-issue-table th { background:#6c63ff; color:#fff; padding:7px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; }
table.pdf-issue-table td { padding:8px 10px; border-bottom:1px solid #eee; font-size:11px; vertical-align:top; }
table.pdf-speed-table { width:100%; border-collapse:separate; border-spacing: 5px; text-align:center; }
table.pdf-speed-table td { padding:8px; background:#f4f3ff; border-radius:8px; width: 25%; }
.pdf-sev-error   { color:#e74c3c; font-weight:700; }
.pdf-sev-warning { color:#f39c12; font-weight:700; }
.pdf-sev-info    { color:#3498db; font-weight:700; }
.pdf-impact-badge { background:#fde8e8; color:#c0392b; padding:2px 8px; font-size:10px; font-weight:600; }
.pdf-imp-medium { background:#fef3cd; color:#8a6d00; }
.pdf-imp-low    { background:#d0f0ff; color:#1a6e99; }
.pdf-recommendation-box { background:#f4f3ff; border-left:4px solid #6c63ff; padding:10px 14px; margin:4px 0 10px; font-size:11px; color:#333; }
.pdf-footer { background:#1a1a2e; color:#aaa; text-align:center; font-size:9px; padding:10px; }
.pdf-keyword-pill { background:#e8e8f7; padding:3px 12px; margin:2px; font-size:10px; color:#6c63ff; font-weight:600; }
.pdf-meta-label { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.pdf-meta-value { background:#f4f3ff; padding:6px 10px; font-size:11px; color:#1a1a2e; margin-bottom:8px; }
.pdf-status-ok   { color:#27ae60; font-weight:700; }
.pdf-status-fail { color:#e74c3c; font-weight:700; }
.pdf-divider { border-top:1px solid #e8e8f7; margin:8px 36px; }
/* ── Utility Classes ── */
.text-cyan { color: var(--cyan); }
.text-violet { color: var(--violet); }
.text-amber { color: var(--amber); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-dim { color: var(--text-dim); }

.border-cyan { border-color: var(--cyan); }
.border-violet { border-color: var(--violet); }
.border-amber { border-color: var(--amber); }
.border-red { border-color: var(--red); }
.border-green { border-color: var(--green); }

@page { size: A4; margin:0; }

/* ═══════════════════════════════════════════════════════
   SaaS DASHBOARD EXTRAS
   ═══════════════════════════════════════════════════════ */

/* FROM super_admin_dashboard.html */
/* ── Super Admin Dashboard ── */
.sa-hero {
  margin-bottom: 2rem;
}
.sa-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2);
  padding: 0.25rem 0.8rem; border-radius: 999px; margin-bottom: 0.75rem;
}
.sa-title {
  font-family: var(--display); font-size: 1.8rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-hi); margin-bottom: 0.35rem;
}
.sa-sub { font-size: 0.85rem; color: var(--text-md); }

/* ── Metric Cards ── */
.sa-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media(max-width:900px) { .sa-metrics { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px) { .sa-metrics { grid-template-columns: 1fr 1fr; } }

.sa-metric-card {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px;
  padding: 1.4rem 1.5rem; position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.sa-metric-card:hover { border-color: var(--glass-border-h); transform: translateY(-2px); }
.sa-metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 18px 18px 0 0;
}
.sa-metric-card.c-blue::before  { background: linear-gradient(90deg, var(--indigo), var(--sky)); }
.sa-metric-card.c-green::before { background: linear-gradient(90deg, var(--emerald), var(--sky)); }
.sa-metric-card.c-violet::before{ background: linear-gradient(90deg, var(--lilac), var(--indigo)); }
.sa-metric-card.c-amber::before { background: linear-gradient(90deg, var(--amber), var(--rose)); }

.sa-metric-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: 1rem;
}
.c-blue  .sa-metric-icon { background: rgba(108,99,255,0.15); color: var(--indigo); }
.c-green .sa-metric-icon { background: rgba(52,211,153,0.15); color: var(--emerald); }
.c-violet .sa-metric-icon { background: rgba(192,132,252,0.15); color: var(--lilac); }
.c-amber .sa-metric-icon { background: rgba(251,191,36,0.15); color: var(--amber); }

.sa-metric-val {
  font-family: var(--display); font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text-hi); line-height: 1; margin-bottom: 0.3rem;
}
.sa-metric-lbl { font-size: 0.74rem; color: var(--text-md); font-weight: 400; }

/* ── Tables ── */
.sa-section { margin-bottom: 2.5rem; }
.sa-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem;
}
.sa-section-title {
  font-family: var(--display); font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-hi);
  display: flex; align-items: center; gap: 0.5rem;
}
.sa-section-title i { color: var(--sky); font-size: 1rem; }
.sa-count-badge {
  font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.65rem;
  background: rgba(56,189,248,0.1); color: var(--sky); border: 1px solid rgba(56,189,248,0.2);
  border-radius: 999px;
}

.sa-table-wrap {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden;
}
.sa-table-wrap table { width: 100%; border-collapse: collapse; }
.sa-table-wrap thead th {
  padding: 0.85rem 1.25rem; font-family: var(--display); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-lo); border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02); text-align: left;
}
.sa-table-wrap tbody td {
  padding: 0.8rem 1.25rem; font-size: 0.82rem; color: var(--text-md);
  border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle;
}
.sa-table-wrap tbody tr:last-child td { border-bottom: none; }
.sa-table-wrap tbody tr:hover td { background: rgba(255,255,255,0.02); }
.sa-table-wrap tbody td.hi { color: var(--text-hi); font-weight: 500; }

/* Status & Plan badges */
.sa-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.22rem 0.7rem; border-radius: 999px; text-transform: capitalize;
}
.sa-badge-active  { background: rgba(52,211,153,0.1);  color: var(--emerald); border: 1px solid rgba(52,211,153,0.25); }
.sa-badge-inactive{ background: rgba(248,113,113,0.1); color: var(--rose);    border: 1px solid rgba(248,113,113,0.25); }
.sa-badge-free    { background: rgba(160,185,230,0.08);color: var(--text-lo); border: 1px solid rgba(160,185,230,0.15); }
.sa-badge-starter { background: rgba(56,189,248,0.1);  color: var(--sky);    border: 1px solid rgba(56,189,248,0.2); }
.sa-badge-pro     { background: rgba(108,99,255,0.1);  color: var(--indigo); border: 1px solid rgba(108,99,255,0.2); }
.sa-badge-agency  { background: rgba(192,132,252,0.1); color: var(--lilac);  border: 1px solid rgba(192,132,252,0.2); }

.sa-view-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 500; padding: 0.35rem 0.85rem;
  background: rgba(108,99,255,0.1); color: var(--indigo);
  border: 1px solid rgba(108,99,255,0.2); border-radius: 8px; text-decoration: none;
  transition: all 0.2s;
}
.sa-view-btn:hover {
  background: rgba(108,99,255,0.22); border-color: rgba(108,99,255,0.45);
  transform: translateY(-1px); color: var(--lilac);
}

.sa-avatar {
  width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
  background: linear-gradient(135deg, var(--indigo), var(--lilac)); color: white; flex-shrink: 0;
  margin-right: 0.6rem;
}
.sa-user-cell { display: flex; align-items: center; }

/* FROM admin_user_detail.html */
.ud-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-md); text-decoration: none; margin-bottom: 1.5rem; transition: color 0.2s; }
.ud-back:hover { color: var(--text-hi); }

.ud-hero { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
.ud-avatar-lg {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo), var(--lilac));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: white;
  box-shadow: 0 0 30px rgba(108,99,255,0.3);
}
.ud-hero-name {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-hi); margin-bottom: 0.2rem;
}
.ud-hero-sub { font-size: 0.78rem; color: var(--text-md); }
.ud-status-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 600; padding: 0.28rem 0.8rem; border-radius: 999px;
}
.ud-status-active { background: rgba(52,211,153,0.1); color: var(--emerald); border: 1px solid rgba(52,211,153,0.25); }
.ud-status-inactive { background: rgba(248,113,113,0.1); color: var(--rose); border: 1px solid rgba(248,113,113,0.25); }

.ud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media(max-width:700px) { .ud-grid { grid-template-columns: 1fr; } }

.ud-card {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden;
  transition: border-color 0.25s;
}
.ud-card:hover { border-color: var(--glass-border-h); }
.ud-card-hdr {
  padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  font-family: var(--display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lo);
  display: flex; align-items: center; gap: 0.4rem;
}
.ud-card-hdr i { font-size: 0.85rem; color: var(--sky); }
.ud-card-body { padding: 1.25rem 1.4rem; }

.ud-kv { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ud-kv:last-child { border-bottom: none; }
.ud-kv-k { font-size: 0.76rem; color: var(--text-md); }
.ud-kv-v { font-size: 0.8rem; color: var(--text-hi); font-weight: 500; text-align: right; }

.ud-badge {
  display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 600;
  padding: 0.2rem 0.65rem; border-radius: 999px; text-transform: capitalize;
}
.ud-badge-role { background: rgba(192,132,252,0.1); color: var(--lilac); border: 1px solid rgba(192,132,252,0.25); }
.ud-badge-free { background: rgba(160,185,230,0.08); color: var(--text-lo); border: 1px solid rgba(160,185,230,0.15); }
.ud-badge-starter { background: rgba(56,189,248,0.1); color: var(--sky); border: 1px solid rgba(56,189,248,0.2); }
.ud-badge-pro { background: rgba(108,99,255,0.1); color: var(--indigo); border: 1px solid rgba(108,99,255,0.2); }
.ud-badge-agency { background: rgba(192,132,252,0.1); color: var(--lilac); border: 1px solid rgba(192,132,252,0.25); }

/* Scans table */
.ud-table-card {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden;
}
.ud-table-hdr {
  padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  display: flex; align-items: center; justify-content: space-between;
}
.ud-table-title {
  font-family: var(--display); font-size: 0.82rem; font-weight: 700;
  color: var(--text-hi); display: flex; align-items: center; gap: 0.4rem;
}
.ud-table-title i { color: var(--indigo); }
.ud-scan-count {
  font-size: 0.7rem; color: var(--text-md);
  background: rgba(108,99,255,0.1); border: 1px solid rgba(108,99,255,0.2);
  padding: 0.2rem 0.65rem; border-radius: 999px;
}

.ud-table table { width: 100%; border-collapse: collapse; }
.ud-table thead th {
  padding: 0.75rem 1.4rem; font-family: var(--display); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-lo); background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--glass-border); text-align: left;
}
.ud-table tbody td {
  padding: 0.85rem 1.4rem; font-size: 0.81rem; color: var(--text-md);
  border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle;
}
.ud-table tbody tr:last-child td { border-bottom: none; }
.ud-table tbody tr:hover td { background: rgba(255,255,255,0.012); }

.ud-score-pill {
  display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: 999px;
}
.ud-score-good    { background: rgba(52,211,153,0.12); color: var(--emerald); border: 1px solid rgba(52,211,153,0.25); }
.ud-score-warning { background: rgba(251,191,36,0.12); color: var(--amber); border: 1px solid rgba(251,191,36,0.25); }
.ud-score-bad     { background: rgba(248,113,113,0.1); color: var(--rose); border: 1px solid rgba(248,113,113,0.25); }

.ud-url-link { color: var(--sky); text-decoration: none; font-size: 0.8rem; }
.ud-url-link:hover { color: var(--lilac); text-decoration: underline; }

/* FROM org_dashboard.html */
/* ── Org Dashboard ── */
.od-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.od-org-name {
  font-family: var(--display); font-size: 1.8rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text-hi); margin-bottom: 0.25rem;
}
.od-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--emerald); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.2);
  padding: 0.22rem 0.75rem; border-radius: 999px; margin-bottom: 0.6rem;
}
.od-cta-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--body); font-size: 0.82rem; font-weight: 600; color: white;
  background: linear-gradient(135deg, var(--indigo), var(--lilac));
  padding: 0.65rem 1.3rem; border-radius: 10px; text-decoration: none;
  box-shadow: 0 4px 16px rgba(108,99,255,0.3); transition: all 0.2s; border: none; cursor: pointer;
}
.od-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(108,99,255,0.5); color: white; }

/* ── Stat Cards ── */
.od-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 2rem; }
@media(max-width:700px) { .od-stats { grid-template-columns: 1fr 1fr; } }

.od-stat-card {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; padding: 1.4rem 1.5rem;
  transition: border-color 0.25s, transform 0.25s; position: relative; overflow: hidden;
}
.od-stat-card:hover { border-color: var(--glass-border-h); transform: translateY(-2px); }
.od-stat-lbl { font-size: 0.73rem; color: var(--text-md); margin-bottom: 0.55rem; }
.od-stat-val {
  font-family: var(--display); font-size: 1.9rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-hi); line-height: 1; margin-bottom: 0.4rem;
}
.od-stat-sub { font-size: 0.7rem; color: var(--text-lo); }

/* Progress bar */
.od-progress-track {
  width: 100%; height: 5px; background: rgba(255,255,255,0.07); border-radius: 999px; margin-top: 0.6rem; overflow: hidden;
}
.od-progress-fill {
  height: 100%; border-radius: 999px; transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--indigo), var(--lilac));
}
.od-progress-fill.warn { background: linear-gradient(90deg, var(--amber), var(--rose)); }
.od-progress-fill.full { background: linear-gradient(90deg, var(--rose), #f43f5e); }

/* Plan badge */
.od-plan-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.9rem;
  border-radius: 999px; background: rgba(108,99,255,0.12);
  color: var(--indigo); border: 1px solid rgba(108,99,255,0.25);
}

/* ── Member Table ── */
.od-table-section {
  background: rgba(10,15,46,0.55); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden;
}
.od-table-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
}
.od-table-title {
  font-family: var(--display); font-size: 0.82rem; font-weight: 700;
  color: var(--text-hi); display: flex; align-items: center; gap: 0.4rem;
}
.od-table-title i { color: var(--emerald); }

.od-table-wrap table { width: 100%; border-collapse: collapse; }
.od-table-wrap thead th {
  padding: 0.75rem 1.4rem; font-family: var(--display); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-lo); background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--glass-border); text-align: left;
}
.od-table-wrap tbody td {
  padding: 0.9rem 1.4rem; font-size: 0.82rem; color: var(--text-md);
  border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle;
}
.od-table-wrap tbody tr:last-child td { border-bottom: none; }
.od-table-wrap tbody tr:hover td { background: rgba(255,255,255,0.015); }

.od-member-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--indigo), var(--lilac));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; margin-right: 0.65rem;
}
.od-member-cell { display: flex; align-items: center; }

.od-role-badge {
  font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.65rem;
  border-radius: 999px; text-transform: capitalize;
}
.od-role-admin { background: rgba(251,191,36,0.12); color: var(--amber); border: 1px solid rgba(251,191,36,0.25); }
.od-role-member { background: rgba(160,185,230,0.08); color: var(--text-md); border: 1px solid var(--glass-border); }

.od-remove-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; padding: 0.3rem 0.75rem;
  background: rgba(248,113,113,0.07); color: var(--rose);
  border: 1px solid rgba(248,113,113,0.2); border-radius: 7px; text-decoration: none;
  transition: all 0.2s; cursor: pointer;
}
.od-remove-btn:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.4); }

/* Invite Modal */
.od-modal-backdrop {
  position: fixed; inset: 0; background: rgba(3,5,18,0.8); backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; z-index: 999;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.od-modal-backdrop.open { opacity: 1; pointer-events: all; }
.od-modal {
  background: rgba(10,15,46,0.95); border: 1px solid var(--glass-border);
  border-radius: 22px; padding: 2rem 2rem 1.75rem; max-width: 420px; width: 90%;
  box-shadow: 0 40px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: modalIn 0.28s ease; position: relative;
}
.od-modal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(108,99,255,0.7), rgba(192,132,252,0.5), transparent);
}
@keyframes modalIn { from { transform: scale(0.94) translateY(12px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
.od-modal-title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 800;
  color: var(--text-hi); margin-bottom: 0.3rem; letter-spacing: -0.01em;
}
.od-modal-sub { font-size: 0.78rem; color: var(--text-md); margin-bottom: 1.5rem; }
.od-modal-close {
  position: absolute; top: 1.1rem; right: 1.25rem; background: none; border: none;
  color: var(--text-lo); font-size: 1rem; cursor: pointer; padding: 0.2rem;
  transition: color 0.2s;
}
.od-modal-close:hover { color: var(--text-hi); }

.od-field { margin-bottom: 1rem; }
.od-field label {
  display: block; font-size: 0.76rem; color: var(--text-md);
  font-weight: 500; margin-bottom: 0.4rem;
}
.od-field input, .od-field select {
  width: 100%; padding: 0.7rem 0.95rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  border-radius: 9px; color: var(--text-hi); font-family: var(--body); font-size: 0.85rem;
  transition: border-color 0.2s; outline: none;
}
.od-field input:focus, .od-field select:focus { border-color: rgba(108,99,255,0.55); }
.od-field input::placeholder { color: var(--text-lo); }
.od-field select option { background: #0a0f28; }

.od-modal-actions { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.od-btn-send {
  flex: 1; padding: 0.75rem; border: none; border-radius: 9px;
  background: linear-gradient(135deg, var(--indigo), var(--lilac)); color: white;
  font-family: var(--body); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  box-shadow: 0 4px 14px rgba(108,99,255,0.35); transition: all 0.2s;
}
.od-btn-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(108,99,255,0.5); }
.od-btn-cancel-m {
  padding: 0.75rem 1rem; border: 1px solid var(--glass-border); border-radius: 9px;
  background: rgba(255,255,255,0.03); color: var(--text-md); font-family: var(--body);
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.od-btn-cancel-m:hover { border-color: var(--glass-border-h); color: var(--text-hi); }

/* No org empty state */
.od-empty {
  text-align: center; padding: 5rem 2rem; max-width: 480px; margin: 0 auto;
}
.od-empty-icon { font-size: 3.5rem; margin-bottom: 1.25rem; display: block; }
.od-empty-title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 800;
  color: var(--text-hi); margin-bottom: 0.6rem; letter-spacing: -0.02em;
}
.od-empty-sub { font-size: 0.85rem; color: var(--text-md); line-height: 1.6; margin-bottom: 1.75rem; }