:root{--color-primary: #0f172a;--color-primary-light: #1e3a5f;--color-secondary: #334155;--color-accent: #d97706;--color-accent-light: #fbbf24;--color-text: #0f172a;--color-text-muted: #64748b;--color-text-light: #94a3b8;--color-bg: #ffffff;--color-bg-alt: #f8fafc;--color-bg-dark: #0f172a;--color-border: #e2e8f0;--color-border-dark: #cbd5e1;--color-success: #22c55e;--color-error: #dc2626;--color-warning: #f59e0b;--font-display: "DM Sans", system-ui, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", 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;--text-4xl: 2.5rem;--text-5xl: 3rem;--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;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}*,*:before,*:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;color:var(--color-text);background-color:var(--color-bg-alt);min-height:100vh}.skip-link{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--color-primary);color:#fff;padding:var(--space-3) var(--space-6);border-radius:0 0 var(--radius-md) var(--radius-md);z-index:10000;font-weight:600;text-decoration:none;transition:top var(--transition-base)}.skip-link:focus{top:0;outline:2px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-page{width:100%;padding:var(--space-4);min-height:100vh}@media(min-width:768px){.app-page{max-width:800px;margin:0 auto;padding:var(--space-5)}}@media(min-width:1024px){.app-page{max-width:1000px;padding:var(--space-6)}}@media(min-width:1280px){.app-page{max-width:1400px}}@media(min-width:1536px){.app-page{max-width:1600px}}.page-header{margin-bottom:var(--space-3)}.page-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3)}.page-title{color:var(--color-text);font-size:var(--text-xl);font-family:var(--font-display);font-weight:700;margin:0}.page-subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}.search-row{display:flex;gap:var(--space-2)}.search-field{flex:1;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--space-3);width:18px;height:18px;color:var(--color-text-light);pointer-events:none}.search-input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 26px);font-size:var(--text-sm);font-family:var(--font-body);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #d977061a}.search-input::placeholder{color:var(--color-text-light)}.search-clear{position:absolute;right:var(--space-2);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-light);cursor:pointer;border-radius:var(--radius-full);transition:background var(--transition-fast),color var(--transition-fast)}.search-clear:hover{background:var(--color-bg-alt);color:var(--color-text)}.search-clear svg{width:16px;height:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;font-family:var(--font-body);border:none;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--transition-fast),opacity var(--transition-fast)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn svg{width:18px;height:18px}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){background:#b45309}.btn-secondary{background:var(--color-bg-alt);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-ghost{background:transparent;color:var(--color-text-muted)}.btn-ghost:hover:not(:disabled){background:var(--color-bg-alt);color:var(--color-text)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.btn-sm svg{width:16px;height:16px}.alert{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm);font-weight:500;border:1px solid transparent}.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}.alert-error{background:#fef2f2;border-color:#fecaca;color:var(--color-error)}.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:var(--color-success)}.alert-warning{background:#fef3c7;border-color:#fcd34d;color:#92400e}.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.empty-state{text-align:center;padding:var(--space-12) var(--space-4)}.empty-icon{width:64px;height:64px;margin:0 auto var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.empty-icon svg{width:32px;height:32px;color:var(--color-text-light)}.empty-state h2{color:var(--color-text);font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-2) 0}.empty-state p{color:var(--color-text-muted);font-size:var(--text-base);margin:0 0 var(--space-4) 0}.empty-hint{color:var(--color-text-light);font-size:var(--text-sm)}.toolbar{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.toolbar-spacer{flex:1}.result-count{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.filter-toggle{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.filter-toggle:hover{border-color:var(--color-text-light)}.filter-toggle.active{background:#d977061a;border-color:var(--color-accent);color:var(--color-accent)}.filter-toggle svg{width:18px;height:18px}.filter-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--color-accent);color:#fff;border-radius:var(--radius-full);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.filter-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;font-family:var(--font-body);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}.filter-btn:hover{border-color:var(--color-text-light)}.filter-btn.active{background:#d977061a;border-color:var(--color-accent);color:var(--color-accent)}.filter-btn svg{width:16px;height:16px}.filter-count{background:var(--color-accent);color:#fff;border-radius:var(--radius-full);padding:2px 6px;font-size:10px;font-weight:600}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6) var(--space-4)}.page-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;color:var(--color-text);transition:all var(--transition-fast)}.page-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn svg{width:20px;height:20px}.page-info{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:100;animation:fadeIn .15s ease-out}.modal{background:var(--color-bg);border-radius:var(--radius-xl);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp .2s ease-out}.modal-sm{max-width:380px}.modal-lg{max-width:600px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--color-border)}.modal-header h2{color:var(--color-text);font-size:var(--text-lg);font-family:var(--font-display);font-weight:600;margin:0}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-light);cursor:pointer;transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-bg-alt);color:var(--color-text)}.modal-close svg{width:20px;height:20px}.modal-body{padding:var(--space-5)}.modal-actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-5);padding-top:0}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-text);margin-bottom:var(--space-2)}.form-input,.form-select{width:100%;padding:var(--space-3);font-size:var(--text-sm);font-family:var(--font-body);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-input:focus,.form-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #d977061a}.form-input::placeholder{color:var(--color-text-light)}.form-hint{font-size:var(--text-xs);color:var(--color-text-light);margin-top:var(--space-1)}.form-error{font-size:var(--text-xs);color:var(--color-error);margin-top:var(--space-1)}.card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.card-header{padding:var(--space-4);border-bottom:1px solid var(--color-border)}.card-body{padding:var(--space-4)}.section-card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);margin-bottom:var(--space-4);animation:slideUp .4s ease-out both}.section-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--color-border)}.section-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.section-icon svg{width:20px;height:20px}.section-header h2{color:var(--color-text);font-size:var(--text-base);font-weight:600;margin:0}.section-body{padding:var(--space-4)}.loading-spinner{width:20px;height:20px;border:2px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner-lg{width:32px;height:32px;border-width:3px}.loading-dot{display:inline-block;width:8px;height:8px;background:var(--color-accent);border-radius:var(--radius-full);animation:pulse 1s infinite}.page-loading{position:relative;pointer-events:none}.page-loading:after{content:"";position:absolute;inset:0;background:#fff9;z-index:10}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:inherit}.btn.loading{pointer-events:none;opacity:.7}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn .2s ease-out}.animate-slide-up{animation:slideUp .3s ease-out}.animate-slide-down{animation:slideDown .2s ease-out}