/* ============================================================
   REGRET RADAR — liquid glass design system
   Dark-first: the bare :root block is the full dark palette.
   ============================================================ */

:root{
  /* ground + glass */
  --void:#050507;
  --void-2:#08080d;
  --ink:#0c0c14;
  --glass-1:rgba(255,255,255,.040);
  --glass-2:rgba(255,255,255,.065);
  --glass-3:rgba(255,255,255,.095);
  --glass-solid:rgba(14,14,22,.82);
  --edge:rgba(255,255,255,.10);
  --edge-soft:rgba(255,255,255,.06);
  --edge-strong:rgba(255,255,255,.20);
  --hilite:rgba(255,255,255,.55);
  --shade:rgba(0,0,0,.55);

  /* ink */
  --text:#F5F5F7;
  --text-2:#9898A3;
  --text-3:#6A6A77;

  /* signal */
  --red:#FF4D5A;
  --orange:#FF8A3D;
  --amber:#FFC94D;
  --green:#39D98A;
  --cyan:#45D9FF;
  --violet:#8A7BFF;

  --shadow-1:0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 18px 40px -18px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.35);
  --shadow-3:0 40px 90px -30px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.4);

  --blur-1:blur(14px) saturate(140%);
  --blur-2:blur(26px) saturate(150%);
  --blur-3:blur(44px) saturate(160%);

  --f-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px; --r-pill:999px;
  --wrap:1220px;
  --nav-h:64px;

  --grid-line:rgba(255,255,255,.045);
  --orb-a:rgba(255,77,90,.30);
  --orb-b:rgba(69,217,255,.30);
  --orb-c:rgba(255,138,61,.30);
  --orb-d:rgba(138,123,255,.24);
  --sweep:rgba(69,217,255,.10);
  --noise-op:.30;
  --scrim:linear-gradient(180deg,rgba(5,5,7,0) 0%,rgba(5,5,7,.55) 45%,var(--void) 100%);
  color-scheme:dark;
}

/* light mode: same token names, re-valued */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    /* The ground sits a step deeper than the glass so white panels read as
       raised rather than dissolving into the page — the failure mode of most
       light glass. Edges and shadows are stronger here than in dark for the
       same reason: on white there is no glow to define an edge, only contrast. */
    --void:#E7EAF2; --void-2:#EFF1F7; --ink:#FFFFFF;
    --glass-1:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.86); --glass-3:rgba(255,255,255,.96);
    --glass-solid:rgba(255,255,255,.97);
    --edge:rgba(16,20,40,.13); --edge-soft:rgba(16,20,40,.08); --edge-strong:rgba(16,20,40,.26);
    --hilite:rgba(255,255,255,1); --shade:rgba(16,20,40,.14);
    --text:#0A0B12; --text-2:#4B5162; --text-3:#767D90;
    --red:#D42438; --orange:#B85A0C; --amber:#8F6A05; --green:#0A8F59; --cyan:#0670A0; --violet:#5040C8;
    --shadow-1:0 1px 2px rgba(16,20,40,.08), 0 2px 6px rgba(16,20,40,.05);
    --shadow-2:0 12px 30px -14px rgba(16,20,40,.22), 0 2px 8px rgba(16,20,40,.07);
    --shadow-3:0 30px 64px -26px rgba(16,20,40,.28), 0 6px 18px rgba(16,20,40,.09);
    --grid-line:rgba(16,20,40,.055);
    /* tint, not smear: the orbs were muddying the whole page */
    --orb-a:rgba(214,36,56,.13); --orb-b:rgba(6,112,160,.13); --orb-c:rgba(184,90,12,.11); --orb-d:rgba(80,64,200,.10);
    --sweep:rgba(6,112,160,.05);
    --noise-op:.10;
    --scrim:linear-gradient(180deg,rgba(231,234,242,0) 0%,rgba(231,234,242,.5) 45%,var(--void) 100%);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --void:#E7EAF2; --void-2:#EFF1F7; --ink:#FFFFFF;
  --glass-1:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.86); --glass-3:rgba(255,255,255,.96);
  --glass-solid:rgba(255,255,255,.97);
  --edge:rgba(16,20,40,.13); --edge-soft:rgba(16,20,40,.08); --edge-strong:rgba(16,20,40,.26);
  --hilite:rgba(255,255,255,1); --shade:rgba(16,20,40,.14);
  --text:#0A0B12; --text-2:#4B5162; --text-3:#767D90;
  --red:#D42438; --orange:#B85A0C; --amber:#8F6A05; --green:#0A8F59; --cyan:#0670A0; --violet:#5040C8;
  --shadow-1:0 1px 2px rgba(16,20,40,.08), 0 2px 6px rgba(16,20,40,.05);
  --shadow-2:0 12px 30px -14px rgba(16,20,40,.22), 0 2px 8px rgba(16,20,40,.07);
  --shadow-3:0 30px 64px -26px rgba(16,20,40,.28), 0 6px 18px rgba(16,20,40,.09);
  --grid-line:rgba(16,20,40,.055);
  /* tint, not smear: the orbs were muddying the whole page */
  --orb-a:rgba(214,36,56,.13); --orb-b:rgba(6,112,160,.13); --orb-c:rgba(184,90,12,.11); --orb-d:rgba(80,64,200,.10);
  --sweep:rgba(6,112,160,.05);
  --noise-op:.10;
  --scrim:linear-gradient(180deg,rgba(231,234,242,0) 0%,rgba(231,234,242,.5) 45%,var(--void) 100%);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --void:#050507; --void-2:#08080d; --ink:#0c0c14;
  --glass-1:rgba(255,255,255,.040); --glass-2:rgba(255,255,255,.065); --glass-3:rgba(255,255,255,.095);
  --glass-solid:rgba(14,14,22,.82);
  --edge:rgba(255,255,255,.10); --edge-soft:rgba(255,255,255,.06); --edge-strong:rgba(255,255,255,.20);
  --hilite:rgba(255,255,255,.55); --shade:rgba(0,0,0,.55);
  --text:#F5F5F7; --text-2:#9898A3; --text-3:#6A6A77;
  --red:#FF4D5A; --orange:#FF8A3D; --amber:#FFC94D; --green:#39D98A; --cyan:#45D9FF; --violet:#8A7BFF;
  --shadow-1:0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 18px 40px -18px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.35);
  --shadow-3:0 40px 90px -30px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.4);
  --grid-line:rgba(255,255,255,.045);
  --orb-a:rgba(255,77,90,.30); --orb-b:rgba(69,217,255,.30); --orb-c:rgba(255,138,61,.30); --orb-d:rgba(138,123,255,.24);
  --sweep:rgba(69,217,255,.10);
  --noise-op:.30;
  --scrim:linear-gradient(180deg,rgba(5,5,7,0) 0%,rgba(5,5,7,.55) 45%,var(--void) 100%);
  color-scheme:dark;
}

