/* Printopo UI — shared tokens + components for /login and /dashboard.
   Light on :root, dark under prefers-color-scheme (guarded) and again under
   [data-theme="dark"] so an explicit choice wins in both directions. */
:root {
  --bg:#f7f8fa; --surface:#ffffff; --surface2:#f1f2f5; --ink:#171a20; --ink2:#4a5160; --dim:#6a7180;
  --line:#e3e6eb; --accent:#635bff; --accent-hover:#5249e6; --accent-soft:rgba(99,91,255,.10);
  --ok:#177a4c; --ok-soft:rgba(23,122,76,.12); --err:#c23a3a; --err-soft:rgba(194,58,58,.10);
  --shadow:0 1px 2px rgba(23,26,32,.06);
  --on-accent:#fff; --on-err:#fff;
  --radius:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1013; --surface:#15181d; --surface2:#1b1f26; --ink:#e8eaf0; --ink2:#aab0be; --dim:#7b8294;
    --line:#262b34; --accent:#7f79ff; --accent-hover:#928dff; --accent-soft:rgba(127,121,255,.16);
    --ok:#4cc38a; --ok-soft:rgba(76,195,138,.14); --err:#f0645f; --err-soft:rgba(240,100,95,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
    --on-accent:#0e1013; --on-err:#0e1013;
  }
}
:root[data-theme="dark"] {
  --bg:#0e1013; --surface:#15181d; --surface2:#1b1f26; --ink:#e8eaf0; --ink2:#aab0be; --dim:#7b8294;
  --line:#262b34; --accent:#7f79ff; --accent-hover:#928dff; --accent-soft:rgba(127,121,255,.16);
  --ok:#4cc38a; --ok-soft:rgba(76,195,138,.14); --err:#f0645f; --err-soft:rgba(240,100,95,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark;
  --on-accent:#0e1013; --on-err:#0e1013;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
[hidden] { display:none !important; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:20px; } h2 { font-size:15px; } h3 { font-size:13px; color:var(--ink2); text-transform:uppercase; letter-spacing:.04em; }
p { margin:0; }
.muted { color:var(--ink2); } .dim { color:var(--dim); } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.small { font-size:12.5px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px; border-radius:8px;
       border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:500; cursor:pointer;
       white-space:nowrap; transition:background .12s, border-color .12s, opacity .12s; }
.btn:hover { background:var(--surface2); text-decoration:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--ink2); }
.btn.ghost:hover { background:var(--surface2); color:var(--ink); }
.btn.danger { color:var(--err); border-color:var(--err); background:transparent; }
.btn.danger:hover { background:var(--err-soft); }
.btn.lg { height:44px; padding:0 18px; font-size:15px; border-radius:10px; }
.btn.full { width:100%; }
.btn svg { width:16px; height:16px; flex:none; }

/* cards, fields, badges, tables */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.card .bd { padding:18px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12.5px; font-weight:500; color:var(--ink2); }
.input, .select { height:38px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink);
                  font:inherit; width:100%; outline:none; }
.input:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input::placeholder { color:var(--dim); }
.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:99px; font-size:12px; font-weight:600;
         background:var(--surface2); color:var(--ink2); border:1px solid var(--line); }
.badge.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.badge.err { background:var(--err-soft); color:var(--err); border-color:transparent; }
.badge.accent { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { text-align:left; font-weight:500; color:var(--dim); font-size:12px; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table .num { font-variant-numeric:tabular-nums; }
.table td.num { white-space:nowrap; }
.tablewrap { overflow-x:auto; }
.empty { text-align:center; padding:40px 20px; color:var(--ink2); }
.empty h2 { color:var(--ink); margin-bottom:6px; }
.empty .btn { margin-top:16px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:9px 14px;
         border-radius:8px; font-size:13px; box-shadow:var(--shadow); z-index:50; }
.toast.err { background:var(--err); color:var(--on-err); }
.notice { padding:10px 14px; border-radius:8px; font-size:13px; background:var(--accent-soft); color:var(--ink); }
.notice.err { background:var(--err-soft); color:var(--err); }
.ordiv { display:flex; align-items:center; gap:12px; color:var(--dim); font-size:12px; }
.ordiv::before, .ordiv::after { content:""; flex:1; height:1px; background:var(--line); }
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.02em; }
.brand img { width:22px; height:22px; }
.brand:hover { text-decoration:none; }

/* dashboard shell */
.shell { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.sidebar { border-right:1px solid var(--line); background:var(--surface); padding:18px 14px; display:flex; flex-direction:column; gap:22px;
           position:sticky; top:0; height:100vh; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; }
.sidebar nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--ink2); font-weight:500; }
.sidebar nav a:hover { background:var(--surface2); color:var(--ink); text-decoration:none; }
.sidebar nav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); }
.sidebar nav a svg { width:16px; height:16px; }
.sidebar .grow { flex:1; }
.userbox { display:flex; align-items:center; gap:10px; padding:8px 10px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink2); overflow:hidden; }
.userbox .email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.avatar { width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center;
          font-size:12px; font-weight:700; flex:none; text-transform:uppercase; }
.main { padding:28px 32px 60px; max-width:1040px; width:100%; min-width:0; }
.pagehd { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:20px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:13px; }
.kv dt { color:var(--dim); } .kv dd { margin:0; }
.bars { display:flex; align-items:flex-end; gap:6px; height:64px; }
.bars .bar { flex:1; height:100%; background:var(--accent-soft); border-radius:4px 4px 0 0; position:relative; min-height:2px; }
.bars .bar i { position:absolute; left:0; right:0; bottom:0; background:var(--accent); border-radius:4px 4px 0 0; }
.bars .bar span { position:absolute; top:100%; left:0; right:0; text-align:center; font-size:11px; color:var(--dim); margin-top:4px; }
.meter { height:6px; background:var(--surface2); border-radius:99px; overflow:hidden; }
.meter i { display:block; height:100%; background:var(--accent); border-radius:99px; }
.plan { text-align:center; padding:22px 18px; }
.plan .price { font-size:26px; font-weight:700; margin:6px 0 2px; }
.plan ul { list-style:none; padding:0; margin:14px 0 0; font-size:13px; color:var(--ink2); display:flex; flex-direction:column; gap:6px; }
.plan.current { border-color:var(--accent); }
.danger-card { border-color:var(--err); }
@media (max-width:720px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; gap:10px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  .sidebar .brand { font-size:0; gap:0; }   /* logo only; the wordmark makes room for the userbox */
  .sidebar nav { flex-direction:row; }
  .sidebar nav a { padding:8px; }
  .sidebar nav a span { display:none; }
  .sidebar .grow { display:none; }
  .userbox { border-top:0; padding:0; margin-left:auto; flex:none; }
  .userbox .email { display:none; }
  .main { padding:18px 14px 50px; }
  .grid2, .grid3 { grid-template-columns:1fr; }
}