:root { --primary:#165dff; --navy:#0b2658; --danger:#f53f3f; --warning:#ff7d00; --success:#00b42a; --text:#1d2129; --muted:#86909c; --line:#e5e6eb; --bg:#f3f6fa; font-family:"Microsoft YaHei",system-ui,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.boot { display:grid; place-items:center; min-height:100vh; color:var(--muted); }
.site-filing-footer { position:fixed; right:0; bottom:0; left:0; z-index:20; display:flex; align-items:center; justify-content:center; min-height:38px; padding:8px 16px; border-top:1px solid rgba(229,230,235,.9); background:rgba(255,255,255,.96); box-shadow:0 -3px 14px rgba(30,55,90,.04); font-size:12px; }
.site-filing-footer a { color:#4e5969; text-decoration:none; }
.site-filing-footer a:hover { color:var(--primary); }
.login { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; background:#fff; }
.login-brand { padding:9vw; color:#fff; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,#071d42,#0b3b9c 55%,#165dff); position:relative; overflow:hidden; }
.login-brand::after { content:""; position:absolute; width:460px; height:460px; border:80px solid rgba(255,255,255,.05); border-radius:50%; right:-180px; bottom:-180px; }
.logo { width:66px; height:66px; display:grid; place-items:center; background:#fff; color:var(--primary); border-radius:18px; font-size:30px; font-weight:800; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.login-brand h1 { margin:32px 0 14px; font-size:38px; }.login-brand p { opacity:.72; font-size:17px; letter-spacing:2px; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:50px; }.login-box { width:min(390px,100%); }.login-box h2 { font-size:30px; margin:0 0 10px; }.login-box>.muted { margin-bottom:36px; }
.field { margin-bottom:20px; }.field label { display:block; font-size:14px; color:#4e5969; margin-bottom:9px; }.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 14px; outline:none; background:#fff; }.field textarea { min-height:100px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px #e8f3ff; }
.btn { border:0; border-radius:8px; padding:10px 18px; background:#f2f3f5; color:#4e5969; }.btn-primary { background:var(--primary); color:#fff; }.btn-danger { background:var(--danger); color:#fff; }.btn-block { width:100%; padding:13px; }.btn-small { padding:6px 11px; font-size:13px; }.btn:disabled { cursor:not-allowed; opacity:.48; }
.error { color:var(--danger); background:#fff2f0; padding:10px 12px; border-radius:7px; margin-bottom:16px; }
.layout { min-height:100vh; display:grid; grid-template-columns:230px 1fr; }.sidebar { position:fixed; inset:0 auto 0 0; width:230px; color:#fff; background:var(--navy); padding:24px 16px; }.side-brand { display:flex; align-items:center; gap:12px; padding:0 8px 28px; font-weight:700; font-size:18px; }.side-logo { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--primary); }.nav a { display:flex; align-items:center; gap:12px; padding:13px 15px; margin:5px 0; color:rgba(255,255,255,.68); text-decoration:none; border-radius:9px; }.nav a.active,.nav a:hover { color:#fff; background:rgba(255,255,255,.1); }.nav-icon { width:24px; text-align:center; }
.main { grid-column:2; min-width:0; }.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }.userbox { display:flex; align-items:center; gap:12px; }.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--primary); background:#e8f3ff; font-weight:700; }.content { padding:28px 30px 60px; }.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }.page-head h2 { margin:0; font-size:25px; }.muted { color:var(--muted); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.metric { background:#fff; border-radius:13px; padding:22px; border-left:5px solid; box-shadow:0 7px 24px rgba(30,55,90,.05); }.metric .value { font-size:31px; font-weight:750; margin:8px 0 4px; }.metric.processing { border-color:var(--warning); }.metric.processing .value { color:var(--warning); }.metric.overdue { border-color:var(--danger); }.metric.overdue .value { color:var(--danger); }.metric.completed { border-color:var(--success); }.metric.completed .value { color:var(--success); }.metric.rate { border-color:var(--primary); }.metric.rate .value { color:var(--primary); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }.panel { background:#fff; border-radius:13px; padding:22px; box-shadow:0 7px 24px rgba(30,55,90,.04); }.panel h3 { margin:0 0 22px; font-size:17px; }.bar-row { display:grid; grid-template-columns:120px 1fr 46px; align-items:center; gap:12px; margin:15px 0; }.bar { height:10px; background:#f2f3f5; border-radius:10px; overflow:hidden; }.bar i { display:block; height:100%; background:linear-gradient(90deg,#165dff,#5aa9ff); border-radius:10px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; background:#fff; padding:16px; border-radius:11px; }.toolbar input,.toolbar select { border:1px solid var(--line); border-radius:7px; padding:9px 11px; min-width:145px; }.toolbar input { flex:1; min-width:220px; }
.table-wrap { overflow:auto; background:#fff; border-radius:12px; }.table { width:100%; border-collapse:collapse; white-space:nowrap; }.table th { text-align:left; font-size:13px; color:#4e5969; background:#f7f8fa; padding:14px 16px; }.table td { padding:15px 16px; border-top:1px solid #f2f3f5; font-size:14px; }.table tr:hover td { background:#fafcff; }.table tr.overdue td { background:#fff2f0; }.table tr.near td { background:#fff7e8; }.link { color:var(--primary); cursor:pointer; }.tag { display:inline-block; padding:4px 9px; font-size:12px; border-radius:999px; color:var(--primary); background:#e8f3ff; }.tag.danger { color:var(--danger); background:#ffece8; }.tag.success { color:var(--success); background:#e8ffea; }.tag.warning { color:var(--warning); background:#fff3e8; }.tag+.tag { margin-left:5px; }
.form-panel { background:#fff; border-radius:12px; padding:26px; max-width:920px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }.span-2 { grid-column:span 2; }.required::before { content:"*"; color:var(--danger); margin-right:4px; }.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(5,20,45,.55); padding:30px; }.modal { width:min(850px,100%); max-height:88vh; overflow:auto; background:#fff; border-radius:15px; box-shadow:0 25px 80px rgba(0,0,0,.25); }.modal-head { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:#fff; border-bottom:1px solid var(--line); z-index:1; }.modal-head h3 { margin:0; }.close { border:0; background:none; font-size:25px; color:var(--muted); }.modal-body { padding:24px; }.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.detail-item { background:#f7f8fa; padding:13px; border-radius:8px; }.detail-item label { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }.timeline { margin-top:22px; border-left:2px solid #bedaff; padding-left:20px; }.event { position:relative; margin:0 0 20px; }.event::before { content:""; position:absolute; left:-27px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--primary); }.event small { color:var(--muted); }
.sla-input { width:75px; border:1px solid var(--line); border-radius:6px; padding:7px; }.toast { position:fixed; right:28px; top:88px; z-index:100; color:#fff; background:#1d2129; padding:13px 18px; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.18); }.toast.error-toast { background:var(--danger); }
.user-actions { display:flex; gap:7px; }.workload { color:var(--warning); font-weight:700; }.empty-cell { text-align:center; padding:34px!important; }.user-modal { width:min(720px,100%); }.user-modal .modal-head { align-items:flex-start; }.user-modal .modal-head small { display:block; margin-top:5px; }.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }.form-note { margin-top:7px; color:var(--muted); font-size:12px; }
.rule-tip { display:flex; gap:12px; align-items:center; margin-bottom:16px; padding:13px 16px; border:1px solid #bedaff; border-radius:10px; color:#315780; background:#f2f8ff; font-size:14px; }.rule-tip strong { color:var(--primary); white-space:nowrap; }.area-tags { display:flex; flex-wrap:wrap; gap:5px; max-width:320px; white-space:normal; }.area-tags .tag { margin:0; }.areas-input { min-height:130px!important; }
.page-actions { display:flex; gap:10px; }
.nested-modal { z-index:60; }.handler-modal { width:min(560px,100%); }.handler-modal .modal-head { align-items:flex-start; }.handler-modal .modal-head small { display:block; margin-top:5px; }.current-handler { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding:14px 16px; border-radius:9px; background:#f7f8fa; }.inline-error { margin:10px 0 0; font-size:13px; }
.readonly-badge { padding:7px 12px; border-radius:999px; color:#4e5969; background:#e5e6eb; font-size:13px; }.record-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); }.record-tab { border:0; border-bottom:3px solid transparent; padding:12px 20px; color:#4e5969; background:transparent; }.record-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }.record-loading { display:grid; place-items:center; min-height:220px; color:var(--muted); background:#fff; border-radius:12px; }.record-summary { display:flex; gap:12px; margin-bottom:14px; }.record-summary>div { min-width:145px; padding:14px 18px; border-radius:10px; background:#fff; box-shadow:0 5px 18px rgba(30,55,90,.04); }.record-summary span { display:block; color:var(--muted); font-size:12px; }.record-summary strong { display:block; margin-top:5px; font-size:23px; }.warning-text { color:var(--warning); }.success-text { color:var(--success); }.record-filter { margin-bottom:14px; }.record-table { min-width:980px; }.record-summary-cell { max-width:340px; overflow:hidden; text-overflow:ellipsis; }.pager { display:flex; justify-content:space-between; align-items:center; padding:15px 16px; background:#fff; border-top:1px solid var(--line); }.pager>div { display:flex; gap:8px; }.record-modal { width:min(720px,100%); }.json-detail { margin:0; padding:18px; overflow:auto; border-radius:9px; color:#d6e4ff; background:#14213d; font:13px/1.65 Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:900px){.layout{grid-template-columns:70px 1fr}.sidebar{width:70px;padding:20px 9px}.side-brand span,.nav a span:last-child{display:none}.nav a{justify-content:center}.main{grid-column:2}.metrics{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}.content{padding:20px}.login{grid-template-columns:1fr}.login-brand{display:none}.detail-grid{grid-template-columns:1fr 1fr}}