/* band colours */
.b-vlow{--band:var(--green);--band-2:var(--cyan)}
.b-low{--band:var(--cyan);--band-2:var(--green)}
.b-mixed{--band:var(--amber);--band-2:var(--orange)}
.b-high{--band:var(--orange);--band-2:var(--red)}
.b-vhigh{--band:var(--red);--band-2:var(--orange)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-ui);
  background:var(--void);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
a[data-go],[data-go]:not(button){cursor:pointer}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
::selection{background:rgba(69,217,255,.28)}

/* ---------------------------------------------- ambient field */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--void)}
.field .grid{
  position:absolute;inset:-2px;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 8%,#000 5%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 8%,#000 5%,transparent 72%);
}
.field .rings{
  position:absolute;left:50%;top:-14vh;width:min(150vw,1500px);aspect-ratio:1;transform:translateX(-50%);
  background:
    radial-gradient(circle,transparent 0 16%,var(--grid-line) 16% calc(16% + 1px),transparent calc(16% + 1px)),
    radial-gradient(circle,transparent 0 26%,var(--grid-line) 26% calc(26% + 1px),transparent calc(26% + 1px)),
    radial-gradient(circle,transparent 0 36%,var(--grid-line) 36% calc(36% + 1px),transparent calc(36% + 1px)),
    radial-gradient(circle,transparent 0 46%,var(--grid-line) 46% calc(46% + 1px),transparent calc(46% + 1px));
  mask-image:radial-gradient(circle,#000 10%,transparent 58%);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 58%);
  opacity:.9;
}
.field .sweep{
  position:absolute;left:50%;top:-14vh;width:min(150vw,1500px);aspect-ratio:1;transform:translateX(-50%);
  background:conic-gradient(from 0deg,transparent 0deg,transparent 300deg,var(--sweep) 352deg,transparent 360deg);
  mask-image:radial-gradient(circle,#000 4%,transparent 50%);
  -webkit-mask-image:radial-gradient(circle,#000 4%,transparent 50%);
  animation:sweep-spin 26s linear infinite;
}
/* the hero sweep is centred with translateX(-50%), so its keyframes must carry it */
@keyframes sweep-spin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
/* plain rotation for anything that spins in place, e.g. the logo mark */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.orb-a{width:46vw;height:46vw;min-width:340px;min-height:340px;background:var(--orb-a);left:calc(2% + var(--px,0px)*1.4);top:-24vh;animation:drift-a 34s ease-in-out infinite alternate}
.orb-b{width:40vw;height:40vw;min-width:300px;min-height:300px;background:var(--orb-b);right:calc(2% - var(--px,0px)*1.1);top:2vh;animation:drift-b 41s ease-in-out infinite alternate}
.orb-c{width:34vw;height:34vw;min-width:260px;min-height:260px;background:var(--orb-c);left:calc(38% + var(--px,0px)*.6);top:26vh;animation:drift-c 47s ease-in-out infinite alternate}
.orb-d{width:30vw;height:30vw;min-width:220px;min-height:220px;background:var(--orb-d);left:2%;top:62vh;animation:drift-a 53s ease-in-out infinite alternate-reverse}
@keyframes drift-a{to{transform:translate3d(7vw,6vh,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(-8vw,9vh,0) scale(.88)}}
@keyframes drift-c{to{transform:translate3d(5vw,-7vh,0) scale(1.2)}}
.field .cursor-light{
  position:absolute;width:760px;height:760px;border-radius:50%;left:0;top:0;
  background:radial-gradient(circle,rgba(69,217,255,.10),transparent 62%);
  transform:translate3d(calc(var(--mx,50vw) - 380px),calc(var(--my,30vh) - 380px),0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.field .noise{
  position:absolute;inset:0;opacity:var(--noise-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.field .scrim{position:absolute;inset:0;background:var(--scrim)}

/* ---------------------------------------------- layout */
.page{position:relative;z-index:1}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:22px}
main{padding-block:0 90px;min-height:70vh}
.section{margin-top:64px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.035em}
.section-head p{color:var(--text-2);font-size:13.5px;margin-top:3px;max-width:62ch}

.eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;opacity:.7}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.04em}

/* ---------------------------------------------- glass primitive */
.glass{
  position:relative;
  background:var(--glass-1);
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  backdrop-filter:var(--blur-2);
  -webkit-backdrop-filter:var(--blur-2);
  box-shadow:var(--shadow-2);
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--hilite),transparent 42%);
  opacity:.10;
}
.glass-2{background:var(--glass-2)}
.glass-3{background:var(--glass-3);backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3)}

/* cursor-reactive border glow */
.lit{position:relative}
.lit::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(300px circle at var(--cx,50%) var(--cy,0%),var(--band,var(--cyan)),transparent 62%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;
}
.lit:hover::after{opacity:.75}

/* ---------------------------------------------- navbar */
.nav-shell{position:sticky;top:0;z-index:60;padding-top:14px;pointer-events:none}
.nav{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  height:var(--nav-h);padding:0 8px 0 16px;
  border-radius:var(--r-pill);
  background:var(--glass-2);
  border:1px solid var(--edge);
  backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);
  box-shadow:var(--shadow-2);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--hilite),transparent 45%);opacity:.12}
