:root{--basis-light-background: #fdfefe;--basis-light-surface: #ffffff;--basis-light-surfaceRaised: #f6f8fb;--basis-light-surfaceMuted: #eef2f7;--basis-light-border: #dce3ef;--basis-light-borderSubtle: #edf1f8;--basis-light-borderStrong: #c5cfdd;--basis-light-text: #0f172a;--basis-light-textSecondary: #4b5563;--basis-light-textMuted: #6b7280;--basis-light-primary: #1d4ed8;--basis-light-primaryHover: #1a43c2;--basis-light-primaryActive: #1639ab;--basis-light-primaryContrast: #ffffff;--basis-light-primarySoft: rgba(29, 78, 216, .08);--basis-light-primarySoftHover: rgba(29, 78, 216, .12);--basis-light-primarySoftActive: rgba(29, 78, 216, .18);--basis-light-primarySoftBorder: #d1ddf7;--basis-light-secondary: rgba(148, 163, 184, .06);--basis-light-secondaryHover: rgba(148, 163, 184, .1);--basis-light-secondaryActive: rgba(148, 163, 184, .14);--basis-light-secondarySolid: #cbd5e1;--basis-light-secondarySolidHover: #bec9d6;--basis-light-secondarySolidActive: #b0bccd;--basis-light-tertiary: rgba(100, 116, 139, .08);--basis-light-tertiaryHover: rgba(100, 116, 139, .12);--basis-light-tertiaryActive: rgba(100, 116, 139, .18);--basis-light-tertiarySolid: #dce3ef;--basis-light-tertiarySolidHover: #cfd7e6;--basis-light-tertiarySolidActive: #c1cadb;--basis-light-focusRing: rgba(29, 78, 216, .3);--basis-light-selectCaret: #0f172a;--basis-light-success: #10b981;--basis-light-warning: #f59e0b;--basis-light-danger: #ef4444;--basis-light-info: #3b82f6;--basis-light-cardBorder: rgba(213, 223, 238, .16);--basis-light-cardBorderInner: rgba(225, 233, 244, .12);--basis-dark-background: #05070b;--basis-dark-surface: #090c11;--basis-dark-surfaceRaised: #0f141d;--basis-dark-surfaceMuted: #161c27;--basis-dark-border: #1f2633;--basis-dark-borderSubtle: #171d27;--basis-dark-borderStrong: #2a323f;--basis-dark-text: #f1f5f9;--basis-dark-textSecondary: #c7d2e2;--basis-dark-textMuted: #94a3b8;--basis-dark-primary: #60a5fa;--basis-dark-primaryHover: #4f8ee6;--basis-dark-primaryActive: #4076cf;--basis-dark-primaryContrast: #05070b;--basis-dark-primarySoft: rgba(96, 165, 250, .18);--basis-dark-primarySoftHover: rgba(96, 165, 250, .24);--basis-dark-primarySoftActive: rgba(96, 165, 250, .3);--basis-dark-primarySoftBorder: #2a3344;--basis-dark-secondary: rgba(148, 163, 184, .18);--basis-dark-secondaryHover: rgba(148, 163, 184, .24);--basis-dark-secondaryActive: rgba(148, 163, 184, .28);--basis-dark-secondarySolid: #8895a8;--basis-dark-secondarySolidHover: #9aa7b8;--basis-dark-secondarySolidActive: #acb8c8;--basis-dark-tertiary: rgba(100, 116, 139, .2);--basis-dark-tertiaryHover: rgba(100, 116, 139, .26);--basis-dark-tertiaryActive: rgba(100, 116, 139, .32);--basis-dark-tertiarySolid: #556073;--basis-dark-tertiarySolidHover: #657082;--basis-dark-tertiarySolidActive: #758093;--basis-dark-focusRing: rgba(96, 165, 250, .3);--basis-dark-selectCaret: #f1f5f9;--basis-dark-success: #10b981;--basis-dark-warning: #f59e0b;--basis-dark-danger: #f97373;--basis-dark-info: #60a5fa;--basis-dark-cardBorder: rgba(31, 38, 51, .18);--basis-dark-cardBorderInner: rgba(23, 29, 39, .16);--color-background: var(--basis-light-background);--color-surface: var(--basis-light-surface);--color-surface-raised: var(--basis-light-surfaceRaised);--color-surface-muted: var(--basis-light-surfaceMuted);--color-text: var(--basis-light-text);--color-text-secondary: var(--basis-light-textSecondary);--color-text-muted: var(--basis-light-textMuted);--color-border: var(--basis-light-border);--color-border-light: var(--basis-light-borderSubtle);--color-border-secondary: var(--basis-light-borderStrong);--color-primary: var(--basis-light-primary);--color-primary-hover: var(--basis-light-primaryHover);--color-primary-active: var(--basis-light-primaryActive);--color-primary-soft: var(--basis-light-primarySoft);--color-primary-soft-hover: var(--basis-light-primarySoftHover);--color-primary-soft-active: var(--basis-light-primarySoftActive);--color-primary-soft-border: var(--basis-light-primarySoftBorder);--color-btn-primary-text: var(--basis-light-primaryContrast);--color-secondary: var(--basis-light-secondary);--color-secondary-hover: var(--basis-light-secondaryHover);--color-secondary-active: var(--basis-light-secondaryActive);--color-secondary-solid: var(--basis-light-secondarySolid);--color-secondary-solid-hover: var(--basis-light-secondarySolidHover);--color-secondary-solid-active: var(--basis-light-secondarySolidActive);--color-tertiary: var(--basis-light-tertiary);--color-tertiary-hover: var(--basis-light-tertiaryHover);--color-tertiary-active: var(--basis-light-tertiaryActive);--color-tertiary-solid: var(--basis-light-tertiarySolid);--color-tertiary-solid-hover: var(--basis-light-tertiarySolidHover);--color-tertiary-solid-active: var(--basis-light-tertiarySolidActive);--color-focus-ring: var(--basis-light-focusRing);--color-select-caret: var(--basis-light-selectCaret);--color-card-border: var(--basis-light-cardBorder);--color-card-border-inner: var(--basis-light-cardBorderInner);--color-success: var(--basis-light-success);--color-warning: var(--basis-light-warning);--color-error: var(--basis-light-danger);--color-danger: var(--basis-light-danger);--color-info: var(--basis-light-info);--color-mode: "monochrome";--color-success-rgb: 16, 185, 129;--color-warning-rgb: 245, 158, 11;--color-error-rgb: 239, 68, 68;--color-info-rgb: 59, 130, 246;--focus-ring: 0 0 0 3px var(--color-focus-ring);--focus-outline: 2px solid var(--color-primary);--status-bg-opacity: .15;--status-border-opacity: .25;--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-size-3xl: 24px;--font-size-4xl: 30px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 550;--font-weight-bold: 600;--line-height-tight: 1.2;--line-height-normal: 1.5;--letter-spacing-tight: -.01em;--space-0: 0;--space-1: 1px;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-10: 10px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--radius-sm: 6px;--radius-base: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .02);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .04), 0 2px 4px -1px rgba(0, 0, 0, .02);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02);--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .03);--bf-font-mono: "SF Mono", "Monaco", "Menlo", "Consolas", "Ubuntu Mono", monospace;--bf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--bf-space-xs: .25rem;--bf-space-sm: .5rem;--bf-space-md: 1rem;--bf-space-lg: 1.5rem;--bf-space-xl: 2rem;--bf-space-2xl: 3rem;--bf-space-3xl: 4rem;--bf-radius-none: 0;--bf-radius-sm: .25rem;--bf-radius-md: .375rem;--bf-radius-lg: .5rem;--bf-radius-xl: .75rem;--bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--bf-shadow-md: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--bf-shadow-lg: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);--bf-shadow-xl: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--bf-transition-fast: .15s ease;--bf-transition-normal: .3s ease;--duration-fast: .15s;--duration-normal: .25s;--ease-standard: cubic-bezier(.16, 1, .3, 1);--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1280px}@media(prefers-color-scheme:dark){:root{--color-background: var(--basis-dark-background);--color-surface: var(--basis-dark-surface);--color-surface-raised: var(--basis-dark-surfaceRaised);--color-surface-muted: var(--basis-dark-surfaceMuted);--color-text: var(--basis-dark-text);--color-text-secondary: var(--basis-dark-textSecondary);--color-text-muted: var(--basis-dark-textMuted);--color-border: var(--basis-dark-border);--color-border-light: var(--basis-dark-borderSubtle);--color-border-secondary: var(--basis-dark-borderStrong);--color-primary: var(--basis-dark-primary);--color-primary-hover: var(--basis-dark-primaryHover);--color-primary-active: var(--basis-dark-primaryActive);--color-primary-soft: var(--basis-dark-primarySoft);--color-primary-soft-hover: var(--basis-dark-primarySoftHover);--color-primary-soft-active: var(--basis-dark-primarySoftActive);--color-primary-soft-border: var(--basis-dark-primarySoftBorder);--color-btn-primary-text: var(--basis-dark-primaryContrast);--color-secondary: var(--basis-dark-secondary);--color-secondary-hover: var(--basis-dark-secondaryHover);--color-secondary-active: var(--basis-dark-secondaryActive);--color-secondary-solid: var(--basis-dark-secondarySolid);--color-secondary-solid-hover: var(--basis-dark-secondarySolidHover);--color-secondary-solid-active: var(--basis-dark-secondarySolidActive);--color-tertiary: var(--basis-dark-tertiary);--color-tertiary-hover: var(--basis-dark-tertiaryHover);--color-tertiary-active: var(--basis-dark-tertiaryActive);--color-tertiary-solid: var(--basis-dark-tertiarySolid);--color-tertiary-solid-hover: var(--basis-dark-tertiarySolidHover);--color-tertiary-solid-active: var(--basis-dark-tertiarySolidActive);--color-focus-ring: var(--basis-dark-focusRing);--color-select-caret: var(--basis-dark-selectCaret);--color-card-border: var(--basis-dark-cardBorder);--color-card-border-inner: var(--basis-dark-cardBorderInner);--color-success: var(--basis-dark-success);--color-warning: var(--basis-dark-warning);--color-error: var(--basis-dark-danger);--color-danger: var(--basis-dark-danger);--color-info: var(--basis-dark-info);--color-success-rgb: 16, 185, 129;--color-warning-rgb: 245, 158, 11;--color-error-rgb: 249, 115, 115;--color-info-rgb: 96, 165, 250;--focus-ring: 0 0 0 3px var(--color-focus-ring);--focus-outline: 2px solid var(--color-primary)}}[data-color-scheme=dark]{--color-background: var(--basis-dark-background);--color-surface: var(--basis-dark-surface);--color-surface-raised: var(--basis-dark-surfaceRaised);--color-surface-muted: var(--basis-dark-surfaceMuted);--color-text: var(--basis-dark-text);--color-text-secondary: var(--basis-dark-textSecondary);--color-text-muted: var(--basis-dark-textMuted);--color-border: var(--basis-dark-border);--color-border-light: var(--basis-dark-borderSubtle);--color-border-secondary: var(--basis-dark-borderStrong);--color-primary: var(--basis-dark-primary);--color-primary-hover: var(--basis-dark-primaryHover);--color-primary-active: var(--basis-dark-primaryActive);--color-primary-soft: var(--basis-dark-primarySoft);--color-primary-soft-hover: var(--basis-dark-primarySoftHover);--color-primary-soft-active: var(--basis-dark-primarySoftActive);--color-primary-soft-border: var(--basis-dark-primarySoftBorder);--color-btn-primary-text: var(--basis-dark-primaryContrast);--color-secondary: var(--basis-dark-secondary);--color-secondary-hover: var(--basis-dark-secondaryHover);--color-secondary-active: var(--basis-dark-secondaryActive);--color-secondary-solid: var(--basis-dark-secondarySolid);--color-secondary-solid-hover: var(--basis-dark-secondarySolidHover);--color-secondary-solid-active: var(--basis-dark-secondarySolidActive);--color-tertiary: var(--basis-dark-tertiary);--color-tertiary-hover: var(--basis-dark-tertiaryHover);--color-tertiary-active: var(--basis-dark-tertiaryActive);--color-tertiary-solid: var(--basis-dark-tertiarySolid);--color-tertiary-solid-hover: var(--basis-dark-tertiarySolidHover);--color-tertiary-solid-active: var(--basis-dark-tertiarySolidActive);--color-focus-ring: var(--basis-dark-focusRing);--color-select-caret: var(--basis-dark-selectCaret);--color-card-border: var(--basis-dark-cardBorder);--color-card-border-inner: var(--basis-dark-cardBorderInner);--color-success: var(--basis-dark-success);--color-warning: var(--basis-dark-warning);--color-error: var(--basis-dark-danger);--color-danger: var(--basis-dark-danger);--color-info: var(--basis-dark-info);--color-success-rgb: 16, 185, 129;--color-warning-rgb: 245, 158, 11;--color-error-rgb: 249, 115, 115;--color-info-rgb: 96, 165, 250}[data-color-scheme=light]{--color-background: var(--basis-light-background);--color-surface: var(--basis-light-surface);--color-surface-raised: var(--basis-light-surfaceRaised);--color-surface-muted: var(--basis-light-surfaceMuted);--color-text: var(--basis-light-text);--color-text-secondary: var(--basis-light-textSecondary);--color-text-muted: var(--basis-light-textMuted);--color-border: var(--basis-light-border);--color-border-light: var(--basis-light-borderSubtle);--color-border-secondary: var(--basis-light-borderStrong);--color-primary: var(--basis-light-primary);--color-primary-hover: var(--basis-light-primaryHover);--color-primary-active: var(--basis-light-primaryActive);--color-primary-soft: var(--basis-light-primarySoft);--color-primary-soft-hover: var(--basis-light-primarySoftHover);--color-primary-soft-active: var(--basis-light-primarySoftActive);--color-primary-soft-border: var(--basis-light-primarySoftBorder);--color-btn-primary-text: var(--basis-light-primaryContrast);--color-secondary: var(--basis-light-secondary);--color-secondary-hover: var(--basis-light-secondaryHover);--color-secondary-active: var(--basis-light-secondaryActive);--color-secondary-solid: var(--basis-light-secondarySolid);--color-secondary-solid-hover: var(--basis-light-secondarySolidHover);--color-secondary-solid-active: var(--basis-light-secondarySolidActive);--color-tertiary: var(--basis-light-tertiary);--color-tertiary-hover: var(--basis-light-tertiaryHover);--color-tertiary-active: var(--basis-light-tertiaryActive);--color-tertiary-solid: var(--basis-light-tertiarySolid);--color-tertiary-solid-hover: var(--basis-light-tertiarySolidHover);--color-tertiary-solid-active: var(--basis-light-tertiarySolidActive);--color-focus-ring: var(--basis-light-focusRing);--color-select-caret: var(--basis-light-selectCaret);--color-card-border: var(--basis-light-cardBorder);--color-card-border-inner: var(--basis-light-cardBorderInner);--color-success: var(--basis-light-success);--color-warning: var(--basis-light-warning);--color-error: var(--basis-light-danger);--color-danger: var(--basis-light-danger);--color-info: var(--basis-light-info);--color-success-rgb: 16, 185, 129;--color-warning-rgb: 245, 158, 11;--color-error-rgb: 239, 68, 68;--color-info-rgb: 59, 130, 246}html{font-size:var(--font-size-base);font-family:var(--font-family-base);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;box-sizing:border-box}body{margin:0;padding:0}*,*:before,*:after{box-sizing:inherit}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text);letter-spacing:var(--letter-spacing-tight)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-md)}p{margin:0 0 var(--space-16) 0}a{color:var(--color-primary);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}a:hover{color:var(--color-primary-hover)}code,pre{font-family:var(--font-family-mono);font-size:calc(var(--font-size-base) * .95);background-color:var(--color-surface-muted, var(--color-surface));color:var(--color-text);border-radius:var(--radius-sm);border:1px solid var(--color-card-border, var(--color-border))}code{padding:var(--space-1) var(--space-4);border:none}pre{padding:var(--space-16);margin:var(--space-16) 0;overflow:auto;border:1px solid var(--color-card-border, var(--color-border))}pre code{background:none;padding:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-16);border-radius:var(--radius-base);font-size:var(--font-size-base);font-weight:500;line-height:1.5;cursor:pointer;transition:all var(--duration-normal) var(--ease-standard);border:none;text-decoration:none;position:relative}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn--primary{background:var(--color-primary);color:var(--color-btn-primary-text)}.btn--primary:hover{background:var(--color-primary-hover)}.btn--primary:active{background:var(--color-primary-active)}.btn--secondary{background:var(--color-secondary);color:var(--color-text)}.btn--secondary:hover{background:var(--color-secondary-hover)}.btn--secondary:active{background:var(--color-secondary-active)}.btn--outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn--outline:hover{background:var(--color-secondary)}.btn--sm{padding:var(--space-4) var(--space-12);font-size:var(--font-size-sm);border-radius:var(--radius-sm)}.btn--lg{padding:var(--space-10) var(--space-20);font-size:var(--font-size-lg);border-radius:var(--radius-md)}.btn--full-width{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.form-control{display:block;width:100%;padding:var(--space-8) var(--space-12);font-size:var(--font-size-md);line-height:1.5;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-base);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}textarea.form-control{font-family:var(--font-family-base);font-size:var(--font-size-base)}select.form-control{padding:var(--space-8) var(--space-12);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:var(--select-caret-light);background-repeat:no-repeat;background-position:right var(--space-12) center;background-size:16px;padding-right:var(--space-32)}@media(prefers-color-scheme:dark){select.form-control{background-image:var(--select-caret-dark)}}[data-color-scheme=dark] select.form-control{background-image:var(--select-caret-dark)}[data-color-scheme=light] select.form-control{background-image:var(--select-caret-light)}.form-control:focus{border-color:var(--color-primary);outline:var(--focus-outline)}.form-label{display:block;margin-bottom:var(--space-8);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm)}.form-group{margin-bottom:var(--space-16)}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-card-border);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--duration-normal) var(--ease-standard)}.card:hover{box-shadow:var(--shadow-md)}.card__body{padding:var(--space-16)}.card__header,.card__footer{padding:var(--space-16);border-bottom:1px solid var(--color-card-border-inner)}.status{display:inline-flex;align-items:center;padding:var(--space-6) var(--space-12);border-radius:var(--radius-full);font-weight:var(--font-weight-medium);font-size:var(--font-size-sm)}.status--success{background-color:rgba(var(--color-success-rgb, 33, 128, 141),var(--status-bg-opacity));color:var(--color-success);border:1px solid rgba(var(--color-success-rgb, 33, 128, 141),var(--status-border-opacity))}.status--error{background-color:rgba(var(--color-error-rgb, 192, 21, 47),var(--status-bg-opacity));color:var(--color-error);border:1px solid rgba(var(--color-error-rgb, 192, 21, 47),var(--status-border-opacity))}.status--warning{background-color:rgba(var(--color-warning-rgb, 168, 75, 47),var(--status-bg-opacity));color:var(--color-warning);border:1px solid rgba(var(--color-warning-rgb, 168, 75, 47),var(--status-border-opacity))}.status--info{background-color:rgba(var(--color-info-rgb, 98, 108, 113),var(--status-bg-opacity));color:var(--color-info);border:1px solid rgba(var(--color-info-rgb, 98, 108, 113),var(--status-border-opacity))}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--space-16);padding-left:var(--space-16)}@media(min-width:640px){.container{max-width:var(--container-sm)}}@media(min-width:768px){.container{max-width:var(--container-md)}}@media(min-width:1024px){.container{max-width:var(--container-lg)}}@media(min-width:1280px){.container{max-width:var(--container-xl)}}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:var(--space-4)}.gap-8{gap:var(--space-8)}.gap-16{gap:var(--space-16)}.mt-8{margin-top:var(--space-8)}.mb-8{margin-bottom:var(--space-8)}.mx-8{margin-left:var(--space-8);margin-right:var(--space-8)}.my-8{margin-top:var(--space-8);margin-bottom:var(--space-8)}.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.py-16{padding-top:var(--space-16);padding-bottom:var(--space-16)}.px-16{padding-left:var(--space-16);padding-right:var(--space-16)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:focus-visible{outline:var(--focus-outline);outline-offset:2px}[data-color-scheme=dark] .btn--outline{border:1px solid var(--color-border-secondary)}@font-face{font-family:FKGroteskNeue;src:url(https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2) format("woff2")}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--bf-font-sans);background-color:var(--color-background);color:var(--color-text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .3s ease}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:var(--bf-space-md)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:var(--bf-space-md)}.container{max-width:1200px;margin:0 auto;padding:0 var(--bf-space-md)}.header{background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);transition:all .3s ease;box-shadow:var(--bf-shadow-sm)}.header-nav{display:flex;justify-content:space-between;align-items:center;padding:var(--bf-space-lg) 0;border-bottom:1px solid var(--color-border)}.color-mode-selector{display:flex;gap:var(--bf-space-xs);background:var(--color-surface-raised, var(--color-surface));border:1px solid var(--color-border);border-radius:var(--bf-radius-lg);padding:var(--bf-space-xs)}.mode-btn{padding:var(--bf-space-md) var(--bf-space-lg);background:transparent;border:none;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;border-radius:var(--bf-radius-md);transition:all var(--bf-transition-fast);white-space:nowrap}.mode-btn:hover{color:var(--color-text);background:var(--color-surface)}.mode-btn.active{background:var(--color-primary, var(--color-text));color:var(--color-surface);box-shadow:var(--bf-shadow-sm)}.hero-section{padding:var(--bf-space-3xl) 0;text-align:center}.hero-content{max-width:600px;margin:var(--bf-space-2xl) auto 0}.hero-title{font-size:2.5rem;font-weight:700;margin-bottom:var(--bf-space-md);color:var(--color-text)}.hero-description{font-size:1.2rem;color:var(--color-text-secondary);margin:0}.name-showcase{max-width:800px;margin:0 auto}.name-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--bf-space-md);margin-bottom:var(--bf-space-xl)}.name-card{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);padding:var(--bf-space-md) var(--bf-space-lg);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--bf-transition-normal);text-transform:none;letter-spacing:.025em;border-radius:var(--bf-radius-md);box-shadow:var(--bf-shadow-sm)}.name-card:hover{border-color:var(--color-primary, var(--color-text));transform:translateY(-1px);box-shadow:var(--bf-shadow-md)}.name-card.active{background:var(--color-primary, var(--color-text));border-color:var(--color-primary, var(--color-text));color:var(--color-surface);box-shadow:var(--bf-shadow-lg)}.framework-name{font-size:1.75rem;font-weight:700;color:var(--color-text);margin:0;text-transform:none;letter-spacing:0}.color-configurator{background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);padding:var(--bf-space-2xl) 0;transition:all .3s ease}.configurator-header{text-align:center;margin-bottom:var(--bf-space-xl)}.configurator-header h3{color:var(--color-text);font-size:1.8rem;margin-bottom:var(--bf-space-sm)}.current-mode-description{color:var(--color-text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}.color-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--bf-space-lg);margin-bottom:var(--bf-space-xl)}.color-input-group{background:var(--color-surface-raised, var(--color-surface));border:1px solid var(--color-border);border-radius:var(--bf-radius-lg);padding:var(--bf-space-lg);box-shadow:var(--bf-shadow-sm)}.color-input-group label{display:block;font-weight:600;margin-bottom:var(--bf-space-sm);color:var(--color-text);font-size:.875rem;text-transform:uppercase;letter-spacing:.025em}.input-row{display:flex;gap:var(--bf-space-sm);align-items:center}.input-row input[type=color]{width:50px;height:50px;border:2px solid var(--color-border);background:transparent;cursor:pointer}.color-text{flex:1;padding:var(--bf-space-md);border:1px solid var(--color-border);border-radius:var(--bf-radius-md);background:var(--color-surface);color:var(--color-text);font-family:var(--bf-font-mono);font-weight:600;text-transform:uppercase}.btn-remove{width:40px;height:40px;background:var(--color-danger);border:none;color:var(--color-surface);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.color-actions{display:flex;justify-content:center;align-items:center;gap:var(--bf-space-lg);flex-wrap:wrap}.color-preview{display:flex;justify-content:center;margin-top:var(--bf-space-xl)}.preview-palette{display:flex;gap:var(--bf-space-md);padding:var(--bf-space-lg);background:var(--color-surface-raised, var(--color-surface));border:1px solid var(--color-border);border-radius:var(--bf-radius-lg);box-shadow:var(--bf-shadow-sm)}.preview-swatch{width:60px;height:60px;border-radius:var(--bf-radius-md);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;text-transform:uppercase;border:1px solid var(--color-border);transition:all .3s ease}.preview-swatch[data-color=bg]{background:var(--color-background);color:var(--color-text)}.preview-swatch[data-color=surface]{background:var(--color-surface);color:var(--color-text)}.preview-swatch[data-color=text]{background:var(--color-text);color:var(--color-surface)}.kitchen-sink{padding:var(--bf-space-3xl) 0}.kitchen-sink h2{text-align:center;font-size:2.5rem;margin-bottom:var(--bf-space-3xl);color:var(--color-text)}.component-section{margin-bottom:var(--bf-space-3xl);border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--bf-radius-lg);overflow:hidden;box-shadow:var(--bf-shadow-sm)}.component-section h3{background:var(--color-border-light);color:var(--color-text);padding:var(--bf-space-lg);margin:0;font-size:1.25rem;font-weight:600;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--color-border)}.component-demo{display:grid;grid-template-columns:2fr 1fr;gap:var(--bf-space-xl);padding:var(--bf-space-xl)}.component-variants{display:flex;flex-wrap:wrap;gap:var(--bf-space-lg);align-items:flex-start}.code-snippet{background:var(--color-surface-raised, var(--color-surface));border:1px solid var(--color-card-border, var(--color-border));padding:var(--bf-space-lg);border-radius:var(--bf-radius-md);position:relative}.code-snippet pre{margin:0;font-family:var(--bf-font-mono);color:var(--color-text);font-size:.8rem;line-height:1.4;overflow-x:auto}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--bf-space-sm) var(--bf-space-lg);border:1px solid transparent;background:var(--color-surface);color:var(--color-text);font-weight:500;font-size:.875rem;text-decoration:none;cursor:pointer;transition:all var(--bf-transition-normal);text-transform:none;letter-spacing:0;border-radius:var(--bf-radius-md);box-shadow:var(--bf-shadow-sm);position:relative;overflow:hidden}.btn:hover{transform:translateY(-1px);box-shadow:var(--bf-shadow-md)}.btn:active{transform:translateY(0);box-shadow:var(--bf-shadow-sm)}.btn-primary{background:var(--color-primary, var(--color-text));border-color:var(--color-primary, var(--color-text));color:var(--color-surface)}.btn-secondary{background:var(--color-secondary);border-color:var(--color-secondary, var(--color-border));color:var(--color-text)}.btn-secondary:hover{background:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.btn-secondary:active{background:var(--color-secondary-active);border-color:var(--color-secondary-active)}.btn-tertiary{background:var(--color-tertiary-solid, var(--color-primary));border-color:var(--color-tertiary-solid, var(--color-primary));color:var(--color-btn-primary-text)}.btn-tertiary:hover{background:var( --color-tertiary-solid-hover, var(--color-tertiary-solid, var(--color-primary)) );border-color:var( --color-tertiary-solid-hover, var(--color-tertiary-solid, var(--color-primary)) )}.btn-tertiary:active{background:var( --color-tertiary-solid-active, var(--color-tertiary-solid, var(--color-primary)) );border-color:var( --color-tertiary-solid-active, var(--color-tertiary-solid, var(--color-primary)) )}.btn-outline{background:transparent;border-color:var(--color-border);color:var(--color-text)}.btn-outline:hover{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary, var(--color-text))}.btn-outline:active{background:var( --color-primary-soft-hover, var(--color-primary-soft, var(--color-primary)) );border-color:var(--color-primary-active);color:var(--color-primary, var(--color-text))}.btn-ghost{background:transparent;border:none;box-shadow:none;color:var(--color-text-secondary);text-decoration:none;font-weight:400}.btn-ghost:hover{background:var(--color-primary-soft);color:var(--color-primary, var(--color-text))}.btn-sm{padding:var(--bf-space-sm) var(--bf-space-md);font-size:.875rem}.btn-lg{padding:var(--bf-space-lg) var(--bf-space-xl);font-size:1.125rem}.card{background:var(--color-surface-raised, var(--color-surface));border:1px solid var(--color-card-border, var(--color-border));box-shadow:var(--bf-shadow-sm);margin-bottom:var(--bf-space-lg);border-radius:var(--bf-radius-lg);overflow:hidden;transition:all var(--bf-transition-normal);max-width:600px}.card:hover{box-shadow:var(--shadow-md, var(--bf-shadow-lg));transform:translateY(-2px)}.card-header{background:var(--color-surface, var(--color-background));color:var(--color-text);padding:var(--bf-space-md) var(--bf-space-lg);border-bottom:1px solid var(--color-card-border-inner, var(--color-border))}.card-header h4{margin:0;font-size:1.1rem;text-transform:uppercase}.card-body{padding:var(--bf-space-md)}.card-primary{background:var(--color-primary-soft);border-color:var(--color-primary-soft-border, var(--color-primary))}.card-primary .card-header{background:var(--color-primary);color:var(--color-btn-primary-text);border-bottom-color:var(--color-primary)}.card-secondary{background:var(--color-secondary);border-color:var(--color-secondary-active, var(--color-card-border))}.card-secondary .card-header{background:var(--color-secondary-solid, var(--color-text));color:var(--color-btn-primary-text);border-bottom-color:var( --color-secondary-solid, var(--color-border-secondary) )}.card-tertiary{background:var(--color-tertiary);border-color:var(--color-tertiary-active, var(--color-card-border))}.card-tertiary .card-header{background:var(--color-tertiary-solid, var(--color-text));color:var(--color-btn-primary-text);border-bottom-color:var( --color-tertiary-solid, var(--color-border-secondary) )}.alert{padding:var(--bf-space-md);margin-bottom:var(--bf-space-md);border:1px solid var(--color-card-border, var(--color-border));background:var(--color-surface-raised, var(--color-surface));box-shadow:var(--bf-shadow-sm);border-radius:var(--bf-radius-md);font-size:.875rem;color:var(--color-text)}.alert-primary{border-left:4px solid var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary-soft-border, var(--color-primary))}.alert-secondary{border-left:4px solid var(--color-secondary-solid, var(--color-text-secondary));background:var(--color-secondary);border-color:var(--color-secondary-active, var(--color-border))}.alert-tertiary{border-left:4px solid var(--color-tertiary-solid, var(--color-text-secondary));background:var(--color-tertiary);border-color:var(--color-tertiary-active, var(--color-border))}.alert-success{border-left:4px solid var(--color-success);background:rgba(var(--color-success-rgb),var(--status-bg-opacity));border-color:rgba(var(--color-success-rgb),var(--status-border-opacity))}.alert-danger{border-left:4px solid var(--color-danger);background:rgba(var(--color-error-rgb),var(--status-bg-opacity));border-color:rgba(var(--color-error-rgb),var(--status-border-opacity))}.form-group{margin-bottom:var(--bf-space-lg)}.form-label{display:block;margin-bottom:var(--bf-space-sm);font-weight:600;text-transform:uppercase;font-size:.9rem}.form-input,.form-select,.form-textarea{width:100%;padding:var(--bf-space-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:.875rem;font-family:var(--bf-font-sans);border-radius:var(--bf-radius-md);transition:all var(--bf-transition-normal);box-shadow:var(--bf-shadow-sm)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary, var(--color-text));box-shadow:0 0 0 3px #3b82f61a,var(--bf-shadow-md)}.form-textarea{resize:vertical;min-height:100px}.checkbox-group,.radio-group{display:flex;align-items:center;gap:var(--bf-space-sm);margin-bottom:var(--bf-space-sm)}.form-checkbox,.form-radio{width:16px;height:16px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--bf-radius-sm);transition:all var(--bf-transition-fast)}.table{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--bf-radius-md);overflow:hidden;box-shadow:var(--bf-shadow-sm)}.table thead{background:var(--color-border-light)}.table th{padding:var(--bf-space-md) var(--bf-space-lg);text-align:left;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.025em;color:var(--color-text);border-bottom:2px solid var(--color-border)}.table td{padding:var(--bf-space-md) var(--bf-space-lg);border-bottom:1px solid var(--color-border);color:var(--color-text)}.table tbody tr:last-child td{border-bottom:none}.table tbody tr{transition:background-color var(--bf-transition-fast)}.table tbody tr:hover{background:var(--color-border-light)}.table-striped tbody tr:nth-child(2n){background:#00000005}.table-bordered,.table-bordered th,.table-bordered td{border:1px solid var(--color-border)}.table-compact td,.table-compact th{padding:var(--bf-space-sm) var(--bf-space-md)}.img-wrapper{display:inline-block;margin:var(--bf-space-md)}.img-fluid{max-width:100%;height:auto;display:block;border-radius:var(--bf-radius-md);box-shadow:var(--bf-shadow-sm);transition:all var(--bf-transition-normal)}.img-fluid:hover{box-shadow:var(--bf-shadow-lg);transform:translateY(-2px)}.img-rounded{border-radius:var(--bf-radius-lg);max-width:100%;height:auto;box-shadow:var(--bf-shadow-md);transition:all var(--bf-transition-normal)}.img-rounded:hover{box-shadow:var(--bf-shadow-xl);transform:scale(1.02)}.img-circle{border-radius:var(--radius-full);max-width:100%;height:auto;box-shadow:var(--bf-shadow-md);transition:all var(--bf-transition-normal)}.img-circle:hover{box-shadow:var(--bf-shadow-xl);transform:scale(1.05)}.switch-group{margin-bottom:var(--bf-space-md)}.switch{display:flex;align-items:center;gap:var(--bf-space-md);cursor:pointer}.switch-input{display:none}.switch-slider{width:44px;height:24px;background:var(--color-border-light);border:1px solid var(--color-border);border-radius:12px;position:relative;transition:all var(--bf-transition-normal);box-shadow:inset 0 2px 4px #0000001a}.switch-slider:after{content:"";position:absolute;width:20px;height:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;top:1px;left:1px;transition:all var(--bf-transition-normal);box-shadow:var(--bf-shadow-sm)}.switch-input:checked+.switch-slider{background:var(--color-primary, var(--color-text));border-color:var(--color-primary, var(--color-text))}.switch-input:checked+.switch-slider:after{transform:translate(20px);background:var(--color-surface)}.switch-primary .switch-input:checked+.switch-slider{background:var(--color-primary, var(--color-text));border-color:var(--color-primary, var(--color-text))}.switch-secondary .switch-input:checked+.switch-slider{background:var(--color-secondary, var(--color-text-secondary));border-color:var(--color-secondary, var(--color-text-secondary))}.switch-label{font-weight:600;text-transform:uppercase;font-size:.9rem}.grid{display:grid;gap:var(--bf-space-md);margin-bottom:var(--bf-space-lg)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-item{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);padding:var(--bf-space-lg);text-align:center;font-weight:500;text-transform:none;border-radius:var(--bf-radius-md);box-shadow:var(--bf-shadow-sm);transition:all var(--bf-transition-normal)}.grid-item:hover{box-shadow:var(--bf-shadow-md);transform:translateY(-1px)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}.modal.active{display:flex;align-items:center;justify-content:center}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#0c0c0ccc}.modal-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--bf-radius-lg);box-shadow:var(--bf-shadow-xl);max-width:500px;width:90%;position:relative;z-index:1001}.modal-header{background:var(--color-primary, var(--color-text));color:var(--color-surface);padding:var(--bf-space-lg);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border);border-radius:var(--bf-radius-lg) var(--bf-radius-lg) 0 0}.modal-header h4{margin:0;text-transform:uppercase}.modal-close{background:none;border:none;color:var(--color-surface);font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-body{padding:var(--bf-space-xl)}.modal-actions{display:flex;gap:var(--bf-space-md);justify-content:flex-end;margin-top:var(--bf-space-lg)}.footer{background:var(--color-surface);color:var(--color-text);border-top:1px solid var(--color-border);padding:var(--bf-space-3xl) 0 var(--bf-space-xl) 0;transition:all .3s ease}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--bf-space-xl);margin-bottom:var(--bf-space-xl)}.footer-section h4{color:var(--color-primary, var(--color-text));font-size:1.125rem;font-weight:600;margin-bottom:var(--bf-space-md)}.footer-section p{color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;margin:0}.footer-links{display:flex;gap:var(--bf-space-lg)}.footer-link{color:var(--color-text-secondary);text-decoration:none;font-size:.875rem;transition:color var(--bf-transition-fast)}.footer-link:hover{color:var(--color-primary, var(--color-text))}.footer-bottom{border-top:1px solid var(--color-border);padding-top:var(--bf-space-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--bf-space-md)}.footer-bottom p{margin:0;color:var(--color-text-secondary);font-size:.875rem}@media(max-width:768px){.component-demo{grid-template-columns:1fr}.name-grid{grid-template-columns:repeat(2,1fr)}.framework-name{font-size:2rem}.color-controls{grid-template-columns:1fr}.color-actions{flex-direction:column}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.component-variants{flex-direction:column}.footer-content{grid-template-columns:1fr;text-align:center}.footer-bottom{flex-direction:column;text-align:center}}@media(max-width:480px){.grid-2,.grid-3,.grid-4,.name-grid{grid-template-columns:1fr}.btn{width:100%;margin-bottom:var(--bf-space-sm)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--bf-font-mono)}.font-sans{font-family:var(--bf-font-sans)}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.hidden{display:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.m-0{margin:0}.m-1{margin:var(--bf-space-xs)}.m-2{margin:var(--bf-space-sm)}.m-3{margin:.75rem}.m-4{margin:var(--bf-space-md)}.m-5{margin:1.25rem}.m-6{margin:var(--bf-space-lg)}.m-8{margin:var(--bf-space-xl)}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:var(--bf-space-xs);margin-right:var(--bf-space-xs)}.mx-2{margin-left:var(--bf-space-sm);margin-right:var(--bf-space-sm)}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:var(--bf-space-md);margin-right:var(--bf-space-md)}.mx-6{margin-left:var(--bf-space-lg);margin-right:var(--bf-space-lg)}.mx-8{margin-left:var(--bf-space-xl);margin-right:var(--bf-space-xl)}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:var(--bf-space-xs);margin-bottom:var(--bf-space-xs)}.my-2{margin-top:var(--bf-space-sm);margin-bottom:var(--bf-space-sm)}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:var(--bf-space-md);margin-bottom:var(--bf-space-md)}.my-6{margin-top:var(--bf-space-lg);margin-bottom:var(--bf-space-lg)}.my-8{margin-top:var(--bf-space-xl);margin-bottom:var(--bf-space-xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--bf-space-xs)}.mt-2{margin-top:var(--bf-space-sm)}.mt-3{margin-top:.75rem}.mt-4{margin-top:var(--bf-space-md)}.mt-6{margin-top:var(--bf-space-lg)}.mt-8{margin-top:var(--bf-space-xl)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--bf-space-xs)}.mb-2{margin-bottom:var(--bf-space-sm)}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:var(--bf-space-md)}.mb-6{margin-bottom:var(--bf-space-lg)}.mb-8{margin-bottom:var(--bf-space-xl)}.p-0{padding:0}.p-1{padding:var(--bf-space-xs)}.p-2{padding:var(--bf-space-sm)}.p-3{padding:.75rem}.p-4{padding:var(--bf-space-md)}.p-5{padding:1.25rem}.p-6{padding:var(--bf-space-lg)}.p-8{padding:var(--bf-space-xl)}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:var(--bf-space-xs);padding-right:var(--bf-space-xs)}.px-2{padding-left:var(--bf-space-sm);padding-right:var(--bf-space-sm)}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:var(--bf-space-md);padding-right:var(--bf-space-md)}.px-6{padding-left:var(--bf-space-lg);padding-right:var(--bf-space-lg)}.px-8{padding-left:var(--bf-space-xl);padding-right:var(--bf-space-xl)}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:var(--bf-space-xs);padding-bottom:var(--bf-space-xs)}.py-2{padding-top:var(--bf-space-sm);padding-bottom:var(--bf-space-sm)}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:var(--bf-space-md);padding-bottom:var(--bf-space-md)}.py-6{padding-top:var(--bf-space-lg);padding-bottom:var(--bf-space-lg)}.py-8{padding-top:var(--bf-space-xl);padding-bottom:var(--bf-space-xl)}.text-primary{color:var(--color-primary, var(--color-text))}.text-secondary{color:var(--color-secondary, var(--color-text-secondary))}.text-tertiary{color:var(--color-tertiary, var(--color-text))}.bg-primary{background-color:var(--color-primary, var(--color-text))}.bg-secondary{background-color:var(--color-secondary, var(--color-text-secondary))}.bg-tertiary{background-color:var(--color-tertiary, var(--color-text))}.border-primary{border-color:var(--color-primary, var(--color-text))}.border-secondary{border-color:var(--color-secondary, var(--color-text-secondary))}.border-tertiary{border-color:var(--color-tertiary, var(--color-text))}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-fade-in{animation:fadeIn var(--bf-transition-normal) var(--ease-standard)}.animate-slide-in{animation:slideIn var(--bf-transition-normal) var(--ease-standard)}.animate-scale-in{animation:scaleIn var(--bf-transition-normal) var(--ease-standard)}.animate-pulse{animation:pulse 2s ease-in-out infinite}.transition-all{transition:all var(--bf-transition-normal) var(--ease-standard)}.transition-fast{transition:all var(--bf-transition-fast) var(--ease-standard)}.transition-colors{transition:color var(--bf-transition-fast) var(--ease-standard),background-color var(--bf-transition-fast) var(--ease-standard),border-color var(--bf-transition-fast) var(--ease-standard)}.transition-transform{transition:transform var(--bf-transition-normal) var(--ease-standard)}.transition-opacity{transition:opacity var(--bf-transition-fast) var(--ease-standard)}.hover-lift{transition:transform var(--bf-transition-normal) var(--ease-standard),box-shadow var(--bf-transition-normal) var(--ease-standard)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--bf-shadow-lg)}.hover-scale{transition:transform var(--bf-transition-normal) var(--ease-standard)}.hover-scale:hover{transform:scale(1.02)}.hover-glow{transition:box-shadow var(--bf-transition-normal) var(--ease-standard)}.hover-glow:hover{box-shadow:0 0 20px #0000001a}:root{--font-family-base: "Instrument Sans", "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.hidden{display:none!important}.app-nav{position:sticky;top:0;z-index:40;background:#fdfefee6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border)}.app-nav__inner{max-width:1200px;margin:0 auto;padding:var(--space-12) var(--space-16);display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}.brand{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:var(--space-8)}.brand__mark{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(130deg,#3b82f6,#8b5cf6,#14b8a6);display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:600}.brand__text{background:linear-gradient(120deg,#111827,#312e81 55%,#4c1d95);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;align-items:center;gap:var(--space-16);font-size:.95rem;color:var(--color-text-muted)}.nav-link{padding:var(--space-8) var(--space-12);border-radius:var(--radius-full);transition:background .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1)}.nav-link:hover{background:var(--color-primary-soft);color:var(--color-primary)}.hero{max-width:1200px;margin:0 auto var(--space-32);text-align:center;padding:var(--space-32) var(--space-16)}.hero__eyebrow{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-6) var(--space-12);border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}.hero__title{margin:var(--space-20) 0 var(--space-12);font-size:clamp(2.4rem,4vw,3.25rem);line-height:1.1;letter-spacing:-.02em}.hero__subtitle{max-width:620px;margin:0 auto;font-size:1.05rem;color:var(--color-text-secondary);line-height:1.6}.section{max-width:1200px;margin:0 auto;padding:0 var(--space-16)}.mailbox-grid{display:flex;flex-direction:column;gap:var(--space-24);margin-top:var(--space-24)}.sidebar{display:flex;flex-direction:column;gap:var(--space-24)}.badge{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-12);border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.chip{display:inline-flex;align-items:center;padding:var(--space-4) var(--space-10);border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.input-row{display:flex;gap:var(--space-12);flex-wrap:wrap}.stats-grid{display:flex;gap:var(--space-16);margin-top:var(--space-20);flex-wrap:wrap}.stat{flex:1;min-width:140px;background:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--space-16);border:1px solid var(--color-border-light);display:flex;flex-direction:column;gap:var(--space-6)}.stat__label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}.stat__value{font-size:1.1rem;font-weight:600}.inbox-meta{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:center;margin-top:var(--space-16)}.inbox-meta__item{display:flex;flex-direction:column;gap:var(--space-4);min-width:120px}.inbox-meta__label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}.inbox-meta__value{font-weight:600;font-size:.95rem}.inbox-controls{margin-top:var(--space-16);display:flex;justify-content:flex-end}.btn-small{padding:var(--space-8) var(--space-12);font-size:.85rem;min-height:36px}.btn-icon{width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:1.1rem}.quick-actions{position:relative}.quick-actions__popover{position:absolute;top:calc(100% + var(--space-8));right:0;width:min(280px,70vw);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-16);box-shadow:0 18px 45px #0f172a2e;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:20;display:flex;flex-direction:column;gap:var(--space-12)}.quick-actions:hover .quick-actions__popover,.quick-actions:focus-within .quick-actions__popover{opacity:1;visibility:visible;transform:translateY(0)}.quick-actions__title{font-weight:600;font-size:.9rem;color:var(--color-text)}.quick-actions__popover .btn-small{width:100%;justify-content:center}.quick-actions__hint{font-size:.8rem;color:var(--color-text-secondary);margin:0}.quick-actions__note{gap:var(--space-8)}.quick-actions__note .code-block{font-size:.75rem}.message-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.message-item{animation:fade-in .22s ease-out}.message{background:var(--color-surface);padding:var(--space-12) var(--space-16);display:flex;align-items:center;gap:var(--space-12);border-bottom:1px solid var(--color-border);transition:background .18s cubic-bezier(.22,1,.36,1);cursor:pointer;min-height:72px}.message:last-child{border-bottom:none}.message:hover{background:var(--color-surface-muted)}.message--unread{border-left:3px solid var(--color-primary);background:var(--color-primary-soft)}.message--unread:hover{background:#3b82f614}.message__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}.message__top-row{display:flex;align-items:baseline;gap:var(--space-12)}.message__from{font-weight:600;font-size:.9rem;color:var(--color-text);flex-shrink:0;min-width:180px}.message__subject{font-weight:500;font-size:.9rem;color:var(--color-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message__snippet{margin:0;font-size:.85rem;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message__meta{display:flex;align-items:center;gap:var(--space-8);flex-shrink:0;font-size:.8rem;color:var(--color-text-muted)}.message__time{white-space:nowrap}.message__attachment-badge{display:inline-flex;align-items:center;gap:var(--space-4);font-size:.75rem;color:var(--color-text-muted)}@media(max-width:768px){.message{flex-direction:column;align-items:flex-start}.message__top-row{width:100%}.message__from{min-width:auto}.message__meta{align-self:flex-end}}.empty-state{text-align:center;padding:var(--space-32);color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-muted)}.empty-state h4{margin:0 0 var(--space-12);font-size:1.1rem;color:var(--color-text)}.hint{font-size:.85rem;color:var(--color-text-muted);line-height:1.5}.code-block{font-family:var(--font-family-mono);background:var(--color-surface-muted);padding:var(--space-8) var(--space-12);border-radius:var(--radius-lg);display:inline-flex;gap:var(--space-8);align-items:center;font-size:.85rem}.note{margin-top:var(--space-16);padding:var(--space-16);border-radius:var(--radius-lg);background:var(--color-surface-muted);border:1px solid var(--color-border-light);color:var(--color-text-secondary);font-size:.85rem;line-height:1.4}.note code{font-family:var(--font-family-mono);font-size:.8rem;background:none;color:var(--color-text)}.modal-close{justify-self:end;width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);display:grid;place-items:center;transition:background .18s cubic-bezier(.22,1,.36,1)}.modal-close:hover{background:var(--color-surface-muted)}.modal-meta{font-size:.9rem;color:var(--color-text-secondary);display:flex;flex-wrap:wrap;gap:var(--space-8)}.rich-text{font-size:.95rem;line-height:1.6}.rich-text a{color:var(--color-primary);text-decoration:underline}.message-text{white-space:pre-wrap;font-size:.95rem;line-height:1.6;color:var(--color-text)}.btn-full{width:100%;justify-content:center}.btn-danger{background:#ef44441f;color:#e11d48}.btn-danger:hover{background:#ef44442e}.card-header-split{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16)}.card-actions{display:flex;gap:var(--space-12);flex-wrap:wrap}.card-subtitle{margin:var(--space-4) 0 0;color:var(--color-text-secondary);font-size:.95rem;line-height:1.5;font-weight:400}.modal{background:#0f172a99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal .modal-content{max-width:900px;width:95%;max-height:90vh;display:flex;flex-direction:column}.modal .modal-header{background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);padding:var(--space-20)}.modal .modal-body{overflow-y:auto;max-height:calc(90vh - 120px);padding:var(--space-20)}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.card-header-split{flex-direction:column;align-items:flex-start}.input-row{flex-direction:column}.app-nav__inner{flex-direction:column;align-items:flex-start}.nav-links{width:100%;justify-content:space-between}}