/*
 * Grax — Obsidian Glassmorphism popup surface
 * UI-only layer. Runtime selectors intentionally match popup.js without altering filtering logic.
 */

@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #020202;
  --obsidian: #050505;
  --charcoal: #0a0a0a;
  --charcoal-2: #101113;
  --cyan: #65f7ff;
  --cyan-hot: #9dfeff;
  --cyan-dim: rgba(101, 247, 255, 0.15);
  --cyan-line: rgba(101, 247, 255, 0.30);
  --text: #f6fbfc;
  --muted: rgba(230, 241, 244, 0.58);
  --faint: rgba(230, 241, 244, 0.36);
  --danger: #ff607a;
  --glass: rgba(9, 10, 11, 0.70);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.18, 1.35, 0.28, 1);
}

* { box-sizing: border-box; }
html, body {
  width: 420px;
  min-width: 420px;
  min-height: 600px;
  margin: 0;
}
html {
  overflow: hidden;
}
body {
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;

  position: relative;
  isolation: isolate;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 7%, rgba(80, 247, 255, 0.16), transparent 31%),
    radial-gradient(circle at 3% 82%, rgba(31, 123, 133, 0.13), transparent 36%),
    linear-gradient(145deg, #020202 0%, #050505 48%, #0a0a0a 100%);
  font-family: "InterVariable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible {
  outline: 1px solid rgba(101, 247, 255, 0.86);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(101, 247, 255, 0.085);
}
button:disabled { cursor: default; }
svg { display: block; }