.nav-shell.scrolled .nav{background:var(--glass-solid);box-shadow:var(--shadow-3);border-color:var(--edge-strong)}
.brand{display:flex;align-items:center;gap:10px;padding-right:6px;flex-shrink:0}
.brand-mark{width:28px;height:28px;flex-shrink:0}
.brand-mark .pulse{transform-origin:16px 16px;transform-box:view-box;animation:spin 6s linear infinite}
.brand-name{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-links a{
  position:relative;padding:8px 13px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--text-2);
  transition:color .2s ease,background .2s ease;
}
.nav-links a:hover{color:var(--text);background:var(--glass-2)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1.5px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--glass-1);border:1px solid var(--edge-soft);cursor:pointer;color:var(--text-2);
  transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease;
}
.icon-btn:hover{color:var(--text);background:var(--glass-3);border-color:var(--edge);transform:translateY(-1px)}
.icon-btn:active{transform:scale(.94)}
.nav-cta{
  height:38px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--glass-3),var(--glass-1));
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.nav-cta:hover{transform:translateY(-1px);border-color:var(--edge-strong);box-shadow:0 8px 22px -10px rgba(69,217,255,.55)}
.nav-cta:active{transform:scale(.97)}
.nav-burger{display:none}

/* ---------------------------------------------- hero */
.hero{padding-top:clamp(46px,7vw,86px);padding-bottom:8px;text-align:center;position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);
  background:var(--glass-2);border:1px solid var(--edge);backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);
}
.hero-badge b{color:var(--text);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(57,217,138,.18);animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{
  /* background-clip:text paints only the line box, so a tight line-height
     slices the descender off the g in "Regret". Leading a touch looser plus a
     little padding gives the glyph room without loosening the look. */
  font-size:clamp(46px,9.4vw,112px);line-height:1;letter-spacing:-.055em;margin:22px 0 0;
  padding-bottom:.1em;
  font-weight:800;font-stretch:105%;
  background:linear-gradient(178deg,var(--text) 30%,color-mix(in srgb,var(--text) 55%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .tag{
  font-family:var(--f-display);font-weight:600;font-size:clamp(17px,2.5vw,25px);letter-spacing:-.03em;
  margin-top:14px;color:var(--text);
}
.hero .tag em{font-style:normal;background:linear-gradient(92deg,var(--red),var(--orange) 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:60ch;margin:14px auto 0;color:var(--text-2);font-size:15.5px}

/* ---------------------------------------------- search */
.searchbox{position:relative;max-width:640px;margin:30px auto 0;z-index:40}
.search-field{
  display:flex;align-items:center;gap:12px;height:62px;padding:0 8px 0 20px;
  border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--edge);
  backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);box-shadow:var(--shadow-2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.searchbox.focused .search-field{
  transform:scale(1.022);border-color:rgba(69,217,255,.55);background:var(--glass-3);
  box-shadow:var(--shadow-3),0 0 0 5px rgba(69,217,255,.09),0 0 60px -10px rgba(69,217,255,.45);
}
.search-field svg{flex-shrink:0;color:var(--text-3);transition:color .3s ease,transform .3s ease}
.searchbox.focused .search-field svg{color:var(--cyan);transform:scale(1.06)}
.search-field input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:16.5px;letter-spacing:-.01em}
.search-field input::placeholder{color:var(--text-3)}
.search-go{
  height:46px;padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:14px;color:#08080d;
  background:linear-gradient(120deg,var(--cyan),var(--green));
  box-shadow:0 10px 26px -12px rgba(69,217,255,.9);
  transition:transform .18s ease,filter .18s ease;white-space:nowrap;
}
.search-go:hover{transform:translateY(-1px) scale(1.02);filter:brightness(1.06)}
.search-go:active{transform:scale(.97)}
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 10px);border-radius:var(--r-l);overflow:hidden;
  background:var(--glass-solid);border:1px solid var(--edge);backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3);
  box-shadow:var(--shadow-3);padding:7px;
  opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);
  max-height:min(62vh,470px);overflow-y:auto;
}
.searchbox.open .suggest{opacity:1;transform:none;pointer-events:auto}
.suggest-label{padding:9px 12px 6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.sug{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 12px;border-radius:12px;border:0;background:none;cursor:pointer;transition:background .15s ease}
.sug:hover,.sug.active{background:var(--glass-2)}
.sug-main{flex:1;min-width:0}
.sug-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-meta{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-score{font-family:var(--f-display);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;color:var(--band,var(--text-2))}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chip{
  padding:7px 14px;border-radius:var(--r-pill);background:var(--glass-1);border:1px solid var(--edge-soft);
  font-size:12.5px;color:var(--text-2);cursor:pointer;backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  transition:color .2s ease,border-color .2s ease,transform .2s ease,background .2s ease;
}
.chip:hover{color:var(--text);border-color:var(--edge-strong);transform:translateY(-1px);background:var(--glass-2)}
.chip.on{color:var(--text);border-color:var(--cyan);background:rgba(69,217,255,.10)}

/* ---------------------------------------------- stat strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--edge);background:var(--edge-soft)}
.strip>div{background:var(--glass-1);backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);padding:18px 20px}
.strip .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.strip .v{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:4px}

/* ---------------------------------------------- rails + cards */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin-inline:-4px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--edge);border-radius:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}

