:root{--bg:#f4f6f8;--panel:#fff;--ink:#17202b;--muted:#687483;--line:#e5e9ee;--brand:#245f94;--brand2:#153d63;--good:#16835b;--warn:#c47a13;--bad:#c94b4b;--side:#0d1b2a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select{font:inherit}
.demo-app{min-height:100vh;display:grid;grid-template-columns:255px 1fr}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 18px;background:var(--side);color:#dce8f3;display:flex;flex-direction:column}
.demo-brand{display:flex;align-items:center;gap:10px;padding:0 8px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.demo-brand img{width:38px}
.demo-brand strong{display:block}
.demo-brand small{color:#88a2ba}
.side-nav{display:grid;gap:5px;margin-top:24px}
.side-nav button{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#9fb3c6;text-align:left;cursor:pointer}
.side-nav button:hover,.side-nav button.active{background:rgba(72,137,191,.2);color:#fff}
.side-nav i{width:18px}
.back-site{margin-top:auto;padding:12px;color:#a9bfd2;text-decoration:none;border-top:1px solid rgba(255,255,255,.1)}
.workspace{min-width:0}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#fff;border-bottom:1px solid var(--line)}
.topbar h1{font-size:1.05rem;margin:0}
.demo-notice{font-size:.72rem;color:var(--warn);background:#fff8e9;border:1px solid #f4dfb6;padding:7px 10px;border-radius:20px}
.user{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.82rem}
.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#dfeaf3;color:var(--brand2);font-weight:800}
.content{padding:28px}
.view{display:none}
.view.active{display:block}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.view-head h2{margin:0 0 5px;font-size:1.65rem}
.view-head p{margin:0;color:var(--muted)}
.primary{border:0;border-radius:8px;padding:10px 14px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.metric,.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 18px rgba(31,48,66,.04)}
.metric{padding:17px}
.metric-top{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem}
.metric i{color:var(--brand)}
.metric strong{display:block;margin:10px 0 4px;font-size:1.65rem}
.trend{font-size:.75rem;color:var(--good)}
.trend.down{color:var(--bad)}
.dashboard-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}
.panel{padding:18px;min-width:0}
.panel h3{margin:0 0 16px;font-size:.95rem}
.chart{height:240px;display:flex;align-items:flex-end;gap:12px;padding:28px 6px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 47px,#eef1f4 48px)}
.bar{flex:1;min-width:15px;height:var(--h);background:linear-gradient(#4d91c8,#245f94);border-radius:4px 4px 0 0;position:relative}
.bar:hover::after{content:attr(data-value);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 6px;border-radius:4px;background:#17202b;color:#fff;font-size:.65rem}
.legend{display:flex;justify-content:space-around;margin-top:8px;color:var(--muted);font-size:.68rem}
.progress-list{display:grid;gap:15px}
.progress-row{font-size:.78rem}
.progress-label{display:flex;justify-content:space-between;margin-bottom:6px}
.progress-track{height:7px;background:#edf0f3;border-radius:5px;overflow:hidden}
.progress-track i{display:block;height:100%;width:var(--w);background:var(--brand);border-radius:5px}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.8rem}
.data-table th{text-align:left;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding:11px;border-bottom:1px solid var(--line)}
.data-table td{padding:12px 11px;border-bottom:1px solid #eef1f4;white-space:nowrap}
.status{display:inline-flex;padding:4px 8px;border-radius:20px;background:#e8f6f0;color:var(--good);font-size:.68rem;font-weight:700}
.status.warn{background:#fff3df;color:var(--warn)}
.status.bad{background:#fdeaea;color:var(--bad)}
.toolbar{display:flex;gap:10px;margin-bottom:14px}
.toolbar input,.toolbar select,.form-grid input,.form-grid select{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#fff}
.toolbar input{flex:1}
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;overflow:auto}
.lane{min-width:190px;background:#edf1f4;border-radius:10px;padding:10px}
.lane-head{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.75rem;font-weight:800}
.deal{padding:12px;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:8px}
.deal strong,.deal small{display:block}
.deal small{margin-top:6px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid label{display:grid;gap:6px;color:var(--muted);font-size:.75rem}
.modal{position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:20px;background:rgba(9,19,30,.55)}
.modal.open{display:grid}
.modal-card{width:min(600px,100%);padding:22px;background:#fff;border-radius:14px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-head h3{margin:0}
.close{border:0;background:transparent;font-size:1.4rem;cursor:pointer}
.toast{position:fixed;right:20px;bottom:20px;z-index:30;padding:12px 16px;border-radius:8px;background:#17202b;color:#fff;opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:none}
.mobile-menu{display:none;border:0;background:transparent;font-size:1.2rem}
.donut{width:170px;height:170px;margin:20px auto;border-radius:50%;background:conic-gradient(var(--brand) 0 62%,#4ca77e 62% 83%,#df9b36 83%);position:relative}
.donut::after{content:'';position:absolute;inset:30px;border-radius:50%;background:#fff}
.empty-note{padding:35px;text-align:center;color:var(--muted)}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}
.dashboard-grid{grid-template-columns:1fr}
.kanban{grid-template-columns:repeat(5,220px)}
}
@media(max-width:760px){.demo-app{grid-template-columns:1fr}
.sidebar{position:fixed;z-index:15;left:-270px;width:255px;transition:.25s}
.sidebar.open{left:0}
.mobile-menu{display:block}
.topbar{padding:0 15px}
.content{padding:18px 12px}
.demo-notice{display:none}
.metrics{grid-template-columns:1fr 1fr;gap:9px}
.metric{padding:13px}
.metric strong{font-size:1.3rem}
.form-grid{grid-template-columns:1fr}
.view-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:440px){.metrics{grid-template-columns:1fr}
.user span{display:none}
}
.side-nav button{position:relative}.side-nav button em{margin-left:auto;padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.08);font-size:.56rem;font-style:normal}.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:13px;color:#8a95a2;font-size:.7rem}.breadcrumb i{font-size:.5rem}.head-actions{display:flex;gap:9px}.ghost{min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#536170;font-weight:700;cursor:pointer}.panel-title{display:flex;justify-content:space-between;gap:15px;margin-bottom:14px}.panel-title h3{margin:0 0 4px}.panel-title p{margin:0;color:var(--muted);font-size:.72rem}.compact-select{padding:7px;border:1px solid var(--line);border-radius:7px;background:#fff}.spark{height:27px;display:flex;align-items:flex-end;gap:3px;margin-top:10px}.spark i{width:100%;max-width:12px;border-radius:2px 2px 0 0;background:#c6dbe9}.metric:hover .spark i{background:var(--brand)}.goal-ring{--goal:250deg;width:150px;height:150px;display:grid;place-items:center;margin:10px auto 22px;border-radius:50%;background:conic-gradient(var(--brand) 0 var(--goal),#e9edf1 var(--goal));position:relative}.goal-ring:before{content:'';position:absolute;inset:18px;border-radius:50%;background:#fff}.goal-ring div{position:relative;text-align:center}.goal-ring strong{display:block;font-size:1.5rem}.goal-ring span{display:block;color:var(--muted);font-size:.62rem}.dashboard-lower{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-top:16px}.quick-panel button{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:11px 4px;border:0;border-bottom:1px solid #edf0f3;background:transparent;color:#4e5c69;text-align:left}.quick-panel button i:first-child{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#edf4f8;color:var(--brand)}.chart-panel .chart{height:270px}.mini-summary{display:flex;margin-bottom:15px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:auto}.mini-summary span{padding:11px 16px;border-right:1px solid var(--line);color:var(--muted);font-size:.72rem;white-space:nowrap}.data-panel{padding:0;overflow:hidden}.table-tools{display:flex;gap:9px;padding:15px;border-bottom:1px solid var(--line)}.search-box{position:relative;flex:1}.search-box i{position:absolute;left:12px;top:13px;color:#8f9aa5}.search-box input{width:100%;height:40px;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:8px}.table-tools select{min-height:40px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}.result-count{padding:10px 15px;color:var(--muted);background:#fafbfc;font-size:.7rem}.data-table tbody tr{cursor:pointer}.data-table tbody tr:hover{background:#f6f9fb}.row-action{border:0;background:transparent}.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-top:1px solid var(--line);color:var(--muted);font-size:.7rem}.pagination button{width:29px;height:29px;border:1px solid var(--line);background:#fff}.pagination button.active{background:var(--brand);color:#fff}.pipeline-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.pipeline-summary span{padding:8px 11px;border:1px solid var(--line);border-radius:20px;background:#fff;font-size:.7rem}.lane header{display:flex;justify-content:space-between;padding-bottom:10px}.lane header small{display:block;color:var(--muted)}.deal-tag{padding:3px 6px;background:#edf2f8;color:var(--brand);font-size:.55rem}.deal div{display:flex;justify-content:space-between;margin-top:10px}.mini-avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#e4edf4}.alert-banner{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:16px;border:1px solid #f0cf9a;border-radius:10px;background:#fff8ea}.alert-banner div{flex:1}.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.report-card{display:grid;grid-template-columns:45px 1fr auto;gap:13px}.course-progress article{display:grid;grid-template-columns:minmax(180px,.7fr) 1fr 50px;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.indicator-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.indicator{position:relative}.indicator .signal{position:absolute;right:15px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--warn)}.indicator .signal.good{background:var(--good)}.indicator strong{display:block;margin:13px 0;font-size:1.55rem}.form-grid textarea{padding:10px;border:1px solid var(--line)}.form-grid .full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr)}.detail-grid div{padding:12px;border:1px solid var(--line)}.detail-grid span,.detail-grid strong{display:block}.detail-grid span{color:var(--muted);font-size:.62rem}.audit{display:flex;gap:10px;margin-top:15px;padding:12px;background:#edf7f2;color:var(--good)}
@media(max-width:1050px){.dashboard-lower{grid-template-columns:1fr}.indicator-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.head-actions,.table-tools{width:100%;flex-wrap:wrap}.table-tools .search-box{flex-basis:100%}.report-grid,.indicator-grid{grid-template-columns:1fr}.course-progress article,.detail-grid{grid-template-columns:1fr}.pagination>span{display:none}}