:root { --bg:#f7f8f6; --card:#fff; --ink:#1a221d; --mute:#677168; --line:#e7e9e5; --brand:#e0282f; --brand-d:#cf121b; --brand-l:#fdeaea; --warn:#b26a00; --warn-l:#fff4e0; --bad:#b3261e; --bad-l:#fdeceb; --ok:#2e8b57; --radius:14px; --shadow:0 1px 2px rgba(20,28,22,.04),0 10px 28px rgba(20,28,22,.06); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body { font:15px/1.5 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); }
body.noscroll { overflow:hidden; }
h1,h2,h3 { margin:0 0 .5em; line-height:1.3; } h1 { font-size:1.35rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
p { margin:.4em 0; } a { color:var(--brand); text-decoration:none; }
img { max-width:100%; display:block; }
.mute { color:var(--mute); } .small { font-size:.85rem; } .center { text-align:center; } .right { text-align:right; }
.ic { display:inline-block; vertical-align:-3px; flex:0 0 auto; }
.row { display:flex; gap:10px; align-items:center; } .row.wrap { flex-wrap:wrap; } .grow { flex:1; min-width:0; } .gap { margin-top:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:12px; }
button,.btn { font:inherit; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:9px 14px; cursor:pointer; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button:hover { border-color:var(--brand); } button:disabled { opacity:.5; cursor:not-allowed; }
button.primary,.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; } button.primary:hover { background:var(--brand-d); }
button.danger { color:var(--bad); border-color:#e8b9b5; } button.block { width:100%; }
button.link { border:0; background:none; color:var(--brand); padding:4px 6px; min-height:0; }
label { display:block; font-size:.9rem; margin:12px 0 4px; font-weight:600; }
label .req { color:var(--bad); } label .why { display:block; font-weight:400; color:var(--mute); font-size:.8rem; margin-top:1px; }
input,select,textarea { font:inherit; width:100%; padding:10px 12px; border:1px solid #d4d9d3; border-radius:10px; background:#fff; color:var(--ink); min-height:42px; }
textarea { min-height:84px; resize:vertical; } input[type=checkbox],input[type=radio] { width:auto; min-height:0; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--brand-l); border-color:var(--brand); }
.chip { display:inline-block; padding:4px 11px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.chip.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.tag { display:inline-block; padding:1px 8px; border-radius:6px; font-size:.78rem; background:var(--brand-l); color:var(--brand-d); }
.tag.warn { background:var(--warn-l); color:var(--warn); } .tag.bad { background:var(--bad-l); color:var(--bad); } .tag.gray { background:#ecefed; color:var(--mute); }
.notice { padding:10px 12px; border-radius:10px; background:var(--warn-l); color:#6b4300; font-size:.88rem; margin:10px 0; }
.notice.info { background:var(--brand-l); color:var(--brand-d); } .notice.bad { background:var(--bad-l); color:var(--bad); }
.langsw button { padding:3px 9px; min-height:0; font-size:.8rem; border-radius:6px; } .langsw button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { background:#f2f4f1; font-weight:600; white-space:nowrap; }
.tablewrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
#toast { position:fixed; left:50%; bottom:84px; transform:translate(-50%,20px); background:#223; color:#fff; padding:10px 16px; border-radius:10px; opacity:0; pointer-events:none; transition:.2s; z-index:99; max-width:90vw; font-size:.9rem; }
#toast.show { opacity:1; transform:translate(-50%,0); } #toast.bad { background:var(--bad); }
#modal { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.m-back { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.m-box { position:relative; background:#fff; width:100%; max-width:560px; max-height:88vh; overflow:auto; border-radius:16px 16px 0 0; padding:18px; }
@media (min-width:700px) { #modal { align-items:center; } .m-box { border-radius:16px; } }
.empty { text-align:center; color:var(--mute); padding:36px 12px; }
.spinner { text-align:center; padding:30px; color:var(--mute); }
.kv { display:grid; grid-template-columns:130px 1fr; gap:4px 12px; font-size:.92rem; } .kv dt { color:var(--mute); } .kv dd { margin:0; word-break:break-word; }
.ferr { color:var(--bad); font-size:.82rem; margin:3px 0 0; }
input.bad,select.bad,textarea.bad { border-color:var(--bad); background:#fffafa; }
.filepick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .filebtn { cursor:pointer; } .fname { word-break:break-all; }