.card{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--r-l);
  background:var(--glass-1);border:1px solid var(--edge);
  backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);
  box-shadow:var(--shadow-1);cursor:pointer;text-align:left;width:100%;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--hilite),transparent 38%);opacity:.09;transition:opacity .35s ease}
.card:hover{border-color:var(--edge-strong);background:var(--glass-2);box-shadow:var(--shadow-3)}
.card:hover::before{opacity:.16}
.card-top{display:flex;align-items:flex-start;gap:14px}
.card-id{flex:1;min-width:0}
.card-brand{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.card-name{font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.025em;line-height:1.2;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-verdict{font-size:12.5px;color:var(--text-2);line-height:1.45;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--edge-soft)}
.card-foot .kv{display:flex;flex-direction:column}
.card-foot .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.card-foot .v{font-family:var(--f-display);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card-thumb{width:54px;height:54px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 15%,color-mix(in srgb,var(--band) 26%,transparent),transparent 70%),var(--glass-2);
  border:1px solid var(--edge-soft);color:var(--band)}

/* mini score dial in cards */
.dial{position:relative;width:56px;height:56px;flex-shrink:0}
.dial svg{transform:rotate(-90deg);display:block}
.dial .track{stroke:var(--edge);fill:none}
.dial .prog{stroke:var(--band);fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--band) 70%,transparent));transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.dial .val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.04em}

/* ---------------------------------------------- buttons + pills */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--edge);background:var(--glass-2);cursor:pointer;
  font-size:13.5px;font-weight:600;backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:var(--edge-strong);background:var(--glass-3)}
.btn:active{transform:scale(.97)}
.btn.primary{color:#08080d;border-color:transparent;background:linear-gradient(120deg,var(--cyan),var(--green));box-shadow:0 10px 26px -14px rgba(69,217,255,.9)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none}
.btn.sm{height:34px;padding:0 13px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:14px;
  background:var(--glass-1);border:1px solid var(--edge-soft);font-size:13px;line-height:1.35;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease,border-color .25s ease;
}
.pill:hover{transform:translateY(-2px);background:var(--glass-2);border-color:var(--edge)}
.pill .ic{width:20px;height:20px;flex-shrink:0;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700}
.pill.good .ic{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.pill.bad .ic{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.pill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}

.tag-sm{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--glass-2);border:1px solid var(--edge-soft);color:var(--text-2)}
.tag-sm.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.tag-sm.ai{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,transparent);background:color-mix(in srgb,var(--violet) 12%,transparent)}
.tag-sm.band{color:var(--band);border-color:color-mix(in srgb,var(--band) 45%,transparent);background:color-mix(in srgb,var(--band) 12%,transparent)}

/* ---------------------------------------------- notice */
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--amber) 8%,var(--glass-1));border:1px solid color-mix(in srgb,var(--amber) 26%,transparent);
  font-size:12.5px;color:var(--text-2);line-height:1.5}
.notice b{color:var(--text);font-weight:600}
.notice .ic{color:var(--amber);flex-shrink:0;margin-top:1px}

/* ---------------------------------------------- product page */
.p-head{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;margin-top:34px}
.p-title{font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.045em;margin-top:10px}
.p-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.p-desc{color:var(--text-2);margin-top:18px;font-size:15px;max-width:58ch}
.p-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.score-card{padding:26px;border-radius:var(--r-xl);position:relative;overflow:hidden;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--band) 16%,transparent),transparent 62%),var(--glass-2);
  border:1px solid var(--edge);backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3);box-shadow:var(--shadow-3)}
.gauge{position:relative;width:236px;height:236px;margin:6px auto 0}
.gauge svg{transform:rotate(-90deg);display:block;overflow:visible}
.gauge .g-track{fill:none;stroke:var(--edge)}
.gauge .g-tick{stroke:var(--edge);opacity:.7}
.gauge .g-prog{fill:none;stroke:url(#gaugeGrad);stroke-linecap:round;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--band) 60%,transparent))}
.gauge .g-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.gauge .g-num{font-family:var(--f-display);font-weight:800;font-size:74px;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums;font-stretch:108%}
.gauge .g-den{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--text-3)}
.gauge .g-band{font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--band);margin-top:6px}
.score-sub{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:22px;border-radius:var(--r-m);overflow:hidden;background:var(--edge-soft);border:1px solid var(--edge-soft)}
.score-sub>div{background:var(--glass-1);padding:13px 14px;text-align:left}
.score-sub .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.score-sub .v{font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:3px}
.score-foot{margin-top:14px;font-size:11.5px;color:var(--text-3);line-height:1.5}

.panel{padding:24px;border-radius:var(--r-l);background:var(--glass-1);border:1px solid var(--edge);
  backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);box-shadow:var(--shadow-1)}
.panel h3{font-size:19px;letter-spacing:-.03em}
.panel .lead{color:var(--text-2);font-size:13px;margin-top:5px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* verdict */
.verdict{position:relative;overflow:hidden;padding:34px;border-radius:var(--r-xl);text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,color-mix(in srgb,var(--band) 22%,transparent),transparent 60%),var(--glass-2);
  border:1px solid color-mix(in srgb,var(--band) 30%,var(--edge));box-shadow:var(--shadow-3);
  backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3)}
