:root{--app-header-height: 80px;--app-panel-height: 56px;--app-sidebar-width: 256px;--app-content-padding: 20px;--app-content-padding-inline: 20px;--app-radius-sm: 12px;--app-radius-md: 16px;--app-radius-lg: 24px;--app-radius-xl: 32px;--z-header: 100;--z-sidebar: 50;--z-panel: 40;--z-content: 30;--z-backdrop: 10;--z-island-backdrop: 90;--motion-duration-instant: .1s;--motion-duration-fast: .15s;--motion-duration-normal: .2s;--motion-duration-relaxed: .3s;--motion-duration-slow: .5s;--motion-ease: cubic-bezier(.4, 0, .2, 1);--motion-ease-out: cubic-bezier(0, 0, .2, 1);--motion-ease-in: cubic-bezier(.4, 0, 1, 1);--motion-ease-apple: cubic-bezier(.22, 1, .36, 1);--app-transition-fast: var(--motion-duration-fast) var(--motion-ease);--app-transition-normal: var(--motion-duration-normal) var(--motion-ease);--app-transition-smooth: var(--motion-duration-relaxed) var(--motion-ease-apple);--app-spring-easing: var(--motion-ease-apple);--white: 0 0% 100%;--black: 0 0% 0%;--gray-50: var(--heroui-foreground-50);--gray-100: var(--heroui-foreground-100);--gray-200: var(--heroui-foreground-200);--gray-300: var(--heroui-foreground-300);--gray-400: var(--heroui-foreground-400);--gray-500: var(--heroui-foreground-500);--gray-600: var(--heroui-foreground-600);--gray-700: var(--heroui-foreground-700);--gray-800: var(--heroui-foreground-800);--gray-900: var(--heroui-foreground-900);--gray-1: var(--gray-50);--gray-2: var(--gray-100);--gray-3: var(--gray-200);--gray-4: var(--gray-300);--gray-5: var(--gray-400);--gray-6: var(--gray-500);--gray-7: var(--gray-600);--gray-8: var(--gray-700);--gray-9: var(--gray-800);--gray-10: var(--gray-900);--gray-11: var(--gray-900);--gray-900-a2: hsl(var(--gray-900) / .02);--gray-900-a4: hsl(var(--gray-900) / .04);--gray-900-a6: hsl(var(--gray-900) / .06);--gray-900-a8: hsl(var(--gray-900) / .08);--gray-900-a10: hsl(var(--gray-900) / .1);--gray-900-a12: hsl(var(--gray-900) / .12);--gray-900-a16: hsl(var(--gray-900) / .16);--gray-900-a20: hsl(var(--gray-900) / .2);--app-surface-base: hsl(var(--white) / .72);--app-surface-elevated: hsl(var(--white) / .88);--app-surface-overlay: hsl(var(--white) / .95);--app-surface-panel: hsl(var(--white) / .16);--app-blur-sm: 8px;--app-blur-md: 16px;--app-blur-lg: 24px;--app-border-subtle: var(--gray-900-a4);--app-border-default: var(--gray-900-a6);--app-border-strong: var(--gray-900-a12)}.app-shell{display:flex;flex-direction:column;height:100dvh;width:100%;overflow:hidden;position:relative}.app-shell--with-nav-rail{--app-nav-rail-offset: calc(52px + var(--app-content-padding-inline) + 12px)}.app-shell--with-nav-rail .app-main{padding-left:var(--app-nav-rail-offset)}.app-shell--full-bleed .app-content-inner{padding:0}.app-header{position:fixed;top:0;left:0;right:0;height:var(--app-header-height);z-index:var(--z-header);display:flex;align-items:center;justify-content:center;padding:8px 20px;box-sizing:border-box}.app-header>*{max-height:calc(var(--app-header-height) - 16px)}.app-header-spacer{height:var(--app-header-height);flex-shrink:0}.app-main{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 var(--app-content-padding-inline) var(--app-content-padding-inline) 0;overflow:hidden}.app-canvas{position:relative;flex:1;min-height:0;display:flex;border-radius:var(--app-radius-lg);border:1px solid var(--app-border-default);background:var(--app-surface-panel);backdrop-filter:blur(var(--app-blur-sm));overflow:hidden}.app-sidebar{width:var(--app-sidebar-width);flex-shrink:0;display:flex;flex-direction:column;transition:width var(--app-transition-smooth),opacity var(--app-transition-smooth),transform var(--app-transition-smooth)}.app-sidebar--left{border-right:1px solid var(--app-border-subtle)}.app-sidebar--right{border-left:1px solid var(--app-border-subtle)}.app-sidebar--hidden{width:0;opacity:0;overflow:hidden;pointer-events:none}.app-sidebar--no-animation{transition:none}.app-content-area{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}.app-nav-panel{height:var(--app-panel-height);flex-shrink:0;display:flex;align-items:stretch;background:var(--app-surface-panel);backdrop-filter:blur(var(--app-blur-md));overflow:hidden}.app-nav-panel>*{flex:1;width:100%}.app-nav-panel--top{border-bottom:1px solid var(--app-border-subtle);border-radius:var(--app-radius-lg) var(--app-radius-lg) 0 0}.app-nav-panel--bottom{border-top:1px solid var(--app-border-subtle);border-radius:0 0 var(--app-radius-lg) var(--app-radius-lg)}.app-nav-panel--hidden{height:0;overflow:hidden;opacity:0;border:none}.app-scroll-container{flex:1;min-height:0;min-width:0}.app-scroll-viewport{height:100%;width:100%;overscroll-behavior:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:transparent transparent}.app-scroll-container:hover{scrollbar-color:hsl(var(--gray-900) / .2) transparent}.app-scroll-container::-webkit-scrollbar{width:8px}.app-scroll-container::-webkit-scrollbar-track{background:transparent}.app-scroll-container::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;background-clip:content-box;border:2px solid transparent;transition:background-color .16s ease-out}.app-scroll-container:hover::-webkit-scrollbar-thumb{background-color:hsl(var(--gray-900) / .2)}.app-scroll-container::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--gray-900) / .35)}.app-content-inner{position:relative;padding:var(--app-content-padding);min-height:100%}.app-content-inner--fixed-height{flex:1 1 0%;min-height:0;min-width:0;box-sizing:border-box}.app-scroll-container:has(.app-content-inner--fixed-height){overflow:hidden;display:flex;flex-direction:column;flex:1 1 0%;min-height:0}.app-content-inner--full-bleed{padding:0}.app-content-inner--elevated{background:var(--app-surface-elevated);backdrop-filter:blur(var(--app-blur-lg));border-radius:var(--app-radius-md)}.app-frosted{background:var(--app-surface-base);backdrop-filter:blur(var(--app-blur-lg));-webkit-backdrop-filter:blur(var(--app-blur-lg))}.app-frosted-elevated{background:var(--app-surface-elevated);backdrop-filter:blur(var(--app-blur-lg));-webkit-backdrop-filter:blur(var(--app-blur-lg))}.app-fill{flex:1 1 0%;min-width:0;min-height:0}.app-content-readable{width:100%;max-width:780px;margin-inline:auto}.app-content-wide{width:100%;max-width:1200px;margin-inline:auto}.app-section-padding{padding:var(--app-content-padding)}.app-section-padding-inline{padding-inline:var(--app-content-padding-inline)}.app-card{background:var(--app-surface-panel);border:1px solid var(--app-border-default);border-radius:var(--app-radius-md);backdrop-filter:blur(var(--app-blur-sm))}.app-card--elevated{background:var(--app-surface-elevated);backdrop-filter:blur(var(--app-blur-lg))}.auth-canvas{background:transparent;border:none}.auth-content-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:var(--app-content-padding)}.app-nav-rail{position:fixed;left:var(--app-content-padding-inline);top:50%;transform:translateY(-50%);z-index:var(--z-sidebar);pointer-events:auto;height:600px;max-width:48px;background:transparent}.app-sheet-portal{position:absolute;inset:0;pointer-events:none;z-index:60;overflow:hidden;border-radius:inherit}.app-sheet-portal>*{pointer-events:auto}