/* The shared profile edit owns Save/Discard. This panel stays compact and inline. */
.profile-style-editor{--pse-line:rgba(126,183,218,.34);--pse-ink:#e8f4ff;--pse-muted:#a7c3d7;color:var(--pse-ink);width:100%;max-width:390px;margin-inline:auto;padding:3px 6px 11px;background:linear-gradient(162deg,rgba(10,43,71,.55),rgba(5,25,43,.38));border:1px solid var(--pse-line);border-radius:14px;box-sizing:border-box;overflow:hidden}
.pse-splash{height:116px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pse-splash canvas{width:min(100%,330px);height:auto;display:block}
.pse-splash-name{position:absolute;max-width:52%;top:50%;left:50%;transform:translate(-50%,-30%);text-align:center;color:white;font:700 clamp(13px,4vw,18px) Georgia,serif;text-shadow:0 1px 3px #06213b,0 0 8px #06213b;pointer-events:none}
.pse-color-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px;font-weight:650;font-size:13px}
.pse-picked-name{font-size:13px;color:#b4dff4;font-weight:500;text-align:right}
.pse-picker{display:grid;grid-template-columns:126px minmax(0,1fr);align-items:center;gap:13px;min-height:130px;padding:3px 4px 5px}
.pse-wheel{position:relative;display:block;width:126px;height:126px;border-radius:50%;border:2px solid #d7e8f5;box-shadow:0 0 0 1px #376a8e,inset 0 0 0 2px rgba(3,23,42,.42),0 4px 10px rgba(0,0,0,.22);box-sizing:border-box;background:radial-gradient(circle at center,#fff 0,transparent 72%),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}
.pse-wheel:focus-visible,.pse-material:focus-visible,.pse-range input:focus-visible,.pse-brightness input:focus-visible{outline:2px solid #f6cd7d;outline-offset:2px}
.pse-wheel-point{position:absolute;width:14px;height:14px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 2px #173e62,0 0 6px rgba(5,31,51,.65);transform:translate(-50%,-50%);pointer-events:none}
.pse-brightness{display:flex;flex-direction:column;gap:8px;color:var(--pse-muted);font-size:12px;min-width:0}
.pse-brightness input,.pse-range input{width:100%;height:30px;accent-color:#72c6ed;touch-action:pan-x;margin:0}
.pse-brightness-ends{display:flex;justify-content:space-between;color:var(--pse-muted);font-size:11px;margin-top:-7px}
.pse-label{font-size:13px;font-weight:650;margin:3px 2px 2px}
.pse-ribbon{position:relative;min-width:0}
.pse-ribbon::before,.pse-ribbon::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:21px;pointer-events:none;opacity:0;transition:opacity .16s}
.pse-ribbon::before{left:0;background:linear-gradient(90deg,rgba(100,189,231,.33),transparent)}
.pse-ribbon::after{right:0;background:linear-gradient(270deg,rgba(100,189,231,.33),transparent)}
.pse-ribbon[data-more-left="true"]::before,.pse-ribbon[data-more-right="true"]::after{opacity:1}
.pse-track{display:flex;gap:5px;width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:3px 2px 5px;box-sizing:border-box}
.pse-track::-webkit-scrollbar{display:none}
.pse-material{flex:0 0 62px;min-width:62px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:80px;padding:0;border:0;background:none;color:var(--pse-ink);font-size:12px;font-weight:600;cursor:pointer;scroll-snap-align:start}
.pse-material canvas{display:block;width:57px;height:57px;border-radius:50%;border:2px solid rgba(212,233,245,.65);background:radial-gradient(circle at 35% 25%,#c8d2d7,#7894a8 54%,#27405c);box-shadow:inset 0 1px 3px #e8f6ff66,0 2px 4px #061d33;box-sizing:border-box}
.pse-material[aria-pressed="true"] canvas{border-color:#f7fafc;box-shadow:0 0 0 2px #3c9fd1,0 0 11px rgba(91,194,241,.68)}
.pse-material span{max-width:100%;white-space:nowrap;text-align:center;line-height:1.2}
.pse-material.pse-hide-label span{visibility:hidden}
.pse-ribbon[data-pse-ribbon="finish"] .pse-material{flex-basis:calc((100% - 15px)/4);min-width:0}
.pse-adjust{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px;padding:0 4px;min-height:35px;font-size:12px;color:var(--pse-muted)}
.pse-range{position:relative;min-width:0;padding-top:12px}
.pse-range output{position:absolute;top:-1px;left:clamp(14px,var(--pse-percent,50%),calc(100% - 14px));transform:translateX(-50%);color:#cceaf8;font-size:10px;line-height:1;pointer-events:none}
.pse-range input{display:block;height:18px}
.profile-style-view{position:relative;width:100%;height:122px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.profile-style-view svg{width:min(100%,340px);height:auto;display:block}
.profile-style-view canvas{position:absolute;width:min(100%,340px);height:auto;display:block}
.profile-style-view canvas[hidden],.profile-style-view svg[hidden]{display:none}
.profile-style-view span{position:absolute;max-width:55%;left:50%;top:49%;transform:translate(-50%,-30%);text-align:center;font:700 clamp(14px,4vw,19px) Georgia,serif;text-shadow:0 1px 3px #05213a,0 0 7px #05213a}
.pse-no-art .pse-splash{background:radial-gradient(ellipse at center,var(--favorite-color,#377bc4),transparent 70%)}
@media(max-width:360px){.profile-style-editor{padding-inline:4px}.pse-picker{grid-template-columns:116px minmax(0,1fr);gap:8px}.pse-wheel{width:116px;height:116px}.pse-material{flex-basis:59px;min-width:59px}.pse-adjust{grid-template-columns:105px minmax(0,1fr)}}
@media(prefers-color-scheme:light){.profile-style-editor{--pse-line:rgba(48,105,143,.35);--pse-ink:#0d3152;--pse-muted:#466b83;background:linear-gradient(160deg,#f5fafc,#eaf4f9)}.pse-picked-name{color:#135a83}.pse-material canvas{border-color:#8bb7d3}.pse-range output{color:#174c72}}