* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 14px/1.65 "Microsoft YaHei", system-ui, sans-serif; color: #222; background: #f4f6f9; }
a { color: #1d5fbf; text-decoration: none; }
#side { position: fixed; left: 0; top: 0; bottom: 0; width: 170px; background: #0e2a47; color: #cfe0f5; padding: 18px 0; z-index: 9; }
#side .brand { font-weight: bold; color: #fff; font-size: 15px; padding: 6px 20px 16px; line-height: 1.4; }
#side a { display: block; padding: 10px 20px; color: #cfe0f5; border-left: 3px solid transparent; }
#side a.on, #side a:hover { background: #16385c; border-left-color: #3f8de0; color: #fff; }
#side .foot { position: absolute; bottom: 12px; left: 0; right: 0; padding: 0 20px; color: #8b99ad; font-size: 12px; }
#side .foot b { color: #fff; display: block; }
#side .foot .logout { color: #cfe0f5; cursor: pointer; display: inline-block; margin-top: 6px; }
#side .foot .logout:hover { color: #fff; text-decoration: underline; }
#main { margin-left: 170px; padding: 26px 34px 60px; max-width: 1250px; }
.card, .kpi { background: #fff; border: 1px solid #e2e8f1; border-radius: 9px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(15,42,73,.05); }
.kpis { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kpi { min-width: 128px; padding: 12px 20px; }
.kpi b { font-size: 22px; display: block; }
.kpi span { color: #68788e; font-size: 12px; }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-h h3 { font-size: 15px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
select, input, textarea, button { font: inherit; border: 1px solid #d9e0ea; border-radius: 4px; padding: 6px 10px; background: #fff; }
button { background: #1d5fbf; color: #fff; border: none; cursor: pointer; }
button:hover { background: #174a97; }
button.ghost { background: #fff; color: #1d5fbf; border: 1px solid #cfe0f5; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e2e8f1; vertical-align: top; }
th { color: #68788e; font-weight: 600; background: #f7f9fc; }
tr:hover td { background: #f7fafd; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 12px; color: #fff; }
.b-inprogress { background: #1d5fbf; } .b-done { background: #0e7a52; }
.b-blocked { background: #c24141; } .b-deferred { background: #d97706; } .b-cancel { background: #8b99ad; }
.muted { color: #68788e; font-size: 12px; }
.tl { list-style: none; }
.tl li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid #dbe6f3; margin-left: 6px; }
.tl li:last-child { border-left-color: transparent; }
.tl li:before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #3f8de0; }
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 340px; }
.login-box h2 { margin-bottom: 14px; color: #0e2a47; }
.login-box .field { margin-bottom: 12px; }
.login-box label { display: block; color: #44536a; margin-bottom: 4px; }
.login-box input { width: 100%; }
.err { color: #c24141; margin: 8px 0; }
textarea { width: 100%; min-height: 90px; }
.modal-mask { position: fixed; inset: 0; background: rgba(14,42,71,.35); display: flex; align-items: center; justify-content: center; z-index: 99; }
.modal-box { width: min(480px, 92vw); max-height: 88vh; overflow-y: auto; }
.form-row { margin-bottom: 10px; }
.form-row label { display: block; color: #44536a; margin-bottom: 4px; }
.form-row input, .form-row select { width: 100%; }
.review-block { margin-bottom: 14px; }
#hamburger { display: none; }
@media (max-width: 760px) {
  #side { display: none; }
  #side.open { display: block; }
  #main { margin-left: 0; padding: 16px 14px 60px; }
  #hamburger { display: inline-block; margin-bottom: 12px; }
}