/* ============================================================================
   panda-ds.css — Panda design system (server-rendered, no build step)
   Tokens + components for the logged-in redesign. Formalizes the site's existing
   visual language (paper bg, #027AFF accent, Inter/Noto Sans SC, glass surfaces).
   Light/dark aware. Loaded by templates/auth_base.html + app_base.html.
   ========================================================================== */

:root {
  --paper:      #ECEBE5;
  --surface:    #ffffff;
  --surface-2:  #f5f5f2;
  --ink:        #1a1a2e;
  --ink-soft:   #374151;
  --muted:      #6b7280;
  --line:       #e2e2dd;
  --accent:     #027AFF;
  --accent-ink: #ffffff;
  --accent-soft:#e8f1ff;
  --ok:         #0a7d43;
  --err:        #c0392b;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 10px 40px rgba(0,0,0,.08);
  --shadow-menu:0 12px 34px rgba(0,0,0,.16);
  --font:       -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Noto Sans SC",sans-serif;
  --header-h:   58px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#15161a; --surface:#1e2027; --surface-2:#23262e; --ink:#e9eaee;
    --ink-soft:#c4c7cf; --muted:#9aa0ab; --line:#2e313a; --accent:#4c9bff;
    --accent-soft:#1b2b44; --shadow:0 10px 40px rgba(0,0,0,.5); --shadow-menu:0 12px 34px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:22px; margin:0 0 10px; letter-spacing:-.01em; }
h2 { font-size:18px; margin:0 0 8px; }
.muted { color:var(--muted); font-size:13px; min-height:18px; margin:6px 0 0; }
.ok { color:var(--ok); } .err { color:var(--err); }
hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
code { background:var(--surface-2); border-radius:8px; padding:2px 6px; font-size:13px; }

/* ── brand ─────────────────────────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); font-size:16px; }
.brand:hover { text-decoration:none; }
.brand-logo { width:24px; height:24px; border-radius:6px; display:block; object-fit:cover; flex:none; }

/* ── card + forms ──────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 30px; }
label { display:block; font-size:13px; color:var(--muted); margin-top:14px; }
input[type=text],input[type=email],input[type=password] {
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; margin-top:5px; background:var(--surface); color:var(--ink);
}
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.check-row { display:flex; align-items:flex-start; gap:9px; margin:16px 0 2px; }
.check-row label { margin:0; color:var(--ink-soft); font-size:14px; }
.check-row input { margin-top:3px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent);
  color:var(--accent-ink); border:0; border-radius:var(--radius-sm); padding:12px 20px; font:inherit;
  font-weight:600; cursor:pointer; }
.btn:hover { filter:brightness(1.05); text-decoration:none; }
.btn:disabled { opacity:.6; cursor:default; }
.btn-block { width:100%; margin-top:16px; }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
.btn-muted { background:var(--muted); }

/* ── auth layout (minimal, centered) ───────────────────────────────────── */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-wrap { width:100%; max-width:420px; }
.auth-wrap .brand { margin:0 auto 18px; display:flex; justify-content:center; }
.auth-foot { margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }

/* ── app shell ─────────────────────────────────────────────────────────── */
.app-header { position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center;
  gap:22px; padding:0 20px; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.app-nav { display:flex; gap:18px; margin-left:6px; }
.app-nav a { color:var(--ink-soft); font-size:14px; }
.app-nav a:hover { color:var(--accent); }
.app-main { max-width:860px; margin:32px auto; padding:0 20px; }

/* ── account chip + menu ───────────────────────────────────────────────── */
.acct { margin-left:auto; position:relative; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.acct-chip { display:inline-flex; align-items:center; gap:9px; background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:4px 12px 4px 5px; cursor:pointer; font:inherit; color:var(--ink); }
.acct-chip:hover { border-color:var(--accent); }
.acct-name { font-size:13.5px; font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:190px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-menu); padding:6px; display:none; }
.acct-menu.open { display:block; }
.acct-menu a, .acct-menu button { display:block; width:100%; text-align:left; background:none; border:0;
  font:inherit; color:var(--ink); padding:9px 12px; border-radius:8px; cursor:pointer; }
.acct-menu a:hover, .acct-menu button:hover { background:var(--surface-2); text-decoration:none; }
.acct-menu .menu-head { padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.acct-menu .menu-head .e { color:var(--muted); font-size:12px; }