/* Grax cyber-scroll system — thin, quiet, and visible only when needed. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 230, 0.72) rgba(2, 2, 2, 0.34);
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: rgba(2, 2, 2, 0.42);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 1px solid rgba(2, 2, 2, 0.76);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(183, 255, 255, 0.95), #00ffe6 48%, rgba(0, 200, 210, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 10px rgba(0, 255, 230, 0.26);
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #ffffff, #00ffe6 44%, #4be8f2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 14px rgba(0, 255, 230, 0.42);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.ambient {
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(50px);
  opacity: .82;
  mix-blend-mode: screen;
  z-index: -4;
}
.ambient-a { top: -105px; right: -70px; width: 245px; height: 245px; background: radial-gradient(circle, rgba(101,247,255,.18), rgba(17,82,89,.035) 60%, transparent 74%); }
.ambient-b { bottom: -125px; left: -95px; width: 278px; height: 278px; background: radial-gradient(circle, rgba(101,247,255,.11), rgba(10,66,72,.025) 61%, transparent 76%); }
.ambient-c { top: 38%; left: 50%; width: 170px; height: 170px; opacity: .48; filter: blur(34px); background: radial-gradient(circle, rgba(157,254,255,.08), transparent 70%); }
.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .032;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

.app-shell { position: relative; z-index: 1; width: 100%; min-height: 600px; padding: 10px; }
.obsidian-surface {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  padding: 16px 22px 12px;
  border-radius: 30px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.052), transparent 20%),
    radial-gradient(circle at 83% 1%, rgba(101,247,255,.084), transparent 27%),
    linear-gradient(145deg, rgba(10,10,10,.82), rgba(2,2,2,.94) 55%, rgba(10,10,10,.86));
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  box-shadow:
    0 30px 88px rgba(0,0,0,.78),
    0 2px 18px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,255,255,.025),
    inset 0 0 0 1px rgba(101,247,255,.035);
}
.obsidian-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(148deg, rgba(255,255,255,.15), rgba(255,255,255,.015) 36%, rgba(101,247,255,.16) 72%, rgba(255,255,255,.055));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .72;
}
.surface-sheen, .surface-refraction, .surface-grid { position:absolute; pointer-events:none; }
.surface-sheen { top:-125px; left:-75px; width:310px; height:250px; background:radial-gradient(ellipse, rgba(255,255,255,.075), transparent 68%); transform:rotate(-15deg); filter:blur(14px); }
.surface-refraction { right:-54px; bottom:108px; width:140px; height:250px; background:linear-gradient(90deg, transparent, rgba(101,247,255,.038), transparent); transform:rotate(15deg); filter:blur(13px); }
.surface-grid { inset:0; opacity:.055; background: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 70% 12%, #000, transparent 62%); }

.topbar, .hero-card, .site-card, .metrics-grid, .quick-card, .footer, .hairline { position: relative; z-index: 2; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.grax-logo {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  isolation: isolate;
  line-height: 0;
}
.grax-logo--header { width: 42px; height: 42px; }
.grax-logo--hero { width: 116px; height: 116px; }
.grax-logo__glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  filter:
    drop-shadow(0 0 7px rgba(0, 255, 230, 0.46))
    drop-shadow(0 0 18px rgba(0, 255, 230, 0.14));
  transition: filter .32s var(--ease), opacity .32s var(--ease), transform .32s var(--ease);
}


.grax-logo__orbit {
  fill: none;
  stroke: rgba(0, 255, 230, 0.34);
  stroke-width: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 58 22 6 18;
  stroke-dashoffset: 0;
  opacity: 0.78;
  filter: drop-shadow(0 0 4px rgba(0, 255, 230, 0.30));
  animation: grax-orbit-flow 10s linear infinite;
}

@keyframes grax-orbit-flow {
  to {
    stroke-dashoffset: -104;
  }
}

.grax-logo__outer,
.grax-logo__inner,
.grax-logo__facets,
.grax-logo__bar {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-miterlimit: 14;
  vector-effect: non-scaling-stroke;
}

.grax-logo__outer {
  stroke: #00ffe6;
  stroke-width: 3.35;
}

.grax-logo__inner {
  stroke: rgba(0, 255, 230, 0.43);
  stroke-width: 1.45;
}

.grax-logo__facets {
  stroke: rgba(183, 255, 255, 0.34);
  stroke-width: 1.05;
}

.grax-logo__bar {
  stroke: #b7ffff;
  stroke-width: 2.05;
}

.grax-logo__core {
  fill: #00ffe6;
  filter: drop-shadow(0 0 5px rgba(0, 255, 230, 0.72));
}

.brand:hover .grax-logo__glyph {
  transform: translateZ(0) scale(1.025);
  filter:
    drop-shadow(0 0 8px rgba(0, 255, 230, 0.64))
    drop-shadow(0 0 22px rgba(0, 255, 230, 0.22));
}
.brand-copy { display:grid; line-height:1; }
.brand-name { font-size:16px; font-weight:760; letter-spacing:.045em; text-transform:uppercase; }
.brand-subline { margin-top:5px; font-size:9px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; }
.top-actions { display:flex; align-items:center; gap:8px; }
.engine-pill { display:inline-flex; align-items:center; gap:7px; height:31px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.035); color:rgba(246,251,252,.78); font-size:10px; font-weight:720; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(101,247,255,.13), 0 0 22px rgba(101,247,255,.055); }
.engine-pill.is-offline { filter:saturate(.25); opacity:.62; }
.engine-dot { width:6px; height:6px; border-radius:99px; background:var(--cyan); box-shadow:0 0 12px rgba(101,247,255,.88); }
.icon-button { width:33px; height:33px; display:grid; place-items:center; border:0; border-radius:13px; cursor:pointer; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.058); transition:transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease); }
.icon-button:hover { transform:translateY(-1px); background:rgba(101,247,255,.075); box-shadow:inset 0 0 0 1px rgba(101,247,255,.19), 0 0 20px rgba(101,247,255,.07); }
.icon-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }

.hero-card { margin-top:20px; min-height:242px; display:grid; grid-template-columns:122px 1fr; column-gap:18px; align-items:center; }
.hero-atmosphere { position:absolute; inset:8px -20px auto 0; height:190px; pointer-events:none; background:radial-gradient(circle at 54% 32%, rgba(101,247,255,.115), transparent 44%); filter:blur(18px); opacity:.72; }
.grax-stage {
  position: relative;
  width: 120px;
  height: 152px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  perspective: 600px;
}
.grax-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-copy { align-self:center; min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--cyan); font-size:10px; font-weight:780; letter-spacing:.18em; text-transform:uppercase; }
.status-dot { width:7px; height:7px; border-radius:99px; background:var(--cyan); box-shadow:0 0 13px rgba(101,247,255,.92); }
.eyebrow.is-paused .status-dot { background:var(--faint); box-shadow:none; }
h1 { margin:13px 0 10px; font-size:40px; line-height:.96; letter-spacing:-.065em; font-weight:790; }
h1 span { color:rgba(246,251,252,.58); font-weight:520; }
.hero-copy p { margin:0; max-width:230px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.master-switch { grid-column:1 / -1; margin-top:18px; width:100%; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:0; border-radius:23px; padding:13px 14px 13px 18px; cursor:pointer; background:rgba(255,255,255,.026); box-shadow:inset 0 0 0 1px rgba(101,247,255,.105), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(22px) saturate(180%); transition:filter .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.master-switch:hover:not(:disabled) { transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(101,247,255,.23), 0 0 24px rgba(101,247,255,.06); }
.master-switch-copy { display:grid; text-align:left; }
.master-switch-label { font-size:10px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; font-weight:750; }
.master-switch-value { margin-top:3px; font-size:17px; font-weight:760; letter-spacing:-.02em; }
.master-switch-track { position:relative; width:76px; height:34px; border-radius:999px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow:inset 0 0 0 1px rgba(101,247,255,.18), inset 0 0 18px rgba(0,0,0,.55); }
.master-switch-energy { position:absolute; inset:-8px; transform:translateX(-72%); background:linear-gradient(90deg, transparent, rgba(101,247,255,.54), transparent); filter:blur(7px); opacity:.95; }
.master-switch-thumb { position:absolute; top:5px; left:5px; width:24px; height:24px; border-radius:999px; background:rgba(246,251,252,.9); box-shadow:0 0 0 1px rgba(255,255,255,.38), 0 0 20px rgba(101,247,255,.34); transition:left .48s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease); }
.thumb-core { position:absolute; inset:7px; border-radius:inherit; background:var(--cyan); box-shadow:0 0 16px rgba(101,247,255,.9); }
.master-switch[aria-checked="true"] .master-switch-thumb { left:47px; background:var(--cyan-hot); box-shadow:0 0 0 1px rgba(157,254,255,.75), 0 0 26px rgba(101,247,255,.68); }
.master-switch[aria-checked="false"] { filter:saturate(.55); }
.hero-card.is-paused .grax-logo__orbit {
  opacity: 0.24;
  filter: drop-shadow(0 0 2px rgba(0, 255, 230, 0.12));
}
.hero-card.is-paused .grax-logo__glyph {
  opacity: .54;
  filter: drop-shadow(0 0 5px rgba(0, 255, 230, .16));
}
.hero-card.is-paused .grax-logo__outer,
.hero-card.is-paused .grax-logo__bar {
  stroke: rgba(157, 254, 255, .58);
}
.hero-card.is-paused .grax-logo__core {
  fill: rgba(157, 254, 255, .58);
}

.hairline { height:1px; margin:14px 0; background:linear-gradient(90deg, transparent, rgba(101,247,255,.18), rgba(255,255,255,.06), transparent); }
.site-card { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:74px; padding:4px 2px; }
.site-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.site-monogram { flex:0 0 43px; width:43px; height:43px; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.034); color:rgba(246,251,252,.84); font-size:13px; font-weight:780; letter-spacing:-.03em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 18px rgba(101,247,255,.035); }
.site-copy { min-width:0; }
.section-kicker { display:block; color:var(--faint); font-size:9px; font-weight:770; letter-spacing:.18em; text-transform:uppercase; }
.site-copy h2, .section-heading h2 { margin:4px 0 0; font-size:17px; line-height:1.1; letter-spacing:-.04em; }
.site-copy h2 { max-width:236px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.site-copy p { margin:5px 0 0; color:var(--muted); font-size:11.5px; }
.compact-switch { flex:0 0 auto; width:47px; height:29px; border:0; border-radius:999px; padding:0; cursor:pointer; background:transparent; }
.compact-track { position:relative; display:block; width:100%; height:100%; border-radius:inherit; background:rgba(255,255,255,.046); box-shadow:inset 0 0 0 1px rgba(255,255,255,.075); transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.compact-thumb { position:absolute; top:5px; left:5px; width:19px; height:19px; border-radius:999px; background:rgba(246,251,252,.82); box-shadow:0 5px 14px rgba(0,0,0,.42); transition:left .42s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease); }
.compact-switch[aria-checked="true"] .compact-track { background:rgba(101,247,255,.10); box-shadow:inset 0 0 0 1px rgba(101,247,255,.24), 0 0 18px rgba(101,247,255,.055); }
.compact-switch[aria-checked="true"] .compact-thumb { left:23px; background:var(--cyan); box-shadow:0 0 14px rgba(101,247,255,.52); }

.metrics-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; min-height:68px; padding:8px 0; }
.metric-card { min-width:0; }
.metric-label { display:block; color:var(--faint); font-size:9px; font-weight:760; letter-spacing:.18em; text-transform:uppercase; }
.metric-value { display:block; margin-top:6px; font-size:19px; font-weight:790; letter-spacing:-.04em; }
.metric-divider { width:1px; height:34px; margin:0 12px; background:linear-gradient(transparent, rgba(101,247,255,.18), transparent); }
.quick-card { margin-top:9px; padding:7px 0 0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.live-chip { display:inline-flex; align-items:center; gap:7px; height:27px; padding:0 10px; border-radius:999px; background:rgba(101,247,255,.055); color:rgba(246,251,252,.72); font-size:10px; font-weight:680; }
.live-chip span { width:5px; height:5px; border-radius:99px; background:var(--cyan); box-shadow:0 0 9px rgba(101,247,255,.8); }
.setting-row { width:100%; min-height:58px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; border:0; border-radius:18px; padding:9px 7px; cursor:pointer; text-align:left; background:transparent; transition:background .28s var(--ease), transform .28s var(--ease); }
.setting-row:hover:not(:disabled) { background:rgba(255,255,255,.028); transform:translateX(1px); }
.setting-glyph { width:33px; height:33px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.052); }
.setting-glyph svg { width:17px; height:17px; fill:none; stroke:rgba(246,251,252,.78); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.setting-name { display:block; font-size:13px; font-weight:720; letter-spacing:-.015em; }
.setting-description { display:block; margin-top:3px; color:var(--muted); font-size:11.5px; line-height:1.35; }
.mini-switch { position:relative; width:38px; height:22px; border-radius:999px; background:rgba(255,255,255,.044); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.mini-switch span { position:absolute; top:4px; left:4px; width:14px; height:14px; border-radius:999px; background:rgba(246,251,252,.8); transition:left .38s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease); }
.setting-row[aria-checked="true"] .mini-switch { background:rgba(101,247,255,.10); box-shadow:inset 0 0 0 1px rgba(101,247,255,.22), 0 0 16px rgba(101,247,255,.05); }
.setting-row[aria-checked="true"] .mini-switch span { left:20px; background:var(--cyan); box-shadow:0 0 12px rgba(101,247,255,.58); }
.row-action { width:28px; height:28px; display:grid; place-items:center; color:rgba(246,251,252,.52); }
.row-action svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.row-action.is-spinning svg { animation:spin .9s linear infinite; }

.footer { min-height:35px; display:flex; align-items:center; justify-content:space-between; margin-top:5px; }
.privacy-note { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:10.5px; }
.privacy-pulse { width:6px; height:6px; border-radius:999px; background:var(--cyan); box-shadow:0 0 11px rgba(101,247,255,.72); }
.text-button { border:0; background:transparent; padding:8px 0 8px 12px; cursor:pointer; color:rgba(101,247,255,.85); font-size:11px; font-weight:720; letter-spacing:.03em; }
.toast { position:fixed; z-index:40; left:18px; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 13px; border-radius:18px; background:rgba(7,8,9,.76); color:var(--text); backdrop-filter:blur(25px) saturate(180%); -webkit-backdrop-filter:blur(25px) saturate(180%); box-shadow:inset 0 0 0 1px rgba(101,247,255,.18), 0 20px 54px rgba(0,0,0,.58); opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; }
.toast.is-error { box-shadow:inset 0 0 0 1px rgba(255,96,122,.3), 0 20px 54px rgba(0,0,0,.58); }
.toast-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:9px; background:rgba(101,247,255,.10); color:var(--cyan); }
.toast-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }

@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
body.reduced-motion .grax-logo__glyph { transition: none; }
