:root { --ink:#17212b; --muted:#66727f; --line:#e5e9ed; --canvas:#f4f6f7; --surface:#fff; --pink:#f43483; --pink-dark:#c51c62; --blue:#1467d7; --green:#148064; --orange:#ed9b2e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { background:#17212b; color:#e9eff3; display:flex; flex-direction:column; padding:26px 15px 18px; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; padding:0 9px 28px; border-bottom:1px solid #30404c; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--pink); border-radius:8px; color:#fff; font-family:Outfit,sans-serif; font-weight:700; }
.brand strong,.brand small { display:block; }.brand strong { font-family:Outfit,sans-serif; font-size:16px; }.brand small { color:#aab8c1; font-size:11px; margin-top:2px; }
nav { display:grid; gap:4px; margin-top:24px; }.nav-link { display:flex; align-items:center; gap:12px; padding:11px 12px; color:#b7c3ca; text-decoration:none; font-size:14px; font-weight:600; border-radius:6px; }.nav-link svg { width:18px; height:18px; }.nav-link:hover,.nav-link.active { color:#fff; background:#293842; }.nav-link.active { box-shadow:inset 3px 0 0 var(--pink); }
.sidebar-footer { margin-top:auto; display:flex; align-items:center; gap:8px; color:#9ba9b2; font-size:12px; padding:14px 8px 0; }.sync-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); }
main { padding:31px clamp(22px,4vw,64px) 42px; max-width:1600px; width:100%; margin:0 auto; }.topbar,.panel-header,.metric-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }.eyebrow { margin:0 0 4px; color:var(--muted); font-size:11px; letter-spacing:0; font-weight:700; }.topbar h1,.panel h2 { margin:0; font-family:Outfit,sans-serif; letter-spacing:0; }.topbar h1 { font-size:28px; }.panel h2 { font-size:18px; }.top-actions { display:flex; align-items:center; gap:10px; }.icon-button,.text-button { position:relative; border:0; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; }.icon-button { width:39px; height:39px; border:1px solid var(--line); background:#fff; border-radius:6px; }.icon-button svg,.text-button svg { width:18px; }.notification-dot { position:absolute; top:9px; right:9px; width:7px; height:7px; background:var(--pink); border-radius:50%; border:1px solid #fff; }.primary-button,.secondary-button { border:0; height:40px; padding:0 15px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:8px; font:600 13px "DM Sans",sans-serif; }.primary-button { background:var(--blue); color:#fff; }.secondary-button { color:#29404e; background:#fff; border:1px solid var(--line); }.primary-button svg,.secondary-button svg { width:16px; }
.connection-banner { margin:25px 0 20px; background:#eef6ff; border:1px solid #d2e6ff; border-radius:7px; padding:14px 15px; display:flex; align-items:flex-start; gap:12px; }.banner-icon { color:var(--blue); margin-top:1px; }.banner-icon svg { width:20px; }.connection-banner strong { font-size:14px; }.connection-banner p { color:#4e6379; margin:3px 0 0; font-size:13px; line-height:1.4; }.connection-banner .text-button { margin-left:auto; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.metric-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:7px; }.metric-card { padding:18px; min-height:146px; }.metric-heading { color:var(--muted); font-size:13px; font-weight:600; }.metric-heading svg { width:18px; color:#778897; }.metric-value { font:600 24px Outfit,sans-serif; margin:24px 0 17px; }.muted-value { color:#8d99a4; font-size:20px; }.metric-foot { margin:0; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }.metric-foot svg { width:14px; }.alert-card { border-top:3px solid var(--orange); }.alert-card .metric-value { color:var(--orange); }
.workspace-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:14px; margin-top:14px; }.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.panel { padding:20px; min-height:212px; }.panel-header a { display:flex; align-items:center; gap:4px; color:var(--blue); font-size:12px; font-weight:700; text-decoration:none; }.panel-header a svg { width:15px; }.empty-state { border:1px dashed #ced7de; margin-top:22px; min-height:104px; display:flex; align-items:center; gap:14px; padding:20px; color:var(--muted); }.empty-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#f2f5f6; color:var(--blue); }.empty-icon svg { width:21px; }.empty-state strong { color:var(--ink); font-size:14px; }.empty-state p { margin:5px 0 0; font-size:12px; line-height:1.4; }.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:22px; }.quick-actions button { background:#f7f9fa; border:1px solid var(--line); border-radius:6px; padding:13px 9px; color:#31424e; cursor:pointer; display:flex; align-items:center; gap:8px; text-align:left; font:600 12px "DM Sans",sans-serif; }.quick-actions button:hover { border-color:#b7c3ca; background:#fff; }.quick-actions svg { width:17px; color:var(--pink); }.table-placeholder { margin-top:24px; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px; }.table-placeholder svg { color:#9bacb6; width:22px; }.table-placeholder p { margin:0; }.mini-list { display:grid; gap:8px; margin-top:19px; }.mini-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #edf0f2; font-size:13px; }.mini-row:last-child { border-bottom:0; }.mini-row strong { display:block; font-size:13px; }.mini-row small { color:var(--muted); font-size:11px; }.pill { border-radius:999px; padding:4px 8px; background:#fff3df; color:#a85e00; font-size:11px; font-weight:700; white-space:nowrap; }.pill.pink { background:#fff0f6; color:var(--pink-dark); }.demo-note { color:#7b8791; font-size:11px; margin:15px 0 0; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.app-shell { grid-template-columns:208px minmax(0,1fr); }.workspace-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { min-height:auto; padding:14px 16px; }.brand { padding-bottom:12px; border:0; } nav { display:flex; overflow:auto; margin-top:8px; gap:6px; }.nav-link { white-space:nowrap; padding:9px 10px; }.sidebar-footer { display:none; } main { padding:20px 15px 32px; }.topbar { align-items:flex-start; }.topbar h1 { font-size:23px; }.primary-button { padding:0 10px; font-size:0; }.primary-button svg { width:18px; }.connection-banner { margin-top:18px; }.metric-grid,.bottom-grid { grid-template-columns:1fr; }.panel { min-height:180px; } }