.verdict .vword{font-family:var(--f-display);font-weight:800;font-size:clamp(42px,8vw,86px);line-height:1;letter-spacing:-.05em;
  background:linear-gradient(100deg,var(--band),var(--band-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-stretch:112%}
.verdict .vsub{color:var(--text-2);margin-top:12px;font-size:14px;max-width:56ch;margin-inline:auto}

/* timeline chart */
.tl-wrap{position:relative;margin-top:18px}
.tl-chart{width:100%;height:auto;display:block;overflow:visible}
.tl-grid{stroke:var(--edge-soft)}
.tl-axis{fill:var(--text-3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em}
.tl-line{fill:none;stroke:var(--band);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--band) 55%,transparent))}
.tl-area{fill:url(#tlGrad);opacity:.55}
.tl-dot{fill:var(--void);stroke:var(--band);stroke-width:2.5}
.tl-dot.end{fill:var(--band)}
.tl-hit{fill:transparent;cursor:pointer}
.tl-tip{position:absolute;pointer-events:none;padding:9px 12px;border-radius:12px;background:var(--glass-solid);
  border:1px solid var(--edge);box-shadow:var(--shadow-2);font-size:12px;opacity:0;transform:translate(-50%,-118%);
  transition:opacity .18s ease;backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);white-space:nowrap;z-index:5}
.tl-tip.show{opacity:1}
.tl-tip b{font-family:var(--f-display);font-variant-numeric:tabular-nums}

/* who should buy */
.aud{padding:22px;border-radius:var(--r-l);border:1px solid var(--edge);backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2)}
.aud.great{background:radial-gradient(100% 100% at 0% 0%,color-mix(in srgb,var(--green) 13%,transparent),transparent 58%),var(--glass-1);
  border-color:color-mix(in srgb,var(--green) 26%,var(--edge))}
.aud.skip{background:radial-gradient(100% 100% at 0% 0%,color-mix(in srgb,var(--red) 13%,transparent),transparent 58%),var(--glass-1);
  border-color:color-mix(in srgb,var(--red) 26%,var(--edge))}
.aud h3{font-size:17px;display:flex;align-items:center;gap:9px}
.aud ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.aud li{display:flex;gap:10px;font-size:13.5px;color:var(--text-2);line-height:1.45}
.aud li::before{content:"";width:5px;height:5px;border-radius:50%;margin-top:7px;flex-shrink:0}
.aud.great li::before{background:var(--green)}
.aud.skip li::before{background:var(--red)}

/* compare table */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--edge);background:var(--glass-1);
  backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);box-shadow:var(--shadow-2)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--edge-soft);vertical-align:top}
table.cmp thead th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:400;white-space:nowrap}
table.cmp tbody th{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:400;white-space:nowrap;width:170px}
table.cmp td.win{background:color-mix(in srgb,var(--green) 9%,transparent)}
table.cmp .big{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cmp-head{display:flex;flex-direction:column;gap:6px}
.cmp-head .nm{font-family:var(--f-display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;line-height:1.2}

/* rank rows */
.rank{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r-m);background:var(--glass-1);
  border:1px solid var(--edge-soft);cursor:pointer;width:100%;text-align:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease}
.rank:hover{transform:translateX(4px);background:var(--glass-2);border-color:var(--edge)}
.rank .pos{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--text-3);width:30px;flex-shrink:0;font-variant-numeric:tabular-nums}
.rank .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.rank .nm .t{display:block;font-weight:600;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .nm .s{display:block;font-size:11.5px;line-height:1.3;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .bar{width:clamp(70px,16vw,190px);height:6px;border-radius:3px;background:var(--edge);overflow:hidden;flex-shrink:0}
.rank .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--band-2),var(--band));width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.rank .val{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--band);width:44px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.rank-list{display:flex;flex-direction:column;gap:8px}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px;border-radius:var(--r-l);
  background:var(--glass-1);border:1px solid var(--edge);backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2)}
.sel{position:relative;display:inline-flex;align-items:center}
.sel select{appearance:none;height:36px;padding:0 32px 0 13px;border-radius:var(--r-pill);border:1px solid var(--edge-soft);
  background:var(--glass-2);font-size:12.5px;cursor:pointer;outline:none}
.sel select option{background:var(--ink);color:var(--text)}
.sel::after{content:"";position:absolute;right:13px;width:6px;height:6px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:translateY(-2px) rotate(45deg);pointer-events:none}

/* category tiles */
.cat-tile{position:relative;overflow:hidden;padding:20px;border-radius:var(--r-l);background:var(--glass-1);border:1px solid var(--edge);
  cursor:pointer;text-align:left;backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease}
.cat-tile:hover{transform:translateY(-3px);border-color:var(--edge-strong);background:var(--glass-2)}
.cat-tile .glow{position:absolute;width:150px;height:150px;border-radius:50%;right:-50px;top:-50px;filter:blur(46px);background:var(--band);opacity:.28}
.cat-tile h3{font-size:17px;margin-top:12px}
.cat-tile .c{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cat-tile .st{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--text-2)}
.cat-tile .st b{font-family:var(--f-display);font-weight:800;font-variant-numeric:tabular-nums}

