/* =====================================================================
   FULL RESKIN — Linear dark-SaaS kit (site-styles skill)
   Neutrals, typography, motion and component signatures copied from
   references/worldclass.md (Linear). Accent = llmpromptgen violet
   (swap-the-brand rule: structure/neutrals/motion from the kit, accent
   one-for-one). Loads LAST — after style.css and styles-system.css.
   ===================================================================== */

/* ---- 1. Linear tokens (dark = default) ---- */
:root{
  /* Linear neutrals — canvas is never #000, text never #fff */
  --bg:#08090a; --bg-2:#0f1011; --panel:#0f1011; --panel-2:#141516;
  --txt:#f7f8f8; --muted:#b4bcd0; --faint:#8a8f98;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
  --accent-tint:#18182f;
  /* one easing + duration for the whole site (Linear quad @160ms) */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --sys-ease:cubic-bezier(.25,.46,.45,.94);
  /* radius ladder: 8 / 12 / 16 — pills stay 999 */
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  /* shadows: tinted, low-alpha — harsh glow replaced */
  --glow:0 8px 24px -12px rgba(0,0,0,.55);
  --shadow:0 8px 32px rgba(8,9,10,.35);
  --shadow-1:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 32px rgba(8,9,10,.05);
}

/* ---- 2. Linear-adapted light theme (Vercel-style neutral light) ---- */
[data-theme="light"]{
  --bg:#ffffff; --bg-2:#fafafa; --panel:#ffffff; --panel-2:#fafafa;
  --txt:#171717; --muted:#52525b; --faint:#71717a;
  --line:rgba(0,0,0,.07); --line-2:rgba(0,0,0,.12);
  --glow:0 8px 24px -14px rgba(0,0,0,.18);
  --shadow:0 12px 32px -16px rgba(0,0,0,.12);
  --shadow-1:inset 0 0 0 1px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.04);
}

