/* glass.css — frosted glass, live bg, pill sliders, gradient dial */
:root{--a1:#4f7fb8;--a2:#4f7fb8;--glass:rgba(150,185,230,.06);--gb:rgba(170,200,240,.14);--text:#e6ecf5;--muted:#8d9bb2}
html{background:#04060b!important}
body{grid-template-rows:60px minmax(0,1fr)!important}
.workspace{padding:8px;gap:8px;min-height:0}
body,.editor,.workspace,.preview,.sidebar{background:transparent!important}
#liveBg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.topbar,.ed-top,.sidebar,.ed-left,.ed-right,.ed-center,.preview,.menu-list,.gf-card,.statusbar{
 background:var(--glass)!important;border:1px solid var(--gb)!important;
 -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
 box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(200,225,255,.08)}
.topbar{margin:8px 8px 0;}
.ed-top{margin:8px 8px 0;border-radius:18px}
.topbar{border-radius:18px}
.ed-left,.ed-right,.ed-center,.sidebar,.preview{border-radius:20px!important}
.statusbar{border:0!important;box-shadow:none;background:transparent!important}
.ed-viewport,.viewport{background:rgba(5,6,12,.38)!important}
.panel-title{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:0!important;background:transparent!important}
button{background:var(--glass)!important;border:1px solid var(--gb)!important;border-radius:12px!important;color:var(--text)!important;transition:transform .15s,background .15s}
button:hover:not(:disabled){background:rgba(255,255,255,.16)!important;transform:translateY(-1px)}
button.primary,.tool.active,.seg button.active{background:var(--a1)!important;border-color:transparent!important;box-shadow:none}
.seg{background:rgba(0,0,0,.25)!important;border-radius:14px!important}
.seg button{border:0!important;background:transparent!important}
kbd,.hint,.tests,#edDrawHint,.dim small,.menu-list small,.snap-row small,#edOptDraw .muted,#edOptEraser .muted,#edOptShape .muted,.tool kbd{display:none!important}
.dropzone{border:1.5px dashed var(--gb)!important;border-radius:18px!important;background:rgba(255,255,255,.04)!important;padding:26px!important;text-align:center;color:var(--muted)}
.empty{color:var(--muted);font-size:15px}
input[type=number],select,textarea,.ed-name{background:rgba(255,255,255,.08)!important;border:1px solid transparent!important;border-radius:999px!important;color:var(--text)!important;padding:5px 10px;outline:0}
textarea{border-radius:14px!important}
input[type=number]:focus,select:focus,textarea:focus,.ed-name:focus{border-color:var(--a1)!important}
input[type=number]{-moz-appearance:textfield;text-align:center}
input[type=number]::-webkit-inner-spin-button{display:none}
/* sliders: pill track, knob fitted inside */
input[type=range]{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:24px;min-width:90px;flex:1;margin:0;padding:0;border-radius:999px;cursor:pointer;
 border:1px solid var(--gb);box-shadow:inset 0 1px 4px rgba(0,0,0,.4);
 background:linear-gradient(90deg,var(--a1),var(--a2)) 0 0/calc(11px + (100% - 22px)*var(--p,.5)) 100% no-repeat,rgba(255,255,255,.08)}
input[type=range]::-webkit-slider-runnable-track{background:transparent;height:22px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:3px solid transparent;background:#fff;background-clip:padding-box;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
input[type=range]::-moz-range-track{background:transparent;height:22px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:3px solid transparent;background:#fff;background-clip:padding-box}
/* switches */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--gb);position:relative;cursor:pointer;flex:none;transition:background .2s;margin:0}
input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
input[type=checkbox]:checked{background:linear-gradient(135deg,var(--a1),var(--a2))}
input[type=checkbox]:checked::after{transform:translateX(16px)}
input[type=color]{-webkit-appearance:none;appearance:none;width:30px;height:30px;padding:0;border:2px solid rgba(255,255,255,.7)!important;border-radius:50%!important;background:none;cursor:pointer;overflow:hidden}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
/* gradient picker */
.gw{display:flex;flex-direction:column;gap:10px;padding:12px;margin:6px 0;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--gb)}
.gw-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gw-stop{width:34px;height:34px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.4);flex:none}
.gw-dial{position:relative;width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.5);cursor:grab;touch-action:none;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.gw-knob{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none}
.gw-swap{width:30px;height:30px;padding:0!important;border-radius:50%!important}
.gw-presets{display:flex;gap:8px;justify-content:center}
.gw-presets i{width:26px;height:26px;border-radius:50%;cursor:pointer;border:1.5px solid rgba(255,255,255,.5);transition:transform .15s}
.gw-presets i:hover{transform:scale(1.18)}
.gw-hide{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
#edFillGradRow{flex-wrap:wrap}#edFillGradRow>input[type=color],#edFillGradRow>input[type=number]{display:none}

/* editor hides the UV screen behind it */
.editor{background:rgba(4,6,11,.88)!important;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
body.editor-open>.topbar,body.editor-open>.workspace{visibility:hidden}

.ask{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(2,4,9,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ask-card{min-width:280px;padding:22px;border-radius:22px;text-align:center;background:rgba(150,185,230,.08);border:1px solid var(--gb);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ask-t{font-size:15px;font-weight:600;word-break:break-all}.ask-s{color:var(--muted);margin:6px 0 16px}
.ask-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.ask-b button{min-width:44px;padding:9px 16px}

/* final polish */
.themebox{display:none!important}
.toolbar{background:transparent!important;border:0!important;border-bottom:1px solid var(--gb)!important}
.uv-list li,.layers>*,.decals>*,.uploads>*{background:rgba(150,185,230,.07)!important;border:1px solid transparent!important;border-radius:12px!important}
.uv-list li:hover,.layers>*:hover{background:rgba(150,185,230,.13)!important}
.layers>.sel,.layers>.selected,.layers>.active{border-color:var(--a1)!important}
.preview{overflow:hidden}.statusbar{border-top:1px solid var(--gb)!important}
.workspace{grid-template-columns:290px minmax(0,1fr)}
.ed-top input[type=range]{flex:none;width:96px}
.ed-viewport{background:rgba(4,6,11,.45)!important}
.ed-top .spacer{flex:1}

.bgpop{position:fixed;z-index:60;width:236px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border-radius:16px;background:rgba(10,16,28,.82);border:1px solid var(--gb);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.bgpop i{width:28px;height:28px;border-radius:50%;cursor:pointer;border:1.5px solid rgba(255,255,255,.3)}
.bgpop i.on{outline:2px solid var(--a1);outline-offset:2px}.bgpop button{margin-left:auto;padding:5px 12px}

.fontup{margin:6px 8px;width:calc(100% - 16px)}
.hex{width:78px!important;flex:none;font:12px ui-monospace,Menlo,Consolas,monospace!important;text-transform:uppercase;letter-spacing:.02em}
.hex.bad{border-color:#b5535b!important}
.gw-hexrow{display:flex;justify-content:space-between;gap:8px}