/* Scoped color-and-pattern drawer. All controls leave the shoe visible above. */
.sheet.color-studio-sheet{padding:10px 12px 12px;gap:7px;background:rgba(5,23,30,.94);border-color:rgba(115,242,234,.36);max-height:min(53%,calc(100% - 285px - var(--safe-t)))}
.color-studio{display:flex;flex-direction:column;gap:11px;min-width:0;--cs-c0:#ff8979;--cs-c1:#eee6d1;--cs-c2:#76dce4}
.cs-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cs-header h3{font-size:17px;line-height:1.2;margin:0;white-space:nowrap;letter-spacing:.4px}
.cs-quality{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;padding:8px 10px;border-radius:10px;background:#16383d;color:#e9ffff;font-size:13px;line-height:1.4}
.cs-quality p{margin:0;min-width:0}.cs-quality small{grid-column:1/-1;color:#bbd9d7;font-size:11px}
.cs-quality-action{grid-column:2;grid-row:1;min-height:44px;padding:0 10px;border:1px solid #91dcd9;border-radius:8px;background:#174a4e;color:#f0ffff;font:inherit;cursor:pointer}
.cs-actions{display:flex;align-items:center;gap:6px}
.cs-primary{display:flex;flex-direction:column;gap:8px;padding:10px 10px 9px;border:1px solid rgba(156,250,255,.18);border-radius:14px;background:linear-gradient(145deg,rgba(14,45,55,.62),rgba(5,21,28,.48));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.cs-primary-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--ink-2);font-size:12px;letter-spacing:.3px}
.cs-primary-label small{color:var(--muted);font-size:10px;letter-spacing:0}
.cs-primary .cs-palette{padding:2px 3px 4px}
.cs-advanced-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:0 10px;border:1px solid rgba(156,250,255,.2);border-radius:10px;background:rgba(6,23,30,.46);color:var(--ink-2);font:inherit;font-size:12px;letter-spacing:.2px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.cs-advanced-toggle:hover,.cs-advanced-toggle.is-open{border-color:rgba(156,250,255,.62);background:rgba(20,68,78,.56);color:var(--ink)}
.cs-advanced-chevron{font-size:16px;line-height:1;transform:translateY(-1px);transition:transform .25s ease}
.cs-advanced-toggle.is-open .cs-advanced-chevron{transform:rotate(180deg) translateY(1px)}
.cs-advanced{display:flex;flex-direction:column;gap:10px;max-height:520px;opacity:1;overflow:auto;transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease}
.cs-advanced.is-collapsed{max-height:0;opacity:0;overflow:hidden;pointer-events:none;margin-top:-5px}
.cs-advanced-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--ink-2);font-size:12px;letter-spacing:.35px}
.cs-advanced-title small{color:var(--muted);font-size:10px;letter-spacing:0}
.cs-icon,.cs-random{height:33px;border:1px solid rgba(156,250,255,.23);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(14,42,52,.6)}
.cs-icon{width:33px;flex:none}.cs-icon .ico{font-size:15px}.cs-icon:disabled{opacity:.28}
.cs-random{gap:6px;padding:0 11px;background:linear-gradient(120deg,rgba(49,148,160,.85),rgba(12,65,83,.95));border-color:rgba(156,250,255,.7);box-shadow:inset 0 0 8px rgba(156,250,255,.16);font-size:13px;font-weight:600}
.cs-dice{width:20px;height:20px;display:inline-flex}.cs-dice svg{width:100%;height:100%}
.cs-close{width:27px;height:27px;border-radius:50%;background:none;border-color:rgba(156,250,255,.14)}
.cs-preview{width:auto;gap:4px;padding:0 8px;font-size:11px;white-space:nowrap}
.cs-preview-return{display:none;align-items:center;justify-content:center;min-width:164px;min-height:48px;padding:0 24px;border:1px solid rgba(115,242,234,.5);border-radius:999px;background:rgba(5,23,30,.94);box-shadow:0 8px 24px rgba(0,0,0,.3);color:var(--ink);font:inherit;cursor:pointer}
.cs-preview-return span{font-size:14px;font-weight:600;color:var(--cyan-3)}
.sheet.color-studio-sheet.is-preview{left:16px;right:16px;width:max-content;max-width:calc(100% - 32px);max-height:none;margin-inline:auto;padding:0;gap:0;overflow:visible;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.color-studio-sheet.is-preview>.handle,.color-studio-sheet.is-preview>.color-studio{display:none}
.color-studio-sheet.is-preview>.cs-preview-return{display:flex}
.cs-preview-return:focus-visible{outline:2px solid var(--cyan-3);outline-offset:3px}
.color-resume{margin-top:8px}
.color-screen.peeking .color-bottom,.color-screen.color-previewing .color-bottom{visibility:hidden;pointer-events:none}
.cs-patterns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cs-pattern{display:grid;place-items:center;aspect-ratio:1.1;min-width:0;border-radius:12px;border:1px solid rgba(156,250,255,.25);background:rgba(6,22,30,.5);padding:7px}
.cs-pattern[aria-pressed=true]{border-color:#9cfaff;box-shadow:0 0 0 1px rgba(156,250,255,.6),0 0 12px rgba(34,211,217,.16)}
.cs-pattern-orb{display:block;width:100%;height:100%;max-width:44px;aspect-ratio:1;border-radius:50%;box-shadow:inset -5px -8px 12px rgba(0,0,0,.32),inset 3px 3px 6px rgba(255,255,255,.4)}
.cs-pattern-solid{background:var(--cs-c0)}
.cs-pattern-gradient{background:linear-gradient(130deg,var(--cs-c0),var(--cs-c1) 50%,var(--cs-c2))}
.cs-pattern-stripes{background:repeating-linear-gradient(135deg,var(--cs-c0) 0 8px,var(--cs-c2) 8px 16px)}
.cs-pattern-split{background:linear-gradient(90deg,var(--cs-c0) 50%,var(--cs-c2) 50%)}
.cs-pattern-speckle{background:radial-gradient(circle at 20% 30%,var(--cs-c2) 0 2px,transparent 2.5px),radial-gradient(circle at 70% 75%,var(--cs-c2) 0 2px,transparent 2.5px),radial-gradient(circle at 60% 20%,var(--cs-c1) 0 2px,transparent 2.5px),var(--cs-c0);background-size:13px 17px,19px 13px,11px 19px,auto}
.cs-palette{display:flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:1px 3px}
.cs-color-chip{width:42px;height:42px;position:relative;flex:0 0 42px;border-radius:50%;background:var(--cs-chip);box-shadow:0 0 0 1px rgba(156,250,255,.28),0 0 0 4px rgba(156,250,255,.04)}
.cs-color-chip input[type=color]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.cs-color-chip input[type=color]::-webkit-color-swatch-wrapper{padding:0}.cs-color-chip input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.cs-color-chip input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.cs-remove{position:absolute;right:-9px;top:-10px;width:28px;height:28px;border-radius:50%;background:#17303a;border:1px solid rgba(156,250,255,.4);font-size:15px;line-height:16px;display:grid;place-items:center;color:var(--ink-2)}
.cs-add{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(156,250,255,.4);border-radius:50%;font-size:29px;font-weight:200;line-height:1;color:var(--ink-2)}
.cs-gradient{position:relative;height:34px;margin:0 1px}
.cs-gradient-track{position:absolute;height:18px;top:8px;left:12px;right:12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cs-stop{position:absolute;inset:0;margin:0;width:100%;height:34px;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;outline:none}
.cs-stop::-webkit-slider-runnable-track{height:34px;background:transparent}.cs-stop::-moz-range-track{height:34px;background:transparent}
.cs-stop::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin-top:4px;background:var(--cs-stop);border:3px solid #f4ffff;border-radius:50%;box-shadow:0 1px 7px rgba(0,0,0,.5);pointer-events:auto;cursor:ew-resize}
.cs-stop::-moz-range-thumb{width:22px;height:22px;background:var(--cs-stop);border:3px solid #f4ffff;border-radius:50%;box-shadow:0 1px 7px rgba(0,0,0,.5);pointer-events:auto;cursor:ew-resize}
.cs-stop:focus-visible::-webkit-slider-thumb{outline:2px solid var(--cyan);outline-offset:3px}.cs-stop:focus-visible::-moz-range-thumb{outline:2px solid var(--cyan);outline-offset:3px}
.cs-sliders{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:1px 0}
.cs-sliders label{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;color:var(--ink-2)}
.cs-sliders label+label{position:relative}.cs-sliders label+label:before{content:"";position:absolute;left:-9px;height:23px;width:1px;background:rgba(156,250,255,.2)}
.cs-sliders span{flex:none}.cs-sliders input{width:100%;min-width:0;height:22px;margin:0;accent-color:#86e9ee;cursor:pointer}
.cs-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-top:1px solid rgba(156,250,255,.2);padding-top:10px}
.cs-material{display:flex;align-items:center;gap:6px;min-width:0;padding:0 7px;border:1px solid rgba(156,250,255,.28);border-radius:11px;background:rgba(5,20,28,.45)}
.cs-material>.ico{color:var(--muted);font-size:17px;flex:none}.cs-material select{width:100%;height:43px;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:11px;text-overflow:ellipsis;cursor:pointer}.cs-material option{background:#102833;color:var(--ink)}
.cs-apply{height:45px;border:1px solid rgba(156,250,255,.8);border-radius:12px;background:linear-gradient(115deg,rgba(61,163,173,.9),rgba(10,66,85,.95));box-shadow:inset 0 0 8px rgba(156,250,255,.2);font-weight:600;font-size:14px;letter-spacing:.8px}
.color-studio button:focus-visible,.color-studio select:focus-visible,.color-studio input[type=color]:focus-visible{outline:2px solid var(--cyan-3);outline-offset:3px}
@media(max-width:700px){.cs-close,.cs-icon:not(.cs-preview){width:44px;height:44px;min-width:44px}.cs-preview,.cs-random{height:44px;min-width:44px;white-space:nowrap}.cs-add{width:44px;height:44px;flex-basis:44px}.cs-advanced-toggle{min-height:44px}.cs-remove{width:32px;height:32px}.cs-remove::before{content:"";position:absolute;inset:-8px}}
@media(max-width:360px){.color-studio{gap:9px}.cs-header h3{font-size:15px}.cs-actions{gap:4px}.cs-random{padding:0 8px}.cs-palette{gap:9px}.cs-color-chip{width:38px;height:38px;flex-basis:38px}.cs-patterns{gap:6px}.cs-material>.ico{display:none}}
@media(max-height:650px){.sheet.color-studio-sheet{max-height:58%;padding-top:8px}.color-studio{gap:7px}.cs-pattern{aspect-ratio:1.35}.cs-palette{min-height:36px}.cs-color-chip{width:36px;height:36px;flex-basis:36px}.cs-add{width:34px;height:34px;flex-basis:34px}.cs-footer{padding-top:7px}.cs-material select,.cs-apply{height:40px}}