/* NAQSH admin. Neutral Shopify-style shell: dark top bar, grey canvas, white cards. One accent (brand terracotta) for focus/active. */
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-600.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bagel Fat One";src:url(/assets/fonts/bagel-fat-one.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  color-scheme:light;
  --canvas:#F1F1F0; --card:#FFFFFF; --ink:#1F1F1F; --ink-2:#4A4A4A; --muted:#6B6B6B; --line:#E3E3E1; --line-2:#D2D2CF;
  --hover:#F6F6F5; --top:#1A1A1A; --accent:#C4552E; --accent-soft:#F8E9E3;
  --series:#2a78d6; --series-soft:#2a78d61f; --prev:#9A9A97;
  --good:#1E7A55; --good-bg:#DDF2E7; --warn:#8A5A00; --warn-bg:#FFF0C7; --bad:#B42318; --bad-bg:#FDE4E1; --info:#1D4E9E; --info-bg:#E2ECFB;
  --violet:#5B3FB0; --violet-bg:#ECE6FB; --teal:#0F6C6C; --teal-bg:#DCF2F1; --grey-bg:#ECECEA;
  --r:12px; --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Bagel Fat One","Arial Black",system-ui,sans-serif;
  --shadow:0 1px 0 rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,td.n,.kpi-val{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.top{position:fixed;inset:0 0 auto 0;height:56px;background:var(--top);color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px;z-index:40;padding-top:env(safe-area-inset-top,0)}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;min-width:206px}
