*{box-sizing:border-box;margin:0;padding:0}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-vietnamese.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}:root{--bg:#f4f4f5;--surface:#fff;--surface-glass:#ffffffe0;--surface-hover:#ececee;--text:#18181b;--text-dim:#71717a;--text-invert:#fff;--border:#e4e4e7;--accent:#27272a;--accent-strong:#09090b;--accent-gradient:linear-gradient(135deg, #3f3f46, var(--accent-strong));--rainbow-gradient:linear-gradient(90deg, #ff5d8f, #ffb020, #ffe14d, #3ecf6e, #38bdf8, #7c5cfc);--success:#10b981;--danger:#ef4444;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;--font-xs:12px;--font-sm:13px;--font-md:14px;--font-lg:16px;--font-xl:20px;--font-2xl:24px;--font-3xl:28px;--leading-body:1.45;--leading-heading:1.2;--shadow-sm:0 1px 3px #00000012;--shadow-md:0 8px 28px #0000001f;--shadow-accent:0 4px 12px #00000047;--ring-select:0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent);--control-md:38px;--control-touch:44px;--header-height:56px;--bottom-bar-height:72px;--z-canvas-overlay:5;--z-hint:6;--z-dock:10;--z-bar:20;--z-popover-backdrop:29;--z-popover:30;--z-menu:50;--z-celebration:60;--z-blocking:70;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html,body,#root{overscroll-behavior:none;height:100%;font-family:Nunito,ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,sans-serif;line-height:var(--leading-body);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overflow:hidden}button,img,h1,h2,h3,h4,[role=button],[role=tab],[role=radio]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text}.app{flex-direction:column;height:100%;display:flex}.offline-banner{top:calc(var(--safe-top) + var(--space-3));z-index:var(--z-celebration);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--accent-strong);color:var(--text-invert);font-size:var(--font-sm);border-radius:var(--radius-full);box-shadow:var(--shadow-md);pointer-events:none;font-weight:600;animation:.25s ease-out offline-banner-in;display:flex;position:fixed;left:50%;transform:translate(-50%)}.offline-banner-ok{background:var(--accent)}@keyframes offline-banner-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (prefers-reduced-motion:reduce){.offline-banner{animation:none}}.topbar{height:calc(var(--header-height) + var(--safe-top));padding:var(--safe-top) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left));background:var(--surface);border-bottom:1px solid var(--border);z-index:var(--z-menu);align-items:center;gap:16px;display:flex}.brand{font-weight:800;font-size:var(--font-lg);letter-spacing:-.02em;white-space:nowrap;align-items:center;gap:8px;display:flex}.brand-logo{object-fit:contain;width:20px;height:20px}.topbar-spacer{flex:1}.topbar-left{align-items:center;gap:16px;display:flex}.topbar-actions{align-items:center;gap:4px;display:flex}.mobile-only{display:none}.editor-wrap{flex:1;min-height:0;position:relative;overflow:hidden}.stage-container{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:radial-gradient(ellipse at 50% 0%, #fafafa 0%, var(--bg) 70%);position:absolute;inset:0;overflow:hidden}.stage-container .konvajs-content{animation:.2s stage-fade}@keyframes stage-fade{0%{opacity:0}to{opacity:1}}.stage-container.tool-fill{cursor:pointer}.stage-container.tool-picker{cursor:copy}.stage-container.tool-brush,.stage-container.tool-eraser{cursor:crosshair}.hint-pill{background:var(--accent-gradient);box-shadow:var(--shadow-accent);color:var(--text-invert);font-size:var(--font-sm);border-radius:var(--radius-full);z-index:var(--z-hint);pointer-events:none;white-space:nowrap;max-width:calc(100vw - 24px);padding:8px 18px;font-weight:600;animation:.3s hint-in;position:absolute;top:14px;left:50%;transform:translate(-50%)}@keyframes hint-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.tool-dock{z-index:calc(var(--z-bar) + 1);flex-direction:column;align-items:stretch;gap:6px;display:flex;position:relative}.dock-card{flex-direction:column;gap:12px;padding:6px 0 2px;display:flex}.tool-row{gap:4px;display:flex}.tool-item{border-radius:var(--radius-full);color:var(--text-dim);font-size:var(--font-sm);cursor:pointer;background:0 0;border:none;align-items:center;gap:7px;padding:9px 16px;font-weight:700;transition:color .15s,background .15s,transform .15s,box-shadow .15s;display:flex;position:relative}.tool-item:before{content:"";border-radius:var(--radius-full);position:absolute;inset:-4px 0}.tool-item:hover{color:var(--text)}.tool-item:active{transform:scale(.94)}.tool-item.active{background:var(--accent-gradient);color:var(--text-invert);box-shadow:var(--shadow-accent);animation:.25s cubic-bezier(.34,1.56,.64,1) pop-in}@keyframes pop-in{0%{transform:scale(.85)}60%{transform:scale(1.06)}to{transform:scale(1)}}.tool-options{flex-wrap:wrap;align-items:center;gap:14px;min-width:0;max-width:100%;padding:6px 12px 2px;display:flex}.tool-options>*{flex:none}.slider-group{flex:150px;align-items:center;gap:8px;min-width:130px;display:flex}.options-divider{background:var(--border);width:1px;height:20px}.slider-icon{color:var(--text-dim);place-items:center;display:grid}.size-dots{flex:none;align-items:center;gap:14px;display:flex}.size-dot{background:var(--surface-hover);cursor:pointer;border:none;border-radius:50%;place-items:center;width:30px;height:30px;transition:box-shadow .15s,background .15s;display:grid;position:relative}.size-dot:before{content:"";position:absolute;inset:-8px -7px}.size-dot-fill{background:var(--text-dim);border-radius:50%;transition:background .15s}.size-dot.on{box-shadow:var(--ring-select)}.size-dot.on .size-dot-fill{background:var(--accent)}.option-chip{border-radius:var(--radius-full);background:var(--surface-hover);color:var(--text-dim);font-size:var(--font-xs);cursor:pointer;border:none;align-items:center;gap:6px;padding:7px 12px;font-weight:700;transition:background .15s,color .15s;display:inline-flex;position:relative}.option-chip:before{content:"";position:absolute;inset:-8px 0}.option-chip.on{background:var(--accent);color:var(--text-invert)}.tool-options.option-stack{align-items:center;gap:16px}.dock-options-area{justify-content:center;align-items:center;min-height:36px;display:flex}.dock-options-area>.tool-options{justify-content:center;width:100%}.tool-options.brush-row{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:8px;width:fit-content;min-width:0;max-width:100%;margin-inline:auto;padding:6px 8px;display:flex;overflow-x:auto}.tool-options.brush-row::-webkit-scrollbar{display:none}.tool-options.brush-row>*{flex:none}.brush-group{align-items:center;gap:8px;display:flex}.brush-group-divider{background:var(--border);flex:none;width:1px;height:28px;margin:0 4px}.tool-options.options-column,.options-column .size-dots{flex-flow:column;padding:0}.tool-options.options-column{gap:14px}.options-edge-handle{right:var(--safe-right);border:1px solid var(--border);border-radius:var(--radius-full) 0 0 var(--radius-full);background:var(--surface-glass);-webkit-backdrop-filter:blur(8px);width:32px;height:56px;box-shadow:var(--shadow-md);color:var(--text-dim);cursor:pointer;z-index:var(--z-dock);border-right:none;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;top:45%}.options-edge-handle:before{content:"";position:absolute;inset:-6px 0 -6px -12px}.options-edge-handle svg{width:18px;height:18px}.options-edge-handle.on{color:var(--text);box-shadow:inset 0 0 0 2px var(--accent), var(--shadow-md)}.tool-row-wrap{align-items:center;gap:4px;min-width:0;max-width:100%;padding-right:8px;display:flex}.tool-row-wrap .brush-row{margin-inline:0}.options-toggle svg{width:20px;height:20px}.options-toggle.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent);color:var(--text)}.size-label{font-size:var(--font-xs);color:var(--text-dim);text-align:center;min-width:20px;font-weight:700}.option-toggle{background:var(--surface-hover);width:32px;height:32px;color:var(--text-dim);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.option-toggle:before{content:"";position:absolute;inset:-6px}.option-toggle.on{background:var(--accent);color:var(--text-invert)}.tool-icon{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.brush-tile{border-radius:var(--radius-full);background:var(--surface-hover);min-width:44px;height:44px;color:var(--text-dim);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:5px;transition:transform .12s,background .15s,box-shadow .15s;display:flex;position:relative}.brush-tile .tool-icon{flex:none;width:34px;height:34px}.brush-tile:hover{background:var(--surface)}.brush-tile:active{transform:scale(.94)}.brush-tile.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}.style-chip{cursor:pointer;border:none;border-radius:50%;width:30px;height:30px;transition:transform .12s;position:relative;box-shadow:inset 0 0 0 1.5px #0f172a26}.style-chip:before{content:"";position:absolute;inset:-8px -7px}.style-chip:hover{transform:scale(1.06)}.style-chip.active{box-shadow:inset 0 0 0 1.5px #0f172a26, var(--ring-select)}.recolor-chip-label{font-size:var(--font-sm);color:var(--text);white-space:nowrap;font-weight:700}.recolor-chip-anchor{left:50%;top:var(--space-4);z-index:var(--z-dock);animation:.2s ease-out fade-in;position:absolute;transform:translate(-50%)}@keyframes fade-in{0%{opacity:0}}.recolor-chip-swatch{border-radius:var(--radius-full);border:1px solid var(--border);width:16px;height:16px}.zoom-dock{right:var(--space-4);gap:var(--space-1);padding:var(--space-1);background:var(--surface-glass);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-full);box-shadow:var(--shadow-md);z-index:var(--z-dock);flex-direction:column;display:flex;position:absolute;top:50%;transform:translateY(-50%)}@media (pointer:coarse){.brush-tile{min-width:48px;height:48px}.brush-tile .tool-icon{width:38px;height:38px}.zoom-dock{display:none}}.shade-bar{border-radius:var(--radius-full);justify-content:space-between;align-items:center;width:calc(100% - 32px);max-width:640px;height:30px;margin:10px auto 14px;padding:0 6px;display:flex;box-shadow:inset 0 0 0 1px #0f172a14}.shade-stop{cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;transition:transform .12s;position:relative;box-shadow:inset 0 0 0 1.5px #ffffffbf}.shade-stop:before{content:"";position:absolute;inset:-12px}.shade-stop:hover{transform:scale(1.15)}.shade-stop.active{transform:scale(1.3);box-shadow:0 0 0 2px #fff,0 1px 4px #0f172a59}.palette-bar{background:var(--surface);border-top:1px solid var(--border);padding:var(--space-2) calc(var(--space-2) + var(--safe-right)) calc(var(--space-1) + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left));z-index:var(--z-bar);position:relative}.palette-groups{gap:var(--space-5);flex-direction:column;display:flex}.palette-group-title{margin:0 0 var(--space-2);font-size:var(--font-sm);color:var(--text-dim);text-transform:uppercase;letter-spacing:.02em;font-weight:700}.palette-tabs{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(132px,1fr));display:grid}.palette-card{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;background:0 0;flex-direction:column;transition:background .15s,border-color .15s;display:flex}.palette-card.active{background:var(--surface-hover);border-color:var(--accent);box-shadow:var(--ring-select)}@media (hover:hover){.palette-card:not(.active):hover{border-color:var(--accent);background:var(--surface-hover)}}.palette-card-swatches{grid-template-columns:repeat(6,1fr);gap:3px;display:grid}.palette-card-swatches span{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px #0f172a1f}.palette-card-name{font-size:var(--font-sm);color:var(--text);text-align:left;font-weight:700}.palette-tab-dots{gap:2px;display:inline-flex}.palette-tab-dots span{border-radius:50%;width:7px;height:7px;box-shadow:inset 0 0 0 .5px #0f172a26}.palette-utils{align-items:center;gap:var(--space-2);padding:4px 12px calc(4px + var(--safe-bottom));display:flex}.palette-utils .palette-switch-chip{flex:1}.swatch-scroll{grid-template-columns:repeat(12,1fr);align-items:center;gap:10px;padding:6px;display:grid}.palette-switch-chip{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-touch);padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);color:var(--text);font-size:var(--font-sm);cursor:pointer;font-weight:700;transition:background .15s,border-color .15s;display:flex}.palette-switch-chip.active{border-color:var(--accent);background:var(--surface-hover)}@media (hover:hover){.palette-switch-chip:hover{border-color:var(--accent)}}.swatch{cursor:pointer;width:30px;height:30px;box-shadow:inset 0 0 0 1.5px #0f172a2e, var(--shadow-sm);border:none;border-radius:50%;flex:none;transition:transform .12s;position:relative}.swatch-scroll .swatch{aspect-ratio:1;justify-self:center;width:100%;max-width:44px;height:auto}.swatch:after{content:"";border-radius:50%;position:absolute;inset:-7px}.swatch:hover{transform:scale(1.06)}.swatch:active{transform:scale(.92)}.swatch.active{box-shadow:inset 0 0 0 1.5px #0f172a2e, var(--ring-select);animation:.25s cubic-bezier(.34,1.56,.64,1) pop-in}.swatch.tool-swatch{background:var(--surface-hover);color:var(--text-dim);place-items:center;display:grid}.swatch.tool-swatch.active{background:var(--accent);color:var(--text-invert)}.swatch.custom{background:radial-gradient(circle,#fff 0 28%,#0000 30%),conic-gradient(#ef4444,#facc15,#22c55e,#0ea5e9,#8b5cf6,#ec4899,#ef4444);place-items:center;display:grid}.custom-dot{border-radius:50%;width:16px;height:16px;box-shadow:inset 0 0 0 1px #0f172a33}.picker-value{font-size:var(--font-xs);color:var(--text-dim);font-variant-numeric:tabular-nums;align-items:center;gap:8px;margin-top:8px;font-weight:700;display:flex}.picker-chip{border-radius:4px;width:16px;height:16px;box-shadow:inset 0 0 0 1px #0f172a26}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-touch);padding:0 var(--space-4);border-radius:var(--radius-full);font-size:var(--font-md);white-space:nowrap;cursor:pointer;border:none;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s,opacity .15s,filter .15s;display:inline-flex}.btn:disabled{opacity:.4;cursor:default}.btn:active:not(:disabled){transform:scale(.96)}.btn-primary{background:var(--accent-gradient);color:var(--text-invert);box-shadow:var(--shadow-accent)}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){background:var(--surface-hover)}.btn-ghost{color:var(--text);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--surface-hover)}.btn-link{min-height:var(--control-touch);padding:0 var(--space-2);color:var(--text-dim);font-size:var(--font-sm);border-radius:var(--radius-sm);background:0 0;font-weight:600}.btn-link:hover:not(:disabled){color:var(--text)}.btn-block{width:100%}.ui-section{gap:var(--space-3);margin-top:var(--space-3);flex-direction:column;display:flex}.section-title{font-size:var(--font-lg);color:var(--text);font-weight:700}.section-head{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.section-head .section-title{margin-right:auto}.section-title-skeleton{display:block}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skeleton{border-radius:var(--radius-sm);background:var(--surface-hover);display:block}.skeleton-circle{border-radius:var(--radius-full);flex:none}@media (prefers-reduced-motion:no-preference){.skeleton{background:linear-gradient(90deg, var(--surface-hover) 25%, var(--border) 50%, var(--surface-hover) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite skeleton-shimmer}}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.drawer-backdrop{z-index:var(--z-menu);background:#0f172a52;animation:.18s ease-out drawer-fade-in;position:fixed;inset:0}.drawer-viewport{z-index:var(--z-menu);pointer-events:none;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.drawer-viewport>*{pointer-events:auto}@keyframes drawer-fade-in{0%{opacity:0}to{opacity:1}}.drawer-sheet{background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:480px;max-height:min(72vh,560px);box-shadow:var(--shadow-md);padding:var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom));touch-action:none;flex-direction:column;transition:transform .2s ease-out;animation:.22s cubic-bezier(.32,.72,0,1) drawer-slide-up;display:flex}.drawer-sheet-tall{max-height:min(90vh,720px)}.drawer-sheet[data-swiping]{transform:translateY(var(--drawer-swipe-movement-y,0px));transition:none}@keyframes drawer-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.drawer-grabber{padding:var(--space-2) var(--space-6);cursor:grab;touch-action:none;align-self:center}.drawer-grabber:active{cursor:grabbing}.drawer-grabber-bar{border-radius:var(--radius-full);background:var(--border);width:36px;height:4px;display:block}.drawer-title{margin:0 0 var(--space-2);font-size:var(--font-md);color:var(--text);text-align:center;font-weight:700}.drawer-body{overscroll-behavior:contain;touch-action:pan-y;overflow-y:auto}.toast-viewport{left:50%;bottom:calc(var(--space-4) * 5);gap:var(--space-2);z-index:var(--z-blocking);flex-direction:column;display:flex;position:fixed;transform:translate(-50%)}.toast{max-width:min(420px, calc(100vw - var(--space-4) * 2));padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-sm);box-shadow:var(--shadow-md);font-weight:700}.toast-error{background:var(--danger);color:var(--text-invert)}.btn-danger{background:var(--danger);color:var(--text-invert);box-shadow:var(--shadow-sm)}.btn-danger:hover:not(:disabled){filter:brightness(1.06)}.icon-btn{width:var(--control-md);height:var(--control-md);color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:10px;place-items:center;transition:background .15s;display:grid}.icon-btn:hover:not(:disabled){background:var(--surface-hover)}.icon-btn:active:not(:disabled){background:var(--border);transform:scale(.92)}.icon-btn:disabled{opacity:.3;cursor:default}.menu-wrap{position:relative}.dropdown-positioner{z-index:var(--z-menu)}.dropdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);min-width:200px;box-shadow:var(--shadow-md);padding:6px}.dropdown button{border-radius:var(--radius-sm);width:100%;color:var(--text);font-size:var(--font-sm);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;padding:9px 10px;font-weight:600;display:flex}.dropdown button:hover:not(:disabled),.dropdown button[data-highlighted]{background:var(--surface-hover)}.dropdown button:disabled{opacity:.35;cursor:default}.dropdown button.menu-danger{color:var(--danger)}.menu-wrap{flex-shrink:0}.tip-positioner{z-index:var(--z-menu)}.tip{color:var(--text-invert);font-size:var(--font-xs);font-weight:600;line-height:var(--leading-heading);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;background:#1e293beb;padding:5px 10px;animation:.12s ease-out drawer-fade-in}.icon-btn.icon-btn-round{border-radius:var(--radius-full)}.icon-btn.icon-btn-surface{width:var(--control-touch);height:var(--control-touch);border-radius:var(--radius-full);background:var(--surface);box-shadow:var(--shadow-sm)}@media (width<=900px){.btn.btn-icon-only-mobile{width:var(--control-touch);min-width:var(--control-touch);padding:0}.btn.btn-icon-only-mobile .btn-label{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}}@media (width>=768px) and (pointer:coarse){.icon-btn{width:var(--control-touch);height:var(--control-touch)}}@media (width<=640px){.icon-btn{width:var(--control-touch);height:var(--control-touch)}.dropdown button{font-size:var(--font-md);padding:12px}}.popover-positioner{z-index:var(--z-popover)}.popover-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:10px;position:relative}.popover-panel-pill{border-radius:var(--radius-full);flex-direction:column;align-items:center;padding:10px 8px;display:flex}.popover-arrow{width:14px;height:7px}.popover-arrow:after{content:"";border:7px solid #0000;position:absolute}.popover-arrow[data-side=top]:after{border-top-color:var(--surface)}.popover-arrow[data-side=bottom]:after{border-bottom-color:var(--surface);transform:translateY(-7px)}.popover-arrow[data-side=left]:after{border-left-color:var(--surface)}.popover-arrow[data-side=right]:after{border-right-color:var(--surface);transform:translate(-7px)}.ui-separator{background:var(--border);height:1px;margin:0 var(--space-2);flex:none}.ui-separator-v{width:1px;height:22px;margin:0 6px}.ui-file-input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.ui-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}.ui-card-row{align-items:center;gap:var(--space-3);display:flex}.ui-chip{justify-content:center;align-items:center;gap:var(--space-1);min-height:44px;padding:0 var(--space-4);white-space:nowrap;font-family:inherit;font-size:var(--font-sm);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);cursor:pointer;flex:none;font-weight:700;transition:background .15s,border-color .15s;display:inline-flex}@media (hover:hover){.ui-chip:hover:not(:disabled):not(.selected){background:var(--surface-hover)}}.ui-chip.selected{color:var(--text-invert);background:var(--accent);border-color:var(--accent)}.ui-chip:disabled,.ui-chip[data-disabled]{opacity:.4;cursor:default}.ui-chip-floating{gap:var(--space-2);background:var(--surface-glass);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-md)}.ui-chip-sm{padding:0 var(--space-2);font-size:var(--font-xs);gap:var(--space-2);font-weight:600}.ui-group-contents{display:contents}.ui-bare-option{font:inherit;cursor:pointer;background:0 0;border:none;flex:none;padding:0;display:block}.ui-bare-option[data-disabled]{cursor:default}.ui-input{width:100%;min-height:44px;padding:0 var(--space-3);font:inherit;font-size:var(--font-md);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full)}.ui-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.ui-input-bare{min-width:0;padding:var(--space-2) 0;font:inherit;font-size:var(--font-lg);line-height:var(--leading-body);color:var(--text);resize:none;background:0 0;border:none;outline:none;flex:1}.ui-input-bare::placeholder{color:var(--text-dim)}.icon-btn.icon-btn-accent{border-radius:var(--radius-full);background:var(--accent-gradient);width:44px;height:44px;color:var(--text-invert);box-shadow:var(--shadow-accent);flex:none}.icon-btn.icon-btn-accent:disabled{opacity:.35;box-shadow:none}.dlg-backdrop,.confirm-backdrop{z-index:var(--z-blocking);background:#0f172a52;animation:.15s ease-out drawer-fade-in;position:fixed;inset:0}.dlg-backdrop-heavy{background:#18181bb8}.dlg-viewport,.confirm-viewport{z-index:var(--z-blocking);padding:var(--space-4);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dlg-viewport>*,.confirm-viewport>*{pointer-events:auto}.dlg-popup,.confirm-popup{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:360px;box-shadow:var(--shadow-md);padding:var(--space-6) var(--space-4) var(--space-4);animation:.16s ease-out confirm-pop-in}@keyframes confirm-pop-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.dlg-title,.confirm-title{font-size:var(--font-lg);color:var(--text);margin:0;font-weight:700}.dlg-popup-lg{gap:var(--space-4);max-width:440px;max-height:100%;padding:var(--space-5);border-radius:var(--radius-xl);flex-direction:column;display:flex;overflow-y:auto}.dlg-popup-lg .dlg-title{font-size:var(--font-xl);text-align:center;font-weight:800}.dlg-actions{gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.dlg-actions>*{flex:auto;min-width:0}@media (width<=480px){.dlg-actions-stack{flex-direction:column}}.confirm-desc{margin:var(--space-2) 0 0;font-size:var(--font-md);color:var(--text-dim);line-height:1.5}.confirm-actions{gap:var(--space-2);margin-top:var(--space-6);display:flex}.confirm-actions>*{flex:1}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--z-canvas-overlay);font-size:var(--font-md);color:var(--text-dim);background:#ffffffa6;place-items:center;font-weight:600;animation:.2s overlay-fade;display:grid;position:absolute;inset:0}.overlay-fixed{z-index:var(--z-blocking);position:fixed}.overlay-box{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);background:var(--surface);border-radius:var(--radius-full);box-shadow:var(--shadow-md);display:flex}.spinner{border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.overlay{animation:none}}.ui-empty{place-items:center;gap:var(--space-3);padding:64px var(--space-4);color:var(--text-dim);font-size:var(--font-md);text-align:center;font-weight:600;display:grid}.ui-empty-compact{padding:var(--space-6) var(--space-4);font-size:var(--font-sm);font-weight:400}.ui-empty-msg{margin:0}.ui-empty-art{background:var(--surface);border:1px solid var(--border);width:88px;height:88px;box-shadow:var(--shadow-sm);color:var(--accent);border-radius:50%;place-items:center;display:grid}.gallery{flex-direction:column;height:100%;display:flex;position:relative}.gallery-body{padding:var(--space-4) calc(var(--space-4) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));scrollbar-width:none;flex:1;animation:.2s stage-fade;overflow-y:auto}.gallery-body::-webkit-scrollbar{display:none}.page-col{width:min(960px,100%);margin-inline:auto}.tab-panel{gap:var(--space-4);width:100%;margin:0 0 var(--space-6);flex-direction:column;display:flex}.project-skeleton{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}.project-skeleton-caption{padding:var(--space-3)}.gallery-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;flex-direction:column;padding:0;transition:box-shadow .15s;display:flex;position:relative;overflow:visible}.project-card:hover{box-shadow:var(--shadow-md)}.project-thumb{aspect-ratio:1;object-fit:contain;border-bottom:1px solid var(--border);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;opacity:0;background:#fff;width:100%;transition:opacity .25s;display:block}.project-thumb.loaded{opacity:1}img.thumb-broken{opacity:1;background:var(--surface-hover)}.project-card-footer{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);display:flex}.project-meta{flex:1;min-width:0}.project-progress{border-radius:var(--radius-full);background:var(--border);height:6px;margin-bottom:4px;overflow:hidden}.project-progress-fill{border-radius:var(--radius-full);background:var(--rainbow-gradient);height:100%}.project-date{font-size:var(--font-xs);color:var(--text-dim)}.project-date b{color:var(--text)}.project-done-badge{top:var(--space-2);left:var(--space-2);background:var(--success);color:var(--text-invert);font-size:var(--font-xs);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);align-items:center;gap:4px;padding:3px 9px;font-weight:700;display:inline-flex;position:absolute}.new-project-tile{justify-content:center;align-items:center;gap:var(--space-2);border:2px dashed var(--accent);border-radius:var(--radius-lg);min-height:160px;color:var(--accent);font-size:var(--font-md);cursor:pointer;background:0 0;flex-direction:column;font-weight:700;transition:background .15s;display:flex}.new-project-tile:hover{background:var(--surface-hover)}.celebration{z-index:var(--z-celebration);pointer-events:none;position:absolute;inset:0;overflow:hidden}.celebration-badge{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--accent-gradient);color:var(--text-invert);font-size:var(--font-lg);border-radius:var(--radius-full);box-shadow:var(--shadow-md);font-weight:800;animation:.45s cubic-bezier(.34,1.56,.64,1) badge-pop;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}@keyframes badge-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.confetti-piece{width:10px;height:14px;animation:confetti-fall var(--confetti-duration,2.4s) ease-in forwards;border-radius:2px;position:absolute;top:-12px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}70%{opacity:1}to{opacity:0;transform:translateY(110vh)rotate(720deg)}}.completion-preview{border:1px solid var(--border);border-radius:var(--radius-lg);position:relative;overflow:hidden}.completion-preview img,.completion-preview video{width:100%;height:auto;display:block}.completion-before-wrap{animation:1.4s .5s forwards completion-wipe-wrap;position:absolute;inset:0;overflow:hidden}.completion-before-wrap .completion-before{animation:1.4s .5s forwards completion-wipe-img;position:absolute;inset:0}@keyframes completion-wipe-wrap{to{transform:translate(100%)}}@keyframes completion-wipe-img{to{transform:translate(-100%)}}.completion-links{justify-content:center;gap:var(--space-5);display:flex}@media (prefers-reduced-motion:reduce){.completion-before-wrap{display:none}}@media (width>=1080px){.app[data-screen=editor]{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 380px;display:grid}.app[data-screen=editor] .topbar{grid-column:1/-1}.app[data-screen=editor] .editor-wrap{grid-area:2/1}.app[data-screen=editor] .palette-bar{gap:var(--space-3);border-top:none;border-left:1px solid var(--border);box-shadow:none;padding:var(--space-4) var(--space-3);border-radius:0;flex-direction:column;grid-area:2/2;margin-top:0;display:flex;overflow:visible}.app[data-screen=editor] .shade-bar{width:100%;height:36px;margin:0}.app[data-screen=editor] .shade-stop{width:26px;height:26px}.app[data-screen=editor] .swatch-scroll{padding:var(--space-1);justify-content:center;gap:var(--space-3);flex-wrap:wrap;display:flex;overflow:visible}.app[data-screen=editor] .swatch-scroll .swatch{aspect-ratio:auto;width:42px;max-width:none;height:42px}.app[data-screen=editor] .tool-options.brush-row{flex-wrap:wrap;justify-content:center;row-gap:10px;overflow:visible}.app[data-screen=editor] .brush-group-divider{display:none}}@media (width>=1080px) and (pointer:coarse){.app[data-screen=editor] .swatch-scroll .swatch{width:var(--control-touch);height:var(--control-touch)}}@media (prefers-reduced-motion:reduce){.tool-item.active,.swatch.active,.stage-container .konvajs-content,.gallery-body,.template-skeleton,.celebration-badge,.app[data-screen],.gallery-grid>*,.hint-pill,.recolor-chip-anchor{animation:none}.brush-tile{transition:none}.project-thumb{opacity:1;transition:none}.confetti-piece{display:none}}@media (width>=768px) and (pointer:coarse){.swatch{width:48px;height:48px}.swatch-scroll{gap:12px}}@media (pointer:coarse){.tool-row{justify-content:space-around;width:100%;max-width:480px;margin:0 auto}.tool-item{font-size:var(--font-xs);flex-direction:column;gap:2px;padding:5px 18px}.tool-label{display:block}.tool-options{justify-content:center;padding:4px 8px 2px}.tool-options .options-divider{display:none}.tool-options.brush-row{width:auto;max-width:none;margin-inline:calc(var(--space-2) * -1);padding-inline:14px;scroll-padding-inline:14px}.tool-row-wrap{padding-right:0}.slider-icon{display:none}}@media (width>=768px) and (pointer:coarse){.tool-options.brush-row{width:fit-content;max-width:100%;margin-inline:auto;padding-inline:8px}.swatch-scroll,.palette-utils{width:100%;max-width:720px;margin-inline:auto}}@media (height<=500px){:root{--header-height:48px}.palette-bar{padding:4px calc(var(--space-2) + var(--safe-right)) calc(4px + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left))}.shade-bar{height:28px;margin:8px auto 12px}.swatch{width:36px;height:36px}.tool-label{display:none}.tool-item{flex-direction:row;padding:4px 14px}.dock-card{padding-top:2px}}@media (height<=500px) and (pointer:fine){.tool-item{padding:8px 12px}}@media (height<=500px) and (pointer:coarse){.dock-card{padding:2px var(--space-2) 2px;flex-direction:row;justify-content:center;align-items:center;gap:8px}.tool-options{padding:2px 8px}.tool-options.brush-row{width:fit-content;max-width:300px;margin-inline:auto}.tool-row{width:auto;margin:0}}@media (width<=640px){.swatch-scroll{grid-template-columns:repeat(6,1fr)}.brand-name{display:none}:root{--header-height:48px}.shade-bar{height:26px;margin-bottom:12px}.palette-bar{padding:6px calc(var(--space-2) + var(--safe-right)) calc(2px + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left))}.topbar{gap:8px;padding:0 8px}.topbar-left{gap:8px}.topbar-actions{flex-shrink:0;gap:0}.desktop-only{display:none!important}.mobile-only{display:block}.swatch{width:var(--control-touch);height:var(--control-touch)}}@media (pointer:coarse) and (width>=900px){.gen-menu{flex-direction:row}.gen-menu .gen-feature{flex:1}}.gen-guest{text-align:center;color:var(--text-dim);font-size:var(--font-md);padding:calc(var(--space-6) + var(--space-3)) var(--space-6);align-items:center;gap:var(--space-3);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm)}.gen-guest .gen-hero-sub{max-width:34ch}.gen-hero{align-items:center;gap:var(--space-3);display:flex}.gen-hero-badge{border-radius:var(--radius-md);background:var(--accent-gradient);width:52px;height:52px;color:var(--text-invert);box-shadow:var(--shadow-accent);flex:none;place-items:center;display:grid}.gen-hero-title{font-size:var(--font-lg);letter-spacing:-.02em;color:var(--text);font-weight:800}.gen-hero-sub{font-size:var(--font-sm);color:var(--text-dim);margin-top:2px}.gen-menu{gap:var(--space-4)}.gen-feature{align-items:flex-start;gap:var(--space-1);text-align:left;padding:var(--space-6);border-radius:var(--radius-xl);font:inherit;cursor:pointer;box-shadow:var(--shadow-sm);border:none;flex-direction:column;flex:none;transition:transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.gen-feature:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.gen-feature:active{transform:none}.gen-feature-photo{background:linear-gradient(135deg,#ddf1e0,#c4e7cc)}.gen-feature-text{background:linear-gradient(135deg,#fcead3,#f9d8b4)}.gen-feature:before{content:"";pointer-events:none;border-radius:50%;width:220px;height:180px;position:absolute;top:-70px;right:-40px;transform:rotate(-18deg)}.gen-feature-photo:before{background:radial-gradient(closest-side,#58b26a47,#0000)}.gen-feature-text:before{background:radial-gradient(closest-side,#eb983d47,#0000)}.gen-feature-body{align-items:flex-start;gap:var(--space-1);flex-direction:column;min-width:0;padding-right:56px;display:flex}.gen-feature-icon{border-radius:var(--radius-full);background:var(--surface);width:48px;height:48px;color:var(--text);box-shadow:var(--shadow-sm);place-items:center;display:grid}.gen-feature-title{margin-top:var(--space-6);font-size:var(--font-xl);letter-spacing:-.02em;color:var(--text);font-weight:800}.gen-feature-sub{font-size:var(--font-sm);color:var(--text-dim)}.gen-feature-go{right:var(--space-4);bottom:var(--space-4);border-radius:var(--radius-full);background:var(--surface);width:48px;height:48px;color:var(--text);box-shadow:var(--shadow-sm);place-items:center;display:grid;position:absolute}.gen-screen{gap:var(--space-3)}.gen-screen-head{display:flex}.gen-screen-title{font-size:var(--font-3xl);font-weight:800;line-height:var(--leading-heading);letter-spacing:-.02em;color:var(--text);max-width:20ch}.gen-composer{align-items:flex-end;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:28px;scroll-margin-block:80px;transition:border-color .15s,box-shadow .15s;display:flex}.gen-composer:focus-within{border-color:var(--accent);box-shadow:var(--shadow-md)}.gen-composer[data-busy]{opacity:.6}.gen-ratio-scroll{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(78px,1fr));min-width:0;margin:-2px;padding:2px;display:grid}.gen-ratio-frame{border:1.5px solid;border-radius:2px;flex:none;display:inline-block}.gen-ideas{gap:var(--space-2)}.gen-style-scroll{min-width:0}.gen-style{align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.gen-style-thumb{object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);width:88px;height:88px;transition:box-shadow .15s}.selected .gen-style-thumb{box-shadow:var(--ring-select)}.gen-style-name{font-size:var(--font-xs);color:var(--text-dim);font-weight:700}.selected .gen-style-name{color:var(--text)}.gen-divider{align-items:center;gap:var(--space-3);color:var(--text-dim);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex}.gen-divider:before,.gen-divider:after{content:"";background:var(--border);flex:1;height:1px}.gen-upload-drop{text-align:center;align-items:center;gap:var(--space-4);padding:calc(var(--space-6) + var(--space-4)) var(--space-6);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm);font:inherit;cursor:pointer;border:none;flex-direction:column;transition:box-shadow .15s;display:flex}.gen-upload-drop:hover:not(:disabled){box-shadow:var(--shadow-md)}.gen-upload-icon{border-radius:var(--radius-full);background:var(--bg);width:64px;height:64px;color:var(--text-dim);flex:none;place-items:center;display:grid}.gen-upload-text{color:var(--text-dim);font-size:var(--font-md);max-width:28ch}.gen-upload-cta{height:var(--control-touch);padding:0 var(--space-6);border-radius:var(--radius-full);background:var(--accent);color:var(--text-invert);font-size:var(--font-md);justify-content:center;align-items:center;font-weight:700;display:inline-flex}.gen-upload-preview{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.gen-upload-preview[data-busy]{opacity:.6}.gen-upload-thumb{align-items:center;gap:var(--space-2);font:inherit;cursor:pointer;background:0 0;border:none;flex-direction:column;padding:0;display:flex}.gen-upload-thumb img{border-radius:var(--radius-md);object-fit:contain;max-width:100%;max-height:240px}.gen-upload-swap{min-height:32px;font-size:var(--font-xs);color:var(--text-dim);align-items:center;font-weight:700;display:inline-flex}.gen-upload-thumb:hover:not(:disabled) .gen-upload-swap{color:var(--text)}.gen-error{font-size:var(--font-sm);color:var(--danger)}.gen-progress{gap:var(--space-3);font-size:var(--font-sm);color:var(--text-dim);text-align:center;flex-direction:column;display:flex}.gen-progress-bar{border-radius:var(--radius-full);background:var(--rainbow-gradient);background-size:200% 100%;height:6px;animation:1.6s linear infinite gen-rainbow;display:block}@keyframes gen-rainbow{0%{background-position:0 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.gen-progress-bar{animation:none}}@media (width<=1024px){.user-chip-name{display:none}.user-chip{padding:0 var(--space-1)}}.gen-skeleton{width:min(260px,100%);color:var(--text-dim);background:var(--surface-hover);border:1px dashed var(--border);border-radius:var(--radius-lg);justify-content:center;align-items:center;margin-inline:auto;animation:1.6s ease-in-out infinite alternate gen-skeleton-pulse;display:flex;overflow:hidden}.gen-skeleton-photo{object-fit:cover;opacity:.5;filter:grayscale(.6);width:100%;height:100%}.gen-stage-msg{color:var(--text);font-weight:700}@keyframes gen-skeleton-pulse{0%{opacity:1}to{opacity:.55}}@media (prefers-reduced-motion:reduce){.gen-skeleton{animation:none}}.ui-tabbar{z-index:var(--z-bar);justify-content:space-around;gap:var(--space-1);padding:var(--space-1) calc(var(--space-2) + var(--safe-right)) calc(var(--space-1) + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left));border-top:1px solid var(--border);background:var(--surface);display:flex;position:fixed;bottom:0;left:0;right:0}.ui-tabbar-tab{min-height:var(--control-touch);padding:var(--space-1) 0;border-radius:var(--radius-sm);color:var(--text-dim);font-size:var(--font-xs);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;font-weight:700;display:flex;position:relative}.ui-tabbar-tab:before{content:"";position:absolute;inset:-4px 0}.ui-tabbar-tab:hover:not(.selected){color:var(--text)}.ui-tabbar-tab.selected{color:var(--accent-strong)}.ui-tabbar-tab svg{width:22px;height:22px}.gallery-body{padding-bottom:calc(var(--bottom-bar-height) + var(--safe-bottom))}@media (width>=1025px){.ui-tabbar{left:50%;right:auto;bottom:var(--space-4);padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-full);box-shadow:var(--shadow-md);transform:translate(-50%)}.ui-tabbar-tab{gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-full);font-size:var(--font-md);flex-direction:row;flex:none}.ui-tabbar-tab.selected{background:var(--bg);color:var(--text)}.ui-tabbar-tab svg{width:18px;height:18px}}.home-panel{margin-top:var(--space-2);gap:var(--space-3)}.home-greeting{font-size:var(--font-2xl);font-weight:800;line-height:var(--leading-heading);color:var(--text)}.home-sub{color:var(--text-dim);font-size:var(--font-md);margin-top:calc(-1 * var(--space-2))}.resume-tile{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;flex:none;width:120px;height:120px;padding:0;position:relative;overflow:hidden}.resume-tile img{object-fit:cover;width:100%;height:100%}.resume-tile-pct{left:var(--space-1);bottom:var(--space-1);padding:1px var(--space-2);border-radius:var(--radius-full);background:var(--surface-glass);font-size:var(--font-xs);color:var(--text);font-weight:700;position:absolute}.hero-card{align-items:stretch;gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-xl,var(--radius-lg));background:var(--surface);width:min(300px,78%);padding:var(--space-3);cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;flex:none;display:flex}.hero-card:hover{background:var(--surface-hover)}.hero-info{justify-content:center;gap:var(--space-2);flex-direction:column;flex:1;min-width:0;display:flex}.hero-badge{padding:2px var(--space-3);border-radius:var(--radius-full);background:var(--accent-gradient);color:var(--text-invert);font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.04em;align-self:flex-start;font-weight:700}.hero-badge-past{background:var(--surface-hover);color:var(--text-dim)}.hero-date{color:var(--text-dim);font-size:var(--font-sm);font-weight:700}.hero-title{font-size:var(--font-lg);font-weight:800;line-height:var(--leading-heading);color:var(--text);text-overflow:ellipsis;overflow:hidden}.hero-card img{aspect-ratio:1;object-fit:cover;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;flex:none;width:96px}.template-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;width:140px;box-shadow:var(--shadow-sm);flex-direction:column;flex:none;padding:0;display:flex}.template-card:hover{background:var(--surface-hover)}.template-card img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#fff;width:100%}.template-name{padding:var(--space-2);font-size:var(--font-sm);color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.ai-banner{align-items:center;gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-3) var(--space-4);cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;margin-bottom:var(--space-4);display:flex}.ai-banner:hover{background:var(--surface-hover)}.ai-banner-icon{width:var(--control-touch);height:var(--control-touch);border-radius:var(--radius-full);background:var(--accent-gradient);color:var(--text-invert);flex:none;place-items:center;display:grid}.ai-banner-text{flex-direction:column;gap:2px;min-width:0;display:flex}.ai-banner-title{font-size:var(--font-md);color:var(--text);font-weight:800}.ai-banner-sub{font-size:var(--font-sm);color:var(--text-dim)}.library-chips{gap:var(--space-2)}.library-chip-skeleton{border-radius:var(--radius-full);background:var(--surface-hover);flex:none;height:44px;animation:1.4s ease-in-out infinite skeleton-pulse}.library-grid .template-card{width:auto}.template-skeleton{aspect-ratio:1;background:var(--surface-hover);animation:1.4s ease-in-out infinite skeleton-pulse}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}.library-loading{padding:var(--space-6) 0;text-align:center;color:var(--text-dim);font-size:var(--font-sm)}.library-sentinel{height:1px}.library-more{justify-content:center;display:flex}.profile-guest{text-align:center;color:var(--text-dim);font-size:var(--font-md);align-items:center}.profile-avatar{border-radius:var(--radius-full);background:var(--accent-gradient);width:56px;height:56px;color:var(--text-invert);font-size:var(--font-xl);flex:none;place-items:center;font-weight:700;display:grid;overflow:hidden}.profile-avatar img{object-fit:cover;width:100%;height:100%}.profile-info{min-width:0}.profile-name{font-weight:700;font-size:var(--font-lg);color:var(--text)}.profile-email{font-size:var(--font-sm);color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.profile-stats{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.profile-stat{align-items:center;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.profile-stat-label{font-size:var(--font-xs);color:var(--text-dim)}.profile-stat-value{color:var(--text);font-weight:700}.page-title{font-size:var(--font-3xl);font-weight:800;line-height:var(--leading-heading);color:var(--text);margin:var(--space-2) 0 var(--space-3)}.profile-avatar-empty{background:var(--surface-hover);color:var(--text-dim)}.profile-desc{font-size:var(--font-sm);color:var(--text-dim)}.profile-legal{justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-2);font-size:var(--font-xs);color:var(--text-dim);display:flex}.profile-legal a{color:inherit;text-underline-offset:2px;padding:var(--space-1) 0;text-decoration:underline}@media (hover:hover){.profile-legal a:hover{color:var(--text)}}.profile-version{text-align:center;margin-top:var(--space-2);font-size:var(--font-xs);color:var(--text-dim)}.profile-lang{margin-top:var(--space-4)}.lang-row{gap:var(--space-2);margin-top:var(--space-2);display:flex}.page-head{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.page-head .page-title{margin:var(--space-2) 0 var(--space-3)}.page-head-actions{gap:var(--space-1);display:flex}.gallery-body{padding-top:calc(var(--safe-top) + var(--space-3))}.profile-plan{padding:2px var(--space-3);border-radius:var(--radius-full);background:var(--accent);color:var(--text-invert);font-weight:700;font-size:var(--font-sm);text-transform:capitalize}.app[data-screen]{animation:.25s both page-fade-in}@keyframes page-fade-in{0%{opacity:0}to{opacity:1}}.editor-loading{background:var(--bg);z-index:var(--z-blocking);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.editor-loading-spinner{border:3px solid var(--border);border-top-color:var(--text);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}.editor-loading-text{font-size:var(--font-sm);color:var(--text-dim)}.gallery-grid>*{animation:.3s both card-in}.gallery-grid>:first-child{animation-delay:0s}.gallery-grid>:nth-child(2){animation-delay:30ms}.gallery-grid>:nth-child(3){animation-delay:60ms}.gallery-grid>:nth-child(4){animation-delay:90ms}.gallery-grid>:nth-child(5){animation-delay:.12s}.gallery-grid>:nth-child(6){animation-delay:.15s}.gallery-grid>:nth-child(7){animation-delay:.18s}.gallery-grid>:nth-child(8){animation-delay:.21s}.gallery-grid>:nth-child(n+9){animation-delay:.24s}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ui-scroll-row{gap:var(--space-3);-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:-6px calc(-1 * var(--space-4));padding:6px var(--space-4);scroll-padding-inline:var(--space-4);display:flex;overflow-x:auto}.ui-scroll-row::-webkit-scrollbar{display:none}.ui-col-sm,.ui-col-md,.ui-col-lg{margin-inline:auto}.ui-col-sm{width:min(440px,100%)}.ui-col-md{width:min(560px,100%)}.ui-col-lg{width:min(720px,100%)}@media (width<=1024px),(pointer:coarse){.ui-col-sm,.ui-col-md{width:100%}}.ui-card-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:100%;display:grid}