:root { --navy:#14253f; --blue:#2563eb; --blue-soft:#eff6ff; --ink:#172033; --muted:#667085; --line:#e6eaf0; --surface:#fff; --bg:#f6f8fb; --green:#0f9d71; --amber:#d97706; --red:#dc3545; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color:var(--ink); background:var(--bg); font-size:14px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:238px; flex:0 0 238px; background:var(--navy); color:#d7e0ee; padding:25px 14px 18px; display:flex; flex-direction:column; }
.brand { color:#fff; font-size:19px; font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:10px; padding:0 10px 28px; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; background:#4f8cff; border-radius:8px; font-size:17px; }
.workspace { font-size:12px; color:#91a1b8; padding:0 12px 10px; }
.nav { display:grid; gap:5px; }
.nav-item { color:#b8c5d8; background:transparent; border:0; padding:12px; text-align:left; border-radius:8px; font-weight:600; }
.nav-item span { width:24px; display:inline-block; font-size:16px; }
.nav-item:hover, .nav-item.active { color:#fff; background:rgba(96,157,255,.18); }
.sidebar-bottom { margin-top:auto; display:grid; gap:13px; }
.role-card { display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.12); padding:17px 7px 0; }
.role-card strong { color:#fff; display:block; }.role-card small { color:#9aabc2; display:block; margin-top:3px; font-size:11px; }
.avatar { width:32px; height:32px; border-radius:50%; background:#355a8e; display:grid; place-items:center; color:#fff; font-weight:700; }
.outline-button { background:transparent; color:#d6e4f8; border:1px solid rgba(214,228,248,.45); border-radius:7px; padding:8px; font-size:12px; }
.main-content { min-width:0; flex:1; padding:0 30px 34px; }
.topbar { height:103px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); margin-bottom:25px; }
.breadcrumb { color:#8a94a6; font-size:12px; margin-bottom:7px; }.topbar h1 { font-size:24px; margin:0; letter-spacing:-.4px; }.topbar-actions { display:flex; gap:12px; align-items:center; }.today { color:var(--muted); }.icon-button { border:1px solid var(--line); background:#fff; padding:8px; border-radius:8px; }
.view { display:none; }.view.active { display:block; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }.section-heading h2 { font-size:18px; margin:0 0 5px; }.section-heading p { margin:0; color:var(--muted); }
.primary-button { background:var(--blue); color:#fff; border:0; border-radius:8px; padding:10px 14px; font-weight:700; box-shadow:0 4px 10px rgba(37,99,235,.16); }.primary-button:hover { background:#1d4ed8; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }.filter, .field input, .field select, .field textarea { background:#fff; border:1px solid var(--line); border-radius:7px; color:var(--ink); padding:9px 10px; }.filter { min-width:145px; }.filter.search { min-width:250px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:15px; margin-bottom:21px; }.metric-card, .panel { background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:0 1px 2px rgba(16,24,40,.02); }.metric-card { padding:17px; }.metric-label { color:var(--muted); font-weight:600; font-size:13px; }.metric-value { font-size:26px; font-weight:800; margin:10px 0 5px; letter-spacing:-.7px; }.metric-note { font-size:12px; color:#7b8799; }.metric-note.up { color:var(--green); }
.dashboard-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:16px; }.panel { padding:18px; }.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.panel-header h3 { margin:0; font-size:15px; }.link-button { border:0; background:transparent; color:var(--blue); font-weight:700; padding:0; }
.progress-list { display:grid; gap:15px; }.progress-row { display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:center; }.progress-row strong { font-size:13px; }.bar { height:8px; background:#edf0f5; border-radius:99px; overflow:hidden; }.bar i { height:100%; display:block; border-radius:99px; background:linear-gradient(90deg,#548bff,#2563eb); }.progress-row span { color:var(--muted); font-size:12px; }
.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:11px; }.data-table { width:100%; min-width:880px; border-collapse:collapse; }.data-table th { background:#f8fafc; color:#667085; text-align:left; padding:12px 14px; font-size:12px; font-weight:700; border-bottom:1px solid var(--line); white-space:nowrap; }.data-table td { padding:13px 14px; border-bottom:1px solid #edf0f4; vertical-align:middle; white-space:nowrap; }.data-table tr:last-child td { border-bottom:0; }.data-table tr:hover td { background:#fbfdff; }
.company { font-weight:700; }.subtext { display:block; color:var(--muted); margin-top:4px; font-size:12px; }.amount { font-weight:800; }.tag { border-radius:99px; padding:4px 8px; font-size:12px; font-weight:700; display:inline-block; }.tag.green { color:#087c58; background:#e7f8f1; }.tag.blue { color:#2456bd; background:#eaf1ff; }.tag.amber { color:#a75c00; background:#fff4df; }.tag.gray { color:#667085; background:#f1f3f5; }.tag.red { color:#bc2534; background:#fdecef; }
.text-button { border:0; background:transparent; color:var(--blue); padding:3px 0; font-weight:700; }.empty { color:var(--muted); text-align:center; padding:40px!important; }.two-columns { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }.summary-stack { display:grid; gap:12px; }.summary-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }.summary-item:last-child { border:0; }.summary-item strong { font-size:17px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); display:grid; place-items:center; padding:22px; z-index:10; }.modal-backdrop[hidden] { display:none !important; }.modal { width:min(650px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 24px 64px rgba(15,23,42,.25); }.modal-header { display:flex; align-items:center; justify-content:space-between; padding:19px 22px; border-bottom:1px solid var(--line); }.modal-header h2 { margin:0; font-size:18px; }.close-button { border:0; background:transparent; color:#667085; font-size:28px; line-height:1; }.form-grid { padding:20px 22px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.field { display:grid; gap:7px; }.field label { font-size:12px; font-weight:700; color:#475467; }.field.full { grid-column:1/-1; }.field textarea { min-height:75px; resize:vertical; }.form-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; }.secondary-button { background:#fff; border:1px solid var(--line); color:#344054; border-radius:8px; padding:10px 14px; font-weight:700; }.toast { position:fixed; bottom:25px; right:25px; background:#123654; color:#fff; border-radius:8px; padding:12px 15px; box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:20; }
.login-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:22px; background:linear-gradient(145deg,#102441,#071324); }.login-backdrop[hidden] { display:none !important; }.login-card { width:min(400px,100%); display:grid; gap:15px; padding:34px; background:#fff; border-radius:15px; box-shadow:0 24px 70px rgba(0,0,0,.28); }.login-card .brand-mark { margin-bottom:4px; }.login-card h1 { margin:0; font-size:23px; }.login-card p { color:var(--muted); margin:-6px 0 5px; }.login-card label { display:grid; gap:7px; font-size:12px; font-weight:700; color:#475467; }.login-card input { padding:11px; border:1px solid var(--line); border-radius:8px; }.login-card small { color:var(--muted); line-height:1.6; }.login-card button { margin-top:4px; }
@media (max-width:1050px) { .metrics { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.two-columns { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { width:64px; flex-basis:64px; padding:18px 8px; }.brand span:last-child,.workspace,.nav-item:not(.active)::after,.nav-item { font-size:0; }.brand { padding:0 9px 25px; }.nav-item span { font-size:18px; }.role-card div,.outline-button { display:none; }.main-content { padding:0 16px 25px; }.topbar { height:85px; }.topbar h1 { font-size:21px; }.today { display:none; }.metrics { grid-template-columns:1fr 1fr; }.metric-value { font-size:21px; } }