:root{
  --bg:#eef2f7; --panel:#ffffff; --ink:#15202b; --sub:#5b6b7c;
  --navy:#173a5e; --navy2:#1d4e79; --blue:#2f6fed; --teal:#12a594;
  --amber:#f2a33c; --red:#e5484d; --green:#17a673;
  --line:#dfe7f0; --shadow:0 10px 30px rgba(23,58,94,.12);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:15px;outline:none}
a{color:var(--blue);text-decoration:none}
.hidden{display:none!important}

/* 通用按钮 */
.btn{border-radius:12px;padding:10px 18px;font-size:15px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#245ed6}
.btn-navy{background:var(--navy);color:#fff}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-danger{background:var(--red);color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-amber{background:var(--amber);color:#fff}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-lg{padding:14px 26px;font-size:18px;border-radius:14px}

/* 顶部栏通用 */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:linear-gradient(100deg,var(--navy),var(--navy2));color:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.topbar .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3f8cff,#12a594);
  display:grid;place-items:center;font-size:18px}
.topbar .brand small{font-weight:500;opacity:.8;font-size:13px;margin-left:4px}

/* 模态 */
.modal-mask{position:fixed;inset:0;background:rgba(10,20,35,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.modal{background:#fff;border-radius:20px;padding:26px;min-width:340px;max-width:560px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.3);animation:pop .18s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:21px;margin-bottom:6px;color:var(--navy)}
.modal p.desc{color:var(--sub);font-size:14px;margin-bottom:16px}
.modal .field{margin-bottom:14px}
.modal .field label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px;font-weight:600}
.modal .field input,.modal .field textarea,.modal .field select{
  width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-size:15px;background:#fbfcfe}
.modal .field textarea{resize:vertical;min-height:84px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal-actions .spacer{flex:1}

/* 通知条 */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:12px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:1200;
  opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}

/* 通用卡片面板 */
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow)}