/* IRIS Ultraviolet — the one design vocabulary for app.undercoveriris.io (2026-09-28 redesign).
 *
 * Loaded last on every page, so it is the final word on colour, surfaces, type and motion. Layout, markup hooks and
 * behaviour stay in the older stylesheets. Colour comes from the tokens below; the chrome is violet glass with a
 * mint glint, and mint only ever means live / secure / done. Earn UBAI wears HANS Society's own palette (--hans-*). */

:root {
  color-scheme: dark;

  /* Canvas and surfaces: violet-black, translucent glass tiles, one hairline edge. */
  --i-bg: #07060d;
  --i-bg-raised: #0d0b16;
  --i-bg-glass: rgba(9, 7, 16, 0.74);
  --i-surface: rgba(255, 255, 255, 0.03);
  --i-surface-2: rgba(255, 255, 255, 0.055);
  --i-surface-3: rgba(255, 255, 255, 0.085);
  --i-popover: #13101f;
  --i-line: rgba(221, 208, 255, 0.085);
  --i-line-2: rgba(221, 208, 255, 0.15);
  --i-highlight: rgba(255, 255, 255, 0.07);

  /* Text */
  --i-text: #f4f1ff;
  --i-text-2: #b0aac6;
  --i-text-3: #7f7999;

  /* Brand: violet is the interactive accent, the ultraviolet gradient is the signature, mint means live / secure. */
  --i-violet: #a78bfa;
  --i-violet-rgb: 167, 139, 250;
  --i-lilac: #ddd0ff;
  --i-lilac-rgb: 221, 208, 255;
  --i-ultra: #7b5cff;
  --i-ultra-rgb: 123, 92, 255;
  --i-mint: #86f4c9;
  --i-mint-rgb: 134, 244, 201;
  --i-cyan: #7cc4ff;
  --i-cyan-rgb: 124, 196, 255;
  --i-warn: #f7bd55;
  --i-warn-rgb: 247, 189, 85;
  --i-risk: #ff6f8e;
  --i-risk-rgb: 255, 111, 142;
  --i-uv: linear-gradient(115deg, #f1ebff 0%, #c9b0ff 42%, #9477ff 100%);
  --i-uv-text: linear-gradient(100deg, #f4efff 0%, #cdb5ff 45%, #9d7fff 100%);

  /* Glow recipe: violet-tinted glass, an edge that runs violet → lilac → a faint mint glint, and a soft halo. */
  --i-glass: linear-gradient(150deg, color-mix(in srgb, var(--i-violet) 9%, var(--i-bg-raised)), color-mix(in srgb, #fff 1.8%, var(--i-bg-raised)) 48%, color-mix(in srgb, var(--i-mint) 2.4%, var(--i-bg-raised)));
  --i-glass-hover: linear-gradient(150deg, color-mix(in srgb, var(--i-violet) 13%, var(--i-bg-raised)), color-mix(in srgb, #fff 2.4%, var(--i-bg-raised)) 48%, color-mix(in srgb, var(--i-mint) 3.6%, var(--i-bg-raised)));
  --i-edge: linear-gradient(135deg, rgba(var(--i-violet-rgb), 0.68), rgba(var(--i-lilac-rgb), 0.18) 30%, rgba(255, 255, 255, 0.06) 62%, rgba(var(--i-mint-rgb), 0.24));
  --i-edge-hover: linear-gradient(135deg, rgba(var(--i-violet-rgb), 0.9), rgba(var(--i-lilac-rgb), 0.28) 30%, rgba(255, 255, 255, 0.09) 62%, rgba(var(--i-mint-rgb), 0.38));
  --i-halo: 0 0 30px -6px rgba(var(--i-violet-rgb), 0.18);
  --i-halo-hover: 0 0 44px -4px rgba(var(--i-violet-rgb), 0.32);
  --i-shadow-1: 0 1px 0 var(--i-highlight) inset, 0 12px 32px -18px rgba(0, 0, 0, 0.75);
  --i-shadow-2: 0 1px 0 var(--i-highlight) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  /* Recipes: a glowing tile is `border: 1px solid transparent; background: var(--i-tile-bg); box-shadow: var(--i-tile-shadow);`
     (hover: --i-tile-bg-hover / --i-tile-shadow-hover). Wells hold inputs and quiet nested rows. */
  --i-tile-bg: var(--i-glass) padding-box, var(--i-edge) border-box;
  --i-tile-bg-hover: var(--i-glass-hover) padding-box, var(--i-edge-hover) border-box;
  --i-tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 44px -22px rgba(0, 0, 0, 0.85), var(--i-halo);
  --i-tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 22px 52px -22px rgba(0, 0, 0, 0.9), var(--i-halo-hover);
  --i-well: rgba(255, 255, 255, 0.035);
  --i-well-line: rgba(221, 208, 255, 0.12);

  /* HANS Society (Earn UBAI): earn.joinhans.io's ink, periwinkle and paper. */
  --hans-ink: #05070f;
  --hans-ink-2: #0b1122;
  --hans-rise: #1b2347;
  --hans-paper: #f2f5fc;
  --hans-dim: #8b94ad;
  --hans-periwinkle: #8fa6ff;
  --hans-ok: #8fd6a8;
  --hans-paper-rgb: 242, 245, 252;
  --hans-rise-rgb: 27, 35, 71;
  --hans-glow-rgb: 90, 110, 200;
  --hans-edge-rgb: 132, 152, 255;
  --hans-edge-hi-rgb: 168, 186, 255;
  --hans-display: 'Unbounded', var(--i-font-display);

  /* Shape */
  --i-r-xs: 8px;
  --i-r-sm: 12px;
  --i-r-md: 16px;
  --i-r-lg: 22px;
  --i-r-xl: 28px;
  --i-r-pill: 999px;

  /* Motion: expo-out for entrances, a gentle spring for thumbs and pops. */
  --i-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --i-spring: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.7%, 0.52 5.6%, 0.86 9.3%, 1.03 12.5%, 1.08 15.3%, 1.07 18.4%, 1.02 23.7%, 0.995 29.5%, 1.001 41%, 1);
  --i-dur-1: 160ms;
  --i-dur-2: 300ms;
  --i-dur-3: 600ms;

  /* Type */
  --i-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --i-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --i-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The older stylesheets read these; point them at the new palette so every legacy rule agrees. */
  --bg: var(--i-bg);
  --panel: var(--i-bg-raised);
  --ink: var(--i-text);
  --muted: var(--i-text-2);
  --line: var(--i-line);
  --violet: var(--i-violet);
  --hot: var(--i-lilac);
  --green: var(--i-mint);
  --guardian-mint: var(--i-mint);
  --amber: var(--i-warn);
  --danger: var(--i-risk);
  --surface-border: var(--i-line-2);
  --surface-radius: var(--i-r-lg);
  --surface-glow: var(--i-shadow-1), var(--i-halo);
}

@media (prefers-reduced-motion: reduce) {
  :root { --i-dur-1: 0ms; --i-dur-2: 0ms; --i-dur-3: 0ms; }
}

/* ── Pages glide into each other (same-origin page loads); the sidebar holds still while content cross-fades. ── */
@view-transition { navigation: auto; }
.portal-sidebar { view-transition-name: iris-sidebar; }
::view-transition-old(root) { animation: iris-page-out 220ms var(--i-ease) both; }
::view-transition-new(root) { animation: iris-page-in 420ms var(--i-ease) both; }
@keyframes iris-page-out { to { opacity: 0; filter: blur(4px); } }
@keyframes iris-page-in { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Canvas: violet ambient light, a faint cool counter-glow and a HUD grid that fades out from the top. ── */
html { background: var(--i-bg); }
body,
.dashboard-page,
.earn-page,
.account-page,
.upgrade-page {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(var(--i-ultra-rgb), 0.16), transparent 62%),
    radial-gradient(900px 560px at -8% 108%, rgba(var(--i-cyan-rgb), 0.05), transparent 60%),
    radial-gradient(1400px 900px at 50% 0%, transparent 38%, var(--i-bg) 80%),
    linear-gradient(rgba(var(--i-lilac-rgb), 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(var(--i-lilac-rgb), 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--i-bg);
  background-attachment: fixed;
  color: var(--i-text);
  font-family: var(--i-font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.dashboard-page .shell { background: none; }
::selection { background: rgba(var(--i-violet-rgb), 0.38); color: #fff; }
h1, h2, h3, h4 { font-family: var(--i-font-display); }
:where(button, input, select, textarea) { font-family: inherit; }
a { color: var(--i-lilac); }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--i-lilac-rgb), 0.18) transparent; }
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--i-lilac-rgb), 0.9);
  outline-offset: 3px;
}
.skip-link { background: var(--i-uv); color: #120b22; border-radius: var(--i-r-pill); font-weight: 600; }

/* ── Motion vocabulary (transitions.dev): blur-rise, text swap, ping, scan. ── */
@keyframes iris-rise { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes iris-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iris-swap { 0% { opacity: 0.2; filter: blur(5px); transform: translateY(2px); } 100% { opacity: 1; filter: none; transform: none; } }
@keyframes iris-ping { 0% { transform: scale(0.6); opacity: 1; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes iris-scan { 0% { transform: translateY(-120%); } 100% { transform: translateY(120%); } }
@keyframes iris-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes iris-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes iris-pop { 0% { transform: scale(0.94); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }

/* Entrances: every screen's top-level blocks rise in, staggered. Pure CSS, so a slow script never hides content. */
#overview-content:not([hidden]) > *,
#module-content:not([hidden]) > *,
.earn-main > *,
.account-shell > *,
.upgrade-main > *,
.legal-shell > * {
  animation: iris-rise var(--i-dur-3) var(--i-ease) both;
}
#overview-content > :nth-child(2), #module-content > :nth-child(2), .earn-main > :nth-child(2), .account-shell > :nth-child(2), .upgrade-main > :nth-child(2) { animation-delay: 70ms; }
#overview-content > :nth-child(3), #module-content > :nth-child(3), .earn-main > :nth-child(3), .account-shell > :nth-child(3), .upgrade-main > :nth-child(3) { animation-delay: 140ms; }
#overview-content > :nth-child(n + 4), #module-content > :nth-child(n + 4), .earn-main > :nth-child(n + 4), .account-shell > :nth-child(n + 4), .upgrade-main > :nth-child(n + 4) { animation-delay: 210ms; }
#tools .tool-card { animation: iris-rise var(--i-dur-3) var(--i-ease) both; }
#tools .tool-card:nth-child(2) { animation-delay: 80ms; }
#tools .tool-card:nth-child(3) { animation-delay: 160ms; }
/* Text that changes state (checking → complete) cross-fades through a blur instead of snapping. */
.iris-swap { animation: iris-swap 420ms var(--i-ease) both; }

/* ── Primitives ── */
/* (i): the explanation lives here instead of a paragraph. The tip itself is portalled by iris-motion.js. */
.iris-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid var(--i-line-2);
  border-radius: 50%;
  background: none;
  color: var(--i-text-3);
  font: 600 10px/1 var(--i-font);
  vertical-align: middle;
  cursor: help;
  transition: color var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease);
}
.iris-info:hover, .iris-info:focus-visible, .iris-info[aria-expanded='true'] { color: var(--i-text); border-color: rgba(var(--i-violet-rgb), 0.7); box-shadow: 0 0 14px -2px rgba(var(--i-violet-rgb), 0.5); outline: none; }
@media (pointer: coarse) { .iris-info::before { content: ''; position: absolute; inset: -13px; } }
.iris-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.iris-tooltip {
  position: fixed;
  z-index: 2147483000;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid var(--i-line-2);
  border-radius: var(--i-r-sm);
  background: var(--i-popover);
  box-shadow: var(--i-shadow-2), 0 0 24px -8px rgba(var(--i-violet-rgb), 0.45);
  color: var(--i-text-2);
  font: 400 12.5px/1.55 var(--i-font);
  text-align: left;
  pointer-events: none;
  animation: iris-tip-in 240ms var(--i-ease) 60ms both;
}
.iris-tooltip[data-below='false'] { transform-origin: bottom center; }
@keyframes iris-tip-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Chips: small mono status labels with fixed meanings. */
.iris-chip,
.tool-card > em,
.network-action em,
.card-kicker > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--i-line-2);
  border-radius: var(--i-r-pill);
  background: var(--i-surface-2);
  color: var(--i-text-2);
  font: 500 10px/1 var(--i-font-mono);
  letter-spacing: 0.12em;
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.iris-chip--ok { color: var(--i-mint); border-color: rgba(var(--i-mint-rgb), 0.3); background: rgba(var(--i-mint-rgb), 0.08); }
.iris-chip--warn { color: var(--i-warn); border-color: rgba(var(--i-warn-rgb), 0.32); background: rgba(var(--i-warn-rgb), 0.08); }
.iris-chip--risk { color: var(--i-risk); border-color: rgba(var(--i-risk-rgb), 0.32); background: rgba(var(--i-risk-rgb), 0.08); }
.iris-chip--accent { color: var(--i-lilac); border-color: rgba(var(--i-violet-rgb), 0.35); background: rgba(var(--i-violet-rgb), 0.1); }
.iris-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* Buttons: pills. Primary is lilac-white, accent is the ultraviolet gradient (one per screen), secondary is glass,
   ghost is text with a chevron that nudges, danger is rose glass. */
.iris-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--i-r-pill);
  font: 500 14px/1.15 var(--i-font);
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease), filter var(--i-dur-2) var(--i-ease);
}
.iris-btn:active:not(:disabled) { transform: scale(0.97); }
.iris-btn:disabled, .iris-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.iris-btn--primary { background: #f3eeff; color: #130c24; font-weight: 600; box-shadow: 0 10px 28px -14px rgba(var(--i-lilac-rgb), 0.7), 0 0 0 1px rgba(255, 255, 255, 0.55) inset; }
.iris-btn--primary:hover:not(:disabled) { background: #fff; box-shadow: 0 0 0 4px rgba(var(--i-violet-rgb), 0.18), 0 14px 34px -12px rgba(var(--i-violet-rgb), 0.85); }
.iris-btn--accent { background: var(--i-uv); color: #140c26; font-weight: 600; box-shadow: 0 12px 30px -14px rgba(var(--i-violet-rgb), 0.9), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }
.iris-btn--accent:hover:not(:disabled) { filter: brightness(1.05) saturate(1.08); box-shadow: 0 14px 36px -12px rgba(var(--i-violet-rgb), 1), inset 0 0 18px rgba(255, 255, 255, 0.35); }
.iris-btn--secondary { background: var(--i-surface-2); border-color: rgba(var(--i-violet-rgb), 0.24); color: var(--i-text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.iris-btn--secondary:hover:not(:disabled) { background: var(--i-surface-3); border-color: rgba(var(--i-violet-rgb), 0.5); box-shadow: var(--i-halo); }
.iris-btn--ghost { min-height: 32px; padding: 0 4px; background: none; color: var(--i-lilac); }
.iris-btn--ghost:hover:not(:disabled) { color: #fff; }
.iris-btn--ghost .iris-chevron { display: inline-block; transition: transform var(--i-dur-2) var(--i-spring); }
.iris-btn--ghost:hover .iris-chevron { transform: translateX(3px); }
.iris-btn--danger { background: rgba(var(--i-risk-rgb), 0.1); border-color: rgba(var(--i-risk-rgb), 0.34); color: var(--i-risk); }
.iris-btn--danger:hover:not(:disabled) { background: rgba(var(--i-risk-rgb), 0.16); border-color: rgba(var(--i-risk-rgb), 0.6); box-shadow: 0 0 22px -6px rgba(var(--i-risk-rgb), 0.5); }
.iris-btn--sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.iris-btn--lg { min-height: 50px; padding: 0 24px; font-size: 15px; }
@media (pointer: coarse) { .iris-btn { min-height: 44px; } }

/* Tiles and wells */
.iris-tile { position: relative; padding: 24px; border: 1px solid transparent; border-radius: var(--i-r-lg); background: var(--i-tile-bg); box-shadow: var(--i-tile-shadow); transition: box-shadow var(--i-dur-3) var(--i-ease), background var(--i-dur-3) var(--i-ease); }
.iris-well { border: 1px solid var(--i-well-line); border-radius: var(--i-r-md); background: var(--i-well); }
/* Inputs: dark wells with a violet focus ring; 16px text on touch so iOS never zooms. */
.iris-input, .iris-field :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--i-well-line);
  border-radius: var(--i-r-sm);
  background: var(--i-well);
  color: var(--i-text);
  font: 400 14.5px/1.4 var(--i-font);
  transition: border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), background var(--i-dur-2) var(--i-ease);
}
.iris-input:focus, .iris-field :is(input, select, textarea):focus { outline: none; border-color: rgba(var(--i-violet-rgb), 0.7); background: rgba(var(--i-violet-rgb), 0.06); box-shadow: 0 0 0 3px rgba(var(--i-violet-rgb), 0.18); }
@media (pointer: coarse) { .iris-input, .iris-field :is(input, select, textarea) { font-size: 16px; } }
/* A quiet explanatory note (safety, fees, legal): smaller and muted, but never cut. */
.iris-note { padding: 12px 14px; border: 1px solid var(--i-line); border-left: 2px solid rgba(var(--i-violet-rgb), 0.6); border-radius: 0 var(--i-r-sm) var(--i-r-sm) 0; background: rgba(var(--i-violet-rgb), 0.04); color: var(--i-text-2); font: 400 12.5px/1.6 var(--i-font); }

/* ── Shell: sidebar ── */
.portal-sidebar {
  border-right: 1px solid var(--i-line);
  background: linear-gradient(180deg, rgba(16, 12, 27, 0.78), rgba(9, 7, 16, 0.86));
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  color: var(--i-text);
  font-family: var(--i-font);
}
.portal-brand { gap: 12px; color: var(--i-text); }
.portal-brand img { border: 0; box-shadow: 0 0 0 1px rgba(var(--i-lilac-rgb), 0.35), 0 0 22px -2px rgba(var(--i-violet-rgb), 0.55); }
.portal-brand > span { font: 600 22px/1.05 var(--i-font-display); letter-spacing: 0.3em; }
.portal-brand small { margin-top: 3px; font: 500 8.5px/1.4 var(--i-font-mono); letter-spacing: 0.22em; color: var(--i-text-3); }
.portal-sidebar a:hover { background: var(--i-surface-2); color: var(--i-text); }
.portal-sidebar .portal-brand:hover { background: none; }
.sidebar-toggle {
  min-height: 36px;
  border: 1px solid var(--i-line-2);
  border-radius: var(--i-r-pill);
  background: var(--i-surface);
  color: var(--i-text-2);
  font: 500 12px/1 var(--i-font);
  transition: background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease);
}
.sidebar-toggle:hover { background: var(--i-surface-2); border-color: rgba(var(--i-violet-rgb), 0.4); color: var(--i-text); }
.sidebar-toggle > span:first-child { font-size: 15px; }
.portal-sidebar .sidebar-link {
  position: relative;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--i-r-sm);
  color: var(--i-text-2);
  font: 500 13px/1.25 var(--i-font);
  letter-spacing: -0.005em;
  transition: background var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease);
}
.portal-sidebar .sidebar-icon {
  border: 1px solid var(--i-line-2);
  border-radius: 9px;
  background: var(--i-surface);
  color: var(--i-mint);
  transition: border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), background var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease);
}
.portal-sidebar .sidebar-link:hover .sidebar-icon { border-color: rgba(var(--i-violet-rgb), 0.45); background: rgba(var(--i-violet-rgb), 0.1); box-shadow: 0 0 16px -4px rgba(var(--i-violet-rgb), 0.5); }
/* The current page glows like a segmented thumb: violet glass, a ring and the shared halo. */
.portal-sidebar .sidebar-link.selected {
  border-color: transparent;
  background: linear-gradient(120deg, rgba(var(--i-violet-rgb), 0.22), rgba(var(--i-lilac-rgb), 0.07) 55%, rgba(var(--i-mint-rgb), 0.05));
  box-shadow: 0 0 0 1px rgba(var(--i-violet-rgb), 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 20px -4px rgba(var(--i-violet-rgb), 0.45);
  color: #fff;
  text-shadow: 0 0 14px rgba(var(--i-violet-rgb), 0.5);
}
.portal-sidebar .sidebar-link.selected .sidebar-icon { border-color: rgba(var(--i-lilac-rgb), 0.5); background: rgba(var(--i-violet-rgb), 0.2); color: #fff; box-shadow: 0 0 18px -3px rgba(var(--i-violet-rgb), 0.7); }
.portal-sidebar .nav-label { color: var(--i-text-3); font: 500 9.5px/1.4 var(--i-font-mono); letter-spacing: 0.2em; }
.sidebar-collapsed .portal-sidebar .nav-label { font-size: 0; border-top-color: var(--i-line); }
/* Earn UBAI belongs to HANS Society, so its entry wears HANS's periwinkle glass (like Luma's). */
.portal-sidebar .sidebar-earn {
  border: 1px solid rgba(var(--hans-edge-rgb), 0.3);
  background: linear-gradient(115deg, rgba(56, 69, 120, 0.3), rgba(16, 24, 48, 0.5));
  color: var(--hans-paper);
  font: 600 13px/1.2 var(--i-font);
  letter-spacing: 0.01em;
  box-shadow: 0 0 18px -8px rgba(var(--hans-glow-rgb), 0.6);
}
.portal-sidebar .sidebar-earn:hover { border-color: rgba(var(--hans-edge-hi-rgb), 0.65); background: linear-gradient(115deg, rgba(64, 80, 140, 0.4), rgba(18, 28, 56, 0.6)); color: #fff; box-shadow: 0 0 24px -4px rgba(var(--hans-glow-rgb), 0.6); }
.portal-sidebar .sidebar-earn.selected { border-color: rgba(var(--hans-edge-hi-rgb), 0.8); background: linear-gradient(115deg, rgba(76, 96, 170, 0.45), rgba(20, 30, 62, 0.65)); box-shadow: 0 0 0 1px rgba(var(--hans-edge-rgb), 0.35) inset, 0 0 26px -4px rgba(var(--hans-glow-rgb), 0.7); text-shadow: none; }
.earn-nav-logo { border-radius: 50%; box-shadow: 0 0 14px -2px rgba(var(--hans-edge-rgb), 0.7); }
.sidebar-upgrade, .portal-sidebar .sidebar-privacy { border-radius: var(--i-r-sm); font: 500 12px/1.3 var(--i-font); color: var(--i-text-2); transition: background var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease); }
.sidebar-upgrade > span:first-child { background: var(--i-uv); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 18px; }
.sidebar-upgrade:hover { color: var(--i-text); }
.portal-sidebar .sidebar-privacy { color: var(--i-text-3); }

/* ── Shell: top bar ── */
.portal-topbar { border-bottom: 1px solid var(--i-line); background: rgba(7, 6, 13, 0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hans-powered { gap: 9px; color: var(--hans-paper); }
.hans-powered > span { color: var(--i-text-3); font: 500 11px/1 var(--i-font); }
.hans-powered img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(var(--hans-edge-rgb), 0.35), 0 0 16px -4px rgba(var(--hans-glow-rgb), 0.8); }
.hans-powered strong { font: 600 13px/1 var(--i-font); letter-spacing: 0.01em; }
.hans-powered:hover strong { color: #fff; }
/* Header buttons: glass pill for Sign in, the ultraviolet pill for Pro (its glow gathers inward on hover). */
.account-link, .beta, .earn-account, .back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--i-r-pill);
  font: 500 13px/1 var(--i-font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease), filter var(--i-dur-2) var(--i-ease);
}
.account-link, .earn-account, .back-link {
  border: 1px solid rgba(var(--i-violet-rgb), 0.22);
  background: var(--i-surface-2);
  color: var(--i-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.account-link:hover, .earn-account:hover, .back-link:hover { background: var(--i-surface-3); border-color: rgba(var(--i-violet-rgb), 0.5); box-shadow: var(--i-halo); color: #fff; }
.beta {
  position: relative;
  border: 0;
  background: var(--i-uv);
  color: #140c26;
  font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(var(--i-violet-rgb), 0.9), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.beta:hover, .beta:focus-visible {
  background: #35254f;
  color: var(--i-text);
  box-shadow: 0 14px 36px -12px rgba(var(--i-violet-rgb), 1), 0 0 0 1px rgba(var(--i-lilac-rgb), 0.65) inset, inset 0 0 18px rgba(var(--i-violet-rgb), 0.2);
}
.beta:focus-visible { outline: 2px solid var(--i-lilac); outline-offset: 3px; }
.account-link:active, .beta:active, .earn-account:active, .back-link:active { transform: scale(0.97); }

/* ── Shell: footer, toast ── */
.portal-footer { border-top: 1px solid var(--i-line); color: var(--i-text-3); font: 500 10.5px/1.4 var(--i-font-mono); letter-spacing: 0.08em; }
.portal-footer a { color: var(--i-text-3); transition: color var(--i-dur-2) var(--i-ease); }
.portal-footer a:hover { color: var(--i-text); }
#clock { font-variant-numeric: tabular-nums; }
#toast {
  border: 1px solid rgba(var(--i-violet-rgb), 0.35);
  border-radius: var(--i-r-pill);
  background: rgba(19, 16, 31, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--i-text);
  font: 500 13px/1.3 var(--i-font);
  box-shadow: var(--i-shadow-2), 0 0 26px -6px rgba(var(--i-violet-rgb), 0.5);
  filter: blur(4px);
  transition: opacity var(--i-dur-2) var(--i-ease), transform var(--i-dur-3) var(--i-spring), filter var(--i-dur-2) var(--i-ease);
}
#toast.show { filter: none; }

/* ── Overview: hero ── */
.iris-hero {
  isolation: isolate;
  min-height: 330px;
  border: 1px solid transparent;
  border-radius: var(--i-r-xl);
  background:
    linear-gradient(90deg, rgba(9, 6, 20, 0.96) 0%, rgba(16, 10, 36, 0.86) 34%, rgba(22, 13, 48, 0.4) 60%, rgba(22, 13, 48, 0) 100%) padding-box,
    url('/assets/iris-background.png') right 44% / cover no-repeat padding-box,
    var(--i-edge) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -18px rgba(var(--i-ultra-rgb), 0.45);
}
/* HUD: faint scanlines with one slow sweep, and corner brackets. */
.iris-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(var(--i-lilac-rgb), 0.07) 50%, transparent 100%) 0 0 / 100% 38% no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
}
.iris-hero::after {
  content: '';
  position: absolute;
  inset: 14px;
  z-index: 0;
  pointer-events: none;
  --c: rgba(var(--i-lilac-rgb), 0.55);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 16px no-repeat;
  opacity: 0.8;
}
.hero-copy { padding: 44px 48px; }
.hero-label, .iris-hero .hero-label { gap: 10px; color: var(--i-mint); font: 500 11px/1.4 var(--i-font-mono); letter-spacing: 0.2em; }
.hero-label i, .iris-hero .hero-label i { position: relative; width: 6px; height: 6px; background: var(--i-mint); box-shadow: 0 0 12px rgba(var(--i-mint-rgb), 0.9); }
.hero-label i::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(var(--i-mint-rgb), 0.6); border-radius: 50%; animation: iris-ping 2.4s var(--i-ease) infinite; }
.hero-copy h1 {
  margin: 22px 0 18px;
  font: 600 clamp(38px, 4.3vw, 62px)/1.02 var(--i-font-display);
  letter-spacing: -0.04em;
  color: var(--i-text);
}
.hero-copy h1 span {
  background: var(--i-uv-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Paint room for the gradient past the last glyph. */
  padding: 0.04em 0.08em 0.06em 0;
  margin-right: -0.08em;
}
.hero-copy p, .iris-hero .hero-copy p { max-width: 430px; margin: 0 0 28px; color: var(--i-text-2); font: 400 15.5px/1.6 var(--i-font); }
/* Primary pill: lilac-white with a violet glow; the arrow nudges on hover. */
.portal-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--i-r-pill);
  background: #f3eeff;
  color: #130c24;
  font: 600 14px/1 var(--i-font);
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 12px 32px -14px rgba(var(--i-lilac-rgb), 0.75), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: transform var(--i-dur-1) var(--i-ease), background var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease);
}
.portal-primary:hover { background: #fff; transform: none; box-shadow: 0 0 0 4px rgba(var(--i-violet-rgb), 0.18), 0 16px 38px -12px rgba(var(--i-violet-rgb), 0.9); }
.portal-primary:active { transform: scale(0.97); }
.portal-primary > span { display: inline-block; transition: transform var(--i-dur-2) var(--i-spring); }
.portal-primary:hover > span { transform: translateY(3px); }
.hero-signature { right: 34px; bottom: 28px; color: rgba(var(--i-lilac-rgb), 0.78); font: 600 12px/1 var(--i-font-display); letter-spacing: 0.5em; text-shadow: 0 0 18px rgba(var(--i-violet-rgb), 0.8); }
.hero-signature span { margin-top: 8px; font: 500 8px/1.4 var(--i-font-mono); letter-spacing: 0.24em; color: rgba(var(--i-lilac-rgb), 0.6); text-shadow: none; }

/* ── Overview: section headings ── */
.eyebrow { color: var(--i-text-3); font: 500 10.5px/1.5 var(--i-font-mono); letter-spacing: 0.2em; }
.section-heading h2, #tools .section-heading h2 { margin: 6px 0 0; color: var(--i-text); font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--i-font-display); letter-spacing: -0.03em; }
.section-heading p, #tools .section-heading p { margin-top: 8px; color: var(--i-text-2); font: 400 14px/1.6 var(--i-font); }
.section-heading h2 .iris-info { margin-left: 10px; transform: translateY(-3px); }

/* The (i) link next to the map: a ghost button with a status chip. */
.network-action { gap: 10px; min-height: 44px; padding: 0 4px; color: var(--i-text-2); font: 500 13px/1 var(--i-font); cursor: pointer; transition: color var(--i-dur-2) var(--i-ease); }
.network-action:hover { color: var(--i-text); }
.network-action > span:last-child { display: inline-block; transition: transform var(--i-dur-2) var(--i-spring); }
.network-action:hover > span:last-child { transform: translate(2px, -2px); }
/* Status labels carry data-iris-state (set by iris-motion.js from their text): done is mint, retry is amber,
   work in progress breathes. */
:is(#network-badge, #signal-state, #tools .tool-card > em, .card-kicker > span:last-child):is([data-iris-state='complete'], [data-iris-state='observable']) { color: var(--i-mint); border-color: rgba(var(--i-mint-rgb), 0.32); background: rgba(var(--i-mint-rgb), 0.08); }
:is(#network-badge, #signal-state, .card-kicker > span:last-child)[data-iris-state='retry'] { color: var(--i-warn); border-color: rgba(var(--i-warn-rgb), 0.35); background: rgba(var(--i-warn-rgb), 0.08); }
:is(#network-badge, #signal-state, .card-kicker > span:last-child)[data-iris-state='checking'] { color: var(--i-lilac); animation: iris-breathe 1.6s ease-in-out infinite; }
#map-status[data-iris-state='locating-connection'] { animation: iris-breathe 1.6s ease-in-out infinite; }
#map-status:is([data-iris-state='signal-lookup-unavailable'], [data-iris-state^='map-unavailable']) { color: var(--i-warn); }

/* ── Overview: the connection map, framed as one glowing tile ── */
.network-layout {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--i-r-lg);
  background: var(--i-bg-raised) padding-box, var(--i-edge) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.9), var(--i-halo);
  overflow: hidden;
}
.dashboard-page .map-stage, .dashboard-page .network-first .map-stage {
  border: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--i-ultra-rgb), 0.12), transparent 65%), #0b0a13;
}
.map-grid { opacity: 0.55; }
.map-heading span, .dashboard-page .map-heading span { color: var(--i-text); font: 500 10px/1.4 var(--i-font-mono); letter-spacing: 0.18em; }
.map-heading b, .dashboard-page .map-heading b { color: var(--i-mint); font: 500 10px/1.4 var(--i-font-mono); letter-spacing: 0.18em; }
.coordinates, .network-first .coordinates { color: var(--i-text-3); font: 500 10px/1.4 var(--i-font-mono); letter-spacing: 0.12em; }
.map-recenter {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(var(--i-violet-rgb), 0.3);
  border-radius: var(--i-r-pill);
  background: rgba(15, 12, 26, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--i-text);
  font: 500 12.5px/1 var(--i-font);
  transition: border-color var(--i-dur-2) var(--i-ease), box-shadow var(--i-dur-2) var(--i-ease), background var(--i-dur-2) var(--i-ease);
}
.map-recenter:hover { border-color: rgba(var(--i-violet-rgb), 0.6); background: rgba(24, 19, 40, 0.85); box-shadow: var(--i-halo-hover); }
.map-attribution { border-radius: 6px; background: rgba(9, 7, 16, 0.75); color: var(--i-text-3); font: 500 10px/1.4 var(--i-font); }
.location-radar {
  background: conic-gradient(from 0deg, transparent 0deg 262deg, rgba(var(--i-violet-rgb), 0.05) 300deg, rgba(var(--i-lilac-rgb), 0.42) 358deg, transparent 360deg);
  border-color: rgba(var(--i-violet-rgb), 0.28);
  box-shadow: inset 0 0 60px rgba(var(--i-ultra-rgb), 0.18), 0 0 40px -10px rgba(var(--i-violet-rgb), 0.35);
}
.maplibregl-ctrl-group { border: 1px solid var(--i-line-2) !important; border-radius: 12px !important; background: rgba(15, 12, 26, 0.8) !important; box-shadow: none !important; overflow: hidden; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--i-line) !important; }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(0.9) sepia(0.2) hue-rotate(210deg); }
/* The IP card floats over the map as a HUD readout. */
.dashboard-page .network-first .network-card {
  top: 64px;
  right: 22px;
  width: 300px;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: var(--i-r-md);
  background: linear-gradient(160deg, rgba(20, 15, 36, 0.88), rgba(10, 8, 18, 0.86)) padding-box, var(--i-edge) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 0 36px -10px rgba(var(--i-violet-rgb), 0.35);
}
.card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--i-text-3); font: 500 10px/1.4 var(--i-font-mono); letter-spacing: 0.18em; }
.card-kicker > span:last-child { height: 20px; padding: 0 8px; font-size: 9px; color: var(--i-mint); border-color: rgba(var(--i-mint-rgb), 0.3); background: rgba(var(--i-mint-rgb), 0.08); }
.ip, .network-card .ip {
  margin: 14px 0 18px;
  color: #fff;
  font: 500 30px/1.1 var(--i-font-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(var(--i-violet-rgb), 0.55);
}
.ip.long { font-size: 17px; }
.telemetry small, .network-first .telemetry small { color: var(--i-text-3); font: 500 9.5px/1.4 var(--i-font-mono); letter-spacing: 0.16em; }
.telemetry strong, .network-first .telemetry strong { margin-top: 6px; color: var(--i-text); font: 500 13px/1.45 var(--i-font); letter-spacing: -0.005em; }
.network-card p { margin-top: 16px; color: var(--i-text-3); font: 400 12px/1.55 var(--i-font); }
.user-beacon { border-color: #fff; background: var(--i-violet); }

/* ── Overview: modules. One glowing tile each, with a cursor spotlight. ── */
.assessment-progress { gap: 12px; color: var(--i-text-2); font: 500 12px/1.35 var(--i-font); }
.assessment-progress small { color: var(--i-text-3); font: 500 11px/1.3 var(--i-font); }
.progress-ring { width: 44px; height: 44px; padding: 2px; border-radius: 50%; box-shadow: 0 0 18px -4px rgba(var(--i-violet-rgb), 0.7); }
.progress-ring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--i-bg-raised); color: var(--i-text); font: 500 11px/1 var(--i-font-mono); font-variant-numeric: tabular-nums; }
#tools .tool-grid { gap: 18px; }
#tools .tool-card {
  isolation: isolate;
  min-height: 228px;
  padding: 34px 40px;
  border: 1px solid transparent;
  border-radius: var(--i-r-xl);
  background: var(--i-glass) padding-box, var(--i-edge) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 44px -22px rgba(0, 0, 0, 0.85), var(--i-halo);
  transition: box-shadow var(--i-dur-3) var(--i-ease), background var(--i-dur-3) var(--i-ease), transform var(--i-dur-2) var(--i-ease);
}
#tools .tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(560px circle at var(--mx, 85%) var(--my, 20%), rgba(var(--i-violet-rgb), 0.12), transparent 45%),
    radial-gradient(420px 260px at 92% 20%, rgba(var(--i-ultra-rgb), 0.14), transparent 70%);
  opacity: 0.55;
  transition: opacity var(--i-dur-3) var(--i-ease);
  pointer-events: none;
}
#tools .tool-card:hover {
  border-color: transparent;
  background: var(--i-glass-hover) padding-box, var(--i-edge-hover) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 22px 52px -22px rgba(0, 0, 0, 0.9), var(--i-halo-hover);
  transform: translateY(-2px);
}
#tools .tool-card:hover::before { opacity: 1; }
#tools .tool-card:active { transform: translateY(0) scale(0.995); }
#tools .tool-card .tool-icon {
  width: 104px;
  height: 104px;
  padding: 26px;
  border: 1px solid rgba(var(--i-lilac-rgb), 0.22);
  border-radius: 28px;
  background: radial-gradient(circle at 30% 20%, rgba(var(--i-violet-rgb), 0.3), rgba(var(--i-ultra-rgb), 0.08) 60%, transparent), rgba(10, 8, 18, 0.6);
  color: var(--i-mint);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 44px -10px rgba(var(--i-violet-rgb), 0.55);
  transition: box-shadow var(--i-dur-3) var(--i-ease), transform var(--i-dur-3) var(--i-spring), border-color var(--i-dur-3) var(--i-ease);
}
#tools .tool-card:hover .tool-icon { transform: translateY(-3px) rotate(-2deg); border-color: rgba(var(--i-lilac-rgb), 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 0 56px -6px rgba(var(--i-violet-rgb), 0.75); }
#tools .tool-card .tool-icon .guardian-icon { filter: drop-shadow(0 0 8px rgba(var(--i-mint-rgb), 0.55)); }
#tools .tool-card .tool-copy { gap: 12px; }
#tools .tool-card .tool-eyebrow { color: var(--i-mint); font: 500 10.5px/1.4 var(--i-font-mono); letter-spacing: 0.2em; }
#tools .tool-card .tool-copy b { color: var(--i-text); font: 600 clamp(22px, 2.2vw, 30px)/1.12 var(--i-font-display); letter-spacing: -0.03em; }
#tools .tool-card .tool-copy small { max-width: 560px; color: var(--i-text-2); font: 400 15px/1.6 var(--i-font); }
#tools .tool-card .tool-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--i-lilac); font: 500 14px/1 var(--i-font); }
#tools .tool-card .tool-action > span { margin: 0; display: inline-block; transition: transform var(--i-dur-2) var(--i-spring); }
#tools .tool-card:hover .tool-action > span { transform: translate(3px, -3px); }
#tools .tool-card > em { right: 40px; bottom: 26px; width: 104px; justify-content: center; }
#tools .tool-card.done { border-color: transparent; }
#tools .tool-card.done > em { color: var(--i-mint); border-color: rgba(var(--i-mint-rgb), 0.32); background: rgba(var(--i-mint-rgb), 0.08); }

