/* Shared dark theme for the usability test and its dashboard (matches the Ask Irshad prototype stage) */
:root{
  --bg:#03071A; --ink:#E8EDF7; --ink-2:#9AA7C2; --ink-3:#6F7C99;
  --card:rgba(255,255,255,.045); --card-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --accent:#5B8CFF; --accent-2:#8FB0FF; --ok:#3FD3A5; --warn:#FFB547; --err:#FF6B81; --purple:#9348FF; --green:#07B282; --blue:#2A64F6;
  --font:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background:
    radial-gradient(900px 700px at 12% 18%,rgba(26,62,170,.34),transparent 62%),
    radial-gradient(760px 620px at 88% 10%,rgba(84,38,170,.30),transparent 60%),
    radial-gradient(900px 720px at 72% 92%,rgba(4,110,84,.20),transparent 62%),
    radial-gradient(700px 600px at 30% 100%,rgba(22,48,140,.22),transparent 60%),
    linear-gradient(160deg,#02040F 0%,#050C24 46%,#03071A 100%);
  background-attachment:fixed}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.13;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3,p{margin:0}
a{color:var(--accent-2)}
button{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.btn:hover{border-color:rgba(91,140,255,.7);background:var(--card-2)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:linear-gradient(100deg,#2A64F6,#5B5BFF);border-color:transparent;color:#fff;box-shadow:0 10px 28px -12px rgba(91,140,255,.9)}
.btn.primary:hover{background:linear-gradient(100deg,#3A72FF,#6B6BFF)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink);background:var(--card)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.eyebrow{font:700 11px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.logo svg{height:16px;width:auto;display:block;color:#fff}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-bottom-width:2px;font:600 11px/1 var(--font);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}