/* Ideabase — shared shell for the marketing site, auth and profile pages.
   Same tokens as the app so the product and its front door read as one thing. */
:root {
  color-scheme: light;
  --bg:#f4f4f2; --surface-1:#ffffff; --surface-2:#fafaf9; --surface-3:#efefec;
  --line:rgba(11,11,11,.11); --line-soft:rgba(11,11,11,.06); --line-strong:rgba(11,11,11,.2);
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --accent:#2a78d6; --accent-ink:#1c5cab; --accent-soft:rgba(42,120,214,.1); --accent-line:rgba(42,120,214,.32);
  --on-accent:#fff; --ok:#0ca30c; --warn:#fab219; --bad:#d03b3b;
  --shadow-1:0 1px 2px rgba(11,11,11,.05),0 4px 16px rgba(11,11,11,.05);
  --shadow-2:0 12px 48px rgba(11,11,11,.14);
  --r-sm:7px; --r-md:11px; --r-lg:16px; --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) {
  color-scheme: dark;
  --bg:#0a0b0d; --surface-1:#15171b; --surface-2:#1b1e23; --surface-3:#23272e;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05); --line-strong:rgba(255,255,255,.19);
  --ink:#f1f2f4; --ink-2:#a6acb6; --ink-3:#71777f;
  --accent:#3987e5; --accent-ink:#7fb2f0; --accent-soft:rgba(57,135,229,.14); --accent-line:rgba(57,135,229,.4);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 16px 60px rgba(0,0,0,.6);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0b0d; --surface-1:#15171b; --surface-2:#1b1e23; --surface-3:#23272e;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05); --line-strong:rgba(255,255,255,.19);
  --ink:#f1f2f4; --ink-2:#a6acb6; --ink-3:#71777f;
  --accent:#3987e5; --accent-ink:#7fb2f0; --accent-soft:rgba(57,135,229,.14); --accent-line:rgba(57,135,229,.4);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 16px 60px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.025em; line-height:1.15; text-wrap:balance; }
p { margin:0; }
a { color:var(--accent); text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
.num { font-variant-numeric:tabular-nums; }
.hide { display:none !important; }
/* The library runs full-bleed, and every other page used to stop at 1120px —
   which on a wide screen made opening an idea feel like leaving the product for
   a document viewer. One width, one shell. Prose inside still sets its own
   measure with max-width in ch, because a 1400px line is unreadable however
   much room there is for it. */
.wrap { max-width:1460px; margin:0 auto; padding:0 28px; }
.wrap-narrow { max-width:900px; margin:0 auto; padding:0 28px; }
.eyebrow { font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.muted { color:var(--ink-2); }
.dim { color:var(--ink-3); }
.icon { width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 16px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-1); color:var(--ink);
  font-size:14px; font-weight:550; white-space:nowrap; transition:background .14s var(--ease),border-color .14s var(--ease); }
.btn:hover { background:var(--surface-3); border-color:var(--line-strong); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover { filter:brightness(1.08); background:var(--accent); border-color:var(--accent); }
.btn-ghost { border-color:transparent; background:transparent; }
.btn-ghost:hover { background:var(--surface-3); border-color:var(--line); }
.btn-lg { height:46px; padding:0 22px; font-size:15px; }
.btn-sm { height:31px; padding:0 11px; font-size:13px; }
.btn[disabled] { opacity:.55; pointer-events:none; }
.btn-block { width:100%; }

.field { width:100%; height:42px; padding:0 13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink); font-size:15px; }
.field:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.field { height:auto; padding:11px 13px; line-height:1.55; resize:vertical; }
label.lbl { display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.form-row { margin-bottom:14px; }
.hint { font-size:12px; color:var(--ink-3); margin-top:6px; line-height:1.5; }
.err { font-size:13px; color:var(--bad); background:color-mix(in srgb,var(--bad) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 32%,transparent); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:14px; }

/* nav */
/* One bar on every page.

   The library runs a 56px app bar — brand with its tag line, a segmented set of
   tabs, then the actions pinned right. Every other page ran a 60px marketing nav
   with two text links, which made moving from the library to your account feel
   like leaving the product for its website: different height, different weight,
   different vocabulary. This is the app bar's measurements, so the two sit at
   the same height and the brand does not jump when you navigate.

   Page width is a separate question and stays a per-page decision. A settings
   form at 1460px is not consistency, it is a worse form; what has to match is
   the chrome around it and the surfaces inside it. */
.nav { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.6) blur(14px); }
.nav-in { display:flex; align-items:center; gap:14px; min-height:56px; padding:0 18px;
  max-width:none; }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; }
.brand-tag { font-size:10px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;
  margin-top:1px; }
@media (max-width:640px) { .brand-tag { display:none; } }
/* The segmented control the library uses for its views, reused here for going
   between pages — same shape, so the eye reads them as the same control. */
.nav-tabs { display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line);
  padding:3px; border-radius:9px; }
.nav-tabs a { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border-radius:6px; font-size:12.5px; font-weight:500; color:var(--ink-2); }
.nav-tabs a:hover { color:var(--ink); background:var(--surface-3); }
.nav-tabs a[aria-current="page"] { background:var(--surface-1); color:var(--ink);
  box-shadow:var(--shadow-1); font-weight:600; }
.nav-tabs .icon { width:14px; height:14px; }
@media (max-width:720px) { .nav-tabs a span { display:none; } .nav-tabs a { padding:0 9px; } }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand-mark { width:27px; height:27px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7b3fd4));
  color:#fff; font-weight:700; font-size:13px; letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.brand-name { font-size:15px; font-weight:650; letter-spacing:-.025em; }
.nav-links { display:flex; gap:4px; margin-left:8px; }
.nav-links a { padding:7px 11px; border-radius:7px; font-size:14px; color:var(--ink-2); font-weight:500; }
.nav-links a:hover { background:var(--surface-3); color:var(--ink); }
.nav-cta { display:flex; align-items:center; gap:8px; margin-left:auto; }

.card { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; }
.avatar { border-radius:99px; display:grid; place-items:center; color:#fff; font-weight:700; letter-spacing:-.02em; flex:none; }
.chip { display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:6px;
  background:var(--surface-3); border:1px solid var(--line-soft); font-size:11.5px; font-weight:500; color:var(--ink-2); }
.foot { border-top:1px solid var(--line); margin-top:80px; padding:28px 0 48px; font-size:13px; color:var(--ink-3); }
.foot-in { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.foot a { color:var(--ink-2); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }