:root { --bg:#f4f6fa; --card:#fff; --ink:#1c2430; --mute:#6b7685; --line:#dfe4ec; --brand:#1f3a5f; --accent:#2f6fed; --bad:#c0392b; --ok:#1e8e5a; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
a { color:var(--accent); }
.top { display:flex; align-items:center; gap:16px; padding:8px 16px; background:var(--brand); color:#fff; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:700; font-size:16px; }
.brand img { border-radius:6px; }
#nav { display:flex; gap:4px; flex:1; overflow-x:auto; }
#nav a { color:#cfd9e8; text-decoration:none; padding:6px 12px; border-radius:6px; white-space:nowrap; }
#nav a.on, #nav a:hover { background:rgba(255,255,255,.15); color:#fff; }
main { padding:16px; max-width:1400px; margin:0 auto; }
h2 { margin:0 0 12px; font-size:20px; }
.btn { font:inherit; border:1px solid var(--line); background:#fff; color:var(--ink); padding:6px 12px; border-radius:6px; cursor:pointer; }
.btn:hover { border-color:#b9c2d0; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { color:var(--bad); }
.btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); max-width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid #b9cffb; border-color:var(--accent); }
.login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:100; }
.login form { background:#fff; padding:28px; border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:12px; align-items:center; width:300px; }
.login h1 { margin:0; font-size:20px; } .login input { width:100%; }
.err { color:var(--bad); margin:0; min-height:1em; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.card .n { font-size:26px; font-weight:700; } .card .l { color:var(--mute); }
.card.warn .n { color:var(--bad); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; }
.card h3 { margin:0 0 10px; font-size:15px; }
.bar { display:grid; grid-template-columns:100px 1fr 110px; gap:8px; align-items:center; margin:6px 0; }
.bar .t { background:#e9eef7; border-radius:4px; height:14px; overflow:hidden; } .bar .t i { display:block; height:100%; background:var(--accent); }
.bar .v { text-align:right; color:var(--mute); }
ul.plain { list-style:none; margin:0; padding:0; } ul.plain li { padding:6px 0; border-bottom:1px solid var(--line); } ul.plain li:last-child { border:0; }
.mute { color:var(--mute); }
.tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.tools .grow { flex:1; } .tools input[type=search] { min-width:240px; }
.pager { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0; }
.pager a { text-decoration:none; padding:3px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
.pager a.off { color:#b5bcc8; pointer-events:none; background:#f4f5f7; }
.count { color:var(--mute); margin:4px 0; }
.wrap { overflow:auto; max-height:calc(100vh - 290px); min-height:120px; background:#fff; border:1px solid var(--line); border-radius:8px; }
table.t { border-collapse:collapse; width:100%; }
table.t th { position:sticky; top:0; background:#eef2f8; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap; z-index:2; }
table.t th .s { cursor:pointer; user-select:none; font-weight:600; }
table.t th .fb { display:block; margin-top:3px; font-size:12px; font-weight:400; padding:1px 6px; border:1px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
table.t th .fb.on { border-color:var(--accent); color:var(--accent); }
table.t td { padding:6px 10px; border-bottom:1px solid #eef0f4; white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
table.t tbody tr { cursor:pointer; } table.t tbody tr:hover { background:#f3f7ff; }
table.t td.num, table.t th.num { text-align:right; }
.state { padding:30px; text-align:center; color:var(--mute); }
.pop { position:fixed; z-index:60; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); width:260px; padding:8px; }
.pop .list { max-height:240px; overflow:auto; margin:6px 0; }
.pop label { display:flex; gap:6px; align-items:center; padding:2px 0; cursor:pointer; }
.pop input[type=search] { width:100%; } .pop .row { display:flex; justify-content:space-between; gap:6px; }
.overlay { position:fixed; inset:0; background:rgba(15,25,40,.45); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:30px 12px; overflow:auto; }
.modal { background:#fff; border-radius:12px; width:560px; max-width:100%; padding:18px; }
.modal h3 { margin:0 0 12px; }
.form { display:grid; grid-template-columns:130px 1fr; gap:8px 10px; align-items:center; }
.form input:not([type=checkbox]), .form select { width:100%; }
.actions { display:flex; gap:8px; margin-top:14px; } .actions .grow { flex:1; }
.acts { margin-top:16px; border-top:1px solid var(--line); padding-top:10px; }
.acts .add { display:flex; gap:6px; margin:8px 0; } .acts .add input { flex:1; }
.acts li { display:flex; gap:8px; } .acts li .x { margin-left:auto; cursor:pointer; color:var(--mute); }
.tag { font-size:11px; background:#e9eef7; border-radius:10px; padding:1px 8px; }
@media (max-width:640px) { .form { grid-template-columns:1fr; } .wrap { max-height:none; } }