:root{
  --bg:#eef2f7; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --dark:#0f172a; --soft:#f8fafc; --red:#ef4444; --blue:#3b82f6; --green:#22c55e;
  --good:#059669; --bad:#dc2626;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif;
}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:rgba(15,23,42,.97);color:#fff;backdrop-filter:blur(16px)
}
.topbar h1{margin:0;font-size:19px}.topbar h1 span{font-size:12px;opacity:.6}.topbar p{margin:3px 0 0;font-size:11px;opacity:.65}
.top-btn{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;padding:9px 12px;border-radius:12px}
.wrap{max-width:920px;margin:auto;padding:10px 10px calc(24px + env(safe-area-inset-bottom))}
.card{background:var(--card);border-radius:20px;padding:15px;margin:10px 0;box-shadow:0 3px 16px rgba(15,23,42,.06)}
.hero{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;padding:18px}
.label{font-size:12px;opacity:.65}.balance{font-size:34px;font-weight:800;letter-spacing:-1px;margin-top:3px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.hero-stats div{background:rgba(255,255,255,.08);border-radius:14px;padding:10px}
.hero-stats span{display:block;font-size:11px;opacity:.65}.hero-stats b{display:block;margin-top:4px;font-size:16px}
h2{margin:0;font-size:17px}.hint{font-size:12px;color:var(--muted);margin:3px 0 0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.actions{display:flex;gap:7px}
button{font:inherit;border:none;cursor:pointer}
.soft-btn,.link-btn{background:#f8fafc;color:#334155;border:1px solid var(--line);padding:9px 11px;border-radius:11px;font-size:13px}
.link-btn{background:transparent;border:none;padding:6px}.danger-text{color:var(--bad)}
.primary{background:var(--dark);color:#fff;padding:12px 15px;border-radius:13px;font-weight:700}
.param-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:16px;background:#fff;color:var(--text)}
input:focus{outline:2px solid #cbd5e1;border-color:#94a3b8}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:10px}.legend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%}.dot.red{background:var(--red)}.dot.blue{background:var(--blue)}.dot.green{background:var(--green)}
.numbers-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.num-card{
  position:relative;border:1px solid var(--line);background:#fff;border-radius:15px;padding:8px 4px 7px;text-align:center;min-height:78px
}
.num-card .ball{width:35px;height:35px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.num-card.red .ball{background:var(--red)}.num-card.blue .ball{background:var(--blue)}.num-card.green .ball{background:var(--green)}
.num-card .zodiac{font-size:11px;color:var(--muted)}.num-card .bet{font-size:11px;font-weight:700;margin-top:3px;color:#0f172a;min-height:14px}
.num-card.active{box-shadow:0 0 0 2px #0f172a inset;background:#f8fafc}
.settle-input{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-top:12px}
.result-box{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.result-box div{background:#f8fafc;border-radius:13px;padding:10px}
.result-box span{display:block;font-size:11px;color:var(--muted)}.result-box strong{display:block;font-size:17px;margin-top:3px}
.positive{color:var(--good)!important}.negative{color:var(--bad)!important}
canvas{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.history-cards{display:flex;flex-direction:column;gap:8px}
.history-item{border:1px solid var(--line);border-radius:14px;padding:11px}
.history-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.history-title{display:flex;align-items:center;gap:8px}
.history-ball{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.history-ball.red{background:var(--red)}.history-ball.blue{background:var(--blue)}.history-ball.green{background:var(--green)}
.history-meta{font-size:11px;color:var(--muted)}.history-net{font-size:16px;font-weight:800}
.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.history-grid div{background:#f8fafc;border-radius:10px;padding:7px}
.history-grid span{display:block;font-size:10px;color:var(--muted)}.history-grid b{font-size:12px}
.empty{text-align:center;color:var(--muted);padding:22px 4px;font-size:13px}
.footer-note p{font-size:12px;line-height:1.6;color:#475569}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal.hidden,.hidden{display:none}
.modal-sheet{width:100%;max-width:560px;background:#fff;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom))}
.modal-handle{width:42px;height:5px;background:#cbd5e1;border-radius:99px;margin:0 auto 12px}
.modal-title-row{display:flex;justify-content:space-between;align-items:center}.big-num{font-size:30px;font-weight:900}.meta{font-size:13px;color:var(--muted)}
.close-btn{width:36px;height:36px;border-radius:50%;background:#f1f5f9;font-size:24px;color:#475569}
.modal-label{margin-top:16px}.modal-label input{font-size:22px;font-weight:700;padding:14px}
.quick-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0}.quick-row button{padding:10px 4px;border-radius:11px;background:#f1f5f9;color:#334155;font-weight:700}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wide{width:100%}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 14px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:99;white-space:nowrap}
.toast.show{opacity:1}
@media(max-width:700px){
  .numbers-grid{grid-template-columns:repeat(4,1fr)}
  .param-grid{grid-template-columns:1fr 1fr}.param-grid label:first-child{grid-column:1/-1}
  .result-box{grid-template-columns:1fr 1fr}
  .history-grid{grid-template-columns:1fr 1fr}
}