/* NotoChat brand. THE WEBSITE (NotoChat/notochat-website) IS THE FINAL WORD: where the old guideline differs, the website wins (Alex, 28 Oct 2026).
   Outlines only on fields (and tabs, none yet). Cards, buttons and the top bar have no outline: cards are told apart by white on paper,
   buttons by fill or a soft shadow, floating panels by a soft shadow. Hairlines are dividers only. Light theme only, as on the website.
   The font is our own copy of Plus Jakarta Sans (SIL Open Font Licence, see /fonts/OFL.txt), so no visitor's details go to Google. */
@font-face { font-family:"Plus Jakarta Sans"; src:url(/fonts/PlusJakartaSans.woff2) format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
:root { --paper:#F5F4F0; --surface:#FFFFFF; --stone:#E9E7E0; --border:#D6D3CA; --ink:#0E0F13; --muted:#5E5E5A;
  --mint:#14B88A; --on-mint:#0E0F13; --mint-deep:#0B7A5B; --mint-tint:#E3F6EF;
  --warn:#92400E; --warn-tint:#FEF3C7; --warn-fill:#D97706; --stop:#B42318; --stop-tint:#FDECEA; --stop-fill:#D92D20;
  --r-sm:8px; --r-lg:24px; --r-pill:999px; --lift:0 6px 20px -12px rgba(14,15,19,.35); --float:0 24px 60px -24px rgba(14,15,19,.35);
  --font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,p { margin:0; }
.wrap { max-width:880px; margin:0 auto; padding:0 16px 32px; }
@media (min-width:720px) { .wrap { padding:0 32px 32px; } }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:880px; margin:0 auto; padding:20px 16px; }
@media (min-width:720px) { .top { padding:20px 32px; } }
.top img { height:34px; width:auto; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 24px; border-radius:var(--r-pill); border:1.5px solid transparent;
  background:var(--surface); color:var(--ink); box-shadow:var(--lift); font:600 15px/1.2 var(--font); cursor:pointer; text-decoration:none; transition:background-color .15s; }
.btn:hover { background:var(--mint-tint); }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--mint-deep); outline-offset:2px; }
.btn-main { background:var(--ink); color:var(--paper); width:100%; min-height:48px; box-shadow:none; }
.btn-main:hover { background:var(--muted); }
h1 { font-size:clamp(30px,5vw,36px); line-height:1.15; font-weight:700; letter-spacing:-0.03em; margin:12px 0 4px; }
.sub { color:var(--muted); margin-bottom:32px; }
.cards { display:grid; gap:16px; }
@media (min-width:720px) { .cards { grid-template-columns:1fr 1fr; gap:24px; } .wide { grid-column:1 / -1; } }
.card { background:var(--surface); border:0; border-radius:var(--r-lg); padding:28px; }
.label { font-size:13px; line-height:1.4; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-deep); margin-bottom:8px; }
.big { font-size:36px; font-weight:700; letter-spacing:-0.03em; line-height:1.15; }
.big small { font-size:18px; font-weight:500; color:var(--muted); letter-spacing:0; }
.note { color:var(--muted); font-size:14px; margin-top:10px; }
.bar { height:14px; border-radius:var(--r-pill); background:var(--stone); overflow:hidden; margin:16px 0 12px; }
.bar i { display:block; height:100%; border-radius:var(--r-pill); background:var(--mint); }
.bar.warning i { background:var(--warn-fill); } .bar.full i { background:var(--stop-fill); }
.tag { display:inline-block; padding:4px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:600; background:var(--mint-tint); color:var(--mint-deep); }
.tag.warning { background:var(--warn-tint); color:var(--warn); } .tag.full { background:var(--stop-tint); color:var(--stop); }
form.login { max-width:420px; margin:8vh auto 0; background:var(--surface); border:0; border-radius:var(--r-lg); padding:32px 28px; box-shadow:var(--float); }
form.login img { height:38px; width:auto; margin-bottom:20px; }
label { display:block; font-weight:600; font-size:14px; margin:16px 0 6px; }
input[type=email], input[type=password] { width:100%; min-height:44px; padding:0 14px; border:1.5px solid var(--muted); border-radius:var(--r-sm); font:16px var(--font); background:var(--surface); color:var(--ink); }
input:focus { border-color:var(--ink); }
.err { background:var(--stop-tint); color:var(--stop); border-radius:var(--r-sm); padding:12px 14px; margin-top:16px; font-size:14px; font-weight:600; }
.help { color:var(--muted); font-size:14px; margin-top:18px; text-align:center; }
.foot { text-align:center; color:var(--muted); font-size:14px; padding:8px 16px 40px; }
.foot a { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.foot a:hover { color:var(--mint-deep); }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); }
th { font-size:13px; color:var(--muted); font-weight:600; }