:root{--radius: 0.5rem;--radius-sm: calc(var(--radius) - 4px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 4px);--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 0.75rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--spacing-2xl: 1.5rem;--spacing-3xl: 2rem;--spacing-4xl: 3rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-colors: color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px}:root,.light{--background: hsl(0, 0%, 100%);--alt-background: hsl(240 4.8% 95.9%);--foreground: hsl(240, 10%, 3.9%);--card: oklch(100% 0 0);--card-foreground: hsl(240, 10%, 3.9%);--popover: hsl(0, 0%, 100%);--popover-foreground: hsl(240, 10%, 3.9%);--primary: hsl(240, 5.9%, 10%);--primary-hover: hsl(240, 5.9%, 10%, 0.9);--primary-foreground: hsl(0, 0%, 98%);--secondary: hsl(240, 4.8%, 95.9%);--secondary-hover: hsl(240, 4.8%, 95.9%, 0.8);--secondary-foreground: hsl(240, 5.9%, 10%);--muted: hsl(240, 4.8%, 95.9%);--muted-foreground: hsl(240, 3.8%, 46.1%);--accent: hsl(240, 4.8%, 95.9%);--accent-foreground: hsl(240, 5.9%, 10%);--destructive: hsl(0, 84.2%, 60.2%);--destructive-hover: hsl(0, 84.2%, 60.2%, 0.9);--destructive-foreground: hsl(0, 0%, 98%);--border: hsl(240, 5.9%, 90%);--input: hsl(240, 5.9%, 90%);--ring: hsl(240, 5.9%, 10%);--info-color: hsl(210, 100%, 50%);--info-color-light: hsla(210, 100%, 50%, 0.1);--success-color: hsl(120, 100%, 25%);--success-color-light: hsla(120, 100%, 25%, 0.12);--warning-color: hsl(45, 100%, 50%);--warning-color-light: hsla(45, 100%, 50%, 0.15);--error-color: hsl(0, 100%, 50%);--error-color-light: hsla(0, 100%, 50%, 0.08)}@media(prefers-color-scheme: dark){:root:not(.light),.dark:not(.light){--background: hsl(240, 10%, 3.9%);--alt-background: hsl(240 3.7% 15.9%);--foreground: hsl(0, 0%, 98%);--card: oklch(26.9% 0 0);--card-foreground: hsl(0, 0%, 98%);--primary: hsl(0, 0%, 98%);--primary-hover: hsl(0, 0%, 98%, 0.9);--primary-foreground: hsl(240, 5.9%, 10%);--secondary: hsl(240, 3.7%, 15.9%);--secondary-hover: hsl(240, 3.7%, 15.9%, 0.8);--secondary-foreground: hsl(0, 0%, 98%);--muted: hsl(240, 3.7%, 15.9%);--muted-foreground: hsl(240, 5%, 64.9%);--accent: hsl(240, 3.7%, 15.9%);--accent-foreground: hsl(0, 0%, 98%);--destructive: hsl(0, 62.8%, 30.6%);--destructive-foreground: hsl(0, 0%, 98%);--border: hsl(240, 3.7%, 15.9%);--input: hsl(240, 3.7%, 15.9%);--ring: hsl(240, 4.9%, 83.9%);--info-color: hsl(210, 100%, 50%);--info-color-light: hsla(210, 100%, 50%, 0.1);--success-color: hsl(120, 100%, 25%);--success-color-light: hsla(120, 100%, 25%, 0.12);--warning-color: hsl(45, 100%, 50%);--warning-color-light: hsla(45, 100%, 50%, 0.15);--error-color: hsl(0, 100%, 50%);--error-color-light: hsla(0, 100%, 50%, 0.1)}}*,*::before,*::after{box-sizing:border-box}*{margin:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%}body{height:100%;line-height:var(--leading-normal);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background-color:var(--background);color:var(--foreground);font-feature-settings:"rlig" 1,"calt" 1}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}a{text-decoration:underline;color:var(--foreground);cursor:pointer;font-family:inherit}a.hover{text-decoration:none}a.hover:hover{text-decoration:underline}.app-layout{min-height:100vh;background-color:var(--background);display:flex;flex-direction:column}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-lg)}@media(min-width: 768px){.container{padding:0 var(--spacing-3xl)}}.page-main{flex:1;padding:var(--spacing-2xl) 0}content-section,.content-section{display:flex;flex-direction:column;gap:var(--spacing-2xl)}hero-section,.hero-section{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-3xl)}.grid{display:grid;gap:var(--spacing-lg)}.grid.cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}@media(max-width: 767px){.grid.cols-2{grid-template-columns:1fr}}.grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}@media(max-width: 1023px){.grid.cols-3{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media(max-width: 767px){.grid.cols-3{grid-template-columns:1fr}}.button-group{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.text-center{text-align:center}.flex{display:flex}.flex.col{flex-direction:column}.flex.center{align-content:center;justify-content:center}.flex.center-items{align-items:center}.flex.between{justify-content:space-between}.flex.between-items{justify:space-between}.flex.gap-sm{gap:var(--spacing-sm)}.flex.gap-md{gap:var(--spacing-md)}.flex.gap-lg{gap:var(--spacing-lg)}h1,h2,h3,h4,h5,h6,.heading{font-weight:var(--font-bold);line-height:var(--leading-tight);color:var(--foreground)}h1,.heading.xxxl{font-size:var(--text-3xl);letter-spacing:-0.025em}h2,.heading.xxl{font-size:var(--text-2xl)}h3,.heading.xl{font-size:var(--text-xl)}h4,.heading.lg{font-size:var(--text-lg)}h5,.heading.md{font-size:var(--text-base)}h6,.heading.sm{font-size:var(--text-sm)}.text{line-height:var(--leading-normal);color:var(--foreground)}.text.muted{color:var(--muted-foreground)}.text.lg{font-size:var(--text-lg)}.text.base{font-size:var(--text-base)}.text.sm{font-size:var(--text-sm)}.text.xs{font-size:var(--text-xs)}.text.center{text-align:center}.text.semibold{font-weight:var(--font-semibold)}.text.bold{font-weight:var(--font-bold)}.text.medium{font-weight:var(--font-medium)}.text-divider{display:flex;align-items:center;width:100%}.text-divider .divider-line{flex:1;height:2px;background-color:var(--border)}.text-divider .divider-text{color:var(--muted-foreground);font-weight:var(--font-medium);white-space:nowrap;padding:0 8px}.text-divider .divider-text.text-divider--sm{font-size:var(--text-xs)}.text-divider .divider-text.text-divider--md{font-size:var(--text-sm)}.text-divider .divider-text.text-divider--lg{font-size:var(--text-base)}.unstyled{text-decoration:none}.alert{border-radius:var(--radius-lg);border:1px solid var(--border);color:var(--card-foreground);box-shadow:var(--shadow-md);overflow:hidden;padding:var(--spacing-lg)}.alert--info{background-color:var(--info-color-light);backdrop-filter:blur(8px)}.alert--info svg{fill:var(--info-color)}.alert--success{background-color:var(--success-color-light);backdrop-filter:blur(8px)}.alert--success svg{fill:var(--success-color)}.alert--warning{background-color:var(--warning-color-light);backdrop-filter:blur(8px)}.alert--warning svg{fill:var(--warning-color)}.alert--error{background-color:var(--error-color-light);backdrop-filter:blur(8px)}.alert--error svg{fill:var(--error-color)}.alert__title{font-weight:var(--font-semibold);line-height:var(--leading-tight)}.alert__description{font-size:var(--text-sm);color:var(--muted-foreground);line-height:var(--leading-normal)}.avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--foreground);border:1px solid var(--border);width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);font-weight:var(--font-medium);color:var(--foreground)}.avatar--sm{width:2rem;height:2rem}.avatar--md{width:2.5rem;height:2.5rem}.avatar--lg{width:3rem;height:3rem}.avatar--circle{border-radius:50%}.avatar--square{border-radius:var(--radius-sm)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar svg{width:80%;height:80%;object-fit:cover;fill:var(--alt-background);stroke:var(--alt-background)}.avatar--sm{font-size:.75rem}.avatar--md{font-size:.875rem}.avatar--lg{font-size:1rem}.badge{display:inline-flex;align-items:center;border-radius:var(--radius);padding:var(--spacing-xs) calc(var(--spacing-xs)*2);font-size:var(--text-xs);font-weight:var(--font-semibold);line-height:1;transition:var(--transition-colors);border:1px solid rgba(0,0,0,0);background-color:var(--primary);color:var(--primary-foreground);height:calc(var(--text-xs) + 2*var(--spacing-xs))}.badge--primary{background-color:var(--primary);color:var(--primary-foreground)}.badge--secondary{background-color:var(--secondary);color:var(--secondary-foreground)}.badge--destructive{background-color:var(--destructive);color:var(--destructive-foreground)}.badge--outline{background-color:rgba(0,0,0,0)}.badge--sm{padding:var(--spacing-xs) calc(var(--spacing-xs)*2);font-size:var(--text-xs);height:calc(var(--text-xs) + 2*var(--spacing-xs))}.badge--md{padding:var(--spacing-xs) var(--spacing-xs);font-size:var(--text-sm);height:calc(var(--text-sm) + 2*var(--spacing-xs))}.badge--lg{padding:var(--spacing-sm) var(--spacing-sm);font-size:var(--text-base);height:calc(var(--text-base) + 2*var(--spacing-xs))}.badge--rounded{border-radius:var(--radius)}.badge--circle{border-radius:50%;width:calc(var(--text-xs) + 2*var(--spacing-xs));height:calc(var(--text-xs) + 2*var(--spacing-xs));display:flex;align-items:center;justify-content:center}.badge--info,.badge--success,.badge--warning,.badge--error,.badge--outline{border:1px solid var(--border);color:var(--foreground)}button,.button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:var(--text-sm);font-weight:var(--font-medium);transition:var(--transition-colors);border:none;cursor:pointer;text-decoration:none;outline:none;border-radius:var(--radius);padding:var(--spacing-sm) var(--spacing-lg);position:relative}button:focus-visible,.button:focus-visible{outline:2px solid rgba(0,0,0,0);outline-offset:2px;box-shadow:0 0 0 2px var(--ring)}button:disabled,.button:disabled{pointer-events:none;opacity:.5}button--primary,.button--primary{background-color:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}button--primary:hover:not(:disabled),.button--primary:hover:not(:disabled){background-color:var(--primary-hover)}button--primary .button__spinner,.button--primary .button__spinner{border-top-color:var(--primary-foreground)}button--secondary,.button--secondary{background-color:var(--secondary);color:var(--secondary-foreground);box-shadow:var(--shadow-sm)}button--secondary:hover:not(:disabled),.button--secondary:hover:not(:disabled){background-color:var(--secondary-hover)}button--outline,.button--outline{border:1px solid var(--input);background-color:var(--background);color:var(--foreground);box-shadow:var(--shadow-sm)}button--outline:hover:not(:disabled),.button--outline:hover:not(:disabled){background-color:var(--accent);color:var(--accent-foreground)}button--ghost,.button--ghost{background-color:rgba(0,0,0,0);color:var(--foreground)}button--ghost:hover:not(:disabled),.button--ghost:hover:not(:disabled){background-color:var(--accent);color:var(--accent-foreground)}button--destructive,.button--destructive{background-color:var(--destructive);color:var(--destructive-foreground);box-shadow:var(--shadow-sm)}button--destructive:hover:not(:disabled),.button--destructive:hover:not(:disabled){background-color:var(--destructive-hover)}button--link,.button--link{background-color:rgba(0,0,0,0);color:var(--primary);text-decoration:underline;text-underline-offset:4px}button--link:hover:not(:disabled),.button--link:hover:not(:disabled){text-decoration:none}button--sm,.button--sm{height:2rem;padding:var(--spacing-xs) var(--spacing-md);font-size:var(--text-xs)}button--md,.button--md{height:2.5rem;padding:var(--spacing-sm) var(--spacing-lg)}button--lg,.button--lg{height:2.75rem;padding:var(--spacing-md) var(--spacing-3xl)}button--icon,.button--icon{height:2.25rem;width:2.25rem;padding:0}button--loading,.button--loading{cursor:not-allowed;gap:var(--spacing-sm)}button .button__spinner,.button .button__spinner{width:1rem;height:1rem;border:2px solid rgba(0,0,0,0);border-top-color:var(--secondary-foreground);border-radius:50%;animation:spin 1s linear infinite}button .button__content,.button .button__content{display:flex;align-items:center;gap:var(--spacing-sm);transition:opacity var(--transition-fast)}.card{border-radius:var(--radius-lg);border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-md);overflow:hidden;padding:var(--spacing-2xl)}.card .header{display:flex;flex-direction:column;gap:var(--spacing-xs);padding-bottom:0}.card .title{font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--card-foreground)}.card .description{font-size:var(--text-sm);color:var(--muted-foreground);line-height:var(--leading-normal)}.card .content{margin-top:var(--spacing-lg)}.card .footer{display:flex;align-items:center;padding-top:0}.dropdown-menu__content{position:absolute;z-index:50;min-width:128px;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);background-color:var(--card);padding:var(--spacing-sm);color:var(--card-foreground);box-shadow:var(--shadow-md);display:block;margin-top:var(--spacing-xs);max-width:512px;white-space:nowrap}.dropdown-menu__label{padding:var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--foreground);user-select:none;overflow:hidden;text-overflow:ellipsis}.dropdown-menu{position:relative;display:inline-block}.dropdown-menu .dropdown-menu__content{position:absolute;top:100%;left:0}.dropdown-menu .dropdown-menu__content--align-left{left:0;right:auto;transform:none}.dropdown-menu .dropdown-menu__content--align-center{left:50%;right:auto;transform:translateX(-50%)}.dropdown-menu .dropdown-menu__content--align-right{left:auto;right:0;transform:none}.dropdown-menu__item{display:block;width:100%;text-align:left;border:0;background:rgba(0,0,0,0);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius);color:var(--foreground);cursor:pointer;font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-normal);line-height:var(--leading-normal)}.dropdown-menu__item:hover{background-color:var(--accent);color:var(--accent-foreground);text-decoration:none}.dropdown-menu__item:disabled{opacity:.5;cursor:not-allowed}.dropdown-menu__separator{height:1px;width:100%;background-color:var(--border);margin:var(--spacing-xs) 0}.dropdown-menu__content a.dropdown-menu__item{text-decoration:none;color:var(--foreground);display:block;font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-normal);line-height:var(--leading-normal)}.dropdown-menu__content a.dropdown-menu__item:hover,.dropdown-menu__content a.dropdown-menu__item:focus-visible{text-decoration:none}.input{display:flex;width:100%;border-radius:var(--radius);border:1px solid var(--input);background-color:var(--background);color:var(--foreground);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);transition:var(--transition-colors);outline:none}.input::placeholder{color:var(--muted-foreground)}.input:focus{outline:2px solid rgba(0,0,0,0);outline-offset:2px;box-shadow:0 0 0 2px var(--ring)}.input:disabled{cursor:not-allowed;opacity:.5}.input--sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-xs)}.input--md{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-sm)}.input--lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--text-base)}.label{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--foreground)}.label:has(+input:disabled){cursor:not-allowed;opacity:.7}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-message{font-size:var(--text-sm);color:var(--muted-foreground)}.form-message.error{color:var(--destructive)}.form-message.success{color:var(--primary)}.navbar{border-bottom:1px solid var(--border);background-color:var(--background)}.navbar .container{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:var(--spacing-2xl)}@media(min-width: 768px){.navbar .container{gap:var(--spacing-4xl)}}.navbar .content{display:flex;align-items:center;gap:var(--spacing-2xl);flex:1;justify-content:space-between}.navbar .brand{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--foreground);text-decoration:none;transition:var(--transition-colors)}.navbar .brand:hover{color:var(--primary)}.navbar .nav{display:flex;gap:var(--spacing-2xl)}.navbar .actions{display:flex;align-items:center;gap:var(--spacing-sm)}.navbar .link{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--muted-foreground);text-decoration:none;transition:var(--transition-colors)}.navbar .link:hover{color:var(--primary)}.navbar .link.active{color:var(--foreground)}.sidebar{background-color:var(--background);border-right:1px solid var(--border);box-shadow:0 0 10px rgba(0,0,0,.1);width:280px;height:100vh;display:flex;flex-direction:column}.sidebar__header{padding:1rem;border-bottom:1px solid var(--border);background-color:var(--alt-background);font-weight:var(--font-semibold)}.sidebar__content{flex-grow:1;overflow-y:auto;padding:.5rem}.sidebar__group{margin-bottom:1rem}.sidebar__group:last-child{margin-bottom:0}.sidebar__group .sidebar__group-title{font-size:var(--text-sm);color:var(--muted-foreground);letter-spacing:.05em;padding:.5rem}.sidebar__group a{display:block;font-size:var(--text-sm);font-weight:var(--font-semibold);padding:.5rem;border-radius:4px;text-decoration:none;color:var(--foreground);transition:background-color .2s ease-in-out}.sidebar__group a:hover{background-color:var(--secondary)}.sidebar__group a.active{background-color:var(--primary);color:var(--primary-foreground)}.sidebar__footer{padding:1rem;border-top:1px solid var(--border);background-color:var(--alt-background);text-align:center}.sidebar__container{display:flex;flex-direction:row;height:100%;width:100%}.sidebar__container .sidebar__container-sidebar{flex-shrink:0}.sidebar__container .sidebar__container-content{flex-grow:1;overflow:auto}.theme-toggle{position:relative}.theme-toggle .theme-toggle__icon{width:1rem;height:1rem;transition:all var(--transition-fast)}.theme-toggle:hover .theme-toggle__icon{transform:scale(1.1)}.theme-toggle:active .theme-toggle__icon{transform:scale(0.9)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.w-full{width:100%}.h-full{height:100%}.rounded{border-radius:var(--radius)}.shadow{box-shadow:var(--shadow)}.transition{transition:var(--transition-fast)}.alt-bg{background-color:var(--alt-background)}.bg-info,.badge--info{background-color:var(--info-color-light);color:var(--info-color)}.bg-success,.badge--success{background-color:var(--success-color-light);color:var(--success-color)}.bg-warning,.badge--warning{background-color:var(--warning-color-light);color:var(--warning-color)}.bg-error,.badge--error{background-color:var(--error-color-light);color:var(--error-color)}.pos--top-left{position:absolute;top:0;left:0}.pos--top-center{position:absolute;top:0;left:50%;transform:translateX(-50%)}.pos--top-right{position:absolute;top:0;right:0}.pos--middle-left{position:absolute;top:50%;left:0;transform:translateY(-50%)}.pos--middle-center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.pos--middle-right{position:absolute;top:50%;right:0;transform:translateY(-50%)}.pos--bottom-left{position:absolute;bottom:0;left:0}.pos--bottom-center{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.pos--bottom-right{position:absolute;bottom:0;right:0}@media print{.no-print{display:none !important}*{background-color:rgba(0,0,0,0) !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.button,.badge{border:1px solid #000}.navbar,.theme-toggle{display:none}}demo-sections,.demo-sections{display:flex;flex-direction:column;gap:var(--spacing-4xl)}demo-grid,.demo-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-lg)}demo-grid.aligned,.demo-grid.aligned{align-items:center}