.outline-width-control{align-items:center;display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.outline-color-row{animation:fade-in .2s ease-out;margin-top:var(--spacing-sm)}@keyframes fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.outline-section .color-swatches-row{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.outline-section .color-swatch{border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;height:24px;transition:all .2s ease;width:24px}.outline-section .color-swatch:hover{transform:scale(1.1)}.outline-section .color-swatch.active{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #008dd54d}.outline-section .color-swatch.white{border-color:var(--border-color)}.outline-section .color-picker-input{border:none;border-radius:var(--radius-sm);cursor:pointer;height:24px;padding:0;width:24px}.effect-section-header{align-items:center;color:var(--text-primary);display:flex;font-size:.875rem;font-weight:var(--font-weight-medium);gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.effect-section-header svg{flex-shrink:0}.popover-section.wavy-section{margin-bottom:var(--spacing-xs)}.effect-indicator{background:var(--color-brand-primary);border-radius:50%;height:6px;width:6px}.effect-section-toggle{background:none;border:none;cursor:pointer;padding:0;width:100%}.effect-section-chevron{margin-left:auto;transition:transform .15s ease}.effect-section-chevron.open{transform:scaleY(-1)}.effect-controls{padding:0}.effect-controls .bend-control,.effect-controls .wave-height-control,.effect-controls .wave-frequency-control,.effect-controls .wave-shift-control{align-items:center;display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.reset-effect-btn{margin:var(--spacing-xs)}.bend-slider,.wave-slider{accent-color:var(--color-brand-primary)}.bend-control .slider-track{position:relative}.bend-control .slider-track:before{background:var(--border-color);bottom:0;content:"";left:50%;position:absolute;top:0;transform:translate(-50%);width:2px}.context-menu{animation:context-menu-fade-in .15s ease-out;background:var(--color-background);border-radius:var(--radius-lg);box-shadow:0 8px 24px #00000026,0 2px 8px #0000001a;font-family:var(--font-family-base);min-width:200px;padding:var(--spacing-2);position:fixed;z-index:10000}@keyframes context-menu-fade-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes context-menu-fade-in-flipped{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu--flipped{animation-name:context-menu-fade-in-flipped}.context-menu-item{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-family-base);font-size:var(--font-size-sm);gap:var(--spacing-3);padding:10px 12px;text-align:left;transition:background-color .15s ease;width:100%}.context-menu-item:hover:not(.disabled){background:var(--bg-hover)}.context-menu-item:active:not(.disabled){background:var(--color-border)}.context-menu-item.disabled{cursor:not-allowed;opacity:.4}.context-menu-icon{align-items:center;display:flex;height:16px;justify-content:center;width:16px;--fa-primary-color: var(--color-brand-lighter, #f56476);--fa-secondary-color: var(--color-brand-primary, #008dd5);--fa-secondary-opacity: 1}.context-menu-label{flex:1;font-weight:var(--font-weight-medium)}.context-menu-tag{margin:var(--spacing-1) var(--spacing-2) var(--spacing-1)}.context-menu-separator{background:var(--color-border);height:1px;margin:var(--spacing-1) 0}.context-menu-item--submenu-open:not(.disabled){background:var(--bg-hover)}.context-menu-chevron{color:var(--color-text-secondary);flex-shrink:0;margin-left:auto}.context-menu-submenu{z-index:10001}.oauth-callback{align-items:center;background:var(--color-background);display:flex;justify-content:center;min-height:100vh;padding:var(--spacing-xl)}.oauth-callback-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);max-width:400px;padding:var(--spacing-2xl);text-align:center;width:100%}.oauth-callback-spinner{margin-bottom:var(--spacing-lg)}.oauth-callback-title{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-md)}.oauth-callback-title--success{color:var(--color-success, #22c55e)}.oauth-callback-title--error{color:var(--color-error)}.oauth-callback-message{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0}.oauth-callback-actions{margin-top:var(--spacing-lg)}.canvas-size-modal{background:var(--color-background);border-radius:var(--radius-md);box-shadow:0 20px 40px #00000026;display:flex;flex-direction:column;max-height:90vh;max-width:900px;overflow:hidden;width:100%}.canvas-size-modal .modal-header{background:var(--color-background);padding:var(--spacing-5) var(--spacing-6)}.canvas-size-modal .modal-body{overflow:hidden}.canvas-size-modal .modal-title{font-size:var(--font-size-2xl)}.canvas-size-modal .modal-content{display:flex;flex:1 1 auto;flex-direction:column;max-width:100%;min-height:0;overflow:visible;padding:var(--spacing-6)}.canvas-size-modal .modal-scrollable-content{flex:1 1 auto;max-height:calc(90vh - 280px);min-height:300px;overflow-y:auto;padding-right:var(--spacing-2)}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar{width:8px}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--radius-sm)}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-thumb{background:var(--color-brand-dark);border-radius:var(--radius-sm)}.canvas-size-modal .modal-scrollable-content::-webkit-scrollbar-thumb:hover{background:var(--color-brand-secondary)}.canvas-size-modal .sizes{display:grid;gap:var(--spacing-4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:var(--spacing-6)}.canvas-size-modal .sizes__box{align-items:center;background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-card);box-shadow:0 2px 8px var(--color-black-alpha-50);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-3);justify-content:center;min-height:140px;padding:var(--spacing-5);text-align:center;transition:all .2s ease}.canvas-size-modal .sizes__box:hover{border-color:var(--color-brand-secondary);box-shadow:0 4px 16px #e43f6f26}.canvas-size-modal .sizes__box.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);box-shadow:0 4px 16px #e43f6f33}.canvas-size-modal .size-item-image{border-radius:var(--radius-md);height:80px;object-fit:contain;width:80px}.canvas-size-modal .size-item-placeholder{align-items:center;background:var(--color-surface);border-radius:var(--radius-sm);color:var(--color-brand-secondary);display:flex;height:80px;justify-content:center;width:80px}.canvas-size-modal .sizes__box-title{color:var(--color-text-primary);font-size:var(--text-base-size);font-weight:var(--font-weight-semibold);margin:0}.canvas-size-modal .sizes__box-dimensions{color:var(--color-text-secondary);font-size:var(--text-sm-size);margin:0}.canvas-size-modal .custom-size-form{display:flex;flex-direction:column;gap:var(--spacing-5)}.canvas-size-modal .input-row{display:flex;gap:var(--spacing-4)}.canvas-size-modal .input-group{display:flex;flex:1;flex-direction:column;gap:var(--spacing-2)}.canvas-size-modal .input-group label{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold)}.canvas-size-modal .dimension-input{background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base-size);padding:var(--spacing-3) var(--spacing-4);transition:border-color .2s ease}.canvas-size-modal .dimension-input:focus{border-color:var(--color-brand-secondary);outline:none}.canvas-size-modal .unit-selection{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.canvas-size-modal .unit-button{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);transition:all .2s ease}.canvas-size-modal .unit-button:hover{background:var(--color-brand-lighter);border-color:var(--color-brand-secondary);color:var(--color-text-primary)}.canvas-size-modal .unit-button.active{background:var(--color-brand-secondary);border-color:var(--color-brand-secondary);color:var(--color-background)}.canvas-size-modal .modal-footer{justify-content:center;padding:var(--spacing-5) var(--spacing-6)}.canvas-size-modal .canvas-size-create{max-width:300px;width:100%}@media(max-width:768px){.canvas-size-modal{margin:10px;max-height:95vh}.canvas-size-modal .modal-header,.canvas-size-modal .modal-content{padding:var(--spacing-5)}.canvas-size-modal .sizes{gap:var(--spacing-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.canvas-size-modal .input-row{flex-direction:column}.canvas-size-modal .unit-selection{justify-content:center}.canvas-size-modal .size-item-image{height:60px;width:60px}}@media(max-width:480px){.canvas-size-modal .sizes{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.canvas-size-modal .sizes__box{padding:var(--spacing-4)}.canvas-size-modal .size-item-image{height:50px;width:50px}.canvas-size-modal .sizes__box-title{font-size:var(--text-sm-size)}.canvas-size-modal .sizes__box-dimensions{font-size:var(--text-xs-size)}}:root{--color-plum-wine-50: #f4eff3;--color-plum-wine-100: #ebdfe9;--color-plum-wine-200: #dcc5d6;--color-plum-wine-300: #c5a1bc;--color-plum-wine-400: #b183a4;--color-plum-wine-500: #968;--color-plum-wine-600: #825471;--color-plum-wine-700: #6d475e;--color-plum-wine-800: #4a3241;--color-plum-wine-900: #36212e;--color-sage-gray-50: #ebedec;--color-sage-gray-100: #d6dcd8;--color-sage-gray-200: #bbc4be;--color-sage-gray-300: #8d9b92;--color-sage-gray-400: #6c7b72;--color-sage-gray-500: #56635b;--color-sage-gray-600: #464f49;--color-sage-gray-700: #3a413d;--color-sage-gray-800: #313633;--color-sage-gray-900: #181b19;--color-dusty-rose-50: #f9eaeb;--color-dusty-rose-100: #f3d8dc;--color-dusty-rose-200: #e8b4bc;--color-dusty-rose-300: #dc909d;--color-dusty-rose-400: #cc677c;--color-soft-linen-50: #f4e9dc;--color-soft-linen-100: #ead5be;--color-soft-linen-200: #dcb795;--color-soft-linen-300: #cd946a;--color-soft-linen-400: #c3794c;--color-alabaster: #faf7f2;--color-white: #fff;--color-neutral-50: #fafafa;--color-neutral-100: #f5f5f5;--color-neutral-200: #e5e5e5;--color-neutral-300: #d4d4d4;--color-neutral-400: #a3a3a3;--color-neutral-500: #737373;--color-neutral-600: #525252;--color-neutral-700: #404040;--color-neutral-800: #262626;--color-neutral-900: #171717;--color-sunset-red-50: #ffe1e2;--color-sunset-red-100: #ffc7c9;--color-sunset-red-200: #ffa0a3;--color-sunset-red-300: #ff5a5f;--color-sunset-red-400: #f83b41;--color-sunset-red-500: #e51d23;--color-sunset-red-600: #c11419;--color-sunset-red-700: #a01418;--color-sunset-red-800: #84181b;--color-sunset-red-900: #480709;--color-royal-violet-50: #e1e2fe;--color-royal-violet-100: #c8cafd;--color-royal-violet-200: #a7a7fa;--color-royal-violet-300: #8c84f5;--color-royal-violet-400: #7b68ee;--color-royal-violet-500: #6b4ae1;--color-royal-violet-600: #5d3bc7;--color-royal-violet-700: #4b33a0;--color-royal-violet-800: #40307f;--color-royal-violet-900: #261c4a;--color-lemon-zest-50: #fcffc2;--color-lemon-zest-100: #feff89;--color-lemon-zest-200: #fffa62;--color-lemon-zest-300: #fdec12;--color-lemon-zest-400: #ecd106;--color-lemon-zest-500: #cca502;--color-lemon-zest-600: #a37605;--color-lemon-zest-700: #865c0d;--color-lemon-zest-800: #724b11;--color-lemon-zest-900: #432805;--color-black-alpha-25: rgb(0 0 0 / 2%);--color-black-alpha-50: rgb(0 0 0 / 5%);--color-black-alpha-100: rgb(0 0 0 / 10%);--color-black-alpha-200: rgb(0 0 0 / 20%);--color-black-alpha-300: rgb(0 0 0 / 30%);--color-black-alpha-400: rgb(0 0 0 / 40%);--color-black-alpha-500: rgb(0 0 0 / 50%);--color-black-alpha-600: rgb(0 0 0 / 60%);--color-black-alpha-700: rgb(0 0 0 / 70%);--color-black-alpha-800: rgb(0 0 0 / 80%);--color-black-alpha-900: rgb(0 0 0 / 90%);--color-white-alpha-50: rgb(255 255 255 / 5%);--color-white-alpha-100: rgb(255 255 255 / 10%);--color-white-alpha-200: rgb(255 255 255 / 20%);--color-white-alpha-300: rgb(255 255 255 / 30%);--color-white-alpha-400: rgb(255 255 255 / 40%);--color-white-alpha-500: rgb(255 255 255 / 50%);--color-white-alpha-600: rgb(255 255 255 / 60%);--color-white-alpha-700: rgb(255 255 255 / 70%);--color-white-alpha-800: rgb(255 255 255 / 80%);--color-white-alpha-900: rgb(255 255 255 / 90%);--color-brand-primary: var(--color-plum-wine-800);--color-brand-primary-hover: var(--color-plum-wine-700);--color-brand-primary-press: var(--color-plum-wine-600);--color-brand-light: var(--color-plum-wine-100);--color-brand-lighter: var(--color-dusty-rose-400);--color-brand-dark: var(--color-plum-wine-900);--color-brand-secondary: var(--color-dusty-rose-300);--color-zoom-accent: var(--color-plum-wine-800);--color-zoom-accent-hover: var(--color-plum-wine-900);--color-text-primary: var(--color-brand-primary);--color-text-secondary: var(--color-sage-gray-400);--color-text-light: var(--color-sage-gray-300);--color-text-on-brand: var(--color-alabaster);--color-background: var(--color-alabaster);--color-surface: var(--color-plum-wine-50);--color-canvas-bg: var(--color-neutral-100);--color-sidebar-bg: var(--color-alabaster);--color-panel-bg: var(--color-alabaster);--color-input-bg: var(--color-black-alpha-50);--color-surface-elevated: var(--color-neutral-100);--color-surface-hover: var(--color-sage-gray-50);--color-surface-secondary: var(--color-sage-gray-50);--color-text: var(--color-text-primary);--color-text-disabled: var(--color-neutral-400);--color-border: var(--color-sage-gray-100);--color-success: #10b981;--color-error: var(--color-sunset-red-500);--color-error-dark: var(--color-sunset-red-600);--color-warning: #f59e0b;--color-info: #3b82f6;--color-overlay: rgb(74 50 65 / 70%);--color-focus-ring: rgb(74 50 65 / 15%);--color-shadow: var(--color-black-alpha-100);--shadow-elevated: 0 20px 25px -5px var(--color-black-alpha-100), 0 10px 10px -5px rgb(0 0 0 / 4%);--shadow-button-primary: 3px 3px 10px 0px rgb(0 0 0 / 10%), 13px 12px 18px 0px rgb(0 0 0 / 9%), 30px 28px 25px 0px rgb(0 0 0 / 5%), 54px 50px 29px 0px rgb(0 0 0 / 1%), 84px 78px 32px 0px rgb(0 0 0 / 0%);--bg-primary: var(--color-background);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-sidebar-bg);--bg-hover: var(--color-plum-wine-50);--border-color: var(--color-border);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--accent-color: var(--color-brand-primary);--accent-hover: var(--color-brand-primary-hover)}body.dark-theme{--color-text-primary: var(--color-white);--color-text-secondary: var(--color-neutral-400);--color-text-light: var(--color-sage-gray-300);--color-text-on-brand: var(--color-alabaster);--color-text: var(--color-white);--color-text-disabled: var(--color-neutral-600);--color-background: var(--color-sage-gray-900);--color-surface: var(--color-sage-gray-800);--color-canvas-bg: var(--color-sage-gray-800);--color-sidebar-bg: var(--color-sage-gray-800);--color-panel-bg: var(--color-sage-gray-800);--color-input-bg: var(--color-white-alpha-50);--color-surface-elevated: var(--color-neutral-600);--color-surface-hover: var(--color-sage-gray-700);--color-surface-secondary: var(--color-neutral-600);--color-border: var(--color-sage-gray-700);--color-shadow: var(--color-black-alpha-300);--color-error-dark: var(--color-sunset-red-700);--color-info: #60a5fa;--color-focus-ring: rgb(130 84 113 / 30%);--bg-primary: var(--color-background);--bg-secondary: var(--color-surface);--bg-tertiary: var(--color-sidebar-bg);--bg-hover: var(--color-neutral-600);--border-color: var(--color-border);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--accent-color: var(--color-brand-primary);--accent-hover: var(--color-brand-primary-hover)}:root{--font-family-heading: "EB Garamond", georgia, "Times New Roman", serif;--font-family-body: "Figtree", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;--font-family-caption: "Inter Display", "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--heading-h1-size: 4.5rem;--heading-h1-line-height: 100%;--heading-h2-size: 3.5rem;--heading-h2-line-height: 110%;--heading-h3-size: 3rem;--heading-h3-line-height: 110%;--heading-h4-size: 2.25rem;--heading-h4-line-height: 110%;--heading-h5-size: 1.5rem;--heading-h5-line-height: 110%;--heading-weight: var(--font-weight-medium);--heading-h1-size-mobile: 3rem;--heading-h1-line-height-mobile: 100%;--heading-h2-size-mobile: 2.25rem;--heading-h2-line-height-mobile: 2.5rem;--heading-h3-size-mobile: 1.75rem;--heading-h3-line-height-mobile: 2rem;--heading-h4-size-mobile: 1.5rem;--heading-h4-line-height-mobile: 1.5rem;--heading-h5-size-mobile: 1.25rem;--heading-h5-line-height-mobile: 1.25rem;--text-lg-size: 1.125rem;--text-lg-line-height: 1.75rem;--text-base-size: 1rem;--text-base-line-height: 1.5rem;--text-sm-size: .875rem;--text-sm-line-height: 1.25rem;--text-xs-size: .75rem;--text-xs-line-height: 1.125rem;--text-2xs-size: .625rem;--text-2xs-line-height: .875rem;--caption-base-size: 1rem;--caption-base-line-height: 1.5rem;--caption-sm-size: .875rem;--caption-sm-line-height: 1.25rem;--caption-xs-size: .75rem;--caption-xs-line-height: 1.125rem;--caption-weight: var(--font-weight-semibold);--font-family-base: var(--font-family-body);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.75rem;--font-size-4xl: 2.5rem;--font-weight-light: 300;--font-weight-normal: var(--font-weight-regular);--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-relaxed: 1.8;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em}:root{--spacing-0-5: .125rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.5rem;--spacing-6: 2rem;--spacing-7: 3rem;--spacing-8: 4rem;--spacing-9: 6rem;--spacing-10: 8rem;--spacing-11: 12rem;--spacing-12: 16rem;--top-bar-height: 80px;--sidebar-width: 80px;--panel-width: 400px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 25px;--radius-button: 1000px;--radius-card: 16px;--radius-full: 50%;--aspect-ratio-1-1: 1 / 1;--aspect-ratio-3-2: 3 / 2;--aspect-ratio-4-3: 4 / 3;--aspect-ratio-16-9: 16 / 9;--spacing-unit: var(--spacing-1);--spacing-xs: var(--spacing-1);--spacing-sm: var(--spacing-2);--spacing-md: var(--spacing-4);--spacing-lg: var(--spacing-5);--spacing-xl: var(--spacing-6);--spacing-2xl: var(--spacing-7);--spacing-3xl: var(--spacing-8)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-base);height:100vh;line-height:var(--line-height-normal);overflow:hidden}body:has(.welcome-screen){height:auto;min-height:100vh;overflow:visible}.auth-loading{align-items:center;background:var(--color-background);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app:has(.welcome-screen){height:auto;min-height:100vh;overflow:visible}.main-content{display:flex;height:calc(100vh - var(--top-bar-height));margin-left:var(--sidebar-width);margin-top:var(--top-bar-height);overflow:hidden;position:relative;transition:margin-left .3s ease}.main-content:has(.welcome-screen){height:auto;min-height:calc(100vh - var(--top-bar-height));overflow:visible}.main-content:has(.left-sidebar:not(.visible)){margin-left:0}.main-content.no-sidebar{margin-left:0}.canvas-container{flex:1;min-width:0}.main-zoom-controls{padding:8px;position:absolute;right:20px;top:20px;z-index:100}.main-zoom-controls .zoom-controls{align-items:center;display:flex;gap:8px}.main-zoom-controls .zoom-btn{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:4px;transition:all .2s ease}.main-zoom-controls .zoom-btn:hover{background:none}.main-zoom-controls .zoom-percentage{font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:40px;text-align:center}@media(max-width:768px){.main-content{margin-left:0}.left-sidebar{transform:translate(-100%)}.left-sidebar.visible{transform:translate(0)}.main-zoom-controls{right:10px;top:10px}}.processing-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-white-alpha-900);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:fixed;z-index:2000}.processing-content{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:0 8px 32px var(--color-shadow);padding:var(--spacing-xl);text-align:center}.spinner{animation:spin 1s linear infinite;border:3px solid var(--color-border);border-radius:var(--radius-full);border-top:3px solid var(--color-zoom-accent);height:40px;margin:0 auto var(--spacing-md);width:40px}.processing-message{color:var(--color-text-primary);font-weight:var(--font-weight-medium);margin:0}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:high){:root{--color-border: #000;--color-shadow: rgb(0 0 0 / 30%)}}@media(max-width:1024px){.right-panel{bottom:0;position:fixed;right:0;top:var(--top-bar-height);transform:translate(100%);transition:transform .3s ease;z-index:1000}.right-panel.open{transform:translate(0)}}@media(max-width:768px){:root{--sidebar-width: 160px;--panel-width: 280px}.top-bar-center{margin:0 var(--spacing-md)}.chat-input-container{max-width:300px}}@media(max-width:480px){:root{--sidebar-width: 140px;--panel-width: 100vw}.top-bar{padding:0 var(--spacing-md)}.top-bar-center{margin:0 var(--spacing-sm)}.chat-input-container{max-width:250px;padding:calc(var(--spacing-sm) * .75) var(--spacing-sm)}.chat-input{font-size:var(--font-size-sm)}}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.gap-0{gap:0}.gap-1{gap:var(--spacing-xs)}.gap-2{gap:var(--spacing-sm)}.gap-3{gap:var(--spacing-md)}.gap-4{gap:var(--spacing-lg)}.gap-5{gap:var(--spacing-xl)}.gap-x-0{column-gap:0}.gap-x-1{column-gap:var(--spacing-xs)}.gap-x-2{column-gap:var(--spacing-sm)}.gap-x-3{column-gap:var(--spacing-md)}.gap-x-4{column-gap:var(--spacing-lg)}.gap-x-5{column-gap:var(--spacing-xl)}.gap-y-0{row-gap:0}.gap-y-1{row-gap:var(--spacing-xs)}.gap-y-2{row-gap:var(--spacing-sm)}.gap-y-3{row-gap:var(--spacing-md)}.gap-y-4{row-gap:var(--spacing-lg)}.gap-y-5{row-gap:var(--spacing-xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.static{position:static}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-50{top:50%}.left-50{left:50%}.w-full{width:100%}.w-auto{width:auto}.w-screen{width:100vw}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-2\/3{width:66.666667%}.w-1\/4{width:25%}.w-3\/4{width:75%}.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.h-1\/2{height:50%}.h-1\/3{height:33.333333%}.h-2\/3{height:66.666667%}.h-1\/4{height:25%}.h-3\/4{height:75%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.max-w-screen-sm{max-width:640px}.max-w-screen-md{max-width:768px}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.min-h-0{min-height:0}.min-h-full{min-height:100%}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-none{transform:none}.origin-center{transform-origin:center}.origin-top{transform-origin:top}.origin-top-right{transform-origin:top right}.origin-right{transform-origin:right}.origin-bottom-right{transform-origin:bottom right}.origin-bottom{transform-origin:bottom}.origin-bottom-left{transform-origin:bottom left}.origin-left{transform-origin:left}.origin-top-left{transform-origin:top left}.scale-0{transform:scale(0)}.scale-50{transform:scale(.5)}.scale-75{transform:scale(.75)}.scale-90{transform:scale(.9)}.scale-95{transform:scale(.95)}.scale-100{transform:scale(1)}.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}.scale-125{transform:scale(1.25)}.scale-150{transform:scale(1.5)}.rotate-0{transform:rotate(0)}.rotate-1{transform:rotate(1deg)}.rotate-2{transform:rotate(2deg)}.rotate-3{transform:rotate(3deg)}.rotate-6{transform:rotate(6deg)}.rotate-12{transform:rotate(12deg)}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}.translate-x-0{transform:translate(0)}.translate-x-1{transform:translate(var(--spacing-xs))}.translate-x-2{transform:translate(var(--spacing-sm))}.translate-x-3{transform:translate(var(--spacing-md))}.translate-x-4{transform:translate(var(--spacing-lg))}.translate-x-5{transform:translate(var(--spacing-xl))}.translate-x-full{transform:translate(100%)}.translate-x-1\/2{transform:translate(50%)}.translate-y-0{transform:translateY(0)}.translate-y-1{transform:translateY(var(--spacing-xs))}.translate-y-2{transform:translateY(var(--spacing-sm))}.translate-y-3{transform:translateY(var(--spacing-md))}.translate-y-4{transform:translateY(var(--spacing-lg))}.translate-y-5{transform:translateY(var(--spacing-xl))}.translate-y-full{transform:translateY(100%)}.translate-y-1\/2{transform:translateY(50%)}@media(max-width:640px){.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:grid{display:grid}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:w-full{width:100%}.sm\:h-full{height:100%}}@media(max-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid{display:grid}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:w-full{width:100%}.md\:h-full{height:100%}}@media(max-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid{display:grid}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:w-full{width:100%}.lg\:h-full{height:100%}}.range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;height:4px;outline:none;width:100%}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-brand-primary);border:2px solid var(--color-surface);border-radius:50%;cursor:pointer;height:16px;width:16px}.range-slider::-moz-range-thumb{background:var(--color-brand-primary);border:2px solid var(--color-surface);border-radius:50%;cursor:pointer;height:16px;width:16px}.range-slider:focus{outline:none}.range-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--color-focus-ring)}.checkbox-label{align-items:center;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--text-sm-size);gap:var(--spacing-2)}.checkbox-label input[type=checkbox]{accent-color:var(--color-brand-primary);height:16px;width:16px}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;height:32px;padding:0;width:32px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.select-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-input-bg);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;font-size:var(--text-xs-size);padding:6px 24px 6px 8px}.select-control:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.number-input{background:var(--color-input-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--text-xs-size);padding:6px 8px;text-align:center;width:60px}.number-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.toggle-switch{display:inline-block;height:20px;position:relative;width:40px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background-color:var(--color-border);border-radius:20px;cursor:pointer;top:0;right:0;bottom:0;left:0;position:absolute;transition:.2s}.toggle-slider:before{background-color:var(--color-background);border-radius:50%;bottom:2px;content:"";height:16px;left:2px;position:absolute;transition:.2s;width:16px}input:checked+.toggle-slider{background-color:var(--color-brand-primary)}input:checked+.toggle-slider:before{transform:translate(20px)}body.dark-theme .range-slider{background:var(--color-border)}body.dark-theme .range-slider::-webkit-slider-thumb{border-color:var(--color-surface)}body.dark-theme .checkbox-label{color:var(--color-text-primary)}body.dark-theme .color-picker{border-color:var(--color-border)}body.dark-theme .select-control,body.dark-theme .number-input{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .toggle-slider{background-color:var(--color-border)}@media(max-width:768px){.color-picker{height:28px;width:28px}.number-input{font-size:11px;width:50px}.select-control{font-size:11px;padding:5px 6px}}.advanced-tool-btn.active{border-color:var(--color-brand-primary)}.advanced-tool-btn span:first-child{font-size:var(--font-size-xl)}.advanced-tool-btn span:nth-child(2){color:var(--color-text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold)}.advanced-tool-btn small{color:var(--color-text-secondary);font-size:var(--text-2xs-size)}.offset-section{margin-bottom:var(--spacing-5)}.offset-controls{display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-3)}.offset-setting{align-items:center;display:flex;gap:var(--spacing-2)}.offset-setting label{color:var(--color-text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:60px}.offset-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;flex:1;height:4px;outline:none}.offset-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-brand-primary);border:2px solid var(--color-surface);border-radius:50%;cursor:pointer;height:16px;width:16px}.offset-color-picker{border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;height:32px;width:32px}.offset-style-select{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;font-size:var(--text-xs-size);padding:6px 8px}.layer-operations-section{margin-bottom:var(--spacing-5)}.layer-controls{display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:var(--spacing-3)}.layer-control-btn{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--text-xs-size);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);transition:all .2s ease}.layer-control-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.layer-control-btn.active{border-color:var(--color-brand-primary)}.layer-control-btn i{font-size:var(--text-sm-size)}.canvas-tools-section{margin-bottom:var(--spacing-5)}.canvas-tools-grid{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(3,1fr);margin-top:var(--spacing-3)}.canvas-tool-btn{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-1);padding:10px 6px;text-align:center;transition:all .2s ease}.canvas-tool-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.canvas-tool-btn.active{border-color:var(--color-brand-primary)}.canvas-tool-btn i{font-size:var(--text-base-size)}.canvas-tool-btn span{font-size:var(--text-2xs-size);font-weight:var(--font-weight-medium)}.zoom-controls-section{margin-bottom:var(--spacing-5)}.zoom-slider-container{align-items:center;display:flex;gap:var(--spacing-3)}.zoom-percentage{color:var(--color-text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:40px;text-align:center}.zoom-buttons{display:flex;gap:var(--spacing-1)}.zoom-btn{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--text-xs-size);height:28px;justify-content:center;transition:all .2s ease;width:28px}body.dark-theme .advanced-tool-btn{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .advanced-tool-btn:hover{background:var(--color-background)}body.dark-theme .advanced-tool-btn.active{border-color:var(--color-brand-primary)}body.dark-theme .offset-color-picker{border-color:var(--color-border)}body.dark-theme .offset-style-select,body.dark-theme .layer-control-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .layer-control-btn:hover{background:var(--color-background)}body.dark-theme .layer-control-btn.active{border-color:var(--color-brand-primary)}body.dark-theme .canvas-tool-btn{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .canvas-tool-btn:hover{background:var(--color-background)}body.dark-theme .canvas-tool-btn.active{border-color:var(--color-brand-primary)}body.dark-theme .zoom-slider{background:var(--color-border)}body.dark-theme .zoom-btn{background:none;border:none;color:var(--color-text-primary)}body.dark-theme .zoom-btn:hover{background:none}@media(max-width:768px){.advanced-tools-grid{grid-template-columns:1fr}.canvas-tools-grid{grid-template-columns:repeat(2,1fr)}.offset-setting{align-items:flex-start;flex-direction:column;gap:4px}.offset-setting label{min-width:auto}.zoom-slider-container{flex-direction:column;gap:8px}.zoom-buttons{justify-content:center}}@media(max-width:480px){.canvas-tools-grid{grid-template-columns:1fr}.advanced-tool-btn,.canvas-tool-btn{padding:8px 4px}}.checkerboard-bg{background-image:repeating-conic-gradient(var(--color-neutral-50) 0% 25%,var(--color-sage-gray-50) 0% 50%);background-position:0 0;background-repeat:repeat;background-size:30px 30px}.dark-theme .checkerboard-bg,[data-theme=dark] .checkerboard-bg{background-image:repeating-conic-gradient(var(--color-neutral-700) 0% 25%,var(--color-neutral-800) 0% 50%)}.card-selected{border-color:var(--color-brand-primary);outline:2px solid var(--color-brand-primary);outline-offset:-2px}.dark-theme .card-selected,[data-theme=dark] .card-selected{border-color:var(--color-plum-wine-300);outline-color:var(--color-plum-wine-300)}.ui-spinner{animation:spinner-rotate .8s linear infinite;border-radius:50%;display:block}.ui-spinner--xs{border:2px solid var(--color-border);border-top-color:var(--color-brand-primary);height:14px;width:14px}.ui-spinner--sm{border:2px solid var(--color-border);border-top-color:var(--color-brand-primary);height:16px;width:16px}.ui-spinner--md{border:3px solid var(--color-border);border-top-color:var(--color-brand-primary);height:24px;width:24px}.ui-spinner--lg{border:3px solid var(--color-border);border-top-color:var(--color-brand-primary);height:32px;width:32px}.ui-spinner--xl{border:3px solid var(--color-border);border-top-color:var(--color-brand-primary);height:40px;width:40px}.ui-spinner--light.ui-spinner--xs,.ui-spinner--light.ui-spinner--sm,.ui-spinner--light.ui-spinner--md,.ui-spinner--light.ui-spinner--lg,.ui-spinner--light.ui-spinner--xl{border-color:var(--color-white-alpha-300);border-top-color:var(--color-background)}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.heading{color:var(--color-text-primary);font-family:var(--font-family-heading);font-weight:var(--heading-weight);margin:0}.heading-h1{font-size:var(--heading-h1-size);line-height:var(--heading-h1-line-height)}.heading-h2{font-size:var(--heading-h2-size);line-height:var(--heading-h2-line-height)}.heading-h3{font-size:var(--heading-h3-size);line-height:var(--heading-h3-line-height)}.heading-h4{font-size:var(--heading-h4-size);line-height:var(--heading-h4-line-height)}.heading-h5{font-size:var(--heading-h5-size);line-height:var(--heading-h5-line-height)}.heading-brand{color:var(--color-brand-primary)}.heading-secondary{color:var(--color-text-secondary)}.heading-light{color:var(--color-text-light)}.heading-left{text-align:left}.heading-center{text-align:center}.heading-right{text-align:right}@media(max-width:768px){.heading-h1{font-size:var(--heading-h1-size-mobile);line-height:var(--heading-h1-line-height-mobile)}.heading-h2{font-size:var(--heading-h2-size-mobile);line-height:var(--heading-h2-line-height-mobile)}.heading-h3{font-size:var(--heading-h3-size-mobile);line-height:var(--heading-h3-line-height-mobile)}.heading-h4{font-size:var(--heading-h4-size-mobile);line-height:var(--heading-h4-line-height-mobile)}.heading-h5{font-size:var(--heading-h5-size-mobile);line-height:var(--heading-h5-line-height-mobile)}}.checkbox{align-items:center;cursor:pointer;display:flex;gap:var(--spacing-sm);-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.5}.checkbox__control{flex-shrink:0;height:20px;position:relative;width:20px}.checkbox__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.checkbox__indicator{align-items:center;background:var(--color-alabaster);border:1px solid var(--color-soft-linen-50);border-radius:var(--radius-md);display:flex;height:100%;justify-content:center;transition:all .2s ease;width:100%}.checkbox__input:checked+.checkbox__indicator{background:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:14px;border-color:var(--color-brand-primary)}.checkbox__input:checked:hover:not(:disabled)+.checkbox__indicator{background-color:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover)}.checkbox__input:indeterminate+.checkbox__indicator{background:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:14px;border-color:var(--color-brand-primary)}.checkbox__input:focus-visible+.checkbox__indicator{box-shadow:0 0 0 2px var(--color-focus-ring)}.checkbox__input:hover:not(:disabled)+.checkbox__indicator{border-color:var(--color-brand-primary)}.checkbox__label{color:var(--color-text-secondary);cursor:inherit;font-size:var(--text-sm-size);line-height:var(--line-height-normal)}.checkbox:hover .checkbox__label{color:var(--color-text-primary)}body.dark-theme .checkbox__indicator{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .checkbox__input:checked+.checkbox__indicator{background:var(--color-brand-primary);border-color:var(--color-brand-primary)}body.dark-theme .checkbox__input:indeterminate+.checkbox__indicator{background:var(--color-brand-primary);border-color:var(--color-brand-primary)}.number-input-control{display:flex;flex:1;flex-direction:column;gap:var(--spacing-1)}.number-input-label{color:var(--text-secondary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium)}.number-input-wrapper{align-items:center;background:var(--color-alabaster);border:1px solid var(--border-color);border-radius:var(--radius-lg);display:flex;height:32px;padding:0 6px;transition:border-color .2s ease}.number-input-wrapper:focus-within{border-color:var(--accent-color)}.number-input-icon{align-items:center;color:var(--text-secondary);display:flex;justify-content:center;margin-right:4px}.number-input-icon svg{height:14px;width:14px}.number-input-field{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:transparent;border:none;color:var(--text-primary);flex:1;font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:0;outline:none;padding:0;text-align:center;width:100%}.number-input-field::-webkit-outer-spin-button,.number-input-field::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.number-input-unit{color:var(--text-secondary);font-size:var(--text-xs-size);margin-left:2px;margin-right:4px}.number-input-arrows{display:flex;flex-direction:column;gap:1px}.number-input-arrow{align-items:center;background:transparent;border:none;border-radius:2px;color:var(--text-secondary);cursor:pointer;display:flex;height:12px;justify-content:center;padding:0;transition:all .15s ease;width:16px}.number-input-arrow:hover{background:var(--bg-hover);color:var(--accent-color)}.number-input-arrow:active{background:var(--border-color)}.number-input-arrow svg{height:10px;width:10px}body.dark-theme .number-input-wrapper{background:var(--color-surface);border-color:var(--border-color)}body.dark-theme .number-input-field{color:var(--text-primary)}.slider-group{align-items:center;display:flex;gap:var(--spacing-xs)}.slider-group label{font-size:var(--text-xs-size);margin:0;min-width:50px}.size-control-row{align-items:center;display:flex;gap:var(--spacing-xs)}.value-display{color:var(--text-secondary);font-size:var(--text-xs-size);min-width:35px;text-align:center}.size-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:var(--color-alabaster);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:0;outline:none;padding:2px 4px;text-align:center;transition:border-color .2s ease;width:48px}.size-input:focus{border-color:var(--accent-color)}.size-input::-webkit-outer-spin-button,.size-input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.size-unit{color:var(--text-secondary);font-size:var(--text-xs-size);margin-left:2px}body.dark-theme .size-input{background:var(--color-surface);border-color:var(--border-color);color:var(--text-primary)}.fa-icon-wrapper{align-items:center;display:inline-flex;justify-content:center;line-height:0}.fa-icon-wrapper svg{fill:currentcolor;height:100%;width:100%}.fa-icon--loading{background:transparent}.fa-icon--error{opacity:.5}.btn{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-button);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);gap:var(--spacing-2);justify-content:center;letter-spacing:-.12px;line-height:var(--text-sm-line-height);padding:10px 20px;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn>*{pointer-events:none}.btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.btn:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.btn:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.btn-primary{background:var(--color-brand-primary);border-color:var(--color-brand-primary);box-shadow:var(--shadow-button-primary);color:var(--color-text-on-brand);transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.btn-primary:disabled{background:var(--color-black-alpha-200);border-color:transparent;box-shadow:none;color:var(--color-text-on-brand)}.btn-primary:hover:not(:disabled){background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover)}.btn-primary:active:not(:disabled){background:var(--color-brand-primary-press);border-color:var(--color-brand-primary-press);transform:translateY(0)}.btn-primary.btn-loading{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:transparent}.btn-primary.btn-loading:after{border-color:var(--color-text-on-brand);border-top-color:transparent}.btn-secondary{background:var(--color-white);border:1px solid var(--color-plum-wine-100);color:var(--color-brand-primary)}.btn-secondary:disabled{background:var(--color-white);border-color:var(--color-black-alpha-200);color:var(--color-black-alpha-300)}.btn-secondary:hover:not(:disabled){background:var(--color-neutral-100);border-color:var(--color-brand-primary)}.btn-secondary:active:not(:disabled){background:var(--color-plum-wine-50)}.btn-secondary.btn-loading{background:var(--color-white);border:1px solid var(--color-plum-wine-100);color:transparent}.btn-secondary.btn-loading:after{border-color:var(--color-brand-primary);border-top-color:transparent}.btn-tertiary{background:var(--color-white);border-color:var(--color-white);color:var(--color-brand-primary)}.btn-tertiary:disabled{background:var(--color-white);border-color:var(--color-white);color:var(--color-black-alpha-300)}.btn-tertiary:hover:not(:disabled){background:var(--color-plum-wine-50);border-color:var(--color-plum-wine-50)}.btn-tertiary:active:not(:disabled){background:var(--color-plum-wine-100);border-color:var(--color-plum-wine-100)}.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}.btn-ghost:hover{background:var(--color-surface);border-color:var(--color-border)}.btn-danger{background:var(--color-error);border-color:var(--color-error);color:var(--color-background)}.btn-danger:hover{background:var(--color-error-dark);border-color:var(--color-error-dark)}.btn-success{background:var(--color-success);border-color:var(--color-success);color:var(--color-background)}.btn-success:hover{background:var(--color-success);border-color:var(--color-success);filter:brightness(.9)}.btn-warning{background:var(--color-warning);border-color:var(--color-warning);color:var(--color-background)}.btn-warning:hover{background:var(--color-warning);border-color:var(--color-warning);filter:brightness(.9)}.btn-secondary.btn-bg-alabaster{background:var(--color-alabaster)}.btn-secondary.btn-bg-transparent{background:transparent}.btn-secondary.btn-bg-transparent:disabled{background:transparent}.btn-tertiary.btn-bg-alabaster{background:var(--color-alabaster);border-color:var(--color-alabaster)}.btn-tertiary.btn-bg-alabaster:disabled{background:var(--color-alabaster);border-color:var(--color-alabaster)}.btn-tertiary.btn-bg-transparent{background:transparent;border-color:transparent}.btn-tertiary.btn-bg-transparent:disabled{background:transparent;border-color:transparent}.btn-xs{font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);gap:var(--spacing-1);letter-spacing:-.12px;line-height:var(--text-xs-line-height);padding:4px var(--spacing-2)}.btn-sm{font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);gap:var(--spacing-2);letter-spacing:-.12px;line-height:var(--text-sm-line-height);padding:6px var(--spacing-4)}.btn-lg{font-size:var(--text-base-size);font-weight:var(--font-weight-medium);gap:var(--spacing-2);letter-spacing:-.12px;line-height:var(--text-base-line-height);padding:var(--spacing-3) var(--spacing-5)}.btn-xl{font-size:var(--text-lg-size);font-weight:var(--font-weight-medium);gap:var(--spacing-2);letter-spacing:-.12px;line-height:var(--text-lg-line-height);padding:var(--spacing-3) var(--spacing-6)}.btn-round{border-radius:var(--radius-button);height:40px;padding:var(--spacing-2);width:40px}.btn-round.btn-xs{height:24px;padding:4px;width:24px}.btn-round.btn-sm{height:32px;padding:var(--spacing-2);width:32px}.btn-round.btn-lg{height:48px;padding:var(--spacing-3);width:48px}.btn-round.btn-xl{height:56px;padding:var(--spacing-4);width:56px}.btn-full{width:100%}.btn-block{display:flex;width:100%}.btn-icon{height:36px;min-width:36px;padding:var(--spacing-2)}.btn-icon.btn-xs{height:22px;min-width:22px;padding:4px}.btn-icon.btn-sm{height:28px;min-width:28px;padding:6px}.btn-icon.btn-lg{height:44px;min-width:44px;padding:var(--spacing-3)}.btn-round.btn-icon{height:40px;min-width:unset;width:40px}.btn-round.btn-icon.btn-xs{height:24px;min-width:unset;width:24px}.btn-round.btn-icon.btn-sm{height:32px;min-width:unset;width:32px}.btn-round.btn-icon.btn-lg{height:48px;min-width:unset;width:48px}.btn-round.btn-icon.btn-xl{height:56px;min-width:unset;width:56px}.btn-loading{color:transparent;position:relative}.btn-loading:after{animation:btn-spin .6s linear infinite;border:2px solid currentcolor;border-radius:50%;border-top-color:transparent;content:"";height:16px;left:50%;margin:calc(-1 * var(--spacing-2)) 0 0 calc(-1 * var(--spacing-2));position:absolute;top:50%;width:16px}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn-marquee{overflow:hidden}.btn-marquee .btn-marquee-text{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--marquee-distance: 0px}.btn-marquee .btn-marquee-inner{display:inline}.btn-marquee .btn-marquee-text[data-active]{text-overflow:clip}.btn-marquee .btn-marquee-text[data-active] .btn-marquee-inner{animation:btn-marquee-scroll 6s ease-in-out infinite;display:inline-block}@keyframes btn-marquee-scroll{0%,10%{transform:translate(0)}45%,55%{transform:translate(var(--marquee-distance))}90%,to{transform:translate(0)}}.btn-group{border-radius:var(--radius-button);display:inline-flex;overflow:hidden}.btn-group .btn{border-radius:0;border-right-width:0}.btn-group .btn:first-child{border-bottom-left-radius:var(--radius-button);border-top-left-radius:var(--radius-button)}.btn-group .btn:last-child{border-bottom-right-radius:var(--radius-button);border-right-width:1px;border-top-right-radius:var(--radius-button)}.btn-upload{overflow:hidden;position:relative}.btn-upload input[type=file]{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.btn-no-shadow,.btn-no-shadow:hover,.btn-no-shadow:focus,.btn-no-shadow:active{box-shadow:none}.btn-toggle{background:var(--color-surface);border-color:var(--color-border)}.btn-toggle.active{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-background)}.btn-toggle.active:hover{background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover)}body.dark-theme .btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .btn-secondary{background:var(--color-surface);border-color:var(--color-white-alpha-200);color:var(--color-plum-wine-200)}body.dark-theme .btn-secondary:disabled{background:var(--color-surface);border-color:var(--color-white-alpha-200);color:var(--color-white-alpha-300)}body.dark-theme .btn-secondary:hover:not(:disabled){background:var(--color-sage-gray-700);border-color:var(--color-plum-wine-400)}body.dark-theme .btn-secondary:active:not(:disabled){background:var(--color-sage-gray-800)}body.dark-theme .btn-secondary.btn-loading{background:var(--color-surface);border-color:var(--color-white-alpha-200)}body.dark-theme .btn-secondary.btn-loading:after{border-color:var(--color-plum-wine-200);border-top-color:transparent}body.dark-theme .btn-tertiary{background:var(--color-background);border-color:var(--color-background);color:var(--color-alabaster)}body.dark-theme .btn-tertiary:disabled{background:var(--color-background);border-color:var(--color-background);color:var(--color-white-alpha-300)}body.dark-theme .btn-tertiary:hover:not(:disabled){background:var(--color-surface);border-color:var(--color-surface)}body.dark-theme .btn-tertiary:active:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-surface-hover)}body.dark-theme .btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}body.dark-theme .btn-ghost:hover{background:var(--color-surface);border-color:var(--color-border)}@media(max-width:768px){.btn{font-size:var(--text-xs-size);padding:var(--spacing-2) var(--spacing-3)}.btn-lg{font-size:15px;padding:var(--spacing-3) var(--spacing-4)}.btn-xl{font-size:var(--text-base-size);line-height:var(--text-base-line-height);padding:var(--spacing-3) var(--spacing-5)}}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-overlay);top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;padding:var(--spacing-md);position:fixed;z-index:1100}.modal{animation:modal-enter .2s ease-out;background:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);display:flex;flex-direction:column;gap:var(--spacing-6);max-height:90vh;max-width:90vw;overflow:hidden;padding:var(--spacing-6)}@keyframes modal-enter{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{align-items:center;border-bottom:none;display:flex;flex-shrink:0;justify-content:space-between;padding:0}.modal-title{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.modal-close{margin-left:auto}.modal-body,.modal-content{flex:1;overflow-y:auto;padding:0}.modal-footer{align-items:center;border-top:none;display:flex;flex-shrink:0;gap:var(--spacing-sm);justify-content:flex-end;padding:0}.modal-footer-left{justify-content:flex-start}.modal-footer-center{justify-content:center}.modal-footer-space-between{justify-content:space-between}.modal-sm{width:400px}.modal-md{width:600px}.modal-lg{width:800px}.modal-xl{width:1000px}.modal-full{height:95vh;width:95vw}.modal-confirmation{max-width:500px}.modal-form{min-width:500px}.modal-gallery{height:80vh;width:90vw}.modal-backdrop{top:0;right:0;bottom:0;left:0;cursor:pointer;position:absolute}.modal:focus{outline:none}.modal-loading{min-height:200px;position:relative}.modal-loading:after{animation:modal-spin .8s linear infinite;border:3px solid var(--color-border);border-radius:50%;border-top-color:var(--color-brand-primary);content:"";height:32px;left:50%;margin:-16px 0 0 -16px;position:absolute;top:50%;width:32px}@keyframes modal-spin{to{transform:rotate(360deg)}}.modal-body::-webkit-scrollbar,.modal-content::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track,.modal-content::-webkit-scrollbar-track{background:var(--color-surface)}.modal-body::-webkit-scrollbar-thumb,.modal-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover,.modal-content::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}body.dark-theme .modal{background:var(--color-surface);border:1px solid var(--color-border)}body.dark-theme .modal-title{color:var(--color-text-primary)}@media(max-width:768px){.modal-overlay{padding:var(--spacing-sm)}.modal{gap:var(--spacing-4);max-height:95vh;max-width:95vw;padding:var(--spacing-4)}.modal-sm,.modal-md,.modal-lg,.modal-xl{width:95vw}.modal-footer{flex-direction:column;gap:var(--spacing-sm)}.modal-footer .btn{width:100%}}@media(max-width:480px){.modal-overlay{padding:0}.modal{border-radius:0;max-height:100vh;max-width:100vw}}.popover{position:relative}.popover__trigger{display:inline-flex}.popover__panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 8px 24px #00000026;left:0;position:absolute;top:calc(100% + 4px);z-index:200}.popover__panel--right{left:auto;right:0}.dark-theme .popover__panel{background:var(--bg-primary);border-color:var(--border-color)}.popover-section{background:var(--color-white);border-radius:var(--radius-card);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}[data-theme=dark] .popover-section,body.dark-theme .popover-section{background:var(--color-surface)}.popover-section-header{color:var(--text-primary);font-size:.875rem;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs)}.popover-section label{color:var(--text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:60px}.pill-tag{border-radius:50px;display:inline-block;font-family:var(--font-family-base);font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);letter-spacing:.5px;line-height:20px;padding:var(--spacing-0-5) var(--spacing-2);text-transform:uppercase;white-space:nowrap}.pill-tag--brand{background:var(--color-brand-lighter, #f56476);color:var(--color-background)}.pill-tag--info{background:var(--color-brand-light, #dfbbb1);color:var(--color-brand-dark, #373f51)}.pill-tag--muted{background:var(--color-surface, #f9fafb);color:var(--color-text-secondary)}.pill-tag--tag-text{background:var(--color-brand-primary, #008dd5);color:var(--color-background)}.pill-tag--tag-svg{background:var(--color-brand-secondary, #e43f6f);color:var(--color-background)}.pill-tag--tag-png{background:var(--color-brand-dark, #373f51);color:var(--color-background)}.pill-tag--dismissible{align-items:center;display:inline-flex;gap:var(--spacing-1)}.pill-tag__remove{align-items:center;background:none;border:none;border-radius:50%;color:currentcolor;cursor:pointer;display:inline-flex;font-size:1em;justify-content:center;line-height:1;opacity:.6;padding:0;transition:opacity .15s ease}.pill-tag__remove:hover{opacity:1}body.dark-theme .pill-tag--tag-text,body.dark-theme .pill-tag--tag-svg,body.dark-theme .pill-tag--tag-png{background:var(--color-neutral-600);color:var(--color-alabaster)}body.dark-theme .pill-tag--brand{background:var(--color-brand-lighter);color:var(--color-alabaster)}body.dark-theme .pill-tag--info{background:var(--color-neutral-600);color:var(--color-alabaster)}body.dark-theme .pill-tag--muted{background:var(--color-sage-gray-700);color:var(--color-neutral-400)}.text-input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1)}.text-input-label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.text-input-container{align-items:center;display:flex;position:relative}.text-input{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-xl);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:8px;height:40px;letter-spacing:-.12px;line-height:20px;outline:none;padding:10px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.text-input::placeholder{color:var(--color-text-light);font-weight:var(--font-weight-regular)}.text-input:hover:not(:focus,:disabled){border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200)}.text-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200);font-weight:var(--font-weight-regular)}.text-input:disabled{background:var(--color-white);border-color:var(--color-border);box-shadow:none;color:var(--color-text-light);cursor:not-allowed}.text-input-char-count{color:var(--color-text-light);font-size:var(--text-2xs-size);pointer-events:none;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.text-input-char-count--warning{color:var(--color-warning)}.text-input-char-count--error{color:var(--color-error);font-weight:var(--font-weight-semibold)}.text-input--error{border-color:var(--color-error)}.text-input--error:hover:not(:focus,:disabled){border-color:var(--color-error);box-shadow:none}.text-input--error:focus{border-color:var(--color-error);box-shadow:none}.text-input-sm .text-input{font-size:var(--font-size-xs);height:32px;padding:6px 10px}.text-input-lg .text-input{font-size:var(--font-size-base);height:48px;padding:12px 16px}.text-input-error-message{color:var(--color-error);font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:-.12px;line-height:var(--text-sm-line-height)}.text-area-wrapper{display:flex;flex-direction:column;gap:var(--spacing-1)}.text-area-label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.text-area-container{display:flex;position:relative}.text-area{background:var(--color-background);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:-.12px;line-height:20px;outline:none;padding:10px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.text-area::placeholder{color:var(--color-text-light);font-weight:var(--font-weight-regular)}.text-area-sm .text-area{font-size:var(--font-size-xs);padding:6px 10px}.text-area-lg .text-area{font-size:var(--font-size-base);padding:12px 16px}.text-area:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200);font-weight:var(--font-weight-regular)}.text-area:disabled{background:var(--color-surface);border-color:var(--color-neutral-300);box-shadow:none;color:var(--color-text-light);cursor:not-allowed}.text-area:hover:not(:focus,:disabled){border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200)}.text-area-footer{align-items:center;display:flex;justify-content:space-between;min-height:0}.text-area-footer:empty{display:none}.text-area-char-count{color:var(--color-text-light);font-size:var(--text-2xs-size);margin-left:auto}.text-area-char-count--warning{color:var(--color-warning)}.text-area-char-count--error{color:var(--color-error);font-weight:var(--font-weight-semibold)}.text-area--error{border-color:var(--color-error)}.text-area--error:focus{border-color:var(--color-error);box-shadow:none}.text-area--error:hover:not(:focus,:disabled){border-color:var(--color-error);box-shadow:none}.text-area-error-message{color:var(--color-error);font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:-.12px;line-height:var(--text-sm-line-height)}.search-bar{align-items:center;background:var(--color-black-alpha-50);border:1px solid transparent;border-radius:var(--radius-button);display:flex;transition:all .2s ease}.search-bar:hover{background:var(--color-black-alpha-25);border-color:var(--color-plum-wine-50)}.search-bar:focus-within{background:var(--color-background);border-color:var(--color-brand-primary)}.search-bar-sm{gap:var(--spacing-1);height:32px;padding:var(--spacing-1) var(--spacing-2)}.search-bar-sm .search-bar-input{font-size:var(--font-size-xs)}.search-bar-md{gap:var(--spacing-2);height:40px;padding:var(--spacing-2) var(--spacing-3)}.search-bar-md .search-bar-input{font-size:var(--font-size-sm)}.search-bar-ml{gap:var(--spacing-2);height:48px;padding:var(--spacing-2) var(--spacing-4)}.search-bar-ml .search-bar-input{font-size:var(--font-size-base)}.search-bar-lg{gap:var(--spacing-3);min-height:80px;padding:var(--spacing-4) var(--spacing-6)}.search-bar-lg .search-bar-input{font-size:var(--font-size-xl)}.search-bar-input{background:transparent;border:none;color:var(--color-text-primary);flex:1;min-width:0;outline:none;padding:0}.search-bar-input:focus{outline:none}.search-bar-input::placeholder{color:var(--color-text-light)}.search-bar-input:disabled{color:var(--color-text-light);cursor:not-allowed}.search-bar-icon{align-items:center;color:var(--color-text-light);display:flex;flex-shrink:0;justify-content:center;transition:color .2s ease}.search-bar:focus-within .search-bar-icon{color:var(--color-brand-primary)}.search-bar-clear-btn{align-items:center;background:none;border:none;color:var(--color-brand-primary);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:0;transition:color .2s ease}.search-bar-clear-btn:hover{color:var(--color-brand-primary-hover)}.search-bar-submit-btn{align-items:center;background:none;border:none;color:var(--color-brand-primary);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:0;transition:color .2s ease}.search-bar-submit-btn:hover:not(:disabled){color:var(--color-brand-primary-hover)}.search-bar-submit-btn:disabled{color:var(--color-text-light);cursor:not-allowed}.search-bar-submit-btn.loading{color:var(--color-brand-primary);cursor:not-allowed}.search-bar-spinner{animation:search-bar-spin .8s linear infinite;border:2px solid var(--color-border);border-radius:50%;border-top-color:var(--color-brand-primary);display:block;height:14px;width:14px}.search-bar-lg .search-bar-spinner{height:20px;width:20px}@keyframes search-bar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body.dark-theme .search-bar{background:var(--color-white-alpha-50)}body.dark-theme .search-bar:hover{background:var(--color-white-alpha-100);border-color:var(--color-border)}body.dark-theme .search-bar:focus-within{background:var(--color-surface);border-color:var(--color-brand-primary)}body.dark-theme .search-bar-submit-btn,body.dark-theme .search-bar-clear-btn{color:var(--color-alabaster)}.dropdown{position:relative;width:100%}.dropdown__trigger{align-items:center;background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-button);color:var(--color-text-primary);cursor:pointer;display:flex;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);height:auto;letter-spacing:-.12px;line-height:20px;min-height:40px;outline:none;padding:var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3);text-align:left;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.dropdown__trigger:focus-visible{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200)}.dropdown__trigger:hover:not(:disabled){border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200)}.dropdown__trigger--open{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-plum-wine-200)}.dropdown__content{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:var(--spacing-1);min-width:0;overflow:hidden}.dropdown__placeholder{color:var(--color-text-light);font-weight:var(--font-weight-regular);position:relative;top:1px}.dropdown__label{overflow:hidden;position:relative;text-overflow:ellipsis;top:1px;white-space:nowrap}.dropdown__chevron{flex-shrink:0;transition:transform .2s ease}.dropdown__chevron--open{transform:rotate(180deg)}.dropdown__panel{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);max-height:240px;overflow-y:auto;z-index:10000}.dropdown__option{align-items:center;cursor:pointer;display:flex;font-size:var(--font-size-sm);justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);transition:background .15s ease}.dropdown__option:hover{background:var(--color-surface)}.dropdown__option--selected{color:var(--color-brand-primary);font-weight:var(--font-weight-medium)}.dropdown__option-check{flex-shrink:0;opacity:0}.dropdown__option--selected .dropdown__option-check{opacity:1}body.dark-theme .dropdown__trigger,body.dark-theme .dropdown__panel{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .dropdown__option:hover{background:var(--color-surface-hover)}body.dark-theme .dropdown__option--selected{background:var(--color-neutral-600);color:var(--color-alabaster)}body.dark-theme .dropdown__option--selected .dropdown__option-check{color:var(--color-alabaster)}body.dark-theme .dropdown__trigger--open{border-color:var(--color-alabaster);box-shadow:none}.pagination{align-items:center;display:flex;gap:var(--spacing-3)}.pagination-pages{align-items:center;display:flex;gap:var(--spacing-2)}.pagination-ellipsis{align-items:center;color:var(--color-text-secondary);display:inline-flex;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);height:40px;justify-content:center;-webkit-user-select:none;user-select:none;width:40px}.pagination .pagination-page-active{box-shadow:none;cursor:default}.pagination-xs,.pagination-xs .pagination-pages{gap:var(--spacing-1)}.pagination-xs .pagination-ellipsis{font-size:var(--text-xs-size);height:24px;width:24px}.pagination-sm{gap:var(--spacing-2)}.pagination-sm .pagination-pages{gap:var(--spacing-1)}.pagination-sm .pagination-ellipsis{font-size:var(--text-xs-size);height:32px;width:32px}.pagination-lg{gap:var(--spacing-4)}.pagination-lg .pagination-ellipsis{font-size:var(--text-base-size);height:48px;width:48px}body.dark-theme .pagination-ellipsis{color:var(--color-text-secondary)}.tab-list{display:flex;gap:var(--spacing-2)}.tab-list--primary{border-bottom:1px solid var(--color-border);padding:0 var(--spacing-6)}.tab-list--secondary{border-bottom:2px solid var(--color-border);flex-shrink:0;flex-wrap:wrap;margin-bottom:var(--spacing-5);padding-bottom:0}.tab-list__tab{align-items:center;background:none;border:none;border-bottom:2px solid transparent;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md) var(--spacing-lg);transition:all .2s ease}.tab-list__tab:hover{background:var(--color-background);color:var(--color-text-primary)}.tab-list--primary .tab-list__tab{flex:1}.tab-list--primary .tab-list__tab--active{background:var(--color-background);border-bottom-color:var(--color-brand-primary);color:var(--color-brand-primary)}.tab-list--secondary .tab-list__tab{border-radius:var(--radius-md) var(--radius-md) 0 0;font-size:var(--text-sm-size);margin-bottom:-2px;padding:var(--spacing-3) var(--spacing-5)}.tab-list--secondary .tab-list__tab:hover{background:var(--color-surface)}.tab-list--secondary .tab-list__tab--active{background:var(--color-background);border-bottom-color:var(--color-brand-secondary);color:var(--color-brand-secondary);font-weight:var(--font-weight-semibold)}.tab-list__icon{display:inline-flex;opacity:.7}.tab-list__tab--active .tab-list__icon{opacity:1}@media(max-width:768px){.tab-list--primary{flex-direction:column}.tab-list--primary .tab-list__tab{border-bottom:none;border-right:2px solid transparent}.tab-list--primary .tab-list__tab--active{border-bottom-color:transparent;border-right-color:var(--color-brand-primary)}}.collapsible-section-header{align-items:center;background:none;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;font-weight:var(--font-weight-medium);gap:var(--spacing-xs);margin-bottom:var(--spacing-xs);padding:0;width:100%}.collapsible-section-header svg{flex-shrink:0}.collapsible-section-indicator{background:var(--color-brand-primary);border-radius:50%;height:6px;width:6px}.collapsible-section-chevron{margin-left:auto;margin-top:3px;transition:transform .2s ease}.collapsible-section-chevron.open{transform:rotate(180deg)}.collapsible-section-content{padding:0}.progress-bar-container{background:transparent;height:3px;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:1001}.progress-bar-container--inline{border-radius:9999px;height:4px;position:relative;width:240px}.progress-bar{background:#4fd1c733;height:100%;overflow:hidden;position:relative;width:100%}.progress-bar-container--inline .progress-bar{background:#ffffff59;border-radius:9999px}body.dark-theme .progress-bar{background:var(--color-white-alpha-100)}.progress-bar-fill{background:var(--color-brand-primary);border-radius:0 2px 2px 0;height:100%;left:0;position:absolute;top:0;transition:width .3s ease-out;width:0%}.loading-overlay-fullscreen{align-items:center;animation:fade-in .2s ease-out;background:var(--color-overlay);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}.loading-overlay-content{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-lg, 1.5rem)}.loading-overlay-image{height:auto;width:200px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.confirmation-message{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0 0 var(--spacing-md)}.confirmation-modal__checkbox{margin-top:var(--spacing-md)}.loading-image-container{overflow:hidden;position:relative}.loading-image{display:block;height:100%;object-fit:cover;transition:opacity .3s ease;width:100%}.loading-image.loading{opacity:0}.loading-image.loaded{opacity:1}.loading-image-placeholder{align-items:center;background:var(--color-background-secondary, #f0f0f0);border-radius:var(--radius-sm);color:var(--color-text-light, #999);display:flex;height:100%;justify-content:center;width:100%}.thumbnail-loading-skeleton{background:var(--color-background-secondary, #f0f0f0);border-radius:var(--radius-sm);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}body.dark-theme .loading-image-placeholder,.dark-theme .loading-image-placeholder,[data-theme=dark] .loading-image-placeholder{background:var(--color-background-tertiary, #2a2a2a)}.align-buttons{display:flex;gap:var(--spacing-xs)}.shortcuts-title{align-items:center;display:flex;gap:var(--spacing-sm)}.shortcuts-body{display:flex;flex-direction:column;gap:var(--spacing-lg)}.shortcuts-group-title{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-xs);letter-spacing:.05em;margin:0 0 var(--spacing-sm) 0;text-transform:uppercase}.shortcuts-list{display:flex;flex-direction:column}.shortcut-row{align-items:center;border-radius:var(--radius-sm);display:flex;justify-content:space-between;padding:var(--spacing-sm)}.shortcut-row:hover{background:var(--color-surface)}.shortcut-label{color:var(--color-text-primary);font-size:var(--font-size-sm)}.shortcut-keys{align-items:center;display:flex;gap:2px}.shortcut-separator{color:var(--color-text-secondary);font-size:var(--font-size-xs);padding:0 2px}.shortcut-keys kbd{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--color-border);color:var(--color-text-secondary);display:inline-flex;font-family:inherit;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);height:24px;justify-content:center;min-width:24px;padding:0 var(--spacing-xs);white-space:nowrap}body.dark-theme .shortcut-row:hover{background:var(--color-background)}body.dark-theme .shortcut-keys kbd{background:var(--color-background);border-color:var(--color-border);box-shadow:0 1px 0 var(--color-black-alpha-300)}.generation-loader{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.generation-loader-container{align-items:center;display:flex;justify-content:center;position:relative}.crafting-loader-image{display:block}.generation-loader-sm{min-height:60px}.generation-loader-sm .crafting-loader-image{height:auto;width:100px}.generation-loader-md{min-height:80px}.generation-loader-md .crafting-loader-image{height:auto;width:140px}.generation-loader-lg{min-height:100px}.generation-loader-lg .crafting-loader-image{height:auto;width:220px}.generation-loader-overlay{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:var(--color-overlay);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:fixed;z-index:99999}.draggable-toolbar{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);bottom:2rem;box-shadow:var(--shadow-elevated);cursor:grab;display:flex;gap:1rem;justify-content:center;left:50%;padding:.75rem 1.5rem;position:absolute;transform:translate(-50%);z-index:100}.draggable-toolbar--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.login-content{text-align:center}.login-logo{color:var(--color-brand-primary);margin-bottom:var(--spacing-lg)}.login-welcome{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-md)}.login-description{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0 0 var(--spacing-lg)}.login-error{align-items:center;background:#ef44441a;border:1px solid rgb(239 68 68 / 20%);border-radius:var(--radius-md);color:var(--color-error);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.login-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.login-divider{margin:var(--spacing-md) 0;position:relative;text-align:center}.login-divider:before{background:var(--color-border);content:"";height:1px;left:0;position:absolute;right:0;top:50%}.login-divider span{background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);padding:0 var(--spacing-md);position:relative}.login-footer{text-align:center}.login-terms{color:var(--color-text-secondary);font-size:var(--font-size-xs);line-height:1.4;margin:0}.login-link{color:var(--color-brand-primary);text-decoration:none}.login-link:hover{text-decoration:underline}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-header h3{margin:0}.panel-content{flex:1;overflow-y:auto;padding:var(--spacing-lg);position:relative}.panel-content-wrapper{display:flex;flex:1;flex-direction:column;overflow:hidden;position:relative}.panel-loader-overlay{align-items:center;background:var(--color-white-alpha-900);display:flex;flex-direction:column;gap:var(--spacing-md);top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute;z-index:100}.panel-loader-message{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0;text-align:center}body.dark-theme .panel-loader-overlay{background:#111827e5}.panel-scrollable-content{flex:1;overflow-y:auto;padding:var(--spacing-lg)}.panel-footer{background:var(--color-alabaster);border-top:1px solid var(--color-border);flex-shrink:0;padding:var(--spacing-3)}.panel-footer-centered{display:flex;justify-content:center}.panel-section{margin-bottom:var(--spacing-lg)}.panel-section:last-child{margin-bottom:0}.panel-section-title{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}.panel-grid{display:grid;gap:var(--spacing-sm)}.panel-grid-2{grid-template-columns:repeat(2,1fr)}.panel-grid-3{grid-template-columns:repeat(3,1fr)}.panel-grid-4{grid-template-columns:repeat(4,1fr)}body.dark-theme .panel{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .panel-header p{color:var(--color-text-secondary)}body.dark-theme .panel-footer{background:var(--color-surface);border-top-color:var(--color-border)}@media(max-width:768px){.panel-grid-2,.panel-grid-3,.panel-grid-4{grid-template-columns:1fr}.panel-header{padding:var(--spacing-sm) var(--spacing-md)}.panel-content,.panel-scrollable-content,.panel-footer{padding:var(--spacing-md)}}.metadata-modal-body{display:flex;flex-direction:column;gap:var(--spacing-4);max-height:60vh;overflow-y:auto}.metadata-section{display:flex;flex-direction:column;gap:var(--spacing-2)}.metadata-section-title{color:var(--color-text-light);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin:0;text-transform:uppercase}.metadata-grid{display:grid;font-size:var(--font-size-sm);gap:var(--spacing-1) var(--spacing-3)}.metadata-label{color:var(--color-text-secondary);margin-right:var(--spacing-4);white-space:nowrap}.metadata-value{color:var(--color-text-primary);font-family:var(--font-family-mono, monospace);font-size:var(--font-size-xs);word-break:break-all}.metadata-link{color:var(--color-brand-primary);text-decoration:underline;text-underline-offset:2px}.metadata-link:hover,.metadata-link:focus-visible{color:var(--color-brand-primary-hover)}.metadata-empty{color:var(--color-text-light);font-size:var(--font-size-sm);font-style:italic;margin:0}.form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-row{align-items:flex-end;display:flex;gap:var(--spacing-md)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group-inline{align-items:center;flex-direction:row;gap:var(--spacing-sm)}.form-label{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs)}.form-label-required:after{color:var(--color-error);content:" *"}.form-input{background:var(--color-input-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--color-text-primary);font-family:inherit;font-size:var(--text-sm-size);line-height:var(--line-height-normal);padding:var(--spacing-3) var(--spacing-4);transition:all .2s ease;width:100%}.form-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.form-input:disabled{background:var(--color-surface);cursor:not-allowed;opacity:.5}.form-input::placeholder{color:var(--color-text-light)}.form-textarea{background:var(--color-input-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--color-text-primary);font-family:inherit;font-size:var(--text-sm-size);line-height:var(--line-height-normal);min-height:100px;padding:var(--spacing-3) var(--spacing-4);resize:vertical;transition:all .2s ease;width:100%}.form-textarea:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.form-textarea:disabled{background:var(--color-surface);cursor:not-allowed;opacity:.5}.form-textarea::placeholder{color:var(--color-text-light)}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-input-bg);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);box-sizing:border-box;color:var(--color-text-primary);cursor:pointer;font-family:inherit;font-size:var(--text-sm-size);line-height:var(--line-height-normal);padding:var(--spacing-3) var(--spacing-4);padding-right:40px;transition:all .2s ease;width:100%}.form-select:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.form-select:disabled{background:var(--color-surface);cursor:not-allowed;opacity:.5}.form-radio{align-items:center;cursor:pointer;display:flex;gap:var(--spacing-sm)}.form-radio input[type=radio]{background:var(--color-input-bg);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;height:16px;transition:all .2s ease;width:16px}.form-radio input[type=radio]:checked{background:var(--color-brand-primary);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:8px;border-color:var(--color-brand-primary)}.form-radio input[type=radio]:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.form-radio input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.form-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:3px;cursor:pointer;height:6px;outline:none;width:100%}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-brand-primary);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-100);cursor:pointer;height:18px;width:18px}.form-range::-moz-range-thumb{background:var(--color-brand-primary);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-100);cursor:pointer;height:18px;width:18px}.form-range:focus{outline:none}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--color-focus-ring)}.form-color{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;height:40px;padding:0;transition:all .2s ease;width:40px}.form-color::-webkit-color-swatch-wrapper{padding:0}.form-color::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.form-color:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.form-file{cursor:pointer;display:inline-block;position:relative}.form-file input[type=file]{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.form-file-label{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-size:var(--text-sm-size);gap:var(--spacing-sm);padding:var(--spacing-3) var(--spacing-4);transition:all .2s ease}.form-file-label:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.form-input.error,.form-textarea.error,.form-select.error{border-color:var(--color-error)}.form-input.error:focus,.form-textarea.error:focus,.form-select.error:focus{border-color:var(--color-error);box-shadow:0 0 0 2px #ef44441a}.form-error{color:var(--color-error);font-size:var(--text-xs-size);margin-top:var(--spacing-xs)}.form-help,.form-hint{color:var(--color-text-secondary);font-size:var(--text-xs-size);margin-top:var(--spacing-xs)}.canvas-preview{align-items:center;display:flex;flex-direction:column;margin-top:var(--spacing-sm)}.preview-box{align-items:center;background:var(--color-surface);border:2px solid var(--color-border);display:flex;justify-content:center}.preview-pixels{color:var(--color-text-secondary);font-size:var(--text-xs-size);margin-top:var(--spacing-xs);text-align:center}.form-section{margin-bottom:var(--spacing-lg)}.form-section-title{border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs)}.ruler-visibility-grid{display:grid;gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}.form-input.success,.form-textarea.success,.form-select.success{border-color:var(--color-success)}.form-input.success:focus,.form-textarea.success:focus,.form-select.success:focus{border-color:var(--color-success);box-shadow:0 0 0 2px #10b9811a}body.dark-theme .form-input,body.dark-theme .form-textarea,body.dark-theme .form-select{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .form-input:focus,body.dark-theme .form-textarea:focus,body.dark-theme .form-select:focus{border-color:var(--color-brand-primary)}body.dark-theme .form-input:disabled,body.dark-theme .form-textarea:disabled,body.dark-theme .form-select:disabled{background:var(--color-background)}body.dark-theme .form-radio input[type=radio]{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .form-range{background:var(--color-border)}body.dark-theme .form-color{background:var(--color-surface);border-color:var(--color-border)}body.dark-theme .form-file-label{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .form-file-label:hover{background:var(--color-background)}@media(max-width:768px){.form-row{flex-direction:column;gap:var(--spacing-sm)}.form-row .form-group{flex:none}.form-group-inline{align-items:flex-start;flex-direction:column}.form-input,.form-textarea,.form-select{font-size:var(--text-base-size)}}.top-bar{align-items:center;background:var(--color-background);border-bottom:1px solid var(--color-border);box-shadow:none;color:var(--color-brand-primary);display:flex;height:var(--top-bar-height);justify-content:space-between;left:0;max-height:var(--top-bar-height);min-height:var(--top-bar-height);padding:0 var(--spacing-lg);position:fixed;right:0;top:0;z-index:1000}.top-bar-editor{background:var(--color-brand-primary);border-bottom-color:var(--color-brand-primary);color:var(--color-alabaster)}.top-bar-editor .logo{color:var(--color-alabaster)}.top-bar-editor .logo-image{filter:brightness(0) invert(.95) sepia(.05) saturate(.3) hue-rotate(15deg)}.top-bar-editor .project-name-display,.top-bar-editor .project-name-label,.top-bar-editor .project-name-value,.top-bar-editor .project-name-edit-icon{color:var(--color-alabaster)}.top-bar-editor .project-name-container:hover{border-color:var(--color-white-alpha-200)}.top-bar-editor .project-name-container.editing{background:transparent;border-color:transparent}.top-bar-editor .btn{background:var(--color-white-alpha-100);border-color:transparent;color:var(--color-alabaster)}.top-bar-editor .btn:hover:not(:disabled){background:var(--color-white-alpha-200)}.top-bar-editor .btn .fa-icon-wrapper,.top-bar-editor .btn .fa-icon-wrapper svg{color:var(--color-alabaster)}.top-bar-editor .btn-primary{background:var(--color-alabaster);color:var(--color-brand-primary)}.top-bar-editor .btn-primary:hover:not(:disabled){background:var(--color-white)}.top-bar-editor .btn-primary .fa-icon-wrapper,.top-bar-editor .btn-primary .fa-icon-wrapper svg{color:var(--color-brand-primary)}.top-bar-editor .restart-button{color:var(--color-alabaster)!important}.top-bar-editor .restart-button:hover{background:var(--color-white-alpha-200)!important;color:var(--color-alabaster)!important}.top-bar-editor .restart-button .fa-icon-wrapper,.top-bar-editor .restart-button .fa-icon-wrapper svg,.top-bar-editor .restart-button svg{color:var(--color-alabaster)!important}.top-bar-editor .search-bar{background:transparent;border-color:var(--color-alabaster)}.top-bar-editor .search-bar:hover{background:var(--color-white-alpha-100);border-color:var(--color-alabaster)}.top-bar-editor .search-bar-input{color:var(--color-alabaster)}.top-bar-editor .search-bar-input::placeholder{color:var(--color-alabaster);opacity:.6}.top-bar-editor .search-bar-submit-btn,.top-bar-editor .search-bar-clear-btn{color:var(--color-alabaster)}.top-bar-editor .search-bar:focus-within{background:var(--color-white);border-color:var(--color-brand-primary)}.top-bar-editor .search-bar:focus-within .search-bar-input{color:var(--color-text-primary)}.top-bar-editor .search-bar:focus-within .search-bar-input::placeholder{color:var(--color-text-light);opacity:1}.top-bar-editor .search-bar:focus-within .search-bar-submit-btn,.top-bar-editor .search-bar:focus-within .search-bar-clear-btn{color:var(--color-brand-primary)}.top-bar-editor .btn:disabled{background:transparent;border-color:transparent}.top-bar-left{align-items:center;display:flex;flex:1;gap:var(--spacing-md)}.logo{align-items:center;color:var(--color-brand-primary);cursor:pointer;display:flex;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0;padding:0;transition:all .2s ease;-webkit-user-select:none;user-select:none}.logo-image{height:32px;transition:all .2s ease;width:auto}.logo:hover .logo-image{opacity:.9;transform:scale(1.05)}.top-bar-center{align-items:center;display:flex;flex:1;gap:var(--spacing-md);height:100%;justify-content:center;margin:0 var(--spacing-md);max-width:900px;min-width:0}.project-name-container{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-xl);display:flex;flex-shrink:1;justify-content:center;max-width:250px;min-width:120px;position:relative;transition:all .2s ease}.project-name-container:hover{border-color:var(--color-brand-light)}.project-name-container.editing{background:transparent;border-color:transparent;box-shadow:none}.project-name-display{align-items:center;cursor:pointer;display:flex;gap:var(--spacing-xs);max-width:100%;overflow:hidden;padding:var(--spacing-sm) var(--spacing-md);white-space:nowrap}.project-name-label{color:var(--color-text-primary);flex-shrink:0;font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.project-name-value{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis}.project-name-edit-icon{align-items:center;color:var(--color-text-light);display:flex;flex-shrink:0;justify-content:center;margin-left:var(--spacing-xs);opacity:0;transition:opacity .2s ease}.project-name-container:hover .project-name-edit-icon{opacity:1}.top-bar .search-bar{flex:1;max-width:480px;min-width:200px}.history-controls{align-items:center;display:flex;gap:var(--spacing-xs)}.undo-btn,.redo-btn,.undo-button,.redo-button{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-brand-primary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all .2s ease}.undo-btn:hover:not(:disabled),.redo-btn:hover:not(:disabled),.undo-button:hover:not(:disabled),.redo-button:hover:not(:disabled){background:var(--color-surface);color:var(--color-brand-primary-hover);opacity:.8}.undo-btn .fa-icon-wrapper,.redo-btn .fa-icon-wrapper,.undo-button .fa-icon-wrapper,.redo-button .fa-icon-wrapper,.undo-btn .fa-icon-wrapper svg,.redo-btn .fa-icon-wrapper svg,.undo-button .fa-icon-wrapper svg,.redo-button .fa-icon-wrapper svg{color:var(--color-brand-primary)!important;fill:currentcolor!important}.undo-btn:disabled,.redo-btn:disabled,.undo-button:disabled,.redo-button:disabled{cursor:not-allowed;opacity:.4}.redo-btn img,.redo-button img{transform:scaleX(-1)}.top-bar-right{align-items:center;display:flex;gap:var(--spacing-md)}.save-button,.settings-button,.download-button,.restart-button{align-items:center;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:var(--color-brand-primary)!important;cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-xs);height:40px;justify-content:center;min-width:40px;outline:none!important;padding:var(--spacing-sm);transition:all .2s ease;width:auto}.restart-button{padding:var(--spacing-sm) var(--spacing-md)}.save-button:hover,.settings-button:hover,.download-button:hover,.restart-button:hover{background:var(--color-surface)!important;border-radius:var(--radius-sm)!important;box-shadow:none!important;color:var(--color-brand-primary-hover)!important;outline:none!important}.save-button:active,.settings-button:active,.download-button:active,.restart-button:active{box-shadow:none!important;outline:none!important;transform:translateY(0)}.save-button svg,.settings-button svg,.download-button svg,.restart-button svg,.save-button img,.settings-button img,.download-button img,.restart-button img{color:var(--color-brand-primary)!important;fill:none!important;height:20px!important;stroke:currentcolor!important;width:20px!important}.save-button:hover svg,.settings-button:hover svg,.download-button:hover svg,.restart-button:hover svg,.save-button:hover img,.settings-button:hover img,.download-button:hover img,.restart-button:hover img{color:var(--color-brand-primary-hover)!important;opacity:.8}.save-button .fa-icon-wrapper,.settings-button .fa-icon-wrapper,.download-button .fa-icon-wrapper,.restart-button .fa-icon-wrapper,.save-button .fa-icon-wrapper svg,.settings-button .fa-icon-wrapper svg,.download-button .fa-icon-wrapper svg,.restart-button .fa-icon-wrapper svg{color:var(--color-brand-primary)!important;fill:currentcolor!important}.file-menu-container{margin-left:var(--spacing-md);position:relative;z-index:2001}.file-menu-btn{align-items:center;background:var(--color-brand-primary);border:1px solid var(--color-brand-primary);border-radius:var(--radius-button);box-shadow:var(--shadow-button-primary);color:var(--color-text-on-brand);cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.file-menu-btn:hover{background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover);color:var(--color-text-on-brand)}.file-menu-btn.active{background:var(--color-brand-primary-press);border-color:var(--color-brand-primary-press);color:var(--color-text-on-brand)}.file-dropdown{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--color-shadow);left:120px;max-height:400px;min-width:220px;overflow-y:auto;padding:var(--spacing-2);position:relative;z-index:9999}.file-dropdown.show{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.file-menu-item{align-items:center;border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);text-decoration:none;transition:background .15s ease}.file-menu-item:hover{background:var(--color-surface)}.file-menu-item svg,.file-menu-item .fa-icon-wrapper{color:var(--color-brand-primary);flex-shrink:0}.file-menu-item--danger{color:var(--color-error)}.file-menu-item--danger:hover{background:var(--color-sunset-red-50)}.file-menu-item--danger svg,.file-menu-item--danger .fa-icon-wrapper{color:var(--color-error)}.file-menu-divider{background:var(--color-border);height:1px;margin:var(--spacing-1) 0}@media(max-width:1024px){.top-bar-center{gap:var(--spacing-sm);margin:0 var(--spacing-sm)}.top-bar .search-bar{max-width:300px;min-width:150px}.project-name-container{max-width:150px;min-width:100px}}@media(max-width:768px){.top-bar{padding:0 var(--spacing-sm)}.top-bar-center{gap:var(--spacing-xs);margin:0 var(--spacing-xs)}.top-bar .search-bar{max-width:200px;min-width:120px}.project-name-container{max-width:120px;min-width:80px}.top-bar-right{gap:var(--spacing-xs)}}@media(max-width:480px){.top-bar-center{flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-xs) 0}.top-bar .search-bar{max-width:none;width:100%}.project-name-container{display:none}}body.dark-theme .file-menu-item svg,body.dark-theme .file-menu-item .fa-icon-wrapper{color:var(--color-alabaster)}body.dark-theme .file-menu-item--danger svg,body.dark-theme .file-menu-item--danger .fa-icon-wrapper{color:var(--color-error)}body.dark-theme .file-menu-item--danger:hover{background:#a0141826}body.dark-theme .top-bar-editor{background:var(--color-background);border-bottom-color:var(--color-border)}body.dark-theme .top-bar-editor .btn{background:var(--color-white-alpha-100);color:var(--color-alabaster)}body.dark-theme .top-bar-editor .btn:hover:not(:disabled){background:var(--color-white-alpha-200)}body.dark-theme .top-bar-editor .btn-primary{background:var(--color-alabaster);color:var(--color-sage-gray-900)}body.dark-theme .top-bar-editor .btn-primary:hover:not(:disabled){background:var(--color-white)}body.dark-theme .top-bar-editor .btn-primary .fa-icon-wrapper,body.dark-theme .top-bar-editor .btn-primary .fa-icon-wrapper svg{color:var(--color-sage-gray-900)}body.dark-theme .top-bar-editor .file-menu-btn{background:var(--color-white-alpha-200);border-color:var(--color-white-alpha-200);color:var(--color-alabaster)}body.dark-theme .top-bar-editor .file-menu-btn:hover{background:var(--color-white-alpha-300);border-color:var(--color-white-alpha-300)}body.dark-theme .top-bar-editor .search-bar:focus-within{background:var(--color-surface);border-color:var(--color-brand-primary)}body.dark-theme .top-bar-editor .search-bar:focus-within .search-bar-input{color:var(--color-text-primary)}body.dark-theme .top-bar:not(.top-bar-editor){color:var(--color-alabaster)}body.dark-theme .logo{color:var(--color-alabaster)}body.dark-theme .logo-image{content:url(https://fbcd.co/images/logos/creator/white-logo-v2.svg)}body.dark-theme .top-bar .undo-btn,body.dark-theme .top-bar .redo-btn,body.dark-theme .top-bar .undo-button,body.dark-theme .top-bar .redo-button{color:var(--color-alabaster)}body.dark-theme .top-bar .undo-btn .fa-icon-wrapper,body.dark-theme .top-bar .redo-btn .fa-icon-wrapper,body.dark-theme .top-bar .undo-button .fa-icon-wrapper,body.dark-theme .top-bar .redo-button .fa-icon-wrapper,body.dark-theme .top-bar .undo-btn .fa-icon-wrapper svg,body.dark-theme .top-bar .redo-btn .fa-icon-wrapper svg,body.dark-theme .top-bar .undo-button .fa-icon-wrapper svg,body.dark-theme .top-bar .redo-button .fa-icon-wrapper svg{color:var(--color-alabaster)!important}body.dark-theme .top-bar .save-button,body.dark-theme .top-bar .settings-button,body.dark-theme .top-bar .download-button,body.dark-theme .top-bar .restart-button{color:var(--color-alabaster)!important}body.dark-theme .top-bar .save-button svg,body.dark-theme .top-bar .settings-button svg,body.dark-theme .top-bar .download-button svg,body.dark-theme .top-bar .restart-button svg,body.dark-theme .top-bar .save-button .fa-icon-wrapper,body.dark-theme .top-bar .settings-button .fa-icon-wrapper,body.dark-theme .top-bar .download-button .fa-icon-wrapper,body.dark-theme .top-bar .restart-button .fa-icon-wrapper,body.dark-theme .top-bar .save-button .fa-icon-wrapper svg,body.dark-theme .top-bar .settings-button .fa-icon-wrapper svg,body.dark-theme .top-bar .download-button .fa-icon-wrapper svg,body.dark-theme .top-bar .restart-button .fa-icon-wrapper svg{color:var(--color-alabaster)!important}.file-menu-overlay{display:flex;justify-content:flex-start;left:20px;pointer-events:none;position:fixed;top:60px;z-index:9999}.file-menu-overlay .file-dropdown{margin-top:var(--spacing-sm);pointer-events:auto}.user-profile-container{position:relative}.profile-button-image{border-radius:50%;height:100%;object-fit:cover;width:100%}.user-dropdown{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--color-shadow);margin-top:var(--spacing-sm);min-width:220px;padding:var(--spacing-2);position:absolute;right:0;top:100%;z-index:9999}.user-dropdown-info{align-items:flex-start;cursor:default;flex-direction:column;gap:var(--spacing-0-5)}.user-dropdown-info:hover{background:transparent}.user-dropdown-name{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.user-dropdown-email{color:var(--color-text-secondary);font-size:var(--text-xs-size)}.left-sidebar{background:var(--color-background);border-right:1px solid var(--color-border);flex-shrink:0;height:calc(100vh - var(--top-bar-height));left:0;overflow-y:auto;position:fixed;top:var(--top-bar-height);transition:width .3s ease;width:var(--sidebar-width);z-index:999}.left-sidebar.collapsed{overflow:hidden;width:0}.sidebar-menu{align-items:center;display:flex;flex-direction:column;height:100%;padding:var(--spacing-3) 0}.menu-item{align-items:center;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;gap:var(--spacing-1);min-width:80px;padding:var(--spacing-1);text-align:center}.menu-item span{color:var(--color-brand-primary);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1.1;text-align:center;white-space:nowrap}.menu-item.active .btn{background:var(--color-brand-primary);border-color:var(--color-brand-primary);box-shadow:var(--shadow-button-primary);color:var(--color-white)}.menu-item.active .btn .fa-icon-wrapper,.menu-item.active .btn .fa-icon-wrapper svg{color:var(--color-white);fill:var(--color-white)}.menu-spacer{flex:1;margin-bottom:var(--spacing-md);min-height:var(--spacing-2xl)}body.dark-theme .menu-item span{color:var(--color-alabaster)}@media(max-width:768px){.menu-item{gap:var(--spacing-0-5);padding:var(--spacing-0-5)}.menu-item span{font-size:var(--text-2xs-size)}.sidebar-menu{padding:var(--spacing-sm) 0}}.canvas-container{background:var(--color-canvas-bg);height:100%;overflow:hidden;position:relative;width:100%}.canvas-stage-container{background:transparent;overflow:hidden;position:absolute}.canvas-container .canvas-stage-container{height:100%;left:0;top:0;width:100%}.canvas-area{cursor:grab;height:100%;position:relative;-webkit-user-select:none;user-select:none;width:100%}.canvas-area:active{cursor:grabbing}.canvas-content{height:100%;min-height:400px;position:relative;width:100%}.canvas-layer{position:absolute;transition:transform .1s ease;-webkit-user-select:none;user-select:none}.image-layer{cursor:grab}.image-layer:active{cursor:grabbing}.text-layer{border-radius:var(--radius-sm);cursor:grab;padding:var(--spacing-2);transition:all .2s ease}.text-layer:hover{background:var(--color-black-alpha-50);outline:1px solid rgb(0 212 255 / 30%);outline-offset:1px}.text-layer:active{cursor:grabbing}.layer-selection-box{border:2px solid var(--accent-color);border-radius:var(--radius-md);top:-8px;right:-8px;bottom:-8px;left:-8px;pointer-events:none;position:absolute;z-index:1001}.text-selection-box{background:#40b0a01a;border-radius:var(--radius-md)}.selection-handle{background:var(--accent-color);border:2px solid var(--color-background);border-radius:50%;cursor:pointer;height:12px;pointer-events:all;position:absolute;transition:all .2s ease;width:12px;z-index:1002}.selection-handle:hover{box-shadow:0 2px 8px var(--color-black-alpha-300);transform:scale(1.2)}.selection-handle.top-left{cursor:nw-resize;left:-6px;top:-6px}.selection-handle.top-right{cursor:ne-resize;right:-6px;top:-6px}.selection-handle.bottom-left{bottom:-6px;cursor:sw-resize;left:-6px}.selection-handle.bottom-right{bottom:-6px;cursor:se-resize;right:-6px}.selection-handle.top-center{cursor:ns-resize;left:50%;top:-6px;transform:translate(-50%)}.selection-handle.middle-left{cursor:ew-resize;left:-6px;top:50%;transform:translateY(-50%)}.selection-handle.middle-right{cursor:ew-resize;right:-6px;top:50%;transform:translateY(-50%)}.selection-handle.bottom-center{bottom:-6px;cursor:ns-resize;left:50%;transform:translate(-50%)}.selection-handle.top-center:hover,.selection-handle.bottom-center:hover{transform:translate(-50%)}.selection-handle.middle-left:hover,.selection-handle.middle-right:hover{transform:translateY(-50%)}.resize-handle{background:var(--accent-color);border:2px solid var(--color-background);box-shadow:0 2px 4px var(--color-black-alpha-200)}.resize-handle:hover{background:var(--accent-hover)}.rotate-handle{align-items:center;background:var(--accent-color);border:2px solid var(--color-background);box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:grab;display:flex;height:24px;justify-content:center;width:24px}.rotate-handle:hover{background:var(--accent-hover);transform:translate(-50%) scale(1.2)}.rotate-handle:active{cursor:grabbing}.rotate-handle svg{color:var(--color-background);height:16px;width:16px}.zoom-controls{align-items:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-xl);bottom:20px;box-shadow:0 4px 12px var(--color-black-alpha-100);display:flex;gap:var(--spacing-4);left:50%;padding:var(--spacing-2) var(--spacing-4);position:absolute;transform:translate(-50%);z-index:100}.zoom-btn{align-items:center;background:none;border:none;border-radius:50%;color:var(--text-primary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.zoom-btn:hover{background:none;color:var(--text-primary);transform:scale(1.1)}.zoom-slider-container{align-items:center;display:flex;gap:var(--spacing-3);min-width:120px}.zoom-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border-color);border-radius:2px;flex:1;height:4px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent-color);border-radius:50%;cursor:pointer;height:16px;transition:all .2s ease;width:16px}.zoom-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.zoom-slider::-moz-range-thumb{background:var(--accent-color);border:none;border-radius:50%;cursor:pointer;height:16px;transition:all .2s ease;width:16px}.zoom-slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.zoom-percentage{color:var(--text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);min-width:45px;text-align:center}@media(max-width:768px){.zoom-controls{bottom:10px;gap:var(--spacing-3);padding:6px 12px}.zoom-btn{height:28px;width:28px}.zoom-slider-container{min-width:100px}.zoom-percentage{font-size:var(--text-xs-size);min-width:40px}}.canvas-placeholder{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;height:100%;justify-content:center;padding:40px;text-align:center}.canvas-placeholder svg{margin-bottom:20px;opacity:.5}.canvas-placeholder h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.canvas-placeholder p{font-size:var(--text-base-size);margin:0;opacity:.8}.canvas-image-container{align-items:center;display:flex;height:100%;justify-content:center;padding:var(--spacing-md);width:100%}.canvas-image{border-radius:var(--radius-md);box-shadow:0 4px 20px var(--color-black-alpha-100);max-height:100%;max-width:100%;object-fit:contain}.chat-input-container{bottom:var(--spacing-md);left:50%;max-width:500px;position:absolute;transform:translate(-50%);width:90%}.chat-input-wrapper{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 20px var(--color-black-alpha-100);display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm)}.chat-input{background:transparent;border:none;color:var(--color-text-primary);flex:1;font-size:var(--font-size-sm);outline:none;padding:var(--spacing-sm)}.chat-input::placeholder{color:var(--color-text-light)}.chat-submit-btn{align-items:center;background:var(--color-brand-primary);border:none;border-radius:var(--radius-md);color:var(--color-background);cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.chat-submit-btn:hover{background:var(--color-brand-dark)}.chat-submit-btn:active{transform:scale(.95)}.text-bounding-box{pointer-events:none;transition:all .1s ease}.corner-handle{background-color:#00d4ff;border:2px solid var(--color-background);border-radius:2px;box-shadow:0 2px 4px var(--color-black-alpha-200);height:12px;pointer-events:auto;position:absolute;transition:all .2s ease;width:12px}.corner-handle:hover{background-color:#ff6b35;box-shadow:0 3px 6px var(--color-black-alpha-300);transform:scale(1.1)}.edge-handle{background-color:#00d4ff;border:1px solid var(--color-background);border-radius:2px;opacity:.8;pointer-events:auto;position:absolute;transition:all .2s ease}.edge-handle:hover{background-color:#ff6b35;opacity:1;transform:scale(1.1)}.rotation-handle{background-color:#00d4ff;border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:grab;height:16px;pointer-events:auto;position:absolute;transition:all .2s ease;width:16px}.rotation-handle:hover{background-color:#ff6b35;box-shadow:0 3px 6px var(--color-black-alpha-300);transform:scale(1.1)}.rotation-handle:active{cursor:grabbing}.rotation-line{opacity:.7;pointer-events:none}.resize-handle-nw{cursor:nw-resize}.resize-handle-ne{cursor:ne-resize}.resize-handle-sw{cursor:sw-resize}.resize-handle-se{cursor:se-resize}.resize-handle-n,.resize-handle-s{cursor:ns-resize}.resize-handle-e,.resize-handle-w{cursor:ew-resize}.canvas-focus-pill{box-shadow:0 2px 8px #e43f6f4d;pointer-events:none;position:absolute;right:12px;top:12px;z-index:10}.canvas-mode-pill{border-radius:50px;box-shadow:0 2px 8px var(--color-black-alpha-200);color:var(--color-background);font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);letter-spacing:.03em;padding:var(--spacing-1) var(--spacing-3);pointer-events:none;position:absolute;right:12px;text-transform:uppercase;top:12px;transition:opacity .3s ease;z-index:10}.canvas-mode-pill--visible{opacity:1}.canvas-mode-pill--hidden{opacity:0}.zoom-controls{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);bottom:2rem;box-shadow:var(--shadow-elevated);cursor:grab;display:flex;gap:1rem;justify-content:center;left:50%;padding:.75rem 1.5rem;position:absolute;transform:translate(-50%);z-index:100}.zoom-controls--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.zoom-btn{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-brand-primary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:.5rem;transition:all .2s ease;width:32px}.zoom-btn:hover{background:none;color:var(--color-text-primary)}.zoom-slider-container{align-items:center;display:flex;gap:.75rem;min-width:200px}.zoom-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;cursor:pointer;flex:1;height:4px;outline:none}.zoom-slider::-webkit-slider-runnable-track{background:var(--color-border);border:none;border-radius:2px;height:4px;width:100%}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-zoom-accent);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:pointer;height:16px;margin-top:-6px;transition:all .2s ease;width:16px}.zoom-slider::-webkit-slider-thumb:hover{background:var(--color-zoom-accent-hover);transform:scale(1.1)}.zoom-slider::-moz-range-track{background:var(--color-border);border:none;border-radius:2px;height:4px;width:100%}.zoom-slider::-moz-range-thumb{background:var(--color-zoom-accent);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:pointer;height:16px;transition:all .2s ease;width:16px}.zoom-slider::-moz-range-thumb:hover{background:var(--color-zoom-accent-hover);transform:scale(1.1)}.zoom-percentage-input-wrapper{align-items:center;display:flex;min-width:48px}.zoom-percentage-input{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-brand-primary);font-family:inherit;font-size:.875rem;font-weight:var(--font-weight-medium);outline:none;padding:2px 0;text-align:right;width:32px}.zoom-percentage-input:hover{border-color:var(--color-border)}.zoom-percentage-input:focus{border-color:var(--color-brand-primary)}.zoom-percentage-suffix{color:var(--color-brand-primary);font-size:.875rem;font-weight:var(--font-weight-medium);pointer-events:none}.zoom-separator{background:var(--color-border);flex-shrink:0;height:20px;width:1px}body.dark-theme .zoom-btn,body.dark-theme .zoom-percentage-input,body.dark-theme .zoom-percentage-suffix{color:var(--color-alabaster)}.right-panel{background:var(--color-background);border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:0 20px 25px -5px var(--color-black-alpha-100),0 10px 10px -5px #0000000a;display:flex;flex-direction:column;height:calc(100vh - var(--top-bar-height, 80px));overflow:hidden;position:fixed;right:0;top:var(--top-bar-height, 80px);transform:translate(100%);transition:transform .3s ease,left .3s ease;width:var(--right-panel-width, 320px);z-index:1000}.right-panel.open{transform:translate(0)}.right-panel.resizing{transition:none}.right-panel[style*="left: 0"]{left:0}.right-panel[style*="left: var(--sidebar-width)"]{left:var(--sidebar-width)}.panel-header{align-items:center;background:var(--color-background);border-bottom:none;display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-lg)}.panel-title{margin:0}.panel-close-left{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:var(--spacing-sm);position:absolute;right:-16px;top:50%;transform:translateY(-50%);transition:all .2s ease;width:32px;z-index:101}.panel-close-left:hover{background:var(--color-border);color:var(--color-text-primary)}.panel-content{background:var(--color-background);container-name:panel;container-type:inline-size;flex:1;overflow-y:auto;padding:0;position:relative;z-index:1}.panel-placeholder{color:var(--color-text-secondary);padding:var(--spacing-xl) var(--spacing-md);text-align:center}.panel-placeholder svg{height:48px;margin-bottom:var(--spacing-md);opacity:.5;width:48px}.panel-placeholder h4{color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.panel-placeholder p{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.panel-resize-handle{align-items:center;background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(0 0 0 / 5%) 50%,transparent 100%);bottom:0;cursor:col-resize;display:flex;justify-content:center;position:absolute;right:-4px;top:0;transition:background-color .2s ease;width:8px;z-index:1001}.panel-resize-handle:hover{background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(0 0 0 / 15%) 50%,transparent 100%)}.panel-resize-handle:active{background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(0 0 0 / 25%) 50%,transparent 100%)}body.dark-theme .panel-resize-handle{background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(255 255 255 / 5%) 50%,transparent 100%)}body.dark-theme .panel-resize-handle:hover{background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(255 255 255 / 15%) 50%,transparent 100%)}body.dark-theme .panel-resize-handle:active{background:linear-gradient(to left,transparent 0%,transparent 50%,rgb(255 255 255 / 25%) 50%,transparent 100%)}@media(max-width:768px){.panel-resize-handle{right:-6px;width:12px}}.right-panel.resizing *{-webkit-user-select:none;user-select:none}.layers-panel{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:var(--spacing-md)}.layers-header{display:flex;flex-shrink:0;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.layers-list{border:1px solid var(--color-border);flex:1;margin-bottom:var(--spacing-md);overflow-y:auto}.layers-empty{align-items:center;display:flex;height:100%;justify-content:center}.layers-actions{border-top:1px solid var(--color-border);display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--spacing-sm);padding-top:var(--spacing-md)}.layer-item{align-items:center;border-bottom:1px solid var(--color-border);cursor:pointer;display:flex;gap:var(--spacing-xs);min-height:44px;padding:var(--spacing-xs) var(--spacing-sm);transition:all .2s ease;-webkit-user-select:none;user-select:none}.layer-item:last-child{border-bottom:none}.layer-item:hover{background:var(--color-surface-hover)}.layer-item.selected{background:var(--color-dusty-rose-100);border-color:var(--color-dusty-rose-200)}.layer-item.locked{background:var(--color-surface);opacity:.6}.layer-checkbox{align-items:center;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:2px}.layer-checkbox .checkbox__control{height:16px;width:16px}.layer-checkbox .checkbox__indicator{background:var(--color-surface);border-width:2px}.layer-item.selected .layer-checkbox .checkbox__indicator{border-color:var(--color-dusty-rose-300)}.layer-content{align-items:center;display:flex;flex:1;gap:var(--spacing-sm);min-width:0}.layer-preview-container{align-items:center;background:var(--color-surface-secondary);border-radius:var(--radius-sm);display:flex;flex-shrink:0;height:24px;justify-content:center;overflow:hidden;width:24px}.layer-preview{height:100%;object-fit:contain;width:100%}.layer-preview-text{align-items:center;color:var(--color-text-secondary);display:flex;justify-content:center}.layer-preview-empty{background:var(--color-surface-secondary);border-radius:var(--radius-sm)}.layer-icon{align-items:center;background:var(--color-surface-secondary);border-radius:var(--radius-sm);display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.layer-icon svg{height:16px;stroke:var(--color-text-secondary);width:16px}.layer-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.layer-name-editable{flex:1;min-width:0}.layer-name{color:var(--color-text);cursor:text;display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);outline:none;overflow:hidden;padding:2px 4px;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.layer-item.selected .layer-name{color:var(--color-text-primary)}.layer-name-input{background:var(--color-surface-hover);border:2px solid var(--color-brand-primary);color:var(--color-text);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);outline:none;padding:2px 4px;width:100%}.layer-item.selected .layer-name-input{background:var(--color-background);border-color:var(--color-brand-primary);color:var(--color-text-primary)}.layer-item.selected .layer-name-input::placeholder{color:var(--color-text-light)}.layer-description{color:var(--color-text-secondary);display:block;font-size:var(--font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-info-btn:hover{color:var(--color-brand-primary)!important}.layer-type{color:var(--color-text-secondary);font-size:var(--font-size-xs);text-transform:capitalize}.layer-meta-row{align-items:center;display:flex;gap:var(--spacing-xs)}.layer-info .layer-type-pill{font-size:9px;letter-spacing:.3px;line-height:14px;padding:3px 6px 1px}.layer-controls{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:2px;margin-left:auto;margin-top:0;opacity:0;transition:opacity .15s ease}.layer-item:hover .layer-controls,.layer-item.selected .layer-controls{opacity:1}.layer-control-btn{align-items:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;height:22px;justify-content:center;padding:0;transition:all .15s ease;width:22px}.layer-control-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.layer-control-btn:disabled{cursor:not-allowed;opacity:.3}.layer-item.selected .layer-control-btn{color:var(--color-text-secondary)}.layer-item.selected .layer-control-btn:hover:not(:disabled){background:var(--color-dusty-rose-200);color:var(--color-text-primary)}.layer-control-btn.visible{color:var(--color-brand-primary)}.layer-control-btn.hidden{color:var(--color-text-disabled)}.layer-control-btn.locked{color:var(--color-warning)}.layer-control-btn svg{height:14px;width:14px}.layer-delete{color:var(--color-error, #ef4444)!important}.layer-delete:hover:not(:disabled){background:var(--color-error, #ef4444)!important;color:var(--color-background)!important}.layer-item.selected .layer-delete{color:var(--color-error)!important}.layer-item.selected .layer-delete:hover:not(:disabled){background:var(--color-error)!important;color:var(--color-background)!important}.layers-list:empty:after{color:var(--color-text-secondary);content:"No layers yet. Click 'Add Layer' to get started!";display:block;font-size:var(--font-size-sm);font-style:italic;padding:var(--spacing-lg);text-align:center}.layers-list::-webkit-scrollbar{width:6px}.layers-list::-webkit-scrollbar-track{border-radius:3px}.layers-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.layer-item.dragging{cursor:grabbing;opacity:.5}.layer-item.hidden{opacity:.5}.layer-item.hidden .layer-name{color:var(--color-text-disabled);text-decoration:line-through}.layer-item.locked{opacity:.6}.layer-item.locked .layer-name{text-decoration:line-through}.layer-control-btn.layer-lock{color:var(--color-warning, #f59e0b)}.layer-item.selected .layer-control-btn.layer-lock{color:var(--color-warning)}body.dark-theme .layer-item.selected{background:var(--color-white-alpha-100);border-color:var(--color-white-alpha-200)}body.dark-theme .layer-item.selected .layer-control-btn:hover:not(:disabled){background:var(--color-white-alpha-200)}body.dark-theme .layer-item.selected .layer-checkbox .checkbox__indicator{border-color:var(--color-white-alpha-300)}@media(max-width:768px){.layers-panel{padding:var(--spacing-sm)}.layer-item{min-height:40px;padding:var(--spacing-xs)}.layer-name{font-size:var(--font-size-xs)}.layer-control-btn{height:20px;width:20px}.layer-control-btn svg{height:12px;width:12px}}.text-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.text-panel .panel-header{background:var(--color-background);border-bottom:1px solid var(--color-border);flex-shrink:0;padding:var(--spacing-md)}.text-panel .panel-header h3{color:var(--color-text-primary);font-size:1.125rem;font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-xs) 0}.text-panel .panel-header p{color:var(--color-text-secondary);font-size:.875rem;margin:0}.text-panel .panel-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-md);overflow-y:auto;padding:var(--spacing-md)}.text-panel .font-grid-section{flex:1;min-height:200px;overflow-y:auto}.text-panel .font-loading{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl)}.text-panel .font-loading .loading-spinner{animation:spin 1s linear infinite;border:3px solid var(--color-border);border-radius:50%;border-top-color:var(--color-brand-primary);height:32px;margin-bottom:var(--spacing-sm);width:32px}@keyframes spin{to{transform:rotate(360deg)}}.text-panel .font-empty{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl);text-align:center}.text-panel .font-empty-query{color:var(--color-text-light);font-size:.75rem;margin-top:var(--spacing-xs)}.text-panel .font-grid{display:grid;gap:var(--spacing-xs);grid-template-columns:repeat(3,minmax(0,1fr))}.text-panel .font-grid .template-info{display:none}.text-panel .font-card-active{border-radius:var(--radius-md);outline:2px solid var(--color-brand-primary);outline-offset:-2px}.font-preview-fallback{align-items:center;background:var(--color-plum-wine-800);border-radius:var(--radius-md);color:var(--color-alabaster);display:flex;font-size:var(--font-size-base);height:100%;justify-content:center;line-height:var(--line-height-tight);overflow:hidden;overflow-wrap:break-word;padding:var(--spacing-xs);text-align:center;width:100%}.generate-panel{height:100%;overflow-y:auto;padding:var(--spacing-5);position:relative}.panel-header{border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-4)}.panel-header h3{color:var(--color-text-primary);font-size:var(--text-lg-size);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.panel-header p{color:var(--color-text-secondary);font-size:var(--text-sm-size);margin:0}.panel-content{display:flex;flex-direction:column;gap:var(--spacing-5)}.prompt-header{align-items:center;display:flex;justify-content:space-between}.prompt-section{margin-bottom:var(--spacing-4)}.prompt-section h4{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.prompt-input{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-sm-size);padding:var(--spacing-3);resize:vertical;transition:border-color .2s ease;width:100%}.prompt-input:focus{border-color:var(--color-brand-secondary);box-shadow:0 0 0 3px #e43f6f1a;outline:none}.prompt-input::placeholder{color:var(--color-text-secondary)}.generate-button{background:var(--color-brand-primary);border:none;border-radius:var(--radius-button);color:var(--color-background);cursor:pointer;font-size:var(--text-base-size);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-4);padding:var(--spacing-3) var(--spacing-5);transition:all .2s ease;width:100%}.generate-button:hover:not(:disabled){background:var(--color-brand-dark)}.generate-button:disabled{background:var(--color-neutral-400);cursor:not-allowed;transform:none}.selected-info{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-4)}.selected-info h4{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.selected-style-info{border-top:1px solid var(--color-border);margin-top:var(--spacing-3);padding-top:var(--spacing-3)}.selected-style-info h5{color:var(--color-text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-2) 0}.style-description{color:var(--color-text-secondary);font-size:var(--text-xs-size);line-height:1.4;margin:0}.style-description strong{color:var(--color-text-primary)}.generate-panel .loading{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--text-sm-size);justify-content:center;padding:var(--spacing-5)}.generate-panel .loading:before{animation:spin 1s linear infinite;border:2px solid var(--color-border);border-radius:50%;border-top:2px solid var(--color-brand-secondary);content:"";height:16px;margin-right:var(--spacing-2);width:16px}@media(max-width:768px){.generate-panel{padding:var(--spacing-4)}}.text-layer-dialog{top:0;right:0;bottom:0;left:0;position:fixed;z-index:9999}.dialog-overlay{align-items:center;background:var(--color-black-alpha-500);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:var(--spacing-lg);position:absolute}.dialog-content{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 32px var(--color-shadow);max-height:90vh;max-width:400px;overflow-y:auto;padding:var(--spacing-xl);width:100%}.dialog-content h3{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-lg) 0}.form-group{margin-bottom:var(--spacing-md)}.form-row{display:flex;gap:var(--spacing-md)}.form-row .form-group{flex:1}.form-group label{color:var(--color-text-primary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs)}.form-group input,.form-group select{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--font-size-sm);padding:var(--spacing-sm);transition:border-color .2s ease;width:100%}.form-group input:focus,.form-group select:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-brand-light);outline:none}.form-group input[type=color]{cursor:pointer;height:40px;padding:2px}.form-group input[type=number]{text-align:center}.dialog-buttons{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-lg);padding-top:var(--spacing-md)}.text-layer-dialog .btn{min-width:80px;padding:var(--spacing-sm) var(--spacing-md)}.text-layer{cursor:move;line-height:var(--line-height-tight);pointer-events:auto;position:absolute;transition:opacity .2s ease;-webkit-user-select:none;user-select:none}.text-layer:hover{outline:2px dashed var(--color-white-alpha-500);outline-offset:2px}.text-layer.dragging{cursor:grabbing;opacity:.8}.text-layer.locked{cursor:default;pointer-events:none}input[type=range]{accent-color:var(--color-brand-primary);margin:var(--spacing-xs) 0;width:100%}.form-group span{color:var(--color-text-secondary);display:inline-block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-left:var(--spacing-sm);min-width:50px;text-align:center}.color-controls{align-items:center;display:flex;gap:var(--spacing-md)}.color-favorites{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.color-swatch{border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;height:32px;position:relative;transition:all .2s ease;width:32px}.color-swatch:hover{box-shadow:0 2px 8px var(--color-black-alpha-200);transform:scale(1.1)}.color-swatch.active{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #40b0a04d;transform:scale(1.1)}.color-swatch[data-color="#ffffff"].active{border-color:var(--color-brand-primary)}input[type=color]{background:none;border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;height:32px;padding:0;width:40px}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-sm) - 2px)}input[type=color]::-webkit-color-swatch-wrapper{border:none;border-radius:calc(var(--radius-sm) - 2px);padding:0}@media(max-width:640px){.dialog-content{margin:var(--spacing-md);padding:var(--spacing-lg)}.form-row{flex-direction:column;gap:var(--spacing-sm)}.dialog-buttons{flex-direction:column}.btn{width:100%}.color-favorites{justify-content:center}.color-controls{align-items:stretch;flex-direction:column;gap:var(--spacing-sm)}}.color-section{margin-bottom:var(--spacing-sm)}.color-header{margin-bottom:var(--spacing-xs)}.color-header label{font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);margin:0}.color-swatches-row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.color-swatch{border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;height:24px;position:relative;transition:all .15s ease;width:24px}.color-swatch:hover{border-color:var(--text-secondary);transform:scale(1.1)}.color-swatch.active{border-color:var(--accent-color);box-shadow:0 0 0 2px #e74c8e4d}.color-swatch.active:after{color:var(--color-background);content:"✓";font-size:var(--text-2xs-size);font-weight:var(--font-weight-bold);left:50%;position:absolute;text-shadow:0 0 2px rgb(0 0 0 / 80%);top:50%;transform:translate(-50%,-50%)}.color-swatch.white{border-color:var(--border-color)}.color-picker-input{background:none;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;height:24px;padding:0;width:24px}.color-picker-input::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}.color-swatches-container{display:flex;flex-wrap:wrap;gap:var(--spacing-2);position:relative}.color-swatch-picker-btn{background:linear-gradient(135deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:2px solid transparent;border-radius:50%;box-shadow:0 1px 3px var(--color-black-alpha-200);cursor:pointer;flex-shrink:0;height:28px;outline-offset:2px;transition:border-color .15s ease;width:28px}.color-swatch-picker-btn:hover{border-color:var(--color-brand-primary)}.color-swatch-picker-btn.active{outline:2px solid #60a5fa;outline-offset:1px}.color-swatches-container .color-swatch{border-radius:50%;box-shadow:0 1px 3px var(--color-black-alpha-200);height:28px;outline-offset:2px;transition:border-color .15s ease;width:28px}.color-swatches-container--lg .color-swatch-picker-btn,.color-swatches-container--lg .color-swatch{height:35px;width:35px}.color-swatches-container .color-swatch:hover{border-color:var(--color-brand-primary);transform:none}.color-swatches-container .color-swatch.selected{outline:2px solid #60a5fa;outline-offset:1px}@media(max-width:768px){.color-swatch{height:22px;width:22px}}body.dark-theme .color-swatch:hover{border-color:var(--color-white-alpha-400)}.text-toolbar{align-items:center;background:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:0 2px 8px #00000014;display:flex;gap:var(--spacing-2);height:44px;justify-content:flex-end;left:0;padding:0 var(--spacing-sm);position:absolute;right:0;top:0;-webkit-user-select:none;user-select:none;z-index:100}.text-toolbar__divider{background:var(--border-color);flex-shrink:0;height:24px;width:1px}.text-toolbar__font-btn{max-width:140px}.text-toolbar__font-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-toolbar .number-input-control{flex:0 0 auto;gap:0;min-width:0}.text-toolbar .number-input-label{display:none}.text-toolbar .number-input-wrapper{height:28px;padding:0 4px;width:var(--spacing-9)}.text-toolbar .number-input-field{font-size:var(--text-xs-size)}.text-toolbar .number-input-icon svg{height:12px;width:12px}.text-toolbar .style-controls-row{align-items:center;gap:var(--spacing-xs);margin-bottom:0}.text-toolbar__color-preview{border-radius:var(--radius-full);flex-shrink:0;height:18px;min-height:18px;min-width:18px;width:18px}.text-toolbar__color-popover{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:0 8px 24px #00000026;left:0;padding:var(--spacing-sm);position:absolute;top:calc(100% + 4px);width:240px;z-index:200}.text-toolbar__effects-btn .fa-icon-wrapper svg{position:relative;top:-5px}.text-toolbar__effects-popover{padding:var(--spacing-sm);width:280px}.text-toolbar__glyphs-popover{max-height:min(300px,50vh);overflow-y:auto}.form-group{margin-bottom:var(--spacing-sm)}.form-group label{color:var(--text-primary);display:block;font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs)}.typography-controls{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.style-controls-row{align-items:center;display:flex;gap:var(--spacing-sm);justify-content:space-between;margin-bottom:var(--spacing-sm)}.weight-buttons{display:flex;gap:var(--spacing-xs)}.slider,.rotation-slider,.outline-slider,.bend-slider,.wave-slider,.layer-styles-slider,.size-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border-color);border-radius:2px;flex:1;height:4px;outline:none}.slider::-webkit-slider-thumb,.rotation-slider::-webkit-slider-thumb,.outline-slider::-webkit-slider-thumb,.bend-slider::-webkit-slider-thumb,.wave-slider::-webkit-slider-thumb,.layer-styles-slider::-webkit-slider-thumb,.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent-color);border:2px solid var(--bg-primary);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:pointer;height:16px;margin-top:-6px;transition:all .2s ease;width:16px}.slider::-webkit-slider-thumb:hover,.rotation-slider::-webkit-slider-thumb:hover,.outline-slider::-webkit-slider-thumb:hover,.bend-slider::-webkit-slider-thumb:hover,.wave-slider::-webkit-slider-thumb:hover,.layer-styles-slider::-webkit-slider-thumb:hover,.size-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider::-moz-range-thumb,.rotation-slider::-moz-range-thumb,.outline-slider::-moz-range-thumb,.bend-slider::-moz-range-thumb,.wave-slider::-moz-range-thumb,.layer-styles-slider::-moz-range-thumb,.size-slider::-moz-range-thumb{background:var(--accent-color);border:2px solid var(--bg-primary);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:pointer;height:16px;transition:all .2s ease;width:16px}.slider::-moz-range-thumb:hover,.rotation-slider::-moz-range-thumb:hover,.outline-slider::-moz-range-thumb:hover,.bend-slider::-moz-range-thumb:hover,.wave-slider::-moz-range-thumb:hover,.layer-styles-slider::-moz-range-thumb:hover,.size-slider::-moz-range-thumb:hover{transform:scale(1.1)}.rotation-controls{align-items:center;display:flex;gap:var(--spacing-sm)}.rotation-controls label{color:var(--text-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:60px}.button-group{display:flex;gap:var(--spacing-xs)}.button-group.compact{gap:2px}.button-group .btn{flex:1;font-size:var(--text-xs-size);padding:var(--spacing-xs) var(--spacing-sm)}@media(max-width:900px){.text-toolbar{gap:var(--spacing-1);padding:0 var(--spacing-xs)}.text-toolbar__font-btn{max-width:100px}.text-toolbar .number-input-wrapper{width:64px}}@media(max-width:768px){.text-toolbar .number-input-wrapper{width:56px}.text-toolbar__font-btn{max-width:80px}}body.dark-theme .text-toolbar,body.dark-theme .text-toolbar__color-popover{background:var(--bg-primary);border-color:var(--border-color)}body.dark-theme .slider,body.dark-theme .rotation-slider,body.dark-theme .outline-slider,body.dark-theme .bend-slider,body.dark-theme .wave-slider,body.dark-theme .layer-styles-slider,body.dark-theme .size-slider{background:var(--color-surface-elevated)}.settings-modal{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-black-alpha-500);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1100}.settings-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px var(--color-shadow);max-height:80vh;max-width:400px;overflow:hidden;width:90%}.settings-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-lg)}.settings-header h3{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.settings-close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all .2s ease}.settings-close:hover{background:var(--color-background);color:var(--color-text-primary)}.settings-body{padding:var(--spacing-lg)}.setting-group:last-child{margin-bottom:0}.setting-select{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease;width:100%}.setting-select:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #40b0a01a;outline:none}.settings-footer{border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;padding:var(--spacing-lg)}.settings-save{background:var(--color-brand-primary);border:none;border-radius:var(--radius-md);color:var(--color-background);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);padding:var(--spacing-sm) var(--spacing-lg);transition:all .2s ease}.settings-save:hover{background:var(--color-brand-primary-hover)}.settings-save:active{transform:translateY(0)}.settings-button{align-items:center;background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;margin-right:var(--spacing-sm);padding:var(--spacing-sm);transition:all .2s ease}.settings-button:hover{background:var(--color-surface);border-color:var(--color-brand-primary);color:var(--color-text-primary)}.project-selection-modal{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-black-alpha-500);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:all .3s ease;visibility:hidden;width:100%;z-index:1100}.project-selection-modal.show{opacity:1;visibility:visible}.project-selection-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px var(--color-shadow);max-height:80vh;max-width:800px;overflow:hidden;transform:scale(.9);transition:transform .3s ease;width:90%}.project-selection-modal.show .project-selection-content{transform:scale(1)}.project-selection-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:var(--spacing-lg)}.project-selection-header h3{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.project-selection-close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all .2s ease}.project-selection-close:hover{background:var(--color-background);color:var(--color-text-primary)}.project-selection-body{max-height:60vh;overflow-y:auto;padding:var(--spacing-lg)}.project-grid{display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.project-item{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;padding:var(--spacing-md);text-align:center;transition:all .2s ease}.project-item:hover{border-color:var(--color-brand-primary);box-shadow:0 4px 12px var(--color-shadow)}.project-thumbnail{align-items:center;background:var(--color-canvas-bg);border-radius:var(--radius-sm);display:flex;height:120px;justify-content:center;margin-bottom:var(--spacing-sm);overflow:hidden;width:100%}.project-thumbnail img{height:100%;object-fit:cover;width:100%}.project-placeholder{align-items:center;color:var(--color-text-secondary);display:flex;height:100%;justify-content:center;opacity:.6;width:100%}.project-info{text-align:left}.project-title{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);margin:0 0 var(--spacing-xs) 0}.project-date{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin:0}.setting-group{margin-bottom:var(--spacing-lg)}.setting-group label{color:var(--color-text-primary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-sm)}.setting-group .checkbox__label{margin-bottom:0}.setting-input{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease;width:100%}.setting-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #40b0a01a;outline:none}.svg-preview-btn{align-items:center;display:inline-flex;gap:var(--spacing-sm);justify-content:center;width:100%}.svg-preview{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);overflow:hidden}.svg-preview__image-container{align-items:center;background:repeating-conic-gradient(var(--color-border-light, #e5e5e5) 0% 25%,transparent 0% 50%) 50% / 16px 16px;display:flex;justify-content:center;max-height:200px;padding:var(--spacing-md)}.svg-preview__image{max-height:180px;max-width:100%;object-fit:contain}.svg-preview__warnings{border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.svg-preview__warning{align-items:flex-start;color:var(--color-warning, #b45309);display:flex;font-size:var(--font-size-xs);gap:var(--spacing-xs);line-height:1.4}.svg-preview__warning svg{flex-shrink:0;margin-top:2px}.cut-ready-info{align-items:flex-start;background:var(--color-surface-alt, #f0f9ff);border:1px solid var(--color-brand-dark);border-radius:var(--radius-md);color:var(--color-text-primary);display:flex;font-size:var(--font-size-xs);gap:var(--spacing-sm);line-height:1.4;margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}.cut-ready-info svg{color:var(--color-brand-dark);flex-shrink:0;margin-top:2px}.cut-ready-warning{align-items:flex-start;background:var(--color-warning-bg, #fffbeb);border:1px solid var(--color-warning, #b45309);border-radius:var(--radius-md);color:var(--color-warning, #b45309);display:flex;font-size:var(--font-size-xs);gap:var(--spacing-sm);line-height:1.4;margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}.cut-ready-warning svg{flex-shrink:0;margin-top:2px}.share-section{border-top:1px solid var(--color-border);margin-top:var(--spacing-md);padding-top:var(--spacing-md)}.share-section>label{color:var(--color-text-primary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-sm)}.share-section__get-link{align-items:center;display:inline-flex;gap:var(--spacing-sm);justify-content:center;width:100%}.share-link-row{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.share-link-row__input{flex:1;margin-bottom:0}.share-link-row__copy{flex-shrink:0;white-space:nowrap}.social-buttons{display:flex;gap:var(--spacing-sm)}.social-buttons__btn{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;height:36px;justify-content:center;transition:background-color .15s ease,border-color .15s ease;width:36px}.social-buttons__btn--twitter{background:#000;border-color:#000;color:#fff}.social-buttons__btn--twitter:hover{background:#333}.social-buttons__btn--facebook{background:#1877f2;border-color:#1877f2;color:#fff}.social-buttons__btn--facebook:hover{background:#0d65d9}.social-buttons__btn--pinterest{background:#bd081c;border-color:#bd081c;color:#fff}.social-buttons__btn--pinterest:hover{background:#a00718}.welcome-screen{align-items:center;background:var(--color-background);display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100vh - var(--top-bar-height));padding:var(--spacing-xl);width:100%}.welcome-content{padding:0 var(--spacing-xl);text-align:center;width:100%}.welcome-title{color:var(--color-text-primary);font-family:var(--font-family-heading);font-size:var(--heading-h1-size);font-weight:var(--heading-weight);line-height:var(--heading-h1-line-height);margin:var(--spacing-2xl) auto}.welcome-chat-container{margin-bottom:var(--spacing-2xl)}.welcome-chat-container .search-bar{margin:0 auto;max-width:480px}.loading-bar-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.loading-bar{background:var(--color-white-alpha-300);border-radius:2px;height:4px;overflow:hidden;position:relative;width:24px}.loading-bar-fill{animation:loading-progress 2s ease-in-out infinite;background:var(--color-background);border-radius:2px;height:100%;left:0;position:absolute;top:0}@keyframes loading-progress{0%{left:0%;width:0%}50%{left:0%;width:100%}to{left:100%;width:0%}}.generation-status{background:var(--color-white);border-radius:var(--radius-lg);margin-left:auto;margin-right:auto;margin-top:var(--spacing-md);max-width:800px;overflow:hidden;padding:var(--spacing-lg)}body.dark-theme .generation-status,[data-theme=dark] .generation-status{background:var(--color-surface)}.generation-status p{color:var(--color-text-primary);margin:0}.generation-status .generation-prompt{color:var(--color-text-light);font-size:var(--font-size-sm);font-style:italic;margin-top:var(--spacing-xs)}.projects-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin:2rem 0;padding:1.5rem}.projects-header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:space-between;margin-bottom:var(--spacing-lg)}.projects-title{align-items:center;color:var(--color-text-primary);display:flex;font-size:1.25rem;font-weight:var(--font-weight-semibold);gap:.5rem;margin:0}.projects-toggle{display:flex;gap:var(--spacing-sm)}.toggle-btn{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.toggle-btn:active{transform:translateY(1px)}.toggle-btn:disabled{cursor:not-allowed;opacity:.5}.toggle-btn:hover:not(:disabled){background:var(--color-background);border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.toggle-btn-all{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-background)}.toggle-btn-all:hover:not(:disabled){color:var(--color-background)}.toggle-btn-recent{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-background)}.toggle-btn-recent:hover:not(:disabled){background:var(--color-brand-dark);color:var(--color-background)}.loading-indicator{color:var(--color-text-light);font-size:.875rem;font-weight:var(--font-weight-regular)}.projects-loading{align-items:center;color:var(--color-text-light);display:flex;justify-content:center;padding:2rem}.projects-empty{color:var(--color-text-light);padding:2rem;text-align:center}.projects-empty p{font-size:.875rem;margin:0}.projects-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1rem}.project-item{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-card);cursor:pointer;display:flex;flex-direction:column;padding:1rem;position:relative;text-align:center;transition:all .2s ease}.project-thumbnail{align-items:center;background:var(--color-canvas-bg);border-radius:var(--radius-sm);display:flex;height:60px;justify-content:center;margin-bottom:.75rem;overflow:hidden;width:60px}.project-placeholder{align-items:center;color:var(--color-text-light);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute}.project-name{color:var(--color-text-primary);font-size:.875rem;font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);margin-bottom:.25rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-date{color:var(--color-text-light);font-size:.75rem;font-weight:var(--font-weight-regular)}.project-info{align-items:center;display:flex;flex:1;flex-direction:column;min-width:0}.delete-project-btn{opacity:0;position:absolute;right:var(--spacing-2);top:var(--spacing-2);transform:scale(.8);z-index:2}.recent-project-item:hover .delete-project-btn{opacity:1;transform:scale(1)}.remix-generation-btn{bottom:var(--spacing-2);left:var(--spacing-2);opacity:0;position:absolute;transform:scale(.8);z-index:2}.recent-project-item:hover .remix-generation-btn{opacity:1;transform:scale(1)}.favourite-generation-btn{bottom:var(--spacing-2);opacity:0;position:absolute;right:var(--spacing-2);transform:scale(.8);transition:all .2s ease;z-index:2}.favourite-generation-btn.is-favourited,.recent-project-item:hover .favourite-generation-btn{opacity:1;transform:scale(1)}.edit-upload-btn{opacity:0;position:absolute;right:var(--spacing-2);top:calc(var(--spacing-2) + 32px);transform:scale(.8);z-index:2}.recent-project-item:hover .edit-upload-btn{opacity:1;transform:scale(1)}.loading-spinner{animation:spin 1s linear infinite;display:inline-block}.welcome-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);justify-content:center;margin:var(--spacing-2xl) 0}.welcome-action-btn.btn.btn-primary{align-items:center;flex-direction:row;gap:var(--spacing-sm);padding:var(--spacing-lg) var(--spacing-xl)}.welcome-action-btn.btn.btn-primary svg,.welcome-action-btn.btn.btn-primary .fa-icon-wrapper,.welcome-action-btn.btn.btn-primary .fa-icon-wrapper svg{color:var(--color-text-on-brand)!important;fill:currentcolor!important}@media(max-width:768px){.welcome-title{font-size:var(--font-size-2xl)}.welcome-chat-container .search-bar{max-width:100%}.welcome-actions{align-items:center;flex-direction:column}.welcome-action-btn.btn.btn-primary{max-width:300px;width:100%}.recent-projects-grid{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.recent-project-name{font-size:.8rem}.recent-project-date{font-size:.7rem}}.recent-projects{background:var(--color-white);border-radius:var(--radius-card);margin:2rem auto;margin-bottom:var(--spacing-2xl);max-width:1000px;padding:var(--spacing-6)}body.dark-theme .recent-projects,[data-theme=dark] .recent-projects{background:var(--color-surface)}.recent-projects-header{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.recent-projects-header-row{align-items:center;display:flex;justify-content:space-between}.recent-projects-header-actions{align-items:center;display:flex;gap:var(--spacing-sm);margin-left:auto}.recent-projects-title{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0}.collapse-recent-work-btn{transform:rotate(180deg)}.collapse-recent-work-btn.collapsed{transform:rotate(0)}.recent-projects.collapsed .recent-projects-content{display:none}.recent-projects-grid{display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:var(--spacing-lg)}.recent-project-item{align-items:flex-start;cursor:pointer;display:flex;flex-direction:column;position:relative;transition:all .2s ease}.recent-project-thumbnail{aspect-ratio:var(--aspect-ratio-3-2);background-image:repeating-conic-gradient(var(--color-neutral-50) 0% 25%,var(--color-sage-gray-50) 0% 50%);background-position:0 0;background-repeat:repeat;background-size:30px 30px;border-radius:var(--radius-md);flex-shrink:0;overflow:hidden;position:relative;width:100%}.recent-project-thumbnail:after{background:linear-gradient(180deg,var(--color-black-alpha-400) 0%,transparent 60%);border-radius:inherit;content:"";top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .2s ease;z-index:1}.recent-project-item:hover .recent-project-thumbnail:after{opacity:1}.thumbnail-image{height:100%;left:0;object-fit:contain;position:absolute;top:0;transition:opacity .3s ease;width:100%}.thumbnail-image.loading{opacity:0}.thumbnail-image.loaded{opacity:1}.thumbnail-loading-skeleton{border-radius:var(--radius-sm);height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.skeleton-shimmer{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent 0%,var(--color-white-alpha-400) 50%,transparent 100%);height:100%;width:100%}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}body.dark-theme .toggle-btn:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-alabaster);color:var(--color-alabaster)}body.dark-theme .recent-project-thumbnail,.dark-theme .recent-project-thumbnail,[data-theme=dark] .recent-project-thumbnail{background-image:repeating-conic-gradient(var(--color-neutral-700) 0% 25%,var(--color-neutral-800) 0% 50%)}body.dark-theme .thumbnail-loading-skeleton,.dark-theme .thumbnail-loading-skeleton,[data-theme=dark] .thumbnail-loading-skeleton{background:var(--color-background-tertiary, #2a2a2a)}body.dark-theme .skeleton-shimmer,.dark-theme .skeleton-shimmer,[data-theme=dark] .skeleton-shimmer{background:linear-gradient(90deg,transparent 0%,var(--color-white-alpha-100) 50%,transparent 100%)}.recent-project-item.opening{opacity:.7;pointer-events:none}.opening-overlay{align-items:center;background:var(--color-black-alpha-400);border-radius:var(--radius-sm);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:10}.opening-spinner{color:var(--color-background)}.opening-spinner svg{animation:spin 1s linear infinite}.recent-project-info{align-items:flex-start;display:flex;flex-direction:column;min-width:0;padding-top:var(--spacing-2);width:100%}.recent-project-name{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.3;margin-bottom:var(--spacing-xs);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-projects-loading{align-items:center;color:var(--color-text-light);display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-3xl)}.recent-projects-empty{color:var(--color-text-light);padding:var(--spacing-3xl);text-align:center}.recent-projects-empty p{font-size:var(--font-size-base);margin:0}.recent-tabs{display:flex;gap:var(--spacing-xs)}.tab-btn{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);outline:none;padding:var(--spacing-xs) var(--spacing-sm);transition:all .2s ease}.tab-btn:hover{background:var(--color-brand-lighter);border-color:var(--color-brand-secondary);color:var(--color-text-primary)}.tab-btn.active{background:var(--color-brand-secondary);border-color:var(--color-brand-secondary);box-shadow:none;color:var(--color-background);outline:none}.tab-btn.active:hover{background:var(--color-brand-secondary);border-color:var(--color-brand-secondary);box-shadow:none;outline:none}.tab-btn:focus{box-shadow:none;outline:none}.template-suggestions{width:100%}.template-suggestions .heading{margin-bottom:var(--spacing-md)}.template-suggestions .pagination{justify-content:center;margin-bottom:var(--spacing-md)}.template-suggestions .btn{display:block;margin:0 auto}.template-suggestions-grid{display:grid;gap:var(--spacing-md);grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--spacing-md)}@media(max-width:768px){.template-suggestions-grid{gap:var(--spacing-sm);grid-template-columns:1fr}}.welcome-footer{align-self:stretch;background:var(--color-brand-primary);color:var(--color-alabaster);font-size:var(--font-size-sm);margin-top:0;padding:var(--spacing-xl);text-align:center;width:100%}body.dark-theme .tab-btn{background:var(--color-surface)}body.dark-theme .tab-btn:hover{background:var(--color-surface-hover);border-color:var(--color-brand-secondary);color:var(--color-text-primary)}body.dark-theme .tab-btn.active,body.dark-theme .tab-btn.active:hover{color:var(--color-alabaster)}.advanced-zoom-controls{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);bottom:20px;box-shadow:var(--shadow-elevated);padding:var(--spacing-3);position:fixed;right:20px;z-index:1000}.zoom-controls-container{align-items:center;display:flex;gap:var(--spacing-2)}.zoom-btn{align-items:center;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;height:32px;justify-content:center;min-width:32px;padding:var(--spacing-2);transition:all .2s ease}.zoom-btn:hover{background:none}.zoom-btn:active{transform:scale(.95)}.zoom-slider-container{align-items:center;display:flex;gap:var(--spacing-2);min-width:120px}.zoom-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;flex:1;height:4px;outline:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-brand-primary);border:2px solid var(--color-surface);border-radius:50%;cursor:pointer;height:16px;width:16px}.zoom-slider::-moz-range-thumb{background:var(--color-brand-primary);border:2px solid var(--color-surface);border-radius:50%;cursor:pointer;height:16px;width:16px}.zoom-percentage{color:var(--color-brand-primary);font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);min-width:40px;text-align:center}body.dark-theme .zoom-percentage{color:var(--color-alabaster)}.projects-modal{gap:0;height:80vh;max-width:1200px;padding:0;width:90vw}.projects-modal .modal-header{padding:var(--spacing-6);padding-bottom:0}.projects-modal .modal-controls{align-items:center;display:flex;gap:var(--spacing-3);padding:var(--spacing-4) var(--spacing-6)}.projects-modal .modal-search-bar{flex:1}.projects-modal .sort-dropdown-trigger{flex-shrink:0;min-width:150px;width:auto}.projects-modal .modal-footer{border-top:1px solid var(--color-border);padding:var(--spacing-4) var(--spacing-6)}.projects-modal .modal-body{flex:1;overflow-y:auto;padding:0 var(--spacing-6) var(--spacing-6)}.projects-modal .loading-container{align-items:center;color:var(--color-text-secondary);display:flex;flex:1;flex-direction:column;justify-content:center;min-height:100%}.projects-modal .loading-spinner{animation:spin 1s linear infinite;border:3px solid var(--color-border);border-radius:50%;border-top:3px solid var(--color-brand-primary);height:40px;margin-bottom:var(--spacing-md);width:40px}.projects-modal .empty-state{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;text-align:center}.projects-modal .empty-state svg{margin-bottom:var(--spacing-lg);opacity:.5}.projects-modal .empty-state h3{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-sm) 0}.projects-modal .empty-state p{font-size:var(--font-size-sm);line-height:var(--line-height-normal);margin:0}.collection-create-thumbnail{align-items:center;border:2px dashed var(--color-border);display:flex;justify-content:center}.recent-project-item:hover .collection-create-thumbnail{border-color:var(--color-brand-primary)}.recent-project-item:hover .collection-create-thumbnail svg{color:var(--color-brand-primary)}.collection-detail-header{align-items:center;display:flex;gap:var(--spacing-3);margin-bottom:var(--spacing-4)}.collection-detail-title{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.collection-detail-count{font-size:var(--font-size-sm)}.collection-inline-edit{background:var(--color-surface-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-primary);font-family:inherit;font-size:var(--font-size-sm);outline:none;padding:var(--spacing-1) var(--spacing-2);width:100%}.collection-inline-edit:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-brand-primary) 25%,transparent)}.collection-create-input{font-size:var(--font-size-base);padding:var(--spacing-2) var(--spacing-3)}.save-to-collection-btn{left:var(--spacing-2);opacity:0;position:absolute;top:var(--spacing-2);z-index:2}.recent-project-item:hover .save-to-collection-btn{opacity:1}.remix-generation-btn{bottom:var(--spacing-2);left:var(--spacing-2);opacity:0;position:absolute;z-index:2}.recent-project-item:hover .remix-generation-btn{opacity:1}.edit-generation-btn{left:calc(var(--spacing-2) + 32px);opacity:0;position:absolute;top:var(--spacing-2);z-index:2}.recent-project-item:hover .edit-generation-btn{opacity:1}.collection-picker-list{display:flex;flex-direction:column;gap:var(--spacing-1);max-height:240px;overflow-y:auto}.collection-picker-item{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);text-align:left;width:100%}.collection-picker-item:hover{background:var(--color-surface-secondary);border-color:var(--color-border)}.collection-picker-item svg{flex-shrink:0}.collection-picker-title{color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-picker-count{flex-shrink:0;font-size:var(--font-size-xs)}.collection-picker-empty{font-size:var(--font-size-sm);padding:var(--spacing-3);text-align:center}.collection-picker-create{border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-2);margin-top:var(--spacing-3);padding-top:var(--spacing-3)}.collection-picker-create .collection-inline-edit{flex:1}.collection-breadcrumbs{align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:var(--spacing-1);min-width:0}.collection-breadcrumb-item{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-1)}.collection-breadcrumb-item:hover:not(:disabled){color:var(--color-brand-primary)}.collection-breadcrumb-item--active{color:var(--color-text-primary);cursor:default;font-weight:var(--font-weight-semibold)}.collection-breadcrumb-item:not(:last-child):after{content:"›";margin-left:var(--spacing-1)}@media(max-width:768px){.projects-modal{height:90vh;width:95vw}.projects-modal .modal-controls{flex-direction:column;gap:var(--spacing-md)}}.mobile-block-screen{align-items:center;background:var(--color-background);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:var(--spacing-6);position:fixed;z-index:9999}.mobile-block-content{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-4);max-width:360px;text-align:center}.mobile-block-logo{color:var(--color-brand-primary)}.mobile-block-heading{color:var(--color-text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}.mobile-block-message{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin:0}.ai-edit-panel{padding:var(--spacing-4)}.selected-layer-info{align-items:center;background:var(--color-brand-light);border-radius:var(--radius-sm);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-2);margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3)}.layer-indicator{font-size:var(--text-base-size)}.layer-name{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.layer-warning{font-weight:var(--font-weight-medium)}.no-selection-info{background:var(--color-background);border:1px dashed var(--color-border);border-radius:var(--radius-sm);margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);text-align:center}.selection-hint{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.edit-types-section{margin-bottom:var(--spacing-5)}.edit-types-grid{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(2,1fr);margin-top:var(--spacing-3)}.edit-type-btn{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-1);padding:var(--spacing-3) var(--spacing-2);text-align:center;transition:all .2s ease}.edit-type-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.edit-type-btn.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);color:var(--color-brand-secondary)}.edit-type-icon{font-size:var(--font-size-xl)}.edit-type-label{font-size:var(--text-xs-size);font-weight:var(--font-weight-medium)}.edit-prompt-section{margin-bottom:var(--spacing-5)}.edit-prompt-input{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:inherit;font-size:var(--text-sm-size);margin-top:var(--spacing-2);min-height:80px;padding:var(--spacing-3);resize:vertical;width:100%}.edit-prompt-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px var(--color-focus-ring);outline:none}.edit-prompt-counter{color:var(--color-text-secondary);font-size:var(--text-xs-size);margin-bottom:var(--spacing-sm);margin-top:var(--spacing-1);text-align:right}.advanced-ai-tools-section{margin-bottom:var(--spacing-5)}.advanced-tools-grid{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(2,1fr);margin-top:var(--spacing-3)}.advanced-tool-btn{align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-1);padding:var(--spacing-3) var(--spacing-2);text-align:center;transition:all .2s ease}.advanced-tool-btn:hover{background:var(--color-surface);border-color:var(--color-brand-primary)}.advanced-tool-btn.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);color:var(--color-brand-secondary)}.advanced-tool-btn small{color:var(--color-text-secondary);font-size:var(--text-2xs-size);margin-top:2px}.coming-soon-notice{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-top:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);text-align:center}.coming-soon-notice p{color:var(--color-text-secondary);font-size:var(--text-xs-size);margin:0}.instagram-filters-section{margin-bottom:var(--spacing-5)}.filters-grid{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(3,1fr);margin-top:var(--spacing-3)}.filters-grid .template-title{font-size:var(--text-2xs-size)}.filters-grid .template-info{padding-top:var(--spacing-1)}.apply-edit-btn{align-items:center;background:var(--color-brand-primary);border:none;border-radius:var(--radius-button);color:var(--color-background);cursor:pointer;display:flex;font-weight:var(--font-weight-semibold);gap:var(--spacing-2);justify-content:center;padding:var(--spacing-3);transition:all .2s ease;width:100%}.apply-edit-btn:disabled{cursor:not-allowed;opacity:.6}.apply-edit-btn:hover:not(:disabled){background:var(--color-brand-dark)}.apply-edit-btn.processing{cursor:not-allowed}.loading-spinner{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top:2px solid var(--color-background);height:16px;width:16px}body.dark-theme .edit-type-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .edit-type-btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}body.dark-theme .edit-type-btn.active{background:var(--color-brand-light);border-color:var(--color-brand-secondary);color:var(--color-brand-secondary)}body.dark-theme .edit-prompt-input,body.dark-theme .quick-action-btn{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}body.dark-theme .quick-action-btn:hover{background:var(--color-background);border-color:var(--color-brand-primary)}@media(max-width:768px){.edit-types-grid,.quick-actions-grid{grid-template-columns:1fr}.filters-grid{grid-template-columns:repeat(2,1fr)}.ai-edit-panel{padding:var(--spacing-3)}}.magic-expand-options-panel{animation:slide-down .2s ease-out;border:1px solid var(--color-border);border-radius:var(--radius-md);margin-top:var(--spacing-3);padding:var(--spacing-4)}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.magic-expand-directions{display:grid;gap:var(--spacing-2);grid-template-columns:1fr 1fr;margin-bottom:var(--spacing-3)}.magic-expand-direction-btn{align-items:center;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #0ea5e9;border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-1);overflow:hidden;padding:var(--spacing-3) var(--spacing-2);position:relative;text-align:center;transition:all .2s ease}.magic-expand-direction-btn:before{background:linear-gradient(90deg,transparent,rgb(255 255 255 / 20%),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.magic-expand-direction-btn:hover:before{left:100%}.magic-expand-direction-btn:hover{background:linear-gradient(135deg,#0ea5e9,#0284c7);border-color:#0284c7;box-shadow:0 4px 12px #00000026}.magic-expand-direction-btn.active{background:linear-gradient(135deg,#0ea5e9,#0284c7);border-color:#0284c7;box-shadow:0 2px 8px #00000026;color:var(--color-background)}.magic-expand-direction-btn.active .direction-text{color:var(--color-background)}.magic-expand-direction-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.magic-expand-direction-btn:disabled:hover{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:#0ea5e9;box-shadow:none;transform:none}.magic-expand-direction-btn .direction-icon{font-size:var(--font-size-xl)}.magic-expand-direction-btn .direction-text{color:var(--color-text-primary);font-weight:var(--font-weight-medium);text-transform:capitalize}.magic-expand-custom-prompt{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-4);padding:var(--spacing-3)}.custom-prompt-label{color:var(--color-text-secondary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-2)}.custom-prompt-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:inherit;font-size:var(--font-size-sm);min-height:60px;padding:var(--spacing-2) var(--spacing-3);resize:vertical;width:100%}.custom-prompt-input:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 2px #3b82f61a;outline:none}.custom-prompt-counter{font-size:var(--font-size-xs);margin-top:var(--spacing-1);text-align:right}.ai-edit-tip{background-color:var(--color-surface-hover, #f9fafb);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-xs-size);line-height:1.4;margin:var(--spacing-3) 0 0 0;padding:10px var(--spacing-3)}body.dark-theme .ai-edit-tip{background-color:var(--color-surface)}.layer-styles-section{margin-bottom:0}.layer-styles-controls{margin-top:var(--spacing-3)}.layer-styles-controls .slider-control label{font-size:.75rem;min-width:52px}.layer-styles-effect-section{background:var(--color-white);border-radius:var(--radius-card, var(--radius-md));margin-bottom:var(--spacing-sm);padding:var(--spacing-sm)}[data-theme=dark] .layer-styles-effect-section,body.dark-theme .layer-styles-effect-section{background:var(--color-surface)}.layer-styles-effect-section .effect-controls{padding:0}.layer-styles-effect-section .effect-controls .slider-control{margin-bottom:var(--spacing-xs)}.layer-styles-effect-section .reset-effect-btn{margin-top:var(--spacing-xs)}.layer-styles-color-section{margin-bottom:var(--spacing-xs)}.layer-styles-color-label{color:var(--text-secondary);display:block;font-size:.75rem;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-1)}.magic-fill-overlay{align-items:flex-start;display:flex;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--spacing-5);pointer-events:none;position:fixed;z-index:1000}.magic-fill-overlay-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-black-alpha-500);top:0;right:0;bottom:0;left:0;pointer-events:auto;position:absolute}.magic-fill-overlay-content{max-height:90vh;max-width:90vw;overflow:auto;pointer-events:auto;position:relative;z-index:1001}.magic-fill-panel{border-radius:var(--radius-lg);max-width:320px;padding:var(--spacing-5);width:100%}.magic-fill-panel .panel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-5)}.magic-fill-panel .panel-header h3{color:var(--color-text-primary);font-size:var(--text-lg-size);font-weight:var(--font-weight-semibold);margin:0}.magic-fill-panel .close-btn{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-xl);line-height:1;padding:var(--spacing-1)}.magic-fill-panel .close-btn:hover{color:var(--color-text-primary)}.magic-fill-panel .brush-section{margin-bottom:var(--spacing-5)}.magic-fill-panel .brush-label{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-3)}.magic-fill-panel .brush-label span:first-child{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-medium)}.magic-fill-panel .brush-size-label{color:var(--color-text-secondary);font-size:var(--text-xs-size)}.magic-fill-panel .brush-preview-container{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;justify-content:center;margin-bottom:var(--spacing-4);padding:var(--spacing-5)}.magic-fill-panel .brush-preview{background:#ffb3ba;border-radius:50%;opacity:.8}.magic-fill-panel .brush-size-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:3px;height:6px;outline:none;width:100%}.magic-fill-panel .brush-size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-brand-primary);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-100);cursor:pointer;height:20px;width:20px}.magic-fill-panel .brush-size-slider::-moz-range-thumb{background:var(--color-brand-primary);border:2px solid var(--color-background);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-100);cursor:pointer;height:20px;width:20px}.magic-fill-panel .text-prompt-section{margin-bottom:var(--spacing-5)}.magic-fill-panel .text-prompt-section label{color:var(--color-text-primary);display:block;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-2)}.magic-fill-panel .text-prompt-textarea{background:var(--color-background);border:2px solid var(--color-brand-primary);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:inherit;font-size:var(--text-sm-size);min-height:100px;outline:none;padding:var(--spacing-3);resize:vertical;transition:border-color .2s ease;width:100%}.magic-fill-panel .create-btn{align-items:center;background:var(--color-brand-primary);border:none;border-radius:var(--radius-button);color:var(--color-background);cursor:pointer;display:flex;font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);gap:var(--spacing-2);justify-content:center;padding:var(--spacing-3) var(--spacing-4);transition:all .2s ease;width:100%}.magic-fill-panel .create-btn:disabled{cursor:not-allowed;opacity:.6}.magic-fill-panel .loading-spinner{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top:2px solid currentcolor;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body.dark-theme .magic-fill-panel{background:var(--color-surface);border:1px solid var(--color-border)}body.dark-theme .magic-fill-panel .brush-size-slider{background:var(--color-border)}body.dark-theme .magic-fill-panel .brush-size-slider::-webkit-slider-thumb{background:var(--color-brand-primary);border-color:var(--color-surface)}body.dark-theme .magic-fill-panel .brush-size-slider::-moz-range-thumb{background:var(--color-brand-primary);border-color:var(--color-surface)}body.dark-theme .magic-fill-panel .prompt-textarea,body.dark-theme .magic-fill-panel .clear-btn{background:var(--color-background);border-color:var(--color-border);color:var(--color-text-primary)}.magic-fill-tip{background-color:var(--color-surface-hover, #f9fafb);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-xs-size);line-height:1.4;margin:var(--spacing-4) 0 0 0;padding:10px var(--spacing-3)}body.dark-theme .magic-fill-tip{background-color:var(--color-surface)}@media(max-width:768px){.magic-fill-panel{max-width:100%;padding:var(--spacing-4)}.magic-fill-panel .action-buttons{flex-direction:column}.magic-fill-panel .clear-btn,.magic-fill-panel .apply-btn{width:100%}}.sticker-panel{padding:var(--spacing-5)}.sticker-panel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-5)}.sticker-panel-header-content{align-items:center;display:flex;gap:var(--spacing-2)}.sticker-panel-title{font-size:var(--text-lg-size);font-weight:var(--font-weight-semibold);margin:0}.sticker-weight-section{margin-bottom:var(--spacing-5)}.sticker-weight-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-3)}.sticker-weight-label{color:#333;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium)}.sticker-weight-badge{background-color:var(--bg-hover);border-radius:var(--radius-sm);color:#333;font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);padding:var(--spacing-1) var(--spacing-2)}.sticker-slider-container{height:15px;margin-bottom:var(--spacing-2);position:relative}.sticker-slider-track{background-color:var(--color-border);border-radius:2px;height:3px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.sticker-slider-fill{background-color:var(--color-brand-secondary);border-radius:2px;height:3px;left:0;position:absolute;top:50%;transform:translateY(-50%)}.sticker-slider-marker{background-color:var(--color-neutral-300);border-radius:50%;cursor:pointer;height:8px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .2s;width:8px;z-index:1}.sticker-slider-marker.active{background-color:var(--color-brand-secondary)}.sticker-slider-marker:hover{transform:translate(-50%,-50%) scale(1.2)}.sticker-slider-thumb{background-color:var(--color-brand-secondary);border-radius:50%;box-shadow:0 2px 4px var(--color-black-alpha-200);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;z-index:2}.sticker-slider-labels{color:var(--color-text-secondary);display:flex;font-size:var(--text-xs-size);justify-content:space-between}.sticker-step-labels{display:flex;justify-content:space-between;margin-top:var(--spacing-2)}.sticker-step-label{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-xs-size);padding:var(--spacing-1) 0;transition:color .2s;white-space:nowrap}.sticker-step-label:hover{color:var(--color-text-primary)}.sticker-step-label.active{color:var(--color-brand-secondary);font-weight:var(--font-weight-semibold)}.sticker-color-section{margin-bottom:var(--spacing-5)}.sticker-color-label{color:#333;display:block;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-3)}.sticker-create-btn{background-color:var(--color-brand-primary);border:none;border-radius:var(--radius-button);color:var(--color-background);cursor:pointer;font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold);margin-top:var(--spacing-2);padding:var(--spacing-3);transition:background-color .2s;width:100%}.sticker-button-group{display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:var(--spacing-2)}.sticker-button-group .sticker-create-btn{margin-top:0}.sticker-create-btn:disabled{background-color:var(--color-neutral-400);cursor:not-allowed}.sticker-create-btn:hover:not(:disabled){background-color:var(--color-brand-dark)}.sticker-clear-btn{background-color:transparent;border:1px solid var(--color-border);border-radius:var(--radius-button);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);padding:10px;transition:all .2s;width:100%}.sticker-clear-btn:disabled{cursor:not-allowed;opacity:.5}.sticker-clear-btn:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-text-secondary)}.sticker-empty-state{background-color:#fff3cd;border-radius:var(--radius-md);color:#856404;padding:var(--spacing-4)}.sticker-empty-state p{font-size:var(--text-sm-size);margin:0}.sticker-divider{border:none;border-top:1px solid var(--color-border);margin:var(--spacing-5) 0}.sticker-remove-bg-section{margin-bottom:var(--spacing-5)}.sticker-checkbox-label{align-items:center;color:#333;cursor:pointer;display:flex;font-size:var(--text-sm-size);font-weight:var(--font-weight-medium);gap:var(--spacing-2);-webkit-user-select:none;user-select:none}.sticker-checkbox{accent-color:var(--color-brand-secondary);cursor:pointer;height:18px;width:18px}.sticker-checkbox-help{color:var(--color-text-secondary);font-size:var(--text-xs-size);font-style:italic;margin:var(--spacing-2) 0 0 26px}body.dark-theme .sticker-weight-label,body.dark-theme .sticker-color-label{color:var(--color-text-primary)}body.dark-theme .sticker-weight-badge{background-color:var(--color-surface);color:var(--color-text-primary)}body.dark-theme .sticker-slider-track{background-color:var(--color-border)}body.dark-theme .sticker-slider-labels{color:var(--color-text-secondary)}body.dark-theme .sticker-empty-state{background-color:#fff3cd1a;color:var(--color-text-secondary)}.sticker-tip{background-color:var(--color-surface-hover, #f9fafb);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-xs-size);line-height:1.4;margin:var(--spacing-4) 0 0 0;padding:10px var(--spacing-3)}body.dark-theme .sticker-tip{background-color:var(--color-surface)}.add-image-panel{display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute}.library-search-section{display:flex;flex-direction:column;flex-shrink:0;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.library-search-section .style-filter-select{width:100%}.library-search-section .style-filter-select .dropdown__trigger{font-size:var(--text-xs-size);min-height:32px;padding:6px 12px}.library-tabs{display:flex;flex-shrink:0;gap:6px;padding:var(--spacing-xs) var(--spacing-md)}.library-grid{align-content:start;display:grid;flex:1;gap:var(--spacing-2);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));min-height:0;overflow-y:auto;padding:var(--spacing-sm) var(--spacing-md)}.library-grid--modal{gap:var(--spacing-3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.library-grid::-webkit-scrollbar{width:6px}.library-grid::-webkit-scrollbar-track{background:var(--color-surface)}.library-grid::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.library-grid::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}.library-image-card{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;padding-bottom:100%;position:relative}.library-image-card img{height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover;position:absolute;transition:transform .25s ease;width:100%}.library-image-card:hover img{transform:scale(1.05)}.library-image-card .image-placeholder{align-items:center;color:var(--color-text-light);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute}.library-image-overlay{align-items:center;background:#00000073;color:var(--color-background);cursor:pointer;display:flex;flex-direction:column;font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);top:0;right:0;bottom:0;left:0;justify-content:center;opacity:0;padding:var(--spacing-2);position:absolute;text-align:center;transition:opacity .2s ease}.library-image-card:hover .library-image-overlay,.library-image-card.loading .library-image-overlay{opacity:1}.library-image-card .favourite-generation-btn{height:22px;min-height:22px;min-width:22px;opacity:0;padding:0;position:absolute;right:var(--spacing-1);top:var(--spacing-1);transform:scale(.8);transition:all .2s ease;width:22px;z-index:3}.library-image-card .favourite-generation-btn svg{height:12px;width:12px}.library-image-card .favourite-generation-btn.is-favourited,.library-image-card:hover .favourite-generation-btn{opacity:1;transform:scale(1)}.library-image-overlay .overlay-label{color:var(--color-background);font-size:var(--text-xs-size);font-weight:var(--font-weight-semibold);line-height:1.3}.library-image-overlay .asset-style-badge{background:#000000a6;border-radius:var(--radius-sm);bottom:6px;color:var(--color-background);font-size:9px;left:6px;line-height:var(--line-height-tight);max-width:calc(100% - 12px);overflow:hidden;padding:2px 6px;position:absolute;text-overflow:ellipsis;white-space:nowrap}.add-image-panel .expand-library-btn{flex-shrink:0;margin:var(--spacing-sm) var(--spacing-md) 0;width:calc(100% - 2 * var(--spacing-md))}.library-modal{display:flex;flex-direction:column}.library-modal .modal-header{gap:var(--spacing-md)}.library-modal-controls{align-items:center;display:flex;flex:1;gap:var(--spacing-sm);max-width:500px}.library-modal-controls .style-filter-select{flex-shrink:0;width:180px}.library-modal-controls .style-filter-select .dropdown__trigger{font-size:var(--text-xs-size);min-height:32px;padding:var(--spacing-2) var(--spacing-3)}.library-modal .modal-body{display:flex;flex-direction:column;overflow:hidden;padding:0}.library-modal .library-tabs{padding:var(--spacing-sm) var(--spacing-lg)}.library-modal .library-grid{padding:0 var(--spacing-lg) var(--spacing-lg)}.library-modal .modal-footer{border-top:1px solid var(--color-border);padding:var(--spacing-3) 0}.library-unified-results{display:flex;flex:1;flex-direction:column;gap:var(--spacing-md);min-height:0;overflow-y:auto;padding:var(--spacing-sm) var(--spacing-md)}.library-unified-section{display:flex;flex-direction:column;gap:var(--spacing-xs)}.library-unified-section-header{align-items:center;display:flex;justify-content:space-between}.library-unified-section-title{color:var(--color-text-primary);font-size:var(--text-sm-size);font-weight:var(--font-weight-semibold)}.library-unified-more-btn{background:none;border:none;color:var(--color-brand-primary);cursor:pointer;font-size:var(--text-xs-size);font-weight:var(--font-weight-medium);padding:0}.library-unified-more-btn:hover{text-decoration:underline}.library-unified-section-grid{display:grid;gap:var(--spacing-2);grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.library-unified-section-loading{align-items:center;display:flex;justify-content:center;padding:var(--spacing-md) 0}.library-unified-results .empty-state{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;padding:40px var(--spacing-5);text-align:center}.library-unified-results .empty-state h4{color:var(--color-text-primary);margin:0 0 var(--spacing-2) 0}.library-unified-results .empty-state p{font-size:var(--text-xs-size);margin:0}.library-grid:has(.loading-container),.library-grid:has(.empty-state){align-items:center;display:flex;justify-content:center}.library-grid .loading-container{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;padding:40px var(--spacing-5)}.library-grid .ui-spinner{margin-bottom:var(--spacing-3)}.library-grid .empty-state{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;grid-column:1 / -1;justify-content:center;padding:40px var(--spacing-5);text-align:center}.library-grid .empty-state h4{color:var(--color-text-primary);margin:0 0 var(--spacing-2) 0}.library-grid .empty-state p{font-size:var(--text-xs-size);margin:0}body.dark-theme .library-image-card{background:var(--color-background)}@media(max-width:768px){.library-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.library-grid--modal{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.library-modal-controls{flex-direction:column;max-width:none}.library-modal-controls .style-filter-select{width:100%}}.generate-panel{display:flex;flex-direction:column;height:100%;padding:0;position:relative}.generate-panel .panel-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-lg);overflow-y:auto;padding:var(--spacing-lg)}.generate-panel .generation-loader-overlay{align-items:center;background:var(--color-white-alpha-900);border-radius:var(--radius-sm);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute;z-index:100}body.dark-theme .generate-panel .generation-loader-overlay{background:#111827e5}.generate-panel h4{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-sm) 0}.generate-panel .suggestions-section{display:flex;flex-direction:column}.generate-panel .suggestions-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}.generate-panel .suggestions-header h4{margin:0}.generate-panel .suggestions-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.generate-panel .suggestion-btn{justify-content:flex-start;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.generate-panel .style-selection{display:flex;flex-direction:column}.generate-panel .no-styles{color:var(--color-text-light);font-size:var(--font-size-sm);grid-column:1 / -1;padding:var(--spacing-xl);text-align:center}.generate-panel .loading{color:var(--color-text-light);font-size:var(--font-size-sm);padding:var(--spacing-lg);text-align:center}body.dark-theme .generate-panel{background:var(--color-surface)}@media(max-width:480px){.generate-panel .panel-content{padding:var(--spacing-md)}}.changelog-panel{background:var(--color-background);border-left:1px solid var(--color-border);box-shadow:var(--shadow-elevated);display:flex;flex-direction:column;height:calc(100vh - var(--top-bar-height, 80px));position:fixed;right:0;top:var(--top-bar-height, 80px);transform:translate(100%);transition:transform .3s ease;width:300px;z-index:1001}.changelog-panel.open{transform:translate(0)}.changelog-panel-header{align-items:center;border-bottom:1px solid var(--color-border);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4)}.changelog-panel-title{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}.changelog-panel-close{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-1);transition:all .15s ease}.changelog-panel-close:hover{background:var(--color-surface);color:var(--color-text-primary)}.changelog-content{flex:1;overflow-y:auto;padding:var(--spacing-2) 0}.changelog-empty{align-items:center;color:var(--color-text-secondary);display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-6) var(--spacing-4);text-align:center}.changelog-empty-icon{margin-bottom:var(--spacing-2);opacity:.4}.changelog-empty p{font-size:var(--text-xs-size);line-height:var(--text-xs-line-height);margin:0}.changelog-log-list{list-style:none;margin:0;padding:0}.changelog-log-item{align-items:flex-start;border-bottom:1px solid var(--color-black-alpha-50);border-left:3px solid transparent;display:flex;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:background .15s ease,opacity .15s ease}.changelog-log-item:last-child{border-bottom:none}.changelog-log-action{color:var(--color-text-primary);font-size:var(--text-xs-size);line-height:var(--text-xs-line-height)}.changelog-entry--current{background:var(--color-primary-alpha-10, rgb(246 189 96 / 10%));border-left-color:var(--color-primary, #f6bd60)}.changelog-entry--current .changelog-log-action{font-weight:var(--font-weight-semibold, 600)}.changelog-entry--future{opacity:.4}.changelog-entry--clickable{cursor:pointer}.changelog-entry--clickable:hover{background:var(--color-surface)}.changelog-entry--disabled{opacity:.3}.changelog-log-item:focus-visible{outline:2px solid var(--color-primary, #f6bd60);outline-offset:-2px}.changelog-log-time{color:var(--color-text-light);flex-shrink:0;font-size:var(--text-2xs-size);font-variant-numeric:tabular-nums;min-width:52px;white-space:nowrap}.changelog-footer{border-top:1px solid var(--color-border);flex-shrink:0;padding:var(--spacing-2) var(--spacing-4)}.changelog-clear-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-xs-size);padding:var(--spacing-1) var(--spacing-2);transition:all .15s ease;width:100%}.changelog-clear-btn:hover{background:var(--color-surface);border-color:var(--color-text-secondary);color:var(--color-text-primary)}body.dark-theme .changelog-entry--current{background:#f6bd6026}body.dark-theme .changelog-entry--clickable:hover{background:var(--color-surface-elevated)}@media(max-width:768px){.changelog-panel{width:260px}}.glyphs-panel{padding:var(--spacing-xs) 0}.glyphs-panel__grid{display:grid;gap:var(--spacing-1);grid-template-columns:repeat(auto-fill,32px);justify-content:center;max-height:min(240px,50vh);overflow-y:auto;overscroll-behavior:contain}.glyphs-panel__glyph.btn-round.btn-sm{font-size:16px;height:32px;line-height:1;min-width:unset;width:32px}.glyphs-panel__loading,.glyphs-panel__empty{font-size:var(--font-size-sm);padding:var(--spacing-md) 0;text-align:center}.feedback-btn{align-items:center;background:var(--color-brand-primary);border:none;border-radius:var(--radius-md);color:var(--color-background);cursor:pointer;display:flex;font-weight:var(--font-weight-semibold);gap:var(--spacing-2);margin:0 auto;padding:10px var(--spacing-5);transition:all .2s ease}.support-quick-actions{margin-top:var(--spacing-5)}html{font-family:var(--font-family-body)}body{background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-body);line-height:var(--line-height-normal);margin:0;padding:0}