*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}
#stage,#tap{position:fixed;inset:0}
#stage>*{position:absolute;inset:0;width:100%;height:100%}
#bg{background:#fff}
#pat{display:none}
#tint{mix-blend-mode:multiply;background:#fff;pointer-events:none}
#dim{background:#000;opacity:0;pointer-events:none}
#over{pointer-events:none}
#tap{z-index:1}
body:not(.ui-on),body:not(.ui-on) #tap{cursor:none}

#ui{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(50px + env(safe-area-inset-bottom));
 width:min(760px,calc(100% - 20px));max-height:calc(100% - 70px - env(safe-area-inset-bottom));overflow:auto;
 background:rgba(17,24,39,.88);color:#fff;border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:12px;
 box-shadow:0 10px 40px rgba(0,0,0,.35);transition:opacity .35s,transform .35s}
#ad{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;min-height:44px;
 padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#111827;color:#fff;text-decoration:none;font-size:1rem;white-space:nowrap;overflow:hidden;transition:opacity .35s}
#ad b{color:#fde047}#ad small{margin-left:auto;opacity:.55;font-size:.7rem}
body:not(.ui-on) #ui{opacity:0;pointer-events:none;transform:translate(-50%,30px)}
body:not(.ui-on) #ad{opacity:0;pointer-events:none}

button{font:inherit;color:inherit;border:0;cursor:pointer}
.row{display:flex;gap:10px}
.pre{flex:1;min-height:66px;border-radius:18px;background:#1f2937;font-size:1.25rem;font-weight:700;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:4px;border:3px solid transparent}
.pre .dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.pre.on{border-color:#fde047;background:#374151}
.icon{min-width:66px;border-radius:18px;background:#1f2937;font-size:2rem;line-height:1}
.slide{display:flex;align-items:center;gap:10px;min-height:58px}
.slide .ic{font-size:1.7rem;width:36px;text-align:center}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:22px;border-radius:11px;background:linear-gradient(90deg,#222,#fff);outline:none;margin:0}
#warm{background:linear-gradient(90deg,#ff9a3c,#ffe2bd 35%,#fff 50%,#dbe7ff 65%,#8fb3ff)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px;border-radius:50%;background:#fde047;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background:#fde047;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}

#pro{border-top:1px solid rgba(255,255,255,.15);padding-top:10px;display:flex;flex-direction:column;gap:10px}
.prohead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prohead b{font-size:1.1rem;color:#fde047}
.buy{background:#fde047;color:#111827;font-weight:800;font-size:1.1rem;border-radius:999px;padding:10px 18px}
#pro:not(.locked) .buy{display:none}
.swatches{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.sw{flex:0 0 auto;width:70px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;font-size:.78rem;color:#d1d5db;position:relative}
.sw i{display:block;width:62px;height:62px;border-radius:16px;border:2px solid rgba(255,255,255,.35);background-size:cover;background-position:center}
.sw.on i{outline:4px solid #fde047;outline-offset:2px}
.sw .lk{position:absolute;top:2px;right:2px;font-size:1rem;display:none;filter:drop-shadow(0 1px 2px #000)}
.sep{flex:0 0 2px;background:rgba(255,255,255,.15);margin:6px 2px 24px}
.tools .tog{position:relative;flex:1;min-height:56px;border-radius:16px;background:#1f2937;font-size:1.1rem;font-weight:700;border:3px solid transparent}
.tools .tog.on{border-color:#fde047;background:#374151}
.tools .unit,.tools .fit{flex:.7}
#pro.locked .sw:not(.free) i,#pro.locked .tools .tog{opacity:.45}
#pro.locked .sw:not(.free) .lk,#pro.locked .tools .tog::after{display:inline}
#pro.locked .tools .tog::after{content:"🔒";position:absolute;top:3px;right:5px;font-size:.8rem}

#toast{position:fixed;z-index:20;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#111827;color:#fff;
 padding:14px 22px;border-radius:20px;line-height:1.35;font-weight:700;font-size:1.1rem;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:92%;text-align:center}
#toast b{color:#fde047}

#fitbox{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:#fff}
#fitbox[hidden]{display:none}
.card{border:3px dashed #111827;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:700;text-align:center;padding:8px}
.fitbtns{display:flex;gap:14px}
.fitbtns button{min-width:84px;min-height:72px;border-radius:20px;background:#111827;color:#fff;font-size:2rem;font-weight:800;padding:0 18px}
.fitbtns #fOk{background:#16a34a;font-size:1.4rem}

/* short & wide screens (phones sideways): two columns */
@media (min-width:640px) and (max-height:560px){
 #ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;row-gap:6px;padding:10px;bottom:calc(46px + env(safe-area-inset-bottom));max-height:calc(100% - 56px)}
 #ui>.presets{grid-column:1/-1}
 #pro{min-width:0;grid-column:2;grid-row:2/span 2;border-top:0;padding-top:0;border-left:1px solid rgba(255,255,255,.15);padding-left:12px;gap:6px}
 .pre{min-height:52px;font-size:1.05rem;flex-direction:row}.slide{min-height:48px}
 .tools .tog{min-height:46px;font-size:.95rem}
}
@media (max-width:420px){
 .pre{font-size:1.05rem;min-height:62px}.icon{min-width:56px}
 .tools .tog{font-size:.95rem;padding:0 4px}
 #ad{font-size:.88rem;gap:8px}
}
@media (min-width:640px) and (max-height:560px){#ui>.slide{grid-column:1}}

/* paywall */
.buy.open{text-decoration:none;font-size:1rem}
#pro.locked .buy.open{display:none}#pro:not(.locked) .buy.open{display:inline-block}
#paywall{position:fixed;inset:0;z-index:18;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
#paywall[hidden]{display:none}
.pwcard{background:#111827;color:#fff;border-radius:24px;padding:22px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.pwtitle{font-size:1.5rem;font-weight:800;color:#fde047}.pwtitle small{font-size:1rem;color:#fff;font-weight:600}
.pwsub{color:#d1d5db;line-height:1.4}
.pwbig{background:#fde047;color:#111827;font-weight:800;font-size:1.4rem;border-radius:18px;min-height:64px}
.pwbig:disabled{opacity:.6;cursor:default}
.pwlink{background:none;color:#d1d5db;text-decoration:underline;font-size:1rem;padding:6px}
#pwRestore{display:flex;gap:8px}#pwRestore[hidden]{display:none}
#pwEmail{flex:1;min-width:0;font:inherit;padding:12px;border-radius:12px;border:0}
#pwGo{background:#374151;border-radius:12px;padding:0 16px;font-weight:700}
#pwMsg{min-height:1.2em;color:#fca5a5;font-weight:600}