
:root{
  --bg:#f7f8fa; --card:#ffffff; --text:#1f2329; --sub:#646a73;
  --border:#e5e6eb; --accent:#3370ff; --accent-soft:#e8f1ff;
  --mint:#d9f2e6; --mint-text:#0f8a5f; --pink:#fde8ef; --pink-text:#c94f7c;
  --lilac:#efe9fb; --lilac-text:#7b5cc7; --butter:#fff5d9; --butter-text:#b07d1a;
  --ok:#34c77b; --warn:#f76965; --hover:#f2f3f5;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#17181c; --card:#222329; --text:#e8eaed; --sub:#9aa0a8;
  --border:#35363c; --accent:#5a8dff; --accent-soft:#26324d;
  --mint:#1d3a2e; --mint-text:#5fd3a0; --pink:#40232e; --pink-text:#e78aa8;
  --lilac:#2d2542; --lilac-text:#af95ea; --butter:#3d3420; --butter-text:#dfb45e;
  --hover:#2a2b31;
}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-tap-highlight-color:transparent}
.wrap{max-width:640px;margin:0 auto;padding:16px 14px 60px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:14px}
h1{font-size:19px;margin-bottom:6px}
h2{font-size:16px;margin-bottom:10px}
.sub{color:var(--sub);font-size:13px}
button{border:0;cursor:pointer;font:inherit;border-radius:8px}
.btn{background:var(--accent);color:#fff;padding:10px 22px;font-size:15px}
.btn:disabled{opacity:.4;cursor:default}
.btn-line{background:transparent;border:1px solid var(--border);color:var(--text);
  padding:8px 16px}
input,textarea,select{font:inherit;color:var(--text);background:var(--card);
  border:1px solid var(--border);border-radius:8px;padding:9px 12px;width:100%}
textarea{resize:vertical;min-height:64px}
a{color:var(--accent);text-decoration:none}

.wrap{max-width:960px}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{background:var(--hover);color:var(--text);padding:8px 20px}
.tabs button.sel{background:var(--accent-soft);color:var(--accent);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:7px 10px;border-bottom:1px solid var(--border);text-align:left;
  white-space:nowrap}
th{color:var(--sub);font-weight:500;font-size:13px}
td.max{background:var(--mint);color:var(--mint-text);font-weight:700}
td.low{background:var(--pink);color:var(--pink-text);font-weight:700}
.tag{background:var(--lilac);color:var(--lilac-text);padding:1px 8px;
  border-radius:5px;font-size:13px}
.linkbox{font-family:ui-monospace,Menlo,monospace;font-size:13px;cursor:pointer}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.row>input,.row>select{width:auto;flex:1;min-width:140px}
.muted{color:var(--sub)}
.comment{white-space:normal;max-width:380px}
