:root {
  --bg: #06070d;
  --bg-2: #0a0c16;
  --panel: rgba(22, 25, 41, 0.55);
  --panel-solid: #141726;
  --panel-border: rgba(255, 255, 255, 0.09);
  --panel-border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef0fa;
  --text-dim: #9aa2c0;
  --accent: #7c5cff;
  --accent-2: #22d3ee;
  --accent-soft: rgba(124, 92, 255, 0.16);
  --green: #34e2a0;
  --amber: #ffbe55;
  --red: #ff5d75;
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading-ar: "Noto Sans Arabic", "Space Grotesk", sans-serif;
  --font-body-ar: "Noto Sans Arabic", "Inter", sans-serif;
  font-family: var(--font-body);
}

/* ---------- Arabic / RTL ----------
   Space Grotesk/Inter have no Arabic glyphs, so Arabic text falls back to
   whatever the OS provides unless we swap the font family; Noto Sans
   Arabic (loaded in index.html) covers both headings and body text. Layout
   direction comes from JS setting <html dir="rtl">/lang="ar"> — flexbox
   rows already mirror automatically under dir="rtl", so most of this file
   needs no changes; only physical (non-logical) left/right properties
   below need an explicit flip. */
html[lang="ar"] { font-family: var(--font-body-ar); }
html[lang="ar"] .brand-name,
html[lang="ar"] .dropzone-title,
html[lang="ar"] .report-filename,
html[lang="ar"] #gauge-score,
html[lang="ar"] .provider-breakdown h2,
html[lang="ar"] .signals-col h2,
html[lang="ar"] .caveats-box h2,
html[lang="ar"] .provider-breakdown-score {
  font-family: var(--font-heading-ar);
}

.lang-toggle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-family: var(--font-body);
}
.lang-toggle:hover {
  border-color: var(--accent-2);
  background: rgba(34, 211, 238, 0.08);
  transform: translateY(-1px);
}

.result-language-note {
  margin: -8px 0 18px;
  font-size: 12.5px;
  color: var(--amber);
}

/* This app has one deliberate visual identity (dark, glass, gradient-lit —
   see the redesign's own rationale in app.js's header comment) rather than
   a light/dark toggle, so no prefers-color-scheme override here. */

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Ambient background: layered blurred gradient orbs + a faint
   perspective grid, all fixed and non-interactive, for a sense of depth
   behind the glass panels without any imagery we don't actually have. ---------- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.bg-orb-1 {
  width: 620px; height: 620px;
  top: -220px; left: -160px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  animation: drift1 26s ease-in-out infinite;
}
.bg-orb-2 {
  width: 560px; height: 560px;
  top: 10%; right: -220px;
  background: radial-gradient(circle at 60% 40%, var(--accent-2), transparent 70%);
  animation: drift2 32s ease-in-out infinite;
}
.bg-orb-3 {
  width: 480px; height: 480px;
  bottom: -220px; left: 30%;
  background: radial-gradient(circle at 50% 50%, #ff5da2, transparent 70%);
  opacity: 0.28;
  animation: drift3 30s ease-in-out infinite;
}
.bg-grid {
  position: absolute;
  inset: -10% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 10%, #000 40%, transparent 85%);
  transform: perspective(600px) rotateX(55deg);
  transform-origin: top center;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 60px) scale(1.05); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none; }
}

.page {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ---------- Header / brand ---------- */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  display: inline-flex;
  filter: drop-shadow(0 4px 16px rgba(124, 92, 255, 0.45));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.brand:hover .brand-mark {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 20px rgba(34, 211, 238, 0.55));
}
.brand-mark-small { filter: drop-shadow(0 2px 8px rgba(124, 92, 255, 0.4)); }
/* The logo's own ink fills ~98% of its SVG viewBox top-to-bottom (almost
   no internal padding), while the adjacent text sits inside font
   line-boxes with real ascender/descender padding — so centering the two
   elements' BOXES (align-items: center) still leaves the logo looking
   like it "sinks" below the text block's visible ink. Shrunk and nudged
   up slightly to optically balance against the text instead of matching
   it box-for-box. */
.brand-logo { display: block; height: 26px; width: auto; margin-top: -3px; }
.brand-mark-small .brand-logo { height: 19px; margin-top: -1px; }
/* Two variants of the DeepFake wordmark: white for this app's dark theme
   on screen, black for the printed report (which forces a white page —
   see @media print below). Only one is ever visible at a time. */
