/* Nonmodal additions share the studio's translucent panels and safe insets. */
.look-library-sheet{position:fixed;inset:0;z-index:58;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.look-library-sheet[hidden],.look-library-sheet [hidden],.random-palette-control [hidden]{display:none!important}
.look-library-panel{width:100%;height:calc(var(--app-height,100dvh) * .62);max-height:calc(var(--studio-visible-height,var(--app-height,100dvh)) - var(--safe-top) - 78px);min-height:0;display:flex;flex-direction:column;gap:12px;padding:15px max(15px,var(--safe-right)) calc(15px + var(--safe-bottom)) max(15px,var(--safe-left));pointer-events:auto;overflow:hidden;border:1px solid #8295ad45;border-bottom:0;border-radius:24px 24px 0 0;background:linear-gradient(145deg,#25304aae,#1b2238bf);box-shadow:0 -10px 40px #0003;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.look-library-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}
.look-library-head strong{font-size:15px;font-weight:650;color:#e1edf6}
.look-library-close{display:grid;place-items:center;width:34px;height:34px;padding:5px;background:#25334ab0;border-color:#8ba5bf32;border-radius:10px;color:#c5d8e8}
.look-library-save{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;flex:none}
.look-name-label{min-width:0;gap:5px;color:#a9bed2;font-size:10px}
.look-name-input{min-width:0;width:100%;height:42px;margin:0;padding:9px 11px;background:#17243b99;color:#edf6ff;border:1px solid #8ba5bf3d;border-radius:11px;font-size:16px;line-height:1.3}
.look-name-input::placeholder{color:#8ca8c0}
.look-save-button{height:42px;min-width:0;padding:8px 12px;border:1px solid #68bfff5c;border-radius:11px;background:linear-gradient(115deg,#268fffc7,#14a1c3c7);color:#eef8ff;font-size:11px;font-weight:650}
.look-library-feedback{flex:none;margin:0;font-size:11px;line-height:1.4;color:#a9c4db}
.look-library-feedback[data-state=error]{color:#ecc399}
.look-library-retry{align-self:flex-start;flex:none;padding:7px 10px;background:#1b284070;border-color:#8ba5bf32;color:#bce8ff;font-size:11px}
.look-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;scrollbar-color:#557da470 transparent;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:2px 2px 18px}
.look-card{position:relative;min-width:0;border:1px solid #93a9bd29;border-radius:14px;background:#1d2a4380;box-shadow:inset 0 1px 0 #ffffff03}
.look-card-apply{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0;min-height:137px;padding:9px 8px 10px;border:1px solid transparent;border-radius:13px;background:transparent;color:#d8e5f0;text-align:center}
.look-card-apply:hover{background:#21456750;border-color:#419ce350}
.look-card-thumbnail{display:block;width:100%;height:94px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 5px #0003)}
.look-card-name{width:100%;min-width:0;padding:0 15px;font-size:11px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look-card-more{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:30px;height:30px;padding:4px;border:1px solid #8ba5bf29;border-radius:9px;background:#1a294aaa;color:#bad9f0;font-size:13px;letter-spacing:.08em}
.look-card-more[aria-expanded=true]{background:#22547be8;border-color:#2d95ff70}
.look-card-menu{position:absolute;top:40px;right:6px;z-index:2;display:flex;flex-direction:column;gap:3px;min-width:130px;padding:5px;background:#212b42f2;border:1px solid #6792b466;border-radius:11px;box-shadow:0 9px 24px #0005;backdrop-filter:blur(12px)}
.look-card-action{min-height:32px;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#c9e0f2;font-size:11px;text-align:left}
.look-card-action[data-look-action=remove]{color:#efb3b3}
.look-card-action:hover{background:#21456780;border-color:#419ce336}
.look-card-rename{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 7px 7px}
.look-card-rename .look-name-input{grid-column:1/-1;height:38px;padding:7px 8px}
.look-card-rename .look-card-action{text-align:center;background:#17243b99;border-color:#8ba5bf3d}
.look-library-panel button:disabled,.look-library-panel input:disabled{opacity:.45;cursor:not-allowed}
.look-library-panel button:focus-visible,.look-library-panel input:focus-visible,.random-palette-control button:focus-visible{outline:2px solid #70c6ff;outline-offset:2px}
body.studio-mode .studio-build-row{grid-template-columns:minmax(126px,.9fr) minmax(0,1.5fr)}
.random-palette-control{position:relative;display:flex;align-items:stretch;width:100%;min-width:0;height:42px;border:1px solid #2d7dba69;border-radius:12px;background:#17395884}
body.studio-mode #randomDockSlot .random-palette-control #outfitRandom{flex:1;width:auto;min-width:0;height:100%;min-height:0;border:0;background:transparent;border-radius:11px 0 0 11px;padding:5px 7px;gap:6px}
body.studio-mode #randomDockSlot #outfitRandom .random-action-label{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:1px;line-height:1.15}
body.studio-mode #randomDockSlot #outfitRandom .random-action-name{font-size:12px}
body.studio-mode #randomDockSlot #outfitRandom .random-action-color{max-width:100%;font-size:9px;font-weight:550;line-height:1.15;color:#d8eeff;white-space:nowrap}
body.studio-mode #randomDockSlot #outfitRandom:not([data-palette=any]) svg{width:16px;height:16px}
body.studio-mode #randomDockSlot .random-palette-control #outfitRandom:hover{background:#214c7255}
body.studio-mode #randomDockSlot .random-palette-control button:active{transform:none}
.random-palette-toggle{display:flex;align-items:center;justify-content:center;gap:3px;flex:none;width:34px;min-height:0;margin:0;padding:6px 4px;border:0;border-left:1px solid #6bb8eb24;border-radius:0 11px 11px 0;background:transparent;color:#b9e2ff}
.palette-current-dot{display:block;flex:none;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px #d8edff45}
.palette-chevron{width:13px;height:13px;display:flex}.palette-chevron svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.random-palette-toggle[aria-expanded=true]{background:#22547b55}
.random-palette-popover{position:absolute;left:0;bottom:calc(100% + 10px);z-index:59;width:270px;max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 28px);padding:12px;border:1px solid #6792b466;border-radius:17px;background:linear-gradient(145deg,#25304adf,#1b2238e8);box-shadow:0 -8px 35px #0004;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto}
.random-palette-popover>strong{display:block;margin:0 0 9px;color:#d9ecfc;font-size:12px;font-weight:650}
.random-palette-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.random-palette-swatch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:57px;padding:7px 2px;border:1px solid transparent;border-radius:11px;background:#15243b70;color:#b8cedf}
.random-palette-swatch[aria-checked=true]{border-color:#70b9e67a;background:#22547b99;color:#e4f4ff}
.palette-dot{display:block;width:23px;height:23px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff38,0 2px 4px #0003}
.palette-caption{font-size:9px;line-height:1.15;white-space:nowrap}
[data-palette=any] .palette-dot,.palette-current-dot[data-palette=any]{background:conic-gradient(#ed7079,#b381ee,#67b9fa,#72d3aa,#ed7079)}
[data-palette=red] .palette-dot,.palette-current-dot[data-palette=red]{background:#e9787e}
[data-palette=blue] .palette-dot,.palette-current-dot[data-palette=blue]{background:#6baef5}
[data-palette=green] .palette-dot,.palette-current-dot[data-palette=green]{background:#76cda0}
[data-palette=purple] .palette-dot,.palette-current-dot[data-palette=purple]{background:#b285e9}
[data-palette=orange] .palette-dot,.palette-current-dot[data-palette=orange]{background:#efa15c}
[data-palette=pink] .palette-dot,.palette-current-dot[data-palette=pink]{background:#e28cbf}
[data-palette=light] .palette-dot,.palette-current-dot[data-palette=light]{background:#e6edf4}
[data-palette=dark] .palette-dot,.palette-current-dot[data-palette=dark]{background:#38425a}
@media(min-width:821px){.random-palette-control{height:44px}body.studio-mode .studio-build-row{grid-template-columns:1fr 1.8fr}.look-library-sheet{align-items:center;justify-content:flex-end;padding:calc(78px + var(--safe-top)) 22px calc(22px + var(--safe-bottom))}.look-library-panel{width:360px;height: min(640px,calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 120px));max-height:100%;padding:16px;border-bottom:1px solid #8295ad45;border-radius:24px}}
@media(max-height:470px) and (orientation:landscape){.look-library-sheet{justify-content:flex-end;align-items:flex-end;padding:calc(56px + var(--safe-top)) 8px calc(8px + var(--safe-bottom))}.look-library-panel{width:340px;height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 72px);max-height:100%;padding:10px;border-bottom:1px solid #8295ad45;border-radius:20px;gap:7px}.look-name-label>span{display:none}.look-card-thumbnail{height:66px}.look-card-apply{min-height:105px}.random-palette-popover{left:auto;right:0}}
@media(max-width:380px){.look-save-button{padding:8px;font-size:10px}.look-library-save{gap:6px}.palette-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.look-library-panel button,.random-palette-control button{transition:none}}
@media(max-width:820px) and (max-height:680px){.random-palette-control{height:40px}}
@media(max-width:360px){.random-palette-control{height:44px}body.studio-mode #randomDockSlot .random-palette-control #outfitRandom{padding-left:5px;padding-right:5px;gap:4px}body.studio-mode #randomDockSlot #outfitRandom .random-action-name{font-size:11px}body.studio-mode #randomDockSlot #outfitRandom .random-action-color{font-size:8px}}