/* Tabjoy brand look: cream and near-black, teal and coral, bold tight sans-serif, pill buttons.
   Loaded after base.css and app.css so it only has to override tokens and a few shapes. */
:root{
  --bg:#FFFFF6; --surface:#FFFFFF; --surface-2:#F5F4E6; --hover:#F8F7EC;
  --line:#E6E4D2; --line-strong:#C9C6B1;
  --fg:#141414; --muted:#5F5E54;
  --accent:#17766F; --accent-fg:#FFFFFF; --accent-soft:#DDF1EE;
  --brand-teal:#30AEAB; --brand-coral:#F16A50; --brand-ink:#141414; --brand-cream:#FFFFF6;
  --warn:#8A4A00; --warn-soft:#FFEBCB;
  --bad:#B3261E; --bad-soft:#FBE0DC;
  --ok:#1F6B45; --ok-soft:#DCF1E3;
  --display:'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --r-card:16px; --r-field:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121211; --surface:#1C1C1A; --surface-2:#262624; --hover:#20201E;
    --line:#32322E; --line-strong:#4B4B45;
    --fg:#F4F3E8; --muted:#A7A598;
    --accent:#30AEAB; --accent-fg:#101010; --accent-soft:#17302F;
    --warn:#F2B46B; --warn-soft:#3A2B17; --bad:#F59A92; --bad-soft:#3E2220; --ok:#86D6A8; --ok-soft:#183626;
  }
}
:root[data-theme="dark"]{
  --bg:#121211; --surface:#1C1C1A; --surface-2:#262624; --hover:#20201E;
  --line:#32322E; --line-strong:#4B4B45;
  --fg:#F4F3E8; --muted:#A7A598;
  --accent:#30AEAB; --accent-fg:#101010; --accent-soft:#17302F;
  --warn:#F2B46B; --warn-soft:#3A2B17; --bad:#F59A92; --bad-soft:#3E2220; --ok:#86D6A8; --ok-soft:#183626;
}

body{margin:0;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;letter-spacing:-.03em}
h1{font-size:1.9rem}h2{font-size:1.55rem}
.sec>h3{font-family:var(--body);letter-spacing:.08em}
.mono{font-feature-settings:"zero"}

/* header: the near-black band */
.top{background:var(--brand-ink);color:var(--brand-cream);border-bottom:0;margin-inline:-16px;padding-inline:16px;padding-block:14px 0;box-shadow:0 0 0 100vmax var(--brand-ink);clip-path:inset(0 -100vmax)}
/* logo: light artwork on the dark header, dark artwork on the cream sign-in card */
.brand{flex-direction:column;align-items:flex-start;gap:4px}
.brand .logo{height:44px;width:auto;display:block}
.brand .logo-dark{display:none}
.brand .sys{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B9B7A8}
.auth-card .brand .logo{height:52px}
.auth-card .brand .logo-light{display:none}
.auth-card .brand .logo-dark{display:block}
.auth-card .brand .sys{color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .auth-card .brand .logo-light{display:block}:root:not([data-theme="light"]) .auth-card .brand .logo-dark{display:none}}
:root[data-theme="dark"] .auth-card .brand .logo-light{display:block}
:root[data-theme="dark"] .auth-card .brand .logo-dark{display:none}
.top .field>span,.userbtn>span{color:#B9B7A8}
.top .field select{background:#242422;color:var(--brand-cream);border-color:#44443F}
.userbtn b{background:#242422;color:var(--brand-cream);border-color:var(--brand-teal)}
.tabs{gap:2px;margin-top:12px}
.tabs button{color:#B9B7A8;font-weight:600;border-bottom-width:3px}
.tabs button:hover{color:var(--brand-cream)}
.tabs button.on{color:var(--brand-cream);border-bottom-color:var(--brand-coral)}
.top :focus-visible{outline-color:var(--brand-teal)}

/* shapes */
.field select,.field input,.field textarea,.linkbox input,.inl input,.qin{border-radius:var(--r-field)}
.btn,.icon-btn{border-radius:999px}
.btn{font-weight:600;border-color:var(--line-strong)}
.btn.primary{background:var(--brand-coral);border-color:var(--brand-coral);color:var(--brand-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{padding-inline:12px}
.stepper .sb{border-radius:999px}
.list,.panelbox,.evbox,.auth-card,.empty,.stats,.aibox,.photo{border-radius:var(--r-card)}
.stats{border:1px solid var(--line)}
.row.head,.prow.head{border-radius:var(--r-card) var(--r-card) 0 0}
.pill{border-radius:999px;padding:4px 9px;font-weight:600}
.toast{border-radius:999px;background:var(--brand-ink);color:var(--brand-cream)}
.alert,.err,.label,.pre,.copybox textarea{border-radius:12px}
.modeseg button{border-radius:999px;background:var(--surface);color:var(--fg);border-color:var(--line-strong)}
.modeseg button.on{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--brand-cream)}
.scanbox{background:var(--brand-ink)}
.bar i,.sg-loaded{background:var(--brand-teal)}
.link,.linkbtn,.name:hover{color:var(--accent)}
.auth-card{box-shadow:0 1px 0 var(--line)}
.sheet .panel{border-radius:var(--r-card) 0 0 var(--r-card)}
@media (max-width:640px){.sheet .panel{border-radius:var(--r-card) var(--r-card) 0 0}}
@media print{.top{background:none;color:#000}}