@layer theme{:root{--color-primary-50: oklch(.3753 0 0);--color-primary-50-foreground: oklch(.2603 0 0);--color-primary-500: oklch(.6733 0 0);--color-primary-500-foreground: oklch(.9713 0 0);--color-primary-600: oklch(.5733 0 0);--color-primary-600-foreground: oklch(.7713 0 0);--color-primary-700: oklch(.4733 0 0);--color-primary-700-foreground: oklch(.5713 0 0);--color-background-main: oklch(.252 0 0);--color-background-main-foreground: oklch(.8206 .0014 286.37);--color-surface-main: oklch(.2046 0 0);--color-surface-main-hover: oklch(.3327 0 0);--color-surface-main-foreground: oklch(.8206 .0014 286.37);--color-gray-50: oklch(.6927 0 0);--color-gray-100: oklch(.6727 0 0);--color-gray-200: oklch(.6327 0 0);--color-gray-300: oklch(.5627 0 0);--color-gray-400: oklch(.4427 0 0);--color-gray-500: oklch(.3727 0 0);--color-gray-600: oklch(.3327 0 0);--color-gray-700: oklch(.2727 0 0);--color-gray-800: oklch(.1927 0 0);--color-gray-900: oklch(.1227 0 0);--color-error-500: oklch(.58 .22 25);--color-error-600: oklch(.48 .22 25);--color-success-500: oklch(.65 .18 145);--color-warning-500: oklch(.72 .17 75);--color-white: oklch(1 0 0);--color-border: oklch(.2931 0 0);--color-border-strong: oklch(.6227 0 0);--color-main-text: oklch(.8206 .0014 286.37);--color-secondary-text: oklch(.6993 0 0);--avatar-size-sm: 32px;--avatar-size-md: 48px;--avatar-size-lg: 80px;--button-height-sm: 32px;--button-height-md: 40px;--button-height-lg: 48px;--z-dropdown: 100;--z-modal: 300;--z-popover: 400;--z-tooltip: 500;--z-toast: 600;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--border-radius-xl: 24px;--border-radius-2xl: 32px;--border-radius-3xl: 40px;--border-radius-4xl: 48px;--border-radius-full: 9999px;--shadow-sm: 0 2px 4px oklch(0 0 0 / .2);--shadow-md: 0 4px 6px -1px oklch(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / .1);--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s}@supports (color: oklch(from white l c h)){:root{--color-primary-500: oklch(from var(--color-primary-50) calc(l + .298) c h);--color-primary-500-foreground: oklch(from var(--color-primary-500) calc(l + .298) c h);--color-primary-600: oklch(from var(--color-primary-50) calc(l + .198) c h);--color-primary-600-foreground: oklch(from var(--color-primary-600) calc(l + .198) c h);--color-primary-700: oklch(from var(--color-primary-50) calc(l + .098) c h);--color-primary-700-foreground: oklch(from var(--color-primary-700) calc(l + .098) c h);--color-gray-50: oklch(.6927 0 0);--color-gray-100: oklch(from var(--color-gray-50) calc(l - .02) c h);--color-gray-200: oklch(from var(--color-gray-50) calc(l - .06) c h);--color-gray-300: oklch(from var(--color-gray-50) calc(l - .13) c h);--color-gray-400: oklch(from var(--color-gray-50) calc(l - .25) c h);--color-gray-500: oklch(from var(--color-gray-50) calc(l - .32) c h);--color-gray-600: oklch(from var(--color-gray-50) calc(l - .36) c h);--color-gray-700: oklch(from var(--color-gray-50) calc(l - .42) c h);--color-gray-800: oklch(from var(--color-gray-50) calc(l - .5) c h);--color-gray-900: oklch(from var(--color-gray-50) calc(l - .57) c h);--color-error-600: oklch(from var(--color-error-500) calc(l - .1) c h);--color-border-strong: oklch(from var(--color-gray-900) calc(l + .5) c h)}}}@layer app-header{:root{--app-header-height: 138px;--app-header-x-padding: min(9.25vw, 133px)}.app-header{height:var(--app-header-height);display:flex;align-items:center;padding:0 var(--app-header-x-padding)}.app-header__nav{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);flex:1}.app-header__home-link{color:var(--color-main-text);text-decoration:none;transition:color var(--transition-base);font-weight:500}.app-header__home-link:hover{color:var(--color-primary-500)}.app-header__auth-links{display:flex;gap:var(--space-md);align-items:center}.app-header__auth-link{color:var(--color-main-text);text-decoration:none;transition:color var(--transition-base);font-size:var(--font-size-sm)}.app-header__auth-link:hover{color:var(--color-primary-500)}}.avatar{display:inline-flex;border-radius:var(--border-radius-full);overflow:hidden}.avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm)}.avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md)}.avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg)}.avatar__image{width:100%;height:100%;object-fit:cover}.avatar__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);color:var(--color-gray-600);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}@layer button{.button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--border-radius-sm);font-family:var(--font-family);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base)}.button--primary{background:var(--color-primary-500);color:var(--color-white)}.button--primary:hover:not([data-disabled]){background:var(--color-primary-600)}.button--secondary{background:transparent;color:var(--color-primary-500);border:1px solid var(--color-primary-500)}.button--ghost{background:transparent;color:var(--color-gray-800)}.button--sm{height:var(--button-height-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.button--md{height:var(--button-height-md);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.button--lg{height:var(--button-height-lg);padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base)}.button[data-disabled]{opacity:.5;cursor:not-allowed}.button:disabled{opacity:.5;cursor:not-allowed}.button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}}@layer checkbox{.checkbox{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer}.checkbox__control{width:20px;height:20px;border:2px solid var(--color-border-strong);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);background:var(--color-white)}.checkbox__control:hover{border-color:var(--color-primary-500)}[data-scope=checkbox][data-part=control][data-state=checked],[data-scope=checkbox][data-part=control][data-state=indeterminate]{background:var(--color-primary-500);border-color:var(--color-primary-500)}.checkbox__indicator{color:var(--color-white);display:flex;align-items:center;justify-content:center}.checkbox__label{font-size:var(--font-size-sm);color:var(--color-gray-800)}[data-scope=checkbox][data-part=root][data-disabled]{opacity:.5;cursor:not-allowed}}@layer field{.field{display:flex;flex-direction:column;gap:var(--space-xs)}.field__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800)}.field__input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-family:var(--font-family);color:var(--color-gray-800);background:var(--color-white);transition:all var(--transition-base)}.field__input::placeholder{color:var(--color-gray-500)}.field__input:hover{border-color:var(--color-primary-500)}.field__input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #667eea1a}.field__input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-gray-100)}[data-scope=field][data-part=input][data-invalid]{border-color:var(--color-error-500)}[data-scope=field][data-part=input][data-invalid]:focus{box-shadow:0 0 0 3px #dc26261a}.field__helper-text{font-size:var(--font-size-xs);color:var(--color-gray-500)}.field__error-text{font-size:var(--font-size-xs);color:var(--color-error-500)}}@layer fieldset{.fieldset{display:flex;flex-direction:column;gap:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--space-md)}.fieldset__legend{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800);padding:0 var(--space-xs)}.fieldset__helper-text{font-size:var(--font-size-xs);color:var(--color-gray-500);margin-top:var(--space-xs)}.fieldset__error-text{font-size:var(--font-size-xs);color:var(--color-error-500);margin-top:var(--space-xs)}}@layer password-input{.password-input{display:flex;flex-direction:column;gap:var(--space-xs)}.password-input__input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-family:var(--font-family);color:var(--color-gray-800);background:var(--color-white);transition:all var(--transition-base)}.password-input__input::placeholder{color:var(--color-gray-500)}.password-input__input:hover{border-color:var(--color-primary-500)}.password-input__input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #667eea1a}.password-input__input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-gray-100)}.password-input__visibility-trigger{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm);border:none;background:transparent;color:var(--color-gray-600);cursor:pointer;border-radius:var(--border-radius-sm);transition:all var(--transition-base)}.password-input__visibility-trigger:hover{background:var(--color-gray-50);color:var(--color-gray-800)}.password-input__visibility-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}}@layer pill-button{.pill-button{border-radius:var(--border-radius-full);border:1px solid var(--color-primary-500);background:var(--color-primary-50);color:var(--color-primary-500);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-base)}.pill-button--sm{height:24px;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.pill-button--md{height:28px;padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm)}.pill-button:hover:not([data-disabled]):not([disabled]):not(:disabled){background:var(--color-primary-500);color:var(--color-white)}.pill-button[data-disabled]{opacity:.5;cursor:not-allowed}.pill-button:disabled{opacity:.5;cursor:not-allowed}}@layer post{.post-container{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit}}@layer radio-group{.radio-group{display:flex;flex-direction:column;gap:var(--space-sm)}.radio-group__item{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer}.radio-group__item-control{width:20px;height:20px;border:2px solid var(--color-border-strong);border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);background:var(--color-white)}.radio-group__item-control:hover,[data-scope=radio-group][data-part=item-control][data-state=checked]{border-color:var(--color-primary-500)}.radio-group__item-indicator{width:10px;height:10px;border-radius:var(--border-radius-full);background:var(--color-primary-500);opacity:0;transition:opacity var(--transition-fast)}[data-scope=radio-group][data-part=item-control][data-state=checked] .radio-group__item-indicator{opacity:1}.radio-group__item-text{font-size:var(--font-size-sm);color:var(--color-gray-800)}.radio-group__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800);margin-bottom:var(--space-sm)}[data-scope=radio-group][data-part=item][data-disabled]{opacity:.5;cursor:not-allowed}}@layer switch{.switch{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer}.switch__control{position:relative;background:var(--color-gray-100);border-radius:var(--border-radius-full);transition:background var(--transition-fast)}.switch--sm .switch__control{width:36px;height:20px;padding:2px}.switch--sm .switch__thumb{width:16px;height:16px}.switch--sm [data-scope=switch][data-part=control][data-state=checked] .switch__thumb{transform:translate(16px)}.switch--md .switch__control{width:44px;height:24px;padding:2px}.switch--md .switch__thumb{width:20px;height:20px}.switch--md [data-scope=switch][data-part=control][data-state=checked] .switch__thumb{transform:translate(20px)}[data-scope=switch][data-part=control][data-state=checked]{background:var(--color-primary-500)}.switch__thumb{background:var(--color-white);border-radius:var(--border-radius-full);transition:transform var(--transition-fast)}.switch__label{font-size:var(--font-size-sm);color:var(--color-gray-800)}[data-scope=switch][data-part=root][data-disabled]{opacity:.5;cursor:not-allowed}}@layer toggle{.toggle{display:inline-flex}.toggle__control{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);background:var(--color-white);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800);cursor:pointer;transition:all var(--transition-base)}.toggle__control:hover:not([data-disabled]){background:var(--color-gray-50);border-color:var(--color-primary-500)}[data-scope=toggle][data-part=control][data-state=on]{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-white)}[data-scope=toggle][data-part=control][data-disabled]{opacity:.5;cursor:not-allowed}.toggle__control:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}}@layer toggle-group{.toggle-group{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);overflow:hidden}.toggle-group__item{display:inline-flex;align-items:center;justify-content:center;border:none;border-right:1px solid var(--color-border);background:var(--color-white);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800);cursor:pointer;transition:all var(--transition-base)}.toggle-group__item:last-child{border-right:none}.toggle-group__item:hover:not([data-disabled]){background:var(--color-gray-50)}[data-scope=toggle-group][data-part=item][data-state=on]{background:var(--color-primary-500);color:var(--color-white)}[data-scope=toggle-group][data-part=item][data-disabled]{opacity:.5;cursor:not-allowed}.toggle-group__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}}@layer popover{.popover{position:relative}.popover__positioner{z-index:var(--z-popover)}.popover__content{z-index:var(--z-popover);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);padding:var(--space-md);max-width:300px}.popover__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-gray-800);margin:0 0 var(--space-xs) 0}.popover__description{font-size:var(--font-size-sm);color:var(--color-gray-600);margin:0 0 var(--space-md) 0}.popover__close-trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--border-radius-sm);background:transparent;color:var(--color-gray-600);cursor:pointer;transition:all var(--transition-base);font-size:var(--font-size-lg);line-height:1}.popover__close-trigger:hover{background:var(--color-gray-50);color:var(--color-gray-800)}.popover__close-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.popover__arrow{--arrow-background: var(--color-white);--arrow-shadow: var(--shadow-lg)}}@layer user-menu{.user-menu{position:relative}.user-menu__avatar-trigger{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center}.user-menu__content{background:var(--color-surface-main);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);min-width:200px;padding:var(--space-xs);z-index:var(--z-popover)}.user-menu__menu{display:flex;flex-direction:column;gap:0}.user-menu__label{display:block;padding:var(--space-sm) var(--space-md);color:var(--color-main-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-xs)}.user-menu__link,.user-menu__button{display:block;text-align:left;padding:var(--space-sm) var(--space-md);color:var(--color-main-text);text-decoration:none;background:transparent;border:none;font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:background-color var(--transition-base);border-radius:var(--border-radius-sm);margin:2px 0}.user-menu__link:hover,.user-menu__button:hover{background:var(--color-surface-main-hover)}.user-menu__link:focus-visible,.user-menu__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}}@layer global{html,body{background-color:var(--color-background-main);color:var(--color-background-main-foreground);margin:0;padding:0;min-height:100vh}.app-layout{display:flex;flex-direction:column;flex:1}.app-main{flex:1;min-height:calc(100vh - var(--app-header-height))}}