:root{--color-primary-400: #4da3ff;--color-primary-500: #007bff;--color-primary-600: #0069d9;--color-primary-700: #0056b3;--color-neutral-0: #ffffff;--color-neutral-50: #f8f9fa;--color-neutral-100: #f1f3f5;--color-neutral-150: #eef1f4;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #34495e;--color-neutral-900: #2c3e50;--color-success-50: #d4edda;--color-success-100: #c3e6cb;--color-success-500: #28a745;--color-success-700: #155724;--color-error-50: #f8d7da;--color-error-100: #f5c6cb;--color-error-500: #dc3545;--color-error-700: #721c24;--bg-page: var(--color-neutral-150);--bg-surface: var(--color-neutral-0);--bg-surface-secondary: var(--color-neutral-50);--bg-surface-tertiary: var(--color-neutral-100);--bg-surface-hover: var(--color-neutral-50);--text-primary: var(--color-neutral-900);--text-secondary: var(--color-neutral-700);--text-muted: var(--color-neutral-600);--text-placeholder: var(--color-neutral-500);--text-inverse: var(--color-neutral-0);--border-default: var(--color-neutral-400);--border-light: var(--color-neutral-200);--border-focus: var(--color-primary-500);--interactive-primary: var(--color-primary-500);--interactive-primary-hover: var(--color-primary-700);--interactive-secondary: var(--color-neutral-600);--interactive-secondary-hover: var(--color-neutral-700);--focus-ring: rgba(0, 123, 255, .25);--status-success-bg: var(--color-success-50);--status-success-border: var(--color-success-100);--status-success-text: var(--color-success-700);--status-error-bg: var(--color-error-50);--status-error-border: var(--color-error-100);--status-error-text: var(--color-error-700);--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;--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.75rem;--font-size-4xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .1);--shadow-xl: 0 12px 30px rgba(0, 0, 0, .12);--transition-fast: .1s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--container-max-width: 600px;--header-height: 60px;--breakpoint-mobile: 768px;color-scheme:light}[data-theme=dark]{--bg-page: #0f0f0f;--bg-surface: #1a1a1a;--bg-surface-secondary: #222222;--bg-surface-tertiary: #2a2a2a;--bg-surface-hover: #2a2a2a;--text-primary: #f0f0f0;--text-secondary: #b8b8b8;--text-muted: #888888;--text-placeholder: #666666;--text-inverse: #0f0f0f;--border-default: #404040;--border-light: #333333;--border-focus: #4da3ff;--interactive-primary: #4da3ff;--interactive-primary-hover: #7dbfff;--interactive-secondary: #888888;--interactive-secondary-hover: #a0a0a0;--focus-ring: rgba(77, 163, 255, .35);--status-success-bg: #1a2e1f;--status-success-border: #2d4a35;--status-success-text: #7dd28d;--status-error-bg: #2e1a1a;--status-error-border: #4a2d2d;--status-error-text: #f5a0a0;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 4px rgba(0, 0, 0, .4);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 30px rgba(0, 0, 0, .6);color-scheme:dark}.heading-1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);color:var(--text-primary);margin:0}.heading-2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);color:var(--text-primary);margin:0}.heading-3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--text-primary);margin:0}.heading-4{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--text-primary);margin:0}.body-text{font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--text-secondary)}.body-text--small{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--text-secondary)}.body-text--large{font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--text-secondary)}.caption{font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--text-muted)}.label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--text-primary)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-success{color:var(--status-success-text)}.text-error{color:var(--status-error-text)}.text-link{color:var(--interactive-primary)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.mono{font-family:var(--font-family-mono)}.container{max-width:var(--container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.container--wide{max-width:800px}.container--narrow{max-width:400px}.card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-6)}.card--flat{box-shadow:none;border:1px solid var(--border-light)}.card--interactive{transition:box-shadow var(--transition-base),transform var(--transition-base);cursor:pointer}.card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.surface{background:var(--bg-surface)}.surface--secondary{background:var(--bg-surface-secondary)}.surface--tertiary{background:var(--bg-surface-tertiary)}.divider{height:1px;background:var(--border-light);border:none;margin:var(--spacing-4) 0}.divider--thick{height:2px}.mt-0{margin-top:var(--spacing-0)}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-6{margin-top:var(--spacing-6)}.mt-8{margin-top:var(--spacing-8)}.mb-0{margin-bottom:var(--spacing-0)}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.mb-6{margin-bottom:var(--spacing-6)}.mb-8{margin-bottom:var(--spacing-8)}.py-2{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.py-4{padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}.py-6{padding-top:var(--spacing-6);padding-bottom:var(--spacing-6)}.px-2{padding-left:var(--spacing-2);padding-right:var(--spacing-2)}.px-4{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.px-6{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-6{gap:var(--spacing-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.container{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}.card{padding:var(--spacing-4);border-radius:var(--radius-md)}.hide-mobile{display:none}}@media(min-width:769px){.hide-desktop{display:none}}.form-field{display:flex;flex-direction:column;gap:var(--spacing-2)}.form-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);line-height:var(--line-height-normal)}.form-label--required:after{content:" *";color:var(--status-error-text)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--spacing-3);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--transition-base),box-shadow var(--transition-base);box-sizing:border-box}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-placeholder)}.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--text-muted)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.form-input:disabled,.form-select:disabled,.form-textarea:disabled{background-color:var(--bg-surface-secondary);color:var(--text-muted);cursor:not-allowed;opacity:.7}.form-input--sm{padding:var(--spacing-2);font-size:var(--font-size-sm)}.form-input--lg{padding:var(--spacing-4);font-size:var(--font-size-lg)}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--spacing-3) center;background-repeat:no-repeat;background-size:1.25rem 1.25rem;padding-right:var(--spacing-10);cursor:pointer}.form-textarea{min-height:100px;resize:vertical}.form-hint{font-size:var(--font-size-xs);color:var(--text-muted);font-style:italic;margin-top:calc(var(--spacing-1) * -1)}.form-input--error,.form-select--error,.form-textarea--error{border-color:var(--status-error-text)}.form-input--error:focus,.form-select--error:focus,.form-textarea--error:focus{box-shadow:0 0 0 3px #dc354540}.form-error{font-size:var(--font-size-xs);color:var(--status-error-text)}.form-input--success,.form-select--success{border-color:var(--color-success-500)}.form-group{display:flex;gap:var(--spacing-4)}.form-group>.form-field{flex:1}.form-actions{display:flex;gap:var(--spacing-3);margin-top:var(--spacing-4)}.form-actions--right{justify-content:flex-end}.form-actions--center{justify-content:center}.message{padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.message--success{background-color:var(--status-success-bg);border:1px solid var(--status-success-border);color:var(--status-success-text)}.message--error{background-color:var(--status-error-bg);border:1px solid var(--status-error-border);color:var(--status-error-text)}@media(max-width:768px){.form-group{flex-direction:column;gap:var(--spacing-3)}.form-actions{flex-direction:column}.form-actions>*{width:100%}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);text-decoration:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base),box-shadow var(--transition-base);white-space:nowrap}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn--primary{background-color:var(--interactive-primary);border-color:var(--interactive-primary);color:var(--text-inverse)}.btn--primary:hover:not(:disabled){background-color:var(--interactive-primary-hover);border-color:var(--interactive-primary-hover)}.btn--primary:active:not(:disabled){background-color:var(--color-primary-700)}.btn--secondary{background-color:var(--interactive-secondary);border-color:var(--interactive-secondary);color:var(--text-inverse)}.btn--secondary:hover:not(:disabled){background-color:var(--interactive-secondary-hover);border-color:var(--interactive-secondary-hover)}.btn--outline{background-color:transparent;border-color:var(--border-default);color:var(--text-secondary)}.btn--outline:hover:not(:disabled){border-color:var(--interactive-primary);color:var(--interactive-primary)}.btn--ghost{background-color:transparent;border-color:transparent;color:var(--text-secondary)}.btn--ghost:hover:not(:disabled){background-color:var(--bg-surface-hover);color:var(--text-primary)}.btn--danger{background-color:var(--color-error-500);border-color:var(--color-error-500);color:var(--text-inverse)}.btn--danger:hover:not(:disabled){background-color:var(--status-error-text);border-color:var(--status-error-text)}.btn--sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn--lg{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-lg)}.btn--block{width:100%}.btn--icon{padding:var(--spacing-2);width:40px;height:40px}.btn--icon.btn--sm{width:32px;height:32px}.btn--icon.btn--lg{width:48px;height:48px}.btn--loading{position:relative;color:transparent;pointer-events:none}.btn--loading:after{content:"";position:absolute;width:1rem;height:1rem;top:50%;left:50%;margin-left:-.5rem;margin-top:-.5rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btn-spinner .6s linear infinite}.btn--primary.btn--loading:after,.btn--secondary.btn--loading:after,.btn--danger.btn--loading:after{border-color:var(--text-inverse);border-top-color:transparent}@keyframes btn-spinner{to{transform:rotate(360deg)}}.btn-group{display:inline-flex}.btn-group>.btn{border-radius:0}.btn-group>.btn:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.btn-group>.btn:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.btn-group>.btn:not(:first-child){margin-left:-1px}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background-color:var(--bg-page);transition:background-color var(--transition-base),color var(--transition-base)}a{color:var(--interactive-primary);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--interactive-primary-hover);text-decoration:underline}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}button:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::selection{background-color:var(--interactive-primary);color:var(--text-inverse)}