/* share card */
.share-card{position:relative;overflow:hidden;width:100%;max-width:420px;margin-inline:auto;padding:30px;border-radius:26px;text-align:center;
  background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--band) 30%,transparent),transparent 60%),linear-gradient(175deg,#0d0d15,#050507);
  border:1px solid color-mix(in srgb,var(--band) 34%,rgba(255,255,255,.12));box-shadow:0 40px 90px -30px rgba(0,0,0,.9);color:#F5F5F7}
.share-card .rings-sm{position:absolute;inset:-30% -10% auto;height:140%;
  background:radial-gradient(circle,transparent 0 22%,rgba(255,255,255,.05) 22% calc(22% + 1px),transparent calc(22% + 1px)),
             radial-gradient(circle,transparent 0 34%,rgba(255,255,255,.04) 34% calc(34% + 1px),transparent calc(34% + 1px));
  pointer-events:none}
.share-card .sc-brand{font-family:var(--f-display);font-weight:800;font-size:10.5px;letter-spacing:.3em;color:rgba(245,245,247,.6)}
.share-card .sc-name{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.035em;margin-top:16px;line-height:1.12}
.share-card .sc-brandname{font-size:12px;color:rgba(245,245,247,.55);margin-top:5px}
.share-card .sc-score{font-family:var(--f-display);font-weight:800;font-size:92px;line-height:1;letter-spacing:-.06em;margin-top:18px;
  background:linear-gradient(160deg,var(--band),var(--band-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.share-card .sc-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;color:rgba(245,245,247,.5);margin-top:2px}
.share-card .sc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.share-card .sc-cell{padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.share-card .sc-cell .n{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.share-card .sc-cell .l{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.16em;color:rgba(245,245,247,.5);margin-top:2px}
.share-card .sc-verdict{margin-top:20px;padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--band) 40%,transparent);
  background:color-mix(in srgb,var(--band) 12%,transparent)}
.share-card .sc-verdict .v{font-family:var(--f-display);font-weight:800;font-size:27px;letter-spacing:-.03em;color:var(--band)}
.share-card .sc-foot{margin-top:20px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;color:rgba(245,245,247,.38)}

/* modal + sheet */
.veil{position:fixed;inset:0;z-index:90;background:rgba(4,4,8,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .28s ease}
.veil.open{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:26px;border-radius:var(--r-xl);
  background:var(--glass-solid);border:1px solid var(--edge);box-shadow:var(--shadow-3);
  backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3);
  transform:translateY(16px) scale(.97);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.veil.open .modal{transform:none}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.modal h3{font-size:21px;letter-spacing:-.03em}
.modal .lead{color:var(--text-2);font-size:13px;margin-top:5px}
.q{margin-top:20px}
.q>span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.opt{padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--edge-soft);background:var(--glass-1);cursor:pointer;font-size:13px;
  transition:transform .18s ease,border-color .2s ease,background .2s ease,color .2s ease}
.opt:hover{transform:translateY(-1px);border-color:var(--edge)}
.opt.on{border-color:var(--cyan);background:rgba(69,217,255,.12);color:var(--text)}
textarea.ta,input.ti{width:100%;margin-top:9px;padding:12px 14px;border-radius:14px;background:var(--glass-1);border:1px solid var(--edge-soft);
  outline:none;font-size:13.5px;resize:vertical;transition:border-color .2s ease,background .2s ease}
textarea.ta:focus,input.ti:focus{border-color:var(--cyan);background:var(--glass-2)}

/* toast */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:420px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:var(--glass-solid);
  border:1px solid var(--edge);box-shadow:var(--shadow-3);backdrop-filter:var(--blur-2);-webkit-backdrop-filter:var(--blur-2);
  font-size:13px;animation:toast-in .4s cubic-bezier(.2,.8,.2,1);max-width:100%}
.toast.out{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.95)}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* reveal on scroll */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.js .rv.in{opacity:1;transform:none;filter:none}

/* page transition */
#view{animation:page-in .42s cubic-bezier(.2,.8,.2,1)}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}}

/* skeleton */
.skel{border-radius:var(--r-m);background:linear-gradient(100deg,var(--glass-1) 30%,var(--glass-3) 50%,var(--glass-1) 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite;height:80px}
@keyframes shimmer{to{background-position:-220% 0}}

/* admin */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi>div{padding:18px;border-radius:var(--r-m);background:var(--glass-1);border:1px solid var(--edge-soft)}
.kpi .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.kpi .v{font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:4px}
.bars{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.barrow{display:grid;grid-template-columns:150px 1fr 46px;gap:12px;align-items:center;font-size:12.5px}
.barrow .t{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barrow .b{height:7px;border-radius:4px;background:var(--edge);overflow:hidden}
.barrow .b i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.barrow .n{font-family:var(--f-mono);font-size:11.5px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}

/* footer */
footer{border-top:1px solid var(--edge-soft);margin-top:80px;padding-block:36px 46px;position:relative;z-index:1}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
footer h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:400}
footer nav{display:flex;flex-direction:column;gap:8px;margin-top:12px}
footer nav a{font-size:13px;color:var(--text-2);width:fit-content;transition:color .2s ease}
footer nav a:hover{color:var(--text)}
footer .fine{margin-top:30px;padding-top:20px;border-top:1px solid var(--edge-soft);font-size:11.5px;color:var(--text-3);line-height:1.6;max-width:90ch}

/* misc */
.empty{padding:50px 24px;text-align:center;color:var(--text-2);border-radius:var(--r-l);border:1px dashed var(--edge);background:var(--glass-1)}
.hr{height:1px;background:var(--edge-soft);margin:26px 0}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.muted{color:var(--text-2)}
.tiny{font-size:11.5px;color:var(--text-3);line-height:1.55}
.src-row{display:flex;gap:12px;padding:14px;border-radius:var(--r-m);background:var(--glass-1);border:1px solid var(--edge-soft)}

/* ---------------------------------------------- responsive */
@media (max-width:1040px){
  .p-head{grid-template-columns:1fr;gap:22px}
  .score-card{max-width:520px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .wrap{padding-inline:16px}
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav{height:56px;padding-left:14px}
  .nav-cta{display:none}
  /* the account control lives in the burger sheet at this width */
  #accountBtn{display:none}
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(40px,13vw,64px)}
  .search-field{height:54px;padding-left:16px}
  .search-field input{font-size:15px}
  .search-go{padding:0 14px;height:40px}
  .strip{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
  .rail{grid-auto-columns:80%}
  .gauge{width:200px;height:200px}
  .gauge .g-num{font-size:62px}
  .section{margin-top:46px}
  footer .cols{grid-template-columns:1fr}
  .barrow{grid-template-columns:96px 1fr 40px}
  .field .orb{filter:blur(60px)}
}
@media (max-width:420px){
  .strip{grid-template-columns:1fr 1fr}
  .score-sub{grid-template-columns:1fr}
  .rail{grid-auto-columns:88%}
}

/* mobile nav sheet */
.sheet{position:fixed;inset:auto 0 0 0;z-index:95;padding:18px 18px 28px;border-radius:26px 26px 0 0;
  background:var(--glass-solid);border-top:1px solid var(--edge);box-shadow:var(--shadow-3);
  backdrop-filter:var(--blur-3);-webkit-backdrop-filter:var(--blur-3);
  transform:translateY(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:none}
.sheet a{display:block;padding:13px 6px;font-size:16px;font-weight:600;border-bottom:1px solid var(--edge-soft)}
.sheet a:last-of-type{border-bottom:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none;filter:none}
  .field .sweep,.orb{animation:none}
}

/* ---------------------------------------------------------------- account + admin console */

#accountBtn.signed-in{background:linear-gradient(180deg,rgba(69,217,255,.16),rgba(69,217,255,.06));border-color:rgba(69,217,255,.32)}
#accountBtn.signed-in.is-admin{border-color:rgba(255,77,90,.4);background:linear-gradient(180deg,rgba(255,77,90,.16),rgba(255,77,90,.05))}
.avatar-initials{font:600 11px/1 var(--ui);letter-spacing:.04em;color:var(--fg)}

.mod-row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--glass-1)}
.mod-row.held{border-color:rgba(255,176,32,.38);background:linear-gradient(180deg,rgba(255,176,32,.07),transparent)}
.mod-main{min-width:0;flex:1}
.mod-main p{overflow-wrap:anywhere}
.mod-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.btn.danger{border-color:rgba(255,77,90,.36);color:#ff8a92}
.btn.danger:hover{background:rgba(255,77,90,.12);border-color:rgba(255,77,90,.55)}
.btn[disabled]{opacity:.5;pointer-events:none}

@media (max-width:640px){
  .mod-row{flex-direction:column;gap:10px}
  .mod-acts{justify-content:flex-start;width:100%}
}

/* ---------------------------------------------------------------- liquid glass range sliders

   Native range inputs only give you accent-color, which renders as a flat
   grey rail — the one control on the site that looked like a browser default.
   These are rebuilt from the track up: a recessed glass groove, a band-tinted
   fill driven by --p (set in JS as the value changes), and a thumb with a real
   highlight so it reads as a raised piece of glass rather than a dot. */

.rng{
  -webkit-appearance:none;appearance:none;
  width:100%;margin-top:14px;background:transparent;cursor:grab;
  --p:50%;
  --rng-fill:linear-gradient(90deg,var(--cyan),var(--violet));
}
.rng:active{cursor:grabbing}
.rng:focus{outline:none}
.rng:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:var(--r-pill)}

/* one shared groove, declared twice because the two engines will not share a selector */
.rng::-webkit-slider-runnable-track{
  height:10px;border-radius:var(--r-pill);
  background:
    linear-gradient(90deg,transparent var(--p),var(--glass-1) var(--p)),
    var(--rng-fill);
  box-shadow:inset 0 1px 2px var(--shade),inset 0 -1px 0 var(--hilite);
  border:1px solid var(--edge-soft);
}
.rng::-moz-range-track{
  height:10px;border-radius:var(--r-pill);
  background:
    linear-gradient(90deg,transparent var(--p),var(--glass-1) var(--p)),
    var(--rng-fill);
  box-shadow:inset 0 1px 2px var(--shade),inset 0 -1px 0 var(--hilite);
  border:1px solid var(--edge-soft);
}

.rng::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-7px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,var(--hilite),transparent 52%),
    linear-gradient(180deg,var(--glass-3),var(--glass-1));
  border:1px solid var(--edge-strong);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.7),0 0 0 4px color-mix(in srgb,var(--cyan) 16%,transparent);
  backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  transition:transform .14s ease,box-shadow .2s ease;
}
.rng::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,var(--hilite),transparent 52%),
    linear-gradient(180deg,var(--glass-3),var(--glass-1));
  border:1px solid var(--edge-strong);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.7),0 0 0 4px color-mix(in srgb,var(--cyan) 16%,transparent);
  transition:transform .14s ease,box-shadow .2s ease;
}
.rng:hover::-webkit-slider-thumb{transform:scale(1.08)}
.rng:hover::-moz-range-thumb{transform:scale(1.08)}
.rng:active::-webkit-slider-thumb{
  transform:scale(1.14);
  box-shadow:0 6px 20px -4px rgba(0,0,0,.8),0 0 0 7px color-mix(in srgb,var(--cyan) 22%,transparent);
}
.rng:active::-moz-range-thumb{
  transform:scale(1.14);
  box-shadow:0 6px 20px -4px rgba(0,0,0,.8),0 0 0 7px color-mix(in srgb,var(--cyan) 22%,transparent);
}

