:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;padding:0}:root{--ion-color-primary: #0054e9;--ion-color-primary-rgb: 0, 84, 233;--ion-color-primary-contrast: #fff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #004acd;--ion-color-primary-tint: #1a65eb;--ion-color-secondary: #0163aa;--ion-color-secondary-rgb: 1, 99, 170;--ion-color-secondary-contrast: #fff;--ion-color-secondary-contrast-rgb: 255, 255, 255;--ion-color-secondary-shade: #015796;--ion-color-secondary-tint: #1a73b3;--ion-color-tertiary: #6030ff;--ion-color-tertiary-rgb: 96, 48, 255;--ion-color-tertiary-contrast: #fff;--ion-color-tertiary-contrast-rgb: 255, 255, 255;--ion-color-tertiary-shade: #542ae0;--ion-color-tertiary-tint: #7045ff;--ion-color-success: #2dd55b;--ion-color-success-rgb: 45, 213, 91;--ion-color-success-contrast: #000;--ion-color-success-contrast-rgb: 0, 0, 0;--ion-color-success-shade: #28bb50;--ion-color-success-tint: #42d96b;--ion-color-warning: #ffc409;--ion-color-warning-rgb: 255, 196, 9;--ion-color-warning-contrast: #000;--ion-color-warning-contrast-rgb: 0, 0, 0;--ion-color-warning-shade: #e0ac08;--ion-color-warning-tint: #ffca22;--ion-color-danger: #c5000f;--ion-color-danger-rgb: 197, 0, 15;--ion-color-danger-contrast: #fff;--ion-color-danger-contrast-rgb: 255, 255, 255;--ion-color-danger-shade: #ad000d;--ion-color-danger-tint: #cb1a27;--ion-color-light: #f4f5f8;--ion-color-light-rgb: 244, 245, 248;--ion-color-light-contrast: #000;--ion-color-light-contrast-rgb: 0, 0, 0;--ion-color-light-shade: #d7d8da;--ion-color-light-tint: #f5f6f9;--ion-color-medium: #636469;--ion-color-medium-rgb: 99, 100, 105;--ion-color-medium-contrast: #fff;--ion-color-medium-contrast-rgb: 255, 255, 255;--ion-color-medium-shade: #57585c;--ion-color-medium-tint: #737478;--ion-color-dark: #222428;--ion-color-dark-rgb: 34, 36, 40;--ion-color-dark-contrast: #fff;--ion-color-dark-contrast-rgb: 255, 255, 255;--ion-color-dark-shade: #1e2023;--ion-color-dark-tint: #383a3e}html.ios{--ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}html.md{--ion-default-font: "Roboto", "Helvetica Neue", sans-serif}html{--ion-dynamic-font: -apple-system-body;--ion-font-family: var(--ion-default-font)}body{background:var(--ion-background-color);color:var(--ion-text-color)}body.backdrop-no-scroll{overflow:hidden}html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,html.ios ion-modal ion-footer ion-toolbar:first-of-type,html.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type{padding-top:6px}html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type{padding-bottom:6px}html.ios ion-modal ion-toolbar,html.ios .modal-footer-moving ion-toolbar{padding-right:calc(var(--ion-safe-area-right) + 8px);padding-left:calc(var(--ion-safe-area-left) + 8px)}@media screen and (min-width:768px){html.ios ion-modal.modal-card:first-of-type{--backdrop-opacity: .18}}ion-modal.modal-default.show-modal~ion-modal.modal-default{--backdrop-opacity: 0;--box-shadow: none}html.ios ion-modal.modal-card .ion-page{border-top-left-radius:var(--border-radius)}.ion-color-primary{--ion-color-base: var(--ion-color-primary, #0054e9) !important;--ion-color-base-rgb: var(--ion-color-primary-rgb, 0, 84, 233) !important;--ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-primary-shade, #004acd) !important;--ion-color-tint: var(--ion-color-primary-tint, #1a65eb) !important}.ion-color-secondary{--ion-color-base: var(--ion-color-secondary, #0163aa) !important;--ion-color-base-rgb: var(--ion-color-secondary-rgb, 1, 99, 170) !important;--ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-secondary-shade, #015796) !important;--ion-color-tint: var(--ion-color-secondary-tint, #1a73b3) !important}.ion-color-tertiary{--ion-color-base: var(--ion-color-tertiary, #6030ff) !important;--ion-color-base-rgb: var(--ion-color-tertiary-rgb, 96, 48, 255) !important;--ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-tertiary-shade, #542ae0) !important;--ion-color-tint: var(--ion-color-tertiary-tint, #7045ff) !important}.ion-color-success{--ion-color-base: var(--ion-color-success, #2dd55b) !important;--ion-color-base-rgb: var(--ion-color-success-rgb, 45, 213, 91) !important;--ion-color-contrast: var(--ion-color-success-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-success-shade, #28bb50) !important;--ion-color-tint: var(--ion-color-success-tint, #42d96b) !important}.ion-color-warning{--ion-color-base: var(--ion-color-warning, #ffc409) !important;--ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;--ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;--ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important}.ion-color-danger{--ion-color-base: var(--ion-color-danger, #c5000f) !important;--ion-color-base-rgb: var(--ion-color-danger-rgb, 197, 0, 15) !important;--ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-danger-shade, #ad000d) !important;--ion-color-tint: var(--ion-color-danger-tint, #cb1a27) !important}.ion-color-light{--ion-color-base: var(--ion-color-light, #f4f5f8) !important;--ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;--ion-color-contrast: var(--ion-color-light-contrast, #000) !important;--ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;--ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;--ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important}.ion-color-medium{--ion-color-base: var(--ion-color-medium, #636469) !important;--ion-color-base-rgb: var(--ion-color-medium-rgb, 99, 100, 105) !important;--ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-medium-shade, #57585c) !important;--ion-color-tint: var(--ion-color-medium-tint, #737478) !important}.ion-color-dark{--ion-color-base: var(--ion-color-dark, #222428) !important;--ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;--ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;--ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;--ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;--ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important}.ion-page{inset:0;display:flex;position:absolute;flex-direction:column;justify-content:space-between;contain:layout size style;z-index:0}ion-modal>.ion-page{position:relative;contain:layout style;height:100%}.split-pane-visible>.ion-page.split-pane-main{position:relative}ion-route,ion-route-redirect,ion-router,ion-select-option,ion-nav-controller,ion-menu-controller,ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-modal-controller,ion-picker-controller,ion-popover-controller,ion-toast-controller,.ion-page-hidden{display:none!important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding: 20px}@supports (padding-top: 20px){html{--ion-safe-area-top: var(--ion-statusbar-padding)}}@supports (padding-top: env(safe-area-inset-top)){html{--ion-safe-area-top: env(safe-area-inset-top);--ion-safe-area-bottom: env(safe-area-inset-bottom);--ion-safe-area-left: env(safe-area-inset-left);--ion-safe-area-right: env(safe-area-inset-right)}}ion-card.ion-color .ion-inherit-color,ion-card-header.ion-color .ion-inherit-color{color:inherit}.menu-content{transform:translateZ(0)}.menu-content-open{cursor:pointer;touch-action:manipulation;pointer-events:none;overflow-y:hidden}.menu-content-open ion-content{--overflow: hidden}.menu-content-open .ion-content-scroll-host{overflow:hidden}.ios .menu-content-reveal{box-shadow:-8px 0 42px #00000014}[dir=rtl].ios .menu-content-reveal{box-shadow:8px 0 42px #00000014}.md .menu-content-reveal,.md .menu-content-push{box-shadow:4px 0 16px #0000002e}ion-accordion-group.accordion-group-expand-inset>ion-accordion:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px}ion-accordion-group.accordion-group-expand-inset>ion-accordion:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}ion-accordion-group>ion-accordion:last-of-type ion-item[slot=header]{--border-width: 0px}ion-accordion.accordion-animated>[slot=header] .ion-accordion-toggle-icon{transition:.3s transform cubic-bezier(.25,.8,.5,1)}@media(prefers-reduced-motion:reduce){ion-accordion .ion-accordion-toggle-icon{transition:none!important}}ion-accordion.accordion-expanding>[slot=header] .ion-accordion-toggle-icon,ion-accordion.accordion-expanded>[slot=header] .ion-accordion-toggle-icon{transform:rotate(180deg)}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-previous ion-item[slot=header]{--border-width: 0px;--inner-border-width: 0px}ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanding:first-of-type,ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanded:first-of-type{margin-top:0}ion-input input::-webkit-date-and-time-value{text-align:start}.ion-datetime-button-overlay{--width: fit-content;--height: fit-content}.ion-datetime-button-overlay ion-datetime.datetime-grid{width:320px;min-height:320px}[ion-last-focus],header[tabindex="-1"]:focus,[role=banner][tabindex="-1"]:focus,main[tabindex="-1"]:focus,[role=main][tabindex="-1"]:focus,h1[tabindex="-1"]:focus,[role=heading][aria-level="1"][tabindex="-1"]:focus{outline:none}.popover-viewport:has(>ion-content){overflow:hidden}@supports not selector(:has(> ion-content)){.popover-viewport{overflow:hidden}}audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:700}img{max-width:100%}hr{height:1px;border-width:0;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}label,input,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;height:auto;font:inherit;color:inherit}textarea::placeholder{padding-left:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}a,a div,a span,a ion-icon,a ion-label,button,button div,button span,button ion-icon,button ion-label,.ion-tappable,[tappable],[tappable] div,[tappable] span,[tappable] ion-icon,[tappable] ion-label,input,textarea{touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{padding:0;border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;cursor:pointer;-webkit-appearance:button}[tappable]{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}html.ion-ce body{display:block}html.plt-pwa{height:100vh}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;padding:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;transform:translateZ(0);text-rendering:optimizeLegibility;overflow:hidden;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;text-size-adjust:none}html{font-family:var(--ion-font-family)}@supports (-webkit-touch-callout: none){html{font:var(--ion-dynamic-font, 16px var(--ion-font-family))}}a{background-color:transparent;color:var(--ion-color-primary, #0054e9)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:1.625rem}h2{margin-top:18px;font-size:1.5rem}h3{font-size:1.375rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}.canvas-view{flex:1;position:relative;overflow:hidden;background:gray;user-select:none}.canvas-view canvas{display:block}#top-color-banner{position:absolute;top:0;left:0;right:0;width:auto;height:var(--top-banner-height, 60px);background-color:gray;z-index:50;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1),background-color .2s ease-out;will-change:background-color}#top-color-banner.is-dragging{transition:none}#top-color-banner.is-expanded{height:40vh;border-bottom:none!important}@media(max-height:500px)and (orientation:landscape){#top-color-banner.is-expanded{height:85vh;max-height:400px}}.banner-logo{position:absolute;top:var(--top-icon-button-top-offset, 4px);left:16px;display:flex;align-items:center;gap:8px;pointer-events:auto;z-index:102}[dir=rtl] .banner-logo{left:auto;right:16px}.banner-logo-img{width:48px;height:48px;border-radius:16px;flex-shrink:0}.top-banner-grabber{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:120px;height:28px;cursor:ns-resize;z-index:51;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.grabber-chevron{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:52px;height:28px;color:#fffffff2;background:#0000004d;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:4px 10px;box-sizing:border-box;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:52}.grabber-chevron svg{width:100%;height:100%}#top-color-banner.is-expanded .grabber-chevron{transform:translate(-50%) rotate(180deg)}#top-color-banner.collapsed .top-banner-grabber{display:none!important}:root{--top-icon-button-size: 48px;--top-icon-button-gap: 8px;--top-icon-button-inline-offset: 16px;--top-icon-button-top-offset: 4px}#top-buttons-container{position:absolute;top:var(--top-icon-button-top-offset);left:68px;display:flex;gap:var(--top-icon-button-gap);z-index:102}.top-bar-specific-toggle{position:relative;width:48px;height:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:16px;box-shadow:0 1px 2px #0000001a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s cubic-bezier(.4,0,.2,1),background-color .2s,color .2s,border-color .2s;border:1px solid transparent;background:none;padding:0}.top-bar-specific-toggle svg{width:26px;height:26px}.top-bar-specific-toggle{background-color:#ffffffa6;color:#111;border-color:#0000000d}.top-bar-specific-toggle:hover{transform:scale(1.05);background-color:#ffffffd9}.top-bar-specific-toggle:active{transform:scale(.95)}#lock-controls-btn.locked,#view-original-btn.is-active{background-color:#1976d2!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 0 3px #ffffff80,0 4px 8px #0003!important}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}#lock-controls-btn.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}[dir=rtl] #top-buttons-container{flex-direction:row-reverse}@media(max-width:768px){:root{--top-icon-button-gap: 4px}.top-bar-specific-toggle{width:calc(48px * .95);height:calc(48px * .95)}.top-bar-specific-toggle svg{width:24.7px;height:24.7px}}.mix-chart-container{display:flex;flex-direction:column;gap:8px;margin-top:0;min-height:290px;position:relative}.target-color-swatch{width:100%;height:40px;border-radius:8px;border:none!important;margin-bottom:24px}.mix-empty-state{padding:10px;color:#aaa;font-size:13px;text-align:center}.mix-chart-row{display:flex;flex-direction:column;gap:4px}.mix-chart-top-line{display:flex;align-items:baseline;gap:6px}.mix-chart-percentage{text-align:start;font-size:12px;color:#ddd;font-weight:500;flex-shrink:0}.mix-chart-label{text-align:start;font-size:13px;color:#ddd;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.mix-chart-bar-container{width:100%;height:40px;display:flex;align-items:center}.mix-chart-bar{height:100%;min-width:4px;transition:width .3s ease-out;border-radius:4px;box-sizing:border-box}@media(max-width:640px){.mix-chart-percentage{font-size:11px}}.mixer-panel{display:flex;flex-direction:column;gap:1.5rem;padding:0rem;height:100%}.mixer-preset-label{margin:2px 0 0;font-size:11px;color:#ffffff73}.mixer-panel h3{color:#fff!important;text-transform:uppercase;letter-spacing:.08em;font-weight:400;font-size:15px!important}.live-solving-indicator{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#f59e0b26;border:1px solid rgba(245,158,11,.5);border-radius:6px;color:#f59e0b;font-size:.875rem;font-weight:600;animation:fade-in .3s ease-out;position:absolute;bottom:0;left:0;right:0}.mini-spinner{width:14px;height:14px;border:2px solid rgba(96,165,250,.2);border-top-color:#60a5fa;border-radius:50%;animation:spin .8s linear infinite}@keyframes fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.mixer-header h2{font-size:1.25rem;font-weight:600;margin:0}.solving-indicator{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;text-align:center}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.solving-text{font-size:.875rem;color:var(--text-secondary);font-weight:500}.target-color-section{display:flex;flex-direction:column;gap:1rem}.target-color-section h3{font-size:15px;font-weight:400;margin:0 0 1rem;color:#ddd;text-transform:uppercase;letter-spacing:.05em}.color-display{display:flex;gap:1rem;align-items:center}.color-swatch{width:100%;max-width:110px;min-width:60px;height:40px;border-radius:8px;border:none!important}.color-swatch.small{width:40px;height:40px}.color-values{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;font-family:monospace}.solve-btn{width:100%;padding:.75rem;background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:opacity .2s}.solve-btn:hover:not(:disabled){opacity:.9}.solve-btn:disabled{opacity:.7;cursor:not-allowed}.empty-state{padding:2rem;text-align:center;color:var(--text-secondary);font-size:.875rem}.recipe-section{display:flex;flex-direction:column;gap:1rem;padding-top:1rem;border-top:1px solid var(--border)}.recipe-section h3{font-size:15px;font-weight:400;margin:0 0 1rem;color:#ddd;text-transform:uppercase;letter-spacing:.05em}.accuracy-indicator{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.delta-e-badge{padding:.25rem .75rem;border-radius:12px;color:#fff;font-weight:500;font-size:.85rem}.achieved-color{display:flex;align-items:center;gap:.75rem;font-size:.875rem}.pigment-list{display:flex;flex-direction:column;gap:.75rem}.pigment-item{display:flex;flex-direction:column;gap:.25rem}.pigment-info{display:flex;justify-content:space-between;font-size:.875rem}.pigment-name{font-weight:500;text-transform:capitalize}.pigment-weight{font-family:monospace;color:var(--text-secondary)}.pigment-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.pigment-bar-fill{height:100%;background:var(--accent);transition:width .3s ease}.recipe-actions{display:flex;gap:.5rem;margin-top:.5rem}.action-btn{flex:1;padding:.5rem;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:opacity .2s}.action-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary)}.action-btn:hover{opacity:.9}.share-recipe-btn{display:flex;align-items:center;justify-content:center;padding:5px;background:#1976d226;border:1px solid rgba(25,118,210,.4);border-radius:4px;color:#60a5fa;cursor:pointer;transition:all .2s}.share-recipe-btn:hover:not(:disabled){background:#1976d240;border-color:#1976d2;transform:translateY(-1px)}.share-recipe-btn:active:not(:disabled){transform:translateY(0)}.share-recipe-btn:disabled{opacity:.5;cursor:not-allowed}.color-comparison-vertical{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}.comparison-group{display:flex;flex-direction:column;gap:.35rem;align-items:stretch}.mixer-swatch-label{font-size:13px;color:#ddd!important;letter-spacing:.5px;font-weight:600;margin-bottom:0;text-align:start}.color-swatch.wide{width:100%;max-width:none;height:32px;border-radius:6px;border:none!important}.swatch-hex{font-size:12px;font-family:monospace;color:#bbb;letter-spacing:.5px;cursor:pointer;user-select:none;text-align:start;margin-top:.1rem}.accuracy-monitor-container{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:24px}.accuracy-monitor-bar{position:relative;height:6px;width:100%;border-radius:3px;background:linear-gradient(to right,#2e7d32,#1565c0 25%,#fbc02d,#e65100 75%,#c62828);border:none;overflow:visible}[dir=rtl] .accuracy-monitor-bar{background:linear-gradient(to left,#2e7d32,#1565c0 25%,#fbc02d,#e65100 75%,#c62828)}.monitor-segment{display:none}.monitor-needle{position:absolute;top:50%;inset-inline-start:0;transform:translate(-50%,-50%);width:3px;height:14px;background:#fff;border-radius:2px;box-shadow:0 0 4px #0009;transition:inset-inline-start .3s cubic-bezier(.34,1.56,.64,1);z-index:10}.accuracy-monitor-labels{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;color:#ccc}.monitor-edge-label{font-size:13px;color:#ccc;text-transform:none;letter-spacing:normal;font-weight:600}.delta-e-value{font-size:12px;color:#ddd;font-family:monospace;display:flex;align-items:center;gap:4px;font-weight:600;letter-spacing:.3px}.delta-e-value.out-of-gamut{color:#fbbf24;font-weight:800}.gamut-warning-icon{font-size:14px}.gamut-message{font-size:11px;color:#fff;text-align:center;line-height:1.4;padding:6px 12px;background:#ef4444;border-radius:4px;margin-top:8px;text-transform:uppercase;letter-spacing:1px;font-weight:800;animation:pulse-red 2s ease-in-out infinite}.gamut-note{font-size:11px;color:#d4a017;text-align:center;line-height:1.5;padding:6px 10px;background:#d4a0171f;border:1px solid rgba(212,160,23,.35);border-radius:4px;margin-top:8px;min-height:80px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease}.accuracy-label{font-size:.85rem;font-weight:600;text-align:center;padding:.25rem .5rem;border-radius:4px;line-height:1.4;white-space:nowrap}.accuracy-excellent{background:#0f03;color:#0f0}.accuracy-good{background:#00f3;color:#3b82f6}.accuracy-fair{background:#ff03;color:#ff0}.accuracy-marginal{background:#ff8c0033;color:#ff8c00}.accuracy-difficult{background:#f003;color:red}.quality-badge.excellent{animation:pulse-green 2s ease-in-out infinite}.quality-badge.poor{animation:pulse-red 1.5s ease-in-out infinite}@keyframes pulse-green{0%,to{box-shadow:0 0 #22c55e00}50%{box-shadow:0 0 12px #22c55e66}}@keyframes pulse-red{0%,to{box-shadow:0 0 #ef444400}50%{box-shadow:0 0 12px #ef444466}}.section-divider{height:2px;background:linear-gradient(to right,transparent,rgba(255,255,255,.25),transparent);border:none;margin-bottom:.75rem}[dir=rtl] .section-divider{background:linear-gradient(to left,transparent,rgba(255,255,255,.25),transparent)}.iteration-controls{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#ffffff0d;border-radius:8px;margin-top:.5rem}.iteration-buttons-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.iteration-label{font-size:12px;color:#e0e0e0;margin-inline-end:4px;font-weight:500}.iteration-btn{padding:6px 12px;font-size:12px;font-weight:600;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#e0e0e0;cursor:pointer;transition:all .2s;min-width:38px}.iteration-btn:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.iteration-btn.active{background:#1976d2;border-color:#1976d2;color:#fff;box-shadow:0 2px 8px #1976d266}.solving-time{font-size:13px;color:#4ade80;font-weight:600;font-family:monospace;text-align:center;padding:4px 8px;background:#4ade801a;border-radius:4px;border:1px solid rgba(74,222,128,.2)}.mixer-pro-banner{margin-top:2rem;padding:1.5rem;background:#ff6b6b14;border:1px dashed rgba(255,107,107,.4);border-radius:12px;text-align:center}.mixer-pro-title{display:block;font-size:14px;font-weight:700;color:#ff8a8a;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.mixer-pro-desc{display:block;font-size:12px;color:#fff9;margin-bottom:1.25rem;line-height:1.4}.mixer-pro-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:10px 24px;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 4px 12px #ff6b6b4d;transition:transform .2s,box-shadow .2s;animation:pulse-pro 2s infinite}.mixer-pro-btn:hover{transform:scale(1.05);box-shadow:0 6px 16px #ff6b6b80}@keyframes pulse-pro{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}.forward-mixer-section{display:flex;flex-direction:column;gap:10px}.fm-heading{display:flex;flex-direction:column;gap:2px}.fm-heading h3{font-size:15px;font-weight:400;margin:0;color:#fff;text-transform:uppercase;letter-spacing:.08em}.fm-preset-label{margin:0;font-size:11px;color:#ffffff73}.fm-result-swatch{width:100%;height:56px;border-radius:4px;border:none;flex-shrink:0}.fm-result-placeholder{background:#ffffff0f}.fm-color-desc{margin:16px 0 0;font-size:15px;color:#f8fafc;font-style:normal;line-height:1.4}.fm-loading{display:flex;justify-content:center;padding:4px 0}.fm-temp-gauge{margin:12px 0 16px}.fm-rows{display:flex;flex-direction:column;gap:8px}.fm-row{display:flex;flex-direction:column;gap:4px}.fm-row-picker{display:flex;align-items:center;gap:6px}.fm-picker-chip{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}.fm-select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background-color:#666;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:13px;font-family:inherit;font-weight:500;padding:5px 24px 5px 10px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E0E0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 8px center;background-size:10px}.fm-select:focus{outline:none;border-color:#60a5fa80}.fm-select option{background-color:#666;color:#fff}.fm-remove-btn{flex-shrink:0;background:none;border:none;color:#fff6;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;transition:color .15s}.fm-remove-btn:hover{color:#ff6464cc}.fm-buy-link{flex-shrink:0;text-decoration:none;font-size:14px;line-height:1;padding:4px;opacity:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.3));transition:opacity .2s,transform .2s;cursor:pointer}.fm-buy-link:hover{opacity:1;transform:scale(1.2)}.fm-bar-track{position:relative;height:28px;background:#ffffff14;border-radius:6px;overflow:visible}.fm-bar{position:absolute;top:0;left:0;height:100%;border-radius:6px;display:flex;align-items:center;min-width:32px;user-select:none}.fm-bar-handle{position:absolute;right:-5px;top:0;width:10px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:2}.fm-bar-handle:after{content:"";width:3px;height:16px;border-radius:2px;background:#ffffffb3;box-shadow:0 0 4px #00000080}.fm-add-btn{align-self:flex-start;background:none;border:1px dashed rgba(255,255,255,.25);border-radius:8px;color:#ffffff8c;font-size:12px;font-family:inherit;padding:5px 12px;cursor:pointer;transition:border-color .15s,color .15s}.fm-add-btn:hover{border-color:#ffffff80;color:#ffffffd9}.fm-warning{font-size:12px;color:#ffc864cc;margin:0}.pigment-wheel-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:24px}.pigment-wheel{position:relative;width:100%;aspect-ratio:1;max-width:271px;cursor:crosshair;user-select:none}.hue-wheel-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hue-wheel-svg svg{width:100%;height:100%;display:block}.sv-triangle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.marker{position:absolute;width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px #0000004d;transform:translate(-50%,-50%);pointer-events:none;transition:border-color .1s;z-index:10}.hue-marker,.sv-marker{background:transparent}.color-info{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#ffffff80;border-radius:8px;width:100%;max-width:300px}.color-preview{width:48px;height:48px;border-radius:6px;border:2px solid #ddd;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.color-values{display:flex;flex-direction:column;gap:.25rem;font-size:13px;color:#333;font-family:Courier New,monospace}.color-values span{font-weight:500}.color-gauge-container{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;margin-top:4px;user-select:none}.gauge-label{font-size:13px;font-weight:500;color:#ddd}.color-gauge-strip{position:relative;width:100%;height:auto;display:flex;align-items:stretch;justify-content:start;background-color:transparent;overflow:visible;border:none;padding:0;gap:4px}.gauge-segment.is-other:first-of-type{margin-inline-start:8px}.gauge-segment.is-other{border-style:dashed;opacity:.8}.gauge-segment{position:relative;flex:1;aspect-ratio:1 / 1;background-color:transparent;box-sizing:border-box;transition:background-color .4s ease,opacity .3s ease,transform .2s ease,border-color .2s ease;border:1px solid rgba(255,255,255,.15);border-radius:4px;margin-bottom:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.gauge-segment.is-unmatched{opacity:1}.gauge-segment.is-matched{z-index:2;border:1px solid white!important}.segment-progress-container{position:absolute;bottom:0;inset-inline-start:0;width:100%;height:4px;background-color:#0000004d}.segment-progress-fill{height:100%;background-color:#fff;transition:width .1s ease-out}.gauge-marker{display:none}.gauge-marker:after{content:"";position:absolute;top:0;inset-inline-start:0;inset-inline-end:-100vw;height:100%;background-color:transparent;pointer-events:none}.sub-filter-control{margin-top:20px;padding-inline-start:8px;border-inline-start:2px solid rgba(255,255,255,.3)}.sub-filter-control .filter-header{margin-bottom:6px}.sub-filter-control.conditional{transition:opacity .2s ease}.sub-filter-control label{font-size:13px;color:#ddd;font-weight:600}.filter-controls{display:flex;flex-direction:column;gap:0}.filter-control{display:flex;flex-direction:column;gap:12px;position:relative;padding-top:20px}.filter-control:first-child{padding-top:0}.filter-control+.filter-control{border-top:1px solid rgba(255,255,255,.08)}.pro-locked-section{pointer-events:none}.pro-locked-section label,.pro-locked-section .filter-value,.pro-locked-section .sub-filter-control{opacity:.5}.pro-lock-overlay{position:absolute;inset:30px -10px 0;background:#2d2d2d4d;backdrop-filter:blur(2px);z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:auto;border-radius:12px}.pro-lock-btn{background:var(--accent);color:#fff;text-decoration:none;padding:10px 16px;border-radius:20px;font-size:12px;font-weight:700;box-shadow:0 4px 12px #0000004d;transition:transform .2s ease}.pro-lock-btn:hover{transform:scale(1.05)}.pro-tag-inline{font-size:9px;background:var(--accent);color:#fff;padding:1px 4px;border-radius:4px;margin-inline-start:6px;vertical-align:middle}.filter-header{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:8px;min-height:32px}.filter-header-top{display:contents}.filter-header label{font-size:13px;font-weight:600;color:#ddd;line-height:1.2;flex:1}.filter-header-bottom{display:contents}.filter-value-group{display:flex;align-items:flex-end;gap:12px}.filter-value{font-size:13px;font-weight:600;color:#fff;min-width:30px;text-align:end}.filter-reset-btn{padding:6px 10px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#ccc;border-radius:4px;cursor:pointer;transition:all .2s;min-height:32px;min-width:56px;touch-action:manipulation;align-self:flex-end}.filter-reset-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff80;color:#fff}.filter-reset-btn:disabled{opacity:.5;cursor:not-allowed}.match-mode-selector{display:flex;flex-wrap:nowrap;gap:4px;background:#0003;padding:4px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.match-strategy-btn{flex:1;min-width:0;padding:6px 4px;font-size:10px;font-weight:600;background:#1a1a1a;color:#888;border:none!important;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:.5px;min-height:32px;outline:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-strategy-btn:hover:not(.active):not(:disabled){color:#fff;background:#2a2a2a}.match-strategy-btn.active{background:#1976d2!important;color:#fff!important;border:none!important}.match-strategy-btn:disabled{opacity:.5;cursor:not-allowed}.filter-slider{width:calc(100% + 35px);height:6px;border-radius:3px;background:linear-gradient(to right,transparent 17.5px,rgba(0,0,0,.3) 17.5px,rgba(0,0,0,.3) calc(100% - 17.5px),transparent calc(100% - 17.5px));outline:none;-webkit-appearance:none;appearance:none;pointer-events:auto;margin-inline-start:-17.5px;margin-top:10px;cursor:pointer}@media(pointer:coarse){.filter-slider{pointer-events:none}.filter-slider::-webkit-slider-thumb{pointer-events:auto}.filter-slider::-moz-range-thumb{pointer-events:auto}}.mask-display-control{display:flex;align-items:center;gap:10px}.filter-slider.shorter-slider{width:calc(100% - 100px)}.mask-white-checkbox-container{display:flex;align-items:center;gap:5px;font-size:14px;color:#e0e0e0;cursor:pointer;white-space:nowrap}.mask-white-checkbox-container input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #aaa;border-radius:4px;background-color:transparent;display:inline-block;position:relative;cursor:pointer;outline:none;transition:all .2s}.mask-white-checkbox-container input[type=checkbox]:checked{background-color:#1976d2;border-color:#1976d2}.mask-white-checkbox-container input[type=checkbox]:checked:before{content:"✓";display:block;position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);font-size:14px;color:#fff}.mask-white-checkbox-container input[type=checkbox]:focus-visible{box-shadow:0 0 0 2px #1976d2}.filter-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:53px;height:53px;border-radius:50%;background:transparent;cursor:pointer;background-image:radial-gradient(circle,#1976d2 0%,#1976d2 9px,transparent 9.5px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));box-shadow:none}.filter-slider::-moz-range-thumb{width:53px;height:53px;border-radius:50%;background:transparent;cursor:pointer;border:none;background-image:radial-gradient(circle,#1976d2 0%,#1976d2 9px,transparent 9.5px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));box-shadow:none}.filter-slider::-webkit-slider-thumb:hover{background-image:radial-gradient(circle,#1565c0 0%,#1565c0 9px,transparent 9.5px)}.filter-slider::-moz-range-thumb:hover{background-image:radial-gradient(circle,#1565c0 0%,#1565c0 9px,transparent 9.5px)}.sampler-description{margin-top:4px;text-align:center}.sampler-description small{font-size:11px;color:#aaa}.reset-all-btn{width:100%;padding:6px 12px;margin-top:24px;font-size:11px;font-weight:600;background:#1976d2;color:#fff;border:1px solid #1976d2;border-radius:4px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.5px;min-height:30px}.reset-all-btn:hover{background:#1565c0;box-shadow:0 0 15px #1976d266}.toggle-switch-container{display:flex;align-items:center;gap:8px;cursor:pointer}.toggle-switch{position:relative;width:32px;height:18px;background-color:#333;border-radius:9px;transition:background-color .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1)}.toggle-switch.active{background-color:#1976d2;border-color:#1976d280}.toggle-switch-knob{position:absolute;top:2px;inset-inline-start:2px;width:12px;height:12px;background-color:#fff;border-radius:50%;transition:inset-inline-start .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0006}.toggle-switch.active .toggle-switch-knob{inset-inline-start:16px}.toggle-label{font-size:11px;font-weight:500;color:#ccc;text-transform:uppercase;letter-spacing:.5px;transition:color .3s ease}.toggle-switch.active+.toggle-label{color:#fff}.mini-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.harmony-finder{margin-top:24px;display:flex;flex-direction:column;gap:8px}.harmony-row{display:flex;flex-direction:column;gap:8px}.harmony-header{display:flex;justify-content:space-between;align-items:center;width:100%}.harmony-label{font-size:13px;color:#ddd;font-weight:600}.harmony-wheel-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center}.harmony-swatches{display:flex;gap:6px}.harmony-swatch-wrap{flex:1}.harmony-swatch{width:100%;height:52px;border-radius:6px;border:none!important;cursor:pointer;padding:0;transition:transform .15s ease}.harmony-swatch:active{transform:scale(.97)}.harmony-hint{margin:6px 0 0;font-size:11px;color:#fff6;text-align:center}.tst-rows{display:flex;flex-direction:column;gap:4px}.tst-swatches{display:flex;gap:4px}.tst-swatch{flex:1;aspect-ratio:1 / 1;border:1px solid rgba(255,255,255,.15);border-radius:4px;cursor:pointer;padding:0;position:relative;transition:transform .2s ease,border-color .2s ease}.tst-swatch:hover{transform:translateY(-2px);border-color:#fff6;z-index:1}.tst-hint{margin:6px 0 0;font-size:11px;color:#fff6;text-align:center}.modal-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out;padding:20px}.modal-content{background:#2d2d2d;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:600px;width:90%;max-height:90vh;overflow:hidden;position:relative;animation:slideUp .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.modal-close-btn{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border:none;background:#0003;font-size:32px;line-height:1;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:100}.modal-close-btn:hover{background:#fff3;color:#fff;transform:scale(1.1)}.add-pigment-modal-content{max-width:600px;width:calc(100% - 16px);padding:0}.modal-header{display:flex;align-items:center;justify-content:center;height:80px;flex-shrink:0;border-bottom:none!important;position:relative;padding:0 3rem}.add-pigment-modal-content .modal-header{padding:0 1.5rem}.modal-title{margin:0;font-size:1rem;font-weight:400;color:#fff;text-transform:uppercase;letter-spacing:.1em;text-align:center}.pro-promo-bar{padding:0 1.5rem 1rem;flex-shrink:0}.pro-promo-btn{display:block;width:100%;padding:10px;background:#ff6b6b26;border:1px solid var(--accent);border-radius:8px;color:#fff;text-decoration:none;font-size:12px;font-weight:700;text-align:center;transition:background .2s ease}.pro-promo-btn:hover{background:#ff6b6b40}.pigment-filter-bar{display:flex;flex-wrap:wrap;gap:8px;padding:0 1.5rem .5rem;margin-bottom:0;flex-shrink:0}.filter-chip{padding:6px 12px;border-radius:20px;background:#3d3d3d;color:#aaa;border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .2s ease}.filter-chip:hover{background:#4d4d4d;color:#fff}.filter-chip.active{background:#1976d2;color:#fff;border-color:#1976d2;box-shadow:0 2px 8px #1976d266}.pigment-picker-list{display:flex;flex-direction:column;gap:20px;padding:1.5rem 1.5rem 138px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.pigment-picker-list::-webkit-scrollbar{width:6px}.pigment-picker-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.pigment-category{display:flex;flex-direction:column;gap:12px}.pigment-cat-header{font-size:12px!important;font-weight:600!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-top:15px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.1)!important;display:block}.pigment-category:first-child .pigment-cat-header{margin-top:0!important}.pigment-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pigment-select-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#3d3d3d;border:1px solid #4d4d4d;border-radius:12px;cursor:pointer;transition:all .2s ease;font-size:11px;color:#fff;font-weight:500;text-align:center;min-height:90px}.pigment-select-btn:not(:disabled):hover{background:#4d4d4d;border-color:#666;transform:translateY(-2px);box-shadow:0 4px 12px #0006}.pigment-select-btn.disabled{opacity:.3;cursor:not-allowed;background:#1a1a1a;border-color:#222;box-shadow:none}.pigment-select-swatch{width:40px;height:40px;border-radius:8px;border:2px solid rgba(255,255,255,.2);flex-shrink:0;position:relative;overflow:hidden}.lock-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;font-size:16px}.pigment-select-btn.locked{background:#2d2d2d80;border-style:dashed;opacity:.8}.pigment-select-btn.locked:hover{background:#ff6b6b1a;border-color:var(--accent)}.manage-presets-modal{width:600px;max-width:90%;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}.manage-presets-header{display:flex;align-items:center;justify-content:center;height:80px;flex-shrink:0;border-bottom:none!important;position:relative;padding:0 1.5rem}.manage-presets-modal .modal-close-btn{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border:none;background:#0003;font-size:32px;line-height:1;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:100}.manage-presets-modal .modal-close-btn:hover{background:#fff3;color:#fff;transform:scale(1.1)}.manage-presets-inner{padding:1.5rem 1.5rem 148px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:none;-ms-overflow-style:none}.manage-presets-inner::-webkit-scrollbar{display:none}.manage-presets-title{font-size:1rem;font-weight:400;color:#fff;margin:0;text-transform:uppercase;letter-spacing:.1em}.manage-presets-section{margin-bottom:24px}.manage-presets-section:last-child{margin-bottom:0}.manage-presets-section-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin:0 0 8px}.manage-presets-section-hint{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:#fff;opacity:.85}.preset-manage-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.preset-manage-item{display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 8px 4px 4px;border-radius:8px;background:#ffffff0a;transition:background .15s}.preset-manage-item:hover{background:#ffffff14}.preset-manage-item--hidden{opacity:.5}.preset-reorder-col{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.preset-reorder-btn{width:30px;height:22px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#aaa;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;font-family:inherit}.preset-reorder-btn:hover:not(:disabled){background:#ffffff24;border-color:#ffffff4d;color:#fff}.preset-reorder-btn:disabled{opacity:.2;cursor:default}.preset-manage-name{flex:1;font-size:13px;color:#ddd;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-rename-input{flex:1;min-width:0;background:#ffffff17;border:1px solid rgba(255,255,255,.3);border-radius:5px;padding:5px 9px;font-size:13px;color:#e8e8e8;font-family:inherit;outline:none}.preset-rename-input:focus{border-color:#ffffff8c}.preset-action-col{display:flex;align-items:center;gap:4px;flex-shrink:0}.preset-row-btn{height:30px;min-width:30px;padding:0 8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:5px;color:#bbb;font-size:12px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;white-space:nowrap}.preset-row-btn:hover{background:#ffffff21;border-color:#ffffff4d;color:#fff}.preset-row-btn--confirm{border-color:#6ec86e66;color:#90d090}.preset-row-btn--confirm:hover:not(:disabled){background:#6ec86e26;border-color:#6ec86ea6}.preset-row-btn--confirm:disabled{opacity:.3;cursor:not-allowed}.preset-row-btn--muted{color:#888}.preset-row-btn--muted:hover{border-color:#ffb45066;color:#ffb84d}.preset-row-btn--danger{border-color:#ff64644d;color:#f88}.preset-row-btn--danger:hover{background:#ff64641f;border-color:#ff646499}.preset-action-btn{font-size:12px;padding:5px 12px;border-radius:5px;border:1px solid;cursor:pointer;font-family:inherit;transition:all .15s;flex-shrink:0}.preset-action-btn--restore{background:transparent;border-color:#78c87866;color:#90c890}.preset-action-btn--restore:hover{background:#78c8781f;border-color:#78c878b3}.pigment-selector{margin-bottom:0;display:flex;flex-direction:column;gap:16px}.pro-promo-inline{margin-bottom:-8px}.pro-promo-link{display:block;text-align:center;padding:8px;background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);border-radius:8px;color:#ff8a8a;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:background .2s ease}.pro-promo-link:hover{background:#ff6b6b33}.mixer-header-row{display:flex;align-items:center;justify-content:space-between;height:36px;width:100%;gap:12px}.mixer-header-label{font-size:14px;font-weight:600;color:#e0e0e0;flex-shrink:0}.mixer-preset-select{appearance:none;-webkit-appearance:none;background-color:#666;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 24px 6px 12px;padding-block:6px;padding-inline:12px 24px;border-radius:8px;font-size:13px;font-family:inherit;font-weight:500;cursor:pointer;flex-grow:1;min-width:0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E0E0E0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 10px center;background-size:10px}[dir=rtl] .mixer-preset-select{background-position:left 10px center}.mixer-preset-select option{background-color:#666;color:#fff}.active-pigments-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}.pigment-chip{display:inline-flex;align-items:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:4px 4px 4px 8px;padding-block:4px;padding-inline:8px 4px;font-size:12px;color:#f0f0f0;max-width:100%;vertical-align:middle}.platform-native .pigment-chip{padding:9px 4px 9px 10px;padding-block:9px;padding-inline:10px 4px}.chip-swatch{width:12px;height:12px;border-radius:4px;border:none!important;flex-shrink:0;margin-inline-end:6px;display:inline-block;position:relative;overflow:hidden}.chip-lock-icon{position:absolute;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;font-size:8px}.pigment-chip.chip-locked{background:#ffffff0d;border-style:dashed;opacity:.7}.pigment-chip.chip-locked:hover{background:#ff6b6b1a;border-color:var(--accent)}.chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;flex-shrink:1;min-width:0}.chip-buy{text-decoration:none;font-size:13px;line-height:1;padding:0 2px;margin-inline-start:6px;opacity:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.3));transition:opacity .2s,transform .2s}.chip-buy:hover{opacity:1;transform:scale(1.2)}.chip-remove{background:none;border:none;color:#ffffffb3;cursor:pointer;padding:0 4px;margin-inline-start:4px;font-size:16px;line-height:1;flex-shrink:0;transition:color .2s}.chip-remove:hover{color:#f66}.add-pigment-btn{display:inline-flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px dashed rgba(255,255,255,.3);border-radius:20px;padding:4px 12px;font-size:12px;color:#ffffffb3;cursor:pointer;transition:all .2s;white-space:nowrap}.add-pigment-btn:hover{background:#ffffff1a;border-color:#ffffff80;color:#fff}.pigment-info-hint{font-size:13px;color:#cbd5e1;font-style:italic;margin-top:8px;margin-bottom:0;padding-inline-start:4px}.preset-manage-btn{flex-shrink:0;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;border-radius:6px;width:36px;height:36px;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1}.preset-manage-btn:hover{background:#ffffff1a;border-color:#fff6;color:#fff}.save-preset-btn{align-self:flex-start;background:none;border:1px dashed rgba(255,255,255,.22);color:#ffffff8c;border-radius:6px;padding:4px 12px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .2s}.save-preset-btn:hover{border-color:#ffffff73;color:#fff}.save-preset-row{display:flex;gap:6px;align-items:center}.save-preset-input{flex:1;min-width:0;background:#ffffff12;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:5px 10px;font-size:12px;color:#e0e0e0;font-family:inherit;outline:none}.save-preset-input:focus{border-color:#ffffff73}.save-preset-input::placeholder{color:#ffffffa6}.save-preset-confirm-btn{flex-shrink:0;background:#6ec86e2e;border:1px solid rgba(110,200,110,.4);color:#90d090;border-radius:6px;padding:5px 12px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s}.save-preset-confirm-btn:hover:not(:disabled){background:#6ec86e47;border-color:#6ec86ea6}.save-preset-confirm-btn:disabled{opacity:.38;cursor:not-allowed}.save-preset-cancel-btn{flex-shrink:0;background:none;border:1px solid rgba(255,255,255,.15);color:#999;border-radius:6px;padding:5px 8px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s}.save-preset-cancel-btn:hover{border-color:#ffffff4d;color:#ccc}.greyscale-swatches-container{display:flex;width:100%;gap:0;justify-content:center;align-items:stretch;overflow:hidden}.greyscale-swatch-item{flex:1;display:flex}.greyscale-swatch{width:100%;height:36px;border-radius:0;border:none;cursor:pointer;transition:all .15s ease;padding:0;position:relative}.greyscale-swatch:hover{z-index:5;transform:scaleY(1.1);box-shadow:0 0 10px #fff3}.greyscale-swatch.selected{z-index:10;transform:scale(1.1);box-shadow:0 0 0 2px #1976d2,0 0 12px #1976d2cc;outline:2px solid #1976d2}.greyscale-swatch.selected:after{content:"";position:absolute;inset:0;border:none!important;pointer-events:none}.modal-content *{box-sizing:border-box}.modal-overlay{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;bottom:0;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:modalFadeIn .2s ease-in-out;padding:20px}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#2d2d2d;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:600px;width:90%;max-height:90vh;overflow:hidden;position:relative;animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1);padding:0;display:flex;flex-direction:column;color:#fff}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.info-modal-content .modal-header{display:flex;align-items:center;justify-content:center;height:80px;flex-shrink:0;border:none!important;border-bottom:none!important;position:relative;padding:0 3rem}.modal-title{font-size:1rem!important;font-weight:400!important;color:#fff!important;margin:0!important;text-transform:uppercase!important;letter-spacing:.1em!important;text-align:center}.modal-close-btn{position:absolute;top:1rem;inset-inline-end:1rem;width:40px;height:40px;border:none;background:#0003;font-size:32px;line-height:1;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:100}.modal-close-btn:hover{background:#fff3;transform:scale(1.1)}.info-modal-body{overflow-y:auto;flex:1;min-height:0;scrollbar-width:none;-ms-overflow-style:none;padding-block:0 3rem;padding-inline:2rem}.info-modal-body::-webkit-scrollbar{display:none}.info-section{margin-bottom:2.5rem}.info-modal-content .info-modal-body .info-section h2,.info-modal-content .info-modal-body h2,.info-modal-content .info-modal-body .info-section h3,.info-modal-content .info-modal-body h3{font-size:14px!important;font-weight:600!important;color:#fff!important;margin:25px 0 10px!important;padding-bottom:5px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;text-transform:uppercase!important;letter-spacing:.08em!important;display:block!important}.info-modal-body section:first-child h2,.info-modal-body h2:first-child,.info-modal-body section:first-child h3,.info-modal-body h3:first-child{margin-top:0!important}.info-section p{margin:0 0 1.25rem;line-height:1.6;color:#cbd5e1;font-size:18px!important}.info-section ul{list-style:disc;padding-inline-start:1.5rem;margin:1rem 0}.info-section li{font-size:.95rem;line-height:1.6;margin-bottom:.4rem;color:#cbd5e1}.info-section li li{margin-bottom:10px}.info-image-container{width:220px;height:220px;aspect-ratio:1 / 1;background-color:gray;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border-radius:8px;overflow:hidden;position:relative;box-shadow:inset 0 2px 8px #0003}.info-svg-image{position:relative;width:100%;height:100%;max-width:100%;display:block}.palette-mode-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:12px;margin-block:1.5rem;margin-inline:-1.5rem 0;width:calc(100% + 1.5rem);background-color:gray;padding:1.5rem;border-radius:12px;box-shadow:inset 0 2px 8px #0000001a}.palette-mode-grid-container--large{grid-template-columns:repeat(4,1fr)}.split-color-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}.info-swatch{width:40px;height:40px;border-radius:8px;border:2px solid rgba(0,0,0,.1);box-shadow:none;flex-shrink:0}.swatch-label{font-size:10px!important;color:#cbd5e1;font-weight:600!important;margin-top:4px;line-height:1.2}.icon-list{list-style:none;padding:0;margin:0}.icon-list li{display:flex;align-items:center;margin-bottom:12px}.icon-list-icon-wrapper{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background-color:#ffffff0d;border-radius:8px;margin-inline-end:12px;color:#fff}.icon-list-icon-wrapper svg{width:24px;height:24px}.icon-list-text{font-size:13px;line-height:1.5;color:#cbd5e1}.icon-list-text strong{color:#fff;font-weight:700}.info-section .tip{background:#1976d226;border-inline-start:4px solid #1976d2;padding:1rem;border-radius:4px;color:#e3f2fd;margin-bottom:1.5rem}.info-section .note{background:#ff980026;border-inline-start:4px solid #ff9800;padding:1rem;border-radius:4px;font-size:.9rem;color:#fff3e0;margin-bottom:1.5rem}.info-section .note em{font-style:normal;color:#fbbf24}.modal-button-group{display:flex;justify-content:center;margin-top:20px}.control-button.primary-action-button{background-color:#1976d2;color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:500;box-shadow:0 1px 3px #0003;transition:all .2s}.control-button.primary-action-button:hover{background-color:#1565c0;transform:translateY(-2px)}.pigment-info-modal-content{background:#2d2d2d;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:600px;width:calc(100% - 16px);max-height:85vh;overflow:hidden;position:relative;padding:0;color:#fff;animation:slideUp .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:center;height:60px;flex-shrink:0;border-bottom:none!important;position:relative;text-align:center;padding:0 3rem}.pigment-info-modal-content .modal-header{padding:0 1.5rem}.pigment-title-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%}.modal-title{margin:0;padding:0;border-bottom:none;font-size:1rem;line-height:1.2;color:#fff;text-transform:uppercase;font-weight:400;letter-spacing:.1em}.pigment-subtitle{font-size:.8rem;color:#fbbf24;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block}.pigment-swatch-section{width:100%;height:56px;background-color:gray;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 4px 8px #0000001a,inset 0 -4px 8px #0000001a}.pigment-rect-swatch{width:50%;height:32px;border-radius:8px;border:none;box-shadow:none}.pigment-info-body{display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.5rem 98px;overflow-y:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none}.pigment-buy-bar{flex-shrink:0;padding:8px 1.5rem;border-bottom:1px solid rgba(255,255,255,.08)}.buy-pigment-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:8px 12px;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-weight:700;font-size:.9rem;transition:all .2s;box-shadow:0 4px 12px #0003}.buy-pigment-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000004d;background:#ff5252}.pigment-info-modal-content .pigment-info-body .info-section h3,.info-section h3{font-size:14px!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:#fff!important;margin-bottom:10px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;padding-bottom:5px!important;font-weight:600!important}.tech-data-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;background:#0003;padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.tech-item{display:flex;flex-direction:column;gap:2px}.tech-label{font-size:.65rem;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.tech-value{font-size:.9rem;color:#f1f5f9;font-weight:400;line-height:1.2}.prose-section{display:flex;flex-direction:column;gap:1.25rem}.description-block p,.usage-block p,.mixing-block p{font-size:18px!important;font-style:normal;line-height:1.55;margin:0;color:#cbd5e1}.handling-note{background:#fbbf241a;border-inline-start:3px solid #fbbf24;padding:.75rem 1rem;border-radius:4px;font-size:.85rem;line-height:1.4;color:#fbbf24;margin-top:.5rem}.handling-note strong{text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.mix-section{background:gray;border-radius:8px;padding:.75rem;margin:0 -.25rem}.mix-section h3{color:#ffffffb3!important;border-bottom-color:#fff3!important}.mix-ratio-labels{display:flex;justify-content:space-between;font-size:.65rem;color:#fff9;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;padding:0 2px}.mix-rows{display:flex;flex-direction:column;gap:10px}.mix-partner-block{display:flex;flex-direction:column;gap:3px}.mix-row{display:flex}.mix-partner-name{display:block;font-size:.72rem;color:#ffffffd9}.mix-swatches{display:flex;flex:1;gap:3px}.mix-swatch{flex:1;height:44px;border-radius:4px;cursor:pointer}.mix-swatch-ref{flex:0 0 44px;height:44px;border-radius:4px;cursor:pointer;opacity:.85}.swatch-popup-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:#00000059;border-radius:12px}.swatch-popup{width:320px;height:320px;display:flex;align-items:center;justify-content:center;background-color:gray;border-radius:24px;animation:swatchPop .18s cubic-bezier(.34,1.56,.64,1)}.swatch-popup-inner{width:160px;height:160px;border-radius:8px;box-shadow:none}@keyframes swatchPop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.mix-row-tint{opacity:.85}.mix-tint-label{color:#ffffff80!important;font-style:italic;margin-top:4px}.info-section .mix-tap-note,.info-section .mix-spectral-note{margin:0;padding-top:8px;font-size:11px!important;color:#ffffffb3;font-style:italic!important;text-align:end;letter-spacing:.01em}.alt-names-block h3{font-size:14px!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:#fff!important;margin-bottom:10px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;padding-bottom:5px!important;font-weight:600!important}.alt-names-tags{display:flex;flex-wrap:wrap;gap:6px}.alt-name-tag{font-size:.78rem;color:#cbd5e1;background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:3px 10px;white-space:nowrap}.loading-text{font-style:italic;color:#777;text-align:center;padding:1rem}.pigment-info-modal-content .modal-close-btn{position:absolute;top:1rem;inset-inline-end:1rem;width:40px;height:40px;border:none;background:#0003;font-size:32px;line-height:1;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:100}.pigment-info-modal-content .modal-close-btn:hover{background:#fff3;color:#fff;transform:scale(1.1)}.upgrade-modal-content{background:#2d2d2d;max-width:450px;width:calc(100% - 32px);border-radius:16px;box-shadow:0 12px 48px #00000080;overflow:hidden;animation:modal-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modal-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.upgrade-modal-body{padding:2rem;display:flex;flex-direction:column;align-items:center;text-align:center}.upgrade-intro{color:#ccc;font-size:.95rem;line-height:1.5;margin-bottom:1.5rem}.pro-features-list{width:100%;margin:0 0 2rem;padding:0;text-align:left;list-style:none;background:#0003;border-radius:12px;padding:1.25rem}.pro-features-list li{margin-bottom:1rem;display:flex;flex-direction:column;gap:2px}.pro-features-list li:last-child{margin-bottom:0}.pro-features-list li strong{color:#ff8a8a;font-size:.9rem;display:flex;align-items:center}.pro-features-list li strong:before{content:"✓";margin-inline-end:8px;font-weight:900}.pro-features-list li span{color:#999;font-size:.8rem;padding-inline-start:1.5rem}.upgrade-main-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:1rem;border-radius:50px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #ff6b6b4d;margin-bottom:1rem}.upgrade-main-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b80}.upgrade-restore-btn{background:none;border:none;color:#888;font-size:.85rem;text-decoration:underline;cursor:pointer;opacity:.7;transition:opacity .2s}.upgrade-restore-btn:hover{opacity:1}.welcome-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:900;display:flex;justify-content:center;align-items:center;opacity:1;pointer-events:all;transition:opacity .3s ease-in-out;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.welcome-overlay.drag-over-active .welcome-content{border-color:#1976d2;background-color:#e3f2fd;transform:scale(1.02)}.welcome-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;border:3px dashed #cac4d0;border-radius:24px;gap:24px;text-align:center;min-width:300px;max-width:500px;background:transparent;transition:all .3s cubic-bezier(.4,0,.2,1);direction:ltr!important}.upload-icon{width:64px;height:64px;color:#79747e;margin-bottom:8px}.load-image-btn{font-family:inherit;font-size:16px!important;font-weight:600!important;padding:12px 32px!important;background:#1976d2!important;color:#fff!important;border:none!important;border-radius:10px!important;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 10px #1976d240!important;min-height:64px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:100%!important}.load-image-btn:hover{background:#1565c0;box-shadow:0 4px 12px #1976d266;transform:translateY(-2px)}.load-image-btn:active{transform:translateY(0);box-shadow:0 2px 6px #1976d24d}.divider-text{font-size:13px;color:#757575;font-weight:500;margin:8px 0;text-transform:uppercase;letter-spacing:.05em}.sample-images-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}.sample-image-btn{background:none;border:2px solid #cac4d0;border-radius:12px;padding:4px;width:80px;height:80px;cursor:pointer;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000001a}.sample-image-btn:hover,.sample-image-btn:focus-visible{transform:translateY(-4px) scale(1.05);box-shadow:0 4px 12px #00000026;border-color:#1976d2;outline:none}.sample-image-btn:active{transform:translateY(-2px) scale(1.02)}.sample-image-placeholder{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.sample-image-placeholder img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}.desktop-hint{font-size:12px;color:#9e9e9e;font-weight:400;margin-top:4px}@media(max-width:1200px){.desktop-hint{display:none!important}}@media(max-width:768px){.welcome-content{padding:40px 24px;max-width:90vw}.upload-icon{width:48px;height:48px}.load-image-btn{font-size:15px!important;padding:12px 24px!important;min-height:64px!important}.sample-image-btn{width:72px;height:72px}}@media(max-width:600px)and (orientation:portrait){.welcome-overlay{position:fixed;z-index:1000}}@media(prefers-reduced-motion:reduce){.welcome-overlay,.welcome-content,.load-image-btn,.sample-image-btn{animation:none;transition:none}}.toast-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{min-width:300px;max-width:500px;padding:16px;background:#2a2a2a;border-radius:8px;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto;animation:toast-slide-in .3s ease-out;border-left:4px solid}@keyframes toast-slide-in{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.toast-content{display:flex;align-items:center;gap:12px;flex:1}.toast-icon{font-size:20px;font-weight:700;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-message{color:#fff;font-size:14px;line-height:1.4;word-wrap:break-word}.toast-actions{display:flex;align-items:center;gap:8px}.toast-action-btn{padding:6px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:13px;cursor:pointer;transition:background .2s}.toast-action-btn:hover{background:#fff3}.toast-close-btn{width:24px;height:24px;padding:0;background:transparent;border:none;color:#fff9;font-size:18px;cursor:pointer;transition:color .2s;flex-shrink:0}.toast-close-btn:hover{color:#fff}.toast-success{border-left-color:#4caf50}.toast-success .toast-icon{color:#4caf50}.toast-error{border-left-color:#f44336}.toast-error .toast-icon{color:#f44336}.toast-info{border-left-color:#2196f3}.toast-info .toast-icon{color:#2196f3}.toast-warning{border-left-color:#ff9800}.toast-warning .toast-icon{color:#ff9800}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:none}}@media(prefers-color-scheme:light){.toast{background:#1a1a1a}}.error-boundary{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000e6;z-index:9999;padding:20px}.error-boundary-content{max-width:600px;background:#2a2a2a;border-radius:12px;padding:32px;box-shadow:0 8px 32px #00000080;text-align:center}.error-boundary-content h2{margin:0 0 16px;color:#fff;font-size:24px;font-weight:600}.error-boundary-location{color:#888;font-size:14px;margin:0 0 12px;font-family:monospace}.error-boundary-message{color:#ff6b6b;font-size:16px;margin:0 0 24px;line-height:1.5}.error-boundary-stack{background:#1a1a1a;color:#888;padding:16px;border-radius:6px;font-size:12px;text-align:left;overflow-x:auto;max-height:200px;margin:0 0 24px;border:1px solid #333333}.error-boundary-actions{display:flex;gap:12px;justify-content:center}.error-boundary-btn{padding:12px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none}.error-boundary-btn.primary{background:#4caf50;color:#fff}.error-boundary-btn.primary:hover{background:#45a049;transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.error-boundary-btn.secondary{background:#333;color:#fff;border:1px solid #555555}.error-boundary-btn.secondary:hover{background:#444}@media(max-width:600px){.error-boundary{padding:12px}.error-boundary-content{padding:24px}.error-boundary-content h2{font-size:20px}.error-boundary-actions{flex-direction:column}.error-boundary-btn{width:100%}}.settings-overlay{position:fixed;top:0;inset-inline:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;overflow:hidden;animation:settingsFadeIn .2s ease-out}@keyframes settingsFadeIn{0%{opacity:0}to{opacity:1}}.settings-modal{background:#2a2a2a;border-radius:12px;max-width:600px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080;animation:settingsSlideIn .3s ease-out}@keyframes settingsSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid #3a3a3a}.settings-header h2{margin:0;color:#fff;font-size:24px;font-weight:600}.settings-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.settings-close:hover{background:#3a3a3a;color:#fff}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 12px;color:#fff;font-size:18px;font-weight:600}.settings-info{margin-bottom:16px}.settings-info p{margin:0 0 8px;color:#ccc;font-size:14px;line-height:1.5}.settings-info p:last-child{margin-bottom:0}.settings-info strong{color:#fff}.settings-tech{color:#888!important;font-size:13px!important;margin-top:8px!important}.settings-actions{display:flex;gap:12px;flex-wrap:wrap}.settings-btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none;flex:1;min-width:120px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.settings-btn:disabled{opacity:.5;cursor:not-allowed}.settings-btn.primary{background:#4caf50;color:#fff}.settings-btn.primary:hover:not(:disabled){background:#45a049;transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.settings-btn.secondary{background:#3a3a3a;color:#fff;border:1px solid #555555}.settings-btn.secondary:hover:not(:disabled){background:#444}.settings-btn.warning{background:#ff9800;color:#fff}.settings-btn.warning:hover:not(:disabled){background:#f57c00;transform:translateY(-1px);box-shadow:0 4px 12px #ff98004d}.settings-btn.danger{background:#f44336;color:#fff}.settings-btn.danger:hover:not(:disabled){background:#d32f2f;transform:translateY(-1px);box-shadow:0 4px 12px #f443364d}.settings-footer{padding:16px 24px;border-top:1px solid #3a3a3a;display:flex;justify-content:flex-end}.settings-footer .settings-btn{min-width:100px}@media(max-width:600px){.settings-overlay{padding:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:80px;align-items:flex-start}.settings-modal{max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 80px);border-radius:0}.settings-header{padding:20px}.settings-header h2{font-size:20px}.settings-content{padding:20px}.settings-section{margin-bottom:24px}.settings-section h3{font-size:16px}.settings-actions{flex-direction:column}.settings-btn{width:100%;min-width:0}.settings-footer{padding:16px 20px;padding-bottom:max(16px,env(safe-area-inset-bottom))}}.loading-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;animation:loadingFadeIn .2s ease-out}.loading-overlay-transparent{background:#00000080;backdrop-filter:blur(4px)}@keyframes loadingFadeIn{0%{opacity:0}to{opacity:1}}.loading-overlay-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px;background:#2a2a2af2;border-radius:12px;box-shadow:0 8px 32px #00000080;animation:loadingSlideIn .3s ease-out}@keyframes loadingSlideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.loading-spinner{position:relative;width:60px;height:60px}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:#4caf50;border-radius:50%;animation:spinnerRotate 1.2s cubic-bezier(.5,0,.5,1) infinite}.spinner-ring:nth-child(1){animation-delay:-.45s;border-top-color:#4caf50}.spinner-ring:nth-child(2){animation-delay:-.3s;border-top-color:#66bb6a}.spinner-ring:nth-child(3){animation-delay:-.15s;border-top-color:#81c784}@keyframes spinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-message{color:#fff;font-size:16px;font-weight:500;text-align:center;margin:0}.loading-submessage{color:#aaa;font-size:14px;text-align:center;margin:-8px 0 0}.loading-progress-container{width:200px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-top:8px}.loading-progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);transition:width .3s ease;border-radius:3px}.loading-progress-text{color:#aaa;font-size:12px;text-align:center;margin-top:4px}@media(max-width:600px){.loading-overlay-content{padding:24px;max-width:80%}.loading-spinner{width:50px;height:50px}.loading-message{font-size:14px}.loading-submessage{font-size:12px}.loading-progress-container{width:150px}}:root{--md-primary: #1976d2;--md-on-primary: #ffffff;--md-background: #f5f5f5;--md-outline-variant: #cac4d0;--md-outline: #79747e;--panel-bg: #737373;--md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px 0 rgba(0, 0, 0, .3);--top-banner-height: 76px;--top-banner-height-mobile: 96px;--mobile-image-pane-height: 60%;--mobile-controls-pane-height: 40%}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;font-family:inherit;background:var(--md-background);-webkit-text-size-adjust:100%;text-size-adjust:100%}.loading-screen,.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}.spinner{width:50px;height:50px;border:4px solid #e0e0e0;border-top-color:var(--md-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-screen h2{color:#f44336}.error-screen button{padding:.75rem 1.5rem;background:var(--md-primary);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden}#image-view-area{position:absolute;top:0;left:0;width:100%;height:100%;background:gray;display:flex;flex-direction:column;padding-inline-end:0;transition:padding-inline-end .3s cubic-bezier(.4,0,.2,1)}#image-view-area.panel-open{padding-inline-end:400px}@media(max-width:1200px)and (orientation:landscape){#image-view-area.panel-open{padding-inline-end:320px}}@media(max-width:600px)and (orientation:portrait){:root{--top-banner-height: var(--top-banner-height-mobile, 96px)}#image-view-area.panel-open{padding-inline-end:0}}#image-canvas{width:100%;height:100%;display:block}.top-btn{padding:.625rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;background:#fffffff2;color:#333;box-shadow:0 2px 8px #0000001a;backdrop-filter:blur(10px);min-height:44px;display:inline-flex;align-items:center;justify-content:center}.top-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.top-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.top-btn:active{transform:translateY(0)}#floating-controls-panel{position:fixed;top:0;inset-inline-end:0;width:400px;max-width:90vw;height:100%;background:var(--panel-bg);box-shadow:-8px 8px 32px #00000080;overflow-y:scroll;overflow-x:hidden;overflow-anchor:none;z-index:100;overscroll-behavior-y:contain;touch-action:pan-y;will-change:transform;padding:1rem 1.5rem 1.5rem;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}#floating-controls-panel.hidden{transform:translate(110%);pointer-events:none}[dir=rtl] #floating-controls-panel.hidden{transform:translate(-110%)}.control-section{background-color:gray;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;margin-bottom:1.5rem}.control-section:last-child{margin-bottom:0}.selected-color-section{background-color:gray;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;gap:0}.color-display-container{display:flex;border:none;border-radius:0;overflow:visible;background-color:transparent;align-items:flex-start;gap:8px}.selected-color-display-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.color-bar-hex-below{display:block;text-align:center;font-size:12px;font-family:monospace;color:#ddd;letter-spacing:.5px}.single-color-bar{width:100%;height:56px;border-radius:4px;box-shadow:none;border:none!important;cursor:pointer;padding:0;transition:transform .15s ease}.single-color-bar:active{transform:scale(.97)}.color-swatch-tooltip-wrap{position:relative}.color-swatch-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#1a1a1a;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:8px 12px;white-space:nowrap;z-index:200;pointer-events:none;flex-direction:column;gap:3px}.color-swatch-tooltip-wrap:hover .color-swatch-tooltip{display:flex}.tooltip-hex{font-family:monospace;font-size:11px;color:#aaa;font-weight:400}.tooltip-row{font-family:monospace;font-size:11px;color:#aaa}.tooltip-hint{font-size:10px;color:#ffffff59;margin-top:4px;text-align:center}.value-gauge{margin-top:35px}.value-gauge-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(to right,#000,#fff)}[dir=rtl] .value-gauge-track{background:linear-gradient(to left,#000,#fff)}.value-gauge-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:3px;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 4px #000000b3}.complementary-swatch-container{flex-shrink:0;width:56px;padding:0;border-inline-start:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}.complementary-swatch{width:100%;height:auto;aspect-ratio:1 / 1;border-radius:4px;cursor:pointer;border:1px solid rgba(255,255,255,.15);padding:0;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease}.complementary-swatch:hover{transform:scale(1.05)}.complementary-swatch:active{transform:scale(.95)}.add-to-palette-btn{width:100%;margin-bottom:16px}.color-description{font-size:15px;color:#f8fafc;font-style:normal;text-align:center;margin:32px 0 38px;line-height:1.4;height:2.8em;overflow:hidden}@media(max-width:600px){.color-description{font-size:18px}}.color-temp-gauge{margin-top:10px;margin-bottom:16px}.color-temp-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(to right,#5b8dd9,#888 50%,#e8883a)}[dir=rtl] .color-temp-track{background:linear-gradient(to left,#5b8dd9,#888 50%,#e8883a)}.color-temp-needle{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:3px;height:14px;background:#fff;border-radius:2px;box-shadow:0 0 4px #0009}.color-temp-labels{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px;color:#ccc}.styled-section{background-color:gray;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}.full-width-btn{width:100%;font-size:15px;font-weight:500;margin-bottom:10px}.palette-color-count-input{display:flex;justify-content:space-between;align-items:center;margin-top:12px;margin-bottom:20px;gap:12px}.palette-color-count-input label{font-size:13px;font-weight:600;color:#ddd;white-space:nowrap}.number-stepper{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.15);border-radius:8px;overflow:hidden;background:#222;box-shadow:0 2px 4px #0003}.stepper-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:none;color:#fff;font-size:22px;font-weight:300;cursor:pointer;transition:all .2s}.stepper-btn:hover{background-color:#ffffff26}.stepper-btn:active{background-color:#ffffff40;transform:scale(.95)}.stepper-input{width:46px;height:38px;text-align:center;border:none;border-inline-start:1px solid rgba(255,255,255,.15);border-inline-end:1px solid rgba(255,255,255,.15);background:transparent;color:#fff;font-size:16px;font-weight:600;outline:none;padding:0;margin:0;line-height:38px;vertical-align:middle;-moz-appearance:textfield;appearance:textfield}.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#palette-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;max-height:342px;overflow-y:auto;padding:8px;min-height:80px;scrollbar-width:thin;scrollbar-color:var(--md-primary) rgba(255,255,255,.1);-webkit-overflow-scrolling:touch;touch-action:pan-y}#palette-container.is-empty{border:2px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}.palette-empty-message{color:#fff9;font-size:14px;text-align:center;user-select:none;padding:0 12px}.palette-swatch{position:relative;aspect-ratio:1 / 1;border-radius:4px;cursor:grab;border:1px solid rgba(255,255,255,.15);padding:0;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease,outline-color .15s ease;box-shadow:none;outline:2px solid transparent;outline-offset:2px}.palette-swatch:hover:not(.dragging):not(.drag-over){transform:scale(1.05)}.palette-swatch:active:not(.dragging):not(.drag-over){transform:scale(.95)}.palette-swatch:focus{outline:none}.palette-swatch:focus-visible{outline-color:var(--md-primary)}.palette-swatch.dragging{opacity:.4;transform:scale(.95);cursor:grabbing}.palette-swatch.drag-over{transform:scale(.9);opacity:.4;box-shadow:0 0 0 2px var(--md-primary)}.delete-swatch{position:absolute;top:-8px;inset-inline-end:-8px;width:22px;height:22px;background-color:#d32f2f;color:#fff;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 4px #0000004d;border:2px solid white;transform:scale(.8);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;cursor:pointer}.palette-swatch:hover .delete-swatch,.palette-swatch:focus-within .delete-swatch{opacity:1;transform:scale(1);pointer-events:auto}#palette-container:has(.palette-swatch.dragging) .delete-swatch{display:none}.palette-file-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.palette-file-actions .panel-btn{flex:1 1 auto;min-width:70px}.palette-needed-pigments{margin-top:16px;padding-top:0}.calculate-pigments-btn{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:20px}.palette-needed-pigments h4{margin:0 0 10px;font-size:13px;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.palette-needed-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:14px;color:#ddd}.palette-needed-buy{margin-left:auto;font-size:16px;text-decoration:none;opacity:.7;transition:opacity .15s}.palette-needed-buy:hover{opacity:1}.palette-needed-chip{width:18px;height:18px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}.dropdown-container{position:relative;display:inline-block}.manage-btn{display:flex;align-items:center;gap:6px}.dropdown-icon{transition:transform .2s ease}.dropdown-menu.open+.manage-btn .dropdown-icon{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;background-color:#505050;border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 4px 12px #0000004d;min-width:180px;z-index:1000;display:none;flex-direction:column;overflow:hidden}.dropdown-menu.open{display:flex}.dropdown-item{padding:10px 16px;background:transparent;border:none;color:#e0e0e0;text-align:start;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s ease}.dropdown-item:hover:not(:disabled){background-color:#ffffff1a}.dropdown-item:disabled{color:#888;cursor:not-allowed;opacity:.5}.dropdown-item.danger{color:#f44336}.dropdown-item.danger:hover:not(:disabled){background-color:#f443361a}.dropdown-divider{height:1px;background-color:#ffffff1a;margin:4px 0}.panel-toggle-button{position:fixed;width:32px;height:80px;top:50%;transform:translateY(-50%);z-index:101;cursor:pointer;background-color:var(--panel-bg);border:none!important;box-shadow:-8px 8px 32px #00000080!important;clip-path:inset(-40px 0 -40px -40px);border-start-start-radius:12px;border-end-start-radius:12px;transition:inset-inline-end .3s cubic-bezier(.4,0,.2,1),background-color .2s,transform .2s ease;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;inset-inline-end:calc(400px + env(safe-area-inset-right,0px));outline:none!important;outline-offset:0!important;-webkit-appearance:none;-moz-appearance:none;appearance:none}.panel-toggle-button:focus{outline:none}.panel-toggle-button:focus-visible{outline:none}.panel-toggle-button:hover{transform:translateY(-50%) scale(1.05);outline:none!important;border:none!important}.panel-toggle-button:before{display:none}.panel-toggle-button:after{content:"...";display:block;color:#ffffffb3;font-size:24px;font-weight:700;line-height:0;letter-spacing:-2px;transform:rotate(90deg)}.panel-toggle-button:active{background-color:#555}#floating-controls-panel.hidden+.panel-toggle-button{inset-inline-end:env(safe-area-inset-right,0px)}.control-section>h3,.mix-header-row h3{font-size:15px;font-weight:400;margin:0 0 1rem;color:#fff!important;text-transform:uppercase;letter-spacing:.08em}.panel-content::-webkit-scrollbar{width:8px}.panel-content::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.panel-content::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}.panel-content::-webkit-scrollbar-thumb:hover{background:#0000004d}.control-button,.primary-action-button,.action-btn,button:not(.top-bar-specific-toggle):not(.panel-toggle-button):not(.filter-reset-btn):not(.reset-all-btn):not(.chip-remove):not(.stepper-btn):not(.dropdown-item):not(.add-pigment-btn):not(.pigment-select-btn):not(.modal-close-btn):not(.match-strategy-btn):not(.palette-swatch):not(.load-image-btn){font-family:inherit;padding:6px 10px;font-size:11px;font-weight:500;background:#222;color:#ccc;border:1px solid rgba(255,255,255,.15);border-radius:4px;cursor:pointer;transition:all .2s;display:inline-flex;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:.5px;min-height:30px}.control-button:hover,.primary-action-button:hover,.action-btn:hover,button:not(.top-bar-specific-toggle):not(.panel-toggle-button):not(.filter-reset-btn):not(.reset-all-btn):not(.chip-remove):not(.stepper-btn):not(.dropdown-item):not(.add-pigment-btn):not(.pigment-select-btn):not(.modal-close-btn):not(.match-strategy-btn):not(.palette-swatch):hover{background:#333;color:#fff;border-color:#ffffff4d}.control-button:active,.primary-action-button:active,.action-btn:active,button:not(.top-bar-specific-toggle):not(.panel-toggle-button):not(.filter-reset-btn):not(.reset-all-btn):not(.chip-remove):not(.stepper-btn):not(.dropdown-item):not(.add-pigment-btn):not(.pigment-select-btn):not(.modal-close-btn):not(.match-strategy-btn):not(.palette-swatch):active{transform:scale(.98)}.control-button:disabled,.primary-action-button:disabled,.action-btn:disabled,button:disabled:not(.top-bar-specific-toggle):not(.panel-toggle-button):not(.filter-reset-btn):not(.reset-all-btn):not(.chip-remove):not(.stepper-btn):not(.dropdown-item):not(.add-pigment-btn):not(.pigment-select-btn):not(.modal-close-btn):not(.match-strategy-btn):not(.palette-swatch){background:#1a1a1a;color:#777;cursor:not-allowed;opacity:.7;border-color:#222}.full-width-action-button{width:100%;margin-bottom:8px;font-weight:500;transition:background .2s}.action-btn:hover{background:#1565c0}.action-btn:disabled{background:#ccc;cursor:not-allowed}input[type=file]{display:none}.file-upload-btn{padding:8px 16px;background:var(--md-primary);color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s;display:inline-block}.file-upload-btn:hover{background:#1565c0}#drag-drop-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#fffffff2;backdrop-filter:blur(10px);z-index:200;display:flex;justify-content:center;align-items:center;opacity:1;pointer-events:all;transition:opacity .3s ease-in-out}#drag-drop-overlay.has-image{opacity:0;pointer-events:none}.drag-drop-initial-state{display:flex;flex-direction:column;align-items:center;padding:60px 40px;border:3px dashed var(--md-outline-variant);border-radius:24px;gap:24px;text-align:center;max-width:500px}.drag-drop-icon{width:64px;height:64px;color:var(--md-outline)}#overlay-open-file-btn{font-size:16px;border-radius:8px;padding:16px 40px}.generated-palette{background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 8px #00000014;margin-top:16px}.generated-palette h3{margin:0 0 12px;font-size:15px;font-weight:400;color:#333;text-transform:uppercase;letter-spacing:.08em}.palette-actions{display:flex;flex-direction:column;gap:12px}.palette-generate-group{display:flex;flex-direction:column;gap:8px}.palette-generate-group label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}.max-colors-input{width:60px;padding:4px 8px;border:1px solid var(--md-outline-variant);border-radius:4px;font-size:14px}.palette-io-group{display:flex;gap:8px}.panel-btn{padding:8px 12px;background:#222;color:#ccc;border:1px solid rgba(255,255,255,.15);border-radius:6px;cursor:pointer;font-size:11px;font-weight:500;transition:all .2s;flex:1;text-transform:uppercase;letter-spacing:.5px;display:inline-flex;align-items:center;justify-content:center;min-height:34px}.panel-btn:hover:not(:disabled){background:#333;color:#fff;border-color:#ffffff4d}.panel-btn:active:not(:disabled){transform:scale(.98)}.panel-btn:disabled{background:#1a1a1a;color:#777;cursor:not-allowed;opacity:.7;border-color:#222}.panel-btn.primary{background:#1976d2!important;color:#fff!important;border-color:#1976d2!important;font-weight:600!important;padding:16px 10px!important}.panel-btn.primary:hover:not(:disabled){background:#1565c0!important;box-shadow:0 0 15px #1976d266!important}.panel-btn.danger{color:#f44336;border-color:#f4433666}.panel-btn.danger:hover:not(:disabled){background:#333;color:#fff;border-color:#f44336}.palette-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}.palette-color-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px;border-radius:6px;transition:background .2s}.palette-color-item:hover{background:#f0f0f0}.palette-color-swatch{width:50px;height:50px;border-radius:6px;border:none!important;box-shadow:0 2px 4px #0000001a}.palette-color-percentage{font-size:11px;color:#666;font-weight:500}#split-view-dragger{display:none;position:absolute;width:100%;height:20px;background:transparent;cursor:ns-resize;z-index:110;touch-action:none}#split-view-dragger:after{content:"";position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:90px;height:7px;background-color:#ffffffb3;border:1px solid rgba(0,0,0,.1);border-radius:4px;box-shadow:0 1px 2px #00000026}@media(max-width:600px)and (orientation:portrait){.app-container{display:flex;flex-direction:column;height:100dvh}#image-view-area{position:relative;flex-shrink:0;width:100%;height:var(--mobile-image-pane-height);padding-top:var(--top-banner-height);overflow:hidden;touch-action:manipulation;box-sizing:border-box}#floating-controls-panel{position:relative!important;flex-shrink:0;width:100%!important;max-width:100%!important;height:var(--mobile-controls-pane-height)!important;top:auto!important;inset-inline-end:auto!important;transform:none!important;border-radius:0;box-shadow:0 -2px 10px #00000026;overflow-y:auto!important;overflow-x:hidden!important;padding:.5rem 1rem 1rem!important}#floating-controls-panel.hidden{display:flex!important;transform:none!important;pointer-events:auto!important}#split-view-dragger{display:block;position:absolute;top:calc(var(--mobile-image-pane-height) - 10px);inset-inline-start:0;inset-inline-end:0;z-index:150;pointer-events:auto}#controls-toggle-btn,.panel-toggle-button{display:none!important}}@media(max-width:1200px)and (orientation:landscape){#floating-controls-panel{width:320px!important;max-width:320px!important}.panel-toggle-button{inset-inline-end:320px!important}#floating-controls-panel.hidden+.panel-toggle-button{inset-inline-end:env(safe-area-inset-right,0px)!important}#controls-toggle-btn{inset-inline-end:100%;width:40px;height:60px;border-radius:8px 0 0 8px}[dir=rtl] #controls-toggle-btn{border-radius:0 8px 8px 0}#controls-toggle-btn.panel-hidden{inset-inline-end:env(safe-area-inset-right,0px)}.top-bar-button{width:40px;height:40px}.ad-free-banner{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}}@media(min-width:601px)and (orientation:portrait){#image-view-area.panel-open{padding-inline-end:320px}#floating-controls-panel{width:320px!important;max-width:320px!important}.panel-toggle-button{inset-inline-end:320px!important}#floating-controls-panel.hidden+.panel-toggle-button{inset-inline-end:env(safe-area-inset-right,0px)!important}#controls-toggle-btn{display:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.js-hidden{display:none!important}.ad-free-banner{position:fixed;bottom:calc(150px + env(safe-area-inset-bottom,0px));inset-inline-start:env(safe-area-inset-left,0px);inset-inline-end:env(safe-area-inset-right,0px);width:auto;z-index:999;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#2d2d2d;color:#fff;font-family:inherit;font-size:16px;transition:transform .3s ease-in-out}.ad-free-banner.hidden{display:none!important}.ad-free-banner>div{display:flex;align-items:center;gap:12px}.purchase-btn{background:#fff;color:#667eea;border:none;padding:8px 16px;border-radius:20px;font-weight:600;cursor:pointer;font-size:14px;transition:transform .1s ease}.purchase-btn:active{transform:scale(.95)}.banner-dismiss{background:none;border:none;color:#a0a0a0;font-size:24px;cursor:pointer;padding:0 8px;line-height:1;transition:color .2s}.banner-dismiss:hover{color:#fff}@media(orientation:landscape){.ad-free-banner{bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}}@media(min-width:601px)and (orientation:portrait){.ad-free-banner{bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}}@media(orientation:portrait)and (max-width:900px){.ad-free-banner{bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}}.tap-prompt-toast{position:fixed;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);background:#000000e6;color:#fff;padding:16px 24px;border-radius:12px;display:flex;align-items:center;gap:12px;font-size:16px;box-shadow:0 4px 16px #0000004d;z-index:10000;animation:fadeInScale .3s ease-out;pointer-events:auto;white-space:nowrap;min-width:fit-content}@keyframes fadeInScale{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tap-prompt-toast span{flex:1}.tap-prompt-toast [dir=rtl] & span{text-align:right}.tap-prompt-dismiss{background:transparent;border:none;color:#ffffffb3;font-size:24px;cursor:pointer;padding:0 4px;line-height:1;transition:color .2s}.tap-prompt-dismiss:hover{color:#fff}@media(max-width:600px){.tap-prompt-toast{max-width:95%;font-size:14px;padding:18px 28px}}