/* Zroops Art theme — the Zroops Music look (grape night, cream, pink, mint). Loaded last on every page. v10 */
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--grape:#5426B2;--zpink:#FF4A98;--mint:#58E9BF;--cream:#FFF8EC;--navy:#27194A;--zbg:#160C33;--line:rgba(255,248,236,.14);--mute:#BFB2E6;--trophy:#58E9BF;--wm:#FFF8EC;
 --zf:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--tile:rgba(255,248,236,.07);--tileh:rgba(255,248,236,.13);--pnl:rgba(14,7,38,.62);--acc:#FF4A98}
html{background:#160C33}
body,body.studio,body.dmode{font-family:var(--zf);color:var(--cream);background:radial-gradient(120% 70% at 50% -10%,#3A1F86 0%,#1E1046 45%,#120a2b 100%) #160C33;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:var(--zf)}
#bgdots{display:none}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* ---------- home (like the Music home) ---------- */
#home{padding:0 clamp(16px,4vw,48px) calc(28px + env(safe-area-inset-bottom))}
.hwrap{max-width:1180px;margin:0 auto;padding-top:env(safe-area-inset-top)}
.htop{display:flex;align-items:center;justify-content:space-between;padding:18px 0 6px}
.htop .logo{display:block;width:136px;gap:0}
.zl{display:block;width:100%;height:auto;overflow:visible}
.allg{font-size:14px;font-weight:600;color:var(--mute);padding:16px 4px;min-height:56px;display:flex;align-items:center;text-decoration:none}
.allg:hover{color:var(--cream)}
.hero{padding:22px 0 22px}
.kick{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero h1{font-size:clamp(34px,8.4vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:8px 0 12px;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cream)}
.hero h1 span{color:var(--zpink)}
.hsub{margin:0;color:var(--mute);font-size:clamp(15px,2vw,18px);max-width:560px;line-height:1.5}
#hGrid{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){#hGrid{grid-template-columns:repeat(3,1fr);gap:18px}}
.hcard{border-radius:20px;background:linear-gradient(180deg,#2A1860,#1D1046);border:1px solid var(--line);box-shadow:0 10px 30px rgba(5,0,20,.45);color:var(--cream);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
@media (hover:hover){.hcard:hover{transform:translateY(-3px);border-color:rgba(88,233,191,.5);box-shadow:0 16px 40px rgba(5,0,20,.6)}}
.hcard:active{transform:scale(.98)}
.hcard .hp{aspect-ratio:400/260;background-color:#0d0722}
.hcard .ht{gap:3px;padding:11px 13px 14px;min-height:76px}
.hcard b,.hcard b{font-size:clamp(16px,2.2vw,20px);font-weight:800;letter-spacing:-.02em}
.hcard small{font-size:clamp(12px,1.5vw,14.5px);color:var(--mute);opacity:1;font-weight:500;line-height:1.35}
.hcard .new{top:9px;left:9px;background:var(--zpink);font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 10px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.foot{margin-top:26px;color:var(--mute);font-size:13px;line-height:1.6;text-align:center}

/* ---------- picker headers (Magic, Detailed, sections) ---------- */
.phead{gap:4px}
.phead .logo{gap:10px}
.phead .kick{font-size:12px}
.phead h1,.shead h1,h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cream);font-weight:800;letter-spacing:-.03em}
.phead h1{font-size:clamp(24px,4vw,38px);line-height:1.08;margin-top:2px}
.dmode .phead h1{font-size:clamp(24px,4vw,38px)}
.phead .sub,.dmode .phead .sub{display:none}
.homebtn,.sbtn#sHome{width:56px;height:56px;border-radius:16px;background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream)}
.homebtn:hover,.sbtn#sHome:hover{background:var(--tileh)}
.round{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream);width:56px;height:56px;border-radius:16px}
.tag,.stag{color:var(--mute);font-weight:600;opacity:1}
.tag{font-size:clamp(15px,2vw,18px)}
.sechead{color:var(--cream);font-weight:800}
.sechead span{background:var(--zpink);box-shadow:none}
.modesw{background:rgba(14,7,38,.55);border:1px solid var(--line);box-shadow:none;border-radius:18px;padding:5px}
.msw{border-radius:14px;color:var(--mute);font-weight:800;font-size:clamp(14px,2vw,17px)}
.msw.on{background:var(--mint);color:var(--navy);box-shadow:none}
/* picture cards */
.pcard,.scard{background:linear-gradient(180deg,#2A1860,#1D1046);border:1px solid var(--line);box-shadow:0 10px 30px rgba(5,0,20,.45);color:var(--cream);border-radius:20px}
.pcard{padding:8px 8px 10px}
@media (hover:hover){.pcard:hover,.scard:hover{transform:translateY(-3px);border-color:rgba(88,233,191,.5);box-shadow:0 16px 40px rgba(5,0,20,.6)}}
.pcard img{border:0;border-radius:14px}
.pcard .nm{font-weight:800;font-size:15px;letter-spacing:-.01em}
.pcard .chip{background:var(--zpink);box-shadow:none;font-weight:800}
.scard b{font-weight:800}
.scard .th{border-radius:0}
.lcard small{color:var(--mute);opacity:1}

/* ---------- top bars & buttons ---------- */
.tb,.sbtn,.dtop .tb{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream)}
.tb:not(:disabled):hover,.sbtn:hover{background:var(--tileh)}
.tb.save,.stop .sbtn.save{background:var(--zpink);border-color:var(--zpink);color:#fff}
.tb.done{background:var(--mint);border-color:var(--mint);color:var(--navy);font-weight:800}
.tb.on{background:rgba(88,233,191,.22);border-color:var(--mint);color:var(--cream)}
.ttl,.stop .ttl{font-weight:800;letter-spacing:-.02em;color:var(--cream)}
#editor .bar,.dtop,.stop{border-bottom:0}
/* panels / trays */
.panel,#sPanel{background:var(--pnl);border:1px solid var(--line);box-shadow:0 10px 30px rgba(5,0,20,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tool,.stk,.sz{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream)}
.tool.on{background:var(--cream);border-color:var(--mint);color:var(--navy);box-shadow:0 0 0 3px var(--mint)}
.stk.on{box-shadow:0 0 0 3px var(--mint);background:var(--tileh)}
.sz i{background:var(--cream)}
.sz.on{box-shadow:0 0 0 3px var(--mint) inset}
#editor.portrait .sizes{border-left-color:var(--line)}
#editor.land .sizes,#editor.short .acts2{border-top-color:var(--line);border-bottom-color:var(--line)}
.sw.on{box-shadow:0 0 0 3px #1D1046,0 0 0 6px var(--mint)}
.sw.white{box-shadow:0 0 0 2px rgba(255,255,255,.5) inset,0 3px 8px rgba(0,0,0,.3)}
/* the paper stays white */
#cvwrap{background:#fff;box-shadow:0 16px 44px rgba(5,0,20,.55),0 0 0 6px #fff}
#scv{box-shadow:0 12px 36px rgba(5,0,20,.55)}

/* ---------- Detailed ---------- */
#dStage{background:#0d0722;box-shadow:inset 0 0 0 1px var(--line)}
#dLoad{background:rgba(14,7,38,.55)}
.spin{border-color:rgba(255,248,236,.18);border-top-color:var(--mint)}
.dtool{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream)}
.dtool.on{background:var(--mint);border-color:var(--mint);color:var(--navy);box-shadow:none}
.dsize{background:var(--tile);border:1px solid var(--line);box-shadow:none}
.dsize i::after{box-shadow:0 0 0 1px rgba(255,248,236,.4)}
.dsize b{color:var(--mute)}
.dsize input{accent-color:var(--zpink)}
.tgl{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--mute)}
.tgl.on{background:rgba(88,233,191,.22);color:var(--mint);border-color:var(--mint);box-shadow:none}
#dHand.on{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.dsw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.dsw.on{box-shadow:0 0 0 3px #1D1046,0 0 0 5px var(--mint)}
.dcustom::after{color:var(--navy)}
#dZoom{background:rgba(14,7,38,.8);border:1px solid var(--line)}
/* bigger color swatches (48 px) */
#dPal{grid-template-rows:repeat(3,48px);grid-auto-columns:48px}
.dsw{width:48px;height:48px}.dsw.rc{flex:0 0 48px}
.dcustom{width:52px;height:48px}
@media (orientation:landscape) and (min-width:700px){
 #dSide{width:226px}
 #dPal{grid-template-columns:repeat(4,48px);grid-auto-rows:48px;grid-template-rows:none}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:500px){
 #dSide{width:222px}
 #dPal{grid-template-columns:repeat(4,48px);grid-auto-rows:48px;gap:4px}
 .dsw{width:48px;height:48px}
}
@media (min-width:1100px) and (min-height:600px){
 #dSide{width:340px}
 #dPal{grid-template-columns:repeat(6,48px)}
}

/* ---------- sections studio ---------- */
.stool{background:var(--tile);border:1px solid var(--line);box-shadow:none;color:var(--cream)}
.stool.on{background:rgba(88,233,191,.22);border-color:var(--mint);box-shadow:0 0 0 2px var(--mint) inset}
.stool .lab{opacity:.75}
.sw2 i{width:48px;height:48px}
.sw2.on i{box-shadow:0 0 0 3px #1D1046,0 0 0 6px var(--mint)}
.ssize i{background:var(--cream)}
.slbl{color:var(--mute);opacity:1}
input[type=range].srng::-webkit-slider-runnable-track{background:rgba(255,248,236,.18)}
input[type=range].srng::-webkit-slider-thumb{background:var(--cream);border-color:var(--zpink)}
input[type=range].srng::-moz-range-track{background:rgba(255,248,236,.18)}
input[type=range].srng::-moz-range-thumb{background:var(--cream);border-color:var(--zpink)}
.bigbtn{background:var(--zpink);border-radius:16px;font-weight:800;box-shadow:0 8px 22px rgba(255,74,152,.35)}
.bigbtn.alt{background:var(--tile);color:var(--cream);border:1px solid var(--line);box-shadow:none}
#sPhotoStart p{color:var(--mute);opacity:1}
.sbusy{background:rgba(14,7,38,.55);color:var(--cream)}
.shead .sub{color:var(--mute);opacity:1;font-weight:600}
.shead .kick{font-size:12px}
.shead h1{font-size:clamp(24px,4vw,34px)}
/* neon keeps its black paper */
body.s-neon{background:radial-gradient(120% 70% at 50% -10%,#2a1660 0%,#0d0722 55%,#05030f 100%) #05030f}
.s-neon .stool,.s-neon .sbtn{background:var(--tile);color:var(--cream);box-shadow:none}
.s-neon .scard{background:linear-gradient(180deg,#2A1860,#1D1046)}

/* ---------- dialogs, toasts, text sheet ---------- */
.modal,.smodal{background:rgba(10,5,28,.6)}
.card,.smodal .card{background:linear-gradient(180deg,#2A1860,#1D1046);color:var(--cream);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);border-radius:24px}
.card h2,.smodal h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cream);font-weight:800;letter-spacing:-.03em}
.card p,.smodal p{color:var(--mute);opacity:1;font-weight:600}
.big{min-height:56px;border-radius:16px;font-weight:800;font-size:17px;background:var(--tile);border:1px solid var(--line);color:var(--cream)}
.big.pri{background:var(--zpink);border-color:var(--zpink);color:#fff;box-shadow:0 8px 22px rgba(255,74,152,.35)}
.toast,.dtoast,.stoast{background:var(--cream);color:var(--navy);font-weight:700;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.txsheet{background:linear-gradient(180deg,#2A1860,#1D1046);color:var(--cream);box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px var(--line)}
.txx{background:var(--tile);color:var(--cream);border:1px solid var(--line)}
.txrow textarea{background:rgba(255,248,236,.07);border-color:var(--line);color:var(--cream)}
.txrow textarea:focus{background:rgba(255,248,236,.12);border-color:var(--mint)}
.txchip{background:var(--tile);border:1px solid var(--line);color:var(--cream)}
.txlab{color:var(--mint)}
.txfont,.txmode{background:var(--tile);border:1px solid var(--line)}
.txfont span{color:var(--cream)}
.txfont small{color:var(--mute)}
.txfont.on,.txmode.on{background:rgba(88,233,191,.18);box-shadow:0 0 0 3px var(--mint) inset}
.txcol.on{box-shadow:0 0 0 3px #1D1046,0 0 0 6px var(--mint)}
.txbar{background:rgba(14,7,38,.8);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* header alignment: back, then title on the left (like the Music bar) */
.phead{justify-content:flex-start;gap:12px}
.phead .logo{flex:1;min-width:0;text-align:left}
.phead .logo h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .round{margin-left:auto}
.homebtn{margin-right:0}
.shead .sub{display:block;background:none;padding:0;margin-top:2px;letter-spacing:0;text-transform:none;font-size:14px;color:var(--mute);border-radius:0}
.kick{font-style:normal}
#dRecent{padding:4px;margin:-4px 0}

/* ---------- v11: phone portrait — the picture is the star ---------- */
.dmore{display:none}
@media (orientation:portrait),(max-width:699px){
 #dEditor{gap:5px;padding:calc(4px + env(safe-area-inset-top)) calc(5px + env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) calc(5px + env(safe-area-inset-left))}
 .dtop{gap:5px}
 .dtop .tb{--tb:46px;width:46px;min-width:46px;height:46px;border-radius:14px}
 .dtop .tb svg{width:24px;height:24px}
 #dStage{border-radius:16px}
 #dTools{padding:4px;border-radius:16px}
 #dToolset{gap:4px}
 .dtool{height:50px;border-radius:12px;gap:0}
 .dtool svg{width:24px;height:24px}
 .dtool span{font-size:10px;line-height:1.15}
 .dctl{margin-top:4px;gap:4px}
 .dsize{height:40px;border-radius:12px;padding:0 8px;gap:6px}
 .dsize i{flex:0 0 22px;height:22px}
 .dsize input{height:36px}
 .tgl{flex:0 0 52px;width:52px;height:40px;border-radius:12px}
 .tgl svg{width:24px;height:24px}
 #dSide{position:relative;flex-direction:row;align-items:center;gap:6px;padding:4px 4px 4px 6px;border-radius:16px}
 .drecent{flex:0 0 auto;gap:5px}
 #dRecent{flex:0 0 auto;overflow:visible;padding:0;margin:0;gap:5px}
 #dRecent .dsw:nth-child(n+2){display:none}
 #dPal{flex:1 1 auto;min-width:0;grid-auto-flow:column;grid-template-rows:44px;grid-auto-columns:44px;grid-template-columns:none;gap:5px;padding:4px 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-left:1px solid var(--line)}
 #dPal::-webkit-scrollbar{display:none}
 .dsw{width:44px;height:44px;border-radius:12px}
 .dsw.rc{flex:0 0 44px}
 .dsw.on{box-shadow:0 0 0 2px #1D1046,0 0 0 4px var(--mint)}
 .dcustom{width:44px;height:44px}
 .dcustom::after{inset:9px}
 .dmore{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--tile);border:1px solid var(--line);color:var(--cream);padding:0;cursor:pointer}
 .dmore svg{width:20px;height:20px}
 #dSide.more .dmore{background:var(--mint);border-color:var(--mint);color:var(--navy)}
 #dSide.more #dPal{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:30;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(auto-fill,44px);grid-auto-rows:44px;justify-content:center;gap:8px;padding:14px 10px;max-height:min(330px,55vh);overflow-y:auto;overflow-x:hidden;touch-action:pan-y;background:#1D1046;border:1px solid var(--line);border-radius:20px;box-shadow:0 -12px 40px rgba(5,0,20,.6)}
}

/* ---------- v13: zoom control + labelled toggles ---------- */
.tgl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;cursor:pointer}
.tgl span{font-size:11px;font-weight:800;letter-spacing:.1px;line-height:1.1;white-space:nowrap}
.dzoom{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,48px);gap:5px;align-items:center}
.dzl{display:none;margin:0;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mute)}
.zb{height:48px;min-width:48px;border-radius:14px;background:var(--tile);border:1px solid var(--line);color:var(--cream);display:grid;place-items:center;padding:0;font:800 14px/1 var(--zf);cursor:pointer;font-variant-numeric:tabular-nums}
.zb svg{width:26px;height:26px}
.zb:hover{background:var(--tileh)}
.zb:active{transform:scale(.96)}
.zb:disabled{opacity:.35;cursor:default;transform:none}
.zb.zv.zin{color:var(--mint);border-color:rgba(88,233,191,.5)}
.zb.zf{color:var(--cream)}
#dZoom.zin{opacity:1}
/* tall left panel (desktop / tablet landscape) */
@media (orientation:landscape) and (min-width:700px){
 .tgl{flex:1 1 0;width:auto;min-width:0;height:62px}
 .dzoom{flex:1 1 100%;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
 .dzl{display:block;grid-column:1/-1;text-align:center}
 .zb{min-width:0;height:52px}
 .zb.zv,.zb.zf{height:48px}
 #dZoom.zin{opacity:0}#dZoom.zin.show{opacity:1}
}
@media (min-width:1100px) and (min-height:600px){
 .tgl{height:66px}
 .zb{height:56px}
 .zb svg{width:28px;height:28px}
}
/* short landscape phones: compact, icons only */
@media (orientation:landscape) and (min-width:700px) and (max-height:500px){
 .dsize{display:grid;grid-template-columns:26px 1fr;padding:6px;gap:2px 4px}
 .dsize i{grid-column:1;grid-row:1}
 .dsize b{grid-column:2;grid-row:1;text-align:right}
 .dsize input{grid-column:1/-1;height:28px}
 .tgl{height:48px}
 .tgl span{display:none}
 .dzoom{margin-top:0;padding-top:5px;gap:6px}
 .dtool{height:54px}
 .dctl{gap:4px 6px;margin-top:6px}
 .dzl,.zb.zv,.zb.zf{display:none}
 .zb{height:48px}
 #dZoom.zin{opacity:1}
}
/* phone portrait: one compact row */
@media (orientation:portrait),(max-width:699px){
 .dctl{gap:4px}
 .tgl{flex:0 0 50px;width:50px;height:44px;border-radius:12px;gap:0}
 .tgl svg{width:20px;height:20px}
 .tgl span{font-size:9px}
 .dsize{height:44px}
 .dzoom{grid-template-columns:44px 44px;gap:4px}
 .zb{height:44px;min-width:44px;border-radius:12px}
 .zb svg{width:24px;height:24px}
 .dzl,.zb.zv,.zb.zf{display:none}
 #dZoom{top:6px;right:6px}
}