/* Gammage Print Shop — Design Studio (full-screen) */
body.studio{margin:0;height:100vh;height:100dvh;overflow:hidden;background:#E9ECF1;font-family:Inter,system-ui,sans-serif;color:#0F2138;display:flex;flex-direction:column}
.studio svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.studio button{font-family:inherit;color:inherit}
.studio [hidden]{display:none!important}
.hint{font-size:.8rem;color:#5A6577;margin:8px 0;line-height:1.45}
/* top bar */
.stop{height:60px;flex:0 0 60px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#fff;border-bottom:1px solid #D6DCE5;box-shadow:0 1px 0 rgba(15,33,56,.04);z-index:20}
.slogo img{height:38px;width:auto}
.sprod{position:relative;display:flex;flex-direction:column;line-height:1.15;padding:4px 26px 4px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;min-width:0}
.sprod:hover{border-color:#D6DCE5;background:#F6F8FB}
.sprod b{font-size:.95rem;white-space:nowrap}.sprod small{font-size:.75rem;color:#5A6577}
.sprod::after{content:"";position:absolute;right:9px;top:50%;width:7px;height:7px;border-right:2px solid #5A6577;border-bottom:2px solid #5A6577;transform:translateY(-70%) rotate(45deg)}
.sprod select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;font-size:16px}
.stools{display:flex;align-items:center;gap:4px;margin:0 auto;padding-left:10px}
.tb{background:none;border:0;border-radius:8px;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;font-weight:700}
.tb:hover:not(:disabled){background:#EEF1F5}.tb:disabled{opacity:.35;cursor:default}
.zoom{display:inline-flex;align-items:center;border:1px solid #D6DCE5;border-radius:10px;margin-left:8px}.zl{font-size:.82rem;min-width:54px}
.gtoggle{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;margin-left:10px;cursor:pointer}
.sacts{display:flex;align-items:center;gap:6px}
.tbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #D6DCE5;border-radius:10px;height:38px;padding:0 12px;font-weight:700;font-size:.88rem;cursor:pointer}
.tbtn:hover{background:#F6F8FB}.tbtn.saved{background:#E8F5E9;border-color:#66BB6A}
.studio .cartbtn{margin:0;background:#fff;color:#0F2138;border:1px solid #D6DCE5;border-radius:10px;padding:0 10px;height:38px}
.studio .cartbtn .cartcount{position:absolute;top:-6px;right:-6px;background:#FBCF3A;color:#0F2138;border-radius:999px;font-size:.7rem;padding:1px 6px}
.nextbtn{background:#0F2138;color:#FBCF3A!important;border:0;border-radius:10px;height:40px;padding:0 20px;font-weight:800;font-size:.95rem;cursor:pointer;white-space:nowrap}
.nextbtn:hover{background:#1B3557}
/* body */
.sbody{flex:1;display:flex;min-height:0;position:relative}
.rail{flex:0 0 76px;background:#fff;border-right:1px solid #D6DCE5;display:flex;flex-direction:column;gap:2px;padding:8px 6px;overflow-y:auto;z-index:15}
.rail button{background:none;border:0;border-radius:10px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.68rem;font-weight:700;cursor:pointer;color:#3B4A63}
.rail button svg{width:22px;height:22px}
.rail button:hover{background:#F1F4F8;color:#0F2138}.rail button.on{background:#0F2138;color:#FBCF3A}
.flyout{flex:0 0 320px;background:#fff;border-right:1px solid #D6DCE5;display:flex;flex-direction:column;min-height:0;z-index:14;box-shadow:6px 0 18px rgba(15,33,56,.06)}
.flyout header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.flyout h2{font:800 1.05rem Inter,sans-serif;margin:0}
.fclose{background:none;border:0;font-size:1.6rem;cursor:pointer;line-height:1;color:#5A6577}
.fbody{padding:6px 16px 20px;overflow-y:auto;flex:1}
.fbody h3{font:800 .72rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5A6577;margin:18px 0 8px}
.fbody h3 small{text-transform:none;letter-spacing:0;font-weight:500}
.fbody h4{font-size:.75rem;color:#5A6577;margin:12px 0 6px}
.fl{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:700;margin-bottom:8px}
.fl select,.fl input,.search,.row input[type=number]{font:inherit;font-weight:500;border:1px solid #C9D1DC;border-radius:8px;padding:9px 10px;background:#fff;width:100%;box-sizing:border-box;font-size:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}.row label{display:flex;flex-direction:column;font-size:.78rem;font-weight:700;gap:4px;flex:1}
.chk{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:.85rem;font-weight:600;margin:8px 0}
.pbtn{width:100%;background:#0F2138;color:#FBCF3A;border:0;border-radius:10px;padding:12px;font-weight:800;cursor:pointer;margin-top:8px}
.ghostbtn{background:#fff;border:1px solid #C9D1DC;border-radius:8px;padding:8px 12px;font-weight:700;font-size:.85rem;cursor:pointer}
.ghostbtn:hover{background:#F6F8FB}
.tpls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.tpl{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.tplimg{display:block;aspect-ratio:1/var(--ar,1);max-height:240px;border-radius:8px;overflow:hidden;background:#EEF1F5;box-shadow:0 0 0 1px #D6DCE5;transition:box-shadow .15s,transform .15s}
.tplimg img{width:100%;height:100%;object-fit:contain;display:block}
.tpl:hover .tplimg{box-shadow:0 0 0 2px #0F2138;transform:translateY(-1px)}
.tpln{display:block;font-size:.72rem;font-weight:600;color:#3B4A63;margin-top:5px;line-height:1.25}
.addtxt{display:block;width:100%;text-align:left;background:#F3F5F9;border:1px solid #E1E6EE;border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer}
.addtxt:hover{background:#E9EEF5}.addtxt.h{font:800 1.35rem Montserrat,sans-serif}.addtxt.s{font:600 1.05rem Montserrat,sans-serif}.addtxt.b{font:400 .9rem Inter,sans-serif}
.tstyles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tstyles button{background:#fff;border:1px solid #E1E6EE;border-radius:10px;height:60px;cursor:pointer;color:#0F2138}
.tstyles button:hover{border-color:#0F2138}
.upbtn{display:block;text-align:center;background:#0F2138;color:#FBCF3A;border-radius:10px;padding:13px;font-weight:800;cursor:pointer}
.uplist{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.upimg{background:#F3F5F9;border:1px solid #E1E6EE;border-radius:8px;padding:3px;cursor:pointer;aspect-ratio:1}.upimg img{width:100%;height:100%;object-fit:contain}
.shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.shapes button{aspect-ratio:1;background:#F3F5F9;border:1px solid #E1E6EE;border-radius:8px;cursor:pointer;font-size:1.3rem;color:#0F2138;display:flex;align-items:center;justify-content:center}
.shapes button:hover{border-color:#0F2138}
.sh{display:block;width:24px;height:18px;background:#0F2138}.sh.rd{border-radius:5px}.sh.ci{width:22px;height:22px;border-radius:50%}.sh.ri{width:18px;height:18px;border-radius:50%;background:none;border:3px solid #0F2138}
.icgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.icgrid button{aspect-ratio:1;background:#fff;border:1px solid #E7EBF1;border-radius:8px;cursor:pointer;padding:7px}.icgrid button:hover{border-color:#0F2138;background:#F6F8FB}.icgrid img{width:100%;height:100%}
.swgrid,.swrow{display:flex;flex-wrap:wrap;gap:7px}
.sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(15,33,56,.25);cursor:pointer;padding:0;flex:0 0 auto}.sw.lg{width:36px;height:36px}
.sw:hover{transform:scale(1.08);box-shadow:0 0 0 2px #fff,0 0 0 4px #0F2138}
.lines{display:grid;grid-template-columns:1fr 1fr;gap:6px}.lines button{display:flex;align-items:center;gap:8px;background:#F3F5F9;border:1px solid #E1E6EE;border-radius:8px;padding:10px;cursor:pointer;font-weight:600;font-size:.82rem}
.ln{display:inline-block;width:30px;border-top:3px solid #0F2138}.ln.dash{border-top-style:dashed}.ln.dot{border-top-style:dotted}.ln.dbl{border-top:6px double #0F2138}.ln.v{width:0;height:18px;border-top:0;border-left:3px solid #0F2138;margin:0 13px}
.layers,.saved{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.layers li{display:flex;gap:3px;align-items:center}.layers li.on .lsel{background:#FFF6D6;border-color:#E6C03F}
.lsel{flex:1;text-align:left;background:#F6F8FB;border:1px solid #E1E6EE;border-radius:8px;padding:8px;font-size:.8rem;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;gap:8px;align-items:center}
.lic{width:20px;text-align:center;font-weight:800;color:#5A6577}
.lbtn{background:#fff;border:1px solid #E1E6EE;border-radius:6px;width:30px;height:32px;cursor:pointer;font-size:.8rem}
.saved li{display:flex;gap:8px;align-items:center;font-size:.82rem;padding:6px;border:1px solid #E7EBF1;border-radius:10px}
.saved img{width:56px;border-radius:4px;box-shadow:0 0 0 1px #E1E6EE}.saved li div{flex:1;min-width:0;display:flex;flex-direction:column}.saved small{color:#5A6577}
.saved button{background:#fff;border:1px solid #C9D1DC;border-radius:6px;padding:5px 8px;cursor:pointer;font-weight:700}
/* stage */
.sstage{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.sidetabs{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;display:flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 2px 10px rgba(15,33,56,.12)}
.sidetabs button{background:none;border:0;border-radius:999px;padding:7px 20px;font-weight:700;font-size:.85rem;cursor:pointer}
.sidetabs button.on{background:#0F2138;color:#FBCF3A}
.stage{flex:1;position:relative;overflow:auto;display:flex;align-items:center;justify-content:center;padding:56px 30px 20px}
.stage.drop{outline:3px dashed #2E7FD0;outline-offset:-12px}
.stage .canvas-container{margin:auto;flex:0 0 auto;box-shadow:0 12px 40px rgba(15,33,56,.22),0 2px 6px rgba(15,33,56,.1)}
.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:0;padding:8px 10px 12px;font-size:.75rem;color:#4A5465}
.legend span{display:inline-flex;align-items:center;gap:6px}.lg{display:inline-block;width:22px;border-top:2px dashed}.lg.r{border-color:#E53935}.lg.b{border-color:#1E88E5}.lg.w{height:10px;border:1px solid #C9D1DC;background:rgba(255,255,255,.6)}
.loaderr{background:#fff;padding:20px;border-radius:12px}
/* page thumbnails */
.pages{flex:0 0 132px;background:#fff;border-left:1px solid #D6DCE5;display:flex;flex-direction:column;gap:14px;padding:16px 14px;overflow:auto}
.pages button{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:700;position:relative}
.pages img{max-width:100%;max-height:140px;border-radius:4px;box-shadow:0 0 0 1px #D6DCE5,0 3px 8px rgba(15,33,56,.1);background:#fff}
.pages button.on img{box-shadow:0 0 0 3px #0F2138}
.pages em{display:none;font-style:normal;font-size:.68rem;color:#5A6577;font-weight:500}.pages button.empty em{display:block}
/* context toolbar */
.ctx{position:absolute;z-index:12;display:flex;align-items:center;gap:2px;background:#fff;border-radius:12px;padding:5px;box-shadow:0 6px 24px rgba(15,33,56,.2),0 0 0 1px rgba(15,33,56,.06);white-space:nowrap}
.ctx button,.ctx select{height:34px;border:0;background:none;border-radius:8px;padding:0 9px;font-size:.82rem;font-weight:700;cursor:pointer}
.ctx button:hover,.ctx button.on{background:#EEF1F5}.ctx button.on{color:#0F2138;box-shadow:inset 0 0 0 1px #C9D1DC}
.ctx .g{display:inline-flex;align-items:center;gap:2px;padding-right:4px;margin-right:2px;border-right:1px solid #E7EBF1}
.ctx[data-kind="text"] .gimage,.ctx[data-kind="text"] .gqr,.ctx[data-kind="image"] .gtext,.ctx[data-kind="image"] .gqr,.ctx[data-kind="shape"] .gtext,.ctx[data-kind="shape"] .gimage,.ctx[data-kind="shape"] .gqr,.ctx[data-kind="qr"] .gtext,.ctx[data-kind="qr"] .gimage,.ctx[data-kind="multi"] .gtext,.ctx[data-kind="multi"] .gimage,.ctx[data-kind="multi"] .gqr{display:none}
.ctx[data-kind="image"] #cfill{display:none}
#cfont{width:150px;border:1px solid #E1E6EE;font-weight:600}
.sz{display:inline-flex;align-items:center;border:1px solid #E1E6EE;border-radius:8px}.sz button{width:26px;padding:0}.sz input{width:44px;border:0;text-align:center;font:600 .85rem Inter;-moz-appearance:textfield}.sz input::-webkit-inner-spin-button{display:none}
.swbtn{width:28px;height:28px!important;padding:0!important;border-radius:50%!important;box-shadow:inset 0 0 0 1px rgba(15,33,56,.3);margin:0 4px}
.ctx .ic{padding:0 7px}.ctx .danger{color:#C62828}
#calign path{display:none}#calign[data-a="left"] .al-l,#calign[data-a="center"] .al-c,#calign[data-a="right"] .al-r,#calign[data-a="justify"] .al-j{display:block}
.cpop{position:absolute;z-index:13;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(15,33,56,.22);width:240px;display:flex;flex-direction:column;gap:8px}
.cpop label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700}.cpop input[type=range]{width:100%;accent-color:#0F2138}
.cpop select{font:inherit;border:1px solid #C9D1DC;border-radius:8px;padding:6px}
.grid2,.grid3{display:grid;grid-template-columns:1fr 1fr;gap:5px}.grid3{grid-template-columns:1fr 1fr 1fr}
.grid2 button,.grid3 button{background:#F3F5F9;border:1px solid #E1E6EE;border-radius:8px;padding:7px 4px;font-size:.78rem;font-weight:700;cursor:pointer}
.cpop h4{margin:4px 0 0;font-size:.75rem;color:#5A6577}
/* color popover */
.colorpop{position:fixed;z-index:200;background:#fff;border-radius:14px;padding:12px 14px;width:300px;max-height:min(620px,calc(100vh - 16px));display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(15,33,56,.28)}
.cphead{display:flex;justify-content:space-between;align-items:center}.cphead button{background:none;border:0;font-size:1.4rem;cursor:pointer}
.colorpop h4{font-size:.72rem;color:#5A6577;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.08em}
.cpcustom{display:flex;gap:8px;margin-top:12px}.cpcustom input[type=color]{width:44px;height:38px;border:1px solid #C9D1DC;border-radius:8px;padding:2px;background:#fff}
.cpcustom input#cphex{flex:1;border:1px solid #C9D1DC;border-radius:8px;padding:0 10px;font:600 16px ui-monospace,monospace;text-transform:uppercase;min-width:0}
/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0F2138;color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;font-size:.88rem;z-index:300;max-width:min(560px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.warn{background:#B3261E}
/* modals */
.modal{position:fixed;inset:0;z-index:150;background:rgba(10,18,32,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.mbox{position:relative;background:#fff;border-radius:18px;max-width:880px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.mclose{position:absolute;top:10px;right:12px;z-index:3;background:rgba(255,255,255,.9);border:0;border-radius:50%;width:38px;height:38px;font-size:1.5rem;cursor:pointer}
.surface{height:min(62vh,560px);display:flex;align-items:center;justify-content:center;perspective:1400px;overflow:hidden;border-radius:18px 18px 0 0;
 background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.35),transparent 55%),repeating-linear-gradient(92deg,rgba(0,0,0,.035) 0 3px,transparent 3px 11px),linear-gradient(135deg,#C79B6D,#A87A4F 55%,#8E6440)}
.mock{transform:rotateX(18deg) rotateZ(-6deg);transform-style:preserve-3d;filter:drop-shadow(0 26px 22px rgba(30,15,0,.45)) drop-shadow(0 4px 4px rgba(30,15,0,.35))}
.mock img{display:block;max-width:min(62vw,560px);max-height:min(46vh,430px);width:auto;height:auto;border-radius:2px;background:#fff}
#preview[data-kind="yard-sign"] .surface{background:linear-gradient(#BFE3F8 0 55%,#6FA84B 55%,#4E8A33)}
#preview[data-kind="yard-sign"] .mock{transform:none;position:relative;padding-bottom:110px}
#preview[data-kind="yard-sign"] .mock::after{content:"";position:absolute;left:50%;bottom:0;width:8px;height:120px;margin-left:-4px;background:linear-gradient(90deg,#777,#ccc,#777)}
#preview[data-kind="flyer"] .surface,#preview[data-kind="rack-card"] .surface{background:radial-gradient(ellipse at 50% 30%,#fff,transparent 60%),linear-gradient(135deg,#E8E4DE,#CFC8BE)}
.pvbar{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap}.pvbar p{flex:1;margin:0;font-size:.85rem;color:#4A5465}
.seg{display:flex;background:#EEF1F5;border-radius:999px;padding:3px}.seg button{border:0;background:none;border-radius:999px;padding:7px 16px;font-weight:700;cursor:pointer}.seg button.on{background:#0F2138;color:#FBCF3A}
.nx{max-width:560px;padding:24px 26px}.nx h2{font:800 1.4rem Inter,sans-serif;margin:0 0 4px}
.nxthumbs{display:flex;gap:12px;justify-content:center;background:#F3F5F9;border-radius:12px;padding:16px;margin:10px 0}
.nxthumbs img{max-width:46%;max-height:220px;box-shadow:0 6px 16px rgba(15,33,56,.2);background:#fff}
.checks{margin:8px 0;padding-left:0;list-style:none;font-size:.85rem}.checks li{padding-left:24px;position:relative;margin:4px 0}.checks li::before{content:"✓";position:absolute;left:4px;color:#2E7D32;font-weight:800}
.nxacts{display:flex;flex-direction:column;gap:10px;margin:12px 0}.nxacts .btn{width:100%;text-align:center}
.rsvpcta{background:#FFF6D6;border:1px solid #E6C03F;border-radius:12px;padding:12px 14px;font-size:.9rem;margin:10px 0}.rsvpcta a{font-weight:800;color:#0F2138}
.dlbox{border:1px solid #E1E6EE;border-radius:12px;padding:10px 14px;margin:10px 0}.dlbox summary{font-weight:700;cursor:pointer}
.dbusy{cursor:progress}
/* cart drawer above studio */
.studio .cdrawer{z-index:400}
/* ---------- tablet ---------- */
@media (max-width:1180px){.pages{display:none}.flyout{flex-basis:290px}.gtoggle span{display:none}}
@media (max-width:980px){.tbtn span{display:none}.slogo{display:none}}
/* ---------- phone ---------- */
@media (max-width:820px){
 .stop{height:54px;flex-basis:54px;gap:6px;padding:0 8px}
 .stools{margin:0 0 0 auto;padding:0}.zoom,.gtoggle{display:none}
 .sprod{padding:2px 22px 2px 6px}.sprod b{font-size:.85rem}.tbtn{padding:0 9px}.studio .cartbtn{display:none}.nextbtn{padding:0 14px;height:38px}
 #savebtn{display:none}
 .sbody{flex-direction:column}
 .rail{order:3;flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:0;border-top:1px solid #D6DCE5;padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:0}
 .rail button{flex:0 0 64px;padding:6px 0}
 .flyout{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));max-height:58%;border-right:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(15,33,56,.2);z-index:30}
 .tpls{grid-template-columns:repeat(3,1fr)}.tplimg{max-height:150px}.icgrid{grid-template-columns:repeat(7,1fr)}
 .sstage{flex:1;min-height:0}
 .stage{padding:52px 10px 10px}
 .legend{gap:10px;padding:4px 8px 6px;font-size:.68rem}.legend span:nth-child(3){display:none}
 .ctx{position:fixed;left:6px!important;right:6px;top:auto!important;bottom:calc(70px + env(safe-area-inset-bottom));overflow-x:auto;justify-content:flex-start;z-index:25}
 .cpop{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:calc(122px + env(safe-area-inset-bottom));width:auto;z-index:26}
 #cfont{width:120px}
 .colorpop{left:6px!important;right:6px;width:auto;top:auto!important;bottom:calc(70px + env(safe-area-inset-bottom));max-height:62vh;z-index:60}
 .swgrid{grid-template-columns:repeat(12,minmax(0,1fr))}.swgrid .sw{min-height:24px}
 .surface{height:52vh}.mock img{max-width:80vw;max-height:40vh}
 .nx{padding:20px 16px}
 .toast{bottom:84px}
}

.cpcur{width:26px;height:26px;border-radius:7px;border:1px solid #C9D1DC;margin-left:auto;margin-right:8px;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);background-size:10px 10px;background-position:0 0,5px 5px;position:relative;overflow:hidden}.cpcur i{position:absolute;inset:0}
.cptabs{display:flex;gap:4px;background:#EEF1F5;border-radius:9px;padding:3px;margin:8px 0 2px}.cptabs button{flex:1;border:0;background:none;padding:7px;border-radius:7px;font-weight:700;cursor:pointer;color:#5A6577}.cptabs button.on{background:#fff;color:#0F2138;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cpbody{overflow-y:auto;min-height:0;flex:1;padding-right:2px;overscroll-behavior:contain}
.swgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}.swgrid .sw{width:auto;height:auto;aspect-ratio:1;border-radius:3px;min-width:0}
.colorpop .sw.metal{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sv{position:relative;height:170px;border-radius:10px;margin-top:10px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair}
.svk{position:absolute;width:18px;height:18px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
.colorpop input.hue,.colorpop input.alpha{width:100%;-webkit-appearance:none;appearance:none;height:16px;border-radius:8px;margin:12px 0 4px;background:linear-gradient(to right,red,#ff0,lime,cyan,blue,#f0f,red)}
.colorpop input.alpha{margin:0;flex:1}
.colorpop input.hue::-webkit-slider-thumb,.colorpop input.alpha::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #0F2138;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.colorpop input.hue::-moz-range-thumb,.colorpop input.alpha::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #0F2138}
.cpal{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#5A6577;margin-top:8px}.cpal span{width:38px;text-align:right}
.cpin{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px;margin-top:10px}.cpin label{font-size:.68rem;font-weight:700;color:#5A6577;display:flex;flex-direction:column;gap:3px}
.cpin input{border:1px solid #C9D1DC;border-radius:8px;padding:7px 6px;font:600 16px ui-monospace,monospace;min-width:0;width:100%;text-transform:uppercase}
.cpacts{display:flex;gap:8px;margin-top:10px;align-items:center}.cpacts input[type=color]{width:42px;height:38px;border:1px solid #C9D1DC;border-radius:8px;padding:2px;background:#fff}.cpacts #cpapply{margin-left:auto}
.cpacts .btn{padding:8px 14px;font-size:.85rem;min-height:0;border-width:1px;box-shadow:none}
@media (max-width:820px){.colorpop .sv{height:130px}.colorpop{max-height:56vh}}

.homebtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:2px solid #14213d;border-radius:999px;color:#14213d;background:#fff;font-weight:700;text-decoration:none;white-space:nowrap;flex:none;margin-right:6px}.homebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.homebtn:hover{background:#14213d;color:#fff}@media(max-width:700px){.homebtn{padding:6px 9px}.homebtn span{font-size:.85rem}}