:root{--pri:#006E8A;--pri2:#00586f;--acc:#DC9E27;--bg:#f4f7f8;--line:#d9e2e5;--txt:#1d2b30;--mut:#5f7379;--red:#E53935;--ok:#2e7d32;--sel:#FFF3C4}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 Arial,Helvetica,sans-serif;color:var(--txt);background:var(--bg)}
a{color:var(--pri)}
.boot{padding:40px;text-align:center;color:var(--mut)}
header.top{display:flex;align-items:center;gap:16px;background:var(--pri);color:#fff;padding:0 16px;height:48px}
header.top .brand{font-weight:bold;font-size:16px;white-space:nowrap}
header.top .brand b{color:var(--acc)}
header.top nav{display:flex;gap:2px;flex:1;overflow-x:auto}
header.top nav a{color:#e6f2f5;text-decoration:none;padding:14px 12px;white-space:nowrap;border-bottom:3px solid transparent}
header.top nav a.on{color:#fff;border-bottom-color:var(--acc);font-weight:bold}
header.top nav .grp{color:#9cc7d2;padding:14px 4px 14px 14px;font-size:12px}
header.top .me{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px}
main{padding:16px;max-width:1400px;margin:0 auto}
h2{margin:4px 0 12px;font-size:18px;color:var(--pri2)}
h3{margin:0 0 8px;font-size:15px;color:var(--pri2)}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:14px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.row>.card{flex:1;min-width:320px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--pri);background:#fff;color:var(--pri);padding:6px 12px;border-radius:4px;cursor:pointer;font:inherit}
.btn:hover{background:#e8f3f6}
.btn.pri{background:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri2)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
header .btn{border-color:#fff;color:#fff;background:transparent}
header .btn:hover{background:var(--pri2)}
input,select{font:inherit;padding:6px 8px;border:1px solid #b9c9ce;border-radius:4px;background:#fff}
input:focus,select:focus{outline:2px solid #9fd1de;border-color:var(--pri)}
label.f{display:block;margin-bottom:10px}
label.f span{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}
label.f input,label.f select{width:100%}
table.t{border-collapse:collapse;width:100%;background:#fff}
table.t th{background:#eaf2f4;color:var(--pri2);text-align:left;font-weight:bold;position:sticky;top:0}
table.t th,table.t td{border:1px solid var(--line);padding:5px 8px;vertical-align:top}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:#f2f8fa}
table.t tr.on td{background:var(--sel)}
.num{text-align:right;white-space:nowrap}
.mut{color:var(--mut)}
.small{font-size:12px}
.tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;background:#eaf2f4;color:var(--pri2);margin:1px 2px 1px 0}
.tag.red{background:#fde7e7;color:var(--red)}
.tag.acc{background:#fbf0da;color:#9a6a0e}
.tag.ok{background:#e5f3e6;color:var(--ok)}
.err{color:var(--red)}
.okc{color:var(--ok)}
.scroll{max-height:420px;overflow:auto}
.login{max-width:360px;margin:9vh auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:6px;padding:24px}
.login h1{margin:0 0 4px;font-size:20px;color:var(--pri)}
.drop{border:2px dashed #9fc3cd;border-radius:6px;padding:18px;text-align:center;background:#f7fbfc;cursor:pointer}
.drop.hover{background:#e6f3f7;border-color:var(--pri)}
.cap{display:flex;flex-wrap:wrap;gap:3px}
.cap div{width:44px;border:1px solid var(--line);border-radius:3px;text-align:center;font-size:11px;padding:2px 0;background:#fff}
.cap div.over{background:var(--red);color:#fff;border-color:var(--red)}
.cap div b{display:block;font-size:12px}
.modal-bg{position:fixed;inset:0;background:rgba(0,30,40,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:8vh;z-index:50}
.modal{background:#fff;border-radius:6px;min-width:340px;max-width:560px;width:92%;padding:18px;border-top:4px solid var(--pri)}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60}
#toast div{background:#253b42;color:#fff;padding:9px 16px;border-radius:5px;margin-top:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#toast div.e{background:var(--red)}
.key{font-family:Consolas,monospace;background:#fff8e6;border:1px solid var(--acc);padding:8px;border-radius:4px;word-break:break-all}
@media(max-width:700px){header.top{flex-wrap:wrap;height:auto;padding:6px 10px}header.top nav{order:3;width:100%}main{padding:10px}}