:root{--bg:#f5f6fa;--card:#fff;--primary:#534AB7;--primary-light:#EEEDFE;--primary-border:#AFA9EC;
--blue:#185FA5;--blue-light:#E6F1FB;--blue-border:#85B7EB;
--teal:#0F6E56;--teal-light:#E1F5EE;--teal-border:#5DCAA5;
--amber:#854F0B;--amber-light:#FAEEDA;--amber-border:#EF9F27;
--pink:#993556;--pink-light:#FBEAF0;--pink-border:#ED93B1;
--text:#1a1a2e;--text-2:#666;--text-3:#999;
--border:#eef0f6;--radius:12px;--radius-sm:8px;
--sidebar-w:220px;--header-h:52px;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.app-layout{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;}
.sidebar-logo{padding:16px 20px;font-size:17px;font-weight:700;color:var(--primary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.sidebar-logo span{color:var(--text-3);font-size:11px;font-weight:400;}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;}
.nav-group{margin-bottom:16px;}
.nav-group-title{font-size:11px;color:var(--text-3);padding:4px 20px;text-transform:uppercase;letter-spacing:.5px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13px;color:var(--text-2);cursor:pointer;transition:all .15s;border-left:3px solid transparent;}
.nav-item:hover{background:var(--bg);color:var(--text);}
.nav-item.active{background:var(--primary-light);color:var(--primary);border-left-color:var(--primary);font-weight:500;}
.nav-item .icon{width:18px;text-align:center;font-size:14px;}
.sidebar-footer{padding:12px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);}

.main{flex:1;margin-left:var(--sidebar-w);}
.topbar{height:var(--header-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:50;}
.topbar-title{font-size:15px;font-weight:500;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;}
.topbar-role{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--primary-light);color:var(--primary);}
.content{padding:24px;}
.page-title{font-size:20px;font-weight:700;margin-bottom:16px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.card-title{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;}
.metric-label{font-size:12px;color:var(--text-3);margin-bottom:6px;}
.metric-value{font-size:24px;font-weight:700;}
.metric-delta{font-size:11px;margin-top:4px;}
.metric-delta.up{color:#0F6E56;}
.metric-delta.down{color:#A32D2D;}
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th{text-align:left;padding:8px 12px;border-bottom:2px solid var(--border);color:var(--text-3);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.table td{padding:10px 12px;border-bottom:1px solid var(--border);}
.table tr:hover td{background:var(--bg);}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;}
.badge.green{background:var(--teal-light);color:var(--teal);}
.badge.blue{background:var(--blue-light);color:var(--blue);}
.badge.amber{background:var(--amber-light);color:var(--amber);}
.badge.purple{background:var(--primary-light);color:var(--primary);}
.badge.pink{background:var(--pink-light);color:var(--pink);}
.badge.gray{background:#f0f0f0;color:#888;}
.btn{display:inline-block;padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#3C3489;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-2);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.progress-bar{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;border-radius:3px;}
.radar-chart{display:flex;align-items:center;justify-content:center;padding:20px 0;}
.skill-tag{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;margin:2px;}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-3);}
.empty-state .icon{font-size:32px;margin-bottom:8px;}

/* 轻量提示条 */
.zky-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#333;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;z-index:1000;opacity:0;transition:all .3s ease;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.15);}
.zky-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.zky-toast.info{background:#534AB7;}
.zky-toast.warn{background:#f59e0b;}
.zky-toast.error{background:#ef4444;}

@media(max-width:1024px){.metric-grid{grid-template-columns:repeat(2,1fr);}.grid-2,.grid-3{grid-template-columns:1fr;}.sidebar{transform:translateX(-100%);}.main{margin-left:0;}}