.logo b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.2px}
.logo span{font-size:12px;color:#A9A9A9;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.search{flex:1;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:8px;background:#303030;border:1px solid #444;border-radius:10px;padding:0 12px;height:36px;color:#BDBDBD}
.search:focus-within{background:#fff;color:var(--ink);border-color:#fff}
.search input{flex:1;background:none;border:0;outline:0;height:100%;color:inherit;min-width:0}
.search input::placeholder{color:#9A9A9A}
.top-right{display:flex;align-items:center;gap:12px}
.top-link{font-size:13px;font-weight:600;color:#E8E8E8;text-decoration:none;padding:7px 12px;border-radius:8px;background:#303030}
.top-link:hover{background:#3d3d3d}
.live-pill{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#E8E8E8;padding:7px 11px;border-radius:999px;background:#2A2A2A}
.live-pill i{width:8px;height:8px;border-radius:50%;background:#6B6B6B}
.live-pill.on i{background:#35C27E;box-shadow:0 0 0 3px #35C27E33;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #35C27E00}}
.icon-btn{background:none;border:0;color:inherit;width:36px;height:36px;border-radius:8px;display:none;place-items:center;cursor:pointer}
.icon-btn:hover{background:#ffffff14}

.side{position:fixed;top:56px;bottom:0;left:0;width:232px;padding:12px 10px;overflow:auto;background:var(--canvas);border-right:1px solid var(--line);z-index:30;display:flex;flex-direction:column;gap:2px}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:600;color:var(--ink-2)}
.side a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex:none}
.side a:hover{background:#E6E6E4}
.side a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.side a.on svg{color:var(--accent)}
.side em{margin-left:auto;font-style:normal;font-size:12px;background:var(--ink);color:#fff;border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.side em:empty{display:none}
.side-sep{flex:1;min-height:16px}
.scrim{position:fixed;inset:0;background:#0006;z-index:29}

.main{margin:56px 0 0 232px;padding:24px 28px 80px;max-width:1360px;outline:0}
.loading{color:var(--muted);padding:40px 0}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:22px;line-height:1.2;margin:0;font-weight:700;letter-spacing:-.01em}
.page-head .sub{color:var(--muted)}
.page-head .grow{flex:1}

/* ---------- primitives ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card h2{font-size:14px;margin:0 0 12px;font-weight:700;display:flex;align-items:center;gap:8px}
.card h2 .grow{flex:1}
.card h2 a,.card h2 button.link{font-weight:600;font-size:13px}
.card.flush{padding:0;overflow:hidden}
.card.flush>h2{padding:14px 16px 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
.stack{display:grid;gap:16px;align-content:start}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 0 rgba(0,0,0,.05);font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap;color:var(--ink)}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--ink);color:#fff;box-shadow:inset 0 -1px 0 #000,0 1px 0 rgba(0,0,0,.2)}
.btn.primary:hover{background:#333}
.btn.danger{color:var(--bad)}
.btn.primary.danger-bg{background:var(--bad);box-shadow:none}
.btn.wa{background:#1A9E4B;color:#fff;box-shadow:none}
.btn.wa:hover{background:#178A41}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:default}
button.link{background:none;border:0;padding:0;color:var(--info);cursor:pointer;font-weight:600}
a.link{color:var(--info);text-decoration:none;font-weight:600}
a.link:hover,button.link:hover{text-decoration:underline}
.seg{display:inline-flex;background:#E4E4E2;border-radius:9px;padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:5px 11px;border-radius:7px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.field{display:grid;gap:5px}
.field>span{font-weight:600;font-size:13px}
.field small{color:var(--muted);font-size:12px}
input.in,select.in,textarea.in{width:100%;height:36px;border:1px solid var(--line-2);border-radius:8px;padding:0 10px;background:#fff}
textarea.in{height:auto;min-height:76px;padding:8px 10px;resize:vertical}
input.in:focus,select.in:focus,textarea.in:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch i{width:36px;height:20px;border-radius:999px;background:#C9C9C6;position:relative;transition:.15s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:.15s}
.switch input:checked+i{background:var(--good)}
.switch input:checked+i::after{left:18px}
.switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px -16px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.copy{display:flex;gap:6px;align-items:center;background:#F6F6F5;border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 10px}
.copy code{flex:1;overflow:auto;white-space:nowrap}

/* badges (always text + colour) */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--grey-bg);color:var(--ink-2);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.badge.plain::before{display:none}
.b-new{background:var(--warn-bg);color:var(--warn)}
.b-confirmed{background:var(--info-bg);color:var(--info)}
.b-printing{background:var(--violet-bg);color:var(--violet)}
.b-shipped{background:var(--teal-bg);color:var(--teal)}
.b-delivered{background:var(--good-bg);color:var(--good)}
.b-returned{background:var(--bad-bg);color:var(--bad)}
.b-cancelled{background:var(--grey-bg);color:var(--muted)}
.b-live{background:var(--good-bg);color:var(--good)}
.b-draft{background:var(--grey-bg);color:var(--muted)}
.b-risk{background:var(--bad-bg);color:var(--bad)}
.b-warn{background:var(--warn-bg);color:var(--warn)}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0}
.kpi{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:2px;min-width:0}
.kpi:nth-child(4n){border-right:0}
.kpi:nth-last-child(-n+4){border-bottom:0}
.kpi-label{color:var(--muted);font-weight:600;font-size:12.5px;display:flex;gap:6px;align-items:center}
.kpi-label abbr{text-decoration:none;cursor:help;border-bottom:1px dotted var(--line-2)}
.kpi-val{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.kpi-foot{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:26px}
.delta{font-size:12px;font-weight:700;white-space:nowrap}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)} .delta.flat{color:var(--muted)}
.spark{width:96px;height:26px;flex:none}
.spark path{fill:none;stroke:var(--series);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}

/* ---------- charts ---------- */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px}
.chart .ln{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln.prev{stroke:var(--prev);stroke-dasharray:4 4;stroke-width:1.6}
.chart .area{fill:var(--series-soft)}
.chart .bar{fill:var(--series)}
.chart .bar.dim{opacity:.35}
.chart .xh{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{fill:var(--series);stroke:#fff;stroke-width:2}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.4;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px));z-index:5;box-shadow:0 6px 18px #0003}
.tip b{font-weight:700}
.tip .k{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:0 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:0;border-top:2px solid var(--series)}
.legend i.prev{border-top:2px dashed var(--prev)}
.big-num{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}

/* horizontal bar list */
.hbars{display:grid;gap:10px}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.hbar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hbar .val{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;font-size:13px}
.hbar .track{grid-column:1/-1;height:8px;border-radius:4px;background:#EEEEEC;overflow:hidden}
.hbar .fill{height:100%;border-radius:0 4px 4px 0;background:var(--series);min-width:2px}
.funnel .hbar .fill{background:var(--series)}
.funnel .drop{grid-column:1/-1;font-size:12px;color:var(--muted)}

/* ---------- tables ---------- */
.tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:8px 12px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:8px 8px 0 0;white-space:nowrap;position:relative}
.tabs button:hover{color:var(--ink);background:var(--hover)}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.tabs button span{font-size:11.5px;background:var(--grey-bg);border-radius:999px;padding:0 7px;margin-left:5px;color:var(--ink-2)}
.toolbar{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar input.in{max-width:340px;height:32px}
.bulk{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#F6F6F5;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFAF9}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl tr.sel td{background:#F2F6FD}
.tbl th.n,.tbl td.n{text-align:right}
.tbl td.chk,.tbl th.chk{width:36px;padding-right:0}
.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.tbl .who{font-weight:600}
.tbl .items{color:var(--ink-2);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#EEEEEC;display:grid;place-items:center;font-size:11px;color:var(--muted);flex:none;border:1px solid var(--line)}
.pcell{display:flex;align-items:center;gap:10px;font-weight:600}

/* ---------- drawer (order / customer detail) ---------- */
.drawer{position:fixed;top:56px;right:0;bottom:0;width:min(560px,100vw);background:var(--canvas);box-shadow:-12px 0 32px #0002;transform:translateX(104%);transition:transform .2s ease;z-index:35;overflow:auto;outline:0}
.drawer.open{transform:none}
.dr-head{position:sticky;top:0;z-index:2;background:var(--canvas);padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dr-head h2{margin:0;font-size:18px}
.dr-head .x{margin-left:auto}
.dr-body{padding:16px 18px 40px;display:grid;gap:14px}
.line-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.line-item:first-of-type{border-top:0;padding-top:0}
.ptext{display:inline-block;font-size:20px;font-weight:700;background:var(--accent-soft);color:#7A2E14;padding:2px 10px;border-radius:8px;margin:4px 0;letter-spacing:.01em}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:14px 1fr;gap:10px;padding-bottom:12px;position:relative}
.timeline li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line-2);margin-top:5px;box-shadow:0 0 0 3px var(--canvas)}
.timeline li::after{content:"";position:absolute;left:4.5px;top:16px;bottom:0;width:1px;background:var(--line-2)}
.timeline li:last-child::after{display:none}
.timeline li:first-child::before{background:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.alert{border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;font-weight:500}
.alert.bad{background:var(--bad-bg);color:#7A1A12}
.alert.warn{background:var(--warn-bg);color:#5C3D00}
.alert.info{background:var(--info-bg);color:#143870}
.alert.good{background:var(--good-bg);color:#14513A}
.alert b{font-weight:700}

/* todo list on home */
.todo{display:grid;gap:0}
.todo a{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);text-decoration:none;font-weight:600}
.todo a:first-child{border-top:0}
.todo a:hover{background:var(--hover)}
.todo .cnt{min-width:30px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:12.5px;padding:0 8px}
.todo .go{margin-left:auto;color:var(--muted)}
.todo .done{color:var(--muted);font-weight:500;padding:14px 16px}

/* reviews */
.rev{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.rev:first-child{border-top:0}
.stars{color:#B7791F;letter-spacing:1px}
.rev img{width:64px;height:64px;object-fit:cover;border-radius:8px}

/* events */
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px 16px;border-top:1px solid var(--line);align-items:center;font-size:13px}
.ev:first-child{border-top:0}

/* toast + modal */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;box-shadow:0 8px 24px #0004;max-width:calc(100vw - 32px)}
.modal{position:fixed;inset:0;background:#0007;z-index:70;display:grid;place-items:center;padding:16px}
.modal-box{background:var(--card);border-radius:14px;max-width:420px;width:100%;padding:18px;display:grid;gap:12px;box-shadow:0 20px 50px #0005}
.modal-box h3{margin:0;font-size:16px}
.modal-box .row{justify-content:flex-end}

/* print: packing slips */
#print{display:none}
@media print{
  @page{size:105mm 148mm;margin:6mm}
  body{background:#fff}
  body>*:not(#print){display:none!important}
  #print{display:block!important}
  .slip{page-break-after:always;font:11pt/1.35 var(--font);color:#000}
  .slip:last-child{page-break-after:auto}
  .slip h1{font-family:var(--display);font-weight:400;font-size:18pt;margin:0}
  .slip .ref{font-size:16pt;font-weight:700}
  .slip .cod{border:2px solid #000;border-radius:6px;padding:6px 8px;font-size:15pt;font-weight:700;margin:6px 0}
  .slip .to{border-top:1px dashed #000;border-bottom:1px dashed #000;padding:6px 0;margin:6px 0}
  .slip .it{padding:3px 0;border-bottom:1px solid #ddd}
  .slip .pt{font-size:15pt;font-weight:700}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(4n){border-right:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .kpi:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:900px){
  .icon-btn{display:grid}
  .logo{min-width:0}
  .side{transform:translateX(-100%);transition:transform .2s;background:var(--canvas);box-shadow:8px 0 24px #0002;width:250px}
  .side.open{transform:none}
  .main{margin-left:0;padding:16px 14px 80px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .top-link{display:none}
  .search{max-width:none}
}
@media (max-width:640px){
  .top{gap:8px;padding:0 8px}
  .logo span{display:none}
  .logo{flex:none}
  .logo b{font-size:18px}
  .search{padding:0 10px;gap:6px}
  .live-pill span{display:none}
  .live-pill{padding:7px}
  .kpi-val{font-size:19px}
  .spark{width:64px}
  .form .two{grid-template-columns:1fr}
  /* tables become stacked rows */
  .tbl.cards thead{display:none}
  .tbl.cards tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .tbl.cards td{padding:0;border:0;background:none!important}
  .tbl.cards td.chk{grid-row:span 3;padding-top:2px}
  .tbl.cards td[data-h]::before{content:attr(data-h) " ";color:var(--muted);font-size:12px}
  .tbl.cards td.hide-m{display:none}
  .tbl.cards td.n{text-align:right}
  .tbl.cards .items{max-width:none;white-space:normal}
  .dr-head{top:0}
}
/* order lists inside the side panel always use the compact card rows */
.drawer .tbl.cards thead{display:none}
.drawer .tbl.cards tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.drawer .tbl.cards td{padding:0;border:0;background:none!important}
.drawer .tbl.cards .items{max-width:none;white-space:normal}
.drawer .tbl.cards td.n{text-align:right}

.song-line{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:8px;border-radius:10px;background:var(--bg, #f4f4f2)}
.song-line > img{border-radius:8px;object-fit:cover;flex:none}
.song-code{display:block;width:220px;max-width:100%;height:auto;margin-top:8px;border-radius:6px;background:#fff}
.slip-code{display:block;width:180px;height:auto;margin:4px 0}

/* storefront editor */
.sf-secs{display:grid;gap:10px}
.sf-sec{padding:0}
.sf-sec > summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.sf-sec > summary::-webkit-details-marker{display:none}
.sf-sec.off > summary b{color:var(--muted);text-decoration:line-through}
.sf-sec .muted{font-size:13px;max-width:34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-grip{width:24px;height:24px;border-radius:6px;background:#EDEDEB;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.sf-on{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.sf-body{padding:4px 14px 14px;border-top:1px solid var(--line);display:grid;gap:12px}
.sf-items{display:grid;gap:8px}
.sf-item{display:grid;gap:8px;padding:10px;border-radius:10px;background:#F6F6F4;border:1px solid var(--line)}
.sf-item .btn.sm{justify-self:end}
.btn.sm{height:26px;padding:0 8px;font-size:12px}
.sf-img{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sf-img img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#eee}
.sf-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;max-height:240px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:8px;background:#fff}
.sf-pick{display:flex;align-items:center;gap:6px;font-size:13px}
.sf-pre{display:flex;align-items:center}
.sf-pre span{padding:0 6px 0 0;color:var(--muted);font-weight:600}
.req-img{display:block;margin-top:10px;width:160px;border-radius:10px}
.sf-sec > summary .grow{flex:1}
/* connected apps */
.app-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none;background:#fff}
.app-row:hover{border-color:var(--ink)}
.sf-picks.ev{grid-template-columns:1fr;max-height:320px}
.sf-pick code{font-size:12px}
.cp-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start}
.cp-grid .two{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.cp-grid{grid-template-columns:1fr}}
.line-edit{border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;background:#fff}