:root{--sage-50: #F4F6EE;--sage-100: #E5EBD7;--sage-200: #CCD7B4;--sage-300: #ADBE8A;--sage-400: #8DA365;--sage-500: #708947;--sage-600: #586E37;--sage-700: #44552B;--sage-800: #344121;--sage-900: #232C16;--accent-50: #F8F1F3;--accent-100: #EFDDE3;--accent-200: #DCBAC5;--accent-300: #C593A3;--accent-400: #AC6E84;--accent-500: #8E5468;--accent-600: #714152;--accent-700: #56313F;--accent-800: #40242F;--accent-900: #2A1820;--neutral-50: #F7F7F4;--neutral-100: #ECEDE6;--neutral-200: #D6D8CC;--neutral-300: #B8BCAB;--neutral-400: #95998A;--neutral-500: #74786A;--neutral-600: #5A5D52;--neutral-700: #44473D;--neutral-800: #2F312A;--neutral-900: #1C1D18;--success: var(--sage-600);--success-bg: var(--sage-100);--warning: #C49328;--warning-bg: #FAEFD2;--danger: #B14848;--danger-bg: #F4DADA;--info: #4F7B8E;--info-bg: #DCEAF0;--bg-page: var(--neutral-50);--bg-surface: #FFFFFF;--bg-surface-2: var(--neutral-100);--bg-hover: var(--sage-50);--bg-selected: var(--sage-100);--text-primary: var(--neutral-900);--text-secondary: var(--neutral-600);--text-muted: var(--neutral-500);--text-onbrand: #FFFFFF;--text-link: var(--sage-700);--border-subtle: var(--neutral-200);--border-default: var(--neutral-300);--border-strong: var(--neutral-400);--border-focus: var(--sage-500);--brand: var(--sage-500);--brand-hover: var(--sage-600);--brand-active: var(--sage-700);--accent: var(--accent-500);--accent-hover: var(--accent-600);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg-page: var(--neutral-900);--bg-surface: var(--neutral-800);--bg-surface-2: var(--neutral-700);--bg-hover: var(--sage-800);--bg-selected: var(--sage-700);--text-primary: var(--neutral-50);--text-secondary: var(--neutral-300);--text-muted: var(--neutral-400);--text-link: var(--sage-300);--border-subtle: var(--neutral-700);--border-default: var(--neutral-600);--border-strong: var(--neutral-500);--border-focus: var(--sage-400);--brand: var(--sage-400);--brand-hover: var(--sage-300);--brand-active: var(--sage-200);--accent: var(--accent-400);--accent-hover: var(--accent-300);--success: var(--sage-400);--success-bg: var(--sage-800);--warning: #E5B656;--warning-bg: #4A3712;--danger: #D67878;--danger-bg: #4A2020;--info: #7FA9BC;--info-bg: #1F3942}}[data-theme=light]{color-scheme:light;--bg-page: var(--neutral-50);--bg-surface: #FFFFFF;--bg-surface-2: var(--neutral-100);--text-primary: var(--neutral-900);--text-secondary: var(--neutral-600);--brand: var(--sage-500);--border-subtle: var(--neutral-200)}[data-theme=dark]{color-scheme:dark;--bg-page: var(--neutral-900);--bg-surface: var(--neutral-800);--bg-surface-2: var(--neutral-700);--text-primary: var(--neutral-50);--text-secondary: var(--neutral-300);--brand: var(--sage-400);--border-subtle: var(--neutral-700)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--radius: 8px;--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--sidebar-width: 260px;--sidebar-collapsed: 60px}body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-hover)}.app-layout{display:flex;min-height:100vh}.main-content{flex:1;margin-left:var(--sidebar-width);padding:32px 40px;transition:margin-left .2s ease}.main-content.collapsed{margin-left:var(--sidebar-collapsed)}.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;overflow-y:auto;transition:width .2s ease;z-index:100}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;border-bottom:1px solid var(--border-default)}.sidebar-brand{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:.5px}.sidebar-brand span{color:var(--brand)}.sidebar-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:4px;border-radius:4px}.sidebar-toggle:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-group{padding:8px 0}.nav-group-label{padding:8px 16px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:space-between;-webkit-user-select:none;user-select:none}.nav-group-label:hover{color:var(--text-primary)}.nav-group-chevron{font-size:10px;transition:transform .2s ease}.nav-group-chevron.open{transform:rotate(90deg)}.nav-items{overflow:hidden}.nav-link{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 28px;font-size:14px;color:var(--text-muted);transition:all .15s ease;border-left:3px solid transparent}.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-link.active{color:var(--brand);background:var(--bg-selected);border-left-color:var(--brand)}.page-header{margin-bottom:32px}.page-title{font-size:28px;font-weight:700;margin-bottom:4px}.page-subtitle{font-size:14px;color:var(--text-muted)}.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:24px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.status-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:20px}.status-card h3{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.status-card .value{font-size:22px;font-weight:700}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.status-dot.green{background:var(--success)}.status-dot.red{background:var(--danger)}.status-dot.yellow{background:var(--warning)}.placeholder-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.placeholder-icon{font-size:48px;margin-bottom:16px;opacity:.3}.placeholder-text{font-size:16px;color:var(--text-muted);max-width:400px}.setup-container{max-width:640px;margin:0 auto;padding:40px 0}.setup-steps{display:flex;gap:8px;margin-bottom:32px}.setup-step{flex:1;height:4px;border-radius:2px;background:var(--border-default)}.setup-step.active{background:var(--brand)}.setup-step.complete{background:var(--success)}