/* ---- 3. Typography — Inter display, weight down, tight tracking ---- */
body{font-weight:410;letter-spacing:-.011em}
h1,h2,h3,.hero h1{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:590;letter-spacing:-.022em;text-wrap:balance;
}
h1{line-height:1.04}
.hero h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.028em}
.hero h1 .g,.grad{
  background:linear-gradient(180deg,#c4b5fd,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.lead{color:var(--muted);font-size:17px;line-height:1.6;max-width:44ch;margin-left:auto;margin-right:auto}
.section h2,.sec h2{font-size:clamp(26px,3vw,38px);font-weight:590;letter-spacing:-.02em}
.sub{color:var(--muted)}

/* eyebrow micro-labels: mono face, uppercase (Linear signature) */
.eyebrow,.pill,.badge,.badge-plan,.tag,.cat{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}

/* ---- 4. Primary CTA: the white pill (dark) / near-black pill (light) ---- */
.btn{
  border-radius:999px;font-weight:600;letter-spacing:-.01em;
  transition:filter .16s var(--ease),transform .12s ease-out,box-shadow .16s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:#e5e5e6;color:#08090a;
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.11),0 1px 1px rgba(0,0,0,.07);
}
[data-theme="light"] .btn-primary{background:#18181b;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (hover:hover){.btn-primary:hover{background:#fff;filter:none}}
@media (hover:hover){[data-theme="light"] .btn-primary:hover{background:#27272a}}
.btn-ghost{
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--txt);
}
[data-theme="light"] .btn-ghost{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ---- 5. Cards: inset rings, radius 8-12, no glow ---- */
.card,.feature,.agent-card,.team-card,.price-card,.auth-card,.panel{
  border:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 32px rgba(8,9,10,.05);
  background:var(--panel);
}
[data-theme="light"] .card,[data-theme="light"] .feature,[data-theme="light"] .agent-card,
[data-theme="light"] .team-card,[data-theme="light"] .price-card,[data-theme="light"] .auth-card{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.04);
}

/* ---- 6. Header/nav: glass + hairline ---- */
header,.nav{
  background:rgba(10,10,12,.72)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
[data-theme="light"] header,[data-theme="light"] .nav{
  background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(0,0,0,.05)
}
.nav-links a,.navlink{font-weight:500;letter-spacing:-.01em;font-size:13.5px;color:var(--muted)}
@media (hover:hover){.nav-links a:hover,.navlink:hover{color:var(--txt);filter:brightness(1.15)}}

/* ---- 7. Hero: edge glow + ambient bloom + grain (Linear finishing) ---- */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 36% at 50% 0%,rgba(124,45,191,.13),transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 10%,rgba(42,70,200,.08),transparent 80%)
}
.hero>*{position:relative;z-index:1}
.hero .lead{color:var(--muted)}

/* ---- 8. Forms / fields ---- */
input,textarea,select,.field input,.field textarea,.field select{
  background:var(--bg-2);border:1px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:10px;color:var(--txt);
  transition:box-shadow .16s var(--ease)
}
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select,
[data-theme="light"] .field input,[data-theme="light"] .field textarea,[data-theme="light"] .field select{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)
}
input:focus,textarea:focus,select:focus,.field input:focus{
  outline:none;box-shadow:inset 0 0 0 1px rgba(124,45,191,.65),0 0 0 3px rgba(124,45,191,.18)
}

/* ---- 9. Tables, chips, badges — tint fills, mono labels ---- */
table{border-collapse:collapse}
table th{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
table td,table th{border-bottom:1px solid var(--line);padding:10px 12px}
.chip,.tag,.badge{background:var(--accent-tint,#18182f);border:1px solid rgba(124,45,191,.25);color:var(--brand-ink)}
[data-theme="light"] .chip,[data-theme="light"] .tag,[data-theme="light"] .badge{
  background:rgba(124,45,191,.08);color:#6a1fb0
}

/* ---- 10. Footer ---- */
footer,.footer{background:var(--bg-2);border-top:1px solid var(--line)}
.footer-bottom{color:var(--faint)}

/* ---- 11. Scrollbars + selection ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16)}
::selection{background:rgba(124,45,191,.35);color:#fff}

/* ---- 12. Focus ring: violet, consistent site-wide ---- */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px rgba(124,45,191,.7);border-radius:8px}

/* ---- 13. Numeric display: prices/amounts in Inter, tabular ---- */
.amt,.price,.plan-price,.usage-bar,.credits,.s-score{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:590;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ---- 14. Price display override (matches .price-card .amt specificity) ---- */
.price-card .amt,.amt{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:590;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.price-card .amt small{font-family:'Inter',system-ui,sans-serif;color:var(--muted)}

/* =====================================================================
   PLATFORM SWEEP — every remaining surface follows the system
   ===================================================================== */

/* ---- 15. Fonts: Inter is the platform face — serif retired everywhere
       (including the studio's inline styles via the token) ---- */
:root{
  --font-serif:'Inter',system-ui,-apple-system,sans-serif;
  --cx-user:rgba(124,45,191,.14);
}
.brand,.brand-name{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.demo .before,.strength .s-score{font-family:'Inter',system-ui,sans-serif;font-weight:600}

/* ---- 16. Buttons: Linear effect discipline (no sweep, no bounce) ---- */
.btn{border-radius:999px;font-weight:600;letter-spacing:-.01em}
.btn-primary::after{display:none}
@media (hover:hover){
  .btn-primary:hover{transform:none;box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
  .btn-ghost:hover{transform:none;border-color:rgba(124,45,191,.4);background:rgba(124,45,191,.08)}
}
.tab.active{background:rgba(124,45,191,.16);color:var(--brand-ink);border-color:rgba(124,45,191,.35)}
.nav-links .btn{border-radius:999px}

/* ---- 17. Flash messages: hairline tint cards ---- */
.flash-success,.flash-error,.flash-info{
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)
}

/* ---- 18. Studio: sidebar + nav items on the system easing ---- */
.sidebar{transition:box-shadow var(--sys-dur) var(--sys-ease)}
.sidebar>a{transition:background .16s var(--sys-ease),color .16s var(--sys-ease)}
.sidebar>a.active{background:rgba(124,45,191,.14);box-shadow:inset 3px 0 0 var(--brand-ink)}