:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f6f1e7;--card:#fff;--tx:#1d2b24;--mut:#6b756f;--ac:#1f6b4a;--red:#b3261e;--bd:#e3dccb;--live:#d9480f}
@media (prefers-color-scheme:dark){:root{--bg:#12201a;--card:#1b2d25;--tx:#eef2ee;--mut:#9db0a5;--ac:#5fc596;--red:#ff8a80;--bd:#2b4338;--live:#ff9f68}}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:Georgia,"Times New Roman",serif;line-height:1.4}
header{text-align:center;padding:24px 16px 8px}
h1{margin:0;font-size:clamp(1.6rem,6vw,2.3rem)}
.suits{color:var(--red);letter-spacing:8px}
.sub{color:var(--mut);font:.85rem system-ui,sans-serif;margin-top:4px;min-height:1.2em}
.sub.err{color:var(--red);font-weight:600}
nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:10px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:2}
button,input,select{font:600 .95rem system-ui,sans-serif;color:var(--tx)}
nav button{padding:9px 16px;border-radius:999px;border:1px solid var(--bd);background:var(--card);cursor:pointer}
nav button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
main{max-width:760px;margin:0 auto;padding:8px 14px 40px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:12px}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:.95rem}
th,td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--bd)}
th{color:var(--mut);font-size:.8rem}
td:nth-child(2),th:nth-child(2){text-align:left}
tr:last-child td{border:0}
.rk{font-weight:700;color:var(--ac)}
h2{font-size:1.1rem;margin:18px 0 8px;color:var(--ac)}
.m{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;font-family:system-ui,sans-serif}
.m .t{font-weight:600}.m .t:last-child{text-align:right}.w{color:var(--ac)}
.sc{font:700 1.4rem Georgia,serif;text-align:center;white-space:nowrap}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--mut);font:.8rem system-ui,sans-serif;margin-bottom:8px;gap:8px}
.badge{font:700 .7rem system-ui,sans-serif;padding:2px 8px;border-radius:999px;background:var(--live);color:#fff}
.pl{color:var(--mut);font:.9rem system-ui,sans-serif}.tn{font-weight:700}
input,select{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px}
input.s{width:70px;text-align:center;font-size:1.1rem}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row input{flex:1;min-width:130px}
.btn{background:var(--ac);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.g{background:transparent;color:var(--red);border:1px solid var(--bd);padding:6px 10px}
.btn.o{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0}
.note{color:var(--mut);font:.85rem system-ui,sans-serif;margin:8px 0}
.empty{text-align:center;color:var(--mut);padding:30px 10px;font-family:system-ui,sans-serif}
.sel{width:100%;margin-top:10px}