@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --bg:#f5f7fb; --surface:#fff; --ink:#172033; --muted:#8b95a7; --muted-2:#a6aebe; --line:#e9edf3; --navy:#242b43; --purple:#7055e8; --purple-light:#eeeaff; --orange:#ef8d52; --orange-light:#fff1e8; --green:#3da979; --green-light:#e7f7ef; --red:#df665b; --red-light:#fff0ee; --blue:#4f8dd8; --shadow:0 12px 40px rgba(39, 52, 87, .06); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope','Noto Sans SC',sans-serif; font-size:14px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:246px; background:var(--navy); color:#fff; padding:24px 16px 18px; display:flex; flex-direction:column; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:11px; padding:0 9px 28px; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#8873f2,#5944c7); color:#fff; font-size:19px; box-shadow:0 6px 18px rgba(112,85,232,.35); }
.brand-title { font-size:16px; font-weight:800; letter-spacing:.2px; }
.brand-subtitle { color:#a6acc0; font-size:10px; margin-top:3px; letter-spacing:.4px; }
.workspace-switcher { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:10px; margin-bottom:26px; }
.workspace-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#eb815a; font-weight:800; font-size:12px; }
.workspace-copy { display:flex; flex-direction:column; line-height:1.25; flex:1; font-size:12px; }
.workspace-copy small { color:#a6acc0; font-size:10px; margin-top:2px; }
.chevron { color:#9da6bd; }
.nav-group { margin-bottom:22px; }
.nav-label { color:#788199; text-transform:uppercase; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.2px; padding:0 12px 9px; }
.nav-item { width:100%; display:flex; align-items:center; gap:11px; border:0; border-radius:9px; color:#b1b7c8; background:transparent; padding:11px 12px; text-align:left; margin:2px 0; font-size:13px; transition:.2s; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.06); }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(112,85,232,.8),rgba(112,85,232,.42)); box-shadow:inset 3px 0 0 #aa9bff; }
.nav-icon { width:15px; text-align:center; font-size:16px; opacity:.9; }
.nav-badge { margin-left:auto; background:#ec835b; color:#fff; min-width:18px; height:18px; padding:0 5px; border-radius:10px; text-align:center; font-size:10px; line-height:18px; }
.sidebar-footer { margin-top:auto; }
.sync-status { display:flex; align-items:center; gap:7px; padding:13px 10px 18px; color:#8e99af; font-size:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sync-status small { margin-left:auto; color:#69758e; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#54ce93; box-shadow:0 0 0 3px rgba(84,206,147,.12); }
.user-mini { display:flex; align-items:center; gap:9px; padding:18px 7px 0; }
.avatar { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; }
.avatar-purple { background:#7561df; color:#fff; }
.user-mini strong,.user-mini small { display:block; line-height:1.3; }
.user-mini strong { font-size:11px; font-weight:600; }
.user-mini small { color:#8e99af; font-size:9px; margin-top:2px; }
.more { color:#8994ab; margin-left:auto; letter-spacing:2px; }
.main-content { flex:1; min-width:0; }
.topbar { height:72px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.breadcrumb { color:var(--muted-2); font-size:12px; display:flex; align-items:center; gap:10px; }
.breadcrumb b { color:#ccd2de; font-weight:400; }.breadcrumb strong { color:var(--ink); font-weight:600; }
.top-actions { display:flex; align-items:center; gap:17px; color:var(--muted); }
.icon-button { border:0; background:transparent; color:#9da6b7; font-size:24px; line-height:1; padding:2px; position:relative; }
.notification span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--orange); top:1px; right:0; }
.top-divider { height:20px; border-left:1px solid var(--line); }.date-range { font-size:12px; color:#677187; }.date-range span { margin-left:8px; color:#a6aebe; }
.export-button { border:1px solid #dfe3eb; border-radius:8px; color:#586278; background:#fff; padding:9px 13px; font-size:11px; font-weight:600; }
.export-button:hover { border-color:var(--purple); color:var(--purple); }
.content-wrap { padding:31px 40px 48px; max-width:1490px; margin:0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:27px; }
.eyebrow { color:#a9b0be; font-family:'DM Mono',monospace; letter-spacing:1.4px; font-size:9px; margin-bottom:9px; }.page-heading h1 { font-size:24px; margin:0; letter-spacing:-.8px; }.page-heading h1 span { color:var(--purple); font-size:17px; }.page-heading p { color:#919bad; margin:8px 0 0; font-size:12px; }
.role-switcher { display:flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:4px; box-shadow:var(--shadow); }.role-switcher > span { font-size:10px; color:#a0a9ba; padding:0 9px 0 8px; }.role-chip { border:0; color:#8993a6; background:transparent; border-radius:6px; padding:8px 11px; font-size:11px; }.role-chip.active { color:#fff; background:var(--navy); box-shadow:0 3px 8px rgba(36,43,67,.16); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:17px; }.metric-card { background:var(--surface); border:1px solid #eef1f5; border-radius:12px; padding:19px 20px; box-shadow:var(--shadow); min-height:127px; }.metric-top { display:flex; justify-content:space-between; color:#98a2b3; font-size:11px; }.metric-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; font-size:13px; }.metric-icon.purple { color:var(--purple); background:var(--purple-light); }.metric-icon.orange { color:var(--orange); background:var(--orange-light); }.metric-icon.green { color:var(--green); background:var(--green-light); }.metric-icon.red { color:var(--red); background:var(--red-light); }.metric-value { font-size:27px; font-weight:800; letter-spacing:-1px; margin:11px 0 7px; }.metric-value small { font-size:14px; font-weight:600; margin-right:2px; }.metric-foot { display:flex; align-items:center; gap:7px; color:#a3acbc; font-size:10px; }.trend-up { color:var(--green); font-weight:700; }.trend-down { color:var(--red); font-weight:700; }
.grid-main { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr); gap:17px; margin-bottom:17px; }.panel { background:#fff; border:1px solid #eef1f5; border-radius:12px; box-shadow:var(--shadow); padding:20px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:19px; }.panel-heading h2 { margin:0; font-size:14px; letter-spacing:-.2px; }.panel-heading p { color:#a1aaba; font-size:10px; margin:5px 0 0; }.panel-link { color:var(--purple); border:0; background:transparent; font-size:10px; padding:0; }.panel-link:hover { text-decoration:underline; }
.chart-legend { display:flex; gap:16px; font-size:10px; color:#8c96a8; }.legend-item { display:flex; align-items:center; gap:5px; }.legend-dot { width:7px; height:7px; border-radius:50%; background:var(--purple); }.legend-dot.soft { background:#c9bfff; }.bar-chart { height:187px; display:flex; gap:12px; align-items:stretch; border-bottom:1px solid var(--line); padding:10px 8px 0; background:linear-gradient(to bottom,transparent 24%,#f3f5f8 25%,transparent 25%,transparent 49%,#f3f5f8 50%,transparent 50%,transparent 74%,#f3f5f8 75%,transparent 75%); }.bar-group { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; position:relative; }.bar { width:10px; border-radius:4px 4px 0 0; background:#c8c0ff; min-height:4px; }.bar.current { background:var(--purple); }.bar-label { position:absolute; bottom:-23px; font-size:9px; color:#9da6b6; }.chart-note { padding-top:31px; display:flex; justify-content:space-between; color:#9ca5b5; font-size:10px; }.chart-note strong { color:var(--ink); font-weight:700; }
.utilization { display:flex; gap:20px; align-items:center; padding:4px 2px 11px; }.donut { width:142px; height:142px; border-radius:50%; background:conic-gradient(var(--purple) 0 31%, #f1b26e 31% 49%, #67b9a0 49% 62%, #dfe3eb 62% 100%); display:grid; place-items:center; position:relative; flex-shrink:0; }.donut:after { content:''; width:92px; height:92px; border-radius:50%; background:#fff; position:absolute; }.donut-center { position:relative; z-index:1; text-align:center; }.donut-center strong { display:block; font-size:24px; letter-spacing:-1px; }.donut-center span { font-size:9px; color:#a2abb9; }.util-list { flex:1; }.util-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f2f3f6; }.util-row:last-child { border-bottom:0; }.util-row i { width:7px; height:7px; border-radius:50%; }.util-row span { color:#7e889a; font-size:10px; flex:1; }.util-row strong { font-size:11px; }.orange-dot { background:#f1b26e; }.purple-dot { background:var(--purple); }.green-dot { background:#67b9a0; }.gray-dot { background:#dfe3eb; }
.alert-list { display:flex; flex-direction:column; gap:8px; }.alert-item { border-radius:8px; padding:11px 11px; display:flex; align-items:flex-start; gap:9px; background:#fff7f2; border:1px solid #fbe9dc; }.alert-item.red-alert { background:#fff3f1; border-color:#f8dedb; }.alert-mark { color:var(--orange); font-size:13px; }.red-alert .alert-mark { color:var(--red); }.alert-copy { flex:1; }.alert-copy strong { display:block; font-size:11px; margin-bottom:4px; }.alert-copy span { color:#9b8d84; font-size:9px; line-height:1.4; }.alert-action { color:var(--orange); background:transparent; border:0; font-size:9px; padding:0; }.red-alert .alert-action { color:var(--red); }
.table-panel { padding-bottom:7px; }.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; font-size:11px; }.data-table th { text-align:left; color:#a0a9b8; font-weight:500; font-size:10px; padding:0 10px 11px; border-bottom:1px solid var(--line); white-space:nowrap; }.data-table td { padding:13px 10px; border-bottom:1px solid #f1f3f6; color:#626d81; white-space:nowrap; }.data-table tr:last-child td { border-bottom:0; }.data-table td:first-child { color:var(--ink); font-weight:600; }.mini-person { display:flex; align-items:center; gap:8px; }.mini-person .avatar { width:25px; height:25px; font-size:9px; }.amount { color:var(--ink); font-weight:700; }.progress-line { width:70px; height:5px; border-radius:10px; background:#edf0f4; display:inline-block; vertical-align:middle; margin-right:7px; overflow:hidden; }.progress-line span { display:block; height:100%; border-radius:inherit; background:var(--purple); }.progress-line.warn span { background:var(--orange); }.pill { display:inline-block; padding:4px 7px; border-radius:5px; font-size:9px; }.pill.green { background:var(--green-light); color:var(--green); }.pill.orange { background:var(--orange-light); color:var(--orange); }.pill.red { background:var(--red-light); color:var(--red); }.pill.purple { background:var(--purple-light); color:var(--purple); }
.bottom-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:17px; }.tool-row { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid #f1f3f6; }.tool-row:last-child { border-bottom:0; }.tool-logo { width:29px; height:29px; border-radius:8px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; }.tool-meta { flex:1; }.tool-meta strong { display:block; font-size:11px; }.tool-meta small { display:block; color:#a0a9b8; font-size:9px; margin-top:3px; }.tool-amount { font-weight:700; color:var(--ink); font-size:11px; }.tool-bar { width:68px; height:4px; background:#edf0f4; border-radius:6px; overflow:hidden; }.tool-bar span { display:block; height:100%; border-radius:inherit; background:var(--purple); }
.employee-banner { background:linear-gradient(112deg,#292f4c,#4f4a92); color:#fff; border-radius:12px; padding:21px 23px; display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; overflow:hidden; position:relative; }.employee-banner:after { content:'✦'; position:absolute; right:32%; top:-32px; font-size:145px; opacity:.07; }.employee-banner p { color:#c6c8e4; font-size:11px; margin:5px 0 0; }.employee-banner h2 { margin:0; font-size:18px; }.employee-banner .primary-button { position:relative; z-index:1; background:#fff; color:var(--purple); }.primary-button { border:0; background:var(--purple); color:#fff; padding:10px 15px; border-radius:7px; font-weight:700; font-size:11px; box-shadow:0 6px 14px rgba(112,85,232,.2); }.primary-button:hover { filter:brightness(1.07); }.full-width { width:100%; margin-top:8px; }.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.tool-card { background:#fff; border:1px solid #eef1f5; border-radius:11px; box-shadow:var(--shadow); padding:16px; }.tool-card-top { display:flex; align-items:center; justify-content:space-between; }.tool-card h3 { font-size:12px; margin:0; }.tool-card p { color:#9da6b5; font-size:10px; margin:6px 0 15px; }.tool-card .tool-logo { width:32px; height:32px; }.quota { display:flex; justify-content:space-between; color:#8791a2; font-size:10px; margin-bottom:7px; }.quota strong { color:var(--ink); }.quota-bar { height:6px; background:#eef1f4; border-radius:9px; overflow:hidden; }.quota-bar span { height:100%; display:block; border-radius:inherit; }.quota-bar.purple span { background:var(--purple); }.quota-bar.orange span { background:var(--orange); }.quota-bar.green span { background:var(--green); }
.request-list { display:flex; flex-direction:column; gap:9px; }.request-item { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid #f0f2f6; border-radius:8px; }.request-item .avatar { width:29px; height:29px; }.request-info { flex:1; }.request-info strong { display:block; font-size:11px; }.request-info span { color:#9da6b5; display:block; font-size:9px; margin-top:3px; }.request-value { text-align:right; }.request-value strong { display:block; font-size:11px; }.request-value small { color:var(--orange); font-size:9px; }.request-actions { display:flex; gap:6px; }.small-button { padding:6px 9px; border-radius:5px; border:1px solid #e6eaf0; background:#fff; color:#7e899b; font-size:9px; }.small-button.approve { color:var(--green); border-color:#cceede; background:#f5fcf8; }.small-button.reject { color:var(--red); border-color:#f2d5d2; background:#fffafa; }
.empty-state { padding:50px 20px; text-align:center; color:#a0a9b8; }.empty-state strong { display:block; color:var(--ink); margin-bottom:8px; }
.modal-backdrop { display:none; position:fixed; inset:0; z-index:10; background:rgba(20,27,45,.42); backdrop-filter:blur(3px); align-items:center; justify-content:center; }.modal-backdrop.open { display:flex; }.modal { width:400px; background:#fff; border-radius:14px; padding:25px; box-shadow:0 20px 60px rgba(20,27,45,.25); position:relative; }.modal-close { border:0; background:transparent; color:#a0a9b8; font-size:23px; position:absolute; top:17px; right:18px; }.modal-kicker { color:var(--purple); font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.2px; }.modal h2 { margin:8px 0 5px; font-size:19px; }.modal p { color:#9ba4b3; font-size:11px; margin:0 0 18px; line-height:1.6; }.modal label { display:block; font-size:10px; color:#7c8799; margin:13px 0; }.modal input,.modal select,.modal textarea { display:block; width:100%; border:1px solid #e5e9ef; border-radius:7px; padding:10px; margin-top:7px; color:var(--ink); outline:none; }.modal input:focus,.modal select:focus,.modal textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-light); }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); background:var(--navy); color:#fff; border-radius:8px; padding:11px 18px; font-size:11px; opacity:0; pointer-events:none; transition:.25s; z-index:30; box-shadow:0 8px 24px rgba(20,27,45,.18); }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1100px) { .sidebar { width:210px; }.content-wrap { padding-left:25px; padding-right:25px; }.topbar { padding:0 25px; }.metrics-grid { grid-template-columns:repeat(2,1fr); }.grid-main,.bottom-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { width:65px; padding:20px 8px; }.brand { padding:0 8px 26px; }.brand > div:not(.brand-mark),.workspace-copy,.chevron,.nav-label,.nav-item:not(.active)::after,.nav-item { font-size:0; }.workspace-switcher { justify-content:center; padding:8px; }.nav-item { justify-content:center; padding:12px; }.nav-icon { font-size:17px; }.nav-badge { display:none; }.sync-status span:not(.status-dot),.sync-status small,.user-mini > div,.more { display:none; }.user-mini { justify-content:center; }.topbar { padding:0 14px; }.top-actions { gap:9px; }.date-range,.export-button { display:none; }.content-wrap { padding:24px 14px; }.page-heading { align-items:flex-start; flex-direction:column; }.role-switcher { width:100%; }.role-switcher > span { flex:1; }.role-chip { flex:1; padding:8px 4px; }.tool-grid { grid-template-columns:1fr; }.employee-banner { align-items:flex-start; flex-direction:column; gap:15px; }.employee-banner .primary-button { width:100%; }.metrics-grid { gap:9px; }.metric-card { padding:14px; min-height:112px; }.metric-value { font-size:22px; }.panel { padding:15px; } }