/* each slider carries the colour of what it measures */
#fRegret{--rng-fill:linear-gradient(90deg,var(--green),var(--amber) 48%,var(--red))}
#fAgain{--rng-fill:linear-gradient(90deg,var(--red),var(--amber) 48%,var(--green))}
#fSat{--rng-fill:linear-gradient(90deg,var(--violet),var(--cyan))}

@media (prefers-reduced-motion:reduce){
  .rng::-webkit-slider-thumb,.rng::-moz-range-thumb{transition:none}
}

/* ---------------------------------------------------------------- glass, applied consistently

   The admin console and the form blocks were plain bordered boxes while the
   rest of the site was glass. Same treatment, so nothing looks bolted on. */

.q{
  background:var(--glass-1);border:1px solid var(--edge-soft);border-radius:var(--r-m);
  padding:16px;margin-top:14px;
  backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  box-shadow:inset 0 1px 0 var(--hilite),var(--shadow-1);
}
.q > span:first-child{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}

.mod-row{
  background:var(--glass-1);
  backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  box-shadow:inset 0 1px 0 var(--hilite),var(--shadow-1);
  border-radius:var(--r-m);
  transition:border-color .2s ease,transform .2s ease;
}
.mod-row:hover{border-color:var(--edge);transform:translateY(-1px)}
.mod-row.held{
  border-color:color-mix(in srgb,var(--amber) 42%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 9%,transparent),var(--glass-1));
}
.mod-row .mod-main b{font-family:var(--f-display);letter-spacing:-.02em}

