/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-full{width:100%}.h-full,.size-full{height:100%}.min-h-screen{min-height:100vh}.w-fit{width:fit-content}.w-full{width:100%}.min-w-\[200px\]{min-width:200px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.touch-none{touch-action:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e+38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-transparent{border-color:#0000}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-foreground{background-color:var(--foreground)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-px{padding:1px}.text-center{text-align:center}.leading-none{--tw-leading:1;line-height:1}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--background)}.text-foreground{color:var(--foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-destructive\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}.dark\:invert:is(.dark *){--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:is(.dark *):hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:is(.dark *):hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}@media (hover:hover){a.\[a\&\]\:hover\:bg-accent:hover{background-color:var(--accent)}a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}}a.\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}:root{--font-inter:"Inter",sans-serif;--font-dm-sans:"DM Sans",sans-serif;--font-caveat:"Caveat",cursive;--bg-primary:#fff;--bg-secondary:#fffbf0;--bg-sidebar:#fff;--bg-canvas:#fffbf0;--bg-card:#fff;--bg-hover:#fff8e7;--text-primary:#2c3e50;--text-secondary:#5a6c7d;--text-tertiary:#8b9aab;--accent-primary:#ff6b35;--accent-secondary:#ff8c42;--accent-gradient:linear-gradient(135deg,#ff6b35,#ff8c42);--accent-blue:#ff6b35;--accent-purple:#ff8c42;--accent-orange:#ff6b35;--accent-orange-light:#ffe5d9;--border-light:#e8e8e8;--border-medium:#d0d0d0;--border-dark:#b0b0b0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--shadow-xl:0 20px 25px -5px #00000026;--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-inter);background:var(--bg-secondary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow:hidden}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-light);z-index:100;justify-content:space-between;height:64px;padding:0 24px;position:sticky;top:0}.app-header,.header-left{align-items:center;display:flex}.header-left{gap:12px}.sidebar-toggle-btn{background:var(--bg-card);border:1px solid var(--border-light);cursor:pointer;width:36px;height:36px;color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;padding:0;font-size:18px;transition:all .2s;display:flex}.sidebar-toggle-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);transform:scale(1.05)}.sidebar-toggle-btn .icon-closed,.sidebar-toggle-btn .icon-open{justify-content:center;align-items:center;transition:transform .2s;display:flex}.logo-container{gap:12px}.logo-container,.logo-icon{align-items:center;display:flex}.logo-icon{background:var(--accent-primary);color:#fff;border-radius:8px;justify-content:center;width:36px;height:36px;font-size:20px;box-shadow:0 2px 8px #ff6b354d}.logo-text{font-family:var(--font-dm-sans);color:var(--accent-primary);letter-spacing:-.5px;font-size:20px;font-weight:700}.header-right{align-items:center;gap:12px;display:flex}.header-btn{font-family:var(--font-dm-sans);cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.header-btn.secondary{color:var(--text-secondary);background:0 0}.header-btn.secondary:hover{color:var(--text-primary);background:var(--bg-hover)}.header-btn.primary{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px #ff6b354d}.header-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3566}.contextual-header-bar{background:var(--bg-card);border-bottom:1px solid var(--border-light);z-index:10;opacity:0;flex-shrink:0;align-items:center;width:100%;height:56px;margin-bottom:0;padding:0 24px;transition:transform .3s,opacity .3s;display:flex;position:relative;overflow:visible;transform:translateY(-100%);box-shadow:0 2px 8px #0000000d}.contextual-header-bar.slide-in{opacity:1;margin-bottom:16px;transform:translateY(0)}.contextual-header-bar.slide-out,.tool-header-bar{transform:translateY(-100%)}.tool-header-bar{background:var(--bg-card);border-bottom:1px solid var(--border-light);z-index:10;opacity:0;flex-shrink:0;align-items:center;width:100%;height:56px;margin-bottom:0;padding:0 24px;transition:transform .3s,opacity .3s;display:flex;position:relative;box-shadow:0 2px 8px #0000000d}.tool-header-bar.slide-in{opacity:1;margin-bottom:16px;transform:translateY(0)}.tool-line-style-select{border:1px solid var(--border-light);background:var(--bg-card);height:32px;color:var(--text-primary);border-radius:8px;outline:none;padding:0 10px;font-size:12px}.tool-line-style-select:focus,.tool-line-style-select:hover{border-color:var(--accent-primary)}.tool-line-style-select:focus{box-shadow:0 0 0 2px #ff6b3526}.tools-list{flex-direction:column;gap:8px;display:flex}.tool-btn{border:1px solid var(--border-light);background:var(--bg-card);width:100%;color:var(--text-primary);cursor:pointer;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;transition:all .2s;display:flex}.tool-btn:hover{background:var(--bg-hover);border-color:var(--border-medium);transform:translateY(-1px)}.tool-btn.active{border-color:var(--accent-primary);background:linear-gradient(135deg,var(--accent-orange-light),#ff6b350d);box-shadow:0 6px 16px #ff6b3526}.tool-icon{text-align:center;width:22px;font-size:18px}.tool-label{letter-spacing:-.1px;font-size:13px;font-weight:600}.richtext-overlay-root{pointer-events:auto;z-index:30}.richtext-overlay-editor{background:#fffffff2;border:2px solid #4a90e2cc;border-radius:10px;outline:none;width:100%;height:100%;padding:10px 12px;line-height:1.3;overflow:auto;box-shadow:0 10px 30px #0000001f}.richtext-overlay-editor:focus{border-color:#ff6b35e6;box-shadow:0 10px 30px #ff6b352e}.richtext-overlay-editor [data-uppercase=true]{letter-spacing:.3px}.header-control-group{scrollbar-width:thin;align-items:center;gap:16px;width:100%;display:flex;overflow:auto visible}.header-control-group::-webkit-scrollbar{height:4px}.header-control-group::-webkit-scrollbar-track{background:0 0}.header-control-group::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:2px}.header-control-item{flex-shrink:0;align-items:center;gap:8px;display:flex}.header-control-select{background:var(--bg-card);border:1px solid var(--border-light);font-family:var(--font-inter);color:var(--text-primary);cursor:pointer;box-sizing:border-box;border-radius:6px;width:100%;padding:8px 12px;font-size:13px;transition:all .2s}.font-selector-container{width:100%;position:relative}.font-selector-button{background:var(--bg-card);border:1px solid var(--border-light);width:100%;color:var(--text-primary);cursor:pointer;text-align:left;box-sizing:border-box;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;transition:all .2s;display:flex}.font-selector-button:focus,.font-selector-button:hover{border-color:var(--accent-primary)}.font-selector-button:focus{outline:none;box-shadow:0 0 0 2px #ff6b3526}.font-selector-text{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.font-selector-arrow{color:var(--text-tertiary);margin-left:8px;font-size:10px;transition:transform .2s}.font-selector-arrow.open{transform:rotate(180deg)}.font-selector-dropdown{background:var(--bg-card);border:1px solid var(--border-light);z-index:10000;border-radius:6px;width:100%;max-height:180px;position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.font-selector-option{width:100%;color:var(--text-primary);cursor:pointer;text-align:left;background:0 0;border:none;padding:10px 12px;font-size:13px;transition:background .15s;display:block}.font-selector-option:hover{background:var(--bg-hover)}.font-selector-option.selected{background:var(--accent-primary);color:#fff}.header-control-select:focus,.header-control-select:hover{border-color:var(--accent-primary)}.header-control-select:focus{outline:none;box-shadow:0 0 0 2px #ff6b3526}.header-control-size{background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;align-items:center;gap:4px;padding:2px;display:flex}.header-control-btn{font-family:var(--font-dm-sans);color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:6px 10px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.header-control-btn:hover:not(:disabled){background:var(--bg-hover)}.header-control-btn:disabled{opacity:.4;cursor:not-allowed}.header-control-btn.active{background:var(--accent-primary);color:#fff}.header-control-btn.delete{color:#ef4444}.header-control-btn.delete:hover{background:#ef44441a}.header-control-value{text-align:center;min-width:40px;font-family:var(--font-dm-sans);color:var(--text-primary);font-size:13px;font-weight:600}.header-control-colors{align-items:center;gap:4px;display:flex}.header-control-color{cursor:pointer;border:2px solid #0000;border-radius:4px;flex-shrink:0;width:28px;height:28px;transition:all .2s;position:relative}.header-control-color:hover{transform:scale(1.1)}.header-control-color.active{border-color:#000;box-shadow:0 0 0 2px #fffc}.header-control-color-check{color:#fff;text-shadow:0 1px 2px #00000080;font-size:14px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header-control-align{background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;align-items:center;gap:2px;padding:2px;display:flex}.header-control-opacity,.header-control-roughness{align-items:center;gap:8px;min-width:120px;display:flex}.header-control-slider{background:var(--border-light);-webkit-appearance:none;border-radius:2px;outline:none;flex:1;height:4px}.header-control-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:all .2s}.header-control-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.header-control-slider::-moz-range-thumb{background:var(--accent-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;transition:all .2s}.header-control-slider::-moz-range-thumb:hover{transform:scale(1.2)}.slider-container{flex-direction:column;gap:6px;width:100%;display:flex;overflow:hidden}.slider-header{justify-content:space-between;align-items:center;display:flex}.slider-label{color:var(--text-secondary);font-size:13px}.slider-label,.slider-value{font-family:var(--font-dm-sans);font-weight:600}.slider-value{color:var(--accent-primary);font-size:11px}.slider-input{background:var(--border-light);appearance:none;cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:all .2s}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-input::-moz-range-thumb{background:var(--accent-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;transition:all .2s}.slider-input::-moz-range-thumb:hover{transform:scale(1.2)}.slider-minmax{font-family:var(--font-dm-sans);color:var(--text-tertiary);justify-content:space-between;font-size:11px;display:flex}.header-control-opacity-value,.header-control-roughness-value{text-align:right;min-width:40px}.header-control-label,.header-control-opacity-value,.header-control-roughness-value{font-family:var(--font-dm-sans);color:var(--text-secondary);font-size:12px;font-weight:500}.header-control-label{white-space:nowrap}.header-control-label-small{font-family:var(--font-dm-sans);color:var(--text-tertiary);white-space:nowrap;font-size:11px;font-weight:500}@media (max-width:768px){.contextual-header-bar,.tool-header-bar{height:48px;padding:0 16px}.header-control-group{gap:12px}.header-control-btn{min-width:28px;height:28px;font-size:12px}.header-control-select{min-width:100px;padding:4px 8px;font-size:12px}}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-light);flex-direction:row;flex-shrink:0;width:80px;height:100%;transition:width .3s,transform .3s,opacity .3s;display:flex;overflow:hidden}.sidebar.sidebar-content-visible.has-dialog{width:640px}.sidebar.sidebar-content-hidden.has-dialog,.sidebar.sidebar-content-visible{width:360px}.sidebar.sidebar-content-hidden{width:80px}.sidebar.sidebar-open{opacity:1;transform:translate(0)}.sidebar.sidebar-closed{opacity:0;border-right:none;width:0;transform:translate(-100%)}.sidebar-nav-panel{background:var(--bg-card);border-right:1px solid var(--border-light);flex-direction:column;flex-shrink:0;width:80px;min-height:100%;padding:12px 0;display:flex;overflow:hidden auto}.sidebar-nav-item{color:var(--text-secondary);font-family:var(--font-inter);cursor:pointer;text-align:center;background:0 0;border:none;border-left:3px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;padding:12px 8px;font-size:11px;font-weight:500;transition:all .2s;display:flex}.sidebar-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-nav-item.active{background:var(--bg-hover);color:var(--accent-primary);border-left-color:var(--accent-primary)}.sidebar-nav-icon{margin-bottom:2px;font-size:20px;line-height:1}.sidebar-nav-label{text-transform:uppercase;letter-spacing:.5px;font-size:10px;line-height:1.2}.sidebar-content-panel{background:var(--bg-sidebar);flex-direction:column;flex:1;width:280px;min-width:280px;height:100%;transition:opacity .2s,transform .2s;display:flex;overflow:hidden}.sidebar-content-hidden .sidebar-content-panel{opacity:0;pointer-events:none;width:0;min-width:0;overflow:hidden;transform:translate(-20px)}.sidebar-dialog-panel{background:var(--bg-card);border-right:1px solid var(--border-light);opacity:0;pointer-events:none;flex-direction:column;flex-shrink:0;width:280px;height:100%;min-height:0;transition:transform .3s,opacity .3s;display:flex;position:relative;overflow:hidden;transform:translate(100%)}.sidebar-dialog-panel.slide-in{opacity:1;pointer-events:auto;transform:translate(0)}.sidebar-overlay{display:none}.sidebar-nav{border-bottom:1px solid var(--border-light);padding:16px}.nav-section{margin-bottom:8px}.nav-section-title{font-family:var(--font-dm-sans);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;padding:0 8px;font-size:11px;font-weight:600}.nav-items{flex-direction:column;gap:4px;display:flex}.nav-item{color:var(--text-secondary);font-family:var(--font-inter);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 12px;font-size:14px;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light)}.nav-icon{justify-content:center;align-items:center;width:20px;font-size:18px;display:flex}.nav-label{font-weight:500}.sidebar-content{flex-direction:column;flex:1;gap:20px;padding:20px;display:flex;overflow-y:auto}.content-section{flex-direction:column;gap:12px;display:flex}.section-label{font-family:var(--font-dm-sans);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.8px;font-size:12px;font-weight:600;display:block}.modern-textarea{background:var(--bg-card);border:1px solid var(--border-light);width:100%;min-height:280px;font-family:var(--font-inter);color:var(--text-primary);resize:vertical;border-radius:10px;padding:16px;font-size:13px;line-height:1.6;transition:all .2s;box-shadow:inset 0 1px 2px #0000000d}.modern-textarea:focus{border-color:var(--accent-primary);background:var(--bg-hover);outline:none;box-shadow:0 0 0 3px #ff6b3526,inset 0 1px 2px #0000000d}.modern-textarea::placeholder{color:var(--text-tertiary)}.sample-selector{background:var(--bg-card);border:1px solid var(--border-light);width:100%;font-family:var(--font-inter);color:var(--text-primary);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23B3B3B3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;border-radius:10px;padding:12px 40px 12px 16px;font-size:13px;transition:all .2s}.sample-selector:hover{border-color:var(--border-medium);background-color:var(--bg-hover)}.sample-selector:focus{border-color:var(--accent-primary);background-color:var(--bg-hover);outline:none;box-shadow:0 0 0 3px #ff6b3526}.sample-selector option{background:var(--bg-card);color:var(--text-primary);padding:8px}.btn-primary{background:var(--accent-primary);color:#fff;width:100%;font-family:var(--font-dm-sans);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 8px #ff6b354d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ff6b3566}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-outline{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light);font-family:var(--font-dm-sans);cursor:pointer;border-radius:8px;flex:1;padding:10px 12px;font-size:12px;font-weight:500;transition:all .2s}.btn-outline:hover:not(:disabled){border-color:var(--accent-primary);background:var(--bg-hover);color:var(--accent-primary)}.btn-outline:disabled{opacity:.4;cursor:not-allowed}.export-buttons{gap:10px;display:flex}.btn-pill{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-light);font-family:var(--font-dm-sans);cursor:pointer;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:500;transition:all .2s;display:inline-flex}.btn-pill:hover{background:var(--bg-hover);border-color:var(--border-medium);color:var(--text-primary)}.btn-pill.active{background:var(--accent-primary);color:#fff;border-color:#0000;box-shadow:0 2px 8px #ff6b354d}.canvas-style-selector{flex-direction:column;gap:12px;display:flex}.canvas-style-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.canvas-style-card{background:var(--bg-card);border:1.5px solid var(--border-light);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:6px;min-height:60px;padding:8px;transition:all .2s;display:flex}.canvas-style-card:hover{background:var(--bg-hover);border-color:var(--border-medium);transform:translateY(-1px)}.canvas-style-card.active{border-color:var(--accent-primary);background:var(--bg-hover);box-shadow:0 0 0 2px #ff6b3533}.canvas-style-preview{border:1px solid #ffffff1a;border-radius:4px;width:100%;height:24px;transition:all .2s}.canvas-style-card.active .canvas-style-preview{border-color:var(--accent-primary);box-shadow:0 0 4px #ff6b354d}.canvas-style-name{font-family:var(--font-inter);color:var(--text-secondary);text-align:center;font-size:11px;font-weight:500;transition:color .2s}.canvas-style-card.active .canvas-style-name,.canvas-style-card:hover .canvas-style-name{color:var(--text-primary)}.canvas-style-discover-btn{width:100%;color:var(--text-tertiary);border:1px solid var(--border-light);font-family:var(--font-dm-sans);cursor:pointer;background:0 0;border-radius:8px;margin-top:4px;padding:8px 12px;font-size:12px;font-weight:500;transition:all .2s}.canvas-style-discover-btn:hover{background:var(--bg-hover);border-color:var(--border-medium);color:var(--text-primary)}.canvas-area{background:var(--bg-primary);flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.toolbar-container{z-index:10;background:var(--bg-primary);flex-shrink:0}.canvas-container{flex:1;justify-content:center;align-items:center;min-height:0;padding:32px;display:flex;position:relative;overflow:auto}.canvas-container:before{content:"";pointer-events:none;background-image:radial-gradient(circle at 20%,#ff6b350d 0,#0000 50%),radial-gradient(circle at 80% 80%,#ff8c4208 0,#0000 50%);position:absolute;inset:0}.canvas-card{background:var(--bg-canvas);border:1px solid var(--border-light);border-radius:16px;width:fit-content;max-width:100%;height:fit-content;max-height:100%;padding:20px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 20px 60px #0000001a,0 8px 24px #00000014,inset 0 1px #ffffff80}.canvas-card,.canvas-card.fullscreen-active{justify-content:center;align-items:center;display:flex}.canvas-card.fullscreen-active{border-radius:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:10px;overflow:auto}.canvas-card:fullscreen{background:var(--bg-canvas);border-radius:0;justify-content:center;align-items:center;padding:10px;display:flex;overflow:auto}.fullscreen-toggle-btn{background:var(--bg-card);border:1px solid var(--border-light);width:40px;height:40px;color:var(--text-primary);cursor:pointer;z-index:10;border-radius:8px;justify-content:center;align-items:center;font-size:20px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px;box-shadow:0 2px 8px #0000001a}.fullscreen-toggle-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);transform:scale(1.05);box-shadow:0 4px 12px #ff6b354d}.fullscreen-toggle-btn:active{transform:scale(.95)}canvas{object-fit:contain;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.canvas-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.empty-state{text-align:center;color:var(--text-tertiary);padding:80px 40px;position:relative}.empty-state-icon{opacity:.5;filter:grayscale(.3);margin-bottom:24px;font-size:72px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state-title{font-family:var(--font-dm-sans);color:var(--text-secondary);letter-spacing:-.3px;margin-bottom:12px;font-size:22px;font-weight:600}.empty-state-text{color:var(--text-tertiary);max-width:400px;margin:0 auto;font-size:15px;line-height:1.6}.spinner{border:2px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;width:18px;height:18px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.animate-fade-in{animation:fadeIn .5s cubic-bezier(.4,0,.2,1)}.tips-section{border-top:1px solid var(--border-light);padding-top:16px}.tips-title{font-family:var(--font-dm-sans);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;font-size:11px;font-weight:600}.tips-list{padding:0;list-style:none}.tips-list li{color:var(--text-secondary);align-items:start;gap:10px;padding:8px 0;font-size:12px;transition:all .2s;display:flex}.tips-list li:hover{color:var(--text-primary);transform:translate(2px)}.tips-list li:before{content:"→";color:var(--accent-primary);flex-shrink:0;font-size:14px;font-weight:600}.tips-list code{font-size:11px;font-family:var(--font-inter);color:var(--accent-primary);background:#ff6b3526;border:1px solid #ff6b354d;border-radius:5px;padding:3px 7px;font-weight:500}button,input,textarea{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::selection{color:var(--text-primary);background:#ff6b354d}.image-upload-section{flex-direction:column;gap:12px;display:flex}.image-upload-btn{justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 16px;font-size:13px;display:flex}.image-preview-container{flex-direction:column;gap:10px;display:flex}.image-preview-wrapper{border:1px solid var(--border-light);background:var(--bg-card);border-radius:8px;justify-content:center;align-items:center;width:100%;height:120px;display:flex;overflow:hidden}.image-preview{object-fit:cover;width:100%;height:100%}.image-upload-actions,.user-image-notice{gap:8px;display:flex}.user-image-notice{color:var(--text-secondary);background:#ff6b351a;border:1px solid #ff6b354d;border-radius:8px;align-items:center;margin-bottom:8px;padding:10px 12px;font-size:12px}.notice-icon{flex-shrink:0;font-size:14px}.notice-text{flex:1;line-height:1.4}.canvas-style-card.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.canvas-style-card.disabled:hover{transform:none}@media (max-width:1024px){.sidebar{z-index:99;height:calc(100vh - 64px);position:fixed;top:64px;left:0;box-shadow:2px 0 10px #0000001a}.sidebar.sidebar-closed{transform:translate(-100%)}.sidebar.sidebar-open.sidebar-content-visible.has-dialog{opacity:1;width:640px;transform:translate(0)}.sidebar.sidebar-open.sidebar-content-hidden.has-dialog,.sidebar.sidebar-open.sidebar-content-visible{opacity:1;width:360px;transform:translate(0)}.sidebar.sidebar-open.sidebar-content-hidden{opacity:1;width:70px;transform:translate(0)}.sidebar-nav-panel{width:70px}.sidebar-nav-icon{font-size:18px}.sidebar-nav-label{font-size:9px}.canvas-container{align-items:center;padding:20px;overflow:auto}.sidebar-overlay{z-index:98;background:#0000004d;animation:fadeIn .3s;display:block;position:fixed;inset:64px 0 0}}@media (max-width:640px){.sidebar-toggle-btn{width:32px;height:32px;font-size:16px}.sidebar.sidebar-open.sidebar-content-visible.has-dialog{width:100%;max-width:640px}.sidebar.sidebar-open.sidebar-content-hidden.has-dialog{width:360px}.sidebar.sidebar-open.sidebar-content-visible{width:100%;max-width:360px}.sidebar.sidebar-open.sidebar-content-hidden{width:60px}.sidebar-nav-panel{width:60px;padding:8px 0}.sidebar-nav-item{padding:10px 4px}.sidebar-nav-icon{font-size:16px}.sidebar-nav-label{font-size:8px}}@media (max-width:768px){.app-header{padding:0 16px}.sidebar-content{padding:16px}.modern-textarea{min-height:220px}.canvas-area{align-items:center;padding:16px;overflow:hidden}.canvas-card{box-sizing:border-box;width:100%;max-width:100%;padding:12px}.canvas-card.fullscreen-active{padding:8px}.fullscreen-toggle-btn{width:32px;height:32px;font-size:16px;top:12px;right:12px}.export-buttons,.image-upload-actions{flex-direction:column}}.sketch-toolbar{background:var(--bg-card);border-bottom:2px solid var(--border-light);z-index:10;flex-direction:column;width:100%;padding:0;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.sketch-toolbar:before{content:"";filter:blur(.5px);background:linear-gradient(90deg,#0000,#0000001a 20% 80%,#0000);height:1px;position:absolute;top:0;left:0;right:0}.sketch-toolbar-minimized{background:var(--bg-card);border-bottom:2px solid var(--border-light);justify-content:center;align-items:center;padding:8px 16px;display:flex;box-shadow:0 2px 4px #0000000d}.sketch-toolbar-header{border-bottom:1px solid var(--border-light);background:linear-gradient(#ffffff80,#0000);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.sketch-toolbar-title{font-family:var(--font-dm-sans);color:var(--text-primary);letter-spacing:-.2px;padding-left:8px;font-size:14px;font-weight:600;position:relative}.sketch-toolbar-title:before{content:"";background:var(--accent-primary);border-radius:2px;width:3px;height:12px;position:absolute;bottom:2px;left:0;transform:rotate(-2deg)}.sketch-button-minimize,.sketch-button-toggle{border-radius:6px;transition:all .2s}.sketch-button-minimize:hover,.sketch-button-toggle:hover{background:var(--bg-hover);transform:scale(1.05)}.sketch-toolbar-scroll{width:100%;max-height:140px}.sketch-toolbar-scroll [data-slot=scroll-area-viewport]{overflow:auto hidden;padding-top:0!important}.sketch-toolbar-items{gap:12px;min-width:max-content;margin-top:0;padding:0 16px 16px;display:flex}.sketch-toolbar-item{background:var(--bg-card);border:2.5px solid var(--border-light);cursor:pointer;border-radius:12px;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;min-width:90px;padding:12px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:visible;transform:rotate(0);box-shadow:0 2px 4px #0000000d,inset 0 1px #fffc}.sketch-toolbar-item:before{content:"";background:linear-gradient(var(--bg-card),var(--bg-card))padding-box,linear-gradient(135deg,var(--border-light),var(--border-medium))border-box;clip-path:polygon(0 2%,2% 0,8% 1%,12% 0,18% 2%,22% 1%,28% 0,32% 2%,38% 1%,42% 0,48% 2%,52% 1%,58% 0,62% 2%,68% 1%,72% 0,78% 2%,82% 1%,88% 0,92% 2%,98% 1%,100% 0,100% 8%,98% 12%,100% 18%,98% 22%,100% 28%,98% 32%,100% 38%,98% 42%,100% 48%,98% 52%,100% 58%,98% 62%,100% 68%,98% 72%,100% 78%,98% 82%,100% 88%,98% 92%,100% 98%,92% 100%,88% 98%,82% 100%,78% 98%,72% 100%,68% 98%,62% 100%,58% 98%,52% 100%,48% 98%,42% 100%,38% 98%,32% 100%,28% 98%,22% 100%,18% 98%,12% 100%,8% 98%,2% 100%,0 98%,0 92%,2% 88%,0 82%,2% 78%,0 72%,2% 68%,0 62%,2% 58%,0 52%,2% 48%,0 42%,2% 38%,0 32%,2% 28%,0 22%,2% 18%,0 12%,2% 8%,0 2%);opacity:0;pointer-events:none;border:2.5px solid #0000;border-radius:12px;transition:opacity .3s;position:absolute;inset:-2px}.sketch-toolbar-item:hover{background:var(--bg-hover);border-color:var(--border-medium);transform:translateY(-3px)rotate(-.5deg)scale(1.02);box-shadow:0 4px 12px #0000001f,0 2px 4px #00000014,inset 0 1px #ffffffe6}.sketch-toolbar-item:hover:before{opacity:.3}.sketch-toolbar-item-selected{border-color:var(--accent-primary);background:linear-gradient(135deg,var(--accent-orange-light),#ff6b350d);animation:sketchPulse 2s ease-in-out infinite;transform:rotate(.5deg)scale(1.05);box-shadow:0 4px 16px #ff6b3540,0 2px 8px #ff6b3526,inset 0 1px #ffffffe6,0 0 0 2px #ff6b351a}@keyframes sketchPulse{0%,to{box-shadow:0 4px 16px #ff6b3540,0 2px 8px #ff6b3526,inset 0 1px #ffffffe6,0 0 0 2px #ff6b351a}50%{box-shadow:0 4px 20px #ff6b354d,0 2px 10px #ff6b3533,inset 0 1px #ffffffe6,0 0 0 3px #ff6b3526}}.sketch-item-icon-wrapper{background:#fff9;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex;position:relative;box-shadow:inset 0 2px 4px #0000001a,0 1px 2px #0000001a}.sketch-toolbar-item:hover .sketch-item-icon-wrapper{transform:scale(1.1)rotate(2deg);box-shadow:inset 0 2px 4px #0000001a,0 2px 6px #00000026}.sketch-toolbar-item-selected .sketch-item-icon-wrapper{background:linear-gradient(135deg,#ff6b3533,#ff8c421a);box-shadow:inset 0 2px 4px #ff6b3533,0 2px 8px #ff6b3533}.sketch-item-icon{filter:drop-shadow(0 1px 1px #0000001a);font-size:28px;line-height:1;transition:transform .3s}.sketch-toolbar-item:hover .sketch-item-icon{transform:scale(1.1)rotate(-3deg)}.sketch-item-name{font-family:var(--font-inter);color:var(--text-secondary);text-align:center;letter-spacing:.2px;font-size:11px;font-weight:500;transition:all .3s;position:relative}.sketch-item-name:after{content:"";background:var(--accent-primary);border-radius:2px;width:0;height:1.5px;transition:width .3s;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.sketch-toolbar-item:hover .sketch-item-name:after{width:80%}.sketch-item-name-selected{color:var(--accent-primary);font-weight:600;transform:scale(1.05)}.sketch-item-name-selected:after{background:var(--accent-primary);width:100%;height:2px;box-shadow:0 0 4px #ff6b3566}.sketch-item-check{background:var(--accent-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;animation:sketchCheckPop .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;position:absolute;top:6px;right:6px;box-shadow:0 2px 6px #ff6b3566,inset 0 1px 2px #ffffff4d}@keyframes sketchCheckPop{0%{opacity:0;transform:scale(0)rotate(-180deg)}50%{transform:scale(1.2)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}.sketch-check-path{stroke-dasharray:12;stroke-dashoffset:12px;animation:sketchCheckDraw .4s ease-out .2s forwards}@keyframes sketchCheckDraw{to{stroke-dashoffset:0}}@media (max-width:768px){.sketch-toolbar-items{gap:8px;margin-top:0;padding:0 12px 12px}.sketch-toolbar-item{min-width:75px;padding:10px 12px}.sketch-item-icon{font-size:24px}.sketch-item-icon-wrapper{width:40px;height:40px}.sketch-item-name{font-size:10px}}.item-toolbar-minimized{background:var(--bg-card);border-bottom:1px solid var(--border-light);justify-content:center;align-items:center;padding:8px 16px;display:flex}.toolbar-header{justify-content:space-between;align-items:center;display:flex}.toolbar-title{font-family:var(--font-dm-sans);color:var(--text-primary);font-size:14px;font-weight:600}.toolbar-toggle-btn{border:1px solid var(--border-light);cursor:pointer;width:28px;height:28px;color:var(--text-secondary);background:0 0;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:18px;transition:all .2s;display:flex}.toolbar-toggle-btn:hover{background:var(--bg-hover);border-color:var(--border-medium);color:var(--text-primary)}.toolbar-items{scrollbar-width:thin;gap:10px;padding:4px 0;display:flex;overflow:auto hidden}.toolbar-items::-webkit-scrollbar{height:6px}.toolbar-items::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:3px}.toolbar-items::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}.toolbar-items::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.toolbar-item{background:var(--bg-card);border:2px solid var(--border-light);cursor:pointer;border-radius:10px;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;min-width:80px;padding:10px 14px;transition:all .2s;display:flex;position:relative}.toolbar-item:hover{background:var(--bg-hover);border-color:var(--border-medium);transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.toolbar-item.selected{border-color:var(--accent-primary);background:var(--accent-orange-light);box-shadow:0 0 0 2px #ff6b3533}.toolbar-item-icon{font-size:28px;line-height:1}.toolbar-item-name{font-family:var(--font-inter);color:var(--text-secondary);text-align:center;font-size:11px;font-weight:500}.toolbar-item.selected .toolbar-item-name{color:var(--accent-primary);font-weight:600}.toolbar-item-check{background:var(--accent-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;font-weight:700;display:flex;position:absolute;top:4px;right:4px}.item-dialog-overlay{display:none}.item-dialog{width:100%;height:100%;box-shadow:none;border-radius:0;flex-direction:column;max-width:none;min-height:0;max-height:none;margin:0;padding:0;position:relative;overflow:hidden}.item-dialog,.item-dialog-header{background:var(--bg-card);display:flex}.item-dialog-header{border-bottom:1px solid var(--border-light);flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:0;padding:16px 20px}.item-dialog-header h3{font-family:var(--font-dm-sans);color:var(--text-primary);margin:0;font-size:16px;font-weight:600}.dialog-close-btn{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:28px;line-height:1;transition:all .2s;display:flex}.dialog-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.item-dialog-form{flex-direction:column;flex:1;gap:12px;min-height:0;padding:16px;display:flex;overflow-y:auto}.dialog-field{flex-direction:column;gap:6px;display:flex}.dialog-field label{font-family:var(--font-dm-sans);color:var(--text-secondary);font-size:13px;font-weight:600}.dialog-textarea{background:var(--bg-card);border:1px solid var(--border-light);width:100%;min-height:80px;font-family:var(--font-inter);color:var(--text-primary);resize:vertical;box-sizing:border-box;border-radius:8px;padding:10px;font-size:13px;line-height:1.5;transition:all .2s}.dialog-textarea:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #ff6b3526}.position-controls{flex-direction:row;gap:12px;width:100%;display:flex}.position-input-group{flex:1;align-items:center;gap:8px;display:flex}.position-input-group label{color:var(--text-tertiary);min-width:20px;font-size:13px}.position-input{background:var(--bg-card);border:1px solid var(--border-light);font-family:var(--font-inter);color:var(--text-primary);border-radius:6px;flex:1;min-width:0;padding:8px 10px;font-size:12px;transition:all .2s}.position-input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 2px #ff6b3526}.position-info{color:var(--text-tertiary);font-size:12px;font-family:var(--font-inter);text-align:center;padding:4px 0}.position-slider-group{flex-direction:column;flex:1;gap:8px;display:flex}.position-slider-group label{color:var(--text-tertiary);justify-content:space-between;align-items:center;font-size:12px;font-weight:500;display:flex}.position-slider-value{color:var(--accent-primary);text-align:right;min-width:50px;font-size:13px;font-weight:600}.dialog-actions{gap:8px;margin-top:8px;display:flex}.dialog-actions .btn-outline{flex:1}.dialog-actions .btn-outline.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}@media (max-width:640px){body{overflow:auto}.app-container{height:auto}.app-header{height:56px}.logo-text{font-size:18px}.sidebar-nav{padding:12px}.sidebar-content{gap:16px;padding:12px}.content-section{gap:8px}.modern-textarea{min-height:180px;padding:12px;font-size:12px}.canvas-container{padding:12px;overflow:auto}.canvas-card{max-width:100%;padding:10px;overflow:hidden}.canvas-card.fullscreen-active{border-radius:0;padding:6px}:is(.canvas-card:fullscreen){padding:6px}.fullscreen-toggle-btn{width:36px;height:36px;font-size:18px;top:12px;right:12px}.canvas-wrapper{max-width:100%;overflow-x:auto}canvas{width:100%!important;max-width:100%!important;height:auto!important}.empty-state{padding:40px 16px}.image-preview-wrapper{height:100px}.canvas-style-grid{grid-template-columns:repeat(2,1fr)}.item-toolbar{padding:8px 12px}.toolbar-item{min-width:70px;padding:8px 10px}.toolbar-item-icon{font-size:24px}.toolbar-item-name{font-size:10px}.item-dialog{max-width:95%;padding:20px}.position-controls{gap:12px}}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@layer base{*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}