*{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%;pointer-events:none}
#pat{display:none}
#tint{mix-blend-mode:multiply}
#vig{background:radial-gradient(ellipse 75% 75% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%);opacity:0;transition:opacity .3s}
#dim{background:#000;opacity:0}
#tap{z-index:1}
body:not(.ui-on) #tap{cursor:none}

#ui{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));
 width:min(800px,calc(100% - 20px));max-height:calc(100% - 32px);overflow:auto;scrollbar-width:none;
 background:rgba(15,18,32,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-radius:28px;padding:14px;
 display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);transition:opacity .35s,transform .35s}
body:not(.ui-on) #ui{opacity:0;pointer-events:none;transform:translate(-50%,40px)}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
.row{display:flex;gap:10px}
.top{display:flex;gap:10px;align-items:center}
.brand{flex:1;display:flex;align-items:center;gap:8px;font-size:1.5rem;padding-left:6px}
.brand span{background:#fde047;color:#111827;font-weight:900;font-size:.85rem;padding:4px 10px;border-radius:999px;letter-spacing:.06em}
.big{min-height:64px;border-radius:20px;background:#262b40;font-size:1.3rem;font-weight:800;padding:0 22px}
.lock{background:#fde047;color:#111827}
.icon{min-width:64px;font-size:1.9rem;padding:0}
.card{min-width:0;background:rgba(255,255,255,.05);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:10px}
h2{margin:0 0 0 4px;font-size:1rem;font-weight:800;color:#c7cbe0;letter-spacing:.02em}

.kel .k{flex:1;min-height:76px;border-radius:18px;background:#262b40;font-weight:800;font-size:1.05rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:3px solid transparent}
.kel .k i{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.kel .k small{font-weight:600;opacity:.7;font-size:.75rem}
.k.on,.sh.on,.tog.on{border-color:#fde047!important;background:#3a4060!important}
.pick.on{border-color:#fde047}

.slide{display:flex;align-items:center;gap:8px;min-height:60px}
.slide .ic{font-size:1.6rem;width:34px;text-align:center}
.nud{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:#262b40;font-size:1.8rem;font-weight:800;line-height:1}
.val{width:70px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
input[type=range]{flex:1;min-width:0;-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,#ffcf9a 22%,#ffe9d2 40%,#fff 60%,#dbe7ff 80%,#a9c4ff)}
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}

.swatches{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 8px;scrollbar-width:thin}
.sw{flex:0 0 auto;width:72px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.78rem;color:#d1d5db;border:0!important;background:none!important}
.sw i{display:block;width:62px;height:62px;border-radius:18px;border:2px solid rgba(255,255,255,.3);background-size:cover;background-position:center}
.sw.on i{outline:4px solid #fde047;outline-offset:3px}
.sep{flex:0 0 2px;background:rgba(255,255,255,.15);margin:6px 2px 26px}

.favs{align-items:center;flex-wrap:wrap}
.pick{position:relative;min-height:60px;border-radius:18px;padding:0 16px;display:flex;align-items:center;font-weight:800;font-size:1.05rem;cursor:pointer;
 background:conic-gradient(from 0deg,#ff5f5f,#ffd85f,#5fff8a,#5fd2ff,#8a5fff,#ff5fd2,#ff5f5f);border:3px solid transparent}
.pick span{background:rgba(15,18,32,.85);padding:8px 12px;border-radius:12px}
.pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.favlist{flex:1;display:flex;gap:8px;justify-content:center}
.fv{width:48px;height:48px;border-radius:50%;border:3px solid rgba(255,255,255,.5)}
.fv.empty{border:2px dashed rgba(255,255,255,.22)}
.fv.on{border-color:#fde047;box-shadow:0 0 0 3px #fde047}
.addfav{min-height:60px;border-radius:18px;background:#262b40;font-weight:800;font-size:1.05rem;padding:0 16px}

.shape .sh{flex:1;min-height:80px;border-radius:18px;background:#262b40;font-weight:800;font-size:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:3px solid transparent}
.sh i{width:46px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.35)}
.s-flat{background:#eee}.s-sweep{background:linear-gradient(180deg,#7d8186,#c9ccd0 40%,#fff 75%)}
.s-spot{background:radial-gradient(ellipse at 50% 50%,#fff,#bbb 45%,#333)}.s-vig{background:radial-gradient(ellipse at 50% 50%,#eee 45%,#666)}
.tools{flex-wrap:wrap}
.tools .tog{flex:1 1 120px;min-height:62px;border-radius:18px;background:#262b40;font-size:1.1rem;font-weight:800;border:3px solid transparent}

#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;font-weight:700;font-size:1.15rem;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:92%;text-align:center;pointer-events:none}
#toast b{color:#fde047}#toast small{opacity:.7;font-weight:500}

#unlock{position:fixed;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;background:rgba(0,0,0,.25)}
#unlock[hidden]{display:none}
.ring{position:relative;width:150px;height:150px;border-radius:50%;background:rgba(15,18,32,.85);display:flex;align-items:center;justify-content:center;font-size:3.6rem}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:#fde047;stroke-width:8;stroke-linecap:round;stroke-dasharray:277;stroke-dashoffset:277}
#unlock.go circle{animation:fill 1.5s linear forwards}#unlock.half circle{stroke-dashoffset:110}
@keyframes fill{to{stroke-dashoffset:0}}
#unlock p{margin:0;background:#111827;color:#fff;font-weight:800;font-size:1.2rem;padding:10px 18px;border-radius:16px}

@media (max-width:520px){
 .kel{flex-wrap:wrap}.kel .k{flex:1 1 28%;min-height:66px}
 .big{padding:0 16px;font-size:1.15rem}.brand{font-size:1.25rem}
 .val{width:52px;font-size:.85rem}.slide .ic{display:none}.nud{width:46px;height:46px;flex-basis:46px}
 .favlist{order:3;flex-basis:100%}.shape{flex-wrap:wrap}.shape .sh{flex:1 1 40%}
}
@media (min-width:900px),(min-width:640px) and (max-height:560px){
 #ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;width:min(1100px,calc(100% - 20px))}
 .top{grid-column:1/-1}
}
@media (min-width:640px) and (max-height:560px){#ui{gap:8px;padding:10px}.big{min-height:52px}.kel .k{min-height:58px}.shape .sh{min-height:62px}.card{padding:8px;gap:6px}}
@media (min-width:900px),(min-width:640px) and (max-height:560px){.favlist{order:3;flex-basis:100%;justify-content:flex-start}.pick{flex:1}.shape{flex-wrap:wrap}.shape .sh{flex:1 1 40%}}
@media (min-width:900px),(min-width:640px) and (max-height:560px){#ui>.card:nth-child(3){grid-column:2;grid-row:2/span 2}#ui>.card:nth-child(2){grid-row:2}#ui>.card:nth-child(4){grid-column:1;grid-row:3}}
.tools .unit,.tools .fit{flex:1 1 90px}.fit em{font-style:normal;color:#4ade80;font-size:.9rem}
#ask{position:fixed;z-index:25;left:50%;top:calc(20px + env(safe-area-inset-top));transform:translateX(-50%);background:#111827;color:#fff;border-radius:24px;padding:16px 18px;
 box-shadow:0 10px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:12px;width:min(460px,calc(100% - 24px));text-align:center}
#ask[hidden],#fitbox[hidden]{display:none}#ask p{margin:0;font-size:1.25rem;font-weight:800}#ask b{color:#fde047}
.fitbtns{display:flex;gap:14px;justify-content:center}
.fitbtns button{min-width:96px;min-height:72px;border-radius:20px;background:#262b40;color:#fff;font-size:2.2rem;font-weight:800;padding:0 20px}
.fitbtns.small button{min-height:54px;font-size:1.1rem;background:#3a4060}
.fitbtns .go{background:#16a34a;font-size:1.5rem}
#askLater{font-size:1.2rem}
#fitbox{position:fixed;inset:0;z-index:28;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
.fitmsg{margin:0;font-size:1.3rem;font-weight:700;color:#111827;text-align:center}
.card2{border:4px dashed #111827;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:rgba(253,224,71,.18);cursor:ew-resize;touch-action:none;flex:0 0 auto}
#fitbox small{color:#6b7280;font-weight:600}
#fitbox .fitbtns button:not(.go){background:#111827}
@media (max-height:560px){#fitbox{display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center}.fitmsg,.card2{grid-column:1/-1;justify-self:center}#fitbox small{display:none}.fitbtns button{min-height:58px}}