*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #007bff;--color-primary-hover: #0056b3;--color-secondary: #6c757d;--color-success: #28a745;--color-danger: #dc3545;--color-warning: #ffc107;--color-info: #17a2b8;--color-bg: #ffffff;--color-bg-secondary: #f8f9fa;--color-border: #dee2e6;--color-text: #212529;--color-text-muted: #6c757d;--sidebar-width: 240px;--header-height: 64px;--footer-height: 48px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--border-radius: 4px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}body{font-family:var(--font-family);font-size:16px;line-height:1.5;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-bottom:var(--spacing-md);font-weight:600;line-height:1.2}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.layout{display:flex;flex-direction:column;min-height:100vh}.header{height:var(--header-height);background-color:var(--color-primary);color:#fff;display:flex;align-items:center;padding:0 var(--spacing-lg);box-shadow:0 2px 4px #0000001a}.header h1{margin:0;font-size:1.5rem}.container{display:flex;flex:1}.sidebar{width:var(--sidebar-width);background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);padding:var(--spacing-lg) 0}.nav-list{list-style:none}.nav-list li{margin-bottom:var(--spacing-xs)}.nav-list a{display:block;padding:var(--spacing-sm) var(--spacing-lg);color:var(--color-text);text-decoration:none;transition:background-color .2s}.nav-list a:hover{background-color:#0000000d;text-decoration:none}.nav-list a.active{background-color:var(--color-primary);color:#fff;font-weight:600}.main-content{flex:1;padding:var(--spacing-lg);overflow-y:auto}.footer{height:var(--footer-height);background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.875rem}.page{max-width:1200px;margin:0 auto}.form{max-width:800px}.form-group{margin-bottom:var(--spacing-md)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--color-text)}.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group textarea,.form-group select{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--border-radius);font-family:var(--font-family);font-size:1rem}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff1a}.form-section{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.form-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.form-section h3{margin:0}.form-actions{margin-top:var(--spacing-xl);display:flex;gap:var(--spacing-md)}.list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.list-item{display:flex;gap:var(--spacing-sm);align-items:center;padding:var(--spacing-sm);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--border-radius)}.list-item input,.list-item select{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--border-radius)}.list-item input:first-child{flex:2}button,.btn-primary,.btn-secondary,.btn-danger{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);font-family:var(--font-family);font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s,opacity .2s}button:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-secondary);color:#fff}.btn-secondary:hover:not(:disabled){background-color:#5a6268}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#c82333}.toast{padding:var(--spacing-md);border-radius:var(--border-radius);margin-bottom:var(--spacing-md)}.toast.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.toast.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.toast.warning{background-color:#fff3cd;color:#856404;border:1px solid #ffeaa7}.toast.info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.loading{color:var(--color-text-muted);font-style:italic}.error{color:var(--color-danger)}.empty-state{color:var(--color-text-muted);font-style:italic;padding:var(--spacing-lg);text-align:center;background-color:var(--color-bg-secondary);border:1px dashed var(--color-border);border-radius:var(--border-radius)}@media(max-width:768px){.container{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border)}.nav-list{display:flex;flex-wrap:wrap}.nav-list li{margin:0}.nav-list a{padding:var(--spacing-sm) var(--spacing-md)}.form-row{grid-template-columns:1fr}.main-content{padding:var(--spacing-md)}}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mt-5{margin-top:var(--spacing-xl)}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.mb-5{margin-bottom:var(--spacing-xl)}:root{--color-primary: #007bff;--color-primary-hover: #0056b3;--color-secondary: #6c757d;--color-success: #28a745;--color-danger: #dc3545;--color-warning: #ffc107;--color-info: #17a2b8;--color-bg: #ffffff;--color-bg-secondary: #f8f9fa;--color-bg-tertiary: #e9ecef;--color-border: #dee2e6;--color-text: #212529;--color-text-muted: #6c757d;--color-text-inverse: #ffffff;--color-shadow: rgba(0, 0, 0, .1);--color-overlay: rgba(0, 0, 0, .5);--sidebar-width: 240px;--header-height: 64px;--footer-height: 48px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--border-radius: 4px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--transition-speed: .2s}[data-theme=dark]{--color-bg: #1a1a1a;--color-bg-secondary: #2d2d2d;--color-bg-tertiary: #3d3d3d;--color-border: #404040;--color-text: #e9ecef;--color-text-muted: #adb5bd;--color-text-inverse: #212529;--color-shadow: rgba(0, 0, 0, .3);--color-overlay: rgba(0, 0, 0, .7);--color-primary: #4a9eff;--color-primary-hover: #6bb1ff;--color-success: #40c463;--color-danger: #f85149;--color-warning: #d29922;--color-info: #58a6ff}body,.layout,.header,.sidebar,.main-content,.footer,.nav-list a,.form-group input,.form-group textarea,.form-group select,button,.btn-primary,.btn-secondary,.btn-danger{transition:background-color var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed)}.theme-toggle{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius);color:var(--color-text);cursor:pointer;font-size:14px;transition:all var(--transition-speed)}.theme-toggle:hover{background-color:var(--color-bg-secondary);border-color:var(--color-primary)}.theme-toggle-icon{font-size:18px;display:flex;align-items:center}[data-theme=dark] .nav-list a:hover{background-color:#ffffff1a}[data-theme=dark] .nav-list a.active{background-color:var(--color-primary);color:var(--color-text-inverse)}[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select{background-color:var(--color-bg-secondary);color:var(--color-text);border-color:var(--color-border)}[data-theme=dark] input:focus,[data-theme=dark] textarea:focus,[data-theme=dark] select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4a9eff33}.header{display:flex;justify-content:space-between;align-items:center}.header-left,.header-right{display:flex;align-items:center;gap:var(--spacing-md)}