.brand-logo-print { display: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.brand-name-accent {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-tagline {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-strong);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.site-link:hover {
  border-color: var(--accent-2);
  background: rgba(34, 211, 238, 0.08);
  transform: translateY(-1px);
}
.site-link-logo { display: block; height: 13px; width: auto; }
.site-link-arrow { display: inline-block; font-size: 13px; transition: transform 0.2s ease; }
.site-link:hover .site-link-arrow { transform: translate(2px, -2px); }

.disclaimer-chip {
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 190, 85, 0.1);
  color: var(--amber);
  border: 1px solid rgba(255, 190, 85, 0.3);
  white-space: nowrap;
  cursor: help;
}

.hero-subtitle {
  color: var(--text-dim);
  font-size: 15px;
  max-width: 640px;
  margin: 18px 0 10px;
  line-height: 1.5;
}

.about-blurb {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 640px;
  margin: 0 0 30px;
  line-height: 1.55;
  opacity: 0.85;
}

/* ---------- Glass panels ---------- */
.panel {
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}
.tilt-panel { transition: transform 0.25s ease; transform-style: preserve-3d; }

.dropzone {
  border: 1.5px dashed var(--panel-border-strong);
  border-radius: var(--radius-sm);
  padding: 56px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  background: rgba(255, 255, 255, 0.015);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent-2);
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.08), rgba(34, 211, 238, 0.06));
  transform: translateY(-2px);
}
.dropzone-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -6px rgba(124, 92, 255, 0.6);
}
.dropzone-icon { font-size: 22px; color: #05060c; font-weight: 700; }
.dropzone-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}
.dropzone-types {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.error-text { color: var(--red); margin-top: 14px; font-size: 14px; }

/* ---------- Access-code gate ---------- */
.access-gate-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
}
.access-gate-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 24px;
  text-align: center;
}
.access-gate-form {
  display: flex;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.access-gate-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}
.access-gate-input:focus {
  outline: none;
  border-color: var(--accent-2);
  background: rgba(34, 211, 238, 0.06);
}
#access-gate-error { text-align: center; }

.provider-status {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
  text-align: center;
}
.provider-status-warning { color: var(--amber); }

/* ---------- Loading ---------- */
.loading { text-align: center; padding: 44px 10px; }
.spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid var(--panel-border);
  border-top-color: var(--accent-2);
  animation: spin 0.85s linear infinite;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-sub { color: var(--text-dim); font-size: 13.5px; }

/* ---------- Results toolbar / buttons ---------- */
.results-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: var(--font-body);
}
.btn-primary {
  background: #ffffff;
  color: #05060c;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  border: 1px solid var(--panel-border-strong);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary:hover { box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.55); }

/* ---------- Report head / gauge ---------- */
.report-filename { font-size: 19px; font-weight: 700; font-family: var(--font-heading); word-break: break-all; }
.report-meta { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

/* Full-width colored status bar — red unless the verdict is a clean
   "likely authentic," never the reverse, matching how run_consensus()
   itself only ever leans the score toward "more suspicious" (see
   app/consensus.py's OUTLIER_LEAN_WEIGHT) and never toward reassurance. */
.verdict-bar {
  margin: 18px 0 0;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}
.verdict-bar.v-likely_authentic { background: var(--green); color: #05170f; }
.verdict-bar.v-uncertain,
.verdict-bar.v-likely_manipulated,
.verdict-bar.v-likely_synthetic { background: var(--red); color: #2b0007; }

.gauge-row { display: flex; justify-content: center; margin: 22px 0 6px; }
.gauge-wrap { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.gauge {
  width: 124px; height: 124px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 14px rgba(124, 92, 255, 0.35));
}
.gauge-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
.gauge-fill {
  fill: none;
  stroke: var(--green);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s ease;
}
.gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 22px;
}
#gauge-score { font-family: var(--font-heading); font-size: 26px; font-weight: 700; }
.gauge-pct { font-size: 12px; color: var(--text-dim); margin-left: 1px; }
html[dir="rtl"] .gauge-pct { margin-left: 0; margin-right: 1px; }
.gauge-caption { font-size: 8px; color: var(--text-dim); line-height: 1.25; margin-top: 3px; max-width: 76px; }
/* The gauge SVG's rotate(-90deg) start point is direction-agnostic (it's a
   plain circle), so the ring itself needs no RTL flip. */

/* ---------- Badges ---------- */
.badges { display: flex; justify-content: center; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge-confidence { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); font-weight: 500; border-color: var(--panel-border); }

/* ---------- Provider breakdown ---------- */
.provider-breakdown {
  margin-top: 22px;
  padding: 16px 18px;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.08), rgba(34, 211, 238, 0.04));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}
.provider-breakdown h2 { font-family: var(--font-heading); font-size: 13px; margin: 0 0 10px; }
.provider-breakdown-list { display: flex; flex-wrap: wrap; gap: 10px; }
.provider-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border-strong);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
}
.provider-breakdown-name { color: var(--text-dim); }
.provider-breakdown-score { font-weight: 700; font-family: var(--font-heading); }
.provider-breakdown-row-error .provider-breakdown-score { color: var(--red); font-weight: 500; font-family: var(--font-body); }

/* ---------- Summary / errors ---------- */
.summary { font-size: 15.5px; line-height: 1.6; margin: 20px 0 8px; white-space: pre-line; }