/* Privacy promise: one slim glass bar. */
.privacy-strip {
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--i-line);
  border-radius: var(--i-r-md);
  background: var(--i-surface);
}
.privacy-strip > span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid rgba(var(--i-mint-rgb), 0.3); border-radius: 12px; background: rgba(var(--i-mint-rgb), 0.07); color: var(--i-mint); font-size: 17px; box-shadow: 0 0 18px -6px rgba(var(--i-mint-rgb), 0.6); }
.privacy-strip p { color: var(--i-text-2); font: 400 13px/1.55 var(--i-font); }
.privacy-strip strong { color: var(--i-text); font: 600 13.5px/1.4 var(--i-font); }
.privacy-strip button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--i-line-2); border-radius: var(--i-r-pill); color: var(--i-text); font: 500 13px/1 var(--i-font); transition: border-color var(--i-dur-2) var(--i-ease), background var(--i-dur-2) var(--i-ease); }
.privacy-strip button:hover { border-color: rgba(var(--i-violet-rgb), 0.5); background: var(--i-surface-2); }

/* ── Dialog and module chrome ── */
#modal {
  border: 1px solid transparent;
  border-radius: var(--i-r-xl);
  background: linear-gradient(170deg, #110e1d, #0b0914) padding-box, var(--i-edge) border-box;
  color: var(--i-text);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(var(--i-violet-rgb), 0.35);
}
/* No scale in the entrance: targets keep their real size while the dialog settles. */
#modal[open]:modal { animation: iris-modal-in 380ms var(--i-ease) both; }
@keyframes iris-modal-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
#modal::backdrop { background: rgba(5, 4, 10, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.module-page #modal {
  border: 1px solid transparent;
  border-radius: var(--i-r-xl);
  background: var(--i-glass) padding-box, var(--i-edge) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 60px -30px rgba(0, 0, 0, 0.9), var(--i-halo);
}
.modal-head, .module-page #modal .modal-head { border-bottom: 1px solid var(--i-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent); border-radius: var(--i-r-xl) var(--i-r-xl) 0 0; }
.modal-head h2 { color: var(--i-text); font: 600 22px/1.2 var(--i-font-display); letter-spacing: -0.025em; }
.modal-head .eyebrow { color: var(--i-mint); }
.close, #modal .close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--i-line-2);
  border-radius: 50%;
  background: var(--i-surface-2);
  color: var(--i-text-2);
  font-size: 20px;
  line-height: 1;
  box-shadow: none;
  transition: transform var(--i-dur-2) var(--i-spring), border-color var(--i-dur-2) var(--i-ease), color var(--i-dur-2) var(--i-ease), background var(--i-dur-2) var(--i-ease);
}
.close:hover, #modal .close:hover { transform: rotate(90deg); border-color: rgba(var(--i-violet-rgb), 0.5); background: var(--i-surface-3); color: #fff; }
.callout { border-color: rgba(var(--i-violet-rgb), 0.4); background: rgba(var(--i-violet-rgb), 0.06); color: var(--i-text-2); border-radius: 0 var(--i-r-sm) var(--i-r-sm) 0; }
.finding { border-color: var(--i-line); }
.finding b { color: var(--i-text); }

