/*
 * Evil Twin — pastel glass theme
 *
 * Shared by the app and the server-rendered share pages.
 *
 * Dark is the default and lives on :root. Light is an opt-in override under
 * [data-theme="light"], set by the toggle in the header.
 *
 * Three rules hold this together:
 *   1. Nothing sits directly on the mesh background. Every readable surface
 *      is a frosted pane, so text contrast is predictable no matter which
 *      pastel blob happens to be underneath it.
 *   2. Every text-on-tint pair is checked to WCAG AA against the *lightest*
 *      composited surface in dark mode and the *most saturated* one in light.
 *      Glassmorphism fails contrast constantly; the ink values below are the fix.
 *   3. Components never hardcode a colour. If a rule needs one, it becomes a
 *      token here so both themes stay in sync.
 */

/* ------------------------------------------------------------------ *
 * Dark — the default
 * ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  --canvas: #0e0e13;
  --blob-rose: #6b2438;
  --blob-peri: #232c5c;
  --blob-mint: #124335;
  --blob-butter: #4a3714;
  --blob-lilac: #372b60;
  --mesh-opacity: 0.45;

  --glass: rgba(255, 255, 255, 0.075);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-quiet: rgba(255, 255, 255, 0.05);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-hairline: rgba(255, 255, 255, 0.1);
  --hover-surface: rgba(255, 255, 255, 0.16);
  --track: rgba(255, 255, 255, 0.1);
  --blur: saturate(160%) blur(30px);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.52), 0 4px 14px rgba(0, 0, 0, 0.3);

  --ink: #f2f2f5;
  --ink-2: #b8b8c4;
  --ink-3: #a2a2ae;

  --accent: #665cde;
  --accent-text: #b3acff;
  --accent-soft: rgba(102, 92, 222, 0.22);
  --accent-edge: rgba(179, 172, 255, 0.36);
  --accent-ring: rgba(179, 172, 255, 0.22);
  --accent-glow: rgba(0, 0, 0, 0.4);
  --on-accent: #fff;

  --critical: #ffb3c0;
  --critical-tint: rgba(232, 83, 111, 0.2);
  --critical-edge: rgba(255, 179, 192, 0.3);
  --high: #ffc98a;
  --high-tint: rgba(238, 154, 68, 0.18);
  --high-edge: rgba(255, 201, 138, 0.26);
  --medium: #ffe08a;
  --medium-tint: rgba(224, 185, 58, 0.16);
  --medium-edge: rgba(255, 224, 138, 0.24);
  --low: #c9cad5;
  --low-tint: rgba(255, 255, 255, 0.07);
  --low-edge: rgba(255, 255, 255, 0.16);
  --ok: #7ee0b4;
  --ok-tint: rgba(45, 190, 135, 0.18);
  --ok-edge: rgba(126, 224, 180, 0.26);
  --idn: #c2ccff;
  --idn-tint: rgba(120, 140, 255, 0.18);
  --idn-edge: rgba(194, 204, 255, 0.26);

  --mark-bg: rgba(232, 83, 111, 0.26);
  --grad-alarm: linear-gradient(120deg, #ff8fa6, #ff5c7d);
  --grad-calm: linear-gradient(120deg, #9ff0cd, #2dbe87);
  --grad-eye: linear-gradient(145deg, #ff8fa6, #8f9dff);
  --grad-bar: linear-gradient(90deg, #8f9dff, #ff8fa6);

  --radius-card: 24px;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Light — opt-in
 * ------------------------------------------------------------------ */

