:root{
  --bg:#f6f7f9; --card:#ffffff; --ink:#1a1a1a; --muted:#888888;
  --line:#e7e9ee; --accent:#2f6df6; --accent-ink:#ffffff;
  --ok-bg:#e7f6ec; --ok-ink:#1e7d45; --err-bg:#fdecec; --err-ink:#c0392b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Calibri,"Segoe UI",system-ui,Arial,sans-serif; font-size:15px; line-height:1.5;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:#fff; border-bottom:1px solid var(--line);
}
.brand{font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:9px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block}
nav a{margin-left:18px; color:var(--ink); text-decoration:none; opacity:.7}
nav a:hover{opacity:1}
.wrap{max-width:1180px; margin:26px auto; padding:0 20px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; margin-bottom:22px; box-shadow:0 1px 2px rgba(20,20,40,.03);
}
h1{font-size:22px; margin:0 0 14px} h2{font-size:18px; margin:6px 0 14px}
h3{font-size:15px; margin:14px 0 4px}
.runform{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap}
.runform label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:#555}
.runform select,.runform input{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:15px; background:#fff;
}
button,.btn{
  display:inline-block; padding:9px 15px; border-radius:8px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); font-size:14px; cursor:pointer;
  text-decoration:none; font-weight:600;
}
.btn.ghost{background:#fff; color:var(--accent)}
.btn:hover{filter:brightness(.97)}
.hint{color:#666; font-size:13px; margin:14px 0 0}
.muted{color:var(--muted)}
.badge{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px;
  background:#eef0f4; color:#555; margin-left:6px;
}
.badge.ok{background:var(--ok-bg); color:var(--ok-ink)}
.badge.err{background:var(--err-bg); color:var(--err-ink)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th,table.grid td{padding:9px 11px; border-bottom:1px solid var(--line); text-align:left}
table.grid th{font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#888; font-weight:600}
table.grid td.num,table.grid th.num{text-align:right; font-variant-numeric:tabular-nums}
table.grid.compact th,table.grid.compact td{padding:6px 9px; font-size:13px}
tr.rowerr td{background:#fdf3f3}
.actions{white-space:nowrap}
.actions .btn{padding:5px 10px; font-size:13px; margin-right:4px}
.empty{color:#888; padding:8px 0}
.tablescroll{overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:8px}
.detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.detail-actions{white-space:nowrap}
.errbox{background:#fdf3f3; border:1px solid #f3d6d6; padding:14px; border-radius:8px;
  white-space:pre-wrap; font-size:12px; color:#7a2b2b; overflow:auto}
code{background:#f1f3f7; padding:1px 5px; border-radius:4px; font-size:12px}
.foot{max-width:1180px; margin:10px auto 40px; padding:0 20px; color:#9aa0aa; font-size:12px}

/* --- admin / flash --- */
.flash{background:#fff7e6; border:1px solid #ffe2a8; color:#7a5b00;
  padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:14px}
.flash div+div{margin-top:4px}
.card.narrow{max-width:420px}
.runform.inline{margin-top:10px; padding-top:12px; border-top:1px dashed var(--line)}
.btn.danger{border-color:#e0b4b4; color:#c0392b}
.btn.danger:hover{background:#fdf0f0}
details.editbox{margin-top:14px}
details.editbox summary{cursor:pointer; color:var(--accent); font-size:14px; font-weight:600}
details.editbox .runform{margin-top:12px}

/* --- login google / user chip --- */
.login-card{text-align:center;padding:30px 26px}
.btn.google{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#3c4043;
  border:1px solid #dadce0;font-weight:600}
.btn.google:hover{background:#f7f8fa}
.gmark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#2f6df6;color:#fff;font-weight:700;font-size:12px}
.userchip{margin-left:14px;font-size:13px;color:#555;background:#eef0f4;padding:4px 11px;border-radius:999px}