:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#eff6ff;--color-success:#16a34a;--color-success-light:#f0fdf4;--color-error:#dc2626;--color-error-light:#fef2f2;--color-warning:#d97706;--color-warning-light:#fffbeb;--color-text:#1e293b;--color-text-secondary:#64748b;--color-text-inverse:#fff;--color-bg:#f8fafc;--color-surface:#fff;--color-border:#e2e8f0;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--leading-tight:1.25;--leading-normal:1.5;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--max-width:72rem;--max-width-page:48rem;--max-width-page-wide:64rem;--header-height:3.5rem;--border-radius:.375rem;--border-radius-lg:.5rem;--size-checkbox:1.125rem;--size-indicator:.5rem;--size-loading-min:200px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--transition-fast:.15s ease;--transition-normal:.25s ease}@media (prefers-color-scheme:dark){:root{--color-primary:#60a5fa;--color-primary-hover:#93bbfd;--color-primary-light:#1e3a5f;--color-success:#4ade80;--color-success-light:#14532d;--color-error:#f87171;--color-error-light:#450a0a;--color-warning:#fbbf24;--color-warning-light:#451a03;--color-text:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-inverse:#0f172a;--color-bg:#0f172a;--color-surface:#1e293b;--color-border:#334155;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code,pre{font-family:var(--font-mono)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-to-content{z-index:100;padding:var(--space-2) var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);font-weight:600;position:absolute;top:0;left:-9999px}.skip-to-content:focus{left:var(--space-4);top:var(--space-2)}.env-badge{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;border-radius:var(--border-radius);color:var(--color-text-inverse);background:var(--color-warning);font-weight:700;line-height:1;display:inline-block}.env-badge[data-env=dev]{background:var(--color-primary)}.env-badge[data-env=stage]{background:var(--color-warning)}.env-badge[data-env=local]{background:var(--color-text-secondary)}.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:10;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);position:sticky;top:0}.app-nav{max-width:var(--max-width);padding:0 var(--space-6);height:var(--header-height);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.app-nav-brand{font-size:var(--text-lg);color:var(--color-primary);font-weight:700;text-decoration:none}.app-nav-brand:hover{opacity:.85;text-decoration:none}.app-nav-links{gap:var(--space-2);list-style:none;display:flex}.app-nav-links a{padding:var(--space-2) var(--space-3);border-radius:var(--border-radius);font-size:var(--text-sm);color:var(--color-text-secondary);transition:color var(--transition-fast), background var(--transition-fast);font-weight:500;text-decoration:none;display:inline-block}.app-nav-links a:hover{color:var(--color-text);background:var(--color-primary-light);text-decoration:none}.app-nav-links a.active{color:var(--color-primary);background:var(--color-primary-light)}.app-main{max-width:var(--max-width);width:100%;padding:var(--space-8) var(--space-6);flex:1;margin:0 auto}.loading{min-height:var(--size-loading-min);color:var(--color-text-secondary);font-size:var(--text-lg);justify-content:center;align-items:center;display:flex}.page{max-width:var(--max-width-page)}.page h1{font-size:var(--text-3xl);font-weight:700;line-height:var(--leading-tight);margin-bottom:var(--space-4)}.btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);border-radius:var(--border-radius);cursor:pointer;transition:background var(--transition-fast), box-shadow var(--transition-fast);border:1px solid #0000;font-weight:500;display:inline-flex}.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}@media (width<=768px){.app-nav{padding:0 var(--space-4)}.app-main{padding:var(--space-6) var(--space-4)}.page h1{font-size:var(--text-2xl)}}.app-nav-settings{font-size:var(--text-xl);color:var(--color-text-secondary);padding:var(--space-2);border-radius:var(--border-radius);transition:color var(--transition-fast), background var(--transition-fast);text-decoration:none}.app-nav-settings:hover{color:var(--color-text);background:var(--color-primary-light);text-decoration:none}.app-nav-settings.active{color:var(--color-primary)}.home-page .home-subtitle{font-size:var(--text-xl);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.home-features{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));display:grid}.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.feature-card h2{font-size:var(--text-lg);margin-bottom:var(--space-2);font-weight:600}.feature-card p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.health-page .health-actions{margin-bottom:var(--space-6)}.health-result{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-4);font-size:var(--text-sm);box-shadow:var(--shadow-sm);overflow-x:auto}.health-error{color:var(--color-error);background:var(--color-error-light);border:1px solid var(--color-error);border-radius:var(--border-radius);padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}.error-boundary{text-align:center;padding:var(--space-16) var(--space-6)}.error-boundary h1{font-size:var(--text-2xl);margin-bottom:var(--space-2)}.error-boundary p{color:var(--color-text-secondary);margin-bottom:var(--space-6)}.not-found-page{text-align:center;padding-top:var(--space-16)}.not-found-page p{color:var(--color-text-secondary);margin-bottom:var(--space-6)}.not-found-page a{font-weight:500}.dashboard-page{max-width:var(--max-width-page-wide)}.page-header{align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.page-header h1{margin-bottom:0}.last-updated{font-size:var(--text-sm);color:var(--color-text-secondary)}.dashboard-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));display:grid}.metric-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);gap:var(--space-2);flex-direction:column;display:flex}.metric-label{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:500}.metric-value{font-size:var(--text-2xl);color:var(--color-text);font-weight:700}.metric-success{color:var(--color-success)}.dashboard-empty{text-align:center;padding:var(--space-12) var(--space-6);color:var(--color-text-secondary)}.dashboard-empty .btn{margin-top:var(--space-4)}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:1}}.skeleton-card{pointer-events:none}.skeleton-line{background:var(--color-border);border-radius:var(--border-radius);animation:1.5s ease-in-out infinite skeleton-pulse;display:block}.skeleton-label{width:60%;height:.875rem}.skeleton-value{width:40%;height:1.75rem}.chart-section{margin-top:var(--space-8)}.chart-section h2{margin-bottom:var(--space-4)}.chart-section h2+h2{margin-top:var(--space-8)}.chart-area{background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--border-radius-lg);justify-content:center;align-items:center;min-height:16rem;display:flex}.chart-area-text{color:var(--color-text-secondary);font-size:var(--text-sm)}.settings-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm)}.settings-section h2{font-size:var(--text-lg);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);font-weight:600}.setting-row{padding:var(--space-3) 0;justify-content:space-between;align-items:center;display:flex}.setting-row+.setting-row{border-top:1px solid var(--color-border)}.setting-row label{font-size:var(--text-sm);color:var(--color-text);font-weight:500}.setting-row select{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--text-sm);background:var(--color-surface)}.setting-row input[type=checkbox]{width:var(--size-checkbox);height:var(--size-checkbox);accent-color:var(--color-primary)}.settings-actions{align-items:center;gap:var(--space-3);display:flex}.settings-saved{font-size:var(--text-sm);color:var(--color-success);font-weight:500}.health-widget{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--border-radius);font-size:var(--text-sm);margin-bottom:var(--space-6);font-weight:500;display:inline-flex}.health-widget-indicator{width:var(--size-indicator);height:var(--size-indicator);border-radius:50%}.health-healthy{background:var(--color-success-light,#f0fdf4);color:var(--color-success);border:1px solid var(--color-success)}.health-healthy .health-widget-indicator{background:var(--color-success)}.health-unhealthy{background:var(--color-error-light);color:var(--color-error);border:1px solid var(--color-error)}.health-unhealthy .health-widget-indicator{background:var(--color-error)}@media (width<=768px){.app-nav{padding:0 var(--space-4)}.app-main{padding:var(--space-6) var(--space-4)}.page h1{font-size:var(--text-2xl)}.page-header{gap:var(--space-1);flex-direction:column}.dashboard-grid{grid-template-columns:repeat(2,1fr)}.settings-actions{flex-direction:column;align-items:stretch}}.projects-page .projects-subtitle{font-size:var(--text-xl);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.projects-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));display:grid}.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);color:var(--color-text);transition:box-shadow var(--transition-fast), border-color var(--transition-fast);flex-direction:column;text-decoration:none;display:flex}.project-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary);text-decoration:none}.project-card-header{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.project-card h2{font-size:var(--text-lg);margin:0;font-weight:600}.project-card p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal);margin:0}.project-status{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);border-radius:var(--border-radius);white-space:nowrap;font-weight:600;line-height:1;display:inline-block}.status-coming-soon{background:var(--color-warning);color:var(--color-text-inverse)}.status-live{background:var(--color-success);color:var(--color-text-inverse)}.status-in-development{background:var(--color-primary);color:var(--color-text-inverse)}.breadcrumb{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6);display:flex}.breadcrumb a{color:var(--color-primary);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.project-hero{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);display:flex}.project-hero h1{margin-bottom:0}.project-detail-page section{margin-bottom:var(--space-8)}.project-detail-page h2{font-size:var(--text-xl);margin-bottom:var(--space-3);font-weight:600}.project-detail-page ul{padding-left:var(--space-6);gap:var(--space-2);flex-direction:column;display:flex}.project-detail-page li{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.tech-tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.tech-tag{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);background:var(--color-primary-light);color:var(--color-primary);border-radius:var(--border-radius);font-weight:500;display:inline-block}