:root{--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-danger: #ef4444;--color-danger-bg: rgba(239, 68, 68, .1);--color-success: #22c55e;--color-bg: #0f172a;--color-surface: #1e293b;--color-surface-2: #334155;--color-border: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-white: #fff;--font-family: "Inter", system-ui, -apple-system, sans-serif;--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: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-base: 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;--space-20: 5rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--border-width: 1px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--navbar-height: 56px;--sidebar-width: 220px;--content-max-width: 1200px;--form-max-width: 420px;--hero-subtitle-max-width: 560px;--detail-panel-width: 280px;--zindex-navbar: 100;--letter-spacing-wide: .08em;--transition-fast: .15s;--hover-opacity: .85}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-base);background-color:var(--color-bg);color:var(--color-text)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.auth-page{min-height:calc(100vh - var(--navbar-height));display:flex;align-items:center;justify-content:center;padding:var(--space-6)}.auth-card{width:100%;max-width:var(--form-max-width);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-10);box-shadow:var(--shadow-md)}@media(max-width:600px){.auth-card{padding:var(--space-6)}}.auth-card .title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-8);color:var(--color-text)}.auth-card .form{display:flex;flex-direction:column;gap:var(--space-5)}.auth-card .error{padding:var(--space-3) var(--space-4);background-color:var(--color-danger-bg);border:var(--border-width) solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm)}.auth-card .submit{width:100%;padding:var(--space-3) var(--space-4);background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);font-family:var(--font-family);cursor:pointer;transition:background-color var(--transition-fast);margin-top:var(--space-2)}.auth-card .submit:hover{background-color:var(--color-primary-hover)}.auth-card .submit:disabled{opacity:.6;cursor:not-allowed}.auth-card .success{padding:var(--space-3) var(--space-4);background-color:#22c55e1a;border:var(--border-width) solid #22c55e;border-radius:var(--radius-md);color:#22c55e;font-size:var(--font-size-sm)}.auth-card .footer{margin:var(--space-6) 0 0;text-align:center;font-size:var(--font-size-sm);color:var(--color-text-muted)}.auth-card .link-btn{background:none;border:none;padding:0;color:var(--color-primary);font-size:var(--font-size-sm);font-family:var(--font-family);cursor:pointer;text-decoration:underline}.auth-card .link-btn:hover{opacity:var(--hover-opacity)}.form-field{display:flex;flex-direction:column;gap:var(--space-2)}.form-field .label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.form-field .input{width:100%;padding:var(--space-3) var(--space-4);background-color:var(--color-surface-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-base);font-family:var(--font-family);box-sizing:border-box;transition:border-color var(--transition-fast)}.form-field .input::placeholder{color:var(--color-text-muted);opacity:var(--hover-opacity)}.form-field .input:focus{outline:none;border-color:var(--color-primary)}
