/* Calm, fast feedback across the existing workspace. No delayed navigation. */
:root{--ux-fast:140ms;--ux-normal:220ms;--ux-slow:320ms;--ux-ease:cubic-bezier(.22,1,.36,1)}
html{scrollbar-gutter:stable}
.frontend-surface :is(button,a,summary,label){-webkit-tap-highlight-color:transparent}
.frontend-surface :is(button,a,summary){touch-action:manipulation}
.frontend-surface :is(button,a,summary,input,textarea,select):focus-visible{outline:2px solid #708d53;outline-offset:3px}
.frontend-surface :is(button,.library-primary,.library-button,.generate-submit,.home-nav a,.studio-rail a,.header-login,.header-register,summary){transition:background-color var(--ux-fast),border-color var(--ux-fast),color var(--ux-fast),box-shadow var(--ux-normal),opacity var(--ux-fast),transform var(--ux-fast) var(--ux-ease)}
.frontend-surface :is(button,.library-primary,.library-button,.generate-submit,.header-register):active:not(:disabled){transform:translateY(1px) scale(.98)}
.frontend-surface :is(input,textarea,select){transition:border-color var(--ux-fast),box-shadow var(--ux-fast),background-color var(--ux-fast)}
.frontend-surface .page{animation:ux-page-in 240ms var(--ux-ease) both}
@keyframes ux-page-in{from{opacity:.25}to{opacity:1}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(workspace){animation:ux-page-out 100ms ease-out both}
::view-transition-new(workspace){animation:ux-page-in 220ms var(--ux-ease) both}
@keyframes ux-page-out{to{opacity:0}}
.frontend-surface #main-content{view-transition-name:workspace}
.canvas-surface #main-content{view-transition-name:none}
.ux-navigation-progress{position:fixed;z-index:10000;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,#506c3c,#b8d48a);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.ux-navigating .ux-navigation-progress{opacity:1;animation:ux-progress 6s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes ux-progress{0%{transform:scaleX(.08)}45%{transform:scaleX(.72)}100%{transform:scaleX(.92)}}
.frontend-surface :is(.library-card,.history-card,.commerce-result,.studio-composer,.studio-template,.video-template-card,.feature-card,.template-library-card){transition:box-shadow var(--ux-normal),border-color var(--ux-normal),background-color var(--ux-normal)}
@media(hover:hover) and (pointer:fine){
 .frontend-surface :is(.library-card,.history-card,.commerce-result,.video-template-card):hover{border-color:#ccd7be;box-shadow:0 10px 30px #3041250c}
 .studio-rail a:hover .ui-icon{transform:translateY(-2px)}
 .library-card-actions{opacity:.68;transition:opacity var(--ux-fast)}
 .library-card:hover .library-card-actions,.library-card:focus-within .library-card-actions{opacity:1}
}
.studio-rail .ui-icon{transition:transform var(--ux-normal) var(--ux-ease)}
.studio-composer:focus-within{border-color:#a7b795;box-shadow:0 0 0 4px #7c96590b,0 14px 45px #35462b08}
.studio-template .template-overlay{transition:opacity var(--ux-normal),transform var(--ux-normal) var(--ux-ease)}
.studio-template:focus-visible .template-overlay{opacity:1}
.ux-tabs{position:relative;isolation:isolate}
.ux-tabs>button,.ux-tabs>a{position:relative;z-index:1}
.frontend-surface .ux-tabs>button.active,.frontend-surface .ux-tabs>a.active{background:transparent;box-shadow:none}
.ux-tab-marker{position:absolute!important;left:0;top:0;z-index:0;pointer-events:none;border-radius:9px;background:#e7ecdf;transition:transform var(--ux-normal) var(--ux-ease),width var(--ux-normal) var(--ux-ease),height var(--ux-normal) var(--ux-ease)}
.commerce-modes .ux-tab-marker,.studio-mode-tabs .ux-tab-marker{background:#fff;box-shadow:0 2px 7px #263b2110}
.frontend-surface dialog{overscroll-behavior:contain;scrollbar-width:thin}
.frontend-surface dialog[open]{animation:ux-dialog-in var(--ux-normal) var(--ux-ease) both}
.frontend-surface dialog[open]::backdrop{animation:ux-backdrop-in var(--ux-normal) ease both}
.frontend-surface dialog.ux-closing{pointer-events:none}
.frontend-surface dialog.ux-closing::backdrop{animation:ux-backdrop-out var(--ux-fast) ease both}
@keyframes ux-dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ux-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ux-backdrop-out{to{opacity:0}}
body.frontend-surface:has(dialog[open]){overflow:hidden}
.ux-confirm{width:min(420px,calc(100vw - 32px));padding:28px;border:1px solid #e0e6d9;border-radius:20px;color:#34452c;background:#fff;box-shadow:0 24px 100px #17291130;box-sizing:border-box}
.ux-confirm::backdrop{background:#25312070;backdrop-filter:blur(4px)}
.ux-confirm h2{margin:0 0 12px;font-size:20px;font-weight:600}
.ux-confirm p{font-size:14px;line-height:1.8;color:#7b8673;margin:0 0 25px}
.ux-confirm>div{display:flex;justify-content:flex-end;gap:10px}
.ux-confirm button{border:1px solid #e3e8dc;border-radius:10px;padding:11px 18px;background:#f6f8f2;color:#647655;font:inherit;font-size:13px;cursor:pointer}
.ux-confirm .ux-confirm-accept{background:#3c5130;border-color:#3c5130;color:white}
.notify-panel:not([hidden]),.account-menu[open] .account-menu-content,.cv-menu[open] .cv-menu-list,.cv-library:not([hidden]),.cv-image-editor{animation:ux-dialog-in 180ms var(--ux-ease) both}
.notify-panel,.work-dialog-info,.commerce-settings,.cv-library{overscroll-behavior:contain;scrollbar-width:thin}
.ux-loading{position:relative;min-height:180px;transition:opacity var(--ux-fast)}
.ux-loading:has([data-ux-key]){opacity:.55}
.ux-skeleton{position:relative;overflow:hidden;border-radius:14px;background:#e8ece2;border:1px solid #e1e6d9;break-inside:avoid;pointer-events:none}
.ux-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff80 50%,transparent 80%);animation:ux-shimmer 1.5s ease-in-out infinite;transform:translateX(-100%)}
.ux-skeleton-grid{height:260px;display:inline-block;width:100%;margin-bottom:18px}
.ux-skeleton-grid:nth-child(3n){height:320px}
.ux-skeleton-list{height:120px;margin-bottom:14px}
@keyframes ux-shimmer{to{transform:translateX(100%)}}
.ux-busy{position:relative;cursor:wait!important}
.ux-busy::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:7px;vertical-align:middle;animation:ux-spin .7s linear infinite}
@keyframes ux-spin{to{transform:rotate(360deg)}}
.ux-media-ready{animation:ux-page-in 240ms ease both}
.work-dialog-media{min-height:240px}
.frontend-surface .library-feedback{min-height:22px;margin:0 0 12px;font-size:12px;line-height:22px}
.frontend-surface .library-feedback:not(:empty){padding:0;background:transparent;margin:0 0 12px}
.frontend-surface .library-feedback.error{color:#a5503e}
.commerce-result.is-selected{border-color:#829d67;box-shadow:0 0 0 2px #819c6420}
.commerce-result[data-status="processing"]>button,.commerce-result[data-status="submitting"]>button,.conversation-task-state{background:linear-gradient(110deg,#edf2e6,#f8faf5,#edf2e6);background-size:200% 100%}
.conversation-turn,.commerce-result{overflow-anchor:auto}
.cv-world{will-change:transform}
.cv-node{transition:border-color var(--ux-fast),box-shadow var(--ux-fast)}
.cv-node.selected{box-shadow:0 0 0 2px #8da76b35,0 12px 28px #23361915}
.cv-panning .cv-node{pointer-events:none}
.cv-panning .cv-node,.cv-dragging .cv-node{transition:none}
.cv-port{transition:box-shadow var(--ux-fast),background-color var(--ux-fast),scale var(--ux-fast)}
.cv-port:hover{scale:1.18;box-shadow:0 0 0 5px #8ebf6b24}
.cv-library{animation:ux-dialog-in var(--ux-normal) var(--ux-ease)}
@media(max-width:760px){
 .frontend-surface :is(.library-tabs button,.library-button,.library-primary,.history-actions button,.commerce-modes button,.commerce-head-actions button,.commerce-picker-tabs button){min-height:42px}
 .frontend-surface :is(.work-dialog-close,.commerce-dialog-head button,.cv-dialog-close){min-width:40px;min-height:40px}
 .frontend-surface :is(input,textarea,select){scroll-margin-bottom:100px}
 .library-tabs{gap:3px}.library-tabs button{padding-inline:12px}
 .ux-skeleton-grid{height:210px}.ux-skeleton-list{height:155px}
 .library-card-actions{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .frontend-surface *,.frontend-surface *::before,.frontend-surface *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .ux-navigating .ux-navigation-progress{transform:scaleX(.8)}
}

.commerce-picker-tabs button.active{background:#dfe9d4;color:#38532c;box-shadow:inset 0 0 0 1px #b7caa5}
.frontend-surface :is(.library-search,.gallery-search):focus-within{border-color:#9daf89;box-shadow:0 0 0 3px #7997530c}
.frontend-surface .cv-help-list dd{color:#748168}

.ux-tab-marker{display:block;margin:0!important;padding:0!important}
.frontend-surface .library-heading{margin-bottom:26px}
.frontend-surface .library-toolbar{margin-bottom:8px}
.library-grid{font-size:0}.library-card{vertical-align:top;font-size:12px}
.frontend-surface .ux-tabs>.ux-tab-marker{display:block!important}
.studio-mode-tabs.ux-tabs>a.active:after{display:none}
.studio-mode-tabs .ux-tab-marker{background:#edf2e7;box-shadow:none;border-radius:8px}
.library-grid>.library-card{display:block}
.frontend-surface .cv-help-dialog dd{color:#748168}

@media(max-width:760px){.frontend-surface:not(.canvas-surface) :is(input[type="text"],input[type="search"],input[type="email"],input[type="password"],input:not([type]),textarea){font-size:16px}}