/* Shop Desk 2.6.1 — polished midnight-blue privacy studio / shared top bar */
:root{color-scheme:dark;--st-bg:var(--shop-080f1e,#080f1e);--st-panel:var(--shop-101e34,#101e34);--st-panel-2:var(--shop-13243d,#13243d);--st-line:var(--shop-244268,#244268);--st-text:var(--shop-eff7ff,#eff7ff);--st-muted:var(--shop-93aac8,#93aac8);--st-blue:var(--shop-2baeff,#2baeff);--st-cyan:var(--shop-6bdafa,#6bdafa);--st-green:#4edeb1}
body{background:radial-gradient(ellipse at 72% 6%,rgba(13,70,122,.16),transparent 45%),var(--shop-080f1e,#080f1e);color:var(--st-text)}
.workspace{background:transparent}
/* Fix: .topbar previously overrode dark header with white background. */
.workspace>.topbar{background:linear-gradient(105deg,var(--shop-0d192a,#0d192a) 0%,var(--shop-101e32,#101e32) 100%)!important;border-bottom:1px solid var(--shop-263951,#263951);color:var(--st-text);box-shadow:0 5px 22px rgba(0,0,0,.14);position:relative;z-index:3}
.topbar #breadcrumb{color:var(--st-text);font-weight:500;font-size:12px}
.topbar .top-search{background:var(--shop-0a1729,#0a1729);border-color:var(--shop-294c74,#294c74);box-shadow:none}
.topbar .top-search input{color:var(--st-text)}
.topbar .topbar-right #status{color:var(--st-text)}
.topbar #who{color:var(--st-text)!important;background:var(--shop-153354,#153354)!important;border:1px solid var(--shop-315073,#315073);padding:7px 11px;border-radius:9px}
.topbar #logout{background:var(--shop-162a46,#162a46);border:1px solid var(--shop-315074,#315074);color:var(--st-text)}
aside{scrollbar-width:thin;scrollbar-color:var(--shop-274866,#274866) transparent;background:linear-gradient(var(--shop-0c1729,#0c1729),var(--shop-0b1524,#0b1524))}
nav button:focus-visible{outline:2px solid var(--shop-67c8ff,#67c8ff);outline-offset:2px}
#page-slips,#page-webhooks{color:var(--st-text)}
#page-slips *,#page-webhooks *{box-sizing:border-box}
#page-slips small,#page-webhooks small{color:var(--st-muted)}
#page-slips button,#page-webhooks button{transition:filter .18s,border-color .18s,box-shadow .18s,background .18s}
#page-slips button:hover:not(:disabled),#page-webhooks button:hover:not(:disabled){filter:brightness(1.12)}
#page-slips button:focus-visible,#page-webhooks button:focus-visible{outline:3px solid var(--shop-9edcff,#9edcff);outline-offset:2px}

/* Introduction and four-step guide */
.slip-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:23px 27px;border-radius:20px;background:linear-gradient(110deg,rgba(28,88,143,.27),rgba(16,30,51,.98) 50%,rgba(9,22,40,.97));border:1px solid var(--shop-2c517a,#2c517a);box-shadow:0 10px 30px rgba(0,0,0,.16);margin:0 0 15px}
.slip-hero-heading{display:flex;gap:17px;align-items:center;min-width:0}
.slip-hero-mark{flex:0 0 59px;height:59px;display:grid;place-items:center;color:var(--st-text);border-radius:17px;background:linear-gradient(140deg,var(--shop-126bbb,#126bbb),var(--shop-1fb5ff,#1fb5ff));box-shadow:0 10px 24px var(--shop-0879bf3e,#0879bf3e);font-size:27px}
.slip-hero-mark svg{width:30px;height:30px}
.slip-eyebrow{font-size:10px;letter-spacing:1.45px;font-weight:600;color:var(--st-text);margin-bottom:6px}
.slip-hero h2{color:var(--st-text);font-weight:600;font-size:27px;line-height:1.3;margin:0 0 4px;letter-spacing:-.4px}
.slip-hero p{color:var(--st-text);font-size:12px;line-height:1.65;margin:0}
.slip-hero-meta{display:flex;align-items:flex-end;flex-direction:column;gap:10px;white-space:nowrap}
.slip-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--st-text);background:var(--shop-0b344f,#0b344f);border:1px solid var(--shop-1b6282,#1b6282);padding:7px 11px;border-radius:999px;font-size:11px}
.slip-private-tag{font-size:11px;color:var(--st-text);background:#11423666;padding:6px 9px;border-radius:8px;border:1px solid #22735d77}
.slip-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:13px}
.slip-steps span{display:flex;align-items:center;gap:10px;padding:10px 15px;color:var(--st-text);border:1px solid var(--shop-1d3858,#1d3858);background:var(--shop-0e1b2f,#0e1b2f);border-radius:11px;font-size:12px;white-space:nowrap}
.slip-steps b{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:8px;font-size:11px;background:var(--shop-173858,#173858);color:var(--st-text)}
.slip-warning{margin:0 0 16px;padding:11px 16px;border-radius:10px;border:1px solid #755634;background:#372a19b3;color:var(--st-text);font-size:11px;line-height:1.7}
.slip-warning strong{color:var(--st-text)}

/* Main two-column studio */
.slip-container{display:grid;grid-template-columns:minmax(270px,322px) minmax(0,1fr);gap:17px;align-items:start}
.slip-settings-column,.slip-preview-column{min-width:0}
.slip-section{border-radius:17px;border:1px solid var(--shop-263f62,#263f62);background:linear-gradient(165deg,var(--shop-101f34,#101f34),var(--shop-0e1a2d,#0e1a2d));box-shadow:0 8px 25px var(--shop-02091228,#02091228);padding:19px 20px;margin:0 0 15px;color:var(--st-text);min-width:0}
.slip-section-heading{display:flex;gap:11px;align-items:center;margin-bottom:16px}
.slip-section-heading h3{color:var(--st-text);font-size:16px;font-weight:600;line-height:1.4;margin:0 0 2px}
.slip-section-heading small{display:block;font-size:11px;color:var(--st-text)}
.slip-step-number{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--shop-0e3557,#0e3557);border:1px solid var(--shop-205681,#205681);color:var(--st-text);font-weight:600;font-size:12px}
.slip-section>label:not(.slip-toggle):not(.slip-upload-zone):not(.slip-verify),.slip-tools label{display:block;margin:0 0 6px;color:var(--st-text);font-weight:500;font-size:12px}
.slip-section select,.slip-section input:not([type=checkbox]):not([type=file]),.slip-section textarea{width:100%;height:43px;min-height:43px;border-radius:10px;background:var(--shop-091627,#091627);border:1px solid var(--shop-2c517b,#2c517b);color:var(--st-text);padding:8px 12px;margin:0 0 12px;outline-offset:2px}
.slip-section select:focus,.slip-section input:focus-visible,.slip-section textarea:focus{border-color:var(--shop-45bfff,#45bfff);outline:2px solid var(--shop-45bfff66,#45bfff66)}
.slip-privacy-note{background:var(--shop-0c2a36,#0c2a36);color:var(--st-text)!important;border:1px solid var(--shop-245a59,#245a59);border-radius:9px;font-size:10px!important;padding:10px 11px;margin:10px 0 0!important;line-height:1.6}
.slip-section p,.slip-note{color:var(--st-text);font-size:12px;line-height:1.7}
.slip-upload-zone{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:151px;width:100%;margin:0!important;padding:17px 11px;text-align:center;border:1.5px dashed var(--shop-3c81b8,#3c81b8);border-radius:12px;background:linear-gradient(145deg,var(--shop-0c2844,#0c2844),var(--shop-0b1d35,#0b1d35));cursor:pointer;color:var(--st-text)!important;transition:background .18s,border-color .18s}
.slip-upload-zone:hover,.slip-upload-zone.drag-active,.slip-upload-zone:focus-within{background:var(--shop-15385a,#15385a);border-color:var(--shop-73d3ff,#73d3ff)}
.slip-upload-zone strong{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slip-upload-zone>span:not(.slip-upload-icon){font-size:10px;color:var(--st-text)}
.slip-upload-zone small{font-size:10px;color:var(--st-text)}
.slip-upload-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--st-text);background:var(--shop-154e78,#154e78);margin-bottom:5px}
.slip-upload-icon svg{width:22px;height:22px}
#slipFile{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0}

/* Mask switches */
.slip-toggle-list{border:1px solid var(--shop-223c5c,#223c5c);background:var(--shop-0b182a,#0b182a);border-radius:12px;overflow:hidden}
.slip-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:13px;padding:10px 12px;min-height:43px;margin:0!important;color:var(--st-text)!important;cursor:pointer;border-bottom:1px solid var(--shop-1b314d,#1b314d);font-size:12px!important;line-height:1.45}
.slip-toggle:last-child{border-bottom:none}
.slip-toggle:hover{background:var(--shop-122842,#122842)}
.slip-toggle span{min-width:0;flex:1}
.slip-toggle em{display:block;font-style:normal;font-size:10px;color:var(--st-text);margin-top:2px}
.slip-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;display:block;flex:0 0 34px;width:34px!important;min-width:34px;height:19px!important;min-height:19px!important;margin:0!important;background:var(--shop-35506b,#35506b);border:1px solid var(--shop-516b84,#516b84);border-radius:999px;position:relative;cursor:pointer;transition:background .2s,border-color .2s}
.slip-toggle input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;background:var(--shop-d2dfeb,#d2dfeb);border-radius:50%;transition:transform .2s}
.slip-toggle input[type=checkbox]:checked{background:var(--shop-068cdb,#068cdb);border-color:var(--shop-35bdff,#35bdff)}
.slip-toggle input[type=checkbox]:checked::after{transform:translateX(15px);background:white}
.slip-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--shop-77d6ff,#77d6ff);outline-offset:2px}
.slip-settings-foot{font-size:10px!important;line-height:1.7!important;margin:12px 0 0;color:var(--st-text)!important}

/* Two-image viewer */
.slip-review-card{padding:19px 20px 15px}
.slip-review-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.slip-review-heading .slip-section-heading{margin-bottom:17px}
.slip-review-heading>.slip-badge{align-self:flex-start}
.slip-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.slip-preview{background:var(--shop-0a1627,#0a1627);border:1px solid var(--shop-254369,#254369);border-radius:13px;padding:0;overflow:hidden;min-width:0}
.slip-preview-title{display:flex;align-items:center;gap:8px;min-height:42px;padding:11px 12px;border-bottom:1px solid var(--shop-223e5f,#223e5f);background:var(--shop-13243c,#13243c)}
.slip-preview-title h3{font-size:12px;color:var(--st-text);font-weight:600;margin:0;white-space:nowrap}
.slip-preview-title>span:last-child{font-size:10px;color:var(--st-text);margin-left:auto;white-space:nowrap}
.slip-preview-dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%}
.slip-preview-dot.origin{background:var(--shop-89a9c8,#89a9c8)}.slip-preview-dot.masked{background:#52dbc3}
.slip-preview-title .slip-edit-label{color:var(--st-text)!important}
.slip-image-wrap{display:flex;align-items:flex-start;justify-content:center;min-height:300px;max-height:680px;overflow:auto;background:repeating-conic-gradient(var(--shop-0b1a2e,#0b1a2e) 0% 25%,var(--shop-0e2036,#0e2036) 0% 50%) 50% / 22px 22px;padding:15px}
.slip-preview img{display:block;max-width:100%;width:auto;height:auto;max-height:620px;object-fit:contain;box-shadow:0 10px 24px #0006}
#slipCanvasWrap{width:100%;max-width:100%;position:relative;touch-action:none;box-shadow:0 10px 24px #0006}
#slipMasked,#slipEditor{display:block;width:100%;height:auto}
#slipEditor{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.slip-empty{width:100%;min-height:268px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--st-text);font-size:11px}
.slip-empty-symbol{display:grid;place-items:center;width:59px;height:59px;border-radius:18px;border:1px solid var(--shop-254667,#254667);background:var(--shop-112e4a,#112e4a);color:var(--st-text);font-size:31px;line-height:1;margin-bottom:8px}
.slip-empty strong{font-size:13px;color:var(--st-text);font-weight:500}
.slip-empty small{font-size:11px;color:var(--st-text)}
.slip-editor-area{margin-top:15px;padding:14px 15px 8px;border:1px solid var(--shop-233e5d,#233e5d);border-radius:12px;background:var(--shop-0c192b,#0c192b)}
.slip-editor-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.slip-editor-heading strong{font-size:12px;font-weight:600;color:var(--st-text)}
.slip-editor-heading small{font-size:10px;color:var(--st-text)}
.slip-tools{display:flex;gap:7px;align-items:flex-end;flex-wrap:wrap;margin:0}
.slip-tools label{flex:1 1 160px;max-width:220px;min-width:140px}
.slip-tools select{margin:5px 0 0;min-height:38px;height:38px;font-size:11px}
.slip-tools button{flex:0 1 auto;min-height:38px;font-size:11px;padding:8px 11px;margin:0;background:var(--shop-152b46,#152b46);color:var(--st-text);border:1px solid var(--shop-30567b,#30567b);border-radius:9px}
#slipClear{color:var(--st-text);border-color:#69445a}
.slip-review-footer{margin-top:14px}
.slip-verify{display:flex!important;align-items:center;gap:12px;margin:0 0 13px!important;padding:14px;border:1px solid var(--shop-2a5570,#2a5570);border-radius:12px;background:var(--shop-0d3045,#0d3045);color:var(--st-text)!important;cursor:pointer}
.slip-verify input{flex:0 0 19px;width:19px!important;height:19px!important;min-height:19px!important;margin:0!important;accent-color:var(--shop-1ac7ba,#1ac7ba)}
.slip-verify span{display:block;min-width:0}.slip-verify strong{display:block;font-size:12px;font-weight:600;color:var(--st-text)}.slip-verify small{display:block;font-size:10px;color:var(--st-text);margin-top:4px;line-height:1.7}
.slip-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slip-row button{flex:1;min-width:155px}
.slip-actions button{min-height:46px;font-size:12px;font-weight:600;border-radius:10px;padding:11px 15px}
#slipDownload{background:var(--shop-183655,#183655);color:var(--st-text);border:1px solid var(--shop-36739d,#36739d)}
#slipSend{background:linear-gradient(100deg,var(--shop-087adf,#087adf),var(--shop-19b2ff,#19b2ff));color:white;box-shadow:0 6px 17px var(--shop-087bd23b,#087bd23b)}
.slip-section button:disabled{opacity:.43;cursor:not-allowed;box-shadow:none!important;filter:none}
#slipResult,#hookResult{white-space:pre-wrap;margin:12px 0 0;padding:9px 11px;background:var(--shop-0a2637,#0a2637);border:1px solid var(--shop-194662,#194662);border-radius:9px;color:var(--st-text);font-size:11px;min-height:36px;line-height:1.55}

/* Webhook settings receives the same treatment */
.slip-hero-compact{margin-bottom:17px}
.slip-hook-card{max-width:680px;margin:0}
.slip-hook-card .slip-warning{margin:14px 0 0}
.slip-hook-card .slip-row button{max-width:240px}
.slip-hook-card #hookUrl{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.slip-hook-card #hookStatus{margin:14px 0 4px}
#page-webhooks .slip-section>p{margin-top:0}

@media(max-width:1450px){.slip-container{grid-template-columns:minmax(260px,305px) minmax(0,1fr)}.slip-editor-heading{align-items:flex-start;flex-direction:column;gap:3px}.slip-steps span{padding:9px 10px}}
@media(max-width:1170px){.slip-container{grid-template-columns:minmax(235px,285px) minmax(0,1fr);gap:12px}.slip-section{padding:15px}.slip-previews{gap:8px}.slip-image-wrap{padding:8px;min-height:240px}.slip-empty{min-height:222px}.slip-preview-title span:last-child{display:none}.slip-steps{grid-template-columns:repeat(2,1fr)}.slip-hero-meta{display:none}}
@media(max-width:1200px){.slip-container{grid-template-columns:1fr}.slip-settings-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.slip-settings-column .slip-section{margin:0}.slip-settings-column .slip-section:last-child{grid-column:1/-1}.slip-preview-column{margin-top:2px}}
@media(max-width:640px){.slip-hero{padding:18px 15px;border-radius:14px}.slip-hero-mark{flex-basis:43px;height:43px;border-radius:13px}.slip-hero-mark svg{width:24px;height:24px}.slip-hero h2{font-size:21px}.slip-hero p{font-size:11px}.slip-steps{gap:6px}.slip-steps span{font-size:10px;padding:8px}.slip-steps b{flex-basis:23px;height:23px}.slip-settings-column{grid-template-columns:1fr}.slip-settings-column .slip-section:last-child{grid-column:auto}.slip-previews{grid-template-columns:1fr;gap:12px}.slip-image-wrap{max-height:540px}.slip-review-heading{align-items:flex-start}.slip-verify{padding:12px}.slip-actions{flex-direction:column}.slip-actions button{width:100%;min-width:0}.slip-section{margin-bottom:12px}.slip-editor-heading{flex-direction:column}.slip-preview-title span:last-child{display:inline}.slip-upload-zone{min-height:135px}.topbar #breadcrumb{font-size:11px}}