.error-banner {
  background: rgba(255, 93, 117, 0.08);
  border: 1px solid rgba(255, 93, 117, 0.3);
  color: var(--red);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin: 14px 0;
}

/* ---------- Signals ---------- */
.signals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
@media (max-width: 640px) { .signals-grid { grid-template-columns: 1fr; } }
.signals-col h2 { font-family: var(--font-heading); font-size: 14px; margin: 0 0 2px; }
.col-note { color: var(--text-dim); font-size: 12px; margin: 0 0 12px; }
.signals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.signal-item {
  border-left: 2px solid var(--panel-border-strong);
  padding: 7px 0 7px 14px;
  font-size: 13.5px;
  border-radius: 0 8px 8px 0;
  transition: background 0.15s ease;
}
.signal-item.dir-supports_fake { border-left-color: var(--red); }
.signal-item.dir-supports_authentic { border-left-color: var(--green); }
.signal-item:hover { background: rgba(255, 255, 255, 0.025); }
.signal-item .signal-label { font-weight: 600; display: block; margin-bottom: 2px; }
.signal-item .signal-detail { color: var(--text-dim); }

html[dir="rtl"] .signal-item {
  border-left: none;
  border-right: 2px solid var(--panel-border-strong);
  padding: 7px 14px 7px 0;
  border-radius: 8px 0 0 8px;
}
html[dir="rtl"] .signal-item.dir-supports_fake { border-right-color: var(--red); }
html[dir="rtl"] .signal-item.dir-supports_authentic { border-right-color: var(--green); }

.signal-provider-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #05060c;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  border-radius: 5px;
  padding: 1px 7px;
  vertical-align: middle;
}
html[dir="rtl"] .signal-provider-tag { margin-left: 0; margin-right: 8px; }

/* ---------- Caveats / footer ---------- */
.caveats-box {
  margin-top: 28px;
  padding: 16px 18px;
  background: rgba(255, 190, 85, 0.05);
  border: 1px solid rgba(255, 190, 85, 0.22);
  border-radius: var(--radius-sm);
}
.caveats-box h2 { font-family: var(--font-heading); font-size: 13.5px; margin: 0 0 8px; color: var(--amber); }
.caveats-box ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.caveats-box li { margin-bottom: 4px; }
html[dir="rtl"] .caveats-box ul { padding-left: 0; padding-right: 18px; }

.report-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-size: 11.5px;
}

/* The real third-party-AI disclosure — deliberately small/muted like
   conventional fine print, but never hidden or omitted: see
   app/consensus.py's "Vendor anonymization" for why the rest of the
   report speaks only of the POTOO AI Verification Engine while this one
   block names the actual providers. Included in print output on purpose
   — a printed certificate should carry its own fine print. */
.fine-print {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.5;
  opacity: 0.85;
}
.fine-print a { color: var(--text-dim); text-decoration: underline; text-decoration-color: var(--panel-border-strong); }

/* ---------- Site footer ---------- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
  color: var(--text-dim);
  font-size: 13px;
}
.site-footer a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); }

@media print {
  body { background: #fff; color: #000; }
  .bg-scene, .no-print, .header .disclaimer-chip, .header .site-link { display: none !important; }
  .panel { border: none; padding: 0; backdrop-filter: none; box-shadow: none; background: none; }
  .page { max-width: 100%; padding: 0; }
  .caveats-box { background: #fff; border: 1px solid #999; }
  .gauge { filter: none; }
  /* Swap the dark-theme white wordmark for the black variant on a printed
     (white) page. */
  .brand-logo-screen { display: none; }
  .brand-logo-print { display: block; }
  /* Near-white brand/dim text (tuned for the dark theme) is unreadable on
     a printed white page — force real dark text for everything that
     matters in a printed report. */
  .brand-name, .brand-name-accent, .report-filename, #gauge-score,
  .summary, .signal-label { color: #111 !important; -webkit-text-fill-color: #111; }
  .brand-tagline, .hero-subtitle, .about-blurb, .report-meta, .gauge-caption, .gauge-pct,
  .col-note, .signal-detail, .provider-breakdown-name { color: #444 !important; }
  .site-footer, .site-footer a { color: #444 !important; -webkit-text-fill-color: #444; }
  .provider-breakdown { background: #fff; border: 1px solid #ccc; }
  .provider-breakdown-row { background: #fff; border: 1px solid #ccc; }
  .fine-print, .fine-print a { color: #555 !important; opacity: 1; }
  /* Not dropped in print (unlike .no-print elements) — a printed report
     whose AI content doesn't match its own chrome language must say so
     on the page itself, not just on screen. The light --amber used
     on-screen would be near-invisible on white paper, same class of bug
     as the near-white text fixed above. */
  .result-language-note { color: #92400e !important; font-weight: 600; }
}