*{box-sizing:border-box;margin:0;padding:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}li{list-style:none}a{text-decoration:none}html,body{height:100%}body{background-color:var(--ip-bg);color:var(--ip-text-primary)}.filter-drop-shadow-5{-webkit-filter:drop-shadow(5px 5px 5px #00000080)}.filter-drop-shadow-10{-webkit-filter:drop-shadow(10px 10px 5px #00000080)}.filter-drop-shadow-15{-webkit-filter:drop-shadow(15px 15px 8px #00000080)}.filter-drop-shadow-20{-webkit-filter:drop-shadow(20px 20px 10px #00000080)}.filter-opacity-50{-webkit-filter:opacity(50%)}.filter-opacity-70{-webkit-filter:opacity(70%)}.filter-opacity-80{-webkit-filter:opacity(80%)}.filter-opacity-90{-webkit-filter:opacity(90%)}.filter-saturate-50{-webkit-filter:saturate(50%)}.filter-saturate-100{-webkit-filter:saturate()}.filter-saturate-200{-webkit-filter:saturate(200%)}.filter-saturate-300{-webkit-filter:saturate(300%)}.filter-invert-25{-webkit-filter:invert(25%)}.filter-invert-65{-webkit-filter:invert(65%)}.filter-invert-85{-webkit-filter:invert(85%)}.filter-invert-100{-webkit-filter:invert()}.filter-hue-rotate-45{-webkit-filter:hue-rotate(45deg)}.filter-hue-rotate-90{-webkit-filter:hue-rotate(90deg)}.filter-hue-rotate-180{-webkit-filter:hue-rotate(180deg)}.filter-hue-rotate-300{-webkit-filter:hue-rotate(300deg)}.filter-contrast-120{-webkit-filter:contrast(120%)}.filter-contrast-150{-webkit-filter:contrast(150%)}.filter-contrast-200{-webkit-filter:contrast(200%)}.filter-contrast-250{-webkit-filter:contrast(250%)}.filter-brightness-120{-webkit-filter:brightness(120%)}.filter-brightness-150{-webkit-filter:brightness(150%)}.filter-brightness-175{-webkit-filter:brightness(175%)}.filter-brightness-200{-webkit-filter:brightness(200%)}.filter-blur-1{-webkit-filter:blur(1px)}.filter-blur-2{-webkit-filter:blur(2px)}.filter-blur-3{-webkit-filter:blur(3px)}.filter-blur-4{-webkit-filter:blur(4px)}.filter-sepia-50{-webkit-filter:sepia(50%)}.filter-sepia-100{-webkit-filter:sepia()}.filter-sepia-150{-webkit-filter:sepia(150%)}.filter-sepia-200{-webkit-filter:sepia(200%)}.filter-grayscale-25{-webkit-filter:grayscale(25%)}.filter-grayscale-50{-webkit-filter:grayscale(50%)}.filter-grayscale-75{-webkit-filter:grayscale(75%)}.filter-grayscale-100{-webkit-filter:grayscale()}.filter-glow{-webkit-filter:blur(2px)brightness(1.5)}.filter-distort{-webkit-filter:skewX(10deg)}.filter-vintage{-webkit-filter:sepia(50%)hue-rotate(20deg)}.filter-dreamy{-webkit-filter:blur(2px)hue-rotate(30deg)brightness(1.2)}.filter-container{color:#1e293b;background-color:#f8fafc;justify-content:space-between;min-height:calc(100vh - 60px);padding-top:60px;display:flex;position:relative}.filter-container .right,.filter-container .left{background-color:#fff;border-right:1px solid #e2e8f0;flex-direction:column;flex-shrink:0;align-items:center;width:320px;height:calc(100vh - 60px);padding:1.5rem 1.25rem;display:flex;overflow-y:auto;box-shadow:2px 0 8px #00000008}.filter-container .right .filter-title,.filter-container .left .filter-title{color:#0f172a;text-align:center;border-bottom:2px solid #e2e8f0;width:100%;margin-bottom:1.25rem;padding-bottom:.75rem;font-size:1.2rem;font-weight:700}.filter-container .right .input-lists,.filter-container .left .input-lists{flex-direction:column;gap:.85rem;width:100%;margin:0;display:flex}.filter-container .right .resetButton,.filter-container .left .resetButton{color:#334155;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:.65rem;width:100%;margin-top:1.5rem;margin-bottom:2rem;padding:.75rem;font-size:.95rem;font-weight:700;transition:all .2s}.filter-container .right .resetButton:hover,.filter-container .left .resetButton:hover{color:#fff;background:#ef4444;border-color:#ef4444}.filter-container .right{border-left:1px solid #e2e8f0;border-right:none;box-shadow:-2px 0 8px #00000008}.filter-container .right .input-select{color:#1e293b;cursor:pointer;background-color:#fff;border:1.5px solid #cbd5e1;border-radius:.5rem;outline:none;width:100%;margin-top:.4rem;padding:.6rem;font-weight:600}.filter-container .right .input-select:focus{border-color:#0284c7}.filter-container .center{background-color:#f1f5f9;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:1.25rem;height:calc(100vh - 60px);padding:1.5rem;display:flex;overflow-y:auto}.filter-container .center .image-controls-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;width:100%;max-width:640px;display:flex}.filter-container .center .image-controls-bar .sample-images{align-items:center;gap:.4rem;display:flex}.filter-container .center .image-controls-bar .sample-images .ctrl-label{color:#64748b;margin-right:.2rem;font-size:.85rem;font-weight:600}.filter-container .center .image-controls-bar .sample-images .sample-img-btn{color:#334155;cursor:pointer;background:#fff;border:1.5px solid #cbd5e1;border-radius:.5rem;width:34px;height:34px;font-weight:700;transition:all .2s}.filter-container .center .image-controls-bar .sample-images .sample-img-btn:hover,.filter-container .center .image-controls-bar .sample-images .sample-img-btn.active{color:#fff;background:#0284c7;border-color:#0284c7}.filter-container .center .image-controls-bar .custom-upload-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:.5rem;align-items:center;gap:.4rem;padding:.5rem .85rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.filter-container .center .image-controls-bar .custom-upload-btn:hover{color:#fff;background:#0f172a;border-color:#0f172a}.filter-container .center .preset-filters-bar{flex-wrap:wrap;justify-content:center;gap:.4rem;width:100%;max-width:640px;display:flex}.filter-container .center .preset-filters-bar .preset-btn{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:9999px;padding:.4rem .85rem;font-size:.85rem;font-weight:600;transition:all .2s}.filter-container .center .preset-filters-bar .preset-btn:hover,.filter-container .center .preset-filters-bar .preset-btn.active{color:#fff;background:#0284c7;border-color:#0284c7;box-shadow:0 2px 8px #0284c740}.filter-container .center .image-stage{background:#0f172a;border-radius:1rem;justify-content:center;align-items:center;width:100%;max-width:640px;min-height:280px;max-height:480px;display:flex;overflow:hidden;box-shadow:0 10px 25px #00000026}.filter-container .center .image-stage .filtered-img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:460px;transition:filter .15s,border .15s,border-radius .15s;display:block}.filter-container .center .code-block{color:#38bdf8;cursor:pointer;-webkit-user-select:all;user-select:all;background:#0f172a;border-radius:.75rem;width:100%;max-width:640px;padding:1rem 1.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem;transition:background .2s;position:relative;box-shadow:0 4px 12px #0000001a}.filter-container .center .code-block:after{content:attr(data-before-content);color:#fff;pointer-events:none;background:#ffffff1a;border-radius:.35rem;padding:.25rem .6rem;font-size:.75rem;font-weight:600;position:absolute;top:.75rem;right:.75rem}.filter-container .center .code-block:hover{background:#1e293b}.filter-container .center .mobile-filter-tabs{display:none}.filter-footer{text-align:center;color:#64748b;background:#fff;border-top:1px solid #e2e8f0;padding:1.25rem 0;font-size:.9rem}.filter-footer a{color:#0284c7;font-weight:600}@media screen and (width<=875px){.filter-container{flex-direction:column;height:auto;min-height:auto;padding-top:60px}.filter-container .center{order:1;gap:1rem;height:auto;padding:1rem}.filter-container .center .image-stage{min-height:220px;max-height:360px}.filter-container .center .mobile-filter-tabs{gap:.5rem;width:100%;max-width:640px;display:flex}.filter-container .center .mobile-filter-tabs .mobile-tab-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:.65rem;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex}.filter-container .center .mobile-filter-tabs .mobile-tab-btn.active{color:#fff;background:#0284c7;border-color:#0284c7;box-shadow:0 4px 12px #0284c740}.filter-container .left,.filter-container .right{border:none;width:100%;height:auto;max-height:none;padding:1.5rem 1rem;display:none}.filter-container .left.mobile-active,.filter-container .right.mobile-active{display:flex}.filter-container .left{order:2}.filter-container .left.mobile-active{display:flex}.filter-container .right{order:3}.filter-container .right.mobile-active{display:flex}}:root{--ip-bg:#f7f5f0;--ip-surface:#fff;--ip-surface-elevated:#fff;--ip-surface-hover:#efece4;--ip-surface-active:#e4e0d5;--ip-border:#e5e2da;--ip-border-light:#efece4;--ip-border-focus:#24251f;--ip-text-primary:#24251f;--ip-text-secondary:#57594f;--ip-text-muted:#7a7d70;--ip-text-subtle:#a2a697;--ip-accent-lime:#d0ed87;--ip-accent-lime-hover:#c2e26e;--ip-accent-lime-text:#24251f;--ip-accent-coral:#e07a5f;--ip-accent-lavender:#8a84e2;--ip-accent-emerald:#2a9d8f;--ip-accent-warm:#e9c46a;--ip-btn-primary-bg:#24251f;--ip-btn-primary-text:#f7f5f0;--ip-btn-primary-hover:#383a31;--ip-btn-accent-bg:#d0ed87;--ip-btn-accent-text:#24251f;--ip-btn-accent-hover:#c2e26e;--ip-btn-secondary-bg:#fff;--ip-btn-secondary-text:#24251f;--ip-btn-secondary-border:#e5e2da;--ip-btn-secondary-hover:#efece4;--ip-primary:#24251f;--ip-primary-hover:#383a31;--ip-primary-light:#efece4;--ip-primary-glow:#d0ed8759;--ip-radius-sm:8px;--ip-radius-md:12px;--ip-radius-lg:16px;--ip-radius-full:9999px;--ip-shadow-xs:0 1px 3px #24251f0a;--ip-shadow-sm:0 3px 10px #24251f0f;--ip-shadow-md:0 10px 28px -4px #24251f14;--ip-shadow-lg:0 24px 48px -12px #24251f1f;--sidebar-width:250px;--ip-transition-fast:.15s cubic-bezier(.16, 1, .3, 1);--ip-transition-normal:.22s cubic-bezier(.16, 1, .3, 1);--ip-transition-slow:.32s cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--ip-bg:#151714;--ip-surface:#222520;--ip-surface-elevated:#2b3029;--ip-surface-hover:#2b3029;--ip-surface-active:#363c33;--ip-border:#32382f;--ip-border-light:#282e25;--ip-border-focus:#d0ed87;--ip-text-primary:#f3f3ee;--ip-text-secondary:#b8baaf;--ip-text-muted:#83867a;--ip-text-subtle:#5c6054;--ip-btn-primary-bg:#d0ed87;--ip-btn-primary-text:#151714;--ip-btn-primary-hover:#e0f5a8;--ip-btn-accent-bg:#d0ed87;--ip-btn-accent-text:#151714;--ip-btn-accent-hover:#e0f5a8;--ip-btn-secondary-bg:#222520;--ip-btn-secondary-text:#f3f3ee;--ip-btn-secondary-border:#32382f;--ip-btn-secondary-hover:#2b3029;--ip-primary:#d0ed87;--ip-primary-hover:#e0f5a8;--ip-primary-light:#2b3029;--ip-primary-glow:#d0ed8733;--ip-shadow-xs:0 1px 3px #0000004d;--ip-shadow-sm:0 3px 10px #0006;--ip-shadow-md:0 10px 28px -4px #00000080;--ip-shadow-lg:0 24px 48px -12px #000000b3}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.ip-pwa-update-banner{z-index:1000000;color:#f8fafc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a;border:1px solid #ffffff26;border-radius:14px;align-items:center;gap:16px;padding:12px 18px;transition:opacity .25s,transform .25s;animation:.3s cubic-bezier(.16,1,.3,1) forwards pwaSlideUp;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 16px 36px -4px #0006,0 0 0 1px #ffffff0d}@media (width<=640px){.ip-pwa-update-banner{flex-direction:column;align-items:stretch;gap:12px;bottom:20px;left:16px;right:16px}}.ip-pwa-update-banner.fade-out{opacity:0;transform:translateY(12px)}.ip-pwa-update-banner .pwa-update-content{align-items:center;gap:10px;font-size:.9rem;font-weight:600;display:inline-flex}.ip-pwa-update-banner .pwa-update-content i{color:var(--ip-accent-lime,#d0ed87);font-size:1rem}.ip-pwa-update-banner .pwa-update-actions{align-items:center;gap:8px;display:inline-flex}@media (width<=640px){.ip-pwa-update-banner .pwa-update-actions{justify-content:flex-end}}.ip-pwa-update-banner .pwa-update-actions button{cursor:pointer;border:none;border-radius:8px;padding:7px 14px;font-size:.825rem;font-weight:700;transition:all .15s}.ip-pwa-update-banner .pwa-update-actions button:focus-visible{outline:2px solid var(--ip-accent-lime,#d0ed87);outline-offset:2px}.ip-pwa-update-banner .pwa-update-actions .btn-pwa-later{color:#94a3b8;background:0 0}.ip-pwa-update-banner .pwa-update-actions .btn-pwa-later:hover{color:#fff;background:#ffffff14}.ip-pwa-update-banner .pwa-update-actions .btn-pwa-update{background:var(--ip-btn-accent-bg,#d0ed87);color:var(--ip-btn-accent-text,#24251f)}.ip-pwa-update-banner .pwa-update-actions .btn-pwa-update:hover{background:var(--ip-btn-accent-hover,#c2e26e);transform:translateY(-1px);box-shadow:0 4px 12px #d0ed8759}@keyframes pwaSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}html.theme-animating,html.theme-animating :not(.palette-swatch):not(.swatch-color):not(.gradient-disc):not(.preview-color-bubble):not(.color-box):not(.image-layer):not(canvas):not(img):not(.preview-canvas):not(.original-pic):not(.filter-pic),html.theme-animating :before,html.theme-animating :after{transition:background-color .65s cubic-bezier(.4,0,.2,1),color .65s cubic-bezier(.4,0,.2,1),border-color .65s cubic-bezier(.4,0,.2,1),box-shadow .65s cubic-bezier(.4,0,.2,1),fill .65s cubic-bezier(.4,0,.2,1),stroke .65s cubic-bezier(.4,0,.2,1)!important}html.theme-animating .ip-palette-display *,html.theme-animating .theme-sandbox-canvas *,html.theme-animating #uiPreviewHero *,html.theme-animating canvas,html.theme-animating img,html.theme-animating .swatch-color-bubble,html.theme-animating .mini-swatch,html.theme-animating .shadow-preview-element,html.theme-animating .gradient-disc,html.theme-animating .image-layer{transition:none!important}button,input[type=button],input[type=submit],input[type=reset],[role=button],.btn,.tab-btn,.theme-toggle-btn,.mode-tab,.filter-pill,.filter-chip,.shadow-card,.wada-card,.gradient-card,.action-btn-outline,.btn-action-primary,.btn-tool-outline,.btn-tool-action,.btn-viewport,.btn-export-tokens,.btn-open-export-manifest,.btn-save-theme,.btn-save-as-theme,.btn-download-file,.btn-copy-code,.btn-copy-ramp-all,.copy-css-btn,.export-tab-btn,.export-action-btn,.browse-link,.card-fav-btn,.shadow-fav-btn{cursor:pointer}button:disabled,button[disabled],button.disabled,button[aria-disabled=true],input[type=button]:disabled,input[type=button][disabled],input[type=button].disabled,input[type=button][aria-disabled=true],input[type=submit]:disabled,input[type=submit][disabled],input[type=submit].disabled,input[type=submit][aria-disabled=true],input[type=reset]:disabled,input[type=reset][disabled],input[type=reset].disabled,input[type=reset][aria-disabled=true],[role=button]:disabled,[role=button][disabled],[role=button].disabled,[role=button][aria-disabled=true],.btn:disabled,.btn[disabled],.btn.disabled,.btn[aria-disabled=true],.tab-btn:disabled,.tab-btn[disabled],.tab-btn.disabled,.tab-btn[aria-disabled=true],.theme-toggle-btn:disabled,.theme-toggle-btn[disabled],.theme-toggle-btn.disabled,.theme-toggle-btn[aria-disabled=true],.mode-tab:disabled,.mode-tab[disabled],.mode-tab.disabled,.mode-tab[aria-disabled=true],.filter-pill:disabled,.filter-pill[disabled],.filter-pill.disabled,.filter-pill[aria-disabled=true],.filter-chip:disabled,.filter-chip[disabled],.filter-chip.disabled,.filter-chip[aria-disabled=true],.shadow-card:disabled,.shadow-card[disabled],.shadow-card.disabled,.shadow-card[aria-disabled=true],.wada-card:disabled,.wada-card[disabled],.wada-card.disabled,.wada-card[aria-disabled=true],.gradient-card:disabled,.gradient-card[disabled],.gradient-card.disabled,.gradient-card[aria-disabled=true],.action-btn-outline:disabled,.action-btn-outline[disabled],.action-btn-outline.disabled,.action-btn-outline[aria-disabled=true],.btn-action-primary:disabled,.btn-action-primary[disabled],.btn-action-primary.disabled,.btn-action-primary[aria-disabled=true],.btn-tool-outline:disabled,.btn-tool-outline[disabled],.btn-tool-outline.disabled,.btn-tool-outline[aria-disabled=true],.btn-tool-action:disabled,.btn-tool-action[disabled],.btn-tool-action.disabled,.btn-tool-action[aria-disabled=true],.btn-viewport:disabled,.btn-viewport[disabled],.btn-viewport.disabled,.btn-viewport[aria-disabled=true],.btn-export-tokens:disabled,.btn-export-tokens[disabled],.btn-export-tokens.disabled,.btn-export-tokens[aria-disabled=true],.btn-open-export-manifest:disabled,.btn-open-export-manifest[disabled],.btn-open-export-manifest.disabled,.btn-open-export-manifest[aria-disabled=true],.btn-save-theme:disabled,.btn-save-theme[disabled],.btn-save-theme.disabled,.btn-save-theme[aria-disabled=true],.btn-save-as-theme:disabled,.btn-save-as-theme[disabled],.btn-save-as-theme.disabled,.btn-save-as-theme[aria-disabled=true],.btn-download-file:disabled,.btn-download-file[disabled],.btn-download-file.disabled,.btn-download-file[aria-disabled=true],.btn-copy-code:disabled,.btn-copy-code[disabled],.btn-copy-code.disabled,.btn-copy-code[aria-disabled=true],.btn-copy-ramp-all:disabled,.btn-copy-ramp-all[disabled],.btn-copy-ramp-all.disabled,.btn-copy-ramp-all[aria-disabled=true],.copy-css-btn:disabled,.copy-css-btn[disabled],.copy-css-btn.disabled,.copy-css-btn[aria-disabled=true],.export-tab-btn:disabled,.export-tab-btn[disabled],.export-tab-btn.disabled,.export-tab-btn[aria-disabled=true],.export-action-btn:disabled,.export-action-btn[disabled],.export-action-btn.disabled,.export-action-btn[aria-disabled=true],.browse-link:disabled,.browse-link[disabled],.browse-link.disabled,.browse-link[aria-disabled=true],.card-fav-btn:disabled,.card-fav-btn[disabled],.card-fav-btn.disabled,.card-fav-btn[aria-disabled=true],.shadow-fav-btn:disabled,.shadow-fav-btn[disabled],.shadow-fav-btn.disabled,.shadow-fav-btn[aria-disabled=true]{opacity:.55;pointer-events:none;cursor:not-allowed!important}.action-btn-outline,.btn-tool-outline{border-radius:var(--ip-radius-md);border:1px solid var(--ip-border);background:var(--ip-surface);color:var(--ip-text-primary);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-family:inherit;font-size:.85rem;font-weight:600;line-height:1.2;display:inline-flex}.action-btn-outline i,.btn-tool-outline i{color:var(--ip-text-muted);transition:color var(--ip-transition-fast);font-size:.9rem}.action-btn-outline:hover,.btn-tool-outline:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);color:var(--ip-text-primary);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.action-btn-outline:hover i,.btn-tool-outline:hover i{color:var(--ip-text-primary)}.action-btn-outline:active,.btn-tool-outline:active{box-shadow:var(--ip-shadow-xs);transform:translateY(0)}.action-btn-outline:focus-visible,.btn-tool-outline:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}.btn-action-primary,.btn-primary-action{border-radius:var(--ip-radius-md);background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border:1px solid var(--ip-btn-primary-bg);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);justify-content:center;align-items:center;gap:8px;padding:8px 18px;font-family:inherit;font-size:.85rem;font-weight:700;line-height:1.2;display:inline-flex}.btn-action-primary i,.btn-primary-action i{font-size:.9rem}.btn-action-primary:hover,.btn-primary-action:hover{background:var(--ip-btn-primary-hover);border-color:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.btn-action-primary:active,.btn-primary-action:active{transform:translateY(0)}.btn-action-primary:focus-visible,.btn-primary-action:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}.btn-export-tokens,.btn-open-export-manifest{background:var(--ip-surface);color:var(--ip-text-primary);border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);justify-content:center;align-items:center;gap:8px;padding:8px 18px;font-family:inherit;font-size:.85rem;font-weight:700;line-height:1.2;display:inline-flex}.btn-export-tokens i,.btn-open-export-manifest i{color:var(--ip-accent-coral,#e07a5f);transition:transform var(--ip-transition-fast);font-size:.9rem}.btn-export-tokens:hover,.btn-open-export-manifest:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.btn-export-tokens:hover i,.btn-open-export-manifest:hover i{transform:translateY(-1px)}.btn-export-tokens:active,.btn-open-export-manifest:active{transform:translateY(0)}.btn-export-tokens:focus-visible,.btn-open-export-manifest:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}.theme-viewport-switch{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);align-items:center;gap:2px;padding:3px;display:inline-flex}.theme-viewport-switch .btn-viewport{border-radius:var(--ip-radius-sm);color:var(--ip-text-muted);cursor:pointer;transition:all var(--ip-transition-fast);background:0 0;border:none;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;display:inline-flex}.theme-viewport-switch .btn-viewport i{opacity:.8;font-size:.85rem}.theme-viewport-switch .btn-viewport:hover:not(.active){color:var(--ip-text-primary);background:var(--ip-surface-hover)}.theme-viewport-switch .btn-viewport.active{background:var(--ip-btn-primary-bg)!important;color:var(--ip-btn-primary-text)!important;box-shadow:var(--ip-shadow-xs)!important;font-weight:700!important}.theme-viewport-switch .btn-viewport.active i{opacity:1}.ip-theme-flare{pointer-events:none;z-index:99999;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);position:fixed;inset:0}.ip-theme-flare[data-direction=dusk]{background:radial-gradient(circle at 10% 15%,#8a84e229 0%,#15171426 50%,#0000 75%)}.ip-theme-flare[data-direction=dawn]{background:radial-gradient(circle at 90% 15%,#fef08a33 0%,#d0ed8724 45%,#0000 75%)}.ip-theme-flare.active{opacity:1}@media (prefers-reduced-motion:reduce){html.theme-animating *{transition:none!important}.ip-theme-flare{display:none!important}}.ip-shadows-container{background:var(--ip-bg);min-width:0;color:var(--ip-text-primary);flex-direction:column;flex:1;min-height:100vh;transition:background .3s;display:flex}.shadow-hero{width:100%;max-width:1400px;margin:0 auto;padding:2.25rem 2rem 1.5rem}@media (width<=768px){.shadow-hero{padding:1.5rem 1rem}}.shadow-hero .shadow-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-text-secondary);background:var(--ip-surface-hover);border:1px solid var(--ip-border);border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.shadow-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800}.shadow-hero p{color:var(--ip-text-secondary);max-width:720px;margin:0 0 1.75rem;font-size:1.05rem;line-height:1.55}.shadow-controls-bar{flex-direction:column;gap:1.25rem;margin-bottom:2rem;display:flex}.shadow-controls-bar .controls-top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.shadow-controls-bar .shadow-search-box{flex:200px;width:100%;min-width:0;max-width:500px;position:relative}.shadow-controls-bar .shadow-search-box i{color:var(--ip-text-muted);pointer-events:none;font-size:.95rem;position:absolute;top:50%;left:1.15rem;transform:translateY(-50%)}.shadow-controls-bar .shadow-search-box input{border:1px solid var(--ip-border);background:var(--ip-surface);width:100%;color:var(--ip-text-primary);border-radius:12px;outline:none;padding:.8rem 1.2rem .8rem 2.85rem;font-size:.95rem;font-weight:500;transition:all .2s;box-shadow:0 2px 6px #00000005}.shadow-controls-bar .shadow-search-box input::placeholder{color:var(--ip-text-muted)}.shadow-controls-bar .shadow-search-box input:focus{border-color:var(--ip-border-focus);box-shadow:0 0 0 3px var(--ip-primary-glow)}.shadow-controls-bar .canvas-switcher{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:12px;align-items:center;gap:.35rem;padding:4px;display:inline-flex;box-shadow:0 2px 8px #0000000a}@media (width<=600px){.shadow-controls-bar .canvas-switcher{grid-template-columns:repeat(4,1fr);gap:2px;width:100%;padding:3px;display:grid}.shadow-controls-bar .canvas-switcher .canvas-btn{justify-content:center;gap:.25rem;padding:.4rem .2rem;font-size:.78rem}}.shadow-controls-bar .canvas-switcher .canvas-btn{color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:.45rem;min-height:36px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.shadow-controls-bar .canvas-switcher .canvas-btn:hover:not(.active){color:var(--ip-text-primary);background:var(--ip-surface-hover)}.shadow-controls-bar .canvas-switcher .canvas-btn.active{background:var(--ip-btn-primary-bg)!important;color:var(--ip-btn-primary-text)!important;border-color:var(--ip-btn-primary-bg)!important;font-weight:700!important;box-shadow:0 2px 8px #00000029!important}.shadow-controls-bar .canvas-switcher .canvas-btn:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}.shadow-controls-bar .shadow-filter-chips{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.shadow-controls-bar .shadow-filter-chips .filter-chip{border:1px solid var(--ip-border);background:var(--ip-surface);color:var(--ip-text-primary);cursor:pointer;border-radius:9999px;padding:.45rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.shadow-controls-bar .shadow-filter-chips .filter-chip:hover:not(.active){background:var(--ip-surface-hover);color:var(--ip-text-primary);border-color:var(--ip-border-hover)}.shadow-controls-bar .shadow-filter-chips .filter-chip.active{background:var(--ip-btn-primary-bg)!important;color:var(--ip-btn-primary-text)!important;border-color:var(--ip-btn-primary-bg)!important;font-weight:700!important;box-shadow:0 2px 8px #00000024!important}.shadow-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.5rem;width:100%;max-width:1400px;margin:0 auto;padding:0 2rem 4rem;display:grid}@media (width<=768px){.shadow-grid{grid-template-columns:1fr;padding:0 1rem 3rem}}.shadow-card{background:var(--ip-surface);border:1px solid var(--ip-border);cursor:pointer;border-radius:16px;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.shadow-card:hover{border-color:var(--ip-border-focus);box-shadow:var(--ip-shadow-md);transform:translateY(-3px)}.shadow-card:hover .shadow-preview-element{transform:translateY(-2px)}.shadow-card.selected{transform:translateY(-2px);border-color:var(--ip-primary)!important;box-shadow:0 0 0 2.5px var(--ip-primary), 0 12px 28px -4px var(--ip-primary-glow)!important}.shadow-card.selected .shadow-card-top .shadow-badge{background:var(--ip-btn-accent-bg);color:var(--ip-btn-accent-text);font-weight:800}.shadow-card:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:3px}.shadow-card .shadow-card-top{background:var(--ip-surface);justify-content:space-between;align-items:center;padding:.9rem 1.15rem .65rem;display:flex}.shadow-card .shadow-card-top .shadow-badge{color:var(--ip-text-secondary);background:var(--ip-surface-hover);border:1px solid var(--ip-border);border-radius:6px;padding:.25rem .6rem;font-size:.75rem;font-weight:700}.shadow-card .shadow-card-top .shadow-fav-btn{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;padding:.2rem;font-size:.95rem;transition:color .2s,transform .15s}.shadow-card .shadow-card-top .shadow-fav-btn:hover{color:var(--ip-accent-coral,#ef4444);transform:scale(1.15)}.shadow-card .shadow-card-top .shadow-fav-btn.active{color:var(--ip-accent-coral,#ef4444)}.shadow-card .shadow-canvas-stage{cursor:pointer;background:#f1f5f9;justify-content:center;align-items:center;height:180px;padding:1.5rem;transition:background .25s;display:flex;position:relative}.shadow-card .shadow-canvas-stage .shadow-preview-element{color:#1e293b;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #00000014;border-radius:12px;justify-content:center;align-items:center;width:140px;height:90px;font-size:.8rem;font-weight:600;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex}.shadow-card .shadow-card-bottom{border-top:1px solid var(--ip-border);background:var(--ip-surface);justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 1.15rem;display:flex}.shadow-card .shadow-card-bottom .shadow-code-snippet{color:var(--ip-text-primary);white-space:nowrap;text-overflow:ellipsis;background:var(--ip-surface-hover);border:1px solid var(--ip-border);border-radius:6px;max-width:170px;padding:.2rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;overflow:hidden}.shadow-card .shadow-card-bottom .copy-css-btn{border:1px solid var(--ip-border);background:var(--ip-surface);color:var(--ip-text-primary);cursor:pointer;border-radius:8px;flex-shrink:0;align-items:center;gap:.35rem;padding:.4rem .8rem;font-size:.785rem;font-weight:600;transition:all .2s;display:inline-flex}.shadow-card .shadow-card-bottom .copy-css-btn:hover{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-color:var(--ip-btn-primary-bg)}.shadow-card .shadow-card-bottom .copy-css-btn.copied{background:var(--ip-accent-emerald,#10b981);color:#fff;border-color:var(--ip-accent-emerald,#10b981)}[data-canvas=warm] .shadow-card .shadow-canvas-stage{background:#f4efe6}[data-canvas=warm] .shadow-card .shadow-canvas-stage .shadow-preview-element{color:#1e293b;background:#fff;border:1px solid #00000014}[data-canvas=white] .shadow-card .shadow-canvas-stage{background:#fff}[data-canvas=white] .shadow-card .shadow-canvas-stage .shadow-preview-element{color:#1e293b;background:#f8fafc;border:1px solid #0000001f}[data-canvas=light] .shadow-card .shadow-canvas-stage{background:#f1f5f9}[data-canvas=light] .shadow-card .shadow-canvas-stage .shadow-preview-element{color:#1e293b;background:#fff;border:1px solid #00000014}[data-canvas=dark] .shadow-card .shadow-canvas-stage{background:#0f172a}[data-canvas=dark] .shadow-card .shadow-canvas-stage .shadow-preview-element{color:#cbd5e1;background:#1e293b;border:1px solid #ffffff1f}#overlay{z-index:99999;cursor:zoom-out;background-color:#000;width:0;height:0;transition:width .4s,height .4s,top .3s,left .3s,border-radius .4s;position:fixed;overflow:hidden}.ip-gradients-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.gradient-hero{width:100%;max-width:1400px;margin:0 auto;padding:2.25rem 2rem 1.5rem}@media (width<=768px){.gradient-hero{padding:1.5rem 1rem}}.gradient-hero .gradient-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-primary);background:#1e3a8a14;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.gradient-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800}.gradient-hero p{color:var(--ip-text-muted);max-width:720px;margin:0 0 1.75rem;font-size:1.05rem;line-height:1.55}.gradient-controls-bar{flex-direction:column;gap:1.25rem;margin-bottom:2rem;display:flex}.gradient-controls-bar .controls-top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.gradient-controls-bar .gradient-search-box{flex:1;min-width:260px;max-width:500px;position:relative}.gradient-controls-bar .gradient-search-box i{color:#94a3b8;pointer-events:none;font-size:.95rem;position:absolute;top:50%;left:1.15rem;transform:translateY(-50%)}.gradient-controls-bar .gradient-search-box input{border:1px solid var(--ip-border);background:var(--ip-surface);width:100%;color:var(--ip-text-primary);border-radius:12px;outline:none;padding:.8rem 1.2rem .8rem 2.85rem;font-size:.95rem;font-weight:500;transition:all .2s;box-shadow:0 2px 6px #00000005}.gradient-controls-bar .gradient-search-box input:focus{border-color:var(--ip-border-focus);box-shadow:0 0 0 3px var(--ip-primary-glow)}.gradient-controls-bar .gradient-filter-chips{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.gradient-controls-bar .gradient-filter-chips .filter-chip{border:1px solid var(--ip-border);background:var(--ip-surface);color:var(--ip-text-secondary);cursor:pointer;border-radius:9999px;padding:.45rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.gradient-controls-bar .gradient-filter-chips .filter-chip:hover,.gradient-controls-bar .gradient-filter-chips .filter-chip.active{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-color:var(--ip-btn-primary-bg)}.gradient-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.5rem;width:100%;max-width:1400px;margin:0 auto;padding:0 2rem 4rem;display:grid}@media (width<=768px){.gradient-grid{grid-template-columns:1fr;padding:0 1rem 3rem}}.gradient-card{background:var(--ip-surface);border:1px solid var(--ip-border);cursor:pointer;border-radius:16px;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.gradient-card:hover{border-color:var(--ip-border-focus);box-shadow:var(--ip-shadow-md);transform:translateY(-4px)}.gradient-card:hover .gradient-disc{transform:scale(1.04)}.gradient-card .gradient-card-top{justify-content:space-between;align-items:center;padding:.9rem 1.15rem .5rem;display:flex}.gradient-card .gradient-card-top .gradient-badge{color:var(--ip-text-muted);background:var(--ip-surface-hover);border-radius:6px;padding:.25rem .6rem;font-size:.75rem;font-weight:700}.gradient-card .gradient-card-top .top-actions{align-items:center;gap:.4rem;display:flex}.gradient-card .gradient-card-top .top-actions .btn-icon-action{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;padding:.2rem .3rem;font-size:.95rem;transition:color .15s,transform .15s}.gradient-card .gradient-card-top .top-actions .btn-icon-action:hover{color:var(--ip-primary);transform:scale(1.15)}.gradient-card .gradient-card-top .top-actions .btn-icon-action.fav-btn:hover,.gradient-card .gradient-card-top .top-actions .btn-icon-action.fav-btn.active{color:var(--ip-accent-coral,#ef4444)}.gradient-card .gradient-canvas-stage{background:var(--ip-surface-hover);cursor:zoom-in;justify-content:center;align-items:center;height:190px;padding:1.5rem;display:flex;position:relative}.gradient-card .gradient-canvas-stage .gradient-disc{border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;display:flex;box-shadow:0 10px 25px -5px #0000002e,0 0 0 1px #0000000d}.gradient-card .gradient-canvas-stage .gradient-disc .zoom-indicator{opacity:0;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a99;border-radius:9999px;padding:.3rem .6rem;font-size:.75rem;font-weight:600;transition:opacity .2s}.gradient-card .gradient-canvas-stage .gradient-disc:hover .zoom-indicator{opacity:1}.gradient-card .gradient-card-bottom{border-top:1px solid var(--ip-border);background:var(--ip-surface);justify-content:space-between;align-items:center;gap:.5rem;padding:.85rem 1.15rem;display:flex}.gradient-card .gradient-card-bottom .color-stops-preview{align-items:center;gap:4px;display:flex}.gradient-card .gradient-card-bottom .color-stops-preview .stop-dot{border:1.5px solid var(--ip-surface);border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}.gradient-card .gradient-card-bottom .copy-css-btn{border:1px solid var(--ip-border);background:var(--ip-surface);color:var(--ip-text-primary);cursor:pointer;border-radius:8px;align-items:center;gap:.35rem;padding:.4rem .8rem;font-size:.785rem;font-weight:600;transition:all .2s;display:inline-flex}.gradient-card .gradient-card-bottom .copy-css-btn:hover{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-color:var(--ip-btn-primary-bg)}.gradient-card .gradient-card-bottom .copy-css-btn.copied{background:var(--ip-accent-emerald,#10b981);color:#fff;border-color:var(--ip-accent-emerald,#10b981)}:root{--palette-gen-primary:#ecf1f3;--secondary:#a0a5ab;--secondary-hover:#60656c;--search-bg:var(--ip-surface-hover,#dfe8ec);--search-color:var(--ip-text-muted,#93989f);--red:#f05656;--dark-blue:var(--ip-text-primary,#31475e);--dark-blue-soft:var(--ip-text-secondary,#456687);--dark:var(--ip-text-primary,#212730);--grey:var(--ip-border,#dedede);--grey-soft:var(--ip-surface-hover,#f2f2f2)}.how-works{-webkit-backdrop-filter:blur(8px);z-index:2000;color:#ebebeb;text-shadow:2px 2px 4px #00000080;visibility:hidden;opacity:0;background:#000000bf;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5rem;transition:visibility .25s,opacity .25s;display:flex;position:fixed;inset:0}.how-works .fa-xmark{cursor:pointer;margin:1.5rem 1.5rem auto auto;padding:1rem;font-size:1.5rem;transition:transform .2s}.how-works .fa-xmark:hover{transform:scale(1.15)}.how-works .content{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;width:min(90%,540px);margin-bottom:auto;font-size:1.4rem;line-height:1.5;display:flex}.how-works .content img{filter:invert(99%)sepia(1%)saturate(124%)hue-rotate(255deg)brightness(122%)contrast(90%)drop-shadow(2px 2px 4px #00000080);width:140px}@media (width<=750px){.how-works .content img{width:90px}}.how-works .content .how-works-btn{color:#0f172a;cursor:pointer;background:#38bdf8;border:none;border-radius:9999px;padding:.75rem 2rem;font-size:1.1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 14px #38bdf859}.how-works .content .how-works-btn:hover{background:#7dd3fc;transform:translateY(-2px)}@media (width<=750px){.how-works .content{font-size:1.15rem}}.how-works.active{visibility:visible;opacity:1}.palette-drawer-backdrop{-webkit-backdrop-filter:blur(3px);z-index:100;opacity:0;pointer-events:none;background:#00000073;transition:opacity .3s;position:fixed;inset:0}.palette-drawer-backdrop.active{opacity:1;pointer-events:auto}#container{flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100dvh;min-height:100vh;padding-top:60px;display:flex;position:relative;overflow:hidden}#container .alert-container{z-index:-1;pointer-events:none;width:min(90vw,480px);height:70px;position:fixed;top:75px;left:50%;overflow:visible;transform:translate(-50%)}#container #alert{z-index:100;color:#fff;-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff4d;border-radius:9999px;justify-content:center;align-items:center;gap:.75rem;width:100%;padding:.9rem 1.25rem;font-size:1.15rem;font-weight:500;transition:bottom .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:-150%;box-shadow:0 10px 30px #00000040}#container #alert.error{background:#ef4444eb}#container #alert.success{background:#10b981eb}#container #alert.warning{background:#f59e0beb}#container #typeBox,#container #saveBox,#container .palette-modal{background:var(--ip-surface,#fffffff2);-webkit-backdrop-filter:blur(14px);border:1px solid var(--ip-border,#ffffffb3);color:var(--ip-text-primary);z-index:1000;visibility:hidden;opacity:0;border-radius:1.25rem;flex-direction:column;gap:1.1rem;width:min(92vw,460px);padding:1.75rem;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.96);box-shadow:0 20px 40px #00000038}[data-theme=dark] #container #typeBox,[data-theme=dark] #container #saveBox,[data-theme=dark] #container .palette-modal{background:var(--ip-surface);border-color:var(--ip-border);color:var(--ip-text-primary)}#container #typeBox.active,#container #saveBox.active,#container .palette-modal.active{visibility:visible;opacity:1;transform:translate(-50%,-50%)scale(1)}#container #typeBox .fa-xmark,#container #saveBox .fa-xmark,#container .palette-modal .fa-xmark{cursor:pointer;color:var(--ip-text-muted);padding:.5rem;font-size:1.25rem;transition:color .2s,transform .2s;position:absolute;top:1rem;right:1rem}#container #typeBox .fa-xmark:hover,#container #saveBox .fa-xmark:hover,#container .palette-modal .fa-xmark:hover{color:var(--ip-accent-coral,#ef4444);transform:scale(1.15)}#container #typeBox .palette-title,#container #typeBox .modal-title,#container #saveBox .palette-title,#container #saveBox .modal-title,#container .palette-modal .palette-title,#container .palette-modal .modal-title{color:var(--ip-text-primary);margin-right:auto;font-size:1.35rem;font-weight:700}#container #colorTypes,#container #palette-name{box-shadow:var(--ip-shadow-xs);background-color:var(--ip-surface);color:var(--ip-text-primary);border:1.5px solid var(--ip-border);border-radius:.65rem;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem}#container #colorTypes:focus,#container #palette-name:focus{border-color:var(--ip-border-focus)}#container #colorTypes{cursor:pointer;appearance:none}#container .selectBox{justify-content:center;align-items:center;width:100%;display:flex;position:relative}#container .selectBox .fa-chevron-down{pointer-events:none;color:#64748b;position:absolute;right:1rem}#container #typeBox .saveType,#container #saveBox .saveSubmit,#container .export-action-btn{background-color:var(--dark-blue);color:#fff;cursor:pointer;border:none;border-radius:.65rem;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1.25rem;font-size:1rem;font-weight:600;transition:background .2s,transform .2s;display:inline-flex;box-shadow:0 4px 10px #0000001f}#container #typeBox .saveType:hover,#container #saveBox .saveSubmit:hover,#container .export-action-btn:hover{background-color:var(--dark-blue-soft);transform:translateY(-1px)}#container #typeBox .saveType:disabled,#container #saveBox .saveSubmit:disabled,#container .export-action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}#container .export-tabs{background:#e2e8f0;border-radius:.65rem;flex-wrap:wrap;gap:.35rem;padding:.3rem;display:flex}#container .export-tabs .export-tab{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:.5rem;padding:.4rem .75rem;font-size:.85rem;font-weight:600;transition:all .2s}#container .export-tabs .export-tab.active,#container .export-tabs .export-tab:hover{color:#0f172a;background:#fff;box-shadow:0 1px 3px #0000001a}#container .export-textarea{color:#38bdf8;resize:none;background:#0f172a;border:1px solid #cbd5e1;border-radius:.65rem;outline:none;width:100%;padding:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.45}#container .export-btn-group{gap:.75rem;width:100%;display:flex}#container .export-btn-group .export-action-btn.secondary{background:#334155}#container .export-btn-group .export-action-btn.secondary:hover{background:#1e293b}#container .image-dropzone{cursor:pointer;color:#475569;text-align:center;background:#f8fafc;border:2px dashed #94a3b8;border-radius:1rem;flex-direction:column;align-items:center;gap:.5rem;padding:1.75rem 1rem;font-size:.95rem;transition:all .2s;display:flex}#container .image-dropzone input[type=file]{display:none}#container .image-dropzone i{color:#0284c7;font-size:2.2rem}#container .image-dropzone:hover,#container .image-dropzone.drag-hover{background:#0284c70f;border-color:#0284c7}#container .image-palette-preview{background:#e2e8f0;border-radius:.65rem;height:48px;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000001a}#container .image-palette-preview .image-swatch{flex:1;height:100%}#container .palette-top-bar{z-index:10;pointer-events:auto;align-items:center;gap:.6rem;display:flex;position:absolute;top:60px;left:50%;transform:translate(-50%)}#container .palette-top-bar .undo-redo-group{gap:.25rem;display:flex}#container .palette-top-bar .tool-btn{color:var(--blue-color);cursor:pointer;background-color:#edf2f4;border:1px solid #00000014;border-radius:0 0 .65rem .65rem;align-items:center;gap:.4rem;padding:.5rem .85rem;font-size:1rem;font-weight:600;transition:background .2s,color .2s,transform .2s;display:inline-flex;box-shadow:0 2px 8px #00000014}#container .palette-top-bar .tool-btn:hover:not(:disabled){color:var(--secondary-hover);background-color:#fff;transform:translateY(1px)}#container .palette-top-bar .tool-btn:disabled{opacity:.4;cursor:not-allowed}#container .palette-top-bar .save{cursor:pointer;width:140px;color:var(--blue-color);background-color:#edf2f4;border-radius:0 0 1rem 1rem;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:1.15rem;font-weight:700;transition:color .3s,background .3s;display:flex;box-shadow:0 2px 8px #0000001a}#container .palette-top-bar .save:hover{color:var(--secondary-hover);background-color:#fff}#container .palette-top-bar .tools-group{align-items:center;gap:.4rem;display:flex}#container .palette-top-bar .tool-btn.highlight-vibe{color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;box-shadow:0 2px 8px #f59e0b59}#container .palette-top-bar .tool-btn.highlight-vibe:hover{filter:brightness(1.1);color:#fff}#container .palette-top-bar .tool-btn.highlight-ui{color:#fff;background:linear-gradient(135deg,#0284c7,#2563eb);border:none;box-shadow:0 2px 8px #0284c759}#container .palette-top-bar .tool-btn.highlight-ui:hover{filter:brightness(1.1);color:#fff}#container .palette-top-bar .harmony-select-wrapper,#container .palette-top-bar .cvd-select-wrapper{background:#edf2f4;border-radius:0 0 .65rem .65rem;align-items:center;padding:0 .6rem;display:flex;position:relative;box-shadow:0 2px 8px #00000014}#container .palette-top-bar .harmony-select-wrapper i,#container .palette-top-bar .cvd-select-wrapper i{color:#64748b;pointer-events:none;font-size:.85rem}#container .palette-top-bar .harmony-select-wrapper .harmony-select,#container .palette-top-bar .harmony-select-wrapper .cvd-select,#container .palette-top-bar .cvd-select-wrapper .harmony-select,#container .palette-top-bar .cvd-select-wrapper .cvd-select{color:var(--blue-color);cursor:pointer;background:0 0;border:none;outline:none;padding:.5rem .4rem;font-size:.85rem;font-weight:600}#container .vibe-modal{align-items:stretch;max-width:500px}#container .vibe-modal .modal-badge-icon{color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:8px;font-size:20px;display:flex}#container .vibe-modal .modal-subtitle{color:#64748b;margin:0 0 1rem;font-size:.85rem;line-height:1.4}#container .vibe-modal .vibe-input-wrap{gap:8px;margin-bottom:1.25rem;display:flex}#container .vibe-modal .vibe-input-wrap input{color:#0f172a;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:10px;outline:none;flex:1;padding:10px 14px;font-size:.95rem}#container .vibe-modal .vibe-input-wrap input:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b26}#container .vibe-modal .vibe-input-wrap .vibe-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;border-radius:10px;align-items:center;gap:6px;padding:0 16px;font-size:.9rem;font-weight:600;transition:transform .2s,filter .2s;display:inline-flex}#container .vibe-modal .vibe-input-wrap .vibe-submit-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}#container .vibe-modal .vibe-chips-title{color:#475569;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.8rem;font-weight:700}#container .vibe-modal .vibe-chips-list{flex-wrap:wrap;gap:6px;display:flex}#container .vibe-modal .vibe-chips-list .vibe-chip{color:#334155;cursor:pointer;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:9999px;padding:6px 12px;font-size:.82rem;font-weight:600;transition:all .2s}#container .vibe-modal .vibe-chips-list .vibe-chip:hover{color:#fff;background:#0f172a;border-color:#0f172a;transform:translateY(-1px)}#container .ui-preview-modal{align-items:stretch;width:95vw;max-width:820px}#container .ui-preview-modal .preview-modal-header{justify-content:space-between;align-items:flex-start;width:100%;margin-bottom:1rem;display:flex}#container .ui-preview-modal .preview-modal-header .modal-subtitle{color:#64748b;margin:2px 0 0;font-size:.85rem}#container .ui-preview-modal .preview-modal-header .preview-header-actions{align-items:center;gap:12px;display:flex}#container .ui-preview-modal .preview-modal-header .preview-header-actions .theme-toggle-btn{color:#334155;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:9999px;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;font-weight:600;transition:all .2s;display:inline-flex}#container .ui-preview-modal .preview-modal-header .preview-header-actions .theme-toggle-btn:hover{background:#e2e8f0}#container .ui-preview-modal .preview-modal-header .preview-header-actions .close-ui-preview{color:#64748b;cursor:pointer;font-size:1.3rem}#container .ui-preview-modal .preview-modal-header .preview-header-actions .close-ui-preview:hover{color:#ef4444}#container .ui-preview-modal .ui-preview-canvas{border:1px solid #00000014;border-radius:14px;flex-direction:column;gap:20px;padding:24px;transition:background .3s,color .3s;display:flex}#container .ui-preview-modal .ui-preview-canvas.light-mode{color:#0f172a;background:#fff}#container .ui-preview-modal .ui-preview-canvas.dark-mode{color:#f8fafc;background:#090d16;border-color:#ffffff1a}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section{flex-direction:column;align-items:flex-start;gap:12px;display:flex}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section .preview-badge{border-radius:9999px;padding:4px 12px;font-size:.8rem;font-weight:700;display:inline-flex}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section .preview-headline{margin:0;font-size:1.6rem;font-weight:800;line-height:1.25}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section .preview-subtext{opacity:.8;max-width:580px;margin:0;font-size:.95rem;line-height:1.5}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section .preview-cta-row{gap:12px;margin-top:6px;display:flex}#container .ui-preview-modal .ui-preview-canvas .preview-hero-section .preview-cta-row button{cursor:pointer;border-radius:10px;padding:10px 20px;font-size:.9rem;font-weight:700;transition:all .2s}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid{grid-template-columns:1fr 1.4fr;gap:16px;display:grid}@media (width<=680px){#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid{grid-template-columns:1fr}}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card{border:1px solid #00000014;border-radius:12px;flex-direction:column;gap:8px;padding:18px;display:flex}.dark-mode #container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card{border-color:#ffffff14}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .card-header{justify-content:space-between;align-items:center;display:flex}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .card-header .card-icon{border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;display:inline-flex}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .card-header .metric-pill{border-radius:9999px;padding:2px 8px;font-size:.75rem;font-weight:700}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .metric-value{margin-top:4px;font-size:1.8rem;font-weight:800}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .metric-label{opacity:.7;font-size:.8rem}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .card-title{margin-bottom:4px;font-size:.95rem;font-weight:700}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-input-group{gap:8px;display:flex}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-input-group .preview-input{border-radius:8px;outline:none;flex:1;padding:8px 12px;font-family:monospace;font-size:.85rem}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-input-group .preview-btn-accent{cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:700}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-tags-row{gap:6px;margin-top:6px;display:flex}#container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-tags-row .preview-tag{border:1px solid #0000001a;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600}.dark-mode #container .ui-preview-modal .ui-preview-canvas .preview-bento-grid .preview-card .preview-tags-row .preview-tag{border-color:#ffffff26}#container #changeColor{cursor:pointer;width:160px;color:var(--blue-color);z-index:10;background-color:#edf2f4;border-radius:1rem 1rem 0 0;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:1.3rem;font-weight:700;transition:all .3s;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -2px 10px #0000001a}#container #changeColor:hover{color:var(--secondary-hover);background-color:#fff;padding-bottom:.8rem}#container aside.color-navbar{background-color:var(--primary);width:min(340px,20%);height:calc(100% - 114px);color:var(--secondary);z-index:200;border-left:1px solid #0000001a;flex-direction:column;align-items:center;gap:1rem;transition:right .3s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:60px;right:-100%;overflow-y:auto;box-shadow:-4px 0 20px #00000026}#container aside.color-navbar.active{right:0}#container aside.color-navbar .search-container{background-color:var(--search-bg);color:var(--search-color);align-items:center;width:100%;padding-right:1.5rem;display:flex;box-shadow:0 1px 4px #00000014}#container aside.color-navbar .search-container .search{background-color:var(--search-bg);color:var(--search-color);border:0;outline:none;width:100%;padding:1rem .5rem 1rem 1.5rem;font-size:1rem}#container aside.color-navbar .search-container .search::placeholder{color:var(--search-color)}#container aside.color-navbar .search-container .fa-magnifying-glass{font-size:1.1rem}#container aside.color-navbar .favorite{text-align:center;color:var(--dark-blue);margin:.75rem auto;font-size:1.2rem;font-weight:700}#container aside.color-navbar .colorList{flex-direction:column;align-items:center;width:100%;height:auto;padding:0 .5rem;display:flex;overflow-y:auto}#container aside.color-navbar .colorList .list-title{color:#475569;text-align:center;width:100%;margin-top:.75rem;font-size:.95rem;font-weight:600}#container aside.color-navbar .colorList .color-group{flex-direction:row-reverse;justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}#container aside.color-navbar .colorList .color-group .fa-xmark{cursor:pointer;color:#94a3b8;padding:.4rem;font-size:1.25rem;transition:color .2s}#container aside.color-navbar .colorList .color-group .fa-xmark:hover{color:var(--red)}#container aside.color-navbar .colorList .color-group .list-item{cursor:pointer;border-radius:.65rem;margin-top:.3rem;margin-bottom:.5rem;list-style:none;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden;box-shadow:0 2px 6px #00000026}#container aside.color-navbar .colorList .color-group .list-item:hover{transform:scale(1.03);box-shadow:0 4px 12px #0003}#container aside.color-navbar .colorList .color-group .list-item .list-color{width:44px;height:28px}#container aside.color-navbar .social{align-items:center;gap:.85rem;margin-top:auto;margin-bottom:1rem;display:flex}#container aside.color-navbar .social .fa-circle-question,#container aside.color-navbar .social a{color:var(--secondary);cursor:pointer;font-size:1.4rem;transition:color .2s,transform .2s}#container aside.color-navbar .social .fa-circle-question:hover,#container aside.color-navbar .social a:hover{color:var(--secondary-hover);transform:translateY(-2px)}#container main{width:100%;height:100%;position:relative}#container main #colors{grid-template-columns:repeat(5,1fr);width:100%;height:100%;display:grid}#container main #colors .palette{height:100%;transition:background-color .3s;position:relative}#container main #colors .palette .palette-items{flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;height:100%;font-size:1.2rem;transition:color .3s;display:flex}#container main #colors .palette .palette-items.is-light{color:#0f172a;text-shadow:none}#container main #colors .palette .palette-items.is-light span,#container main #colors .palette .palette-items.is-light i,#container main #colors .palette .palette-items.is-light .color-code{color:#0f172a;border-color:#0f172a1a}#container main #colors .palette .palette-items.is-light span:hover,#container main #colors .palette .palette-items.is-light i:hover,#container main #colors .palette .palette-items.is-light .color-code:hover{background:#0f172a1a;border-color:#0f172a40}#container main #colors .palette .palette-items.is-light .contrast-tag{color:#0f172a;background:#0f172a14;border:1px solid #0f172a26}#container main #colors .palette .palette-items.is-light .color-picker-label{background:#0f172a1a;border-color:#0f172a}#container main #colors .palette .palette-items.is-dark{color:#f8fafc;text-shadow:0 1px 3px #00000080}#container main #colors .palette .palette-items.is-dark span,#container main #colors .palette .palette-items.is-dark i,#container main #colors .palette .palette-items.is-dark .color-code{color:#f8fafc;border-color:#ffffff26}#container main #colors .palette .palette-items.is-dark span:hover,#container main #colors .palette .palette-items.is-dark i:hover,#container main #colors .palette .palette-items.is-dark .color-code:hover{background:#ffffff38;border-color:#fff6}#container main #colors .palette .palette-items.is-dark .contrast-tag{color:#fff;background:#fff3;border:1px solid #ffffff4d}#container main #colors .palette .palette-items.is-dark .color-picker-label{background:#fff3;border-color:#fff}#container main #colors .palette .palette-items span,#container main #colors .palette .palette-items i{cursor:pointer;border:1px solid #0000;border-radius:.75rem;padding:.85rem;transition:all .25s}#container main #colors .palette .palette-items .fa-copy{font-size:1.25rem}#container main #colors .palette .palette-items .color-code{letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:1px solid #0000;border-radius:.75rem;padding:.6rem .9rem;font-size:1.45rem;font-weight:700;transition:all .25s}#container main #colors .palette .palette-items .contrast-tag{letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-user-select:none;user-select:none;border-radius:9999px;margin-top:-.4rem;padding:.2rem .55rem;font-size:.72rem;font-weight:700}#container main #colors .palette .palette-items .color-picker-label{cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1.5px solid;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:transform .2s,box-shadow .2s;display:inline-flex;position:relative;box-shadow:0 2px 6px #00000026}#container main #colors .palette .palette-items .color-picker-label:after{content:"";background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;width:14px;height:14px}#container main #colors .palette .palette-items .color-picker-label:hover{transform:scale(1.12);box-shadow:0 4px 12px #00000040}#container main #colors .palette .palette-items .color-picker-label .color-picker{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}#container main #colors .palette .palette-items .colorsContainer{grid-template-rows:repeat(20,1fr);width:100%;height:100%;display:grid}#container main #colors .palette .palette-items .colorsContainer .vrbItems{cursor:pointer;text-shadow:0 1px 2px #00000080;color:#fff;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;transition:transform .1s;display:flex}#container main #colors .palette .palette-items .colorsContainer .vrbItems:hover{z-index:5;transform:scale(1.02)}#container .copyright.color-palette{background-color:var(--primary);color:var(--secondary);z-index:5;justify-content:center;align-items:center;gap:.4rem;width:100%;font-size:.85rem;display:flex;position:relative;box-shadow:0 -1px 3px #00000014;height:auto!important;margin:0!important;padding:.6rem 0!important}#container .copyright.color-palette a{color:var(--dark-blue);font-weight:600}#container .copyright.color-palette a:hover{text-decoration:underline}@media (width<=1024px){#container .palette-top-bar{gap:.35rem}#container .palette-top-bar .tool-btn{padding:.45rem .65rem;font-size:.9rem}#container .palette-top-bar .save{width:120px;font-size:1rem}#container .palette-top-bar .harmony-select-wrapper .harmony-select{font-size:.85rem}#container aside.color-navbar{width:min(340px,45%)}}@media (width<=768px){#container{height:100dvh;padding-top:60px;padding-bottom:70px}#container .palette-top-bar{-webkit-backdrop-filter:blur(12px);white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#ffffffe6;border-radius:0;justify-content:flex-start;gap:.35rem;width:100%;padding:.4rem .6rem;top:60px;overflow-x:auto;box-shadow:0 2px 8px #00000014}#container .palette-top-bar::-webkit-scrollbar{display:none}#container .palette-top-bar .save{border-radius:.5rem;width:auto;padding:.4rem .8rem;font-size:.95rem}#container .palette-top-bar .btn-text{display:none}#container .palette-top-bar .tool-btn{border-radius:.5rem;padding:.4rem .6rem}#container .palette-top-bar .harmony-select-wrapper{border-radius:.5rem}#container #changeColor{bottom:calc(10px + env(safe-area-inset-bottom,0px));color:#fff;z-index:50;background:#0f172a;border-radius:9999px;width:min(90vw,260px);padding:.75rem 1.5rem;font-size:1.15rem;font-weight:700;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #0f172a66}#container #changeColor:hover{color:#fff;background:#1e293b;padding-bottom:.75rem}#container main{height:100%;padding-top:38px}#container main #colors{grid-template-rows:repeat(5,1fr);grid-template-columns:1fr;height:100%}#container main #colors .palette .palette-items{flex-direction:row;justify-content:space-around;gap:.5rem;padding:0 .75rem}#container main #colors .palette .palette-items .color-code{padding:.4rem .6rem;font-size:1.15rem}#container main #colors .palette .palette-items .contrast-tag{display:none}#container main #colors .palette .palette-items span,#container main #colors .palette .palette-items i{padding:.6rem;font-size:1.15rem}#container main #colors .palette .palette-items .colorsContainer{grid-template-rows:1fr;grid-template-columns:repeat(20,1fr)}#container main #colors .palette .palette-items .colorsContainer .vrbItems{writing-mode:vertical-rl;font-size:.6rem}#container aside.color-navbar{width:min(85vw,340px);height:calc(100% - 60px)}#container .copyright.color-palette{display:none}}.color-hamburger{cursor:pointer;z-index:100;margin:auto 5% auto 1rem}.color-hamburger .color-bar{transition:all .3s ease-in-out}@media screen and (width<=875px){.color-hamburger{margin:auto 5% auto auto}}.color-hamburger.active .color-bar:nth-child(2){opacity:0}.color-hamburger.active .color-bar:first-child{transform:rotate(45deg)translateY(11px)}.color-hamburger.active .color-bar:nth-child(3){transform:rotate(-45deg)translateY(-11px)}.color-hamburger .color-bar{background-color:#edf2f4;width:25px;height:3px;margin:5px auto;transition:all .3s ease-in-out}.ip-app-layout{background-color:var(--ip-bg);min-height:100vh;color:var(--ip-text-primary);font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background-color .65s cubic-bezier(.4,0,.2,1),color .65s cubic-bezier(.4,0,.2,1);display:flex}.ip-mobile-bar{background:var(--ip-surface);border-bottom:1px solid var(--ip-border);z-index:900;justify-content:space-between;align-items:center;height:60px;padding:0 16px;display:none;position:fixed;top:0;left:0;right:0}.ip-mobile-bar .mobile-brand{color:var(--ip-text-primary);align-items:center;gap:10px;font-size:1.15rem;font-weight:700;text-decoration:none;display:flex}.ip-mobile-bar .mobile-brand .brand-icon{background:linear-gradient(135deg,#2563eb 0%,#38bdf8 50%,#f59e0b 100%);border-radius:7px;width:28px;height:28px;display:inline-block}.ip-mobile-bar .mobile-toggle{color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:10px;font-size:1.3rem;display:inline-flex}.ip-sidebar-backdrop{-webkit-backdrop-filter:blur(4px);z-index:998;opacity:0;pointer-events:none;background:#0f172a73;transition:opacity .25s;display:none;position:fixed;inset:0}.ip-sidebar-backdrop.active{opacity:1;pointer-events:auto;display:block}.ip-sidebar{width:var(--sidebar-width);background:var(--ip-surface);border-right:1px solid var(--ip-border);z-index:999;flex-direction:column;justify-content:space-between;padding:24px 16px;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .65s cubic-bezier(.4,0,.2,1),border-color .65s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0}.ip-sidebar .sidebar-header{align-items:center;gap:12px;padding:0 8px 24px;text-decoration:none;display:flex}.ip-sidebar .sidebar-header .brand-logo-grid{background:#0f172a;border-radius:8px;grid-template-columns:1fr 1fr;gap:3px;width:32px;height:32px;padding:5px;display:grid}.ip-sidebar .sidebar-header .brand-logo-grid span{border-radius:2px}.ip-sidebar .sidebar-header .brand-logo-grid span:first-child{background:#3b82f6}.ip-sidebar .sidebar-header .brand-logo-grid span:nth-child(2){background:#f59e0b}.ip-sidebar .sidebar-header .brand-logo-grid span:nth-child(3){background:#ef4444}.ip-sidebar .sidebar-header .brand-logo-grid span:nth-child(4){background:#10b981}.ip-sidebar .sidebar-header .brand-text{letter-spacing:-.02em;color:var(--ip-text-primary);font-size:1.15rem;font-weight:700}.ip-sidebar .sidebar-nav{flex-direction:column;flex:1;gap:4px;display:flex}.ip-sidebar .sidebar-nav .nav-item{border-radius:var(--ip-radius-md);color:var(--ip-text-secondary);align-items:center;gap:12px;padding:10px 14px;font-size:.92rem;font-weight:500;text-decoration:none;transition:all .15s ease-in-out;display:flex}.ip-sidebar .sidebar-nav .nav-item i{text-align:center;width:20px;color:var(--ip-text-muted);font-size:1.05rem;transition:color .15s}.ip-sidebar .sidebar-nav .nav-item:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.ip-sidebar .sidebar-nav .nav-item:hover i{color:var(--ip-primary)}.ip-sidebar .sidebar-nav .nav-item.active{background:var(--ip-primary-light);color:var(--ip-primary);font-weight:600}.ip-sidebar .sidebar-nav .nav-item.active i{color:var(--ip-primary)}.ip-sidebar .sidebar-nav .nav-group-title{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-text-subtle);margin-top:4px;padding:10px 14px 2px;font-size:.7rem;font-weight:700}.ip-sidebar .sidebar-footer{border-top:1px solid var(--ip-border);flex-direction:column;gap:12px;padding-top:14px;display:flex}.ip-sidebar .sidebar-footer .sidebar-theme-row{background:var(--ip-surface-hover);border-radius:var(--ip-radius-md);justify-content:space-between;align-items:center;padding:4px 6px 4px 10px;display:flex}.ip-sidebar .sidebar-footer .sidebar-theme-row .theme-label{color:var(--ip-text-secondary);font-size:.78rem;font-weight:600}.ip-sidebar .sidebar-footer .sidebar-theme-row .theme-switcher-group{background:var(--ip-surface);border-radius:var(--ip-radius-sm);border:1px solid var(--ip-border);gap:3px;padding:3px;display:flex}.ip-sidebar .sidebar-footer .sidebar-theme-row .theme-switcher-group .theme-toggle-btn{width:28px;height:28px;color:var(--ip-text-muted);cursor:pointer;transition:all var(--ip-transition-fast);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:.8rem;display:flex}.ip-sidebar .sidebar-footer .sidebar-theme-row .theme-switcher-group .theme-toggle-btn:hover{color:var(--ip-text-primary)}.ip-sidebar .sidebar-footer .sidebar-theme-row .theme-switcher-group .theme-toggle-btn.active{background:var(--ip-btn-accent-bg);color:var(--ip-btn-accent-text);box-shadow:0 1px 3px #0000001a}.ip-sidebar .sidebar-footer .footer-nav{flex-direction:column;gap:4px;display:flex}.ip-sidebar .sidebar-footer .footer-nav .footer-item{border-radius:var(--ip-radius-md);color:var(--ip-text-secondary);align-items:center;gap:12px;padding:8px 14px;font-size:.88rem;text-decoration:none;transition:all .15s;display:flex}.ip-sidebar .sidebar-footer .footer-nav .footer-item i{text-align:center;width:20px;color:var(--ip-text-muted);font-size:1rem}.ip-sidebar .sidebar-footer .footer-nav .footer-item:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.ip-sidebar .sidebar-footer .footer-nav .footer-item.active{background:var(--ip-primary-light);color:var(--ip-primary);font-weight:600}.ip-sidebar .sidebar-footer .user-profile-card{border-radius:var(--ip-radius-md);cursor:pointer;align-items:center;gap:10px;padding:8px 10px;text-decoration:none;transition:background .15s;display:flex}.ip-sidebar .sidebar-footer .user-profile-card:hover{background:var(--ip-surface-hover)}.ip-sidebar .sidebar-footer .user-profile-card .user-avatar{border-radius:var(--ip-radius-full);color:#fff;background:linear-gradient(135deg,#2563eb,#8b5cf6);justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;font-weight:700;display:flex;overflow:hidden}.ip-sidebar .sidebar-footer .user-profile-card .user-avatar img{object-fit:cover;width:100%;height:100%}.ip-sidebar .sidebar-footer .user-profile-card .user-meta{flex-direction:column;display:flex;overflow:hidden}.ip-sidebar .sidebar-footer .user-profile-card .user-meta .user-name{color:var(--ip-text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:600;overflow:hidden}.ip-sidebar .sidebar-footer .user-profile-card .user-meta .user-sub{color:var(--ip-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.ip-main-wrapper{margin-left:var(--sidebar-width);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}@media (width<=1024px){.ip-mobile-bar{display:flex}.ip-sidebar{transform:translate(-100%)}.ip-sidebar.open{transform:translate(0)}.ip-main-wrapper{margin-left:0;padding-top:60px}}.ip-studio-container{box-sizing:border-box;flex-direction:column;gap:28px;width:100%;min-width:0;max-width:1400px;margin:0 auto;padding:32px 40px 60px;display:flex}.ip-studio-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.ip-studio-header .header-titles .page-title{color:var(--ip-text-primary);letter-spacing:-.03em;margin-bottom:6px;font-size:1.85rem;font-weight:700}.ip-studio-header .header-titles .page-subtitle{color:var(--ip-text-muted);font-size:.95rem;line-height:1.4}.ip-studio-header .header-actions{align-items:center;gap:12px;display:flex}.ip-studio-header .header-actions .action-btn-outline{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);color:var(--ip-text-primary);cursor:pointer;box-shadow:var(--ip-shadow-xs);align-items:center;gap:8px;padding:9px 16px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.ip-studio-header .header-actions .action-btn-outline:hover{background:var(--ip-surface-hover);border-color:#cbd5e1;transform:translateY(-1px)}.ip-mode-selector-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-width:0;max-width:100%;display:flex}.ip-mode-selector-bar .mode-pills-list{background:var(--ip-surface);border-radius:var(--ip-radius-full);border:1px solid var(--ip-border);box-shadow:var(--ip-shadow-xs);-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:6px;min-width:0;max-width:100%;padding:4px;display:flex;overflow-x:auto}.ip-mode-selector-bar .mode-pills-list::-webkit-scrollbar{display:none}.ip-mode-selector-bar .mode-pills-list .mode-pill{border-radius:var(--ip-radius-full);color:var(--ip-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:6px 14px;font-size:.85rem;font-weight:600;transition:all .15s}.ip-mode-selector-bar .mode-pills-list .mode-pill:hover:not(.active){color:var(--ip-text-primary)}.ip-mode-selector-bar .mode-pills-list .mode-pill.active{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.ip-mode-selector-bar .color-count-selector{background:var(--ip-surface);border-radius:var(--ip-radius-full);border:1px solid var(--ip-border);color:var(--ip-text-muted);align-items:center;gap:6px;padding:4px 10px;font-size:.82rem;font-weight:600;display:flex}.ip-mode-selector-bar .color-count-selector select{color:var(--ip-text-primary);cursor:pointer;background:0 0;border:none;outline:none;font-weight:700}.ip-palette-display{grid-template-columns:repeat(5,1fr);gap:14px;height:380px;min-height:340px;transition:grid-template-columns .2s;display:grid}.ip-palette-display.count-3{grid-template-columns:repeat(3,1fr)}.ip-palette-display.count-4{grid-template-columns:repeat(4,1fr)}.ip-palette-display.count-5{grid-template-columns:repeat(5,1fr)}.ip-palette-display.count-6{grid-template-columns:repeat(6,1fr)}.ip-palette-display .palette-swatch-card{border-radius:var(--ip-radius-lg);box-shadow:var(--ip-shadow-md);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:space-between;align-items:center;padding:16px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;display:flex;position:relative}.ip-palette-display .palette-swatch-card:hover{box-shadow:var(--ip-shadow-lg);transform:translateY(-3px)}.ip-palette-display .palette-swatch-card:hover .swatch-lock-btn{opacity:1}.ip-palette-display .palette-swatch-card .swatch-lock-btn{border-radius:var(--ip-radius-full);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;opacity:.7;background:#ffffff40;border:1px solid #ffffff59;justify-content:center;align-items:center;width:38px;height:38px;font-size:.95rem;transition:all .2s;display:flex}.ip-palette-display .palette-swatch-card .swatch-lock-btn.locked{opacity:1;color:#0f172a;background:#fff;box-shadow:0 4px 12px #00000026}.ip-palette-display .palette-swatch-card .swatch-lock-btn:hover{opacity:1;transform:scale(1.08)}.ip-palette-display .palette-swatch-card .swatch-footer{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.ip-palette-display .palette-swatch-card .swatch-footer .swatch-hex-btn{-webkit-backdrop-filter:blur(8px);border-radius:var(--ip-radius-full);color:#0f172a;cursor:pointer;background:#ffffffeb;border:1px solid #ffffffb3;padding:6px 14px;font-family:monospace;font-size:.95rem;font-weight:700;transition:transform .15s,background .15s;box-shadow:0 2px 8px #0000001a}.ip-palette-display .palette-swatch-card .swatch-footer .swatch-hex-btn:hover{background:#fff;transform:scale(1.04)}.ip-palette-display .palette-swatch-card .swatch-footer .swatch-color-name{text-shadow:0 1px 3px #0000004d;color:#fff;text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:90%;font-size:.75rem;font-weight:600;overflow:hidden}.ip-generate-action-bar{justify-content:center;align-items:center;gap:12px;display:flex}.ip-generate-action-bar .btn-generate-main{background:var(--ip-btn-primary-bg);max-width:600px;height:52px;color:var(--ip-btn-primary-text);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-sm);border:none;flex:1;justify-content:center;align-items:center;gap:10px;font-size:1.05rem;font-weight:600;transition:all .2s;display:inline-flex}.ip-generate-action-bar .btn-generate-main span.key-hint{opacity:.8;font-size:.85rem;font-weight:400}.ip-generate-action-bar .btn-generate-main:hover{background:var(--ip-primary-hover);box-shadow:0 6px 18px var(--ip-primary-glow);transform:translateY(-1px)}.ip-generate-action-bar .btn-generate-main:active{transform:translateY(1px)}.ip-generate-action-bar .btn-action-save-palette{border-radius:var(--ip-radius-md);background:var(--ip-surface);border:1px solid var(--ip-border);height:52px;color:var(--ip-text-primary);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);align-items:center;gap:8px;padding:0 24px;font-size:.95rem;font-weight:700;display:inline-flex}.ip-generate-action-bar .btn-action-save-palette i{color:var(--ip-accent-coral)}.ip-generate-action-bar .btn-action-save-palette:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);transform:translateY(-1px)}.ip-generate-action-bar .btn-action-save-palette:active{transform:translateY(1px)}.ip-generate-action-bar .btn-icon-shuffle{border-radius:var(--ip-radius-md);background:var(--ip-surface);border:1px solid var(--ip-border);width:52px;height:52px;color:var(--ip-text-primary);cursor:pointer;box-shadow:var(--ip-shadow-xs);justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.ip-generate-action-bar .btn-icon-shuffle:hover{background:var(--ip-surface-hover);border-color:#cbd5e1;transform:rotate(45deg)}.ip-generate-action-bar .btn-icon-share{border-radius:var(--ip-radius-md);background:var(--ip-surface);border:1px solid var(--ip-border);width:52px;height:52px;color:var(--ip-text-primary);cursor:pointer;box-shadow:var(--ip-shadow-xs);justify-content:center;align-items:center;font-size:1.15rem;transition:all .2s;display:flex}.ip-generate-action-bar .btn-icon-share:hover{background:var(--ip-surface-hover);color:var(--ip-primary);border-color:var(--ip-primary);transform:translateY(-1px)}.ip-studio-tabs-section{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);box-shadow:var(--ip-shadow-sm);min-width:0;max-width:100%;overflow:hidden}.ip-studio-tabs-section .tabs-nav-bar{border-bottom:1px solid var(--ip-border);-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#fafafa;align-items:center;gap:8px;min-width:0;max-width:100%;padding:12px 20px;display:flex;overflow-x:auto}.ip-studio-tabs-section .tabs-nav-bar::-webkit-scrollbar{display:none}.ip-studio-tabs-section .tabs-nav-bar .studio-tab-btn{border-radius:var(--ip-radius-md);color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .15s;display:inline-flex}.ip-studio-tabs-section .tabs-nav-bar .studio-tab-btn:hover:not(.active){color:var(--ip-text-primary)}.ip-studio-tabs-section .tabs-nav-bar .studio-tab-btn.active{background:var(--ip-surface);color:var(--ip-primary);box-shadow:var(--ip-shadow-xs)}.ip-studio-tabs-section .tabs-content-area{padding:28px}.ip-studio-tabs-section .tabs-content-area .tab-panel{display:none}.ip-studio-tabs-section .tabs-content-area .tab-panel.active{display:block}.ui-preview-split-grid{grid-template-columns:1.6fr 1fr;align-items:stretch;gap:28px;display:grid}.ui-preview-split-grid .hero-preview-box{border-radius:var(--ip-radius-md);background:var(--hero-bg,#fff);border:1px solid #00000014;flex-direction:column;justify-content:space-between;min-height:280px;padding:36px 32px;transition:background .3s;display:flex}.ui-preview-split-grid .hero-preview-box .hero-badge{border-radius:var(--ip-radius-full);align-items:center;gap:6px;width:fit-content;margin-bottom:14px;padding:4px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.ui-preview-split-grid .hero-preview-box .hero-heading{letter-spacing:-.03em;margin-bottom:10px;font-size:2.1rem;font-weight:800;line-height:1.15}.ui-preview-split-grid .hero-preview-box .hero-desc{opacity:.85;max-width:440px;margin-bottom:24px;font-size:.95rem;line-height:1.5}.ui-preview-split-grid .hero-preview-box .hero-btns{gap:12px;display:flex}.ui-preview-split-grid .hero-preview-box .hero-btns .btn-hero-pri{border-radius:var(--ip-radius-sm);cursor:pointer;border:none;padding:10px 20px;font-size:.9rem;font-weight:600}.ui-preview-split-grid .hero-preview-box .hero-btns .btn-hero-sec{border-radius:var(--ip-radius-sm);cursor:pointer;background:0 0;border:1.5px solid;padding:10px 20px;font-size:.9rem;font-weight:600}.ui-preview-split-grid .ui-elements-box{flex-direction:column;gap:16px;display:flex}.ui-preview-split-grid .ui-elements-box .ui-group-title{color:var(--ip-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:700}.ui-preview-split-grid .ui-elements-box .sample-buttons-col{flex-direction:column;gap:10px;display:flex}.ui-preview-split-grid .ui-elements-box .sample-buttons-col button{border-radius:var(--ip-radius-sm);cursor:pointer;border:none;width:100%;padding:12px;font-size:.9rem;font-weight:600}.ui-preview-split-grid .ui-elements-box .sample-card-item{border-radius:var(--ip-radius-md);border:1px solid var(--ip-border);background:#f8fafc;padding:18px}.ui-preview-split-grid .ui-elements-box .sample-card-item .card-item-title{margin-bottom:4px;font-size:.95rem;font-weight:700}.ui-preview-split-grid .ui-elements-box .sample-card-item .card-item-desc{color:var(--ip-text-muted);margin-bottom:12px;font-size:.8rem}.ui-preview-split-grid .ui-elements-box .sample-card-item .card-dots{gap:6px;display:flex}.ui-preview-split-grid .ui-elements-box .sample-card-item .card-dots span{border-radius:var(--ip-radius-full);width:14px;height:14px}@media (width<=1024px){.ip-studio-container{gap:20px;padding:20px 16px 40px}.ip-palette-display,.ip-palette-display.count-3,.ip-palette-display.count-4,.ip-palette-display.count-5,.ip-palette-display.count-6{gap:8px;height:auto;grid-template-columns:1fr!important}.ip-palette-display .palette-swatch-card,.ip-palette-display.count-3 .palette-swatch-card,.ip-palette-display.count-4 .palette-swatch-card,.ip-palette-display.count-5 .palette-swatch-card,.ip-palette-display.count-6 .palette-swatch-card{flex-direction:row;height:80px;padding:12px 18px}.ip-palette-display .palette-swatch-card .swatch-footer,.ip-palette-display.count-3 .palette-swatch-card .swatch-footer,.ip-palette-display.count-4 .palette-swatch-card .swatch-footer,.ip-palette-display.count-5 .palette-swatch-card .swatch-footer,.ip-palette-display.count-6 .palette-swatch-card .swatch-footer{flex-direction:row;justify-content:flex-end;align-items:center;gap:12px;width:auto}.ui-preview-split-grid{grid-template-columns:1fr}.ip-generate-action-bar{flex-wrap:wrap}.ip-generate-action-bar .btn-generate-main{flex:100%;max-width:100%;height:48px}.ip-generate-action-bar .btn-action-save-palette{flex:1;height:48px;padding:0 16px}.ip-generate-action-bar .btn-icon-shuffle,.ip-generate-action-bar .btn-icon-share{width:48px;height:48px}}.ip-modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10000;opacity:0;pointer-events:none;background:#0f172aa6;justify-content:center;align-items:center;padding:1rem;transition:opacity .2s;display:flex;position:fixed;inset:0}.ip-modal-backdrop.active{opacity:1;pointer-events:auto}.ip-modal-backdrop .ip-modal-card{border:1px solid var(--ip-border);background:#fff;border-radius:20px;width:100%;max-width:540px;transition:transform .2s;overflow:hidden;transform:scale(.96);box-shadow:0 25px 50px -12px #00000040}[data-theme=dark] .ip-modal-backdrop .ip-modal-card{background:#111827}.ip-modal-backdrop.active .ip-modal-card{transform:scale(1)}.ip-modal-backdrop .modal-header{border-bottom:1px solid var(--ip-border);justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;display:flex}.ip-modal-backdrop .modal-header .title-cluster h2{color:var(--ip-text-primary);align-items:center;gap:8px;margin:0 0 4px;font-size:1.25rem;font-weight:800;display:flex}.ip-modal-backdrop .modal-header .title-cluster h2 i{color:var(--ip-primary)}.ip-modal-backdrop .modal-header .title-cluster .sub-lead{color:var(--ip-text-muted);font-size:.8rem}.ip-modal-backdrop .modal-header .btn-close-modal{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.1rem}.ip-modal-backdrop .modal-header .btn-close-modal:hover{color:var(--ip-text-primary)}.ip-modal-backdrop .modal-body{padding:1.5rem}.ip-modal-backdrop .modal-body .palette-preview-pill{background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:10px 14px;display:flex}[data-theme=dark] .ip-modal-backdrop .modal-body .palette-preview-pill{background:#1f2937}.ip-modal-backdrop .modal-body .palette-preview-pill .palette-name{color:var(--ip-text-primary);font-size:.9rem;font-weight:700}.ip-modal-backdrop .modal-body .palette-preview-pill .pill-swatches{gap:6px;display:flex}.ip-modal-backdrop .modal-body .palette-preview-pill .pill-swatches .modal-swatch-dot{border-radius:6px;width:20px;height:20px;box-shadow:0 1px 3px #00000026}.ip-modal-backdrop .modal-body .share-qr-row{align-items:center;gap:20px;display:flex}@media (width<=500px){.ip-modal-backdrop .modal-body .share-qr-row{flex-direction:column;align-items:center}}.ip-modal-backdrop .modal-body .share-qr-row .qr-box{border:1px solid var(--ip-border);background:#fff;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex;box-shadow:0 4px 12px #0000000d}.ip-modal-backdrop .modal-body .share-qr-row .qr-box .palette-qr-svg{display:block}.ip-modal-backdrop .modal-body .share-qr-row .qr-box .qr-caption{color:var(--ip-text-muted);font-size:.68rem;font-weight:600}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col{flex-direction:column;flex:1;gap:8px;display:flex}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .field-label{color:var(--ip-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;font-weight:700}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group{background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:10px;align-items:center;display:flex;overflow:hidden}[data-theme=dark] .ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group{background:#1f2937}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group input{color:var(--ip-text-primary);background:0 0;border:none;outline:none;flex:1;padding:9px 12px;font-family:monospace;font-size:.825rem}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group .btn-copy-url{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;align-items:center;gap:6px;padding:9px 16px;font-size:.8rem;font-weight:700;transition:background .15s;display:inline-flex}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group .btn-copy-url:hover{background:var(--ip-btn-primary-hover)}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .share-copy-input-group .btn-copy-url.copied{background:#10b981}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links{align-items:center;gap:10px;margin-top:.75rem;display:flex}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-label{color:var(--ip-text-muted);font-size:.78rem;font-weight:700}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-btn{color:#fff;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;font-size:.95rem;text-decoration:none;transition:transform .15s,opacity .15s;display:flex}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-btn:hover{opacity:.9;transform:translateY(-2px)}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-btn.x-btn{background:#000}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-btn.in-btn{background:#0a66c2}.ip-modal-backdrop .modal-body .share-qr-row .share-fields-col .social-share-links .social-btn.wa-btn{background:#25d366}.ip-archive-container{flex-direction:column;gap:28px;width:100%;max-width:1400px;margin:0 auto;padding:32px 40px 60px;display:flex}.ip-archive-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.ip-archive-header .header-titles .page-title{color:var(--ip-text-primary);letter-spacing:-.03em;margin-bottom:6px;font-size:1.85rem;font-weight:700}.ip-archive-header .header-titles .page-subtitle{color:var(--ip-text-muted);font-size:.95rem}.ip-archive-header .archive-search-box{width:min(100%,360px);position:relative}.ip-archive-header .archive-search-box i{color:var(--ip-text-muted);font-size:.95rem;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.ip-archive-header .archive-search-box input{border-radius:var(--ip-radius-full);border:1px solid var(--ip-border);background:var(--ip-surface);width:100%;height:42px;color:var(--ip-text-primary);box-shadow:var(--ip-shadow-xs);outline:none;padding:0 14px 0 38px;font-size:.9rem;transition:all .2s}.ip-archive-header .archive-search-box input:focus{border-color:var(--ip-primary);box-shadow:0 0 0 3px var(--ip-primary-glow)}.ip-archive-filters-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:100%;display:flex}.ip-archive-filters-bar .count-pills-list{background:var(--ip-surface);border-radius:var(--ip-radius-full);border:1px solid var(--ip-border);box-shadow:var(--ip-shadow-xs);-webkit-overflow-scrolling:touch;align-items:center;gap:6px;max-width:100%;padding:4px;display:flex;overflow-x:auto}.ip-archive-filters-bar .count-pills-list .filter-pill{border-radius:var(--ip-radius-full);color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:none;padding:6px 14px;font-size:.85rem;font-weight:600;transition:all .15s}.ip-archive-filters-bar .count-pills-list .filter-pill:hover:not(.active){color:var(--ip-text-primary)}.ip-archive-filters-bar .count-pills-list .filter-pill.active{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.ip-archive-filters-bar .dropdown-filters{flex-wrap:wrap;gap:10px;max-width:100%;display:flex}.ip-archive-filters-bar .dropdown-filters select{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);color:var(--ip-text-secondary);cursor:pointer;outline:none;min-width:0;max-width:100%;padding:8px 12px;font-size:.88rem;font-weight:600}.ip-wada-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.ip-wada-grid .wada-card{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);box-shadow:var(--ip-shadow-xs);cursor:pointer;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.ip-wada-grid .wada-card:hover{box-shadow:var(--ip-shadow-md);transform:translateY(-3px)}.ip-wada-grid .wada-card .card-swatches-row{width:100%;height:140px;display:flex}.ip-wada-grid .wada-card .card-swatches-row .swatch-item{flex:1;height:100%;transition:flex .2s;position:relative}.ip-wada-grid .wada-card .card-swatches-row .swatch-item:hover{flex:1.4}.ip-wada-grid .wada-card .card-content{flex-direction:column;gap:10px;padding:16px 18px;display:flex}.ip-wada-grid .wada-card .card-content .card-top-row{justify-content:space-between;align-items:center;display:flex}.ip-wada-grid .wada-card .card-content .card-top-row .card-code{color:var(--ip-text-muted);font-family:monospace;font-size:.85rem;font-weight:700}.ip-wada-grid .wada-card .card-content .card-top-row .card-fav-btn{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;font-size:1.1rem;transition:color .15s,transform .15s}.ip-wada-grid .wada-card .card-content .card-top-row .card-fav-btn:hover{color:var(--ip-accent-coral);transform:scale(1.15)}.ip-wada-grid .wada-card .card-content .card-top-row .card-fav-btn.favorited{color:var(--ip-accent-coral)}.ip-wada-grid .wada-card .card-content .card-combo-title{color:var(--ip-text-primary);letter-spacing:-.01em;font-size:1.05rem;font-weight:700}.ip-wada-grid .wada-card .card-content .card-tags-list{flex-wrap:wrap;gap:6px;display:flex}.ip-wada-grid .wada-card .card-content .card-tags-list .card-tag{border-radius:var(--ip-radius-full);color:var(--ip-text-secondary);background:#f1f5f9;padding:2px 8px;font-size:.72rem;font-weight:600}[data-theme=dark] .ip-wada-grid .wada-card .card-content .card-tags-list .card-tag{color:#cbd5e1;background:#1e293b}.archive-pagination-row{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:30px 0 10px;display:flex}.archive-pagination-row .pagination-info{color:var(--ip-text-muted);font-size:.85rem;font-weight:600}.archive-pagination-row .btn-load-more{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;border-radius:9999px;align-items:center;gap:8px;padding:10px 24px;font-size:.88rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 2px 8px #0000000a}.archive-pagination-row .btn-load-more:hover{background:var(--ip-surface-hover);border-color:var(--ip-primary);color:var(--ip-primary);transform:translateY(-2px);box-shadow:0 4px 14px #00000014}.ip-filter-lab-container{box-sizing:border-box;flex-direction:column;gap:28px;width:100%;max-width:1400px;margin:0 auto;padding:32px 32px 60px;display:flex}@media (width<=768px){.ip-filter-lab-container{gap:20px;padding:20px 16px 40px}}.ip-filter-lab-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.ip-filter-lab-header .header-titles .page-title{color:var(--ip-text-primary);letter-spacing:-.03em;margin-bottom:6px;font-size:1.85rem;font-weight:700}.ip-filter-lab-header .header-titles .page-subtitle{color:var(--ip-text-muted);font-size:.95rem}.ip-filter-lab-header .header-actions{gap:12px;display:flex}.ip-filter-lab-header .header-actions .btn-action-primary{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-xs);border:none;align-items:center;gap:8px;padding:9px 18px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.ip-filter-lab-header .header-actions .btn-action-primary:hover{background:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.ip-filter-workspace-grid{box-sizing:border-box;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;width:100%;max-width:100%;display:grid}@media (width<=1024px){.ip-filter-workspace-grid{grid-template-columns:minmax(0,1fr);gap:20px}}.ip-filter-workspace-grid .canvas-stage-col{flex-direction:column;gap:20px;width:100%;min-width:0;max-width:100%;display:flex}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container{border-radius:var(--ip-radius-lg);width:100%;max-width:100%;height:480px;box-shadow:var(--ip-shadow-md);-webkit-user-select:none;user-select:none;background:#0f172a;position:relative;overflow:hidden}@media (width<=600px){.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container{height:280px}}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .image-layer{width:100%;height:100%;position:absolute;inset:0}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .image-layer img{object-fit:cover;width:100%;height:100%;display:block}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .image-layer.before-layer{z-index:1}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .image-layer.after-layer{z-index:2;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .split-pill-badge{-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:var(--ip-radius-full);z-index:5;background:#0f172aa6;border:1px solid #fff3;padding:5px 12px;font-size:.8rem;font-weight:700;position:absolute;top:16px}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .split-pill-badge.badge-before{left:16px}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .split-pill-badge.badge-after{right:16px}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .split-slider-divider{z-index:10;cursor:ew-resize;background:#fff;width:2px;position:absolute;top:0;bottom:0;left:50%;box-shadow:0 0 10px #00000080}.ip-filter-workspace-grid .canvas-stage-col .split-comparison-container .split-slider-divider .slider-handle-knob{border-radius:var(--ip-radius-full);color:#0f172a;background:#fff;justify-content:center;align-items:center;gap:2px;width:38px;height:38px;font-size:.85rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000004d}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel{gap:12px;padding:4px 0 10px;display:flex;overflow-x:auto}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip{background:var(--ip-surface);border:1.5px solid var(--ip-border);border-radius:var(--ip-radius-md);cursor:pointer;flex-direction:column;align-items:center;gap:6px;min-width:90px;padding:8px 10px;transition:all .2s;display:flex}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip img{object-fit:cover;border-radius:var(--ip-radius-sm);width:74px;height:52px}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip span{color:var(--ip-text-secondary);font-size:.78rem;font-weight:600}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip:hover{border-color:#cbd5e1;transform:translateY(-2px)}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip.active{border-color:var(--ip-primary);background:var(--ip-primary-light)}.ip-filter-workspace-grid .canvas-stage-col .presets-carousel .preset-chip.active span{color:var(--ip-primary);font-weight:700}.ip-filter-workspace-grid .adjustments-panel{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);box-shadow:var(--ip-shadow-sm);box-sizing:border-box;flex-direction:column;gap:20px;min-width:0;max-width:100%;padding:24px;display:flex}@media (width<=600px){.ip-filter-workspace-grid .adjustments-panel{padding:16px}}.ip-filter-workspace-grid .adjustments-panel .panel-tabs-bar{border-bottom:1px solid var(--ip-border);gap:16px;display:flex}.ip-filter-workspace-grid .adjustments-panel .panel-tabs-bar button{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;padding:0 0 10px;font-size:.95rem;font-weight:600;position:relative}.ip-filter-workspace-grid .adjustments-panel .panel-tabs-bar button.active{color:var(--ip-primary);font-weight:700}.ip-filter-workspace-grid .adjustments-panel .panel-tabs-bar button.active:after{content:"";background:var(--ip-primary);height:2px;position:absolute;bottom:-1px;left:0;right:0}.ip-filter-workspace-grid .adjustments-panel .sliders-list{flex-direction:column;gap:16px;display:flex}.ip-filter-workspace-grid .adjustments-panel .sliders-list .slider-control-group{flex-direction:column;gap:6px;display:flex}.ip-filter-workspace-grid .adjustments-panel .sliders-list .slider-control-group .slider-label-row{color:var(--ip-text-secondary);justify-content:space-between;font-size:.85rem;font-weight:600;display:flex}.ip-filter-workspace-grid .adjustments-panel .sliders-list .slider-control-group .slider-label-row .slider-val{color:var(--ip-text-muted);font-family:monospace}.ip-filter-workspace-grid .adjustments-panel .sliders-list .slider-control-group input[type=range]{width:100%;accent-color:var(--ip-primary)}.ip-filter-workspace-grid .adjustments-panel .btn-reset-all{border-radius:var(--ip-radius-md);border:1px solid var(--ip-border);width:100%;color:var(--ip-text-secondary);cursor:pointer;background:#f1f5f9;padding:10px;font-size:.9rem;font-weight:600;transition:background .2s,color .2s}.ip-filter-workspace-grid .adjustments-panel .btn-reset-all:hover{color:#0f172a;background:#e2e8f0}@media (width<=1024px){.ip-filter-lab-container{padding:20px 16px 40px}.ip-filter-workspace-grid{grid-template-columns:1fr}}.toast-container{z-index:100000;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}@media (width<=640px){.toast-container{bottom:16px;left:16px;right:16px}}.toast-item{pointer-events:auto;color:#f8fafc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a;border:1px solid #ffffff1f;border-radius:12px;align-items:center;gap:10px;padding:12px 18px;font-size:13.5px;font-weight:500;transition:opacity .3s,transform .3s;animation:.3s cubic-bezier(.16,1,.3,1) forwards toastSlideUp;display:inline-flex;box-shadow:0 10px 25px -5px #0006,0 8px 10px -6px #0003}.toast-item.success i{color:#10b981}.toast-item.error i{color:#ef4444}.toast-item.fade-out{opacity:0;transform:translateY(8px)}.toast-item .toast-undo-btn{color:#38bdf8;cursor:pointer;background:#ffffff2e;border:none;border-radius:6px;margin-left:auto;padding:3px 9px;font-size:12px;font-weight:700;transition:all .15s}.toast-item .toast-undo-btn:hover{color:#0f172a;background:#38bdf8}.toast-item .toast-undo-btn:focus-visible{outline-offset:2px;outline:2px solid #38bdf8}@keyframes toastSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.nav-auth-container{align-items:center;gap:12px;margin-left:auto;display:flex}@media (width<=875px){.nav-auth-container{order:3;margin-left:0}}.nav-btn-signin{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff14;border:1px solid #ffffff2e;border-radius:9999px;align-items:center;gap:8px;padding:7px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.nav-btn-signin:hover{color:#0f172a;background:#fff;border-color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #ffffff26}.nav-user-dropdown-wrap{position:relative}.nav-user-badge{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:9999px;align-items:center;gap:8px;padding:4px 12px 4px 5px;transition:all .2s;display:inline-flex}.nav-user-badge:hover{background:#ffffff2e;border-color:#ffffff59}.nav-user-badge .user-avatar-badge{color:#0f172a;background:linear-gradient(135deg,#38bdf8,#818cf8);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:inline-flex}.nav-user-badge .user-name-text{text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:13px;font-weight:600;overflow:hidden}@media (width<=480px){.nav-user-badge .user-name-text{display:none}}.nav-user-badge .caret-icon{opacity:.7;font-size:10px}.nav-user-menu{z-index:99999;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f172a;border:1px solid #ffffff26;border-radius:14px;flex-direction:column;width:220px;padding:8px;animation:.2s cubic-bezier(.16,1,.3,1) forwards menuDrop;display:none;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 15px 35px -5px #00000080}.nav-user-menu.open{display:flex}.nav-user-menu .user-menu-header{padding:8px 10px}.nav-user-menu .user-menu-header .menu-user-name{color:#fff;font-size:13.5px;font-weight:600}.nav-user-menu .user-menu-header .menu-user-email{color:#94a3b8;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;overflow:hidden}.nav-user-menu .user-menu-divider{background:#ffffff14;height:1px;margin:6px 0}.nav-user-menu .menu-item{color:#cbd5e1;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:9px 12px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.nav-user-menu .menu-item i{color:#94a3b8;width:16px}.nav-user-menu .menu-item .menu-pill-count{color:#38bdf8;background:#38bdf82e;border-radius:9999px;margin-left:auto;padding:2px 7px;font-size:11px;font-weight:700}.nav-user-menu .menu-item:hover{color:#fff;background:#ffffff14}.nav-user-menu .menu-item:hover i{color:#38bdf8}@keyframes menuDrop{0%{opacity:0;transform:translateY(-8px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999999;opacity:0;pointer-events:none;background:#0f172ab3;justify-content:center;align-items:center;padding:16px;transition:opacity .25s;display:flex;position:fixed;inset:0}.auth-modal-overlay.active{opacity:1;pointer-events:auto}.auth-modal-card{color:#fff;background:#0f172a;border:1px solid #ffffff24;border-radius:20px;flex-direction:column;width:100%;max-width:440px;padding:28px 24px;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;transform:scale(.96);box-shadow:0 25px 50px -12px #0009}.auth-modal-overlay.active .auth-modal-card{transform:scale(1)}.auth-modal-card.library-card{max-width:580px}.auth-modal-close{color:#94a3b8;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:inline-flex;position:absolute;top:18px;right:18px}.auth-modal-close:hover{color:#fff;background:#ffffff26}.auth-modal-header{text-align:center;margin-bottom:20px}.auth-modal-header .auth-brand-badge{color:#0f172a;background:linear-gradient(135deg,#38bdf8,#818cf8);border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 12px;font-size:20px;display:inline-flex}.auth-modal-header .auth-modal-title{color:#fff;margin:0 0 6px;font-size:20px;font-weight:700}.auth-modal-header .auth-modal-desc{color:#94a3b8;margin:0;font-size:13px;line-height:1.4}.auth-tabs{background:#ffffff0d;border-radius:12px;grid-template-columns:1fr 1fr;margin-bottom:20px;padding:4px;display:grid}.auth-tabs .auth-tab-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;transition:all .2s}.auth-tabs .auth-tab-btn.active{color:#fff;background:#1e293b;box-shadow:0 2px 8px #0003}.auth-form{flex-direction:column;gap:14px;display:none}.auth-form.active{display:flex}.auth-form .form-group{flex-direction:column;gap:6px;display:flex}.auth-form .form-group label{color:#cbd5e1;font-size:12px;font-weight:600}.auth-form .form-group .input-with-icon{align-items:center;display:flex;position:relative}.auth-form .form-group .input-with-icon i{color:#64748b;pointer-events:none;font-size:14px;position:absolute;left:14px}.auth-form .form-group .input-with-icon input{color:#fff;background:#1e293b;border:1px solid #ffffff1a;border-radius:10px;outline:none;width:100%;padding:10px 14px 10px 38px;font-size:13.5px;transition:border-color .2s,box-shadow .2s}.auth-form .form-group .input-with-icon input:focus{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf826}.auth-form .form-group .input-with-icon input::placeholder{color:#64748b}.auth-form .auth-error-msg{color:#f87171;text-align:center;min-height:16px;font-size:12px}.auth-form .auth-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#38bdf8,#2563eb);border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 14px #2563eb59}.auth-form .auth-submit-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.auth-demo-divider{text-align:center;color:#64748b;text-transform:uppercase;letter-spacing:.05em;align-items:center;margin:18px 0 12px;font-size:11px;display:flex}.auth-demo-divider:before,.auth-demo-divider:after{content:"";border-bottom:1px solid #ffffff14;flex:1}.auth-demo-divider span{padding:0 10px}.auth-demo-btn{color:#e2e8f0;cursor:pointer;background:#ffffff0d;border:1px dashed #fff3;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.auth-demo-btn i{color:#f59e0b}.auth-demo-btn:hover{color:#fff;background:#ffffff1a;border-color:#ffffff59}.library-palettes-list{flex-direction:column;gap:12px;max-height:380px;padding-right:4px;display:flex;overflow-y:auto}.library-palettes-list::-webkit-scrollbar{width:6px}.library-palettes-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:9999px}.library-empty{text-align:center;color:#64748b;padding:36px 16px}.library-empty i{opacity:.5;margin-bottom:12px;font-size:36px}.library-empty p{color:#94a3b8;margin:0 0 4px;font-size:15px;font-weight:600}.library-empty small{font-size:12px}.library-palette-item{background:#1e293b;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:14px;padding:12px 14px;transition:all .2s;display:flex}.library-palette-item:hover{background:#1e293b;border-color:#38bdf84d;transform:translateY(-1px)}.library-palette-item .palette-swatch-row{border-radius:8px;flex-shrink:0;width:100px;height:36px;display:flex;overflow:hidden}.library-palette-item .palette-swatch-row .mini-swatch{flex:1;height:100%}.library-palette-item .palette-item-info{flex:1;min-width:0}.library-palette-item .palette-item-info .palette-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:600;overflow:hidden}.library-palette-item .palette-item-info .palette-hexes{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;font-family:monospace;font-size:11px;overflow:hidden}.library-palette-item .palette-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.library-palette-item .palette-actions .btn-use-palette{color:#0f172a;cursor:pointer;background:#38bdf8;border:none;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .2s;display:inline-flex}.library-palette-item .palette-actions .btn-use-palette:hover{background:#7dd3fc}.library-palette-item .palette-actions .btn-delete-palette{color:#94a3b8;cursor:pointer;background:#ffffff0f;border:none;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;transition:all .2s;display:inline-flex}.library-palette-item .palette-actions .btn-delete-palette:hover{color:#ef4444;background:#ef444433}.auth-modal-card.import-card{max-width:460px}.auth-brand-badge.import-badge{color:#38bdf8;background:linear-gradient(135deg,#38bdf833,#818cf833);border-color:#38bdf84d}.import-preview-box{background:#0f172a99;border:1px solid #ffffff14;border-radius:10px;flex-direction:column;gap:8px;max-height:180px;margin:16px 0 20px;padding:12px;display:flex;overflow-y:auto}.import-preview-item{color:#e2e8f0;align-items:center;gap:10px;font-size:13px;display:flex}.import-preview-item .preview-type-tag{text-transform:uppercase;color:#38bdf8;letter-spacing:.5px;background:#38bdf826;border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700}.import-preview-item .preview-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.import-preview-more{color:#94a3b8;padding-left:4px;font-size:12px;font-style:italic}.import-actions-row{flex-direction:column;gap:10px;display:flex}.import-actions-row .btn-import-sync{color:#0f172a;cursor:pointer;background:#38bdf8;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex}.import-actions-row .btn-import-sync:hover:not(:disabled){background:#7dd3fc;transform:translateY(-1px);box-shadow:0 4px 14px #38bdf859}.import-actions-row .btn-import-sync:focus-visible{outline-offset:2px;outline:2px solid #fff}.import-actions-row .btn-import-sync:disabled{opacity:.6;cursor:not-allowed}.import-actions-row .btn-import-local{color:#cbd5e1;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:11px 18px;font-size:13.5px;font-weight:600;transition:all .2s;display:inline-flex}.import-actions-row .btn-import-local:hover{color:#fff;background:#ffffff1f}.import-actions-row .btn-import-local:focus-visible{outline-offset:2px;outline:2px solid #38bdf8}.ip-library-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.library-hero{width:100%;max-width:1400px;margin:0 auto;padding:2.25rem 2rem 1.5rem}@media (width<=768px){.library-hero{padding:1.5rem 1rem}}.library-hero .library-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-primary);background:#1e3a8a14;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.library-hero h1{color:var(--ip-text);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800}.library-hero p{color:var(--ip-muted);max-width:720px;margin:0;font-size:1.05rem;line-height:1.55}.library-split-layout{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start;gap:2rem;width:100%;max-width:1400px;margin:0 auto;padding:0 2rem 4rem;display:grid}@media (width<=1100px){.library-split-layout{grid-template-columns:minmax(0,1fr)}}@media (width<=768px){.library-split-layout{gap:1.5rem;padding:0 1rem 3rem}}.auth-panel-card{border:1px solid var(--ip-border);background:#fff;border-radius:20px;min-width:0;max-width:100%;padding:2rem;position:sticky;top:2rem;box-shadow:0 4px 20px -2px #00000008}@media (width<=768px){.auth-panel-card{border-radius:16px;padding:1.25rem 1rem;position:static}}.auth-panel-card .auth-card-header{margin-bottom:1.5rem}.auth-panel-card .auth-card-header h2{color:var(--ip-text);letter-spacing:-.02em;margin-bottom:.35rem;font-size:1.4rem;font-weight:800}.auth-panel-card .auth-card-header p{color:var(--ip-muted);font-size:.88rem;line-height:1.45}.auth-panel-card .oauth-buttons-row{flex-direction:column;gap:.75rem;margin-bottom:1.25rem;display:flex}.auth-panel-card .oauth-buttons-row .btn-oauth{cursor:pointer;border:1px solid var(--ip-border);width:100%;color:var(--ip-text);background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.auth-panel-card .oauth-buttons-row .btn-oauth:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px #0000000a}.auth-panel-card .oauth-buttons-row .btn-oauth.btn-google svg{width:18px;height:18px}.auth-panel-card .oauth-buttons-row .btn-oauth.btn-github{color:#fff;background:#0f172a;border-color:#0f172a}.auth-panel-card .oauth-buttons-row .btn-oauth.btn-github:hover{background:#1e293b}.auth-panel-card .auth-divider{text-align:center;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;align-items:center;margin:1.25rem 0;font-size:.785rem;font-weight:600;display:flex}.auth-panel-card .auth-divider:before,.auth-panel-card .auth-divider:after{content:"";border-bottom:1px solid var(--ip-border);flex:1}.auth-panel-card .auth-divider span{padding:0 .75rem}.auth-panel-card .auth-tabs{background:#f1f5f9;border-radius:10px;margin-bottom:1.25rem;padding:3px;display:flex}.auth-panel-card .auth-tabs .auth-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:.5rem;font-size:.85rem;font-weight:600;transition:all .2s}.auth-panel-card .auth-tabs .auth-tab-btn.active{color:var(--ip-text);background:#fff;box-shadow:0 2px 6px #0000000d}.auth-panel-card .auth-form{flex-direction:column;gap:1rem;display:flex}.auth-panel-card .auth-form .form-group{flex-direction:column;gap:.35rem;display:flex}.auth-panel-card .auth-form .form-group label{color:var(--ip-text);font-size:.8rem;font-weight:600}.auth-panel-card .auth-form .form-group input{border:1px solid var(--ip-border);width:100%;color:var(--ip-text);background:#f8fafc;border-radius:10px;outline:none;padding:.75rem 1rem;font-size:.9rem;transition:all .2s}.auth-panel-card .auth-form .form-group input:focus{border-color:var(--ip-primary);background:#fff;box-shadow:0 0 0 3px #1e3a8a1f}.auth-panel-card .auth-form .form-options-row{justify-content:space-between;align-items:center;font-size:.825rem;display:flex}.auth-panel-card .auth-form .form-options-row .remember-label{color:var(--ip-muted);cursor:pointer;align-items:center;gap:.4rem;display:inline-flex}.auth-panel-card .auth-form .form-options-row .btn-forgot-link{color:var(--ip-primary);cursor:pointer;background:0 0;border:none;padding:0;font-weight:600}.auth-panel-card .auth-form .form-options-row .btn-forgot-link:hover{text-decoration:underline}.auth-panel-card .auth-form .btn-auth-submit{background:var(--ip-btn-primary-bg);width:100%;color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem;padding:.85rem 1rem;font-size:.925rem;font-weight:700;transition:all .2s;display:inline-flex}.auth-panel-card .auth-form .btn-auth-submit:hover{background:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.auth-panel-card .profile-logged-view{text-align:center;flex-direction:column;align-items:center;display:flex}.auth-panel-card .profile-logged-view .profile-avatar-large{color:#fff;background:linear-gradient(135deg,#2563eb,#8b5cf6);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:1rem;font-size:2rem;font-weight:800;display:flex;overflow:hidden;box-shadow:0 8px 20px -4px #2563eb59}.auth-panel-card .profile-logged-view .profile-avatar-large img{object-fit:cover;width:100%;height:100%}.auth-panel-card .profile-logged-view .profile-name{color:var(--ip-text);margin-bottom:.2rem;font-size:1.3rem;font-weight:800}.auth-panel-card .profile-logged-view .profile-email{color:var(--ip-muted);margin-bottom:.5rem;font-size:.88rem}.auth-panel-card .profile-logged-view .provider-badge{color:#475569;background:#f1f5f9;border-radius:9999px;align-items:center;gap:.35rem;margin-bottom:1.5rem;padding:.25rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.auth-panel-card .profile-logged-view .profile-stats-row{border-top:1px solid var(--ip-border);border-bottom:1px solid var(--ip-border);grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-bottom:1.5rem;padding:1.25rem 0;display:grid}.auth-panel-card .profile-logged-view .profile-stats-row .stat-item{flex-direction:column;gap:.2rem;display:flex}.auth-panel-card .profile-logged-view .profile-stats-row .stat-item .stat-value{color:var(--ip-text);font-size:1.4rem;font-weight:800}.auth-panel-card .profile-logged-view .profile-stats-row .stat-item .stat-label{color:var(--ip-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.auth-panel-card .profile-logged-view .btn-logout{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fee2e2;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-size:.88rem;font-weight:600;transition:all .2s;display:inline-flex}.auth-panel-card .profile-logged-view .btn-logout:hover{background:#fee2e2;border-color:#fca5a5}.library-panel{flex-direction:column;gap:1.5rem;min-width:0;max-width:100%;display:flex}.library-panel .library-header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.library-panel .library-header-row .header-titles h2{color:var(--ip-text);letter-spacing:-.02em;margin-bottom:.25rem;font-size:1.5rem;font-weight:800}.library-panel .library-header-row .header-titles p{color:var(--ip-muted);font-size:.925rem}.library-panel .library-header-row .btn-new-palette{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.88rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.library-panel .library-header-row .btn-new-palette:hover{background:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.library-panel .library-search-tabs-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:100%;display:flex}.library-panel .library-search-tabs-row .lib-search-box{flex:200px;min-width:0;max-width:100%;position:relative}.library-panel .library-search-tabs-row .lib-search-box i{color:#94a3b8;pointer-events:none;font-size:.95rem;position:absolute;top:50%;left:1.1rem;transform:translateY(-50%)}.library-panel .library-search-tabs-row .lib-search-box input{border:1px solid var(--ip-border);width:100%;color:var(--ip-text);background:#fff;border-radius:12px;outline:none;padding:.75rem 1rem .75rem 2.75rem;font-size:.9rem}.library-panel .library-search-tabs-row .lib-search-box input:focus{border-color:var(--ip-primary);box-shadow:0 0 0 3px #1e3a8a1a}.library-panel .library-search-tabs-row .lib-filter-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:.4rem;max-width:100%;padding-bottom:4px;display:flex;overflow-x:auto}.library-panel .library-search-tabs-row .lib-filter-tabs::-webkit-scrollbar{display:none}.library-panel .library-search-tabs-row .lib-filter-tabs .lib-tab{border:1px solid var(--ip-border);color:var(--ip-muted);cursor:pointer;white-space:nowrap;background:#fff;border-radius:9999px;flex-shrink:0;align-items:center;min-height:40px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.library-panel .library-search-tabs-row .lib-filter-tabs .lib-tab:hover,.library-panel .library-search-tabs-row .lib-filter-tabs .lib-tab.active{background:var(--ip-text);color:#fff;border-color:var(--ip-text)}.library-panel .palettes-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.5rem;display:grid}.library-panel .palette-lib-card{border:1px solid var(--ip-border);background:#fff;border-radius:16px;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .2s;display:flex;overflow:hidden;box-shadow:0 2px 8px #00000005}.library-panel .palette-lib-card:hover{border-color:#cbd5e1;transform:translateY(-3px);box-shadow:0 12px 24px -6px #00000014}.library-panel .palette-lib-card .swatches-strip{width:100%;height:90px;display:flex}.library-panel .palette-lib-card .swatches-strip .swatch-item{flex:1;height:100%;transition:flex .2s}.library-panel .palette-lib-card .swatches-strip .swatch-item:hover{flex:1.5}.library-panel .palette-lib-card .palette-meta-section{flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.library-panel .palette-lib-card .palette-meta-section .palette-title-row{justify-content:space-between;align-items:center;display:flex}.library-panel .palette-lib-card .palette-meta-section .palette-title-row h3{color:var(--ip-text);margin:0;font-size:1.05rem;font-weight:700}.library-panel .palette-lib-card .palette-meta-section .palette-title-row .palette-date{color:#94a3b8;font-size:.75rem}.library-panel .palette-lib-card .palette-meta-section .palette-hex-badges{flex-wrap:wrap;gap:.35rem;display:flex}.library-panel .palette-lib-card .palette-meta-section .palette-hex-badges .hex-pill{color:#475569;background:#f1f5f9;border-radius:6px;align-items:center;gap:.3rem;padding:.2rem .45rem;font-family:ui-monospace,monospace;font-size:.7rem;font-weight:600;display:inline-flex}.library-panel .palette-lib-card .palette-meta-section .palette-hex-badges .hex-pill .color-dot{border-radius:50%;width:8px;height:8px}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row{border-top:1px solid var(--ip-border);justify-content:space-between;align-items:center;margin-top:.5rem;padding-top:.75rem;display:flex}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .btn-open-studio{color:var(--ip-primary);align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;text-decoration:none;display:inline-flex}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .btn-open-studio:hover{text-decoration:underline}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .card-util-btns{align-items:center;gap:.35rem;display:flex}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .card-util-btns button{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.3rem;font-size:.85rem;transition:all .15s}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .card-util-btns button:hover{color:var(--ip-text);background:#f1f5f9}.library-panel .palette-lib-card .palette-meta-section .palette-actions-row .card-util-btns button.btn-del:hover{color:#ef4444;background:#fef2f2}.library-panel .empty-library-state{text-align:center;border:1.5px dashed var(--ip-border);background:#fff;border-radius:20px;grid-column:1/-1;padding:4rem 2rem}.library-panel .empty-library-state .empty-icon{color:#94a3b8;margin-bottom:1.25rem;font-size:3rem}.library-panel .empty-library-state h3{color:var(--ip-text);margin-bottom:.5rem;font-size:1.35rem;font-weight:700}.library-panel .empty-library-state p{color:var(--ip-muted);max-width:480px;margin:0 auto 1.5rem;font-size:.95rem;line-height:1.5}.library-panel .empty-library-state .btn-explore{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-radius:12px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.library-panel .empty-library-state .btn-explore:hover{background:var(--ip-btn-primary-hover)}.pwd-reset-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100001;opacity:0;pointer-events:none;background:#0f172a99;justify-content:center;align-items:center;padding:1rem;transition:opacity .25s;display:flex;position:fixed;inset:0}.pwd-reset-modal-backdrop.active{opacity:1;pointer-events:auto}.pwd-reset-modal-backdrop .pwd-reset-modal{background:#fff;border-radius:20px;width:100%;max-width:460px;padding:2rem;position:relative;box-shadow:0 20px 40px -10px #0003}.pwd-reset-modal-backdrop .pwd-reset-modal .modal-close-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.4rem;font-size:1.2rem;position:absolute;top:1.25rem;right:1.25rem}.pwd-reset-modal-backdrop .pwd-reset-modal .modal-close-btn:hover{color:var(--ip-text)}.pwd-reset-modal-backdrop .pwd-reset-modal .modal-header{margin-bottom:1.25rem}.pwd-reset-modal-backdrop .pwd-reset-modal .modal-header h3{color:var(--ip-text);margin-bottom:.35rem;font-size:1.3rem;font-weight:800}.pwd-reset-modal-backdrop .pwd-reset-modal .modal-header p{color:var(--ip-muted);font-size:.88rem;line-height:1.45}.pwd-reset-modal-backdrop .pwd-reset-modal .smtp-badge{color:#059669;background:#10b9811a;border-radius:6px;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.3rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.pwd-reset-modal-backdrop .pwd-reset-modal .reset-step-form{flex-direction:column;gap:1rem;display:flex}.pwd-reset-modal-backdrop .pwd-reset-modal .reset-step-form input{border:1px solid var(--ip-border);width:100%;color:var(--ip-text);background:#f8fafc;border-radius:10px;outline:none;padding:.75rem 1rem;font-size:.9rem}.pwd-reset-modal-backdrop .pwd-reset-modal .reset-step-form input:focus{background:var(--ip-surface);border-color:var(--ip-border-focus);box-shadow:0 0 0 3px var(--ip-primary-glow)}.pwd-reset-modal-backdrop .pwd-reset-modal .reset-step-form .btn-submit-reset{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;font-weight:700;transition:all .2s}.pwd-reset-modal-backdrop .pwd-reset-modal .reset-step-form .btn-submit-reset:hover{background:var(--ip-btn-primary-hover)}.pwd-reset-modal-backdrop .pwd-reset-modal .import-modal-actions{flex-direction:column;gap:10px;margin-top:1.25rem;display:flex}.pwd-reset-modal-backdrop .pwd-reset-modal .import-modal-actions .btn-submit-reset{background:var(--ip-btn-accent-bg);color:var(--ip-btn-accent-text);cursor:pointer;transition:all var(--ip-transition-fast);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:.8rem 1.25rem;font-size:.9rem;font-weight:700;display:inline-flex}.pwd-reset-modal-backdrop .pwd-reset-modal .import-modal-actions .btn-submit-reset:hover{background:var(--ip-accent-lime-hover)}.pwd-reset-modal-backdrop .pwd-reset-modal .import-modal-actions .btn-cancel-import{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:0 0;border-radius:12px;padding:.75rem 1.25rem;font-size:.85rem;font-weight:600}.pwd-reset-modal-backdrop .pwd-reset-modal .import-modal-actions .btn-cancel-import:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.workspace-card{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);box-shadow:var(--ip-shadow-xs);transition:transform var(--ip-transition-fast), box-shadow var(--ip-transition-fast), border-color var(--ip-transition-fast);flex-direction:column;display:flex;overflow:hidden}.workspace-card:hover{box-shadow:var(--ip-shadow-md);border-color:var(--ip-border-focus);transform:translateY(-3px)}.workspace-card .card-top-bar{justify-content:space-between;align-items:center;padding:12px 14px 8px;display:flex}.workspace-card .card-top-bar .resource-type-pill{text-transform:uppercase;letter-spacing:.08em;background:var(--ip-surface-hover);color:var(--ip-text-secondary);border-radius:9999px;padding:3px 8px;font-size:.68rem;font-weight:800}.workspace-card .card-top-bar .resource-type-pill.type-palette{color:#24251f;background:#d0ed8740}[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-palette{color:#d0ed87}.workspace-card .card-top-bar .resource-type-pill.type-theme{color:#6d64d8;background:#8a84e226}[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-theme{color:#a6a0ff}.workspace-card .card-top-bar .resource-type-pill.type-tokens{color:#1f7a6f;background:#2a9d8f26}[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-tokens{color:#48cae4}.workspace-card .card-top-bar .resource-type-pill.type-gradient,.workspace-card .card-top-bar .resource-type-pill.type-shadow,.workspace-card .card-top-bar .resource-type-pill.type-filter{color:#c4573b;background:#e07a5f26}[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-gradient,[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-shadow,[data-theme=dark] .workspace-card .card-top-bar .resource-type-pill.type-filter{color:#f4a261}.workspace-card .card-top-bar .card-quick-actions .btn-fav-item{color:var(--ip-text-subtle);cursor:pointer;transition:color var(--ip-transition-fast), transform var(--ip-transition-fast);background:0 0;border:none;padding:4px;font-size:.95rem}.workspace-card .card-top-bar .card-quick-actions .btn-fav-item:hover{color:#f59e0b;transform:scale(1.15)}.workspace-card .card-top-bar .card-quick-actions .btn-fav-item.active{color:#f59e0b}.workspace-card .card-swatches-strip{border-top:1px solid var(--ip-border-light);border-bottom:1px solid var(--ip-border-light);width:100%;height:72px;display:flex}.workspace-card .card-swatches-strip .card-swatch-cell{height:100%;transition:flex var(--ip-transition-fast);flex:1}.workspace-card .card-swatches-strip .card-swatch-cell:hover{flex:1.4}.workspace-card .card-gradient-preview{border-top:1px solid var(--ip-border-light);border-bottom:1px solid var(--ip-border-light);width:100%;height:72px}.workspace-card .card-shadow-preview{background:var(--ip-bg);justify-content:center;align-items:center;height:72px;display:flex}.workspace-card .card-shadow-preview .shadow-box{background:var(--ip-surface);border-radius:8px;width:44px;height:44px}.workspace-card .card-generic-preview{background:var(--ip-bg);height:72px;color:var(--ip-text-subtle);justify-content:center;align-items:center;font-size:1.5rem;display:flex}.workspace-card .card-info-box{padding:12px 14px 8px}.workspace-card .card-info-box .card-title{color:var(--ip-text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0 0 6px;font-size:.95rem;font-weight:700;overflow:hidden}.workspace-card .card-info-box .card-meta-row{justify-content:space-between;align-items:center;display:flex}.workspace-card .card-info-box .card-meta-row .card-date{color:var(--ip-text-muted);font-size:.75rem}.workspace-card .card-info-box .card-meta-row .sync-pill{border-radius:9999px;align-items:center;gap:4px;padding:2px 7px;font-size:.68rem;font-weight:700;display:inline-flex}.workspace-card .card-info-box .card-meta-row .sync-pill.local{background:var(--ip-surface-hover);color:var(--ip-text-muted)}.workspace-card .card-info-box .card-meta-row .sync-pill.cloud{color:#2a9d8f;background:#2a9d8f26}[data-theme=dark] .workspace-card .card-info-box .card-meta-row .sync-pill.cloud{color:#48cae4}.workspace-card .card-bottom-bar{border-top:1px solid var(--ip-border-light);justify-content:space-between;align-items:center;margin-top:auto;padding:8px 14px 12px;display:flex}.workspace-card .card-bottom-bar .btn-open-workspace{background:var(--ip-btn-secondary-bg);border:1px solid var(--ip-btn-secondary-border);color:var(--ip-btn-secondary-text);cursor:pointer;transition:all var(--ip-transition-fast);border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.workspace-card .card-bottom-bar .btn-open-workspace:hover{background:var(--ip-btn-secondary-hover);color:var(--ip-text-primary)}.workspace-card .card-bottom-bar .btn-item-action{color:var(--ip-text-subtle);cursor:pointer;transition:color var(--ip-transition-fast), background var(--ip-transition-fast);background:0 0;border:none;border-radius:4px;padding:4px;font-size:.85rem}.workspace-card .card-bottom-bar .btn-item-action:hover{color:var(--ip-text-primary);background:var(--ip-surface-hover)}.workspace-card .card-bottom-bar .btn-item-action.btn-delete:hover{color:#ef4444;background:#ef44441a}.workspace-mode-badge{border-radius:9999px;align-items:center;gap:6px;margin-bottom:1.25rem;padding:6px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.workspace-mode-badge.guest{background:var(--ip-surface-hover);color:var(--ip-text-secondary);border:1px solid var(--ip-border)}.oauth-lead-text{color:var(--ip-text-muted);margin:0 0 1rem;font-size:.825rem;line-height:1.45}.auth-security-notice{color:var(--ip-text-muted);background:var(--ip-surface-hover);border-radius:8px;align-items:center;gap:8px;margin-top:1rem;padding:8px 12px;font-size:.72rem;display:flex}.theme-gen-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.theme-gen-hero{width:100%;max-width:1440px;margin:0 auto;padding:2.25rem 2rem 1.25rem}@media (width<=768px){.theme-gen-hero{padding:1.5rem 1rem 1rem}}.theme-gen-hero .theme-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-primary);background:#2563eb14;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.theme-gen-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.theme-gen-hero p{color:var(--ip-text-muted);max-width:780px;margin:0;font-size:1rem;line-height:1.55}.theme-controls-panel{z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ip-border);background:#f8fafcf0;flex-direction:column;gap:.75rem;max-width:100%;padding:.85rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 4px 20px -5px #00000008}[data-theme=dark] .theme-controls-panel{background:#151714f0}@media (width<=768px){.theme-controls-panel{padding:.75rem 1rem}}.theme-step-block{flex-direction:column;gap:.5rem;display:flex}.theme-step-block:not(:last-child){border-bottom:1px solid var(--ip-border);padding-bottom:.65rem}.theme-step-header{justify-content:space-between;align-items:center;display:flex}.theme-step-header .step-header-left{align-items:center;gap:8px;display:flex}.theme-step-header h3{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-text-muted);margin:0;font-size:.75rem;font-weight:800}.theme-step-header .step-num-badge{background:var(--ip-btn-primary-bg);width:18px;height:18px;color:var(--ip-btn-primary-text);border-radius:50%;justify-content:center;align-items:center;font-size:.65rem;font-weight:800;display:inline-flex}.theme-save-status-wrap .save-indicator{border-radius:9999px;align-items:center;gap:5px;padding:2px 8px;font-size:.75rem;font-weight:700;display:inline-flex}.theme-save-status-wrap .save-indicator.clean{background:var(--ip-surface-muted,#f1f5f9);color:var(--ip-text-muted)}.theme-save-status-wrap .save-indicator.dirty{color:#d97706;background:#f59e0b1f}.theme-save-status-wrap .save-indicator.dirty i{font-size:.55rem}.theme-save-status-wrap .save-indicator.saved{color:#10b981;background:#10b9811f}.btn-toggle-advanced{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:6px;padding:3px 8px;font-size:.75rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-toggle-advanced:hover{color:var(--ip-text-primary);background:var(--ip-surface-hover)}.btn-toggle-advanced .caret-icon{font-size:.65rem;transition:transform .2s}.btn-toggle-advanced[aria-expanded=true] .caret-icon{transform:rotate(180deg)}.advanced-controls-panel{flex-wrap:wrap;align-items:center;gap:10px;padding-top:6px;transition:all .2s;display:flex}.advanced-controls-panel.collapsed{display:none}.step3-actions-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.theme-save-btn-group{align-items:center;gap:8px;display:flex}.theme-save-btn-group .btn-save-theme{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border:1px solid var(--ip-btn-primary-bg);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:700;display:inline-flex}.theme-save-btn-group .btn-save-theme:hover{background:var(--ip-btn-primary-hover);border-color:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.theme-save-btn-group .btn-save-theme:active{transform:translateY(0)}.theme-save-btn-group .btn-save-as-theme{background:var(--ip-surface);color:var(--ip-text-primary);border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;display:inline-flex}.theme-save-btn-group .btn-save-as-theme:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);color:var(--ip-text-primary);transform:translateY(-1px)}.theme-save-btn-group .btn-save-as-theme:active{transform:translateY(0)}.archetypes-tabs-row{scrollbar-width:none;align-items:center;gap:8px;padding-bottom:.25rem;display:flex;overflow-x:auto}.archetypes-tabs-row::-webkit-scrollbar{display:none}.archetypes-tabs-row .archetype-tab{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;white-space:nowrap;background:#fff;border-radius:9999px;align-items:center;gap:8px;padding:7px 15px;font-size:.825rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .archetypes-tabs-row .archetype-tab{background:#111827}.archetypes-tabs-row .archetype-tab i{color:var(--ip-text-muted);font-size:.85rem}.archetypes-tabs-row .archetype-tab:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary);transform:translateY(-1px)}.archetypes-tabs-row .archetype-tab.active{background:var(--ip-btn-primary-bg);border-color:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.archetypes-tabs-row .archetype-tab.active i{color:inherit;opacity:.9}.theme-toolbar-grid{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.swatches-mapper{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.swatches-mapper .swatch-picker-item{flex-direction:column;gap:4px;display:flex}.swatches-mapper .swatch-picker-item .swatch-label{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);font-size:.68rem;font-weight:700}.swatches-mapper .swatch-picker-item .swatch-control{border:1px solid var(--ip-border);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:3px 6px 3px 4px;transition:border-color .15s;display:inline-flex;position:relative}[data-theme=dark] .swatches-mapper .swatch-picker-item .swatch-control{background:#111827}.swatches-mapper .swatch-picker-item .swatch-control:focus-within,.swatches-mapper .swatch-picker-item .swatch-control:hover{border-color:var(--ip-primary)}.swatches-mapper .swatch-picker-item .swatch-control .swatch-color-bubble{border:1px solid #0000001a;border-radius:6px;flex-shrink:0;width:20px;height:20px;display:inline-block}.swatches-mapper .swatch-picker-item .swatch-control input[type=color]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.swatches-mapper .swatch-picker-item .swatch-control input[type=text]{color:var(--ip-text-primary);text-transform:uppercase;background:0 0;border:none;outline:none;width:65px;font-family:monospace;font-size:.78rem;font-weight:600}.theme-actions-cluster{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.theme-actions-cluster .preset-selector-box select{border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;background:#fff;border-radius:8px;outline:none;padding:7px 12px;font-size:.8rem;font-weight:600}[data-theme=dark] .theme-actions-cluster .preset-selector-box select{background:#111827}.theme-actions-cluster .preset-selector-box select:focus{border-color:var(--ip-primary)}.theme-actions-cluster .btn-ctrl-action{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:7px 12px;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .theme-actions-cluster .btn-ctrl-action{background:#111827}.theme-actions-cluster .btn-ctrl-action:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.theme-actions-cluster .theme-mode-switch{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:8px;align-items:center;padding:2px;display:inline-flex}.theme-actions-cluster .theme-mode-switch button{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:30px;font-size:.85rem;transition:all .15s;display:inline-flex}.theme-actions-cluster .theme-mode-switch button:hover{color:var(--ip-text-primary)}.theme-actions-cluster .theme-mode-switch button.active{background:var(--ip-surface-hover);color:var(--ip-primary);font-weight:700}.theme-actions-cluster .theme-viewport-switch{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:10px;align-items:center;gap:3px;padding:3px;display:inline-flex;box-shadow:0 1px 3px #0000000a}.theme-actions-cluster .theme-viewport-switch .btn-viewport{color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;gap:6px;min-height:36px;padding:.4rem .85rem;font-size:.825rem;font-weight:600;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex}.theme-actions-cluster .theme-viewport-switch .btn-viewport i{opacity:.85;font-size:.85rem}.theme-actions-cluster .theme-viewport-switch .btn-viewport .viewport-label{font-size:.8rem;font-weight:600}.theme-actions-cluster .theme-viewport-switch .btn-viewport:hover:not(.active){color:var(--ip-text-primary);background:var(--ip-surface-hover)}.theme-actions-cluster .theme-viewport-switch .btn-viewport.active{background:var(--ip-btn-primary-bg)!important;color:var(--ip-btn-primary-text)!important;border-color:var(--ip-btn-primary-bg)!important;font-weight:700!important;box-shadow:0 2px 8px #24251f29!important}.theme-actions-cluster .theme-viewport-switch .btn-viewport.active i{opacity:1}.theme-actions-cluster .theme-viewport-switch .btn-viewport:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}@media (width<=480px){.theme-actions-cluster .theme-viewport-switch .btn-viewport{padding:.4rem .6rem}.theme-actions-cluster .theme-viewport-switch .btn-viewport .viewport-label{display:none}}.theme-actions-cluster .btn-export-tokens{background:var(--ip-surface);color:var(--ip-text-primary);border:1px solid var(--ip-border);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 1px 3px #0000000a}.theme-actions-cluster .btn-export-tokens i{color:var(--ip-accent-coral,#e07a5f);font-size:.9rem}.theme-actions-cluster .btn-export-tokens:hover{background:var(--ip-surface-hover);border-color:var(--ip-text-primary);transform:translateY(-1px);box-shadow:0 4px 12px #00000014}.theme-actions-cluster .btn-export-tokens:active{transform:translateY(0)}.theme-actions-cluster .btn-export-tokens:focus-visible{outline:2px solid var(--ip-border-focus);outline-offset:2px}.theme-contrast-multi-bar{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:6px 14px;display:flex}.theme-contrast-multi-bar .contrast-item{align-items:center;gap:6px;font-size:.75rem;display:inline-flex}.theme-contrast-multi-bar .contrast-item .contrast-role{color:var(--ip-text-muted);font-weight:600}.theme-contrast-multi-bar .contrast-item .contrast-badge{border-radius:6px;padding:2px 7px;font-size:.72rem;font-weight:700}.theme-contrast-multi-bar .contrast-item .contrast-badge.pass{color:#10b981;background:#10b9811f}.theme-contrast-multi-bar .contrast-item .contrast-badge.warning{color:#d97706;background:#f59e0b1f}.theme-contrast-multi-bar .contrast-item .contrast-badge.fail{color:#ef4444;background:#ef44441f}.theme-contrast-multi-bar .contrast-summary-text{color:var(--ip-text-muted);align-items:center;gap:5px;margin-left:auto;font-size:.72rem;display:inline-flex}@media (width<=768px){.theme-contrast-multi-bar .contrast-summary-text{width:100%;margin-left:0}}.theme-preview-wrapper{justify-content:center;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem 4rem;display:flex}@media (width<=768px){.theme-preview-wrapper{padding:1rem 1rem 3rem}}.theme-device-frame{border:1px solid var(--ip-border);background:#fff;border-radius:16px;width:100%;transition:max-width .35s cubic-bezier(.16,1,.3,1),transform .25s;overflow:hidden;box-shadow:0 16px 40px -10px #00000012}.theme-device-frame.desktop{max-width:100%}.theme-device-frame.tablet{max-width:768px;box-shadow:0 20px 50px -10px #0000001f}.theme-device-frame.mobile{max-width:390px;box-shadow:0 20px 50px -10px #00000026}.theme-device-frame .device-browser-chrome{border-bottom:1px solid var(--ip-border);background:#f1f5f9;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}[data-theme=dark] .theme-device-frame .device-browser-chrome{background:#111827}.theme-device-frame .device-browser-chrome .window-dots{align-items:center;gap:6px;display:inline-flex}.theme-device-frame .device-browser-chrome .window-dots .dot{border-radius:50%;width:10px;height:10px}.theme-device-frame .device-browser-chrome .window-dots .dot.red{background:#ef4444}.theme-device-frame .device-browser-chrome .window-dots .dot.yellow{background:#f59e0b}.theme-device-frame .device-browser-chrome .window-dots .dot.green{background:#10b981}.theme-device-frame .device-browser-chrome .browser-address-pill{border:1px solid var(--ip-border);color:var(--ip-text-muted);background:#fff;border-radius:9999px;align-items:center;gap:8px;padding:4px 14px;font-size:.75rem;font-weight:500;display:inline-flex}[data-theme=dark] .theme-device-frame .device-browser-chrome .browser-address-pill{background:#1f2937}.theme-device-frame .device-browser-chrome .browser-address-pill i{color:#10b981;font-size:.7rem}.theme-device-frame .device-browser-chrome .viewport-tag-label{color:var(--ip-text-subtle);font-size:.7rem;font-weight:600}.theme-sandbox-canvas{--th-primary:#2563eb;--th-primary-hover:#1d4ed8;--th-primary-light:#2563eb1a;--th-accent:#8b5cf6;--th-bg:#f8fafc;--th-surface:#fff;--th-surface-hover:#f1f5f9;--th-text:#0f172a;--th-text-muted:#64748b;--th-border:#e2e8f0;--th-radius:12px;background:var(--th-bg);color:var(--th-text);min-height:600px;font-family:inherit;transition:background-color .2s,color .2s}.archetype-saas{flex-direction:column;display:flex}.archetype-saas .saas-nav{border-bottom:1px solid var(--th-border);background:var(--th-surface);justify-content:space-between;align-items:center;padding:1.25rem 2rem;display:flex}.archetype-saas .saas-nav .saas-brand{align-items:center;gap:10px;font-size:1.1rem;font-weight:800;display:inline-flex}.archetype-saas .saas-nav .saas-brand .brand-dot{background:var(--th-primary);border-radius:4px;width:14px;height:14px}.archetype-saas .saas-nav .saas-links{color:var(--th-text-muted);align-items:center;gap:20px;font-size:.85rem;font-weight:600;display:flex}@media (width<=640px){.archetype-saas .saas-nav .saas-links{display:none}}.archetype-saas .saas-nav .btn-saas-cta{background:var(--th-primary);color:#fff;border-radius:var(--th-radius);cursor:pointer;border:none;padding:8px 18px;font-size:.85rem;font-weight:700;transition:all .15s}.archetype-saas .saas-nav .btn-saas-cta:hover{background:var(--th-primary-hover)}.archetype-saas .saas-hero{text-align:center;max-width:860px;margin:0 auto;padding:4rem 2rem 3rem}.archetype-saas .saas-hero .saas-badge{background:var(--th-primary-light);color:var(--th-primary);border-radius:9999px;align-items:center;gap:6px;margin-bottom:1.25rem;padding:4px 12px;font-size:.75rem;font-weight:700;display:inline-flex}.archetype-saas .saas-hero h2{letter-spacing:-.03em;color:var(--th-text);margin:0 0 1.25rem;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.15}.archetype-saas .saas-hero h2 .accent-word{color:var(--th-primary)}.archetype-saas .saas-hero p{color:var(--th-text-muted);max-width:640px;margin:0 auto 2rem;font-size:1.1rem;line-height:1.6}.archetype-saas .saas-hero .saas-cta-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.archetype-saas .saas-hero .saas-cta-group .btn-primary-hero{background:var(--th-primary);color:#fff;border-radius:var(--th-radius);cursor:pointer;border:none;align-items:center;gap:8px;padding:12px 24px;font-size:.95rem;font-weight:700;transition:all .15s;display:inline-flex}.archetype-saas .saas-hero .saas-cta-group .btn-primary-hero:hover{background:var(--th-primary-hover);transform:translateY(-2px)}.archetype-saas .saas-hero .saas-cta-group .btn-secondary-hero{background:var(--th-surface);color:var(--th-text);border:1px solid var(--th-border);border-radius:var(--th-radius);cursor:pointer;align-items:center;gap:8px;padding:12px 22px;font-size:.95rem;font-weight:600;display:inline-flex}.archetype-saas .saas-hero .saas-cta-group .btn-secondary-hero:hover{background:var(--th-surface-hover)}.archetype-saas .saas-features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;width:100%;max-width:1100px;margin:0 auto;padding:2rem 2rem 4rem;display:grid}.archetype-saas .saas-features-grid .feature-card{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);padding:1.75rem;transition:all .2s}.archetype-saas .saas-features-grid .feature-card:hover{border-color:var(--th-primary);transform:translateY(-3px)}.archetype-saas .saas-features-grid .feature-card .feat-icon-box{background:var(--th-primary-light);width:44px;height:44px;color:var(--th-primary);border-radius:10px;justify-content:center;align-items:center;margin-bottom:1.25rem;font-size:1.15rem;display:inline-flex}.archetype-saas .saas-features-grid .feature-card h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:700}.archetype-saas .saas-features-grid .feature-card p{color:var(--th-text-muted);margin:0;font-size:.88rem;line-height:1.5}.archetype-dashboard{padding:1.75rem 2rem}.archetype-dashboard .dash-topbar{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.archetype-dashboard .dash-topbar .dash-titles h2{margin:0 0 .25rem;font-size:1.4rem;font-weight:800}.archetype-dashboard .dash-topbar .dash-titles p{color:var(--th-text-muted);margin:0;font-size:.85rem}.archetype-dashboard .dash-topbar .dash-actions{align-items:center;gap:10px;display:flex}.archetype-dashboard .dash-topbar .dash-actions .btn-dash-primary{background:var(--th-primary);color:#fff;border-radius:var(--th-radius);cursor:pointer;border:none;padding:8px 16px;font-size:.85rem;font-weight:600}.archetype-dashboard .dash-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin-bottom:2rem;display:grid}.archetype-dashboard .dash-kpi-grid .kpi-card{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);padding:1.25rem}.archetype-dashboard .dash-kpi-grid .kpi-card .kpi-label{text-transform:uppercase;letter-spacing:.05em;color:var(--th-text-muted);margin-bottom:.5rem;font-size:.75rem;font-weight:600}.archetype-dashboard .dash-kpi-grid .kpi-card .kpi-val{letter-spacing:-.02em;margin-bottom:.35rem;font-size:1.6rem;font-weight:800}.archetype-dashboard .dash-kpi-grid .kpi-card .kpi-trend{color:#10b981;align-items:center;gap:4px;font-size:.75rem;font-weight:700;display:inline-flex}.archetype-dashboard .dash-split-views{grid-template-columns:2fr 1fr;gap:1.5rem;display:grid}@media (width<=900px){.archetype-dashboard .dash-split-views{grid-template-columns:1fr}}.archetype-dashboard .dash-split-views .dash-card{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);padding:1.5rem}.archetype-dashboard .dash-split-views .dash-card h3{margin:0 0 1.25rem;font-size:1rem;font-weight:700}.archetype-dashboard .dash-split-views .dash-card .chart-simulation-box{align-items:flex-end;gap:14px;height:180px;padding-top:20px;display:flex}.archetype-dashboard .dash-split-views .dash-card .chart-simulation-box .bar-col{background:var(--th-primary-light);border-radius:6px 6px 0 0;flex:1;transition:height .3s;position:relative}.archetype-dashboard .dash-split-views .dash-card .chart-simulation-box .bar-col.active{background:var(--th-primary)}.archetype-dashboard .dash-split-views .dash-card .chart-simulation-box .bar-col:hover{opacity:.85}.archetype-dashboard .dash-split-views .dash-card .activity-table{border-collapse:collapse;width:100%;font-size:.85rem}.archetype-dashboard .dash-split-views .dash-card .activity-table tr{border-bottom:1px solid var(--th-border)}.archetype-dashboard .dash-split-views .dash-card .activity-table tr:last-child{border-bottom:none}.archetype-dashboard .dash-split-views .dash-card .activity-table td{padding:10px 0}.archetype-dashboard .dash-split-views .dash-card .activity-table .badge-status{background:var(--th-primary-light);color:var(--th-primary);border-radius:9999px;padding:2px 8px;font-size:.72rem;font-weight:700}.archetype-editorial{max-width:780px;margin:0 auto;padding:3rem 2rem 4rem}.archetype-editorial .ed-header{margin-bottom:2rem}.archetype-editorial .ed-header .ed-meta-tag{text-transform:uppercase;letter-spacing:.1em;color:var(--th-accent);margin-bottom:.75rem;font-size:.75rem;font-weight:800;display:block}.archetype-editorial .ed-header h2{letter-spacing:-.025em;margin:0 0 1.25rem;font-size:clamp(2rem,3.5vw,2.75rem);font-weight:900;line-height:1.2}.archetype-editorial .ed-header .ed-author-row{border-bottom:1px solid var(--th-border);align-items:center;gap:12px;padding-bottom:1.5rem;display:flex}.archetype-editorial .ed-header .ed-author-row .author-avatar{background:var(--th-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:.85rem;font-weight:700;display:flex}.archetype-editorial .ed-header .ed-author-row .author-info{font-size:.825rem;line-height:1.35}.archetype-editorial .ed-header .ed-author-row .author-info .name{color:var(--th-text);font-weight:700}.archetype-editorial .ed-header .ed-author-row .author-info .date{color:var(--th-text-muted)}.archetype-editorial .ed-body{color:var(--th-text);font-size:1.05rem;line-height:1.75}.archetype-editorial .ed-body p{margin-bottom:1.5rem}.archetype-editorial .ed-body .ed-blockquote{border-left:4px solid var(--th-primary);background:var(--th-surface);border-radius:0 var(--th-radius) var(--th-radius) 0;color:var(--th-primary);margin:2rem 0;padding:1.25rem 1.75rem;font-size:1.15rem;font-style:italic}.archetype-ecommerce{padding:2rem}.archetype-ecommerce .store-header{border-bottom:1px solid var(--th-border);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;display:flex}.archetype-ecommerce .store-header h2{margin:0;font-size:1.35rem;font-weight:800}.archetype-ecommerce .store-header .cart-pill{background:var(--th-surface);border:1px solid var(--th-border);color:var(--th-text);border-radius:9999px;align-items:center;gap:8px;padding:7px 14px;font-size:.825rem;font-weight:700;display:inline-flex}.archetype-ecommerce .store-header .cart-pill .cart-badge{background:var(--th-accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:.65rem;display:flex}.archetype-ecommerce .products-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;display:grid}.archetype-ecommerce .products-grid .product-card{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);flex-direction:column;transition:all .2s;display:flex;overflow:hidden}.archetype-ecommerce .products-grid .product-card:hover{border-color:var(--th-primary);transform:translateY(-3px)}.archetype-ecommerce .products-grid .product-card .product-img-box{background:var(--th-surface-hover);height:160px;color:var(--th-text-muted);justify-content:center;align-items:center;font-size:2.5rem;display:flex;position:relative}.archetype-ecommerce .products-grid .product-card .product-img-box .sale-pill{background:var(--th-accent);color:#fff;border-radius:6px;padding:2px 8px;font-size:.7rem;font-weight:700;position:absolute;top:10px;left:10px}.archetype-ecommerce .products-grid .product-card .product-info{flex-direction:column;flex:1;padding:1.25rem;display:flex}.archetype-ecommerce .products-grid .product-card .product-info h3{margin:0 0 .5rem;font-size:.95rem;font-weight:700}.archetype-ecommerce .products-grid .product-card .product-info .rating-stars{color:#f59e0b;margin-bottom:.75rem;font-size:.75rem}.archetype-ecommerce .products-grid .product-card .product-info .price-row{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.archetype-ecommerce .products-grid .product-card .product-info .price-row .price{font-size:1.1rem;font-weight:800}.archetype-ecommerce .products-grid .product-card .product-info .price-row .btn-add-bag{background:var(--th-primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:6px 12px;font-size:.78rem;font-weight:700}.archetype-ecommerce .products-grid .product-card .product-info .price-row .btn-add-bag:hover{background:var(--th-primary-hover)}.archetype-portfolio{max-width:900px;margin:0 auto;padding:3rem 2rem}.archetype-portfolio .portfolio-hero{margin-bottom:3rem}.archetype-portfolio .portfolio-hero .role-badge{color:var(--th-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;font-size:.78rem;font-weight:700;display:block}.archetype-portfolio .portfolio-hero h2{letter-spacing:-.03em;margin:0 0 1rem;font-size:clamp(2rem,3.5vw,2.8rem);font-weight:900}.archetype-portfolio .portfolio-hero p{color:var(--th-text-muted);max-width:680px;margin:0 0 1.5rem;font-size:1.1rem;line-height:1.6}.archetype-portfolio .portfolio-hero .tech-pills{flex-wrap:wrap;gap:8px;display:flex}.archetype-portfolio .portfolio-hero .tech-pills .tech-pill{background:var(--th-surface);border:1px solid var(--th-border);color:var(--th-text);border-radius:9999px;padding:5px 12px;font-size:.75rem;font-weight:600}.archetype-portfolio .portfolio-projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.archetype-portfolio .portfolio-projects-grid .project-card{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);padding:1.75rem;transition:all .2s}.archetype-portfolio .portfolio-projects-grid .project-card:hover{border-color:var(--th-primary);transform:translateY(-2px)}.archetype-portfolio .portfolio-projects-grid .project-card h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:800}.archetype-portfolio .portfolio-projects-grid .project-card p{color:var(--th-text-muted);margin:0 0 1.25rem;font-size:.88rem;line-height:1.5}.archetype-portfolio .portfolio-projects-grid .project-card .btn-view-project{color:var(--th-primary);align-items:center;gap:6px;font-size:.825rem;font-weight:700;text-decoration:none;display:inline-flex}.archetype-admin{padding:2rem}.archetype-admin .admin-header{border-bottom:1px solid var(--th-border);margin-bottom:2rem;padding-bottom:1rem}.archetype-admin .admin-header h2{margin:0 0 .25rem;font-size:1.4rem;font-weight:800}.archetype-admin .admin-header p{color:var(--th-text-muted);margin:0;font-size:.85rem}.archetype-admin .admin-content-box{background:var(--th-surface);border:1px solid var(--th-border);border-radius:var(--th-radius);padding:2rem}.archetype-admin .admin-content-box .form-group-admin{margin-bottom:1.5rem}.archetype-admin .admin-content-box .form-group-admin label{margin-bottom:.4rem;font-size:.825rem;font-weight:700;display:block}.archetype-admin .admin-content-box .form-group-admin input[type=text]{border:1px solid var(--th-border);background:var(--th-bg);width:100%;max-width:480px;color:var(--th-text);border-radius:8px;outline:none;padding:9px 12px;font-size:.88rem}.archetype-admin .admin-content-box .form-group-admin input[type=text]:focus{border-color:var(--th-primary)}.archetype-admin .admin-content-box .toggle-row{border-bottom:1px solid var(--th-border);justify-content:space-between;align-items:center;max-width:480px;padding:12px 0;display:flex}.archetype-admin .admin-content-box .toggle-row .toggle-info .title{font-size:.88rem;font-weight:700}.archetype-admin .admin-content-box .toggle-row .toggle-info .sub{color:var(--th-text-muted);font-size:.78rem}.archetype-admin .admin-content-box .toggle-row .switch-box{background:var(--th-primary);cursor:pointer;border-radius:9999px;width:40px;height:22px;position:relative}.archetype-admin .admin-content-box .toggle-row .switch-box:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;position:absolute;top:2px;right:2px}.archetype-admin .admin-content-box .btn-save-admin{background:var(--th-primary);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:1.75rem;padding:10px 20px;font-size:.85rem;font-weight:700}.theme-export-modal-backdrop{z-index:999999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0f172aa6;justify-content:center;align-items:center;padding:1.5rem;transition:opacity .25s;display:flex;position:fixed;inset:0}.theme-export-modal-backdrop.active{opacity:1;pointer-events:auto}.theme-export-modal-backdrop .theme-export-modal{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);width:100%;max-width:680px;box-shadow:var(--ip-shadow-lg);flex-direction:column;max-height:90vh;padding:2rem;display:flex;position:relative}[data-theme=dark] .theme-export-modal-backdrop .theme-export-modal{background:var(--ip-surface);border-color:var(--ip-border)}.theme-export-modal-backdrop .theme-export-modal .modal-close-btn{color:var(--ip-text-muted);cursor:pointer;border-radius:var(--ip-radius-sm);transition:all var(--ip-transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;font-size:1.25rem;display:inline-flex;position:absolute;top:1.5rem;right:1.5rem}.theme-export-modal-backdrop .theme-export-modal .modal-close-btn:hover{color:var(--ip-text-primary);background:var(--ip-surface-hover);transform:rotate(90deg)}.theme-export-modal-backdrop .theme-export-modal .export-modal-header{margin-bottom:1.25rem;padding-right:2rem}.theme-export-modal-backdrop .theme-export-modal .export-modal-header h2{letter-spacing:-.02em;color:var(--ip-text-primary);margin:0 0 .35rem;font-size:1.35rem;font-weight:800}.theme-export-modal-backdrop .theme-export-modal .export-modal-header p{color:var(--ip-text-muted);margin:0;font-size:.88rem;line-height:1.5}.theme-export-modal-backdrop .theme-export-modal .export-tabs-row{background:var(--ip-surface-hover);border-radius:var(--ip-radius-md);border:1px solid var(--ip-border);gap:6px;margin-bottom:1rem;padding:4px;display:flex;overflow-x:auto}.theme-export-modal-backdrop .theme-export-modal .export-tabs-row .export-tab-btn{border-radius:var(--ip-radius-sm);color:var(--ip-text-muted);cursor:pointer;transition:all var(--ip-transition-fast);white-space:nowrap;background:0 0;border:none;padding:7px 14px;font-size:.8rem;font-weight:600}.theme-export-modal-backdrop .theme-export-modal .export-tabs-row .export-tab-btn:hover:not(.active){color:var(--ip-text-primary);background:#0000000a}[data-theme=dark] .theme-export-modal-backdrop .theme-export-modal .export-tabs-row .export-tab-btn:hover:not(.active){background:#ffffff0d}.theme-export-modal-backdrop .theme-export-modal .export-tabs-row .export-tab-btn.active{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs);font-weight:700}.theme-export-modal-backdrop .theme-export-modal .export-code-container{color:#f3f3ee;border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);background:#141714;flex:1;max-height:340px;padding:1.25rem;overflow:auto;box-shadow:inset 0 2px 8px #0003}.theme-export-modal-backdrop .theme-export-modal .export-code-container pre{color:#e2e8f0;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Fira Code,monospace;font-size:.825rem;line-height:1.6}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer{justify-content:flex-end;align-items:center;gap:10px;margin-top:1.25rem;display:flex}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer button{border-radius:var(--ip-radius-md);cursor:pointer;transition:all var(--ip-transition-fast);align-items:center;gap:8px;padding:9px 18px;font-size:.85rem;font-weight:700;display:inline-flex}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer .btn-download-file{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);box-shadow:var(--ip-shadow-xs)}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer .btn-download-file:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);transform:translateY(-1px)}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer .btn-copy-code{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border:1px solid var(--ip-btn-primary-bg);box-shadow:var(--ip-shadow-xs)}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer .btn-copy-code:hover{background:var(--ip-btn-primary-hover);border-color:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.theme-export-modal-backdrop .theme-export-modal .export-modal-footer .btn-copy-code.copied{background:var(--ip-accent-emerald,#10b981);color:#fff;border-color:var(--ip-accent-emerald,#10b981)}.tokens-studio-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.tokens-studio-hero{width:100%;max-width:1440px;margin:0 auto;padding:2.25rem 2rem 1.25rem}@media (width<=768px){.tokens-studio-hero{padding:1.5rem 1rem 1rem}}.tokens-studio-hero .tokens-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-primary);background:#2563eb14;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.tokens-studio-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.tokens-studio-hero p{color:var(--ip-text-muted);max-width:820px;margin:0;font-size:1rem;line-height:1.55}.tokens-controls-panel{z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ip-border);background:#f8fafcf0;padding:1rem 2rem;position:sticky;top:0;box-shadow:0 4px 20px -5px #00000008}[data-theme=dark] .tokens-controls-panel{background:#0b0f19f0}@media (width<=768px){.tokens-controls-panel{padding:.85rem 1rem}}.tokens-panel-top-row{border-bottom:1px solid var(--ip-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:.75rem;padding-bottom:.5rem;display:flex}.tokens-mode-toggle-group{background:var(--ip-surface-muted,#f1f5f9);border:1px solid var(--ip-border);border-radius:8px;align-items:center;gap:2px;padding:2px;display:inline-flex}[data-theme=dark] .tokens-mode-toggle-group{background:#111827}.tokens-mode-toggle-group .btn-mode-toggle{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:.75rem;font-weight:700;transition:all .15s;display:inline-flex}.tokens-mode-toggle-group .btn-mode-toggle.active{background:var(--ip-surface,#fff);color:var(--ip-text-primary);box-shadow:0 1px 4px #00000014}[data-theme=dark] .tokens-mode-toggle-group .btn-mode-toggle.active{color:#fff;background:#1f2937}.tokens-mode-toggle-group .btn-mode-toggle:hover:not(.active){color:var(--ip-text-primary)}.semantic-roles-tabs{scrollbar-width:none;align-items:center;gap:8px;display:flex;overflow-x:auto}.semantic-roles-tabs::-webkit-scrollbar{display:none}.semantic-roles-tabs .role-tab{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;white-space:nowrap;background:#fff;border-radius:9999px;align-items:center;gap:8px;padding:6px 14px;font-size:.825rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .semantic-roles-tabs .role-tab{background:#111827}.semantic-roles-tabs .role-tab .role-bubble{border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.semantic-roles-tabs .role-tab:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.semantic-roles-tabs .role-tab.active{background:var(--ip-btn-primary-bg);border-color:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.tokens-params-grid{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.tokens-params-grid.mode-basic .advanced-only-param{display:none!important}.param-box{flex-direction:column;gap:4px;display:flex}.param-box .param-label{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);font-size:.68rem;font-weight:700}.param-box select{border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;background:#fff;border-radius:8px;outline:none;padding:6px 12px;font-size:.8rem;font-weight:600}[data-theme=dark] .param-box select{background:#111827}.param-box select:focus{border-color:var(--ip-primary)}.base-picker-control{border:1px solid var(--ip-border);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:8px;padding:3px 8px 3px 4px;display:inline-flex;position:relative}[data-theme=dark] .base-picker-control{background:#111827}.base-picker-control .color-preview-disc{border:1px solid #0000001a;border-radius:6px;width:22px;height:22px}.base-picker-control input[type=color]{opacity:0;cursor:pointer;position:absolute;inset:0}.base-picker-control input[type=text]{color:var(--ip-text-primary);text-transform:uppercase;background:0 0;border:none;outline:none;width:68px;font-family:monospace;font-size:.825rem;font-weight:700}.slider-param-box{min-width:150px}.slider-param-box .slider-header-row{color:var(--ip-text-muted);justify-content:space-between;font-size:.68rem;font-weight:700;display:flex}.slider-param-box input[type=range]{accent-color:var(--ip-primary);cursor:pointer}.format-toggle-group{border:1px solid var(--ip-border);background:#fff;border-radius:8px;padding:2px;display:inline-flex}[data-theme=dark] .format-toggle-group{background:#111827}.format-toggle-group .btn-fmt{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:5px 10px;font-size:.75rem;font-weight:700;transition:all .15s}.format-toggle-group .btn-fmt:hover{color:var(--ip-text-primary)}.format-toggle-group .btn-fmt.active{background:var(--ip-surface-hover);color:var(--ip-primary)}.param-actions-cluster{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.param-actions-cluster .btn-tool-action{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:7px 12px;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .param-actions-cluster .btn-tool-action{background:#111827}.param-actions-cluster .btn-tool-action:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.param-actions-cluster .btn-save-tokens{background:var(--ip-surface,#fff);border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-size:.825rem;font-weight:700;transition:all .15s;display:inline-flex}[data-theme=dark] .param-actions-cluster .btn-save-tokens{background:#111827}.param-actions-cluster .btn-save-tokens:hover{background:var(--ip-surface-hover);border-color:var(--ip-primary);color:var(--ip-primary);transform:translateY(-1px)}.tonal-ramp-section{width:100%;max-width:1440px;margin:0 auto;padding:2rem 2rem 1.5rem}@media (width<=768px){.tonal-ramp-section{padding:1.5rem 1rem 1rem}}.tonal-ramp-section .section-title-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:1.25rem;display:flex}.tonal-ramp-section .section-title-row h2{letter-spacing:-.02em;margin:0 0 .25rem;font-size:1.25rem;font-weight:800}.tonal-ramp-section .section-title-row p{color:var(--ip-text-muted);margin:0;font-size:.88rem}.tonal-ramp-section .section-title-row .btn-copy-ramp-all{border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-size:.8rem;font-weight:700;display:inline-flex}.tonal-ramp-section .section-title-row .btn-copy-ramp-all:hover{background:var(--ip-surface-hover)}.tonal-ramp-grid{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:12px;display:grid}@media (width<=640px){.tonal-ramp-grid{grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:8px}}.tonal-ramp-grid .tonal-step-card{border:1px solid var(--ip-border);cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;overflow:hidden;box-shadow:0 2px 8px #00000005}[data-theme=dark] .tonal-ramp-grid .tonal-step-card{background:#111827}.tonal-ramp-grid .tonal-step-card:hover{border-color:var(--ip-primary);transform:translateY(-4px);box-shadow:0 10px 20px -5px #00000014}.tonal-ramp-grid .tonal-step-card .swatch-color-fill{justify-content:space-between;align-items:flex-end;width:100%;height:90px;padding:8px;display:flex;position:relative}.tonal-ramp-grid .tonal-step-card .swatch-color-fill .step-tag-pill{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;letter-spacing:.02em;background:#0f172abf;border:1px solid #ffffff40;border-radius:5px;padding:2px 7px;font-size:.7rem;font-weight:800;box-shadow:0 1px 3px #00000040}.tonal-ramp-grid .tonal-step-card .swatch-color-fill .copy-icon-hover{opacity:0;color:#fff;font-size:.8rem;transition:opacity .15s}.tonal-ramp-grid .tonal-step-card:hover .copy-icon-hover{opacity:1}.tonal-ramp-grid .tonal-step-card .step-card-meta{flex-direction:column;gap:6px;padding:10px;display:flex}.tonal-ramp-grid .tonal-step-card .step-card-meta .step-code-val{color:var(--ip-text-primary);white-space:nowrap;text-overflow:ellipsis;font-family:monospace;font-size:.75rem;font-weight:700;overflow:hidden}.tonal-ramp-grid .tonal-step-card .step-card-meta .step-contrast-row{justify-content:space-between;align-items:center;font-size:.65rem;font-weight:700;display:flex}.tonal-ramp-grid .tonal-step-card .step-card-meta .step-contrast-row .ratio-w{color:#64748b}.tonal-ramp-grid .tonal-step-card .step-card-meta .step-contrast-row .ratio-b{color:#0f172a}[data-theme=dark] .tonal-ramp-grid .tonal-step-card .step-card-meta .step-contrast-row .ratio-b{color:#f8fafc}.tonal-ramp-grid .tonal-step-card .step-card-meta .step-contrast-row .wcag-pass-badge{color:#10b981;background:#10b9811a;border-radius:4px;padding:1px 4px}.semantic-matrix-section{width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem 4rem}@media (width<=768px){.semantic-matrix-section{padding:1rem 1rem 3rem}}.semantic-matrix-section .semantic-preview-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.semantic-matrix-section .semantic-card{border:1px solid var(--ip-border);background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 16px #00000005}[data-theme=dark] .semantic-matrix-section .semantic-card{background:#111827}.semantic-matrix-section .semantic-card .card-role-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.semantic-matrix-section .semantic-card .card-role-header .role-name{letter-spacing:-.01em;font-size:.95rem;font-weight:800}.semantic-matrix-section .semantic-card .card-role-header .role-badge-pill{background:var(--ip-surface-hover);color:var(--ip-text-secondary);border-radius:6px;padding:3px 8px;font-family:monospace;font-size:.75rem;font-weight:700}.semantic-matrix-section .semantic-card .component-demo-box{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.semantic-matrix-section .semantic-card .component-demo-box .demo-btn-primary{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:.825rem;font-weight:700;transition:transform .1s}.semantic-matrix-section .semantic-card .component-demo-box .demo-btn-primary:hover{transform:translateY(-1px)}.semantic-matrix-section .semantic-card .component-demo-box .demo-btn-outline{color:var(--ip-text-primary);border:1px solid var(--ip-border);cursor:pointer;background:0 0;border-radius:8px;padding:8px 16px;font-size:.825rem;font-weight:700}.semantic-matrix-section .semantic-card .component-demo-box .demo-btn-outline:hover{background:var(--ip-surface-hover)}.semantic-matrix-section .semantic-card .component-demo-box .demo-tag{background:var(--ip-surface-hover);color:var(--ip-text-primary);border-radius:9999px;padding:4px 10px;font-size:.72rem;font-weight:700}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert{border-radius:10px;align-items:center;gap:10px;width:100%;padding:12px 16px;font-size:.85rem;font-weight:600;display:flex}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.success{color:#065f46;background:#10b9811a;border:1px solid #10b98133}[data-theme=dark] .semantic-matrix-section .semantic-card .component-demo-box .demo-alert.success{color:#34d399}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.success i{color:#10b981}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.warning{color:#92400e;background:#f59e0b1a;border:1px solid #f59e0b33}[data-theme=dark] .semantic-matrix-section .semantic-card .component-demo-box .demo-alert.warning{color:#fbbf24}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.warning i{color:#f59e0b}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.danger{color:#991b1b;background:#ef44441a;border:1px solid #ef444433}[data-theme=dark] .semantic-matrix-section .semantic-card .component-demo-box .demo-alert.danger{color:#f87171}.semantic-matrix-section .semantic-card .component-demo-box .demo-alert.danger i{color:#ef4444}.token-export-modal-backdrop{z-index:999999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0f172aa6;justify-content:center;align-items:center;padding:1.5rem;transition:opacity .25s;display:flex;position:fixed;inset:0}.token-export-modal-backdrop.active{opacity:1;pointer-events:auto}.token-export-modal-backdrop .token-export-modal{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:var(--ip-radius-lg);width:100%;max-width:720px;box-shadow:var(--ip-shadow-lg);flex-direction:column;max-height:90vh;padding:2rem;display:flex;position:relative}[data-theme=dark] .token-export-modal-backdrop .token-export-modal{background:var(--ip-surface);border-color:var(--ip-border)}.token-export-modal-backdrop .token-export-modal .modal-close-btn{color:var(--ip-text-muted);cursor:pointer;border-radius:var(--ip-radius-sm);transition:all var(--ip-transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;font-size:1.25rem;display:inline-flex;position:absolute;top:1.5rem;right:1.5rem}.token-export-modal-backdrop .token-export-modal .modal-close-btn:hover{color:var(--ip-text-primary);background:var(--ip-surface-hover);transform:rotate(90deg)}.token-export-modal-backdrop .token-export-modal .export-modal-header{margin-bottom:1.25rem;padding-right:2rem}.token-export-modal-backdrop .token-export-modal .export-modal-header h2{letter-spacing:-.02em;color:var(--ip-text-primary);margin:0 0 .35rem;font-size:1.35rem;font-weight:800}.token-export-modal-backdrop .token-export-modal .export-modal-header p{color:var(--ip-text-muted);margin:0;font-size:.88rem;line-height:1.5}.token-export-modal-backdrop .token-export-modal .export-tabs-row{background:var(--ip-surface-hover);border-radius:var(--ip-radius-md);border:1px solid var(--ip-border);gap:6px;margin-bottom:1rem;padding:4px;display:flex;overflow-x:auto}.token-export-modal-backdrop .token-export-modal .export-tabs-row .export-tab-btn{border-radius:var(--ip-radius-sm);color:var(--ip-text-muted);cursor:pointer;transition:all var(--ip-transition-fast);white-space:nowrap;background:0 0;border:none;padding:7px 14px;font-size:.8rem;font-weight:600}.token-export-modal-backdrop .token-export-modal .export-tabs-row .export-tab-btn:hover:not(.active){color:var(--ip-text-primary);background:#0000000a}[data-theme=dark] .token-export-modal-backdrop .token-export-modal .export-tabs-row .export-tab-btn:hover:not(.active){background:#ffffff0d}.token-export-modal-backdrop .token-export-modal .export-tabs-row .export-tab-btn.active{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs);font-weight:700}.token-export-modal-backdrop .token-export-modal .export-code-container{color:#f3f3ee;border:1px solid var(--ip-border);border-radius:var(--ip-radius-md);background:#141714;flex:1;max-height:350px;padding:1.25rem;overflow:auto;box-shadow:inset 0 2px 8px #0003}.token-export-modal-backdrop .token-export-modal .export-code-container pre{color:#e2e8f0;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Fira Code,monospace;font-size:.825rem;line-height:1.6}.token-export-modal-backdrop .token-export-modal .export-modal-footer{justify-content:flex-end;align-items:center;gap:10px;margin-top:1.25rem;display:flex}.token-export-modal-backdrop .token-export-modal .export-modal-footer button{border-radius:var(--ip-radius-md);cursor:pointer;transition:all var(--ip-transition-fast);align-items:center;gap:8px;padding:9px 18px;font-size:.85rem;font-weight:700;display:inline-flex}.token-export-modal-backdrop .token-export-modal .export-modal-footer .btn-download-file{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);box-shadow:var(--ip-shadow-xs)}.token-export-modal-backdrop .token-export-modal .export-modal-footer .btn-download-file:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);transform:translateY(-1px)}.token-export-modal-backdrop .token-export-modal .export-modal-footer .btn-copy-code{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border:1px solid var(--ip-btn-primary-bg);box-shadow:var(--ip-shadow-xs)}.token-export-modal-backdrop .token-export-modal .export-modal-footer .btn-copy-code:hover{background:var(--ip-btn-primary-hover);border-color:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.token-export-modal-backdrop .token-export-modal .export-modal-footer .btn-copy-code.copied{background:var(--ip-accent-emerald,#10b981);color:#fff;border-color:var(--ip-accent-emerald,#10b981)}.a11y-lab-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.a11y-lab-hero{width:100%;max-width:1440px;margin:0 auto;padding:2.25rem 2rem 1.25rem}@media (width<=768px){.a11y-lab-hero{padding:1.5rem 1rem 1rem}}.a11y-lab-hero .a11y-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-primary);background:#2563eb14;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.a11y-lab-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.a11y-lab-hero p{color:var(--ip-text-muted);max-width:820px;margin:0;font-size:1rem;line-height:1.55}.a11y-inspector-panel{z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ip-border);background:#f8fafcf0;padding:1rem 2rem;position:sticky;top:0;box-shadow:0 4px 20px -5px #00000008}[data-theme=dark] .a11y-inspector-panel{background:#0b0f19f0}@media (width<=768px){.a11y-inspector-panel{padding:.85rem 1rem}}.inspector-controls-grid{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.picker-group{flex-direction:column;gap:4px;display:flex}.picker-group .picker-group-label{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);font-size:.68rem;font-weight:700}.picker-group .color-picker-box{border:1px solid var(--ip-border);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:8px;padding:4px 8px 4px 4px;display:inline-flex;position:relative}[data-theme=dark] .picker-group .color-picker-box{background:#111827}.picker-group .color-picker-box .color-dot-indicator{border:1px solid #0000001a;border-radius:6px;width:22px;height:22px}.picker-group .color-picker-box input[type=color]{opacity:0;cursor:pointer;position:absolute;inset:0}.picker-group .color-picker-box input[type=text]{color:var(--ip-text-primary);text-transform:uppercase;background:0 0;border:none;outline:none;width:68px;font-family:monospace;font-size:.825rem;font-weight:700}.btn-swap-colors{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-self:flex-end;align-items:center;width:36px;height:36px;margin-bottom:2px;transition:all .15s;display:inline-flex}[data-theme=dark] .btn-swap-colors{background:#111827}.btn-swap-colors:hover{background:var(--ip-surface-hover);color:var(--ip-primary);transform:rotate(180deg)}.inspector-actions-cluster{flex-wrap:wrap;align-self:flex-end;align-items:center;gap:10px;margin-left:auto;display:flex}@media (width<=900px){.inspector-actions-cluster{margin-left:0}}.inspector-actions-cluster .btn-autofix-contrast{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border-radius:var(--ip-radius-md);cursor:pointer;box-shadow:var(--ip-shadow-xs);transition:all var(--ip-transition-fast);border:none;align-items:center;gap:6px;padding:8px 16px;font-size:.825rem;font-weight:700;display:inline-flex}.inspector-actions-cluster .btn-autofix-contrast:hover{background:var(--ip-btn-primary-hover);box-shadow:var(--ip-shadow-sm);transform:translateY(-1px)}.inspector-actions-cluster .btn-tool-outline{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:7px 12px;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .inspector-actions-cluster .btn-tool-outline{background:#111827}.inspector-actions-cluster .btn-tool-outline:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.a11y-results-grid{grid-template-columns:340px 1fr;gap:1.5rem;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem;display:grid}@media (width<=960px){.a11y-results-grid{grid-template-columns:1fr;padding:1rem}}.a11y-results-grid .contrast-score-card{border:1px solid var(--ip-border);background:#fff;border-radius:16px;flex-direction:column;justify-content:center;padding:1.75rem;display:flex;box-shadow:0 4px 16px #00000005}[data-theme=dark] .a11y-results-grid .contrast-score-card{background:#111827}.a11y-results-grid .contrast-score-card .score-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.a11y-results-grid .contrast-score-card .score-header .score-caption{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);font-size:.78rem;font-weight:700}.a11y-results-grid .contrast-score-card .score-header .overall-status-pill{color:#10b981;background:#10b9811a;border-radius:9999px;align-items:center;gap:5px;padding:3px 8px;font-size:.75rem;font-weight:800;display:inline-flex}.a11y-results-grid .contrast-score-card .score-header .overall-status-pill.fail{color:#ef4444;background:#ef44441a}.a11y-results-grid .contrast-score-card .big-score-display{letter-spacing:-.04em;color:var(--ip-text-primary);margin:.25rem 0 .75rem;font-size:clamp(3rem,5vw,4rem);font-weight:900;line-height:1}.a11y-results-grid .contrast-score-card .apca-badge-row{color:var(--ip-text-muted);gap:6px;font-size:.8rem;display:flex}.a11y-results-grid .contrast-score-card .apca-badge-row strong{color:var(--ip-text-primary)}.a11y-results-grid .wcag-criteria-card{border:1px solid var(--ip-border);background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 4px 16px #00000005}[data-theme=dark] .a11y-results-grid .wcag-criteria-card{background:#111827}.a11y-results-grid .wcag-criteria-card h3{letter-spacing:-.02em;margin:0 0 1rem;font-size:1.05rem;font-weight:800}.a11y-results-grid .wcag-criteria-card .criteria-list{flex-direction:column;gap:12px;display:flex}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row{background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}[data-theme=dark] .a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row{background:#1f2937}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .criteria-info{flex-direction:column;gap:2px;display:flex}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .criteria-info .crit-title{color:var(--ip-text-primary);font-size:.85rem;font-weight:700}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .criteria-info .crit-desc{color:var(--ip-text-muted);font-size:.75rem}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .crit-badges{align-items:center;gap:6px;display:flex}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .crit-badges .status-badge{border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:800}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .crit-badges .status-badge.pass{color:#10b981;background:#10b98126}.a11y-results-grid .wcag-criteria-card .criteria-list .criteria-row .crit-badges .status-badge.fail{color:#ef4444;background:#ef444426}.cvd-simulator-section{width:100%;max-width:1440px;margin:0 auto;padding:1rem 2rem 2rem}@media (width<=768px){.cvd-simulator-section{padding:1rem}}.cvd-simulator-section .section-title-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:1.25rem;display:flex}.cvd-simulator-section .section-title-bar .titles h2{margin:0 0 .25rem;font-size:1.25rem;font-weight:800}.cvd-simulator-section .section-title-bar .titles p{color:var(--ip-text-muted);margin:0;font-size:.85rem}.cvd-simulator-section .cvd-modes-tabs{scrollbar-width:none;align-items:center;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.cvd-simulator-section .cvd-modes-tabs::-webkit-scrollbar{display:none}.cvd-simulator-section .cvd-modes-tabs .cvd-tab{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;white-space:nowrap;background:#fff;border-radius:10px;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 14px;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}[data-theme=dark] .cvd-simulator-section .cvd-modes-tabs .cvd-tab{background:#111827}.cvd-simulator-section .cvd-modes-tabs .cvd-tab small{color:var(--ip-text-muted);font-size:.65rem;font-weight:500}.cvd-simulator-section .cvd-modes-tabs .cvd-tab:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.cvd-simulator-section .cvd-modes-tabs .cvd-tab.active{background:var(--ip-btn-primary-bg);border-color:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.cvd-simulator-section .cvd-modes-tabs .cvd-tab.active small{color:inherit;opacity:.8}.a11y-canvas-wrapper{border:1px solid var(--ip-border);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -5px #0000000a}.a11y-interactive-canvas{--a11y-fg:#0f172a;--a11y-bg:#fff;--a11y-border:#0000001a;background:var(--a11y-bg);color:var(--a11y-fg);padding:3rem 2.5rem;transition:background .2s,color .2s,filter .25s}@media (width<=768px){.a11y-interactive-canvas{padding:1.75rem 1.25rem}}.a11y-interactive-canvas.filter-deuteranopia{filter:url(#cvd-deuteranopia)}.a11y-interactive-canvas.filter-protanopia{filter:url(#cvd-protanopia)}.a11y-interactive-canvas.filter-tritanopia{filter:url(#cvd-tritanopia)}.a11y-interactive-canvas.filter-achromatopsia{filter:url(#cvd-achromatopsia)}.a11y-interactive-canvas .canvas-grid-layout{grid-template-columns:1.4fr 1fr;align-items:center;gap:3rem;display:grid}@media (width<=960px){.a11y-interactive-canvas .canvas-grid-layout{grid-template-columns:1fr;gap:2rem}}.a11y-interactive-canvas .typography-preview-col .sample-eyebrow{letter-spacing:.12em;opacity:.8;margin-bottom:.75rem;font-size:.72rem;font-weight:800;display:block}.a11y-interactive-canvas .typography-preview-col .sample-display-title{letter-spacing:-.025em;margin:0 0 1rem;font-size:clamp(1.6rem,3vw,2.25rem);font-weight:900;line-height:1.2}.a11y-interactive-canvas .typography-preview-col .sample-body-lead{opacity:.9;margin:0 0 1.25rem;font-size:1rem;line-height:1.6}.a11y-interactive-canvas .typography-preview-col .sample-caption-text{opacity:.75;margin:0;font-size:.825rem}.a11y-interactive-canvas .components-preview-col .component-card-preview{border:1px solid var(--a11y-border);background:#7d7d7d0d;border-radius:12px;flex-direction:column;gap:1.25rem;padding:1.75rem;display:flex}.a11y-interactive-canvas .components-preview-col .component-card-preview h3{margin:0;font-size:.95rem;font-weight:800}.a11y-interactive-canvas .components-preview-col .component-card-preview .demo-buttons-row{gap:10px;display:flex}.a11y-interactive-canvas .components-preview-col .component-card-preview .demo-buttons-row .sample-btn-primary{background:var(--a11y-fg);color:var(--a11y-bg);cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:.825rem;font-weight:700}.a11y-interactive-canvas .components-preview-col .component-card-preview .demo-buttons-row .sample-btn-outline{color:var(--a11y-fg);border:1px solid var(--a11y-fg);cursor:pointer;background:0 0;border-radius:8px;padding:8px 16px;font-size:.825rem;font-weight:700}.a11y-interactive-canvas .components-preview-col .component-card-preview .sample-input-group{flex-direction:column;gap:4px;display:flex}.a11y-interactive-canvas .components-preview-col .component-card-preview .sample-input-group label{opacity:.8;font-size:.75rem;font-weight:700}.a11y-interactive-canvas .components-preview-col .component-card-preview .sample-input-group .sample-input-box{border:1px solid var(--a11y-border);background:#7d7d7d08;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-family:monospace;font-size:.8rem;display:flex}.a11y-interactive-canvas .components-preview-col .component-card-preview .sample-alert-badge{background:#7d7d7d14;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:700;display:inline-flex}.palette-matrix-section{width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem 4rem}@media (width<=768px){.palette-matrix-section{padding:1rem 1rem 3rem}}.palette-matrix-section .matrix-table-container{border:1px solid var(--ip-border);background:#fff;border-radius:16px;padding:1.5rem;overflow-x:auto;box-shadow:0 4px 16px #00000005}[data-theme=dark] .palette-matrix-section .matrix-table-container{background:#111827}.palette-matrix-section .matrix-table{border-collapse:collapse;width:100%;font-size:.825rem}.palette-matrix-section .matrix-table th,.palette-matrix-section .matrix-table td{text-align:center;border:1px solid var(--ip-border);padding:10px 14px}.palette-matrix-section .matrix-table th{background:var(--ip-bg);color:var(--ip-text-secondary);font-weight:700}[data-theme=dark] .palette-matrix-section .matrix-table th{background:#1f2937}.palette-matrix-section .matrix-table .matrix-cell{cursor:pointer;padding:8px;transition:all .15s}.palette-matrix-section .matrix-table .matrix-cell:hover{z-index:2;position:relative;transform:scale(1.05);box-shadow:0 4px 12px #0000001a}.palette-matrix-section .matrix-table .matrix-cell .cell-ratio{font-size:.88rem;font-weight:800;display:block}.palette-matrix-section .matrix-table .matrix-cell .cell-status-pill{border-radius:4px;margin-top:3px;padding:1px 4px;font-size:.65rem;font-weight:800;display:inline-block}.palette-matrix-section .matrix-table .matrix-cell .cell-status-pill.pass-aaa{color:#10b981;background:#10b98133}.palette-matrix-section .matrix-table .matrix-cell .cell-status-pill.pass-aa{color:#3b82f6;background:#3b82f633}.palette-matrix-section .matrix-table .matrix-cell .cell-status-pill.fail{color:#ef4444;background:#ef444433}.audit-modal-backdrop{z-index:999999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0f172aa6;justify-content:center;align-items:center;padding:1.5rem;transition:opacity .25s;display:flex;position:fixed;inset:0}.audit-modal-backdrop.active{opacity:1;pointer-events:auto}.audit-modal-backdrop .audit-modal{border:1px solid var(--ip-border);background:#fff;border-radius:20px;flex-direction:column;width:100%;max-width:680px;max-height:90vh;padding:2rem;display:flex;position:relative;box-shadow:0 25px 50px -12px #00000040}[data-theme=dark] .audit-modal-backdrop .audit-modal{background:#111827}.audit-modal-backdrop .audit-modal .modal-close-btn{color:var(--ip-text-muted);cursor:pointer;background:0 0;border:none;font-size:1.25rem;position:absolute;top:1.5rem;right:1.5rem}.audit-modal-backdrop .audit-modal .modal-close-btn:hover{color:var(--ip-text-primary)}.audit-modal-backdrop .audit-modal .audit-modal-header{margin-bottom:1.25rem}.audit-modal-backdrop .audit-modal .audit-modal-header h2{margin:0 0 .35rem;font-size:1.35rem;font-weight:800}.audit-modal-backdrop .audit-modal .audit-modal-header p{color:var(--ip-text-muted);margin:0;font-size:.88rem}.audit-modal-backdrop .audit-modal .audit-report-container{color:#f8fafc;background:#0f172a;border-radius:12px;flex:1;max-height:350px;padding:1.25rem;overflow:auto}.audit-modal-backdrop .audit-modal .audit-report-container pre{margin:0;font-family:monospace;font-size:.825rem;line-height:1.6}.audit-modal-backdrop .audit-modal .audit-modal-footer{justify-content:flex-end;align-items:center;gap:10px;margin-top:1.25rem;display:flex}.audit-modal-backdrop .audit-modal .audit-modal-footer button{cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:.825rem;font-weight:700;display:inline-flex}.audit-modal-backdrop .audit-modal .audit-modal-footer .btn-download-file{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);box-shadow:var(--ip-shadow-xs)}.audit-modal-backdrop .audit-modal .audit-modal-footer .btn-download-file:hover{background:var(--ip-surface-hover);border-color:var(--ip-border-focus);transform:translateY(-1px)}.audit-modal-backdrop .audit-modal .audit-modal-footer .btn-copy-code{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);border:1px solid var(--ip-btn-primary-bg);box-shadow:var(--ip-shadow-xs)}.audit-modal-backdrop .audit-modal .audit-modal-footer .btn-copy-code:hover{background:var(--ip-btn-primary-hover);border-color:var(--ip-btn-primary-hover);transform:translateY(-1px)}.extractor-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.extractor-hero{width:100%;max-width:1440px;margin:0 auto;padding:2.25rem 2rem 1.25rem}@media (width<=768px){.extractor-hero{padding:1.5rem 1rem 1rem}}.extractor-hero .extractor-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ip-text-primary);background:var(--ip-surface-hover);border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.extractor-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.extractor-hero p{color:var(--ip-text-muted);max-width:820px;margin:0;font-size:1rem;line-height:1.55}.extractor-input-panel{width:100%;max-width:1440px;margin:0 auto;padding:1rem 2rem 2rem}@media (width<=768px){.extractor-input-panel{padding:1rem}}.extractor-mode-tabs{border-bottom:1px solid var(--ip-border);align-items:center;gap:10px;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.extractor-mode-tabs .mode-tab{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;border-radius:9999px;align-items:center;gap:8px;padding:8px 18px;font-size:.85rem;font-weight:600;transition:all .15s;display:inline-flex}.extractor-mode-tabs .mode-tab:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary)}.extractor-mode-tabs .mode-tab.active{background:var(--ip-btn-primary-bg);border-color:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);box-shadow:var(--ip-shadow-xs)}.file-drop-zone{background:var(--ip-surface);border:2px dashed var(--ip-border);text-align:center;cursor:pointer;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:3rem 2rem;transition:all .2s;display:flex;box-shadow:0 4px 16px #00000005}.file-drop-zone:hover,.file-drop-zone.drag-over{border-color:var(--ip-border-focus);background:var(--ip-surface-hover)}.file-drop-zone .drop-icon-box{background:var(--ip-surface-hover);width:60px;height:60px;color:var(--ip-text-primary);border-radius:14px;justify-content:center;align-items:center;margin-bottom:1rem;font-size:1.75rem;display:flex}.file-drop-zone h3{color:var(--ip-text-primary);margin:0 0 .5rem;font-size:1.15rem;font-weight:700}.file-drop-zone h3 .browse-link{color:var(--ip-text-primary);cursor:pointer;font-weight:700;font-size:inherit;background:0 0;border:none;text-decoration:underline}.file-drop-zone p{color:var(--ip-text-muted);margin:0;font-size:.88rem}.code-paste-accordion{margin-top:1rem}.code-paste-accordion .btn-toggle-paste{color:var(--ip-text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:6px 0;font-size:.85rem;font-weight:600;display:inline-flex}.code-paste-accordion .btn-toggle-paste:hover{color:var(--ip-text-primary);text-decoration:underline}.code-paste-accordion .paste-area-container{flex-direction:column;gap:10px;margin-top:.75rem;display:flex}.code-paste-accordion .paste-area-container textarea{border:1px solid var(--ip-border);background:var(--ip-surface);width:100%;height:120px;color:var(--ip-text-primary);border-radius:10px;outline:none;padding:12px;font-family:monospace;font-size:.85rem}.code-paste-accordion .paste-area-container textarea:focus{border-color:var(--ip-border-focus)}.code-paste-accordion .paste-area-container .btn-extract-paste{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:8px;align-self:flex-start;padding:8px 18px;font-size:.825rem;font-weight:700;transition:background .15s}.code-paste-accordion .paste-area-container .btn-extract-paste:hover{background:var(--ip-btn-primary-hover)}.url-input-bar{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:12px;align-items:center;gap:12px;padding:6px 6px 6px 16px;display:flex;box-shadow:0 4px 16px #00000005}.url-input-bar i{color:var(--ip-text-muted);font-size:1rem}.url-input-bar input[type=url]{color:var(--ip-text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.95rem}.url-input-bar .btn-submit-url{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 22px;font-size:.85rem;font-weight:700;transition:background .15s;display:inline-flex}.url-input-bar .btn-submit-url:hover{background:var(--ip-btn-primary-hover)}.ssrf-security-shield{background:#10b9810f;border:1px solid #10b98133;border-radius:10px;align-items:center;gap:12px;margin-top:1rem;padding:10px 16px;display:flex}.ssrf-security-shield .shield-icon i{color:#10b981;font-size:1.25rem}.ssrf-security-shield .shield-text{color:var(--ip-text-secondary);font-size:.78rem}.ssrf-security-shield .shield-text strong{color:#065f46}[data-theme=dark] .ssrf-security-shield .shield-text strong{color:#34d399}.ssrf-security-shield .shield-text strong{margin-right:4px}.demo-sites-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:1.25rem;display:flex}.demo-sites-row .demo-label{color:var(--ip-text-muted);font-size:.78rem;font-weight:700}.demo-sites-row .demo-site-pill{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;border-radius:9999px;padding:5px 12px;font-size:.78rem;font-weight:600;transition:all .15s}.demo-sites-row .demo-site-pill:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary);border-color:var(--ip-border-focus)}.extracted-results-section{width:100%;max-width:1440px;margin:0 auto;padding:1rem 2rem 4rem}@media (width<=768px){.extracted-results-section{padding:1rem 1rem 3rem}}.extracted-results-section .results-header-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:1.5rem;display:flex}.extracted-results-section .results-header-bar .titles h2{margin:0 0 .25rem;font-size:1.35rem;font-weight:800}.extracted-results-section .results-header-bar .titles p{color:var(--ip-text-muted);margin:0;font-size:.88rem}.extracted-results-section .results-header-bar .results-actions-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.extracted-results-section .results-header-bar .results-actions-group .btn-action-integrate{background:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}.extracted-results-section .results-header-bar .results-actions-group .btn-action-integrate:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary);border-color:var(--ip-border-focus);transform:translateY(-1px)}.extracted-results-section .results-header-bar .results-actions-group .btn-export-code{background:var(--ip-btn-primary-bg);color:var(--ip-btn-primary-text);cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:7px 16px;font-size:.8rem;font-weight:700;transition:background .15s;display:inline-flex}.extracted-results-section .results-header-bar .results-actions-group .btn-export-code:hover{background:var(--ip-btn-primary-hover)}.dominant-swatches-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:2rem;display:grid}.dominant-swatches-grid .swatch-card,.dominant-swatches-grid .extracted-swatch-card{background:var(--ip-surface);border:1px solid var(--ip-border);cursor:pointer;border-radius:14px;transition:all .2s;overflow:hidden;box-shadow:0 4px 14px #00000008}.dominant-swatches-grid .swatch-card:hover,.dominant-swatches-grid .extracted-swatch-card:hover{border-color:var(--ip-border-focus);transform:translateY(-4px);box-shadow:0 10px 24px -6px #0000001a}.dominant-swatches-grid .swatch-card .swatch-color-preview,.dominant-swatches-grid .swatch-card .swatch-fill,.dominant-swatches-grid .extracted-swatch-card .swatch-color-preview,.dominant-swatches-grid .extracted-swatch-card .swatch-fill{justify-content:flex-end;align-items:flex-end;height:120px;padding:10px;display:flex;position:relative}.dominant-swatches-grid .swatch-card .swatch-color-preview .btn-copy-hex,.dominant-swatches-grid .swatch-card .swatch-fill .btn-copy-hex,.dominant-swatches-grid .extracted-swatch-card .swatch-color-preview .btn-copy-hex,.dominant-swatches-grid .extracted-swatch-card .swatch-fill .btn-copy-hex{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;cursor:pointer;background:#00000080;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s;display:flex}.dominant-swatches-grid .swatch-card .swatch-color-preview .btn-copy-hex:hover,.dominant-swatches-grid .swatch-card .swatch-fill .btn-copy-hex:hover,.dominant-swatches-grid .extracted-swatch-card .swatch-color-preview .btn-copy-hex:hover,.dominant-swatches-grid .extracted-swatch-card .swatch-fill .btn-copy-hex:hover{background:#000c}.dominant-swatches-grid .swatch-card .swatch-details,.dominant-swatches-grid .swatch-card .swatch-meta,.dominant-swatches-grid .extracted-swatch-card .swatch-details,.dominant-swatches-grid .extracted-swatch-card .swatch-meta{flex-direction:column;gap:4px;padding:12px;display:flex}.dominant-swatches-grid .swatch-card .swatch-details .swatch-hex,.dominant-swatches-grid .swatch-card .swatch-details .hex-code,.dominant-swatches-grid .swatch-card .swatch-meta .swatch-hex,.dominant-swatches-grid .swatch-card .swatch-meta .hex-code,.dominant-swatches-grid .extracted-swatch-card .swatch-details .swatch-hex,.dominant-swatches-grid .extracted-swatch-card .swatch-details .hex-code,.dominant-swatches-grid .extracted-swatch-card .swatch-meta .swatch-hex,.dominant-swatches-grid .extracted-swatch-card .swatch-meta .hex-code{color:var(--ip-text-primary);font-family:monospace;font-size:1rem;font-weight:800}.dominant-swatches-grid .swatch-card .swatch-details .swatch-role,.dominant-swatches-grid .swatch-card .swatch-meta .swatch-role,.dominant-swatches-grid .extracted-swatch-card .swatch-details .swatch-role,.dominant-swatches-grid .extracted-swatch-card .swatch-meta .swatch-role{color:var(--ip-text-secondary);font-size:.78rem;font-weight:600}.dominant-swatches-grid .swatch-card .swatch-details .swatch-rgb,.dominant-swatches-grid .swatch-card .swatch-meta .swatch-rgb,.dominant-swatches-grid .extracted-swatch-card .swatch-details .swatch-rgb,.dominant-swatches-grid .extracted-swatch-card .swatch-meta .swatch-rgb{color:var(--ip-text-muted);font-family:monospace;font-size:.75rem}.color-distribution-box{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:14px;margin-bottom:2rem;padding:1.25rem}.color-distribution-box .dist-label{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);margin-bottom:.75rem;font-size:.78rem;font-weight:700;display:block}.color-distribution-box .distribution-bar{border-radius:9999px;height:18px;display:flex;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.color-distribution-box .distribution-bar .dist-segment{height:100%;transition:width .3s}.discovered-inventory-box{background:var(--ip-surface);border:1px solid var(--ip-border);border-radius:14px;padding:1.5rem}.discovered-inventory-box h3{margin:0 0 1rem;font-size:1rem;font-weight:800}.discovered-inventory-box .inventory-chips-grid{flex-wrap:wrap;gap:8px;display:flex}.discovered-inventory-box .inventory-chips-grid .color-chip,.discovered-inventory-box .inventory-chips-grid .token-chip{background:var(--ip-surface-hover);border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;border-left-width:4px;border-radius:8px;align-items:center;gap:6px;padding:4px 10px 4px 6px;font-family:monospace;font-size:.78rem;font-weight:700;transition:all .15s;display:inline-flex}.discovered-inventory-box .inventory-chips-grid .color-chip .chip-dot,.discovered-inventory-box .inventory-chips-grid .token-chip .chip-dot{border-radius:4px;width:14px;height:14px}.discovered-inventory-box .inventory-chips-grid .color-chip:hover,.discovered-inventory-box .inventory-chips-grid .token-chip:hover{border-color:var(--ip-border-focus);transform:translateY(-1px)}.dna-container{background:var(--ip-bg);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.dna-hero{width:100%;max-width:1440px;margin:0 auto;padding:2.25rem 2rem 1.25rem}@media (width<=768px){.dna-hero{padding:1.5rem 1rem 1rem}}.dna-hero .dna-badge-tag{text-transform:uppercase;letter-spacing:.08em;color:#8b5cf6;background:#8b5cf614;border-radius:9999px;align-items:center;gap:.4rem;margin-bottom:.75rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.dna-hero h1{color:var(--ip-text-primary);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.dna-hero p{color:var(--ip-text-muted);max-width:820px;margin:0;font-size:1rem;line-height:1.55}.dna-palette-input-bar{width:100%;max-width:1440px;margin:0 auto 1.5rem;padding:1rem 2rem}@media (width<=768px){.dna-palette-input-bar{padding:1rem}}.dna-palette-input-bar .input-bar-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:1rem;display:flex}.dna-palette-input-bar .input-bar-header .bar-title{text-transform:uppercase;letter-spacing:.06em;color:var(--ip-text-muted);font-size:.85rem;font-weight:700}.dna-palette-input-bar .input-bar-header .input-actions-row{align-items:center;gap:8px;display:flex}.dna-palette-input-bar .input-bar-header .input-actions-row .btn-palette-src{border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}[data-theme=dark] .dna-palette-input-bar .input-bar-header .input-actions-row .btn-palette-src{background:#111827}.dna-palette-input-bar .input-bar-header .input-actions-row .btn-palette-src:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary);border-color:var(--ip-primary)}.dna-palette-input-bar .active-swatches-strip{border:1px solid var(--ip-border);border-radius:14px;align-items:center;height:72px;display:flex;overflow:hidden;box-shadow:0 4px 16px #0000000d}.dna-palette-input-bar .active-swatches-strip .swatch-item{cursor:pointer;flex-direction:column;flex:1;justify-content:flex-end;min-width:0;height:100%;padding:6px;transition:flex .25s;display:flex;position:relative}.dna-palette-input-bar .active-swatches-strip .swatch-item:hover{flex:1.35}.dna-palette-input-bar .active-swatches-strip .swatch-item .color-hex{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;text-overflow:ellipsis;white-space:nowrap;background:#00000073;border-radius:4px;align-self:flex-start;max-width:100%;padding:2px 6px;font-family:monospace;font-size:.85rem;font-weight:800;overflow:hidden}@media (width<=600px){.dna-palette-input-bar .active-swatches-strip .swatch-item .color-hex{padding:2px 3px;font-size:.65rem}}.dna-palette-input-bar .active-swatches-strip .swatch-item input[type=color]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.dna-dashboard-grid{grid-template-columns:1fr 1.15fr;gap:24px;width:100%;max-width:1440px;margin:0 auto;padding:0 2rem 4rem;display:grid}@media (width<=1024px){.dna-dashboard-grid{grid-template-columns:1fr;padding:0 1rem 3rem}}@media (width<=480px){.dna-dashboard-grid{gap:16px;padding:0 .75rem 2rem}}.dna-card{border:1px solid var(--ip-border);background:#fff;border-radius:16px;min-width:0;max-width:100%;padding:1.75rem;box-shadow:0 4px 16px #00000005}@media (width<=600px){.dna-card{padding:1.15rem}}[data-theme=dark] .dna-card{background:#111827}.dna-card .card-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.dna-card .card-header h2{color:var(--ip-text-primary);align-items:center;gap:8px;margin:0;font-size:1.15rem;font-weight:800;display:flex}.dna-card .card-header h2 i{color:#8b5cf6}.dna-card .card-header .pill-badge{color:#fff;text-transform:uppercase;letter-spacing:.05em;background:#8b5cf6;border-radius:9999px;padding:3px 10px;font-size:.72rem;font-weight:700}.dna-card .card-header .pill-badge-outline{border:1px solid var(--ip-border);color:var(--ip-text-muted);text-transform:uppercase;border-radius:9999px;padding:3px 10px;font-size:.72rem;font-weight:700}.dna-card .section-lead{color:var(--ip-text-muted);margin:-.5rem 0 1.25rem;font-size:.85rem;line-height:1.5}.dna-card .section-lead em{color:var(--ip-text-secondary);font-style:italic}.metrics-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:2rem;display:grid}@media (width<=600px){.metrics-grid{grid-template-columns:1fr}}.metrics-grid .metric-box{background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:12px;padding:1rem}[data-theme=dark] .metrics-grid .metric-box{background:#1f2937}.metrics-grid .metric-box .metric-label{color:var(--ip-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-size:.75rem;font-weight:700;display:block}.metrics-grid .metric-box .metric-value-row{margin-bottom:.6rem}.metrics-grid .metric-box .metric-value-row .metric-value{color:var(--ip-text-primary);font-size:1.05rem;font-weight:800}.metrics-grid .metric-box .progress-bar-track{background:#00000014;border-radius:9999px;width:100%;height:6px;overflow:hidden}[data-theme=dark] .metrics-grid .metric-box .progress-bar-track{background:#ffffff1a}.metrics-grid .metric-box .progress-bar-track .progress-bar-fill{border-radius:9999px;height:100%;transition:width .3s}.metrics-grid .metric-box .progress-bar-track .progress-bar-fill.temp-bar{background:linear-gradient(90deg,#3b82f6,#f97316)}.metrics-grid .metric-box .progress-bar-track .progress-bar-fill.chroma-bar{background:linear-gradient(90deg,#ec4899,#8b5cf6)}.metrics-grid .metric-box .progress-bar-track .progress-bar-fill.spread-bar{background:linear-gradient(90deg,#10b981,#06b6d4)}.metrics-grid .metric-box .progress-bar-track .progress-bar-fill.pass-bar{background:#10b981}.dna-table-container{-webkit-overflow-scrolling:touch;max-width:100%;margin-bottom:1.5rem;overflow-x:auto}.dna-table-container h3{color:var(--ip-text-primary);margin:0 0 .75rem;font-size:.9rem;font-weight:800}.dna-table-container .dna-coords-table{border-collapse:collapse;width:100%;font-size:.8rem}.dna-table-container .dna-coords-table th{text-align:left;color:var(--ip-text-muted);border-bottom:1px solid var(--ip-border);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;font-size:.72rem;font-weight:700}.dna-table-container .dna-coords-table td{border-bottom:1px solid var(--ip-border);color:var(--ip-text-secondary);padding:10px;font-family:monospace}.dna-table-container .dna-coords-table td:first-child{width:32px}.dna-table-container .dna-coords-table .color-dot{vertical-align:middle;border:1px solid #0000001a;border-radius:4px;width:18px;height:18px;display:inline-block}.card-footer-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.card-footer-actions .btn-footer-action{background:var(--ip-bg);border:1px solid var(--ip-border);color:var(--ip-text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}[data-theme=dark] .card-footer-actions .btn-footer-action{background:#1f2937}.card-footer-actions .btn-footer-action:hover{background:var(--ip-surface-hover);color:var(--ip-text-primary);border-color:var(--ip-primary)}.wada-matches-list{flex-direction:column;gap:12px;display:flex}.wada-matches-list .wada-match-item{background:var(--ip-bg);border:1px solid var(--ip-border);border-radius:12px;justify-content:space-between;align-items:center;gap:16px;padding:14px;transition:all .2s;display:flex}[data-theme=dark] .wada-matches-list .wada-match-item{background:#1f2937}.wada-matches-list .wada-match-item:hover{border-color:#8b5cf6;transform:translate(4px);box-shadow:0 4px 12px #8b5cf614}.wada-matches-list .wada-match-item .match-info-col{flex-direction:column;flex:1;gap:6px;display:flex}.wada-matches-list .wada-match-item .match-info-col .wada-title-row{align-items:center;gap:8px;display:flex}.wada-matches-list .wada-match-item .match-info-col .wada-title-row .wada-num{color:var(--ip-text-primary);font-size:.85rem;font-weight:800}.wada-matches-list .wada-match-item .match-info-col .wada-title-row .wada-title{color:var(--ip-text-secondary);font-size:.85rem}.wada-matches-list .wada-match-item .match-info-col .wada-title-row .wada-tag{color:var(--ip-text-muted);background:#0000000f;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:600}[data-theme=dark] .wada-matches-list .wada-match-item .match-info-col .wada-title-row .wada-tag{background:#ffffff14}.wada-matches-list .wada-match-item .match-info-col .wada-swatches-row{align-items:center;gap:6px;display:flex}.wada-matches-list .wada-match-item .match-info-col .wada-swatches-row .swatch-dot{border-radius:6px;width:22px;height:22px;box-shadow:0 1px 3px #00000026}.wada-matches-list .wada-match-item .match-score-col{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.wada-matches-list .wada-match-item .match-score-col .match-percentage{color:#10b981;font-size:1.15rem;font-weight:800}.wada-matches-list .wada-match-item .match-score-col .btn-apply-match{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:6px;padding:5px 12px;font-size:.75rem;font-weight:700;transition:background .15s}[data-theme=dark] .wada-matches-list .wada-match-item .match-score-col .btn-apply-match{background:#8b5cf6}.wada-matches-list .wada-match-item .match-score-col .btn-apply-match:hover{background:#2563eb}@font-face{font-family:Plus Jakarta Sans;src:url(/assets/PlusJakartaSans-Regular-Dhut76fR.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Plus Jakarta Sans;src:url(/assets/PlusJakartaSans-Medium-Bf-nb4oT.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Plus Jakarta Sans;src:url(/assets/PlusJakartaSans-SemiBold-DLTa1BUW.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Plus Jakarta Sans;src:url(/assets/PlusJakartaSans-Bold-CfpNZvy6.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}body{scrollbar-width:thin;scrollbar-color:#94a3b8 transparent}body::-webkit-scrollbar{width:8px;height:8px}body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9999px}body::-webkit-scrollbar-thumb:hover{background:#94a3b8}body::-webkit-scrollbar-track{background:0 0}@media (width<=768px){body::-webkit-scrollbar{width:0;display:none}}.simple-filter-box{z-index:9999;background-color:#00000093;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;bottom:0}.simple-filter-box.active{display:flex}.simple-filter-box .filter-box{background-color:#d3d3d3;flex-direction:column;align-items:center;width:400px;height:fit-content;padding:1rem 2rem;display:flex;box-shadow:0 4px 30px #0000001a}.simple-filter-box .filter-box .fa-xmark{color:#539092;cursor:pointer;margin-bottom:.7rem;margin-left:auto;font-size:1.2rem;transition:color .5s ease-in-out}.simple-filter-box .filter-box .fa-xmark:hover{color:#556b2f}.simple-filter-box .filter-box .simple-filter{object-fit:cover;width:100%;height:300px;margin-bottom:1rem}.code-block{background-color:var(--ip-surface);border:1px solid var(--ip-border);color:var(--ip-text-primary);cursor:pointer;width:100%;box-shadow:var(--ip-shadow-xs);border-radius:var(--ip-radius-sm);margin-top:10px;padding:1.5rem 10px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px;position:relative;overflow-x:auto}.code-block:before{content:attr(data-before-content);background-color:var(--ip-surface-hover);color:var(--ip-text-secondary);border-bottom-left-radius:var(--ip-radius-sm);padding:5px 10px;font-size:12px;position:absolute;top:0;right:0}.resetButton{color:#555;cursor:pointer;background-color:orange;border:0;border-radius:0;width:100%;height:40px;font-weight:700;transition:background-color .3s ease-in-out;box-shadow:0 2px 8px #63636333}.resetButton:hover{background-color:#feb732}.input-lists{width:100%;margin-bottom:1rem}.input-lists .input-range-container{border-bottom:1px solid silver;flex-direction:column;width:100%;display:flex}.input-lists .input-range-container .input-range-info{color:#868686;justify-content:space-between;font-size:.8rem;display:flex}.input-lists .input-range-container .input-range{width:100%;margin-bottom:1rem}.preview-pics{justify-content:space-between;gap:2rem;margin:5rem auto 1rem;display:flex}.preview-pics .filter-pic,.preview-pics .original-pic{flex:1}.preview-pics .filter-pic img,.preview-pics .original-pic img{object-fit:cover;width:100%;height:100%}.images{flex-direction:column;width:100%;margin:100px auto 20px;display:flex}.images .img-row{border-bottom:1px solid silver;width:100%;margin-bottom:1rem;padding:1rem 0}.images .img-row .group-title{color:#539092;font-size:1.4rem;font-weight:700}.images .img-row .img-group{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:flex-end;gap:2rem;display:grid}.images .img-row .img-group .image{flex-direction:column;display:flex}.images .img-row .img-group .image img{object-fit:cover;cursor:pointer;margin-top:auto}.images .img-row .img-group .image .copy{width:200px;height:30px;margin-bottom:5px;position:relative;overflow:hidden}.images .img-row .img-group .image .copy .copy-text{text-align:center;color:orange;background-color:#539092;width:100%;padding:5px 0;transition:bottom .5s;position:absolute;bottom:-110%;left:0}.images .simple-generator{color:#9c9c9c;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#d3d3d3;border:3px solid #9c9c9c;border-radius:2rem;flex-direction:column;justify-content:center;align-items:center;height:133px;font-size:1.2rem;font-weight:700;transition:all .5s ease-in-out,border .5s ease-in-out;display:flex;box-shadow:1.95px 1.95px 2.6px #00000026}.images .simple-generator:hover{color:#539092;background-color:#fce8e8;border:3px solid #539092;border-radius:50%}.images .img-row .img-group .image:hover .copy .copy-text{bottom:0}.copyright{justify-content:center;align-items:flex-start;gap:.3rem;height:200px;display:flex}.copyright div{justify-content:center;align-items:center;gap:.3rem;display:flex}.copyright div a{color:#539092;-o-transition:color .5s ease-in-out;font-weight:700;transition:color .5s ease-in-out}.copyright div a:hover{color:#556b2f}.copyright div .footer_heart__SGb3w{color:red}.footer{z-index:999;background-color:#d3d3d3;border-top:2px solid silver;width:100%;height:150px;position:fixed;bottom:0;box-shadow:0 5px 15px #00000059}.footer .footer-container{background-color:#d3d3d3;align-items:center;gap:2rem;height:90%;display:flex}.footer .footer-container .footer-img-list{height:calc(100% - 2px);overflow-x:auto;overflow-y:none;border:1px solid silver;gap:1.5rem;width:80%;padding:1rem;display:flex;overflow-y:hidden}.footer .footer-container .footer-img-list img{cursor:pointer;height:100px;transition:box-shadow .5s ease-in-out}.footer .footer-container .footer-img-list img:hover{box-shadow:0 5px 15px #00000059}.footer .footer-container .footer-img-upload .image-input{cursor:pointer;flex-direction:column;display:flex}.footer .footer-container .footer-img-upload .upload-text{color:#539092;cursor:pointer;font-size:1.3rem;font-weight:700;transition:color .5s ease-in-out}.footer .footer-container .footer-img-upload .upload-text:hover{color:#556b2f}.footer .footer-container .footer-img-upload #image-input{display:none}@media (width<=860px){.preview-pics{flex-direction:column}}