/* admin rows were inheriting the page's tight display leading */
.mod-main p{line-height:1.6;margin:0}
.mod-main .row{align-items:center;line-height:1.5}
.mod-acts .btn{white-space:nowrap}

/* ---------------------------------------------------------------- specular glass

   Real glass has two things a tinted rectangle does not: a bright edge where
   light catches the top bevel, and a faint sheen raking across the surface.
   Both are drawn here rather than baked into each component, so every panel,
   card and score box picks them up and they stay consistent between themes.

   The sheen is a pseudo-element with pointer-events:none, so nothing becomes
   unclickable, and it is skipped for anyone who asked for reduced motion or
   transparency. */

.panel,.card,.score-card,.glass,.glass-2,.kpi,.mod-row,.q{
  position:relative;
  isolation:isolate;
}
.panel::after,.card::after,.score-card::after,.glass::after,.mod-row::after,.q::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  /* top bevel highlight, then a wide diagonal sheen that fades out fast */
  background:
    linear-gradient(180deg,var(--hilite) 0,transparent 1px),
    linear-gradient(145deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 26%,transparent 52%);
  opacity:.9;
}
/* On white there is no glow to define an edge, so the light theme needs a
   brighter bevel and a stronger sheen to read as glass at all. */
:root[data-theme="light"] .panel::after,
:root[data-theme="light"] .card::after,
:root[data-theme="light"] .score-card::after,
:root[data-theme="light"] .glass::after,
:root[data-theme="light"] .mod-row::after,
:root[data-theme="light"] .q::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,1) 0,transparent 1px),
    linear-gradient(145deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.20) 30%,transparent 58%);
  opacity:1;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .panel::after,
  :root:not([data-theme="dark"]) .card::after,
  :root:not([data-theme="dark"]) .score-card::after,
  :root:not([data-theme="dark"]) .glass::after,
  :root:not([data-theme="dark"]) .mod-row::after,
  :root:not([data-theme="dark"]) .q::after{
    background:
      linear-gradient(180deg,rgba(255,255,255,1) 0,transparent 1px),
      linear-gradient(145deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.20) 30%,transparent 58%);
    opacity:1;
  }
}

/* the cursor light should graze the glass it passes over, not just the page */
.card:hover,.panel:hover{border-color:var(--edge)}

@media (prefers-reduced-transparency:reduce){
  .panel::after,.card::after,.score-card::after,.glass::after,.mod-row::after,.q::after{display:none}
}

/* ---------------------------------------------------------------- community shift

   Shown on the product page when owner reviews have moved the researched score.
   It is deliberately prominent: a number that moved silently would be worse
   than one that never moved. */

.shift{
  margin-top:14px;padding:12px 14px;
  border:1px solid var(--edge-soft);border-radius:var(--r-m);
  background:var(--glass-1);
  backdrop-filter:var(--blur-1);-webkit-backdrop-filter:var(--blur-1);
  text-align:left;
}
.shift .k{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.shift p{margin-top:7px;font-size:13px;line-height:1.55;color:var(--text-2)}
.shift p b{color:var(--text)}
.shift .fine-print{margin-top:8px;font-size:11.5px;color:var(--text-3)}
.shift.up{border-color:color-mix(in srgb,var(--red) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 8%,transparent),var(--glass-1))}
.shift.down{border-color:color-mix(in srgb,var(--green) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--green) 8%,transparent),var(--glass-1))}
.shift.up p b:last-of-type{color:var(--red)}
.shift.down p b:last-of-type{color:var(--green)}

/* ---------------------------------------------------------------- light mode corrections

   Two problems specific to light: white glass on a near-white ground has
   nothing to separate it, and the cyan-to-green button gradient goes muddy
   once both colours are darkened for contrast on white. */

:root[data-theme="light"]{
  --void:#DCE1EC; --void-2:#E7EBF3;
  --glass-1:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.90); --glass-3:rgba(255,255,255,.98);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --void:#DCE1EC; --void-2:#E7EBF3;
    --glass-1:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.90); --glass-3:rgba(255,255,255,.98);
  }
}

/* panels and stat tiles need to sit clearly above the ground, not blend into it */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .kpi>div,
:root[data-theme="light"] .card,
:root[data-theme="light"] .score-card{
  background:var(--glass-3);
  border-color:var(--edge);
  box-shadow:var(--shadow-2);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .panel,
  :root:not([data-theme="dark"]) .kpi>div,
  :root:not([data-theme="dark"]) .card,
  :root:not([data-theme="dark"]) .score-card{
    background:var(--glass-3);
    border-color:var(--edge);
    box-shadow:var(--shadow-2);
  }
}

/* one confident accent instead of a teal-to-green blend that reads as sludge */
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .search-go{
  color:#fff;
  background:linear-gradient(120deg,#0A66C2,#0670A0 62%,#0A8F84);
  box-shadow:0 10px 24px -12px rgba(6,102,160,.55);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .btn.primary,
  :root:not([data-theme="dark"]) .search-go{
    color:#fff;
    background:linear-gradient(120deg,#0A66C2,#0670A0 62%,#0A8F84);
    box-shadow:0 10px 24px -12px rgba(6,102,160,.55);
  }
}