*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:oklch(55% .2 250);--color-primary-light:oklch(72% .15 250);--color-primary-dark:oklch(38% .22 250);--color-secondary:oklch(55% .18 280);--color-secondary-light:oklch(72% .13 280);--color-secondary-dark:oklch(38% .2 280);--color-accent:oklch(60% .22 200);--color-accent-light:oklch(75% .16 200);--color-accent-dark:oklch(42% .24 200);--color-success:oklch(60% .18 145);--color-warning:oklch(72% .18 80);--color-error:oklch(58% .22 25);--bg-base:oklch(98% .005 250);--bg-surface:oklch(96% .008 250);--bg-elevated:oklch(100% 0 0);--bg-sunken:oklch(93% .01 250);--text-primary:oklch(18% .02 250);--text-secondary:oklch(42% .03 250);--text-muted:oklch(60% .02 250);--text-inverse:oklch(98% .005 250);--border-subtle:oklch(88% .015 250);--border-default:oklch(80% .02 250);--shadow-sm:0 1px 3px oklch(18% .02 250/.08);--shadow-md:0 4px 12px oklch(18% .02 250/.12);--shadow-lg:0 8px 32px oklch(18% .02 250/.16);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--font-sans:"Vazirmatn","Segoe UI",Tahoma,Arial,sans-serif;--font-mono:"Courier New",Courier,monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--transition-fast:.12s ease;--transition-base:.22s ease;--transition-slow:.38s ease}[data-theme=dark]{--bg-base:oklch(14% .015 250);--bg-surface:oklch(18% .018 250);--bg-elevated:oklch(22% .02 250);--bg-sunken:oklch(11% .012 250);--text-primary:oklch(94% .008 250);--text-secondary:oklch(72% .015 250);--text-muted:oklch(55% .012 250);--text-inverse:oklch(14% .015 250);--border-subtle:oklch(28% .02 250);--border-default:oklch(35% .025 250);--shadow-sm:0 1px 3px oklch(0% 0 0/.3);--shadow-md:0 4px 12px oklch(0% 0 0/.4);--shadow-lg:0 8px 32px oklch(0% 0 0/.5)}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Thin.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Thin.ttf)format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-ExtraLight.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-ExtraLight.ttf)format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Light.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Light.ttf)format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Regular.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Medium.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Medium.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-SemiBold.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-SemiBold.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Bold.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Bold.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-ExtraBold.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-ExtraBold.ttf)format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(./assets/font/Vazirmatn-FD-NL-Black.woff2)format("woff2"),url(./assets/font/Vazirmatn-FD-NL-Black.ttf)format("truetype");font-weight:900;font-style:normal;font-display:swap}html{scroll-behavior:smooth;font-size:16px}body{background-color:var(--bg-base);color:var(--text-primary);transition:background-color var(--transition-slow),color var(--transition-slow);min-height:100vh;font-family:Vazirmatn;line-height:1.6}.app-wrapper{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:100;background-color:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);position:sticky;top:0}.header-inner{max-width:1440px;padding:var(--space-4)var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);margin:0 auto;display:flex}.header-brand{gap:var(--space-1);flex-direction:column;display:flex}.brand-title{font-size:var(--text-2xl);color:var(--color-primary);letter-spacing:-.02em;font-weight:700;line-height:1}.brand-sub{font-size:var(--text-xs);color:var(--text-muted);font-weight:400}.theme-toggle{align-items:center;gap:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-full);padding:var(--space-2)var(--space-4);cursor:pointer;color:var(--text-secondary);font-family:Vazirmatn;font-size:var(--text-sm);transition:all var(--transition-base);background:0 0;display:flex}.theme-toggle:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:oklch(from var(--color-primary)l c h/.06)}.toggle-track{background-color:var(--border-default);border-radius:var(--radius-full);width:2.5rem;height:1.375rem;transition:background-color var(--transition-base);flex-shrink:0;position:relative}[data-theme=dark] .toggle-track{background-color:var(--color-primary)}.toggle-thumb{border-radius:var(--radius-full);width:1rem;height:1rem;transition:transform var(--transition-base);box-shadow:var(--shadow-sm);background-color:#fff;position:absolute;top:.1875rem;right:.1875rem}[data-theme=dark] .toggle-thumb{transform:translate(-1.125rem)}.app-main{width:100%;max-width:1440px;padding:var(--space-6);gap:var(--space-6);flex:1;grid-template-columns:360px 1fr;align-items:start;margin:0 auto;display:grid}.controls-panel{top:calc(68px + var(--space-6));gap:var(--space-4);max-height:calc(100vh - 68px - var(--space-12));scrollbar-width:thin;scrollbar-color:var(--border-default)transparent;padding-left:var(--space-2);flex-direction:column;display:flex;position:sticky;overflow-y:auto}.controls-panel::-webkit-scrollbar{width:4px}.controls-panel::-webkit-scrollbar-track{background:0 0}.controls-panel::-webkit-scrollbar-thumb{background-color:var(--border-default);border-radius:var(--radius-full)}.control-section{background-color:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.section-title{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);font-weight:600}.color-picker-wrapper{align-items:center;gap:var(--space-4);display:flex}.color-swatch-preview{border-radius:var(--radius-md);background-color:var(--color-primary);width:4rem;height:4rem;box-shadow:var(--shadow-md);transition:background-color var(--transition-base);border:2px solid var(--border-subtle);flex-shrink:0}.color-picker-inputs{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.input-label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:500}.color-input{border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;background-color:var(--bg-surface);width:100%;height:2.5rem;transition:border-color var(--transition-base);padding:.125rem}.color-input:hover,.color-input:focus{border-color:var(--color-primary);outline:none}.oklch-display{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);background-color:var(--bg-sunken);padding:var(--space-2)var(--space-3);border-radius:var(--radius-sm);font-family:Vazirmatn;display:flex}.oklch-label{color:var(--color-primary);font-weight:600}.slider-wrapper{gap:var(--space-2);flex-direction:column;display:flex}.slider-labels{font-size:var(--text-xs);color:var(--text-muted);justify-content:space-between;display:flex}.slider-track-container{position:relative}.range-input{-webkit-appearance:none;appearance:none;border-radius:var(--radius-full);cursor:pointer;z-index:2;background:0 0;width:100%;height:.375rem;position:relative}.range-input::-webkit-slider-runnable-track{background:var(--border-default);border-radius:var(--radius-full);height:.375rem}.range-input::-moz-range-track{background:var(--border-default);border-radius:var(--radius-full);height:.375rem}.range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--color-primary);width:1.25rem;height:1.25rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer;border:2px solid #fff;border-radius:50%;margin-top:-.4375rem;box-shadow:0 2px 6px oklch(0% 0 0/.25)}.range-input::-moz-range-thumb{background-color:var(--color-primary);cursor:pointer;border:2px solid #fff;border-radius:50%;width:1.25rem;height:1.25rem;box-shadow:0 2px 6px oklch(0% 0 0/.25)}.range-input:hover::-webkit-slider-thumb,.range-input:focus::-webkit-slider-thumb{box-shadow:0 3px 10px oklch(from var(--color-primary)l c h/.4);transform:scale(1.15)}.slider-value-display{text-align:center;font-size:var(--text-xs);color:var(--color-primary);font-family:Vazirmatn;font-weight:600}.pattern-grid{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.pattern-btn{align-items:flex-start;gap:var(--space-1);padding:var(--space-3);background-color:var(--bg-surface);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-align:right;flex-direction:column;font-family:Vazirmatn;display:flex}.pattern-btn:hover{border-color:var(--color-primary);background-color:oklch(from var(--color-primary)l c h/.05)}.pattern-btn.active{border-color:var(--color-primary);background-color:oklch(from var(--color-primary)l c h/.1);box-shadow:0 0 0 3px oklch(from var(--color-primary)l c h/.15)}.pattern-icon{margin-bottom:var(--space-1);align-items:center;gap:2px;height:12px;display:flex}.pattern-icon span{border-radius:2px;display:block}.monochromatic-icon:before{content:"";display:flex}.pattern-icon{align-items:center;gap:3px;display:flex}.monochromatic-icon{background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary),var(--color-primary-light));border-radius:3px;width:100%;height:10px}.complementary-icon{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:3px;width:100%;height:10px}.analogous-icon{background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary),var(--color-accent));border-radius:3px;width:100%;height:10px}.triadic-icon{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary),var(--color-accent));border-radius:3px;width:100%;height:10px}.split-icon{background:linear-gradient(90deg,var(--color-primary),var(--color-accent),var(--color-secondary-light));border-radius:3px;width:100%;height:10px}.tetradic-icon{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary),var(--color-accent),var(--color-primary-dark));border-radius:3px;width:100%;height:10px}.square-icon{background:linear-gradient(90deg,var(--color-primary),var(--color-accent),var(--color-secondary),var(--color-primary-light));border-radius:3px;width:100%;height:10px}.shades-icon{background:linear-gradient(90deg,oklch(95% .05 250),var(--color-primary),oklch(20% .15 250));border-radius:3px;width:100%;height:10px}.pattern-name{font-size:var(--text-sm);color:var(--text-primary);font-weight:600}.pattern-desc{font-size:var(--text-xs);color:var(--text-muted);line-height:1.3}.advanced-controls{gap:var(--space-4);flex-direction:column;display:flex}.control-row{gap:var(--space-2);flex-direction:column;display:flex}.control-value{font-size:var(--text-xs);color:var(--color-primary);text-align:center;font-family:Vazirmatn;font-weight:600}.output-panel{gap:var(--space-6);flex-direction:column;display:flex}.palette-section{background-color:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.palette-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.palette-header .section-title{border-bottom:none;margin-bottom:0;padding-bottom:0}.palette-actions{gap:var(--space-2);display:flex}.palette-swatches{gap:var(--space-2);flex-wrap:wrap;display:flex}.swatch-item{border-radius:var(--radius-md);cursor:pointer;min-width:80px;transition:transform var(--transition-base),box-shadow var(--transition-base);box-shadow:var(--shadow-sm);flex:1;overflow:hidden}.swatch-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)scale(1.02)}.swatch-color{height:90px;transition:background-color var(--transition-base)}.swatch-info{background-color:var(--bg-elevated);padding:var(--space-2)var(--space-3);border:1px solid var(--border-subtle);border-top:none}.swatch-name{font-size:var(--text-xs);color:var(--text-primary);margin-bottom:2px;font-weight:600;display:block}.swatch-hex{font-size:var(--text-xs);color:var(--text-muted);font-family:Vazirmatn;display:block}.swatch-oklch{color:var(--text-muted);opacity:.75;margin-top:2px;font-family:Vazirmatn;font-size:.65rem;display:block}.action-btn{padding:var(--space-2)var(--space-4);background-color:var(--color-primary);color:oklch(98% .01 250);border-radius:var(--radius-md);font-family:Vazirmatn;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);border:none;font-weight:600}.action-btn:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.action-btn.secondary{background-color:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default)}.action-btn.secondary:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:oklch(from var(--color-primary)l c h/.06)}.action-btn.full-width{width:100%;padding:var(--space-3)var(--space-4)}.preview-section{gap:var(--space-5);flex-direction:column;display:flex}.preview-section>.section-title{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);font-weight:600}.preview-banner{background-color:var(--color-primary);border-radius:var(--radius-xl);padding:var(--space-10)var(--space-12);transition:background-color var(--transition-slow);position:relative;overflow:hidden}.banner-content{z-index:2;max-width:600px;position:relative}.banner-eyebrow{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:oklch(from var(--color-primary)calc(l + .35)calc(c*.5)h);background-color:oklch(from var(--color-primary)calc(l + .2)calc(c*.3)h/.25);padding:var(--space-1)var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-3);font-weight:700;display:inline-block}.banner-title{font-size:var(--text-3xl);color:oklch(98% .01 250);margin-bottom:var(--space-4);letter-spacing:-.02em;font-weight:800;line-height:1.25}.banner-body{font-size:var(--text-base);color:oklch(from var(--color-primary)calc(l + .4)calc(c*.3)h);margin-bottom:var(--space-6);line-height:1.7}.banner-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.banner-accent{inset-inline-start:-80px;background-color:oklch(from var(--color-primary)calc(l - .1)c h/.4);z-index:1;width:300px;height:300px;transition:background-color var(--transition-slow);border-radius:50%;position:absolute;bottom:-80px}.btn{padding:var(--space-3)var(--space-5);border-radius:var(--radius-md);font-family:Vazirmatn;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);border:2px solid #0000;justify-content:center;align-items:center;font-weight:600;line-height:1;display:inline-flex}.btn-primary{background-color:var(--bg-elevated);color:var(--color-primary);border-color:var(--bg-elevated)}.btn-primary:hover{background-color:oklch(98% .01 250);transform:translateY(-2px);box-shadow:0 6px 20px oklch(0% 0 0/.2)}.btn-secondary{background-color:oklch(from var(--color-primary)l c h/.2);color:oklch(98% .01 250);border-color:oklch(from var(--color-primary)calc(l + .2)calc(c*.5)h/.4)}.btn-secondary:hover{background-color:oklch(from var(--color-primary)l c h/.35);transform:translateY(-2px)}.btn-ghost{color:oklch(98% .01 250);background-color:#0000;border-color:oklch(98% .01 250/.35)}.btn-ghost:hover{background-color:oklch(98% .01 250/.12);transform:translateY(-2px)}.btn-accent{background-color:var(--color-accent);color:oklch(98% .01 250);border-color:#0000}.btn-accent:hover{background-color:var(--color-accent-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-danger{background-color:var(--color-error);color:oklch(98% .01 250);border-color:#0000}.btn-danger:hover{opacity:.88;box-shadow:var(--shadow-md);transform:translateY(-2px)}.preview-typography{background-color:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:background-color var(--transition-slow),border-color var(--transition-slow)}.typo-block{gap:var(--space-4);flex-direction:column;display:flex}.typo-heading{font-size:var(--text-2xl);color:var(--color-primary);font-weight:700;line-height:1.3}.typo-body{font-size:var(--text-base);color:var(--text-primary);line-height:1.75}.typo-muted{font-size:var(--text-sm);color:var(--text-muted);line-height:1.65}.typo-links{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.typo-link{color:var(--color-primary);font-size:var(--text-sm);transition:color var(--transition-fast);border-bottom:1px solid oklch(from var(--color-primary)l c h/.35);padding-bottom:1px;font-weight:500;text-decoration:none}.typo-link:hover{color:var(--color-primary-dark);border-bottom-color:var(--color-primary-dark)}.typo-separator{color:var(--border-default);font-size:var(--text-sm)}.preview-components{background-color:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:background-color var(--transition-slow),border-color var(--transition-slow)}.components-title{font-size:var(--text-lg);color:var(--text-primary);margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);font-weight:700}.components-grid{gap:var(--space-6);flex-direction:column;display:flex}.component-group{gap:var(--space-3);flex-direction:column;display:flex}.component-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600}.buttons-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.buttons-row .btn{background-color:var(--color-primary);color:oklch(98% .01 250);border-color:#0000}.buttons-row .btn:hover{background-color:var(--color-primary-dark)}.buttons-row .btn-secondary{background-color:var(--color-secondary)}.buttons-row .btn-secondary:hover{background-color:var(--color-secondary-dark)}.buttons-row .btn-accent{background-color:var(--color-accent)}.buttons-row .btn-ghost{color:var(--color-primary);border-color:var(--color-primary);background-color:#0000}.buttons-row .btn-ghost:hover{background-color:oklch(from var(--color-primary)l c h/.08)}.badges-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.badge{padding:var(--space-1)var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.03em;align-items:center;font-weight:700;display:inline-flex}.badge-primary{background-color:oklch(from var(--color-primary)l c h/.15);color:var(--color-primary-dark)}.badge-secondary{background-color:oklch(from var(--color-secondary)l c h/.15);color:var(--color-secondary-dark)}.badge-accent{background-color:oklch(from var(--color-accent)l c h/.15);color:var(--color-accent-dark)}.badge-success{background-color:oklch(from var(--color-success)l c h/.15);color:oklch(from var(--color-success)calc(l - .15)c h)}.badge-warning{background-color:oklch(from var(--color-warning)l c h/.2);color:oklch(from var(--color-warning)calc(l - .25)c h)}.badge-error{background-color:oklch(from var(--color-error)l c h/.15);color:oklch(from var(--color-error)calc(l - .12)c h)}.cards-row{gap:var(--space-3);flex-wrap:wrap;display:flex}.preview-card{border-radius:var(--radius-md);min-width:140px;padding:var(--space-4);border:1px solid var(--border-subtle);transition:all var(--transition-base);flex:1}.preview-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.card-header-line{border-radius:var(--radius-full);height:3px;margin-bottom:var(--space-3)}.card-primary{background-color:oklch(from var(--color-primary)l c h/.06);border-color:oklch(from var(--color-primary)l c h/.2)}.card-primary .card-header-line{background-color:var(--color-primary)}.card-secondary{background-color:oklch(from var(--color-secondary)l c h/.06);border-color:oklch(from var(--color-secondary)l c h/.2)}.card-secondary .card-header-line{background-color:var(--color-secondary)}.card-accent{background-color:oklch(from var(--color-accent)l c h/.06);border-color:oklch(from var(--color-accent)l c h/.2)}.card-accent .card-header-line{background-color:var(--color-accent)}.card-title-text{font-size:var(--text-sm);color:var(--text-primary);margin-bottom:var(--space-1);font-weight:700}.card-body-text{font-size:var(--text-xs);color:var(--text-muted)}.progress-group{gap:var(--space-3);flex-direction:column;display:flex}.progress-bar-wrapper{align-items:center;gap:var(--space-3);grid-template-columns:80px 1fr 36px;display:grid}.progress-name{font-size:var(--text-xs);color:var(--text-secondary);font-weight:500}.progress-track{background-color:var(--bg-sunken);border-radius:var(--radius-full);height:8px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);height:100%;transition:width var(--transition-slow),background-color var(--transition-slow)}.progress-primary{background-color:var(--color-primary)}.progress-secondary{background-color:var(--color-secondary)}.progress-accent{background-color:var(--color-accent)}.progress-pct{font-size:var(--text-xs);color:var(--text-muted);text-align:left;font-family:Vazirmatn;font-weight:600}.modal-overlay{z-index:1000;padding:var(--space-6);opacity:0;visibility:hidden;transition:opacity var(--transition-base),visibility var(--transition-base);backdrop-filter:blur(4px);background-color:oklch(0% 0 0/.55);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.open{opacity:1;visibility:visible}.modal-box{background-color:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);gap:var(--space-4);width:100%;max-width:640px;max-height:80vh;box-shadow:var(--shadow-lg);transition:transform var(--transition-base);flex-direction:column;display:flex;overflow:hidden;transform:translateY(20px)scale(.98)}.modal-overlay.open .modal-box{transform:translateY(0)scale(1)}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--text-xl);color:var(--text-primary);font-weight:700}.modal-close{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-2)var(--space-3);cursor:pointer;color:var(--text-secondary);font-family:Vazirmatn;font-size:var(--text-sm);transition:all var(--transition-fast);background:0 0}.modal-close:hover{border-color:var(--color-error);color:var(--color-error)}.modal-code{background-color:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);font-family:Vazirmatn;font-size:var(--text-xs);color:var(--text-primary);white-space:pre;scrollbar-width:thin;flex:1;line-height:1.7;overflow-y:auto}.toast{bottom:var(--space-6);background-color:var(--text-primary);color:var(--bg-base);padding:var(--space-3)var(--space-6);border-radius:var(--radius-full);font-size:var(--text-sm);z-index:2000;transition:transform var(--transition-base);white-space:nowrap;box-shadow:var(--shadow-lg);font-weight:600;position:fixed;left:50%;transform:translate(-50%)translateY(calc(100% + 20px))}.toast.show{transform:translate(-50%)translateY(0)}@media (width<=1100px){.app-main{gap:var(--space-4);padding:var(--space-4);grid-template-columns:300px 1fr}.preview-banner{padding:var(--space-8)}}@media (width<=880px){.app-main{padding:var(--space-4);grid-template-columns:1fr}.controls-panel{max-height:none;position:static;overflow-y:visible}.pattern-grid{grid-template-columns:repeat(4,1fr)}.banner-title{font-size:var(--text-2xl)}.preview-banner{padding:var(--space-6)}}@media (width<=600px){.header-inner{padding:var(--space-3)var(--space-4)}.brand-title{font-size:var(--text-xl)}.toggle-label{display:none}.app-main{padding:var(--space-3);gap:var(--space-3)}.pattern-grid{grid-template-columns:1fr 1fr}.swatch-item{min-width:60px}.swatch-color{height:64px}.palette-actions{flex-direction:column}.progress-bar-wrapper{grid-template-columns:64px 1fr 32px}.banner-title{font-size:var(--text-xl)}.banner-actions{flex-direction:column;align-items:flex-start}.cards-row{flex-direction:column}.preview-typography,.preview-components,.preview-banner{padding:var(--space-5)}.banner-accent{inset-inline-start:-50px;width:180px;height:180px;bottom:-50px}}@media (width<=400px){.pattern-grid{grid-template-columns:1fr}}