/* Brave Bean Design System v1.0 tokens — single source of truth */
:root {
  --bb-navy:#0A3161; --bb-navy-800:#082A54; --bb-navy-100:#D9E4F2; --bb-navy-050:#F0F5FB;
  --bb-red:#B31942; --bb-ink:#16233A; --bb-gray-600:#4E5A6A; --bb-gray-300:#C9D1DA; --bb-gray-100:#EFF2F5;
  --bb-success:#1E7A34; --bb-success-bg:#E8F5EC; --bb-warning-text:#7A4D00; --bb-warning-bg:#FFF3DC;
  --bb-error:#B3251E; --bb-error-bg:#FCEBEA;
  --r-in:6px; --r-card:10px; --shadow:0 1px 3px rgba(10,49,97,.10),0 4px 12px rgba(10,49,97,.06);
  --focus:0 0 0 3px rgba(10,49,97,.35);
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bb-gray-100); color:var(--bb-ink); line-height:1.5; padding-bottom:64px; }
.wrap { max-width:520px; margin:0 auto; }
@media (min-width:900px) { .wrap { max-width:860px; } .cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; } }
.appbar { background:var(--bb-navy); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:10; }
.appbar.admin { background:var(--bb-ink); }
.appbar img.logo { width:34px; height:34px; background:#fff; border-radius:8px; padding:2px; }
.appbar .t { font-weight:700; font-size:16px; flex:1; }
.appbar a { color:#fff; text-decoration:none; }
.bell { position:relative; font-size:20px; }
.bell .dot { position:absolute; top:-6px; right:-10px; background:var(--bb-red); color:#fff; font-size:10px; font-weight:700; border-radius:999px; padding:1px 5px; }
.body { padding:16px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:18px; margin:0 0 8px; }
.sub { color:var(--bb-gray-600); font-size:13px; margin:0 0 14px; }
.card { background:#fff; border:1px solid var(--bb-gray-300); border-radius:var(--r-card); box-shadow:var(--shadow); padding:14px; margin-bottom:12px; }
.btn { display:block; width:100%; text-align:center; font-weight:600; font-size:16px; padding:13px; border-radius:var(--r-in);
  border:2px solid transparent; cursor:pointer; text-decoration:none; color:inherit; min-height:44px; font-family:inherit; }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn-p { background:var(--bb-navy); color:#fff; } .btn-p:hover { background:var(--bb-navy-800); }
.btn-s { background:#fff; color:var(--bb-navy); border-color:var(--bb-navy); }
.btn-q { background:none; border:none; color:var(--bb-navy); text-decoration:underline; font-size:14px; width:auto; margin:0 auto; }
.btn-inline { width:auto; display:inline-block; padding:10px 18px; font-size:14px; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.b-new { background:var(--bb-red); color:#fff; } .b-sp { background:var(--bb-navy); color:#fff; }
.b-ok { background:var(--bb-success-bg); color:var(--bb-success); } .b-pn { background:var(--bb-warning-bg); color:var(--bb-warning-text); }
.b-tier { background:var(--bb-navy-050); color:var(--bb-navy); border:1px solid var(--bb-navy-100); }
.in, select.in, textarea.in { width:100%; font-size:16px; font-family:inherit; padding:11px 12px; border:1.5px solid var(--bb-gray-300);
  border-radius:var(--r-in); margin-bottom:10px; background:#fff; color:var(--bb-ink); }
.in:focus { outline:none; border-color:var(--bb-navy); box-shadow:var(--focus); }
.lb { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.muted { color:var(--bb-gray-600); font-size:12px; }
.price { font-weight:700; } .strike { text-decoration:line-through; color:var(--bb-gray-600); font-weight:400; font-size:13px; }
.divider { border-top:1px solid var(--bb-gray-300); margin:12px 0; }
.list-item { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--bb-gray-100); }
.list-item:last-child { border-bottom:none; }
.thumb { width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--bb-gray-100); flex:none; }
.grow { flex:1; min-width:0; }
.alert-ok { background:var(--bb-success-bg); color:var(--bb-success); border-radius:var(--r-in); padding:12px 14px; font-size:14px; margin-bottom:12px; }
.alert-err { background:var(--bb-error-bg); color:var(--bb-error); border-radius:var(--r-in); padding:12px 14px; font-size:14px; margin-bottom:12px; }
.imp { background:var(--bb-navy); color:#fff; border:none; }
.kpi { display:flex; gap:10px; } .kpi .card { flex:1; text-align:center; margin:0; }
.kpi .n { font-size:22px; font-weight:800; color:var(--bb-navy); } .kpi .l { font-size:11px; color:var(--bb-gray-600); }
.tabbar { position:fixed; bottom:0; left:0; right:0; display:flex; border-top:1px solid var(--bb-gray-300); background:#fff; z-index:10; }
.tabbar a { flex:1; text-align:center; padding:8px 4px 10px; font-size:11px; color:var(--bb-gray-600); text-decoration:none; }
.tabbar a.on { color:var(--bb-navy); font-weight:700; }
.tabbar .ico { display:block; font-size:18px; }
.chart { display:flex; align-items:flex-end; gap:6px; height:90px; padding:8px 0; }
.chart .bar { flex:1; background:var(--bb-navy); border-radius:4px 4px 0 0; min-height:2px; }
.chart .bar.r { background:var(--bb-navy-100); }
.hero { background:var(--bb-navy); padding:36px 24px; text-align:center; color:#fff; }
.hero img { width:84px; height:84px; background:#fff; border-radius:12px; padding:6px; }
a { color:var(--bb-navy); }
.tgl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--bb-gray-100); }
.tgl-row:last-child { border-bottom:none; }
input[type=checkbox].tgl { appearance:none; width:42px; height:24px; border-radius:999px; background:var(--bb-gray-300); position:relative; cursor:pointer; flex:none; margin:0; }
input[type=checkbox].tgl:checked { background:var(--bb-success); }
input[type=checkbox].tgl::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
input[type=checkbox].tgl:checked::after { left:21px; }
input[type=checkbox].tgl:focus-visible { outline:none; box-shadow:var(--focus); }