[data-theme="light"] {
  color-scheme: light;

  --canvas: #f6f4f2;
  --blob-rose: #ffc8d6;
  --blob-peri: #c7d6ff;
  --blob-mint: #bfedda;
  --blob-butter: #ffe9b0;
  --blob-lilac: #ddd0ff;
  --mesh-opacity: 0.85;

  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-quiet: rgba(255, 255, 255, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-hairline: rgba(28, 28, 31, 0.07);
  --hover-surface: #fff;
  --track: rgba(28, 28, 31, 0.06);
  --blur: saturate(180%) blur(30px);

  --shadow-sm: 0 2px 10px rgba(84, 74, 120, 0.06);
  --shadow: 0 10px 40px rgba(84, 74, 120, 0.1), 0 2px 8px rgba(84, 74, 120, 0.05);
  --shadow-lg: 0 24px 70px rgba(84, 74, 120, 0.16), 0 4px 14px rgba(84, 74, 120, 0.06);

  --ink: #1c1c1f;
  --ink-2: #56565f;
  --ink-3: #686872;

  --accent: #5b51da;
  --accent-text: #5b51da;
  --accent-soft: #ece9ff;
  --accent-edge: rgba(91, 81, 218, 0.3);
  --accent-ring: rgba(91, 81, 218, 0.14);
  --accent-glow: rgba(91, 81, 218, 0.28);
  --on-accent: #fff;

  --critical: #8e1b34;
  --critical-tint: #ffdde3;
  --critical-edge: rgba(142, 27, 52, 0.22);
  --high: #8a4610;
  --high-tint: #ffe8d0;
  --high-edge: rgba(138, 70, 16, 0.2);
  --medium: #6e520a;
  --medium-tint: #fff3c9;
  --medium-edge: rgba(110, 82, 10, 0.18);
  --low: #4e4e58;
  --low-tint: #e8e9ef;
  --low-edge: rgba(78, 78, 88, 0.16);
  --ok: #0f5d3e;
  --ok-tint: #cfefe0;
  --ok-edge: rgba(15, 93, 62, 0.2);
  --idn: #2a3a8f;
  --idn-tint: #dce4ff;
  --idn-edge: rgba(42, 58, 143, 0.2);

  --mark-bg: rgba(212, 61, 95, 0.18);
  --grad-alarm: linear-gradient(120deg, #d43d5f, #8e1b34);
  --grad-calm: linear-gradient(120deg, #17916a, #0f5d3e);
  --grad-eye: linear-gradient(145deg, #ffb3c6, #b9c8ff);
  --grad-bar: linear-gradient(90deg, #b9c8ff, #ffb3c6);
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--canvas); }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

/* The mesh. Fixed, behind everything, never scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(38vmax 32vmax at 12% 8%, var(--blob-rose), transparent 62%),
    radial-gradient(34vmax 30vmax at 88% 4%, var(--blob-peri), transparent 60%),
    radial-gradient(32vmax 30vmax at 78% 62%, var(--blob-lilac), transparent 62%),
    radial-gradient(30vmax 26vmax at 8% 68%, var(--blob-mint), transparent 60%),
    radial-gradient(28vmax 24vmax at 50% 100%, var(--blob-butter), transparent 62%);
  filter: blur(20px);
  opacity: var(--mesh-opacity);
  animation: drift 40s ease-in-out infinite alternate;
  transition: opacity 0.4s ease;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: var(--accent-text); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px 96px; }

/* ---------- the glass primitive ---------- */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

/* Firefox and older Safari without backdrop-filter get near-opaque panes
   instead, which keeps every contrast ratio above intact. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(22, 22, 30, 0.86);
    --glass-strong: rgba(28, 28, 38, 0.92);
    --glass-quiet: rgba(22, 22, 30, 0.78);
  }
  [data-theme="light"] {
    --glass: rgba(255, 255, 255, 0.92);
    --glass-strong: rgba(255, 255, 255, 0.96);
    --glass-quiet: rgba(255, 255, 255, 0.86);
  }
}

/* ---------- header ---------- */

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 14px 12px 20px; margin: 20px 0 0;
  background: var(--glass-quiet);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 14px; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.brand .eye {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-eye);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.brand .eye::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4a1020; opacity: 0.8;
}
header nav { display: flex; gap: 4px; align-items: center; }
header nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 7px 14px; border-radius: 999px; transition: background 0.18s ease, color 0.18s ease;
}
header nav a:hover { background: var(--hover-surface); color: var(--ink); }

/* ---------- theme toggle ---------- */

.themetoggle {
  width: 34px; height: 34px; padding: 0; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  background: var(--glass-quiet); color: var(--ink-2);
  border: 1px solid var(--glass-edge); box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.themetoggle:hover { background: var(--hover-surface); color: var(--ink); box-shadow: none; }
.themetoggle:active { transform: scale(0.92); }
.themetoggle svg { width: 16px; height: 16px; display: block; }
.themetoggle .moon { display: none; }
[data-theme="light"] .themetoggle .moon { display: block; }
[data-theme="light"] .themetoggle .sun { display: none; }

/* ---------- typography ---------- */

h1 {
  font-size: clamp(36px, 6.2vw, 62px); line-height: 1.04;
  letter-spacing: -0.04em; font-weight: 600; margin: 0 0 18px;
}
h1 em {
  font-style: normal;
  background: var(--grad-alarm);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- buttons + controls ---------- */

button {
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  border-radius: var(--radius); border: 1px solid transparent;
  padding: 12px 22px; letter-spacing: -0.01em;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
}
button:hover { box-shadow: 0 6px 22px var(--accent-glow); }
button:active { transform: scale(0.97); }
button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
button[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

button.ghost {
  background: var(--glass-strong); color: var(--ink);
  border-color: var(--glass-edge); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
button.ghost:hover { background: var(--hover-surface); box-shadow: var(--shadow); }
button.mini { padding: 9px 16px; font-size: 13.5px; }

.cta {
  font-size: 14px; text-decoration: none; padding: 10px 18px;
  border-radius: var(--radius); background: var(--accent); color: var(--on-accent);
  box-shadow: 0 4px 14px var(--accent-glow); display: inline-block;
}

/* ---------- pills, badges ---------- */

.pill {
  font-size: 11.5px; letter-spacing: 0.02em; text-transform: capitalize;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.pill.critical { background: var(--critical-tint); color: var(--critical); border: 1px solid var(--critical-edge); }
.pill.high     { background: var(--high-tint);     color: var(--high);     border: 1px solid var(--high-edge); }
.pill.medium   { background: var(--medium-tint);   color: var(--medium);   border: 1px solid var(--medium-edge); }
.pill.low      { background: var(--low-tint);      color: var(--low);      border: 1px solid var(--low-edge); }
.pill.none     { background: var(--ok-tint);       color: var(--ok);       border: 1px solid var(--ok-edge); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--glass-hairline); background: var(--glass-quiet); color: var(--ink-2);
}
.badge.mail  { color: var(--critical); border-color: var(--critical-edge); background: var(--critical-tint); font-weight: 600; }
.badge.site  { color: var(--high);     border-color: var(--high-edge);     background: var(--high-tint); }
.badge.idn   { color: var(--idn);      border-color: var(--idn-edge);      background: var(--idn-tint); }
.badge.yours { color: var(--ok);       border-color: var(--ok-edge);       background: var(--ok-tint); }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 20px; padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.stat b {
  display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--ink);
}
.stat span { font-size: 12.5px; color: var(--ink-2); }
.stat.critical { background: linear-gradient(160deg, var(--critical-tint), var(--glass) 80%); border-color: var(--critical-edge); }
.stat.critical b { color: var(--critical); }
.stat.high { background: linear-gradient(160deg, var(--high-tint), var(--glass) 80%); border-color: var(--high-edge); }
.stat.high b { color: var(--high); }
.stat.medium { background: linear-gradient(160deg, var(--medium-tint), var(--glass) 80%); border-color: var(--medium-edge); }
.stat.medium b { color: var(--medium); }

/* ---------- result rows ---------- */

.rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: 20px; padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease;
}
.row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.row.critical { background: linear-gradient(110deg, var(--critical-tint), var(--glass) 62%); border-color: var(--critical-edge); }
.row.high { background: linear-gradient(110deg, var(--high-tint), var(--glass) 62%); border-color: var(--high-edge); }

.dom {
  font-family: var(--mono); font-size: 15px; word-break: break-all;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; color: var(--ink);
}
.dom mark {
  background: var(--mark-bg); color: var(--critical);
  border-radius: 5px; padding: 0 3px; font-weight: 600;
}
.puny { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.why { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }

.right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.recs { font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.rowacts { display: flex; gap: 6px; }
.rowacts a, .rowacts button {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px; font-weight: 400;
  border: 1px solid var(--glass-hairline); background: var(--glass-quiet); color: var(--ink-2);
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.rowacts a:hover, .rowacts button:hover { background: var(--hover-surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.rowacts button:active { transform: scale(0.96); }

.shot { margin-top: 12px; border-radius: 14px; border: 1px solid var(--glass-edge); max-width: 280px; display: block; box-shadow: var(--shadow-sm); }
.shot-note { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
.empty { color: var(--ink-2); text-align: center; padding: 44px 0; }

footer { margin-top: 52px; color: var(--ink-3); font-size: 13px; }

@media (max-width: 640px) {
  header { border-radius: 20px; }
  .row { grid-template-columns: 1fr; }
  .right { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}