:root{--color-brand-blue:#4338ca;--color-brand-indigo:#6366f1;--color-brand-purple:#7c3aed;--color-brand-pink:#ec4899;--color-brand-rose:#f43f5e;--color-brand-cyan:#06b6d4;--color-brand-orange:#ff5722;--color-text-primary:#0f172a;--color-text-body:#1e293b;--color-text-secondary:#fff;--color-text-tertiary:#cbd5e1;--color-text-muted:#64748b;--color-text-inverse:#fff;--color-surface-base:#fff;--color-surface-muted:#f8fafc;--color-surface-card:#fff;--color-surface-strong:#4338ca;--color-surface-strong-hover:#3730a3;--color-surface-accent:#f43f5e;--color-surface-accent-hover:#e11d48;--color-surface-subtle:#eef2ff;--color-border-default:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-focus:#6366f1;--color-focus-ring:#818cf8;--color-success-bg:#ecfdf5;--color-success-border:#a7f3d0;--color-success-text:#047857;--color-success-solid:#10b981;--color-warning-bg:#fffbeb;--color-warning-border:#fde68a;--color-warning-text:#b45309;--color-error-bg:#fff1f2;--color-error-border:#fecdd3;--color-error-text:#e11d48;--color-error-solid:#f43f5e;--font-family-base:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs:13px;--font-size-sm:13.3333px;--font-size-md:14px;--font-size-lg:15px;--font-size-xl:16px;--font-size-2xl:24px;--font-size-3xl:40px;--font-size-4xl:50px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--space-1:1px;--space-2:2px;--space-3:3px;--space-4:4px;--space-5:5px;--space-6:6px;--space-7:8px;--space-8:10px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--radius-xs:6px;--radius-sm:8px;--radius-md:999px;--radius-card:10px;--radius-modal:14px;--shadow-1:0 4px 16px #0f172a1f;--shadow-card:0 4px 12px #0f172a0d;--shadow-card-hover:0 12px 28px #6366f12e;--shadow-modal:0 24px 48px #0f172a47, 0 8px 16px #6366f126;--motion-duration-instant:.1s;--motion-duration-fast:.2s;--motion-duration-normal:.3s;--motion-ease:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-base);font-size:var(--font-size-md);color:var(--color-text-primary);background-color:var(--color-surface-muted);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}:focus{outline:none}:focus-visible{border-radius:var(--radius-xs);outline:3px solid var(--color-focus-ring)!important;outline-offset:2px!important}.skip-link{background:var(--color-surface-strong);color:var(--color-text-secondary);padding:var(--space-8) var(--space-16);z-index:9999;border-radius:var(--radius-xs);transition:top var(--motion-duration-fast) var(--motion-ease);font-weight:var(--font-weight-semibold);text-decoration:none;position:absolute;top:-100px;left:16px}.skip-link:focus{top:16px}a{color:var(--color-surface-strong);transition:color var(--motion-duration-fast) var(--motion-ease);text-decoration:none}a:hover{color:var(--color-surface-accent);text-decoration:underline}.input-group{gap:var(--space-6);margin-bottom:var(--space-16);flex-direction:column;display:flex}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);justify-content:space-between;align-items:center;display:flex}.input-field-wrapper{align-items:center;display:flex;position:relative}.input-icon-left{color:var(--color-text-muted);pointer-events:none;display:flex;position:absolute;left:12px}.input-icon-right{color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-xs);background:0 0;border:none;padding:4px;display:flex;position:absolute;right:12px}.input-icon-right:hover{color:var(--color-text-primary)}.input-field{width:100%;height:42px;padding:0 var(--space-12);font-family:var(--font-family-base);font-size:var(--font-size-md);color:var(--color-text-primary);background-color:var(--color-surface-base);border:1px solid var(--color-border-default);border-radius:var(--radius-xs);transition:border-color var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease)}.input-field.has-icon-left{padding-left:38px}.input-field.has-icon-right{padding-right:38px}.input-field:hover:not(:disabled):not(.error){border-color:var(--color-border-strong)}.input-field:focus{border-color:var(--color-border-focus)}.input-field:disabled{background-color:var(--color-surface-muted);color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.input-field.error{border-color:var(--color-error-solid);background-color:var(--color-error-bg)}.input-error-msg{font-size:var(--font-size-xs);color:var(--color-error-text);margin-top:var(--space-4);align-items:center;gap:var(--space-4);display:flex}.input-hint-msg{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-4)}.btn{justify-content:center;align-items:center;gap:var(--space-8);height:42px;padding:0 var(--space-20);font-family:var(--font-family-base);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);border-radius:var(--radius-xs);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--motion-duration-fast) var(--motion-ease);white-space:nowrap;border:1px solid #0000;display:inline-flex}.btn-sm{height:34px;padding:0 var(--space-12);font-size:var(--font-size-sm)}.btn-lg{height:48px;padding:0 var(--space-24);font-size:var(--font-size-lg)}.btn-pill{border-radius:var(--radius-md)}.btn-primary{background-color:var(--color-surface-strong);color:var(--color-text-secondary);border-color:var(--color-surface-strong)}.btn-primary:hover:not(:disabled){background-color:var(--color-surface-strong-hover);border-color:var(--color-surface-strong-hover);box-shadow:var(--shadow-1)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-accent{background-color:var(--color-surface-accent);color:var(--color-text-secondary);border-color:var(--color-surface-accent)}.btn-accent:hover:not(:disabled){background-color:var(--color-surface-accent-hover);border-color:var(--color-surface-accent-hover)}.btn-secondary{background-color:var(--color-surface-base);color:var(--color-text-primary);border-color:var(--color-border-default)}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-subtle);border-color:var(--color-border-strong)}.btn-ghost{color:var(--color-text-primary);background-color:#0000}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface-muted)}.btn:disabled,.btn.is-disabled{opacity:.6;cursor:not-allowed;box-shadow:none;pointer-events:none}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;padding:var(--space-16);animation:fadeIn var(--motion-duration-fast) ease-out;background-color:#121212a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog{background:var(--color-surface-base);border-radius:var(--radius-modal);box-shadow:var(--shadow-modal);width:100%;max-width:480px;max-height:90vh;animation:slideUp var(--motion-duration-fast) ease-out;position:relative;overflow-y:auto}.modal-dialog.modal-lg{max-width:800px}.modal-header{padding:var(--space-20) var(--space-24);border-bottom:1px solid var(--color-border-default);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-surface-strong)}.modal-close-btn{color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-xs);transition:background var(--motion-duration-fast);background:0 0;border:none;padding:6px;display:flex}.modal-close-btn:hover{background:var(--color-surface-muted);color:var(--color-text-primary)}.modal-body{padding:var(--space-24)}.modal-footer{padding:var(--space-16) var(--space-24);border-top:1px solid var(--color-border-default);justify-content:flex-end;gap:var(--space-12);background:var(--color-surface-muted);border-bottom-left-radius:var(--radius-modal);border-bottom-right-radius:var(--radius-modal);display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:18px;height:18px;animation:.65s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-xs);white-space:nowrap;align-items:center;gap:4px;padding:2px 8px;display:inline-flex}.badge-strong{background-color:var(--color-surface-strong);color:var(--color-text-secondary)}.badge-success{background-color:var(--color-success-bg);color:var(--color-success-text);border:1px solid var(--color-success-border)}.badge-warning{background-color:var(--color-warning-bg);color:var(--color-warning-text);border:1px solid var(--color-warning-border)}.badge-accent{background-color:var(--color-surface-subtle);color:var(--color-surface-accent);border:1px solid var(--color-border-default)}
