.toast-viewport{left:50%;top:calc(var(--safe-top) + var(--space-4));gap:var(--space-2);z-index:var(--z-toast);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);font-weight:var(--weight-bold);box-shadow:var(--shadow-md)}.toast-error{background:var(--danger);color:var(--text-invert)}.toast-success{background:var(--text);color:var(--text-invert)}.toast-update{align-items:center;gap:var(--space-3);background:var(--surface);color:var(--text);border:1px solid var(--border);display:flex}.toast-action{min-height:32px;padding:0 var(--space-3);border-radius:var(--radius-full);background:var(--accent);color:var(--text-invert);font:inherit;font-weight:var(--weight-bold);cursor:pointer;border:none;flex:none}.toast-action:hover{filter:brightness(1.06)}.tip-positioner{z-index:var(--z-menu)}.tip{background:var(--surface-inverse);color:var(--text-invert);font-size:var(--font-xs);font-weight:var(--weight-semibold);line-height:var(--leading-heading);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;animation:tip-fade-in var(--motion-fast) ease-out;padding:5px 10px}@keyframes tip-fade-in{0%{opacity:0}to{opacity:1}}.overlay{background:var(--surface-veil);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--z-canvas-overlay);font-size:var(--font-md);font-weight:var(--weight-semibold);color:var(--text-dim);animation:overlay-fade var(--motion-base) ease;place-items:center;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}}.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);font-weight:var(--weight-bold);white-space:nowrap;cursor:pointer;transition:background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast), filter var(--motion-fast);border:none;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);font-weight:var(--weight-semibold);border-radius:var(--radius-sm);background:0 0}.btn-link:hover:not(:disabled){color:var(--text)}.btn-danger{background:var(--danger);color:var(--text-invert);box-shadow:var(--shadow-sm)}.btn-danger:hover:not(:disabled){filter:brightness(1.06)}.btn-block{width:100%}.btn-spinner{opacity:.9;border:2.5px solid;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite btn-spin}@keyframes btn-spin{to{transform:rotate(360deg)}}@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}}.ui-empty{place-items:center;gap:var(--space-3);padding:64px var(--space-4);color:var(--text-dim);font-size:var(--font-md);font-weight:var(--weight-semibold);text-align:center;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}.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);font-weight:var(--weight-bold);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;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}@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}}*{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:#1f1f23;--text-dim:#696973;--text-invert:#fff;--border:#e4e4e7;--accent:#27272a;--accent-strong:#09090b;--accent-gradient:linear-gradient(135deg, #3f3f46, var(--accent-strong));--success:#10b981;--danger:#ef4444;--paper:#fff;--paper-dim:#fafafa;--gradient-mint:linear-gradient(135deg, #ddf1e0, #c4e7cc);--gradient-peach:linear-gradient(135deg, #fcead3, #f9d8b4);--gradient-sky:linear-gradient(135deg, #dde9f7, #c3d9f0);--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-family:"Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;--font-xs:12px;--font-sm:13px;--font-md:14px;--font-lg:16px;--font-xl:20px;--font-3xl:28px;--leading-body:1.45;--leading-heading:1.2;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--weight-heavy:800;--motion-fast:.15s;--motion-base:.2s;--motion-slow:.25s;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-sheet:cubic-bezier(.32, .72, 0, 1);--ease-sheet-out:cubic-bezier(.4, 0, .9, .45);--shadow-sm:0 1px 3px #00000012;--shadow-md:0 8px 28px #0000001f;--shadow-accent:0 4px 12px #00000047;--ink-rgb:15, 23, 42;--scrim:rgba(var(--ink-rgb), .32);--scrim-heavy:#18181bb8;--ring-inset-strong:rgba(var(--ink-rgb), .2);--ring-inset:rgba(var(--ink-rgb), .15);--ring-inset-soft:rgba(var(--ink-rgb), .12);--surface-inverse:#1e293beb;--surface-veil:#ffffffa6;--sheen-highlight:#ffffff8c;--glow-photo:#58b26a47;--glow-text:#eb983d47;--glow-upload:#4c89c847;--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-dock:10;--z-bar:20;--z-hint:25;--z-drawer:30;--z-popover-backdrop:39;--z-popover:40;--z-menu:50;--z-celebration:60;--z-blocking:70;--z-toast:80;--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:var(--font-family);line-height:var(--leading-body);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overflow:hidden}button,input,select,textarea,optgroup{font:inherit;letter-spacing:inherit}button{appearance:none}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);font-weight:var(--weight-semibold);border-radius:var(--radius-full);box-shadow:var(--shadow-md);pointer-events:none;animation:offline-banner-in var(--motion-slow) ease-out;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}}.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%, var(--paper-dim) 0%, var(--bg) 70%);position:absolute;inset:0;overflow:hidden}.stage-container .konvajs-content{animation:stage-fade var(--motion-base) ease}@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);font-weight:var(--weight-semibold);border-radius:var(--radius-full);z-index:var(--z-hint);pointer-events:none;animation:hint-in var(--motion-slow) ease;white-space:nowrap;max-width:calc(100vw - 24px);padding:8px 18px;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-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}.size-dots{align-items:center;gap:var(--space-3);flex:none;display:flex}.size-dot{background:var(--surface-hover);cursor:pointer;width:44px;height:44px;transition:outline-color var(--motion-fast), background var(--motion-fast);outline-offset:-6px;border:none;border-radius:50%;outline:2px solid #0000;place-items:center;display:grid;position:relative}.size-dot-fill{background:var(--text-dim);transition:background var(--motion-fast);border-radius:50%}.size-dot.on{outline-color:var(--accent)}.size-dot.on .size-dot-fill{background:var(--accent)}.brush-categories{--brush-disc-size:56px;--brush-tile-min:76px;gap:var(--space-4);width:100%;padding:var(--space-1) 0;flex-direction:column;display:flex}.brush-category{gap:var(--space-2);flex-direction:column;display:flex}.tool-field{align-items:flex-start;gap:var(--space-3);width:100%;padding:var(--space-2) 0;flex-direction:column;display:flex}.tool-field .tool-options.options-row{justify-content:flex-start;width:100%}.tool-field-label{font-size:var(--font-sm);font-weight:var(--weight-bold);color:var(--text-dim)}.brush-category-row{grid-template-columns:repeat(auto-fill, minmax(var(--brush-tile-min), 1fr));align-items:stretch;gap:var(--space-2);display:grid}.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-md);width:100%;color:var(--text-dim);cursor:pointer;transition:transform var(--motion-fast), background var(--motion-fast);background:0 0;border:none;flex-direction:column;align-items:center;gap:1px;padding:2px;display:flex;position:relative}.brush-tile-disc{width:var(--brush-disc-size);height:var(--brush-disc-size);border-radius:var(--radius-full);background:var(--surface-hover);transition:background var(--motion-fast), box-shadow var(--motion-fast);place-items:center;display:grid;box-shadow:inset 0 0 #0000}.brush-tile .tool-icon{width:calc(var(--brush-disc-size) * .82);height:calc(var(--brush-disc-size) * .82);flex:none}.brush-tile-label{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;justify-content:center;align-items:flex-start;max-width:100%;min-height:1lh;line-height:1.25;display:flex}.brush-tile:hover .brush-tile-disc{background:var(--border)}.brush-tile:active{transform:scale(.94)}.brush-tile.on .brush-tile-disc{box-shadow:inset 0 0 0 2.5px var(--accent);background:var(--surface)}.brush-tile.on{color:var(--text)}.style-chip{cursor:pointer;width:44px;height:44px;box-shadow:inset 0 0 0 1.5px var(--ring-inset);transition:transform var(--motion-fast);border:none;border-radius:50%;position:relative}.style-chip:hover{transform:scale(1.06)}.style-chip.active{box-shadow:inset 0 0 0 2.5px var(--accent), inset 0 0 0 4.5px var(--paper);outline-offset:3px;outline:2px solid #0000}.corner-anchor{top:calc(var(--space-3) + var(--safe-top));z-index:var(--z-dock);position:absolute}.corner-anchor-left{left:calc(var(--space-3) + var(--safe-left))}.corner-anchor-right{right:calc(var(--space-3) + var(--safe-right))}.corner-anchor-top{gap:var(--space-2);display:flex;left:50%;transform:translate(-50%)}.corner-btn{width:var(--control-touch);height:var(--control-touch);border-radius:var(--radius-full);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--ring-inset);transition:transform var(--motion-fast);border:none;place-items:center;display:grid}.corner-btn:active:not(:disabled){transform:scale(.92)}.corner-btn:disabled{cursor:default;color:var(--text-dim);opacity:1}.corner-btn:disabled>*{opacity:.5}.floating-toolbar{--floating-btn-size:56px;left:50%;bottom:calc(var(--space-4) + var(--safe-bottom));align-items:center;gap:var(--space-3);z-index:var(--z-dock);display:flex;position:absolute;transform:translate(-50%)}.floating-toolbar-btn{width:var(--floating-btn-size);height:var(--floating-btn-size);border-radius:var(--radius-full);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--ring-inset);transition:transform var(--motion-fast);border:none;place-items:center;display:grid}.floating-toolbar-btn:active{transform:scale(.92)}.floating-toolbar-pick.active{background:var(--accent);color:var(--text-invert);box-shadow:none}.floating-toolbar-icon{width:calc(var(--floating-btn-size) * .74);height:calc(var(--floating-btn-size) * .74);object-fit:contain;pointer-events:none}.floating-toolbar-swatch{width:calc(var(--floating-btn-size) * .7);height:calc(var(--floating-btn-size) * .7);box-shadow:inset 0 0 0 1.5px var(--ring-inset);pointer-events:none;border-radius:50%}.color-picker{gap:var(--space-4);flex-direction:column;height:100%;min-height:0;display:flex}.drawer-body:has(>.color-picker){overflow:hidden}.color-picker>.shade-slider,.color-picker>.swatch-scroll,.color-picker>.palette-utils{flex:none}.palette-picker{gap:var(--space-3);overscroll-behavior:contain;min-height:0;padding-bottom:var(--space-4);border-bottom:1px solid var(--border);flex-direction:column;flex:auto;display:flex;overflow-y:auto}.palette-cats{gap:var(--space-2);flex-wrap:wrap;display:flex}.palette-cat{min-height:var(--control-touch);padding:0 var(--space-4);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);color:var(--text-dim);font-size:var(--font-sm);font-weight:var(--weight-bold);cursor:pointer;transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast)}.palette-cat:hover{border-color:var(--accent)}.palette-cat.active{border-color:var(--accent);background:var(--accent);color:var(--text-invert)}.options-row{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;display:flex}.shade-slider{--shade-thumb-size:30px;border-radius:var(--radius-full);cursor:pointer;width:100%;max-width:640px;height:36px;box-shadow:inset 0 0 0 1px var(--ring-inset-soft);touch-action:none;margin:0 auto;position:relative}.shade-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.shade-thumb{width:var(--shade-thumb-size);height:var(--shade-thumb-size);box-shadow:0 0 0 3px var(--paper), var(--shadow-accent);pointer-events:none;transition:box-shadow var(--motion-fast), scale var(--motion-fast);will-change:left;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.shade-slider:active .shade-thumb,.shade-slider:focus-visible .shade-thumb{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ring-inset-strong), var(--shadow-accent);scale:1.12}.palette-tabs{gap:var(--space-2);grid-template-columns:repeat(3,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;transition:background var(--motion-fast), border-color var(--motion-fast);background:0 0;flex-direction:column;display:flex}.palette-card.active{background:var(--surface-hover);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.palette-card:not(.active):hover{border-color:var(--accent);background:var(--surface-hover)}.palette-card-swatches{flex-wrap:wrap;align-self:stretch;gap:3px;width:100%;display:flex}.palette-card-swatches span{aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--ring-inset-soft);border-radius:50%;flex:0 0 calc(16.6667% - 2.5px);display:block}.palette-card-name{font-size:var(--font-xs);font-weight:var(--weight-bold);color:var(--text);text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.palette-tab-dots{gap:2px;display:inline-flex}.palette-tab-dots span{width:7px;height:7px;box-shadow:inset 0 0 0 .5px var(--ring-inset-strong);border-radius:50%}.palette-utils{align-items:center;gap:var(--space-2);padding:4px 0;display:flex}.palette-utils .palette-switch-chip{flex:1}.swatch-scroll{grid-template-columns:repeat(auto-fit, minmax(var(--control-touch), 1fr));align-items:center;gap:10px;padding:6px 0;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);font-weight:var(--weight-bold);display:flex}.swatch{cursor:pointer;width:30px;height:30px;box-shadow:inset 0 0 0 1.5px var(--ring-inset), var(--shadow-sm);transition:transform var(--motion-fast);border:none;border-radius:50%;flex:none;position:relative}.swatch-scroll .swatch{aspect-ratio:1;width:100%;height:auto;min-width:var(--control-touch);justify-self:center;max-width:48px}.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 3px var(--text)}.swatch.tool-swatch{width:var(--control-touch);height:var(--control-touch);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.active{box-shadow:inset 0 0 0 1.5px var(--ring-inset)}.swatch.custom{width:var(--control-touch);height:var(--control-touch);background:radial-gradient(circle, var(--paper) 0 28%, transparent 30%), conic-gradient(#ef4444, #facc15, #22c55e, #0ea5e9, #8b5cf6, #ec4899, #ef4444);place-items:center;display:grid}.custom-dot{width:16px;height:16px;box-shadow:inset 0 0 0 1px var(--ring-inset-strong);border-radius:50%}.picker-value{align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--font-xs);font-weight:var(--weight-bold);color:var(--text-dim);font-variant-numeric:tabular-nums;display:flex}.picker-chip{width:16px;height:16px;box-shadow:inset 0 0 0 1px var(--ring-inset);border-radius:4px}.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;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}.tab-panel,.page-head,.gallery-grid{animation:stage-fade var(--motion-base) ease}.page-head{justify-content:space-between;align-items:center;gap:var(--space-3);margin:var(--space-2) 0 var(--space-3);display:flex}.page-head-actions{gap:var(--space-1);display:flex}.project-loading-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}.project-loading-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;transition:box-shadow var(--motion-fast);text-align:left;flex-direction:column;padding:0;display:flex;position:relative;overflow:visible}.project-card:hover{box-shadow:var(--shadow-md)}.project-thumb{aspect-ratio:1;object-fit:contain;background:var(--paper);border-bottom:1px solid var(--border);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;opacity:0;width:100%;transition:opacity var(--motion-slow) ease;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}.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);font-weight:var(--weight-bold);cursor:pointer;transition:background var(--motion-fast);background:0 0;flex-direction:column;display:flex}.new-project-tile:hover{background:var(--surface-hover)}.gallery-body{padding-bottom:calc(var(--bottom-bar-height) + var(--safe-bottom))}@media (width>=1025px){.app[data-screen=editor] .shade-slider{height:32px}}@media (prefers-reduced-motion:reduce){.stage-container .konvajs-content,.tab-panel,.page-head,.gallery-grid,.app[data-screen],.gallery-grid>*,.hint-pill{animation:none}.brush-tile{transition:none}.project-thumb{opacity:1;transition:none}}@media (width>=768px){.swatch{width:48px;height:48px}.swatch-scroll{gap:12px}}@media (orientation:portrait){.swatch-scroll{grid-template-columns:repeat(6,1fr)}}.tool-options{justify-content:center;padding:4px 8px 2px}@media (width>=768px){.swatch-scroll,.palette-utils{width:100%;max-width:720px;margin-inline:auto}}@media (orientation:landscape) and (width>=900px){.swatch-scroll{grid-template-columns:repeat(12,1fr);gap:10px}}@media (orientation:landscape){.corner-anchor-top{left:calc(var(--space-3) + var(--safe-left));right:auto;top:calc(var(--space-3) + var(--safe-top) + var(--control-touch) + var(--space-2));gap:var(--space-1);flex-direction:column;transform:none}.floating-toolbar{left:auto;right:calc(var(--space-3) + var(--safe-right));top:auto;bottom:calc(var(--space-4) + var(--safe-bottom));--floating-btn-size:52px;gap:var(--space-3);flex-direction:column;transform:none}}@media (orientation:landscape) and (height<=400px){.floating-toolbar{--floating-btn-size:44px;gap:var(--space-2)}}@media (height<=500px){:root{--header-height:48px}.shade-slider{--shade-thumb-size:24px;height:28px}.brush-categories{--brush-disc-size:44px;--brush-tile-min:60px;gap:var(--space-2)}.brush-category{gap:var(--space-1)}.color-picker{align-content:start;column-gap:var(--space-4);row-gap:var(--space-2);grid-template-rows:auto auto 1fr;grid-template-columns:1fr 1fr;height:100%;display:grid}.color-picker>.palette-picker{min-height:0;padding-bottom:0;padding-right:var(--space-4);border-bottom:none;border-right:1px solid var(--border);grid-area:1/1/-1;overflow-y:auto}.color-picker>.shade-slider{grid-area:1/2}.color-picker>.swatch-scroll{grid-area:2/2;min-height:0;overflow-y:auto}.color-picker>.palette-utils{grid-area:3/2;align-self:end}.palette-tabs{grid-template-columns:repeat(2,1fr)}.palette-cats{overscroll-behavior-x:contain;flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto}.palette-cat{flex:none}.palette-switch-chip{white-space:nowrap;min-width:0}.palette-switch-name{text-overflow:ellipsis;overflow:hidden}.tool-options{padding:2px 8px}}@media (width<=640px){:root{--header-height:48px}.shade-slider{--shade-thumb-size:26px;height:32px}.swatch{width:var(--control-touch);height:var(--control-touch)}}@media (width<=360px){.floating-toolbar{--floating-btn-size:48px;gap:var(--space-2)}}@media (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-icon{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-sub{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);transition:transform var(--motion-fast), box-shadow var(--motion-fast);border:none;flex-direction:column;flex:none;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:var(--gradient-mint)}.gen-feature-text{background:var(--gradient-peach)}.gen-feature-upload{background:var(--gradient-sky)}.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, var(--glow-photo), transparent)}.gen-feature-text:before{background:radial-gradient(closest-side, var(--glow-text), transparent)}.gen-feature-upload:before{background:radial-gradient(closest-side, var(--glow-upload), transparent)}.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-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-fullscreen{scrollbar-width:none;min-height:0;padding:calc(var(--safe-top) + var(--space-3)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-6) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));flex:1;overflow-y:auto}.gen-fullscreen::-webkit-scrollbar{display:none}.gen-screen{gap:var(--space-3)}.gen-screen-head{display:flex}.gen-screen-title{max-width:32ch}.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);transition:border-color var(--motion-fast), box-shadow var(--motion-fast);border-radius:28px;scroll-margin-block:80px;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-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;transition:box-shadow var(--motion-fast);border:none;flex-direction:column;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{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);font-weight:var(--weight-bold);justify-content:center;align-items:center;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);font-weight:var(--weight-bold);color:var(--text-dim);align-items:center;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-placeholder{width:min(260px,100%);color:var(--text-dim);background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-lg);justify-content:center;align-items:center;margin-inline:auto;display:flex;position:relative;overflow:hidden}.gen-placeholder-photo{object-fit:cover;opacity:.5;filter:grayscale(.6);width:100%;height:100%}.gen-placeholder-icon{border-radius:var(--radius-full);width:64px;height:64px;color:var(--accent);background:var(--surface);box-shadow:var(--shadow-sm);place-items:center;animation:2s ease-in-out infinite alternate gen-icon-breathe;display:grid;position:relative}.gen-placeholder-sheen{background:linear-gradient(100deg, transparent 30%, var(--sheen-highlight) 50%, transparent 70%);background-size:220% 100%;animation:1.5s linear infinite gen-sheen;position:absolute;inset:0}@keyframes gen-sheen{0%{background-position:160% 0}to{background-position:-60% 0}}@keyframes gen-icon-breathe{0%{transform:scale(1)}to{transform:scale(1.08)}}.gen-stage-msg{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--font-md);font-weight:var(--weight-bold);color:var(--text);display:flex}.gen-stage-dots{gap:3px;display:inline-flex}.gen-stage-dots i{border-radius:var(--radius-full);background:var(--accent);width:5px;height:5px;animation:1.1s ease-in-out infinite gen-dot}.gen-stage-dots i:nth-child(2){animation-delay:.15s}.gen-stage-dots i:nth-child(3){animation-delay:.3s}@keyframes gen-dot{0%,60%,to{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.gen-progress-note{max-width:34ch;margin-inline:auto;line-height:1.5}@media (prefers-reduced-motion:reduce){.gen-placeholder-sheen,.gen-placeholder-icon,.gen-stage-dots i{animation:none}}.home-panel{margin-top:var(--space-2);gap:var(--space-3)}.home-sub{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%}.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-slot{align-self:flex-start;display:flex}.hero-date{color:var(--text-dim);font-size:var(--font-sm);font-weight:var(--weight-bold)}.hero-title{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:var(--paper);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:inherit;background:var(--paper);width:100%}.home-ai-actions{gap:var(--space-3);margin:var(--space-3) 0 var(--space-4);flex-direction:column;display:flex}.library-chips{gap:var(--space-2)}.library-grid .template-card{width:auto}.library-loading{padding:var(--space-6) 0}.library-sentinel{height:1px}.library-more{justify-content:center;display:flex}.profile-avatar{border-radius:var(--radius-full);background:var(--accent-gradient);width:56px;height:56px;color:var(--text-invert);font-size:var(--font-xl);font-weight:var(--weight-bold);flex:none;place-items:center;display:grid;overflow:hidden}.profile-avatar img{object-fit:cover;width:100%;height:100%}.profile-info{min-width:0}.profile-name{font-weight:var(--weight-bold);font-size:var(--font-lg);color:var(--text)}.profile-email{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.profile-stats{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.profile-field-label{font-size:var(--font-xs);color:var(--text-dim)}.profile-avatar-empty{background:var(--surface-hover);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}.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}.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:var(--weight-bold);font-size:var(--font-sm);text-transform:capitalize}.app[data-screen]{animation:page-fade-in var(--motion-slow) ease both}@keyframes page-fade-in{0%{opacity:0}to{opacity:1}}.gallery-grid>*{animation:card-in var(--motion-slow) ease both}.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){.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}