:root{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-background: #f8fafc;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1e293b;--color-text-muted: #64748b;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-success: #22c55e;--color-warning: #f59e0b;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--font-family: system-ui, -apple-system, sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 600;--line-height: 1.5;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--border: 1px solid var(--color-border);--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.12);--shadow-lg: 0 8px 24px rgba(0,0,0,.16);--transition-fast: .12s ease;--transition-normal: .22s ease;--transition-slow: .35s ease}@media (prefers-color-scheme: dark){:root{--color-background: #0f172a;--color-surface: #1e293b;--color-border: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);background:var(--color-background);line-height:var(--line-height);-webkit-font-smoothing:antialiased}h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-lg)}h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--space-md)}h3{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);margin-bottom:var(--space-sm)}input,select,textarea{width:100%;padding:var(--space-sm) var(--space-md);border:var(--border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-family:var(--font-family);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);font-family:var(--font-family);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-primary:active{transform:translateY(0)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:var(--color-danger-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:var(--border)}.btn-secondary:hover{background:var(--color-background)}table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}th{background:var(--color-background);padding:var(--space-sm) var(--space-md);text-align:left;font-weight:var(--font-weight-medium);color:var(--color-text-muted);border-bottom:2px solid var(--color-border);white-space:nowrap}td{padding:var(--space-sm) var(--space-md);border-bottom:var(--border)}tr:hover td{background:color-mix(in srgb,var(--color-primary) 5%,transparent);transition:background var(--transition-fast)}.card{background:var(--color-surface);border:var(--border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal)}.card:hover{box-shadow:var(--shadow-md)}.nav-item{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);text-decoration:none;color:var(--color-text);display:block}.nav-item:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.nav-item.active{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);font-weight:var(--font-weight-medium)}.view{padding:var(--space-lg)}.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.error{color:var(--color-danger);padding:var(--space-md)}html,body,#app{height:100%;margin:0}#app{display:flex;min-height:0}.app-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md, 12px);padding:var(--space-sm, 8px) var(--space-md, 12px);border-bottom:1px solid var(--color-border, #ddd);background:var(--color-surface, #fafafa)}.app-topbar-brand{font-weight:600}.app-topbar-nav{display:flex;gap:var(--space-md, 12px)}.app-topbar-nav a{color:inherit}.app-topbar-user{margin-left:auto;font-size:.9rem;opacity:.9}#app-main{flex:1;min-height:0;display:flex;flex-direction:column}