/* UI theme (Pico based) - light flat geometric */
:root{
  --app-bg:#f6f8f8;
  --card:#ffffff;
  --line:#e6eaee;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#3b82f6;   /* soft blue */
  --primary-2:#93c5fd;
  --win:#16a34a;
  --lose:#ef4444;
}
body{ background:var(--app-bg)!important; color:var(--text)!important; }
header, .topbar{ background:transparent!important; }
button, .btn, input, select{ border-radius:12px!important; }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.card + .card{ margin-top:12px; }
.sectionTitle{ font-weight:800; font-size:16px; margin:10px 0 8px; color:var(--text); }
.muted{ color:var(--muted)!important; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.col{ flex:1; min-width:0; }
input{ width:100%; box-sizing:border-box; }
.modalMask{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  display:none; align-items:center; justify-content:center;
  padding:16px; z-index:9999;
}
.modal{
  width:min(92vw, 520px);
  max-height:88vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);
}
.modalHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.modalTitle{ font-size:18px; font-weight:900; }
.btnInline{ padding:8px 12px!important; font-size:14px!important; }
.divider{ height:1px; background:var(--line); margin:10px 0; }
.topActions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.topActions button{ width:100%; }
.fabBar{
  position:sticky; bottom:0; padding:12px 0; background:linear-gradient(to top, var(--app-bg) 60%, rgba(246,248,248,0));
}
.fabBtn{ width:100%; padding:14px 16px!important; font-weight:800; background:var(--primary)!important; border:none!important; color:#fff!important; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-size:12px; border:1px solid var(--line); color:var(--muted);
}
.tag.cloud{ color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }
.tag.local{ color:#0f766e; border-color:#99f6e4; background:#f0fdfa; }
.money.win{ color:var(--win)!important; font-weight:800; }
.money.lose{ color:var(--lose)!important; font-weight:800; }
.nowrap{ white-space:nowrap; }
.hanchanCardHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hanchanActions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.hanchanActions button{ padding:6px 10px!important; }