/* Module banners: a compact hero on every module page. */
.module-banner, .device-intro {
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--i-r-xl);
  background:
    radial-gradient(640px 320px at 92% 0%, rgba(var(--i-ultra-rgb), 0.26), transparent 65%) padding-box,
    linear-gradient(160deg, #130e24, #0b0915 70%) padding-box,
    var(--i-edge) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px -32px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(var(--i-ultra-rgb), 0.5);
}
.module-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.module-banner .eyebrow { color: var(--i-mint); }
.module-banner h1, .module-banner h2 { color: var(--i-text); font: 600 clamp(30px, 3.6vw, 46px)/1.04 var(--i-font-display); letter-spacing: -0.04em; }
.module-banner h1 span, .module-banner h2 span, .module-banner h3 span, .device-intro h3 span {
  background: var(--i-uv-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.module-banner p { color: var(--i-text-2); font: 400 15.5px/1.6 var(--i-font); }
.module-banner .module-emblem {
  border: 1px solid rgba(var(--i-lilac-rgb), 0.24);
  border-radius: 30px;
  background: radial-gradient(circle at 30% 20%, rgba(var(--i-violet-rgb), 0.32), rgba(var(--i-ultra-rgb), 0.08) 60%, transparent), rgba(10, 8, 18, 0.6);
  color: var(--i-mint);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 60px -12px rgba(var(--i-violet-rgb), 0.7);
}
.module-emblem .guardian-icon { filter: drop-shadow(0 0 10px rgba(var(--i-mint-rgb), 0.55)); }

/* ── Small screens ── */
@media (max-width: 780px) {
  .portal-sidebar, .sidebar-collapsed .portal-sidebar { border-bottom: 1px solid var(--i-line); background: rgba(9, 7, 16, 0.88); }
  .portal-brand > span { font-size: 18px; }
  .hero-copy { padding: 30px 24px; }
  .hero-copy h1 { font-size: clamp(34px, 9vw, 46px); }
  .dashboard-page .network-first .network-card { top: auto; right: auto; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--i-line); background: rgba(12, 10, 21, 0.96); }
  #tools .tool-card { padding: 26px 24px; border-radius: var(--i-r-lg); min-height: 0; }
  #tools .tool-card > em { right: 24px; bottom: auto; top: 30px; width: auto; }
  .privacy-strip { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  #tools .tool-card .tool-icon { width: 56px; height: 56px; padding: 13px; border-radius: 16px; }
  #tools .tool-card .tool-copy b { font-size: 24px; }
  #tools .tool-card .tool-copy small { font-size: 14.5px; }
  .module-banner .module-emblem { border-radius: 16px; }
}
@media (pointer: coarse), (max-width: 780px) {
  .account-link, .beta, .earn-account, .back-link, .sidebar-toggle { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #overview-content > *, #module-content > *, .earn-main > *, .account-shell > *, .upgrade-main > *, .legal-shell > *, #tools .tool-card, .iris-swap, .iris-tooltip, #modal[open]:modal { animation: none !important; }
  .hero-label i::after { animation: none; display: none; }
  #tools .tool-card:hover, #tools .tool-card:hover .tool-icon { transform: none; }
}

/* Title + (i) on one line. */
.iris-title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.iris-title-row .iris-info { margin-top: 4px; }
@media (max-width: 780px) {
  .section-heading { flex-wrap: wrap; align-items: flex-end; }
  .privacy-strip p { flex: 1 1 200px; }
  .privacy-strip button { margin-left: 54px; }
}