#app{min-height:100vh;display:flex;flex-direction:column}main{flex:1;min-height:100vh}:root{--primary-blue: #1e90ff;--primary-blue-hover: #1873cc;--primary-blue-light: #e3f2fd;--primary-blue-dark: #0c5aa6;--white: #ffffff;--gray-50: #f8f9fa;--gray-100: #f5f7fa;--gray-200: #e9ecef;--gray-300: #dee2e6;--gray-400: #ced4da;--gray-500: #adb5bd;--gray-600: #6c757d;--gray-700: #495057;--gray-800: #343a40;--gray-900: #212529;--card-bg: #ffffff;--card-shadow: 0 2px 12px rgba(30, 144, 255, .12);--card-shadow-hover: 0 6px 20px rgba(30, 144, 255, .2);--border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--border-color: #cfe2f3;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--success: #28a745;--danger: #dc3545;--warning: #ffc107;--info: #17a2b8;--primary-color: var(--primary-blue);--primary-hover: var(--primary-blue-hover);--primary-light: var(--primary-blue-light);--secondary-color: #0ea5e9;--accent: #06b6d4;--success-color: var(--success);--danger-color: var(--danger);--warning-color: var(--warning);--info-color: var(--info);--light-color: var(--gray-50);--dark-color: var(--gray-900);--text: var(--gray-900);--text-light: var(--gray-600);--text-muted: var(--gray-500)}*,*:before,*:after{box-sizing:border-box}html,body,#app{height:100%;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;background:linear-gradient(135deg,#f5f9ff,#e3f2fd);color:var(--gray-900);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--gray-200)}::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2;color:var(--gray-900)}p{margin:0}a{color:var(--primary-blue);text-decoration:none;transition:color .2s}a:hover{color:var(--primary-blue-hover)}button{font-family:inherit;cursor:pointer;transition:all .2s}button:disabled{cursor:not-allowed;opacity:.6}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.card{background:var(--card-bg);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--card-shadow);border:1px solid var(--border-color)}.card:hover{box-shadow:var(--card-shadow-hover)}.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--border-radius-sm);border:none;font-size:var(--font-size-base);font-weight:600;text-align:center;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary-blue);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-blue-hover);transform:translateY(-2px);box-shadow:0 8px 16px #1e90ff66}.btn-secondary{background:var(--gray-600);color:#fff}.btn-secondary:hover:not(:disabled){background:var(--gray-700)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#c82333}.spinner{width:48px;height:48px;border:4px solid var(--gray-200);border-top-color:var(--primary-blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){:root{--spacing-lg: 1rem;--spacing-xl: 1.5rem}.container{padding:0 var(--spacing-md)}}