/* Sellhelm - the finish.
   panel.css says what everything is; this says how it feels. It loads after panel.css and
   only changes surfaces, type, spacing, colour and motion - never layout logic - so the two
   can be read apart.

   The look is the lock screen's, carried through the whole panel:
     - one gradient (cobalt to violet) that means "this is the thing to press" and nothing else
     - a cool paper page, white cards with a layered shadow, and hairline borders
     - Segoe UI Variable, tight headings, tabular figures
     - motion only where it explains something (a page settling in, a button answering)  */

:root{
  --g1:var(--pc-3d7bff,#3d7bff);--g2:var(--pc-7a3cf5,#7a3cf5);
  --grad:linear-gradient(135deg,var(--pc-3d7bff,#3d7bff) 0%,var(--pc-7a3cf5,#7a3cf5) 100%);
  --ink:var(--pc-0c1123,#0c1123);--muted:var(--pc-66708a,#66708a);--line:var(--pc-e5e8f1,#e5e8f1);--bg:var(--pc-f2f4fa,#f2f4fa);
  --brand:var(--pc-2c58e0,#2c58e0);--brand-dark:var(--pc-2246c0,#2246c0);--brand-wash:var(--pc-eef2ff,#eef2ff);
  --radius:16px;
  --shadow:0 1px 2px rgba(var(--pcr-16-24-64,16,24,64),.05),0 10px 26px -16px rgba(var(--pcr-16-24-64,16,24,64),.24);
  --shadow-up:0 1px 2px rgba(var(--pcr-16-24-64,16,24,64),.06),0 18px 34px -18px rgba(var(--pcr-28-40-120,28,40,120),.42);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ring:0 0 0 4px rgba(var(--pcr-76-110-255,76,110,255),.18);
}

/* ---------- ground ---------- */
html{background:var(--bg);scrollbar-color:var(--pc-c3c9dc,#c3c9dc) transparent;scrollbar-width:thin}
body{
  font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(900px 360px at 8% -60px,rgba(var(--pcr-61-123-255,61,123,255),.10),transparent 70%),
    radial-gradient(760px 320px at 96% -70px,rgba(var(--pcr-122-60-245,122,60,245),.08),transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
}
::selection{background:rgba(var(--pcr-92-110-255,92,110,255),.24)}
h1,h2,h3{font-family:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pc-6d8dff,#6d8dff);outline-offset:2px;border-radius:8px}
main{max-width:1880px;padding:22px clamp(14px,2vw,32px) 56px}
.n,.tbl td,.stat .v,.ov-tile .v,.fin-card b{font-variant-numeric:tabular-nums}

/* ---------- the header ---------- */
.top{
  padding:10px clamp(14px,2vw,32px);gap:20px;
  background:linear-gradient(180deg,rgba(var(--pcr-14-19-37,14,19,37),.96),rgba(var(--pcr-9-13-27,9,13,27),.94));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 34px -22px rgba(var(--pcr-6-10-30,6,10,30),.85);
}
/* a thread of the brand colour along the bottom edge */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--pcr-93-120-255,93,120,255),.75) 30%,rgba(var(--pcr-146-98-255,146,98,255),.75) 70%,transparent 100%)}
.brand{gap:11px}
.brand img{border-radius:9px;box-shadow:0 6px 18px -6px rgba(var(--pcr-96-84-255,96,84,255),.75)}
.brand small{color:var(--pc-6f7a96,#6f7a96);font-weight:500;letter-spacing:.02em}
#nav{gap:3px}
#nav a{position:relative;padding:8px 13px;border-radius:10px;color:var(--pc-aeb8d0,#aeb8d0);font-weight:560;font-size:13.5px;letter-spacing:.005em;transition:background .18s,color .18s}
#nav a:hover{background:rgba(255,255,255,.07);color:#fff}
#nav a.on{background:rgba(255,255,255,.08);color:#fff}
#nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--grad)}
.cnt{background:var(--grad);padding:1px 7px;font-size:10.5px;box-shadow:0 4px 10px -4px rgba(var(--pcr-92-82-255,92,82,255),.8)}
.dot{width:9px;height:9px}
.dot.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.dot.off{background:#f0614c;box-shadow:0 0 0 3px rgba(240,97,76,.2)}
.topright{gap:14px}
.top .lock-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.top .lock-btn:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);box-shadow:none}

/* ---------- buttons ---------- */
button{padding:8px 14px;border-radius:10px;font-weight:600;border-color:var(--pc-dde1ee,#dde1ee);letter-spacing:.005em;
  transition:background .16s,border-color .16s,box-shadow .16s,transform .16s,color .16s,filter .16s}
button:hover:not(:disabled){background:var(--pc-f6f8fd,#f6f8fd);border-color:var(--pc-c5cde3,#c5cde3)}
button:active:not(:disabled){transform:translateY(1px)}
button.primary{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -12px rgba(var(--pcr-92-82-255,92,82,255),.85),inset 0 1px 0 rgba(255,255,255,.24)}
button.primary:hover:not(:disabled){background:var(--grad);border-color:transparent;filter:brightness(1.08);
  box-shadow:0 14px 28px -12px rgba(var(--pcr-92-82-255,92,82,255),.95),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-1px)}
button.primary:active:not(:disabled){transform:translateY(0)}
button.danger{border-color:#f3cbc6}
button.danger:hover:not(:disabled){background:var(--red-wash);border-color:#eeaaa2}
button.ghost{background:transparent}
button:disabled{opacity:.45}
.spin{border-width:2px}

/* ---------- one button system ----------
   Every plain, primary, danger, ghost and small button shares one height, one radius, one weight
   and one way of centring its label, so a row that mixes them still lines up.
     button            38px   the normal button
     button.sm         32px   inside a table row or a card header
     .toolbar button   38px   always: it sits beside 38px fields
     .primary          the one thing to press (the brand gradient)
     .danger           red text on white; turns pink on hover
   Tabs, the period switch, order cards and the Overview's clickable cards are their own components. */
button:not([class]),button.primary,button.danger,button.sm,button.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 16px;font-size:14px;line-height:1.2;font-weight:600;border-radius:10px;white-space:nowrap}
button.sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:9px}
.toolbar button.sm,.page-head button.sm{min-height:38px;padding:0 16px;font-size:14px;border-radius:10px}
button.danger{color:var(--red);background:#fff;border-color:#f0c4be}
button.danger:hover:not(:disabled){background:#fdeceb;border-color:#e59a92;color:#a51f15}
button.ghost{background:transparent;border-color:transparent;color:var(--pc-404a63,#404a63)}
button.ghost:hover:not(:disabled){background:var(--pc-eef1f8,#eef1f8);border-color:transparent}
button .spin{margin:0}
.top button{min-height:36px}
.ta-list button,.tabs button{min-height:0;display:flex;justify-content:flex-start;gap:0;white-space:normal;padding:9px 12px;border-radius:0}
.tabs button{padding:9px 15px;border-radius:8px 8px 0 0}
.photo .mv button{min-height:0;display:block}
@media(max-width:560px){
  button:not([class]),button.primary,button.danger,button.sm{white-space:normal}
}

/* ---------- fields ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select{min-height:38px}
input,select,textarea{padding:8px 12px;border-radius:10px;border-color:var(--pc-dde1ee,#dde1ee);background:#fff;
  transition:border-color .16s,box-shadow .16s,background .16s}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:var(--pc-c5cde3,#c5cde3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pc-6d8dff,#6d8dff);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--pc-9aa3ba,#9aa3ba)}
input:disabled,select:disabled,textarea:disabled{background:var(--pc-f5f6fa,#f5f6fa);color:var(--pc-8a93a8,#8a93a8)}
input[type=checkbox],input[type=radio]{accent-color:var(--pc-4f6ef7,#4f6ef7)}
label{font-size:10.5px;letter-spacing:.075em;font-weight:700;color:var(--pc-6f7893,#6f7893);margin-bottom:6px}
.check,.check label{letter-spacing:0}
select{cursor:pointer}

/* ---------- page heads and cards ---------- */
.page-head{margin-bottom:16px;align-items:flex-end}
h1{font-size:27px;font-weight:720;letter-spacing:-.03em;line-height:1.12;margin:0 0 5px}
h2{font-size:15px;font-weight:650;letter-spacing:-.01em}
h3{font-size:13.5px;font-weight:650;letter-spacing:-.005em}
.page-head .muted,.page-head .sub{font-size:13px;color:var(--muted)}
.card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow);margin-bottom:14px}
.card>header{padding:12px 18px;border-bottom-color:var(--pc-edf0f6,#edf0f6)}
.card>.body{padding:16px 18px}
.drawer{border-radius:var(--radius)}
.drawer-head{padding:12px 20px;background:var(--pc-fafbfe,#fafbfe);border-radius:var(--radius) var(--radius) 0 0;border-bottom-color:var(--pc-edf0f6,#edf0f6)}
.drawer .body{padding:14px 18px}
details.card summary{padding:12px 18px;font-weight:650;transition:background .15s}
details.card summary:hover{background:var(--pc-fafbfe,#fafbfe)}
.lead{color:var(--pc-3c4560,#3c4560)}
.hint{color:var(--muted)}
code{background:var(--pc-eef1f8,#eef1f8);color:var(--pc-33405f,#33405f);padding:2px 6px;border-radius:6px}
hr{border:0;border-top:1px solid var(--line)}

.stats{gap:12px;margin-bottom:14px}
.stat{padding:13px 16px;border-radius:var(--radius);border-color:var(--line)}
.stat .v{font-size:26px;font-weight:720;letter-spacing:-.03em;line-height:1.15}
.stat .l{font-size:10.5px;letter-spacing:.075em;font-weight:650;margin-top:5px}

.note{border-radius:13px;padding:12px 16px;border:1px solid transparent;line-height:1.5}
.note.info{border-color:var(--pc-d7e1ff,#d7e1ff)}.note.good{border-color:#bfe9d3}.note.warn{border-color:#f2dfb2}.note.bad{border-color:#f5c9c4}
.banner{max-width:1880px;padding:0 clamp(14px,2vw,32px);margin-top:14px}

/* ---------- tables ---------- */
.tbl th{font-size:10.5px;font-weight:700;letter-spacing:.075em;color:var(--pc-6f7893,#6f7893);padding:11px 12px;border-bottom:1px solid var(--line);transition:color .15s}
.tbl th:hover{color:var(--ink)}
.tbl td{padding:12px;border-bottom:1px solid var(--pc-eef0f6,#eef0f6)}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover td{background:var(--pc-f8f9ff,#f8f9ff)}
.tbl-wrap{border-radius:0 0 var(--radius) var(--radius)}
.ptitle{font-weight:620;color:var(--ink)}
.thumb{border-radius:10px;background:var(--pc-eef1f8,#eef1f8);border:1px solid var(--pc-e8ebf3,#e8ebf3)}
.badge{padding:2px 9px;font-size:11px;font-weight:650;letter-spacing:.01em;white-space:nowrap;background:var(--pc-eef1f8,#eef1f8);color:var(--pc-404a63,#404a63)}
.badge.sup{background:var(--pc-e6eeff,#e6eeff);color:var(--pc-1f3fa6,#1f3fa6)}
.retbar{height:5px;border-radius:5px;background:var(--pc-eaedf5,#eaedf5)}.retbar i{border-radius:5px}
.acts button{margin-right:5px}
.toolbar{padding:10px 18px;gap:10px;border-bottom-color:var(--pc-edf0f6,#edf0f6)}
.toolbar input[type=search]{max-width:300px}
.pager{padding:10px 20px}

/* on a laptop the row's three buttons stack, so the product table fits without a sideways scroll; a wider screen keeps them in a line */
@media(max-width:1600px){
  :is(#pBody,#dBody) td.acts{white-space:normal;width:1%;min-width:86px}
  :is(#pBody,#dBody) td.acts button{display:flex;width:100%;min-height:0;margin:0 0 3px;padding:4px 8px;line-height:1.35}
  :is(#pBody,#dBody) td.acts button:last-child{margin-bottom:0}
  .tbl:is(:has(#pBody),:has(#dBody)) td,.tbl:is(:has(#pBody),:has(#dBody)) th{padding-left:9px;padding-right:9px}
  .tbl:is(:has(#pBody),:has(#dBody)) .prod{min-width:205px}
  .tbl:is(:has(#pBody),:has(#dBody)) td{padding-top:10px;padding-bottom:10px}
  .priceedit{width:82px}
}
/* a long note under a price (a held change, a target) wraps instead of stretching the column */
.tbl td.n .sub{white-space:normal;max-width:24ch;margin-left:auto;line-height:1.35}
.grid+.row,.grid+p.hint{margin-top:16px}

/* ---------- tabs, steps, guides, lists ---------- */
.tabs{gap:6px;border-bottom-color:var(--line)}
.tabs button{padding:9px 15px;font-weight:620;transition:color .15s,border-color .15s,background .15s}
.tabs button:hover:not(:disabled){background:var(--pc-f4f6fc,#f4f6fc);border-color:transparent;border-bottom-color:var(--pc-c5cde3,#c5cde3)}
.tabs button.on{color:var(--brand-dark);border-bottom-color:transparent;box-shadow:inset 0 -2px 0 var(--g2)}
.tpl-caret{color:var(--pc-a3abc2,#a3abc2);font-size:11px}
.tpl-head{padding:13px 20px;transition:background .15s}
.tpl-head:hover{background:var(--pc-f8f9ff,#f8f9ff)}
.tpl.open>.tpl-head{background:linear-gradient(90deg,var(--pc-eef2ff,#eef2ff),var(--pc-f5f3ff,#f5f3ff))}
.tpl-panel{padding:18px 20px 22px;background:var(--pc-fbfcff,#fbfcff)}
.guide{border-radius:14px;border-color:var(--pc-dfe6fb,#dfe6fb);background:linear-gradient(180deg,var(--pc-fbfcff,#fbfcff),var(--pc-f6f8ff,#f6f8ff));padding:12px 16px}
.step .num,.start .n{background:linear-gradient(135deg,var(--pc-e8eeff,#e8eeff),var(--pc-efeaff,#efeaff));color:var(--brand-dark)}
.step.done .num,.start li.done .n{background:var(--green-wash);color:var(--green)}
.start li.next{background:linear-gradient(90deg,var(--pc-eef2ff,#eef2ff),transparent 85%)}
.bar{height:7px;background:var(--pc-e9ecf5,#e9ecf5)}.bar i{background:var(--grad)}
.copy{border-radius:11px;transition:border-color .15s,background .15s,transform .15s}
.copy:hover{transform:translateY(-1px)}
.ta-list{border-radius:12px;box-shadow:var(--shadow-up);border-color:var(--pc-dfe4f1,#dfe4f1)}
.photo{border-radius:11px}
.preview{border-radius:12px}
.check-box{border-radius:14px}
.ord-box{border-radius:14px}
.ord-state{border-radius:12px}
.ord-sum{border-radius:12px}

/* ---------- surfaces that sit in a row: one radius, one border ---------- */
.fin-card,.ord-card,.ord-strip,.fin-mode,.ov-tile{border-radius:var(--radius);border-color:var(--line)}
.fin-card{padding:14px 16px}
.fin-card b{font-size:24px;font-weight:720;letter-spacing:-.03em}
.fin-card span,.fin-compare span,.ord-strip span{font-size:10.5px;letter-spacing:.075em}
.ord-card{padding:14px 16px;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s,background .18s}
.ord-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.ord-card .n{font-weight:750}
.ord-card.on{outline:0;border-color:var(--pc-6d8dff,#6d8dff);box-shadow:var(--ring),var(--shadow-up);background:linear-gradient(180deg,var(--pc-f3f6ff,#f3f6ff),var(--pc-f7f4ff,#f7f4ff))}
.fin-mode.on{background:linear-gradient(90deg,var(--pc-eef2ff,#eef2ff),var(--pc-f6f3ff,#f6f3ff))}
.fin-meter,.fin-meter i{height:12px}
.fin-card.big,.fin-card.warn,.ord-card{border-top-width:3px}
.ord-journey div.done:before{background:linear-gradient(90deg,#34d399,#10b981)}

/* ---------- the overview ---------- */
.ov-root{gap:14px}
.ov-hero{border-radius:22px;padding:30px 34px 22px;
  background:
    radial-gradient(520px 320px at 92% -10%,rgba(var(--pcr-74-120-255,74,120,255),.42),transparent 70%),
    radial-gradient(460px 300px at 4% 118%,rgba(var(--pcr-138-70-255,138,70,255),.34),transparent 70%),
    linear-gradient(125deg,var(--pc-080c1b,#080c1b) 0%,var(--pc-0f1836,#0f1836) 55%,var(--pc-1b2470,#1b2470) 100%);
  box-shadow:0 30px 60px -34px rgba(var(--pcr-24-32-120,24,32,120),.75),inset 0 1px 0 rgba(255,255,255,.07)}
/* the grid that sits behind the lock screen, faded out toward the edges */
.ov-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 90% at 70% 30%,#000 10%,transparent 78%);mask-image:radial-gradient(80% 90% at 70% 30%,#000 10%,transparent 78%)}
.ov-hero:before{background:none}
.ov-hero-fig{font-weight:760;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ov-hero-label,.ov-now-h{letter-spacing:.16em}
.ov-root button.ov-now{border-radius:14px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s,border-color .18s,transform .18s var(--ease)}
.ov-root button.ov-now:hover:not(:disabled){transform:translateY(-1px)}
.ov-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}
.ov-seg{background:var(--pc-e6e9f5,#e6e9f5)}
.ov-root .ov-seg button.on{box-shadow:0 1px 2px rgba(var(--pcr-16-24-64,16,24,64),.16),0 4px 10px -6px rgba(var(--pcr-16-24-64,16,24,64),.3)}
.ov-tile{padding:14px 18px 16px}
.ov-tile .v{font-size:28px;font-weight:720;letter-spacing:-.03em}
.ov-tile .l{font-size:10.5px;letter-spacing:.075em}
.ov-root button.ov-need{border-radius:16px;box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s,background .18s}
.ov-root button.ov-need:hover:not(:disabled){box-shadow:var(--shadow-up);transform:translateY(-2px)}
.ov-need .ico{border-radius:13px}
.ov-root button.ov-pstep{border-radius:16px;background:var(--pc-fbfcff,#fbfcff);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s,background .18s}
.ov-root button.ov-pstep:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-up)}
.ov-pstep b{font-weight:750;letter-spacing:-.03em}
.ov-clear{border-radius:16px}
.ov-h h2{font-size:16px;font-weight:680}
.ov-empty{border-radius:14px;background:var(--pc-fafbfe,#fafbfe);border-style:dashed}
.ov-tip{border-radius:13px;box-shadow:var(--shadow-up);border-color:var(--pc-dfe4f1,#dfe4f1)}
.ov-root .trk{background:var(--pc-ebeef6,#ebeef6)}
.ov-meter{background:var(--pc-e2eaff,#e2eaff)}
.ov-pic{border-radius:12px}

/* a wide screen: the three "right now" boxes sit side by side instead of stacking, and the title column takes the spare width */
@media(min-width:1500px){
  .ov-hero{padding:24px 34px 18px}
  .ov-hero-now{grid-template-columns:repeat(3,minmax(200px,1fr));min-width:700px;align-content:center}
  .ov-hero-now .ov-now-h{grid-column:1/-1}
  .tbl:has(#pBody) td:nth-child(3){width:99%}  /* Products: tick box, Watch, then the product */
  .tbl:has(#dBody) td:nth-child(2){width:99%}  /* Drafts: tick box and Watch share the first column, then the product */
  .tbl:is(:has(#pBody),:has(#dBody)) .ptitle{max-width:70ch}
}

/* the order desk: shorter rows, so more orders show without scrolling */
.ord-head{padding:9px 18px;gap:14px}
.ord-pic{width:54px;height:54px;border-radius:10px}
.ord-money,.ord-status{min-width:0}
.ord-strip div{padding:10px 16px}

/* ---------- the Suppliers page: a grid of shop cards ----------
   Closed, a card says what matters at a glance (how it reads, what is in use, what is set); open, it
   spans the row and shows the settings. */
.sup-probe{margin-bottom:12px}
.sup-probe .body{padding:12px 16px}
.sup-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 12px}
.sup-bar input[type=search]{width:min(320px,100%)}
.sup-filters{display:flex;flex-wrap:wrap;gap:6px}
.sup-filters .chip{min-height:0;padding:7px 14px;border-radius:99px;border:1px solid var(--pc-dde1ee,#dde1ee);background:#fff;font-size:13px;font-weight:600;color:var(--pc-4b5570,#4b5570);box-shadow:none}
.sup-filters .chip span{margin-left:5px;opacity:.55;font-weight:600}
.sup-filters .chip:hover:not(:disabled){background:var(--pc-f6f8fd,#f6f8fd);border-color:var(--pc-c5cde3,#c5cde3)}
.sup-filters .chip.on{background:var(--pc-eef2ff,#eef2ff);border-color:var(--pc-b6c5fb,#b6c5fb);color:var(--pc-2246c0,#2246c0)}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px;align-items:start}
.sup{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .16s,box-shadow .16s,transform .18s var(--ease)}
.sup:hover{border-color:var(--pc-c2cdf0,#c2cdf0);box-shadow:var(--shadow-up);transform:translateY(-1px)}
.sup:focus-visible{outline:2px solid var(--pc-6d8dff,#6d8dff);outline-offset:2px}
.sup[hidden]{display:none}
.sup>.sup-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto 22px;grid-template-areas:"tile id st caret" "chips chips chips chips";gap:8px 14px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;border-radius:var(--radius)}
.sup:hover>.sup-top{background:var(--pc-fafbff,#fafbff)}
.sup>.sup-top>.tile{grid-area:tile;border-radius:11px}
.sup-id{grid-area:id;min-width:0}
.sup-id b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.sup-host{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-st{grid-area:st;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;white-space:nowrap;color:var(--pc-5a6580,#5a6580)}
.sup-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sup-st.good{color:var(--green)}.sup-st.warn{color:var(--amber)}
.sup-chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:6px;padding-left:58px}
.sup-chip{padding:3px 10px;border-radius:99px;background:var(--pc-f0f2f9,#f0f2f9);color:var(--pc-414a63,#414a63);font-size:12px}
.sup-chip b{font-weight:750}
.sup-draft{background:var(--pc-e6eeff,#e6eeff);color:var(--pc-1f3fa6,#1f3fa6)}
.sup-bad{background:var(--red-wash);color:var(--red)}
.sup-tpl{background:var(--pc-f1ebff,#f1ebff);color:var(--pc-5b34c9,#5b34c9)}
.sup-none{font-size:12px;color:var(--pc-9aa3ba,#9aa3ba)}
.sup-caret{grid-area:caret;position:relative;width:22px;height:22px}
.sup-caret::before{content:"";position:absolute;left:5px;top:7px;width:6px;height:6px;border-right:2px solid var(--pc-8c95ad,#8c95ad);border-bottom:2px solid var(--pc-8c95ad,#8c95ad);transform:rotate(-45deg);transition:transform .18s var(--ease),border-color .18s}
.sup:hover .sup-caret::before,.tpl-grid .tpl:hover .tpl-caret{border-color:var(--pc-4f6ef7,#4f6ef7)}
.sup:hover .sup-caret::before{transform:translateX(3px) rotate(-45deg)}
.sup-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px;padding:18px 20px 20px;border-top:1px solid var(--pc-edf0f6,#edf0f6);background:var(--pc-fbfcff,#fbfcff);border-radius:0 0 var(--radius) var(--radius)}
.sup-body h3{margin:0 0 8px}
.sup-how p{margin:0 0 8px;font-size:13px;color:var(--pc-3c4560,#3c4560)}
.sup-how ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.55}
.sup-how li{margin-bottom:4px}
.sup-visit{display:inline-block;margin-top:10px;font-size:13px;font-weight:600}
.sup-empty{text-align:center;color:var(--muted);padding:32px 0}
@media(max-width:900px){.sup-body{grid-template-columns:1fr}}
@media(max-width:560px){.sup>.sup-top{grid-template-columns:auto minmax(0,1fr) 22px;grid-template-areas:"tile id caret" "st st st" "chips chips chips"}.sup-chips{padding-left:0}}

/* Prime, from the supplier's page: next-day is the one that matters, so it is the loud one */
.badge.prime{display:flex;width:max-content;align-items:center;gap:3px;margin-top:4px;background:var(--pc-dff4ff,#dff4ff);color:var(--pc-075985,#075985);box-shadow:inset 0 0 0 1px var(--pc-b7e2f7,#b7e2f7)}
.badge.prime.soft{background:var(--pc-eef6fb,#eef6fb);color:var(--pc-3c6a86,#3c6a86);box-shadow:inset 0 0 0 1px var(--pc-d5e7f1,#d5e7f1)}
.stat-row .badge+.badge,td .badge+.badge{margin-left:0}

/* ---------- the template design picker ---------- */
.dz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.dz-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .16s,box-shadow .16s}
.dz-card:hover{border-color:var(--pc-c5cde3,#c5cde3);box-shadow:var(--shadow)}
.dz-card.on{border-color:var(--pc-9db2f7,#9db2f7);background:linear-gradient(180deg,var(--pc-f5f8ff,#f5f8ff),#fff);box-shadow:0 0 0 3px rgba(var(--pcr-76-110-255,76,110,255),.12)}
.dz-card b{font-size:14px;letter-spacing:-.005em}
.dz-card .sub{margin:0;line-height:1.4;flex:1}
.dz-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.dz-art{display:block;height:118px;overflow:hidden;padding:8px;border-radius:9px;background:var(--wash,var(--pc-eeeeff,#eef));margin-bottom:4px}
@media(min-width:1000px){.modal .dz-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.dz-mast{display:block;height:26px;border-radius:6px 6px 0 0;background:var(--ink);border-bottom:3px solid var(--acc)}
.dz-gal{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:4px;padding:6px;background:#fff;border-radius:0 0 6px 6px}
.dz-gal i{display:block;aspect-ratio:1;border-radius:3px;background:var(--wash,var(--pc-e6e9f5,#e6e9f5));box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dz-art.hero .dz-gal{grid-template-columns:repeat(4,1fr)}
.dz-art.hero .dz-gal i:first-child{grid-column:1/-1;aspect-ratio:2.4}
.dz-versions{display:grid;gap:8px}
.dz-ver{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.dz-ver b{display:block;font-size:13.5px}
.dz-ver .sub{display:block;margin:0}
.dz-slots{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--pc-fbfcff,#fbfcff)}
.dz-slots b{display:block;font-size:14px}
.dz-slots .sub{display:block;margin-top:2px;max-width:70ch}
.dz-step{display:flex;align-items:center;gap:8px}
.dz-step input{width:70px;text-align:center}
@media(max-width:700px){.dz-slots{grid-template-columns:1fr}}

/* ---------- the Templates page: cards in a grid, like the Suppliers page ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px;align-items:start;margin-bottom:14px}
.tpl-grid .tpl{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .16s,box-shadow .16s}
.tpl-grid .tpl{cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .18s var(--ease)}
.tpl-grid .tpl:hover{border-color:var(--pc-c2cdf0,#c2cdf0);box-shadow:var(--shadow-up);transform:translateY(-1px)}
.tpl-grid .tpl[hidden]{display:none}
.tpl-grid .tpl+.tpl{border-top:1px solid var(--line)}
.tpl-grid .tpl-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"tile name name caret" ". meta badge .";gap:6px 12px;align-items:center;padding:14px 16px;border-radius:var(--radius)}
.tpl-grid .tpl-head>.tile{grid-area:tile;border-radius:11px}
.tpl-grid .tpl-name{grid-area:name}
.tpl-grid .tpl-name b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.tpl-grid .tpl-name .sub{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpl-grid .tpl-meta{grid-area:meta;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.tpl-grid .tpl-head>.badge{grid-area:badge}
.tpl-grid .tpl-caret{grid-area:caret;font-size:10px;color:var(--pc-8c95ad,#8c95ad);transition:transform .18s var(--ease),color .18s}
.tpl-grid .tpl:hover .tpl-caret{transform:translateX(3px)}
/* "Your shop": four fields across on a wide screen, so the card is one short band */
.shop-row label .sub{display:inline;margin:0;font-size:inherit;line-height:inherit;text-transform:none;letter-spacing:0}
@media(min-width:1200px){.shop-row .grid.g2{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- the window: a shop's settings, a template's design and preview ----------
   Opens over a dimmed, blurred page (see modal.js). On a phone it is a sheet from the bottom. */
html.modal-open{overflow:hidden}
.modal{display:none;padding:0;border:0;border-radius:24px;width:min(1120px,calc(100vw - 32px));max-width:none;max-height:min(90vh,940px);background:#fff;color:var(--ink);
  box-shadow:0 60px 140px -40px rgba(var(--pcr-8-12-40,8,12,40),.7),0 0 0 1px rgba(var(--pcr-20-30-90,20,30,90),.08);overflow:hidden;flex-direction:column}
.modal[open]{display:flex;animation:modal-in .34s var(--ease) both}
.modal.closing{animation:modal-out .2s cubic-bezier(.4,0,1,1) both}
.modal::backdrop{background:rgba(var(--pcr-8-12-30,8,12,30),.58);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:modal-fade .3s ease both}
.modal.closing::backdrop{animation:modal-fade-out .2s ease both}
@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modal-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes modal-fade{from{opacity:0}}
@keyframes modal-fade-out{to{opacity:0}}
.modal-head{position:relative;display:flex;align-items:center;gap:14px;padding:20px 18px 16px 24px;border-bottom:1px solid var(--pc-edf0f6,#edf0f6);background:linear-gradient(180deg,var(--pc-fbfcff,#fbfcff),#fff)}
.modal-head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.modal-id{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.modal-id>.tile{border-radius:13px}
.modal-t{min-width:0;flex:1}
.modal-t b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.modal-t .sup-host{font-size:13px}
.modal-x{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pc-6f7893,#6f7893);box-shadow:none}
.modal-x:hover:not(:disabled){background:var(--pc-eef1f8,#eef1f8);color:var(--ink);border-color:transparent}
.modal-body{flex:1;min-height:0;overflow:auto;padding:22px 24px 26px;overscroll-behavior:contain}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-top:1px solid var(--pc-edf0f6,#edf0f6);background:var(--pc-fbfcff,#fbfcff)}
.modal-foot[hidden]{display:none}
.modal-foot .sub{margin:0;max-width:60ch}
.modal-actions{display:flex;gap:10px;flex:none}
.modal-loading{padding:70px 0;text-align:center;color:var(--muted)}
.modal .sup-body{padding:0;border:0;background:none;border-radius:0;gap:8px 40px}
.modal .preview iframe{height:min(62vh,760px)}
.modal [data-pane]:not(.hidden){animation:sm-fade .22s ease both}
@media(max-width:700px){
  .modal{width:100%;max-width:100%;max-height:92vh;margin:auto 0 0;border-radius:22px 22px 0 0}
  .modal-foot{flex-direction:column;align-items:stretch}
  .modal-actions{justify-content:flex-end}
  .modal-body{padding:18px 16px 22px}
  .modal-head{padding:18px 10px 14px 16px}
}
@media(prefers-reduced-motion:reduce){.modal[open],.modal.closing,.modal::backdrop{animation:none}}

/* ---------- toast, dialogs ---------- */
.toast{padding:12px 18px;border-radius:14px;font-size:13.5px;line-height:1.45;
  background:linear-gradient(180deg,rgba(var(--pcr-24-31-54,24,31,54),.97),rgba(var(--pcr-13-18-33,13,18,33),.98));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -18px rgba(var(--pcr-6-10-30,6,10,30),.7),inset 0 1px 0 rgba(255,255,255,.07);
  animation:sm-toast .3s var(--ease) both}
.toast a{color:var(--pc-a8bfff,#a8bfff)}
@keyframes sm-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.fin-dialog,dialog{border-radius:20px;box-shadow:0 40px 90px -28px rgba(var(--pcr-10-14-40,10,14,40),.6)}
.fin-dialog::backdrop,dialog::backdrop{background:rgba(var(--pcr-10-14-32,10,14,32),.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- a page settling in, and the loading skeleton ---------- */
.page-in{animation:sm-rise .42s var(--ease) both}
@keyframes sm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sm-fade{from{opacity:0}to{opacity:1}}
@keyframes sm-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.skel-page{display:grid;gap:16px;animation:sm-fade .3s ease .14s both}
.skel{display:block;border-radius:12px;background:linear-gradient(100deg,var(--pc-e8ebf4,#e8ebf4) 30%,var(--pc-f6f7fc,#f6f7fc) 50%,var(--pc-e8ebf4,#e8ebf4) 70%);background-size:230% 100%;animation:sm-shimmer 1.4s linear infinite}
.skel-h{height:30px;width:min(230px,60%)}
.skel-p{height:14px;width:min(340px,80%);margin-top:-6px}
.skel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.skel-grid .skel{height:96px;border-radius:16px}
.skel-card{height:340px;border-radius:var(--radius)}

/* ---------- narrow screens ---------- */
@media(max-width:900px){
  .top{padding:9px 14px}
  #nav a.on::after{left:10px;right:10px}
  main{padding:20px 14px 48px}
  .banner{padding:0 14px}
  .skel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* a phone: the header is one short row plus the menu, and a template row wraps instead of pushing the page sideways */
@media(max-width:700px){
  .tpl-head{flex-wrap:wrap;gap:6px 10px}
  .tpl-name{flex:1 1 55%;min-width:0}
  .tpl-meta{order:5;flex:1 0 100%;white-space:normal}
}
@media(max-width:560px){
  .brand small{display:none}
  .top{gap:6px 10px}
  .top button{min-height:34px;padding:0 12px;font-size:13px}
  .topright{gap:8px}
}
@media(max-width:560px){
  h1{font-size:23px}
  input,select,textarea{font-size:16px}
  .ov-hero{border-radius:20px;padding:22px 18px 16px}
  .card>header,.toolbar,.pager{padding-left:14px;padding-right:14px}
  .card>.body{padding:16px 14px}
}

@media(prefers-reduced-motion:reduce){
  .page-in,.toast,.skel-page{animation:none}
  .skel{animation:none;background:var(--pc-eceff7,#eceff7)}
  button,input,select,textarea,.ord-card,.ov-root button.ov-need,.ov-root button.ov-pstep,.ov-root button.ov-now,.tbl tbody tr{transition:none}
  .ord-card:hover,.ov-root button.ov-need:hover,.ov-root button.ov-pstep:hover,button.primary:hover{transform:none}
}
@media(forced-colors:active){
  button.primary{border:1px solid ButtonText}
  #nav a.on::after{background:Highlight}
}

/* "Prime next-day" for a visitor who is not a member yet: the badge says so, in a smaller word beside it */
.badge.prime small{margin-left:4px;font-size:10px;font-weight:600;opacity:.75}

/* ---- the "Add the Chrome extension" window */
.ext-status { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .38); font-size: 15px; }
.ext-status i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); animation: extPulse 1.8s ease-out infinite; }
.ext-status.ok { background: rgba(27, 175, 122, .13); border-color: rgba(27, 175, 122, .5); }
.ext-status.ok i { background: #1baf7a; animation: none; }
@keyframes extPulse { 70% { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .ext-status i { animation: none; } }
.ext-steps { list-style: none; counter-reset: ext; margin: 0; padding: 0; display: grid; gap: 14px; }
.ext-steps > li { counter-increment: ext; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ext-steps > li::before { content: counter(ext); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad, linear-gradient(135deg, var(--pc-3d7bff,#3d7bff), var(--pc-7a3cf5,#7a3cf5))); color: #fff; font-weight: 700; }
.ext-steps b { font-size: 16px; }
.ext-steps p { margin: 4px 0 10px; color: var(--muted); line-height: 1.5; }
.ext-steps code, .ext-notes code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--pcr-120-130-160,120,130,160),.16); font-size: .92em; }
.ext-path { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.ext-path input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.ext-notes { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: rgba(var(--pcr-120-130-160,120,130,160),.1); }
.ext-notes p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ext-notes p:last-child { margin-bottom: 0; }
.ext-notes b { color: var(--ink); }

/* The Suppliers page's "Read it" report: which ways of reading the page were
   tried, and what each one found. One line per way, ticked or crossed. */
.ways { list-style: none; padding-left: 0; margin-top: 8px; display: grid; gap: 8px; }
.ways li { line-height: 1.45; }
.ways li b { display: block; font-weight: 600; }
.ways li.ok b { color: var(--ink); }
.ways li.no b { color: var(--muted); font-weight: 550; }
.ways li .sub { display: block; }
.sup-probe .card { margin-top: 12px; }
.sup-probe .photos .photo img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.sup-probe .preview iframe { width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* ---- Competitor research: folded matches, filters, and how a match was proven ---- */
.match-row .badge{max-width:none;overflow:visible;white-space:nowrap;margin-left:6px;vertical-align:1px}
.match-row .badge.good{color:var(--green)} .match-row .badge.warn{color:var(--amber)}
.match-toggle{display:inline-flex;align-items:center;gap:6px;font-weight:650}
.match-toggle[aria-expanded="true"]{background:var(--pc-eef2ff,#eef2ff);border-color:var(--pc-b6c5fb,#b6c5fb);color:var(--pc-2246c0,#2246c0)}
.chip-row{border-bottom:0;padding-top:6px;padding-bottom:6px}
.potential-suppliers{margin:4px 16px 10px;padding:10px 14px;border:1px solid var(--amber-wash);background:var(--amber-wash);border-radius:10px;font-size:13px}
.potential-suppliers summary{cursor:pointer;color:var(--amber)}
.potential-suppliers ul{margin:8px 0 0;padding-left:18px;columns:2}
html[data-theme="dark"] .match-toggle[aria-expanded="true"]{background:rgba(var(--pcr-100-128-255,100,128,255),.2);border-color:var(--pc-5b74d6,#5b74d6);color:var(--pc-cbd6ff,#cbd6ff)}

/* hover a photograph (a listing's or a match's) to see it large; a match's is shown beside the listing's for a quick visual check */
.zoom-pic{position:fixed;z-index:9999;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 50px -12px rgba(var(--pcr-10-15-31,10,15,31),.45);display:flex;gap:8px;max-width:min(92vw,980px)}
.zoom-pic[hidden]{display:none}
.zoom-pic figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.zoom-pic img{display:block;max-width:440px;max-height:62vh;width:auto;height:auto;border-radius:10px;background:#fff;object-fit:contain}
.zoom-pic.two img{max-width:min(44vw,440px)}
.zoom-pic figcaption{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.ord-pic img{cursor:zoom-in}
html[data-theme="dark"] .zoom-pic{background:var(--pc-141d31,#141d31);border-color:var(--pc-2a3550,#2a3550)}

/* ---- Competitor research: the seller list page ---- */
.cr-head{align-items:center;margin-bottom:16px}
.cr-head h1{margin-bottom:2px}
.cr-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media(min-width:1180px){.cr-layout{grid-template-columns:minmax(0,1fr) 340px}.cr-side{position:sticky;top:78px}}
@media(max-width:1179px){.cr-side{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}}
.cr-side{display:flex;flex-direction:column;gap:14px}
.cr-side>*{margin:0}

/* credits */
.cr-credits{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.cr-credits-main{display:flex;flex-direction:column;gap:4px}
.cr-credits-main b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cr-credits-label{font-size:13px;color:var(--muted);font-weight:650}
.cr-credits.low{border-color:var(--amber);background:var(--amber-wash)}
.cr-credits.low .cr-credits-main b{background:none;-webkit-text-fill-color:var(--amber);color:var(--amber)}
.cr-credits.bad{border-color:var(--red);background:var(--red-wash)}
.cr-credits.bad .cr-credits-label{color:var(--red)}
.cr-lane{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--muted)}
.cr-lane i{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--muted)}
.cr-lane.good i{background:#1fbf75;box-shadow:0 0 0 3px rgba(31,191,117,.2)}
.cr-lane.warn i{background:#e0900f;box-shadow:0 0 0 3px rgba(224,144,15,.2)}
.cr-lane.warn{color:var(--ink)}

/* the pricing rule */
.cr-rule{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--pc-cddcff,#cddcff);background:var(--brand-wash);color:var(--ink);font-size:13px;line-height:1.55}
.cr-rule b{display:block;margin-bottom:4px;color:var(--brand-dark);font-size:14px}
.cr-rule p{margin:0 0 6px}.cr-rule p:last-child{margin:0}
.cr-rule-tick{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:14px}

/* totals */
.cr-totals{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.cr-totals div{padding:14px 12px;text-align:center;border-left:1px solid var(--line)}
.cr-totals div:first-child{border-left:0}
.cr-totals b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cr-totals span{display:block;margin-top:2px;font-size:11px;font-weight:650;color:var(--muted);line-height:1.3}

/* the two tools */
.cr-tools{margin-bottom:18px;gap:18px}
.cr-tool{margin-bottom:0}
.cr-tool>.body{padding:22px 24px}
.cr-tool-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.cr-tool-head h2{margin:0 0 3px;font-size:17px}
.cr-ico{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--brand-wash);color:var(--brand)}
.cr-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.cr-form input{flex:1 1 200px;min-width:0;min-height:44px;padding:0 14px;font-size:14.5px;border-radius:10px}
.cr-form button{flex:none;min-height:44px;padding:0 22px}
.cr-tool #cExtNote:not(:empty){margin-top:10px}

/* the sellers: a card each */
.cr-sellers-head{display:flex;align-items:baseline;gap:12px;margin:2px 2px 12px}
.cr-sellers-head h2{margin:0;font-size:18px}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.cr-card{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s,border-color .18s}
.cr-card:hover{box-shadow:var(--shadow-up);transform:translateY(-2px);border-color:var(--pc-c9d3f0,#c9d3f0)}
.cr-card.failed{border-top:3px solid var(--red)}
.cr-card.empty{border-top:3px solid #e0a43a}
.cr-card header{display:flex;align-items:center;gap:12px}
.cr-who{flex:1;min-width:0}
.cr-who b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-who .sub{margin-top:1px}
.cr-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-size:17px;font-weight:800}
.cr-err{margin:-6px 0 0}
.cr-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cr-stats div{padding:11px 8px;text-align:center;border-left:1px solid var(--line);background:var(--pc-fafbfe,#fafbfe)}
.cr-stats div:first-child{border-left:0}
.cr-stats b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cr-stats b.zero{color:var(--muted);font-weight:600}
.cr-stats span{display:block;margin-top:1px;font-size:11px;font-weight:650;color:var(--muted)}
.cr-bar{height:5px;margin-top:-4px;border-radius:9px;background:var(--line);overflow:hidden}
.cr-bar i{display:block;height:100%;border-radius:9px;background:var(--grad)}
.cr-card footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.cr-card footer .cr-view{flex:1 1 100%}
.cr-card footer button{flex:1 1 auto}
.cr-card footer button.danger{flex:0 0 auto;margin-left:auto}
.cr-view{background:var(--brand-wash);border-color:var(--pc-b6c5fb,#b6c5fb);color:var(--brand-dark);font-weight:700}
.cr-card button.ghost{background:transparent;border-color:transparent;box-shadow:none}
.cr-card button.ghost:hover:not(:disabled){background:var(--red-wash)}
.cr-empty{padding:48px 22px;text-align:center}
.cr-empty b{font-size:16px}
@media(max-width:560px){
  .cr-form{flex-wrap:wrap}.cr-form input{flex-basis:100%}.cr-form button{flex:1}
  .cr-grid{grid-template-columns:minmax(0,1fr)}
}
html[data-theme="dark"] .cr-rule{border-color:var(--pc-2f3f6e,#2f3f6e)}
html[data-theme="dark"] .cr-stats div{background:var(--pc-0f1626,#0f1626)}
html[data-theme="dark"] .cr-card:hover{border-color:var(--pc-34426b,#34426b)}
html[data-theme="dark"] .cr-view{border-color:var(--pc-5b74d6,#5b74d6);color:var(--pc-cbd6ff,#cbd6ff);background:rgba(var(--pcr-100-128-255,100,128,255),.2)}

/* ---- Competitor research: a batch of supplier hunts, the browser lane card, how a hunt searched ---- */
.cr-hunt{margin:0 0 14px;padding:16px 20px;border:1px solid var(--pc-cddcff,#cddcff);border-radius:var(--radius);background:var(--brand-wash);box-shadow:var(--shadow)}
.cr-hunt.done{border-color:#b7e6cd;background:var(--green-wash)}
.cr-hunt.paused{border-color:var(--amber);background:var(--amber-wash)}
.cr-hunt-top{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px;font-size:14px}
.cr-hunt-bar{height:8px;border-radius:9px;background:rgba(var(--pcr-80-100-160,80,100,160),.18);overflow:hidden;margin-bottom:8px}
.cr-hunt-bar i{display:block;height:100%;border-radius:9px;background:var(--grad);transition:width .4s var(--ease)}
.cr-hunt.paused .cr-hunt-bar i{background:var(--amber)}
.cr-how{margin-top:6px;font-size:12.5px}
.cr-how summary{cursor:pointer;color:var(--muted);font-weight:600}
.cr-how[open] summary{margin-bottom:4px}
.cr-test{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;border:1px solid var(--line)}
.cr-test.good{background:var(--green-wash);border-color:#b7e6cd}
.cr-test.bad{background:var(--red-wash);border-color:#f3c0bb}
.cr-credits .linkbtn{margin-top:10px}
html[data-theme="dark"] .cr-hunt{border-color:var(--pc-2f3f6e,#2f3f6e)}
html[data-theme="dark"] .cr-hunt.done{border-color:#1f5a40}
html[data-theme="dark"] .cr-test.good{border-color:#1f5a40}
html[data-theme="dark"] .cr-test.bad{border-color:#6e2c27}

/* ---- seller page: header, listing cards, match cards (replaces the old credits card and tables) ---- */
.cr-dhead{margin:0 0 16px}
.cr-dtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cr-back{font-weight:650}
.cr-dpills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative}
.cr-pill{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:650;color:var(--ink);cursor:default;list-style:none;white-space:nowrap}
.cr-pill b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand)}
.cr-pill.credit.warn{border-color:var(--amber);background:var(--amber-wash)}.cr-pill.credit.warn b{color:var(--amber)}
.cr-pill.bad{border-color:var(--red);background:var(--red-wash);color:var(--red);white-space:normal}
.cr-pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.cr-pill.good i{background:#1fbf75;box-shadow:0 0 0 3px rgba(31,191,117,.2)}
.cr-pill.warn i{background:#e0900f;box-shadow:0 0 0 3px rgba(224,144,15,.2)}
.cr-lanebox{position:relative}
.cr-lanebox summary{cursor:pointer}.cr-lanebox summary::-webkit-details-marker{display:none}
.cr-lanebox summary::after{content:"\25BE";font-size:11px;color:var(--muted)}
.cr-lanebox[open] summary{border-color:var(--pc-b6c5fb,#b6c5fb)}
.cr-lanepop{position:absolute;right:0;top:42px;z-index:30;width:min(400px,86vw);padding:4px 16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-up)}
.cr-lanepop .cr-lane:first-child{border-top:0;margin-top:8px;padding-top:4px}
.cr-dmain{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cr-avatar.big{width:58px;height:58px;font-size:24px}
.cr-dname{flex:1 1 220px;min-width:0}
.cr-dname h1{margin:0 0 3px;font-size:30px;letter-spacing:-.02em}
.cr-dstats{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.cr-dstats div{padding:12px 22px;text-align:center;border-left:1px solid var(--line)}
.cr-dstats div:first-child{border-left:0}
.cr-dstats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cr-dstats span{display:block;margin-top:1px;font-size:11.5px;font-weight:650;color:var(--muted)}
.cr-panel{overflow:visible}
.cr-toolbar input[type=search]{flex:1 1 220px;max-width:340px}
.cr-list{border-top:1px solid var(--line)}
.cr-list-head,.cr-row-main{display:grid;grid-template-columns:22px 64px minmax(0,1fr) 92px 70px 280px;gap:16px;align-items:center;padding:0 20px}
.cr-list-head{min-height:40px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.cr-th{cursor:pointer;user-select:none}.cr-th:hover{color:var(--ink)}
.cr-th.n{text-align:right}
.cr-row{border-top:1px solid var(--line);transition:background .12s}
.cr-list-head+div>.cr-row:first-child{border-top:0}
.cr-row:hover{background:rgba(var(--pcr-70-100-220,70,100,220),.035)}
.cr-row.picked{background:var(--brand-wash)}
.cr-row-main{padding-top:14px;padding-bottom:14px}
.cr-row-photo img{display:block;width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.cr-row-title a{font-weight:650;font-size:14.5px;line-height:1.4;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-row-title a:hover{color:var(--brand);text-decoration:underline}
.cr-facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cr-fact{padding:2px 9px;border-radius:999px;background:var(--bg);font-size:11.5px;font-weight:650;color:var(--muted)}
.cr-row-num{text-align:right;font-variant-numeric:tabular-nums}
.cr-row-num b{display:block;font-size:15px;font-weight:750}
.cr-row-num span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.cr-row-sup{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding-left:14px;border-left:3px solid var(--line)}
.cr-row.found .cr-row-sup{border-left-color:#1fbf75}
.cr-row.other .cr-row-sup{border-left-color:#e0900f}
.cr-row.none .cr-row-sup{border-left-color:var(--pc-c9cfdf,#c9cfdf)}
.cr-row.failed .cr-row-sup{border-left-color:var(--red)}
.cr-row.busy .cr-row-sup{border-left-color:var(--g1)}
.cr-row-sup .linkbtn{padding-left:0}
.cr-row-matches{padding:0 20px 16px 122px}
.cr-matches{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.cr-match{display:grid;grid-template-columns:22px 52px minmax(0,1fr) 170px 84px 108px 118px;gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cr-match-photo img{display:block;width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.cr-match-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cr-match-shop{font-weight:750;font-size:14px}
.cr-match-title{margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-match-proof .sub{margin-top:3px}
.cr-match-num{text-align:right;font-variant-numeric:tabular-nums}
.cr-match-num b{display:block;font-size:15px;font-weight:750}
.cr-match-num span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.cr-match-act{text-align:right}
.cr-nothing{padding:34px;text-align:center}
@media(max-width:1100px){
  .cr-list-head{display:none}
  .cr-row-main{grid-template-columns:22px 56px minmax(0,1fr) auto;row-gap:10px}
  .cr-row-sup{grid-column:2 / -1;padding-left:12px}
  .cr-row-matches{padding:0 12px 14px}
  .cr-match{grid-template-columns:22px 48px minmax(0,1fr) auto;row-gap:8px}
  .cr-match-proof{grid-column:3 / -1}
  .cr-match-act{grid-column:3 / -1;text-align:left}
}
html[data-theme="dark"] .cr-lanebox[open] summary{border-color:var(--pc-5b74d6,#5b74d6)}
html[data-theme="dark"] .cr-row:hover{background:rgba(var(--pcr-120-150-255,120,150,255),.05)}
html[data-theme="dark"] .cr-row.none .cr-row-sup{border-left-color:var(--pc-3a4560,#3a4560)}

/* ---- Product research ---- */
/* start area: the question first, big and open; the choices beneath it in two quiet columns, no boxes inside boxes */
.pr-start{margin:0 0 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pr-hero{padding:30px clamp(18px,3vw,38px) 26px;background:radial-gradient(900px 260px at 0% 0%,var(--brand-wash),transparent 70%),linear-gradient(180deg,var(--brand-wash),transparent 140%);border-bottom:1px solid var(--line)}
.pr-hero-q{display:block;margin:0 0 12px;font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pr-hero-row{display:flex;gap:12px;align-items:stretch}
.pr-hero-row input{flex:1;min-width:0;min-height:56px;padding:0 20px;font-size:17px;border-radius:14px;border:1.5px solid var(--pc-c9d3f0,#c9d3f0);background:var(--card)}
.pr-hero-row input::placeholder{color:var(--pc-8d97b3,#8d97b3)}
button.pr-go{min-height:56px;padding:0 34px;font-size:16px;border-radius:14px;flex:none}
.pr-hero-sub{margin-top:10px;font-size:13px;color:var(--muted);max-width:760px}
.pr-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);padding:8px clamp(18px,3vw,38px) 6px}
@media(max-width:980px){.pr-cols{grid-template-columns:minmax(0,1fr)}}
.pr-sec{padding:20px 0 6px}
.pr-sec h3{margin:0 0 3px;font-size:15px;font-weight:750;letter-spacing:-.005em}
.pr-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.pr-sec .pr-hint{margin:0 0 11px}
.pr-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pr-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--pc-dde1ee,#dde1ee);background:var(--card);font-size:13.5px;font-weight:620;color:var(--pc-4b5570,#4b5570);box-shadow:none;white-space:nowrap}
.pr-chip span{opacity:.55;font-weight:600;font-size:12px}
.pr-chip:hover:not(:disabled){background:var(--pc-f6f8fd,#f6f8fd);border-color:var(--pc-c5cde3,#c5cde3)}
.pr-chip.on{background:var(--brand-wash);border-color:var(--pc-b6c5fb,#b6c5fb);color:var(--brand-dark)}
.pr-chip .tile{width:22px;height:22px;margin-left:-8px;border-radius:50%}
.pr-chip .tile img{padding:2px}
.pr-chip small{display:block;margin-top:-1px;font-size:11px;font-weight:550;color:var(--muted)}
.pr-chip.pr-hit{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;padding:6px 15px;min-height:42px;border-radius:14px;white-space:normal;text-align:left}
.pr-chip.pr-hit b{font-weight:680}
.pr-chip.pr-cat{padding-right:6px;cursor:default}
.pr-x{min-height:0!important;width:24px;height:24px;padding:0!important;border-radius:50%!important;border:0!important;background:transparent!important;color:var(--brand-dark);font-size:17px;line-height:1;box-shadow:none}
.pr-x:hover:not(:disabled){background:rgba(var(--pcr-80-100-200,80,100,200),.16)!important}
.pr-chosen{margin-top:10px}
.pr-hits{margin-top:10px;min-height:24px}
#prCatQ{width:100%}
.pr-soft{padding:14px 16px;border-radius:12px;background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.55}
.pr-custom input{width:170px;min-height:36px;border-radius:999px;padding:0 15px;font-size:13.5px}
.pr-custom.on input{border-color:var(--pc-b6c5fb,#b6c5fb);background:var(--brand-wash)}
.pr-opts{display:grid;gap:10px}
.pr-opt{display:flex;align-items:flex-start;gap:13px;width:100%;padding:13px 16px;text-align:left;white-space:normal!important;border-radius:14px!important;border:1px solid var(--pc-dde1ee,#dde1ee);background:var(--card);box-shadow:none;font-weight:inherit}
.pr-opt i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--pc-b9c2da,#b9c2da);background:var(--card)}
.pr-opt.on{border-color:var(--pc-9db2f6,#9db2f6);background:var(--brand-wash)}
.pr-opt.on i{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 0 45%,transparent 50%)}
.pr-opt b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pr-opt small{display:block;margin-top:2px;font-size:12.5px;font-weight:450;color:var(--muted);line-height:1.5}
.pr-ths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
@media(max-width:640px){.pr-ths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pr-th{display:block;margin:0}
.pr-th>span:first-child{display:block;margin-bottom:5px;font-size:12px;font-weight:650;color:var(--muted)}
.pr-inp{position:relative;display:block}
.pr-inp input{width:100%;padding-right:62px}
.pr-inp em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;font-weight:650;color:var(--muted);pointer-events:none}
.pr-note{margin:14px 0 4px;padding:11px 14px;border-radius:12px;background:var(--bg);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pr-note b{color:var(--ink)}
.pr-more{margin:6px clamp(18px,3vw,38px) 0;padding:14px 0 0;border-top:1px solid var(--line)}
.pr-more summary{cursor:pointer;font-size:13.5px;font-weight:650;color:var(--brand-dark)}
.pr-more-body{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin:14px 0 8px}
@media(max-width:760px){.pr-more-body{grid-template-columns:minmax(0,1fr)}}
.pr-more-body label{display:block;margin:0}
.pr-more-body label span{display:block;margin-bottom:5px;font-size:12px;font-weight:650;color:var(--muted)}
.pr-more-body input{width:100%}
.pr-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding:16px clamp(18px,3vw,38px) 20px;border-top:1px solid var(--line);background:var(--bg)}
@media(max-width:620px){
  .pr-hero-row{flex-direction:column}.pr-hero-q{font-size:21px}
  button.pr-go{width:100%}.pr-foot .pr-go{width:100%}
}

/* the runs list */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:16px}
.pr-run{display:flex;flex-direction:column;gap:11px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);border-top:3px solid var(--line);transition:box-shadow .18s,transform .18s}
.pr-run:hover{box-shadow:var(--shadow-up);transform:translateY(-2px)}
.pr-run.live{border-top-color:var(--g1)}.pr-run.paused{border-top-color:#e0a43a}
.pr-run header{display:flex;align-items:flex-start;gap:12px}
.pr-run-name{flex:1;min-width:0}
.pr-run-name b{display:block;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:9px;background:var(--grad);transition:width .4s var(--ease)}
.pr-run.paused .pr-bar i{background:#e0a43a}
.pr-counts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.pr-counts span{display:inline-flex;align-items:baseline;gap:6px}
.pr-counts b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-counts .w b{color:var(--green)}.pr-counts .m b{color:var(--amber)}.pr-counts .n b{color:var(--muted)}
.pr-run footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:4px}
.pr-run footer .cr-view{flex:1;min-width:90px}
.pr-run button.ghost{background:transparent;border-color:transparent}
.pr-run button.ghost:hover:not(:disabled){background:var(--red-wash)}
.badge.pr-live{background:var(--brand-wash);color:var(--brand-dark);display:inline-flex;align-items:center;gap:6px}
.badge.pr-live i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:prPulse 1.6s ease-in-out infinite}
@keyframes prPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.badge.pr-live i{animation:none}}

/* a run: the numbers across the top, progress, the toolbar */
.pr-stats{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pr-stats div{padding:12px 24px;text-align:center;border-left:1px solid var(--line)}
.pr-stats div:first-child{border-left:0}
.pr-stats b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pr-stats span{display:block;margin-top:1px;font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
@media(max-width:720px){.pr-stats{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.pr-stats div:nth-child(3){border-left:0}.pr-stats div:nth-child(n+3){border-top:1px solid var(--line)}}
.pr-prog .row{display:flex;gap:8px;flex-wrap:wrap}
.pr-reason{margin-top:10px;padding-top:10px}
.pr-panel .pr-thbox{padding:16px 20px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.pr-thbox[hidden]{display:none}
.pr-thbox .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pr-filters{gap:8px}
.pr-sel{gap:12px}
.pr-selall{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.pr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:1px solid var(--pc-dde1ee,#dde1ee);border-radius:9px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.pr-btn:hover{background:var(--pc-f6f8fd,#f6f8fd);border-color:var(--pc-c5cde3,#c5cde3);color:var(--ink)}
.pr-btn.lg{min-height:38px;padding:0 16px;font-size:14px;border-radius:10px}
.pr-btn.done{color:var(--green);border-color:#b7e6cd;background:var(--green-wash)}

/* a product: photo, name, supplier, the eBay numbers in one open line, the profit and verdict on the right */
.pr-list{border-top:1px solid var(--line)}
.pr-item{display:grid;grid-template-columns:22px 88px minmax(0,1fr) 200px;grid-template-areas:"chk pic main profit" "chk pic metrics profit" ". . why why" ". . acts acts" ". . ev ev";gap:6px 20px;align-items:start;padding:20px 24px;border-top:1px solid var(--line);border-left:4px solid transparent;transition:background .12s}
.pr-list>.pr-item:first-child{border-top:0}
.pr-item:hover{background:rgba(var(--pcr-70-100-220,70,100,220),.035)}
.pr-item.picked{background:var(--brand-wash)}
.pr-item.worth{border-left-color:#1fbf75}.pr-item.maybe{border-left-color:#e0900f}.pr-item.no{border-left-color:#e2877d}.pr-item.unknown,.pr-item.idle{border-left-color:var(--pc-c9cfdf,#c9cfdf)}.pr-item.failed{border-left-color:var(--red)}
.pr-check{grid-area:chk;margin-top:4px}
.pr-photo{grid-area:pic}
.pr-photo img{display:block;width:88px;height:88px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#fff}
.pr-main{grid-area:main;min-width:0}
.pr-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:680;line-height:1.4;color:var(--ink);text-decoration:none}
.pr-title:hover{color:var(--brand);text-decoration:underline}
.pr-meta{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;margin-top:6px;font-size:13px;color:var(--muted)}
.pr-meta b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.pr-sup{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--ink)}
.pr-sup .tile{border-radius:6px}
.pr-cat-path{padding:1px 9px;border-radius:999px;background:var(--bg);font-size:11.5px;font-weight:650}
.pr-metrics-host{grid-area:metrics;min-width:0;margin-top:8px}
.pr-metrics{display:flex;flex-wrap:wrap;gap:10px 30px}
.pr-m{min-width:0;font-variant-numeric:tabular-nums}
.pr-m b{display:block;font-size:16px;font-weight:750;line-height:1.25}
.pr-m span{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.pr-m em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.pr-status{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.pr-profit{grid-area:profit;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px;padding-left:18px;border-left:1px solid var(--line);align-self:stretch;justify-content:center}
.pr-profit b{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.pr-profit span:not(.pr-verdict){font-size:11.5px;font-weight:600;color:var(--muted)}
.pr-profit em{font-style:normal;font-size:13px;font-weight:650;color:var(--ink)}
.pr-verdict{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted)}
.pr-verdict.good{background:var(--green-wash);color:var(--green)}.pr-verdict.warn{background:var(--amber-wash);color:var(--amber)}.pr-verdict.bad{background:var(--red-wash);color:var(--red)}
.pr-why-host{grid-area:why;margin-top:8px}
.pr-why{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:3px 28px;font-size:13px;color:var(--muted);line-height:1.5}
.pr-why li{position:relative;padding-left:15px}
.pr-why li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pc-b8c1d8,#b8c1d8)}
.pr-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pr-acts button.ghost{color:var(--muted)}
.pr-ev-host{grid-area:ev;margin-top:10px}
.pr-evidence summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--brand-dark)}
.pr-evidence summary span{margin-left:6px;font-weight:550;color:var(--muted)}
.pr-ev-body{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pr-ev-row{display:grid;grid-template-columns:44px minmax(0,1fr) 78px 54px 66px;gap:14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.pr-ev-body .sub+.pr-ev-row,.pr-ev-body>.pr-ev-row:first-child{border-top:0}
.pr-ev-pic img{display:block;width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.pr-ev-title{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr-ev-title:hover{color:var(--brand);text-decoration:underline}
.pr-ev-n{text-align:right;font-variant-numeric:tabular-nums}
.pr-ev-n b{display:block;font-size:13.5px;font-weight:720}
.pr-ev-n small{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.pr-more-row{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .pr-item{grid-template-columns:22px 64px minmax(0,1fr);grid-template-areas:"chk pic main" "profit profit profit" "metrics metrics metrics" "why why why" "acts acts acts" "ev ev ev";gap:8px 14px;padding:16px 14px}
  .pr-photo img{width:64px;height:64px}
  .pr-profit{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;text-align:left;gap:4px 12px;padding:10px 0 0;border-left:0;border-top:1px solid var(--line)}
  .pr-profit b{font-size:23px}
  .pr-verdict{margin:0 0 0 auto}
  .pr-metrics{gap:10px 22px}
  .pr-ev-row{grid-template-columns:40px minmax(0,1fr) auto auto;row-gap:2px}
  .pr-ev-row .pr-ev-n:nth-child(5){display:none}
}
html[data-theme="dark"] .pr-hero-row input{border-color:var(--pc-34426b,#34426b)}
html[data-theme="dark"] .pr-chip{border-color:var(--pc-2a3550,#2a3550);color:var(--pc-b6c0dc,#b6c0dc)}
html[data-theme="dark"] .pr-chip:hover:not(:disabled){background:var(--pc-1c2842,#1c2842);border-color:var(--pc-3b4a6e,#3b4a6e)}
html[data-theme="dark"] .pr-chip.on{border-color:var(--pc-5b74d6,#5b74d6);color:var(--pc-cbd6ff,#cbd6ff)}
html[data-theme="dark"] .pr-opt{border-color:var(--pc-2a3550,#2a3550)}
html[data-theme="dark"] .pr-opt i{border-color:var(--pc-4a5880,#4a5880)}
html[data-theme="dark"] .pr-opt.on{border-color:var(--pc-5b74d6,#5b74d6)}
html[data-theme="dark"] .pr-btn{border-color:var(--pc-2a3550,#2a3550);background:var(--pc-161f33,#161f33);color:var(--ink)}
html[data-theme="dark"] .pr-btn:hover{background:var(--pc-1c2842,#1c2842);border-color:var(--pc-3b4a6e,#3b4a6e)}
html[data-theme="dark"] .pr-btn.done{border-color:#1f5a40}
html[data-theme="dark"] .pr-item:hover{background:rgba(var(--pcr-120-150-255,120,150,255),.05)}
html[data-theme="dark"] .pr-why li::before{background:var(--pc-4a5880,#4a5880)}
html[data-theme="dark"] .pr-run:hover{border-color:var(--pc-34426b,#34426b)}
.pr-chip.pr-morebtn{border-style:dashed;color:var(--brand-dark);background:transparent}
.pr-inp input{text-align:left}
@media(max-width:1700px){#nav a{padding:8px 10px}.top{gap:14px}}
.pr-hero-q{text-transform:none;letter-spacing:-.02em;font-size:25px}
.pr-why{display:flex;flex-wrap:wrap;gap:2px 22px}
.pr-why li{padding-left:13px}
.pr-item{padding:16px 24px;gap:4px 20px}
.pr-acts{margin-top:8px}
.pr-ev-host{margin-top:6px}
.pr-why-host{margin-top:6px}
.pr-selall{text-transform:none;letter-spacing:0}

/* product research: the credit rule on the start card, and the tag on a product that was paid for */
.pr-credit-rule{margin-top:14px;text-align:left}
.pr-credit-rule .pr-inl{display:inline;margin:0;font-size:inherit;color:var(--brand-dark)}
.pr-credit-rule .cr-pill{margin-top:6px}
.pr-paid{display:inline-block;margin:8px 0 0 6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--brand-wash);color:var(--brand-dark);border:1px solid var(--pc-cddcff,#cddcff);vertical-align:top}

/* product research: which supplier is being scanned, and how each supplier in a run is doing */
.pr-now{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:8px 12px;border-radius:12px;background:var(--brand-wash);border:1px solid var(--pc-cddcff,#cddcff);font-size:13px;line-height:1.45;color:var(--ink)}
.pr-now>i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(var(--pcr-79-110-247,79,110,247),.5);animation:prpulse 1.6s infinite}
.pr-now.rest{background:var(--amber-wash);border-color:var(--amber)}.pr-now.rest>i{background:var(--amber);animation:none}
.pr-now.wait{background:var(--bg);border-color:var(--line);color:var(--muted)}.pr-now.wait>i{background:var(--muted);animation:none}
.pr-now>div{display:grid;gap:5px;min-width:0}
.pr-doing{display:flex;align-items:center;gap:8px;min-width:0}.pr-doing>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-doing .tile{flex:none}
@keyframes prpulse{70%{box-shadow:0 0 0 7px rgba(var(--pcr-79-110-247,79,110,247),0)}100%{box-shadow:0 0 0 0 rgba(var(--pcr-79-110-247,79,110,247),0)}}
@media (prefers-reduced-motion:reduce){.pr-now>i{animation:none}}
.pr-sups{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pr-sups>summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:13.5px}
.pr-sups ul{list-style:none;margin:0;padding:0 8px 8px;display:grid;gap:4px}
.pr-sup-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:var(--bg)}
.pr-sup-row>div{flex:1;min-width:0;display:grid;gap:2px}.pr-sup-row b{font-size:13.5px}.pr-sup-row small{color:var(--muted);font-size:12px;line-height:1.4}
.pr-sup-row.bad{background:var(--red-wash)}.pr-sup-row.warn{background:var(--amber-wash)}
.pr-ok{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--green-wash);color:var(--green);white-space:nowrap}

/* the VeRO checker: warnings on a draft and on a researched product */
.vero{position:relative;display:inline-block;margin:5px 0 0;font-size:12px}
.vero>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:11.5px;line-height:1.5;max-width:100%}
.vero>summary::-webkit-details-marker{display:none}
.vero>summary b{font-weight:700}.vero-names{color:var(--muted);max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vero>summary em{font-style:normal;color:var(--green);font-weight:600}
.vero>summary u{width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);text-decoration:none;margin-left:2px}
.vero[open]>summary u{transform:rotate(-135deg) translateY(-1px)}
.vero-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.vero.bad .vero-dot{background:var(--red)}.vero.done .vero-dot{background:var(--green)}
.vero.bad>summary{border-color:var(--red)}.vero.warn>summary{border-color:var(--amber)}.vero.done>summary{border-color:var(--line)}
.vero-pop{position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:min(380px,86vw);padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.18);font-size:12px;line-height:1.45}
.vero-pop ul{margin:0;padding:0 0 0 16px}.vero-pop li{margin:4px 0}
.vero-pop p.sub{margin:8px 0;color:var(--muted)}.vero-pop .acts{display:flex;flex-wrap:wrap;gap:6px}
.vero-banner{margin:0 0 10px;padding:7px 12px;border-radius:10px;border:1px solid var(--red);background:var(--red-wash);color:var(--ink);font-size:12.5px;line-height:1.4}
.vero-banner.soft{border-color:var(--amber);background:var(--amber-wash)}
.vero-auth{color:var(--muted)}
.pr-vero{display:inline-block;margin:5px 6px 0 0;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;cursor:help;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.pr-vero.bad{border-color:var(--red)}.pr-vero.warn{border-color:var(--amber)}

/* how a researched product is sent: a quick delivery is picked out in green */
.pr-ship{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:12px;line-height:1.6}
.pr-ship.fast{border-color:var(--green);background:var(--green-wash)}
.pr-free{color:var(--green)}
.pr-ship.prime{border-color:var(--brand);background:var(--brand-wash)}
.pr-ship.warn{border-color:var(--amber);background:var(--amber-wash)}
.pr-ship.muted{color:var(--muted);background:transparent}
.pr-prime{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 14px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;user-select:none;position:relative}
.pr-prime input{position:absolute;opacity:0;width:1px;height:1px}
.pr-prime .pr-prime-t{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.pr-sw{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .15s}
.pr-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.pr-prime input:checked + .pr-sw{background:var(--brand)}
.pr-prime input:checked + .pr-sw::after{transform:translateX(14px)}
.pr-prime input:focus-visible + .pr-sw{outline:2px solid var(--brand);outline-offset:2px}
.pr-prime:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
.pr-shiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 0 100%}

/* ---- Products: eight roomy columns that fit the screen, no sideways scroll ---- */
.tbl-wrap:has(.ptable){overflow-x:visible}
.ptable{table-layout:auto;width:100%}
.ptable th,.ptable td{padding:14px 12px}
.ptable td{vertical-align:middle}
.ptable .pc-watch{width:44px;text-align:center}
.ptable .pc-pick{width:34px;text-align:center;padding-left:10px;padding-right:2px}
.ptable .pc-pick input{width:16px;height:16px;cursor:pointer}
.bulkbar{border-top:1px solid var(--line,var(--pc-e5e8f0,#e5e8f0));padding-top:10px}
.bulkbar button:disabled{opacity:.45;cursor:not-allowed}
.ptable .prod{min-width:0;gap:14px;align-items:center}
.ptable .thumb{width:56px;height:56px;border-radius:12px}
.ptable .prod-text{min-width:0}
.ptable .ptitle{max-width:none;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;font-size:14px}
.ptable .psub{gap:6px 10px;margin-top:5px}
.ptable .psub .sku{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--muted)}
.ptable .pc-stock{width:118px}
.ptable .pc-cost{width:104px;white-space:nowrap}
.ptable .pc-cost b{font-size:14px}
.ptable .pc-sell{width:132px}
.ptable .pc-sell .priceedit{width:100px;font-weight:600}
.ptable .pc-keep{width:150px}
.ptable .keep-top{margin-bottom:6px;font-size:14px}
.ptable .pc-act{width:150px;font-size:12.5px;line-height:1.5}
.ptable .pc-act .act-line b{font-size:14px}
.ptable #pBody td.acts{width:104px;min-width:104px;white-space:normal}
.ptable #pBody td.acts button{display:inline-flex;justify-content:center;width:calc(50% - 3px);margin:0 3px 5px 0;padding:5px 6px}
.ptable #pBody td.acts button.danger{width:calc(100% - 3px);margin-bottom:0;background:transparent}
.ptable tbody tr{border-radius:12px}
@media (max-width:1180px){
  .ptable .pc-act{display:none}.ptable th:nth-child(7){display:none}
}
@media (max-width:900px){
  .ptable .pc-cost,.ptable th:nth-child(4){display:none}
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------
   The Products table, made to match the research tables: a big photograph, the title with a row of chips under it (what is wrong, stock, Prime, code, supplier, links),
   the money as large figures, a coloured edge down the left for how the row is doing, and the sales as three plain numbers. Later rules, so these win over the older ones above.
   --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ptable{border-collapse:separate;border-spacing:0}
.ptable thead th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:transparent;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable tbody tr{background:transparent;transition:background .12s}
.ptable tbody tr:hover{background:rgba(var(--pcr-110-100-250,110,100,250),.045)}
.ptable tbody td{padding:20px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tbody td:first-child{border-left:4px solid transparent;padding-left:12px}
.ptable tr.row-ok td:first-child{border-left-color:#22a06b}
.ptable tr.row-warn td:first-child{border-left-color:#e8a317}
.ptable tr.row-bad td:first-child{border-left-color:#d64545}
.ptable .prod{gap:16px;align-items:center}
.ptable .thumb{width:84px;height:84px;border-radius:14px;background:#fff;border:1px solid var(--line);cursor:zoom-in;box-shadow:0 1px 2px rgba(var(--pcr-15-23-42,15,23,42),.05)}
.ptable .thumb img{object-fit:contain;padding:3px}
.ptable .ptitle{font-size:15px;font-weight:650;line-height:1.35;color:var(--ink)}
.ptable .pchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ptable .pchips .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.5;margin:0;text-decoration:none}
.ptable .pchips .badge.sku{font-family:ui-monospace,Consolas,monospace;font-weight:500;background:transparent;border:1px solid var(--line);color:var(--muted)}
.ptable .pchips .badge.sup{background:var(--pc-eef1ff,#eef1ff);color:var(--pc-3a4fcf,#3a4fcf);border:1px solid var(--pc-dde3ff,#dde3ff)}
.ptable .pchips .badge.lnk{background:transparent;border:1px solid var(--line);color:var(--pc-3a56d4,#3a56d4)}
.ptable .pchips .badge.lnk:hover{background:var(--pc-eef2ff,#eef2ff);border-color:var(--pc-cdd6ff,#cdd6ff)}
.ptable .pc-stock{width:84px;text-align:center}
.ptable .pc-stock .qty{display:block;font-size:20px;font-weight:700;line-height:1.1}
.ptable .pc-cost{width:110px}
.ptable .pc-cost b{font-size:17px;font-weight:700}
.ptable .pc-sell{width:140px}
.ptable .pc-sell .priceedit{width:104px;font-size:15px;font-weight:650;padding:7px 10px}
.ptable .pc-keep{width:170px}
.ptable .keep-top{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.ptable .keep-top b{font-size:22px;font-weight:750;line-height:1.1;color:#12754a;letter-spacing:-.01em}
.ptable .keep-top b.neg{color:#c0392b}
.ptable .keep-top .sub{font-size:12px}
.ptable .pc-act{width:210px}
.ptable .stat3{display:flex;gap:16px;margin-bottom:8px}
.ptable .stat3 div{display:flex;flex-direction:column;min-width:0}
.ptable .stat3 b{font-size:19px;font-weight:700;line-height:1.1}
.ptable .stat3 span{font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:2px}
.ptable #pBody td.acts{width:112px;min-width:112px}
.ptable #pBody td.acts button{border-radius:10px}
html[data-theme="dark"] .ptable .thumb{background:#fff}
html[data-theme="dark"] .ptable .keep-top b{color:#4cd49a}
html[data-theme="dark"] .ptable .pchips .badge.sup{background:var(--pc-1c2342,#1c2342);color:var(--pc-a9b6ff,#a9b6ff);border-color:var(--pc-2b3566,#2b3566)}
html[data-theme="dark"] .ptable tbody tr:hover{background:rgba(var(--pcr-140-130-255,140,130,255),.07)}
@media (max-width:1100px){.ptable .thumb{width:64px;height:64px}.ptable .pc-act{display:none}.ptable th:nth-child(7){display:none}}
.ptable .stat3{display:grid;grid-template-columns:repeat(4,minmax(52px,auto));gap:6px 14px;justify-content:start}
.ptable .pc-act{width:230px}
/* more room: the Products table was packed too tightly */
.ptable tbody td{padding:26px 18px}
.ptable thead th{padding:14px 18px}
.ptable .prod{gap:20px}
.ptable .pchips{gap:8px;margin-top:12px}
.ptable .stat3{gap:10px 26px}
.ptable .stat3 span{white-space:nowrap;margin-top:4px}
.ptable .pc-act .sub{margin-top:4px}
.ptable .pc-act{width:250px}
.ptable .keep-top{margin-bottom:10px}
.ptable #pBody td.acts{width:132px;min-width:132px;padding-left:10px}
.ptable #pBody td.acts button{width:calc(50% - 5px);margin:0 6px 8px 0;padding:7px 8px}
.ptable #pBody td.acts button.danger{width:100%;margin:0}
.ptable .pc-cost,.ptable .pc-sell,.ptable .pc-stock{padding-left:16px;padding-right:16px}
/* nothing in the Products table may sit on top of anything else: columns have a minimum, labels may wrap, and a window too narrow for all of them scrolls the table sideways instead */
.tbl-wrap:has(.ptable){overflow-x:auto}
@media (min-width:1101px){.ptable{min-width:1140px}}
.ptable .stat3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px}
.ptable .stat3 span{white-space:normal}
.ptable .pc-act{min-width:210px}
.ptable .pc-keep{min-width:150px}
.ptable .pc-cost{min-width:100px}
.ptable .pc-sell{min-width:132px}
.ptable .pc-stock{min-width:76px}
.ptable .ptitle,.ptable .pchips{overflow-wrap:anywhere}
.ptable .pchips .badge{white-space:nowrap}
.ptable td,.ptable th{min-width:0}

/* ---- the photo preview: one picture large, or two compared (two equal panels with a "vs" between, each labelled and saying what it is) ---- */
.zoom-pic{padding:14px;border-radius:18px;gap:0;align-items:stretch}
.zoom-pic figure{position:relative;gap:10px}
.zoom-pic .zimg{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.zoom-pic .zimg img{max-width:440px;max-height:62vh;object-fit:contain;border-radius:8px}
.zoom-pic.two{gap:0}
.zoom-pic.two figure{width:min(40vw,400px);align-items:stretch}
.zoom-pic.two .zimg{aspect-ratio:1/1;width:100%}
.zoom-pic.two .zimg img{max-width:100%;max-height:100%;width:100%;height:100%}
.zoom-pic .zl{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--pc-4b57d6,#4b57d6);padding:4px 11px;border-radius:99px}
.zoom-pic figure:nth-of-type(2) .zl{background:#12805c}
.zoom-pic figcaption{display:flex;flex-direction:column;gap:3px;text-align:left;font-size:13px;line-height:1.35;color:var(--muted)}
.zoom-pic figcaption b{color:var(--ink);font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zoom-pic .zvs{align-self:center;flex:none;margin:0 -2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--card,#fff);border:1px solid var(--line);box-shadow:0 2px 8px rgba(var(--pcr-15-23-42,15,23,42),.12);z-index:1;margin:0 -17px}
.zoom-pic.two figure:first-of-type{padding-right:22px}
.zoom-pic.two figure:last-of-type{padding-left:22px}
html[data-theme="dark"] .zoom-pic .zl{color:#fff}

/* the three buttons at the end of a Products row are icons, in one line: refresh (check now), pencil (edit), cross (remove) */
.ptable #pBody td.acts{width:136px;min-width:136px;white-space:nowrap}
.iconrow{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.ptable #pBody td.acts .ibtn,.ibtn{width:36px;height:36px;min-width:36px;margin:0;padding:0;border-radius:10px;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.ibtn:hover,.ibtn:focus-visible{background:var(--pc-eef1ff,#eef1ff);border-color:var(--pc-c9d1ff,#c9d1ff);color:var(--pc-3a4fcf,#3a4fcf)}
.ibtn.danger{color:#b8412f}
.ibtn.danger:hover,.ibtn.danger:focus-visible{background:#fdeceb;border-color:#f3c2bd;color:#b8412f}
.ibtn[aria-busy]{opacity:.7}
.ibtn .spin{margin:0}
html[data-theme="dark"] .ibtn:hover{background:var(--pc-232c52,#232c52);border-color:var(--pc-3a4a8a,#3a4a8a);color:var(--pc-c4cdff,#c4cdff)}
html[data-theme="dark"] .ibtn.danger:hover{background:#3a1f22;border-color:#6b3238}
.ptable #pBody td.acts .ibtn.danger{color:#b8412f}
.ptable #pBody td.acts .ibtn.danger:hover,.ptable #pBody td.acts .ibtn.danger:focus-visible{background:#fdeceb;border-color:#f3c2bd}
.ptable #pBody td.acts .ibtn:hover:not(.danger),.ptable #pBody td.acts .ibtn:focus-visible:not(.danger){background:var(--pc-eef1ff,#eef1ff);border-color:var(--pc-c9d1ff,#c9d1ff);color:var(--pc-3a4fcf,#3a4fcf)}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------
   The draft editor's left half: five clear cards (title with help, category, item specifics, postage / returns / payment, description) instead of one run of fields.
   --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ed-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:1100px){.ed-grid{grid-template-columns:1fr}}
.ed-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.ed-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(var(--pcr-15-23-42,15,23,42),.04)}
.ed-card header{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ed-card h3{margin:0;font-size:13px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.ed-note{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.ed-count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ed-count.full{color:#12754a}
.ed-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ed-field label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.ed-field input,.ed-field select,.ed-card textarea{width:100%;box-sizing:border-box}
.ed-field.narrow{max-width:340px;margin-top:14px}
.ed-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.ed-three{grid-template-columns:1fr}}
.ed-title input{font-size:15.5px;font-weight:600;padding:12px 14px;width:100%;box-sizing:border-box;border-radius:12px}
.ed-meter{--c:var(--pc-9aa3b5,#9aa3b5);display:flex;align-items:center;gap:14px;margin-top:14px}
.ed-meter[data-band="weak"]{--c:#d64545}.ed-meter[data-band="fair"]{--c:#e0900f}.ed-meter[data-band="strong"]{--c:#22a06b}.ed-meter[data-band="excellent"]{--c:#0f8a5f}
.ed-score{font-size:26px;font-weight:800;line-height:1;min-width:42px;color:var(--c);font-variant-numeric:tabular-nums}
.ed-meter .bar{flex:1;height:9px;border-radius:99px;background:var(--pc-eceff5,#eceff5);overflow:hidden}
.ed-meter .bar i{display:block;height:100%;border-radius:99px;background:var(--c);transition:width .35s ease}
.ed-band{font-size:12.5px;font-weight:700;color:var(--c);min-width:62px;text-align:right}
.ed-checks{margin-top:10px;font-size:13px}
.ed-checks summary{cursor:pointer;color:var(--muted);font-weight:600;padding:2px 0}
.ed-checks ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ed-checks li{display:grid;grid-template-columns:20px 1fr;gap:2px 8px;align-items:start}
.ed-checks li::before{content:"✓";grid-row:1/3;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:#e3f6ec;color:#12754a}
.ed-checks li.no::before{content:"!";background:#fdecea;color:#c0392b}
.ed-checks li b{font-weight:650}
.ed-checks li span{grid-column:2;color:var(--muted);line-height:1.4}
.ed-suggest{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.ed-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.ed-sug-head{display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
.ed-sug-head b{font-size:13.5px}.ed-sug-head span{font-size:12px;color:var(--muted)}
.ed-cand{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;background:var(--card,#fff);transition:border-color .15s,box-shadow .15s}
.ed-cand:hover{border-color:var(--pc-bfc8f5,#bfc8f5);box-shadow:0 4px 14px rgba(var(--pcr-70-80-200,70,80,200),.08)}
.ed-cand-top{display:flex;align-items:center;gap:10px}
.ed-pill{font-size:12px;font-weight:750;padding:3px 10px;border-radius:99px;background:var(--pc-eef1f6,#eef1f6);color:var(--ink)}
.ed-pill.fair{background:#fff3dc;color:#9a6208}.ed-pill.strong{background:#e0f5ea;color:#12754a}.ed-pill.excellent{background:#d4f1e3;color:#0b6a49}.ed-pill.weak{background:#fdecea;color:#b73a2c}
.ed-lab{font-size:12px;color:var(--muted);font-weight:600}
.ed-len{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ed-cand-title{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);word-break:break-word}
.ed-cand button{justify-self:start}
.ed-ideas{display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.ed-ideas b{font-weight:650}.ed-ideas u{text-decoration:none;color:#b8412f}
.ed-ideas span{display:flex;flex-wrap:wrap;gap:6px}
.ed-ideas em{font-style:normal;padding:3px 10px;border-radius:99px;background:var(--pc-f1f3f8,#f1f3f8);color:var(--pc-4a5570,#4a5570);font-size:12px}
.ed-ideas small{color:var(--muted)}
.ed-chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink)}
.ed-chip.warn{background:#fff3dc;border-color:#f5dfb0;color:#9a6208}
button.ed-chip.idea{cursor:pointer;border-style:dashed;color:var(--pc-3a4fcf,#3a4fcf);background:var(--pc-f5f7ff,#f5f7ff)}
button.ed-chip.idea:hover{background:var(--pc-e9edff,#e9edff)}
.ed-chip.shake{animation:ed-shake .4s}
@keyframes ed-shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.ed-path{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.ed-path span:last-child{color:var(--ink);font-weight:650}.ed-path i{font-style:normal;opacity:.5}
.ed-required{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;font-size:12.5px}
.ed-required small{flex-basis:100%;color:var(--muted)}
.ed-specifics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ed-specifics div{background:var(--card,#fff);padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ed-specifics span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ed-specifics b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-actions{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 2px;background:linear-gradient(to top,var(--bg,var(--pc-f4f6f9,#f4f6f9)) 70%,transparent)}
.ed-right{min-width:0}
html[data-theme="dark"] .ed-meter .bar{background:var(--pc-222a3f,#222a3f)}
html[data-theme="dark"] .ed-ideas em{background:var(--pc-222a3f,#222a3f);color:var(--pc-b9c3e0,#b9c3e0)}
html[data-theme="dark"] .ed-pill{background:var(--pc-222a3f,#222a3f);color:var(--pc-dfe5f7,#dfe5f7)}
.ed-count.over{color:#c0392b}

/* ---- the editor, top to bottom (full width) ---- */
.ed-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.ed-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1000px){.ed-two{grid-template-columns:1fr}}
.ed-photos .photos{display:flex;flex-wrap:wrap;gap:12px}
.ed-photos .photo{width:120px;height:120px}
.ed-photos .photo img{width:100%;height:100%;object-fit:cover}
.ed-bar{flex:1;height:9px;border-radius:99px;background:var(--pc-eceff5,#eceff5);overflow:hidden;border:0;padding:0}
.ed-bar i{display:block;height:100%;border-radius:99px;background:var(--c);transition:width .35s ease}
.ed-cands{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.ed-ideasrow{gap:18px;align-items:start}
.ed-specifics{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ed-preview .ed-seg{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ed-seg button{border:0;background:transparent;padding:6px 14px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.ed-seg button.on{background:var(--pc-eef1ff,#eef1ff);color:var(--pc-3a4fcf,#3a4fcf)}
.ed-frame{display:flex;justify-content:center;background:var(--pc-eef1f6,#eef1f6);border-radius:12px;padding:16px}
.ed-frame iframe{width:100%;max-width:1100px;height:1150px;border:0;background:#fff;border-radius:8px;box-shadow:0 1px 6px rgba(var(--pcr-15-23-42,15,23,42),.12)}
.ed-frame.phone iframe{max-width:390px;height:1000px}
.ed-stack .check-box{margin:0}
html[data-theme="dark"] .ed-bar{background:var(--pc-222a3f,#222a3f)}
html[data-theme="dark"] .ed-frame{background:var(--pc-182034,#182034)}
/* ---- the Drafts table, in the same look as Products ---- */
.dtable .draft-sku{width:auto;min-width:90px;max-width:160px;padding:3px 10px;border-radius:99px;font-family:ui-monospace,Consolas,monospace;font-size:12px;height:auto;line-height:1.5}
.dtable .pc-cat{width:210px;min-width:170px}
.dtable .pc-cat input{width:100%;max-width:150px;font-weight:600}
.dtable .cat-path{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;max-width:26ch;line-height:1.35}
.dtable .pc-cost{min-width:110px}
.dtable .pc-cost .sub{display:block;margin-top:2px}
.dtable .pc-keep{min-width:150px}
.dtable td.acts{min-width:136px;width:136px}
.card .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 18px}
.card .toolbar input[type=search]{flex:1 1 200px;max-width:320px;min-width:160px}
/* icon buttons in any of the redesigned tables (Products, Drafts) */
.ptable td.acts .ibtn{width:36px;height:36px;min-width:36px;margin:0;padding:0;border-radius:10px;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);cursor:pointer}
.ptable td.acts .ibtn:hover:not(.danger),.ptable td.acts .ibtn:focus-visible:not(.danger){background:var(--pc-eef1ff,#eef1ff);border-color:var(--pc-c9d1ff,#c9d1ff);color:var(--pc-3a4fcf,#3a4fcf)}
.ptable td.acts .ibtn.danger{color:#b8412f;background:var(--card,#fff)}
.ptable td.acts .ibtn.danger:hover,.ptable td.acts .ibtn.danger:focus-visible{background:#fdeceb;border-color:#f3c2bd}
.ptable td.acts .ibtn svg{display:block}
/* a toolbar with a lot on it: tighter buttons, so it stays on one line on a wide screen */
.card .toolbar button{padding:8px 13px}
.card .toolbar input[type=search]{max-width:240px}
.card .toolbar select{max-width:170px}

/* ---- editor details: category box and button on one line, the delivery cost with its symbol, item specifics as separate tiles ---- */
.ed-inline{display:flex;gap:10px;align-items:stretch}
.ed-inline input{flex:1 1 auto;min-width:0}
.ed-inline button{margin:0 !important;flex:none;white-space:nowrap;padding:0 18px}
.ed-field .cp-path,.ed-card .cp-path{margin-top:8px}
.ed-money{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card,#fff);max-width:300px}
.ed-money span{display:grid;place-items:center;padding:0 14px;background:var(--pc-f1f3f9,#f1f3f9);color:var(--muted);font-weight:700;border-right:1px solid var(--line)}
.ed-money input{border:0 !important;border-radius:0 !important;box-shadow:none !important;text-align:left !important;flex:1;min-width:0;background:transparent}
.ed-money:focus-within{border-color:var(--pc-8a96f5,#8a96f5);box-shadow:0 0 0 3px rgba(var(--pcr-98-110-240,98,110,240),.18)}
.ed-specifics{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;background:none;border:0;border-radius:0;overflow:visible}
.ed-specifics div{border:1px solid var(--line);border-radius:12px;background:var(--card,#fff)}
.ed-actions .listbtn{background:#12805c;color:#fff;border-color:#12805c}
.ed-actions .listbtn:hover{background:#0f6e50}
/* a click anywhere on a draft's row opens it */
.dtable tbody tr[data-rowid]{cursor:pointer}
.dtable tbody tr[data-rowid]:hover{background:rgba(var(--pcr-110-100-250,110,100,250),.05)}
.dtable tbody tr[data-rowid] input,.dtable tbody tr[data-rowid] select{cursor:text}
.ptable td.acts .ibtn.send{color:#0f7a56}
.ptable td.acts .ibtn.send:hover,.ptable td.acts .ibtn.send:focus-visible{background:#e3f6ec;border-color:#bfe8d3;color:#0b6a49}
.dtable td.acts{min-width:184px;width:184px}

/* The brand warning, opened under a draft's row as part of its editor */
.vero-panel{margin:0 0 14px;padding:12px 16px;border-radius:14px;border:1px solid var(--amber);background:var(--card)}
.vero-panel .vp-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.vero.inline{display:block;margin:0}.vero.inline>summary{display:none}
.vero.inline .vero-pop{position:static;width:auto;max-width:none;padding:0;border:0;box-shadow:none;background:transparent;font-size:13px}
.dtable .vero>summary{cursor:pointer}

.vero-tr>td{padding:0 16px 14px;background:var(--card)}
.vero-tr .vero-panel{margin:0}

.ed-tr>td{padding:0;border:0;background:transparent}
.ed-tr .drawer{margin:6px 0 14px}
.ptable tr.ed-tr:hover td{background:transparent}

.pchips .sup-first{margin-right:6px;font-size:13px}
/* A draft's editor slot takes no room at all until its editor is open */
.ptable tr.ed-tr:not(:has(.drawer:not([hidden]))), .dtable tr.ed-tr:not(:has(.drawer:not([hidden]))) { display: none !important; }
.dtable tr.ed-tr > td, .ptable tr.ed-tr > td { padding: 0 !important; border: 0 !important; }

/* the question box: in the middle of the screen, over a dimmed page */
.dlg-back{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(var(--pcr-10-15-31,10,15,31),.55);backdrop-filter:blur(2px);animation:dlg-fade .14s ease-out}
.dlg{width:min(460px,100%);background:var(--card,#fff);color:var(--ink,var(--pc-0e1014,#0e1014));border-radius:18px;padding:26px 28px 22px;box-shadow:0 24px 70px -12px rgba(var(--pcr-10-15-31,10,15,31),.55);animation:dlg-pop .16s ease-out}
.dlg h2{margin:0 0 10px;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.dlg p{margin:0 0 10px;color:var(--muted,var(--pc-6b7385,#6b7385));font-size:14.5px;line-height:1.55}
.dlg-row{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.dlg-row button{padding:9px 18px;border-radius:10px;font-size:14.5px}
.dlg-yes.danger-solid{background:var(--red,#b8241a);border-color:transparent;color:#fff}
.dlg-yes.danger-solid:hover:not(:disabled){background:#9a1d15}
@keyframes dlg-fade{from{opacity:0}to{opacity:1}}
@keyframes dlg-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dlg-back,.dlg{animation:none}}

/* Product research: the switch between starting from suppliers and starting from eBay */
.pr-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:var(--brand-wash);border-bottom:1px solid var(--line)}
.pr-seg button{display:block;text-align:left;white-space:normal!important;padding:12px 18px;border-radius:12px!important;border:1px solid transparent;background:transparent;box-shadow:none;color:var(--muted);font-weight:inherit;cursor:pointer}
.pr-seg button b{display:block;font-size:15px;font-weight:700;color:inherit}
.pr-seg button small{display:block;margin-top:2px;font-size:12.5px;font-weight:450;line-height:1.45}
.pr-seg button.on{background:var(--card);border-color:var(--pc-9db2f6,#9db2f6);color:var(--ink);box-shadow:0 1px 4px rgba(var(--pcr-20-30-70,20,30,70),.08)}
.pr-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:640px){.pr-seg{grid-template-columns:1fr}}
html[data-theme="dark"] .pr-seg{background:var(--pc-161d30,#161d30);border-bottom-color:var(--pc-2a3550,#2a3550)}
html[data-theme="dark"] .pr-seg button.on{background:var(--pc-1e2840,#1e2840);border-color:var(--pc-5b74d6,#5b74d6)}

.pr-check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.pr-check input{flex:none;margin-top:3px;width:16px;height:16px}
.pr-check b{color:var(--ink)}

.pr-steps{list-style:none;counter-reset:prs;margin:12px 0 0;padding:0;display:grid;gap:10px}
.pr-steps li{counter-increment:prs;display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pr-steps li::before{content:counter(prs);grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.pr-steps b{font-size:14px;color:var(--ink)}
.pr-steps span{font-size:12.5px;line-height:1.5;color:var(--muted)}
html[data-theme="dark"] .pr-steps li{border-color:var(--pc-2a3550,#2a3550)}
.pr-opts + .pr-chips,.pr-opts + .pr-steps{margin-top:18px}
.pr-opts + .pr-chips{padding-top:2px}

.ed-required{display:grid;gap:10px;margin:0 0 14px;padding:14px 16px;border:1px solid #f0d58a;border-radius:14px;background:#fff9e8}
.ed-required > b{font-size:13px;color:#7a5a00;font-weight:700}
.ed-spec{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:12px;align-items:center;font-size:13px}
.ed-spec span{font-weight:650;color:var(--ink)}
.ed-spec select,.ed-spec input{width:100%;max-width:340px}
html[data-theme="dark"] .ed-required{background:#2a2412;border-color:#5a4a16}
html[data-theme="dark"] .ed-required > b{color:#e8c46a}

.ed-spec span small{display:block;margin-top:2px;font-weight:450;font-size:11.5px;line-height:1.4;color:#a05a00}
html[data-theme="dark"] .ed-spec span small{color:#e8b050}

.ed-required.ok{background:#f2fbf4;border-color:#bfe3c7}
.ed-required.ok > b{color:#216a33}
.ed-spec.empty span small{color:#b42318}
html[data-theme="dark"] .ed-required.ok{background:#14261a;border-color:#2f5a3b}
html[data-theme="dark"] .ed-required.ok > b{color:#7bd48f}

/* Products table: ONE status bar down the left edge of a row. The older rule in panel.css also drew a 3px inset line in a darker shade of the same colour beside this bar, which read as two bars (amber and red) side by side. */
.tbl.ptable tr.row-ok td:first-child,.tbl.ptable tr.row-warn td:first-child,.tbl.ptable tr.row-bad td:first-child{box-shadow:none}

.pc-prime{color:var(--pc-5b3fd6,#5b3fd6);font-weight:650}
html[data-theme="dark"] .pc-prime{color:var(--pc-b6a4ff,#b6a4ff)}

/* Product research: the speed slider and the control panel on a running search */
.pr-speed{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 10px}
.pr-slide{display:inline-flex;align-items:center;gap:8px}
.pr-slide em{font-style:normal;font-size:12px;color:var(--muted)}
.pr-slide input[type=range]{width:140px;accent-color:var(--cobalt,var(--pc-2f6bff,#2f6bff))}
.pr-speed-name{min-width:62px;font-size:13px}
.pr-range{width:100%;margin-top:6px;accent-color:var(--cobalt,var(--pc-2f6bff,#2f6bff))}
.pr-th{display:flex;flex-direction:column}
.pr-preview{margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--panel-2,rgba(var(--pcr-120-150-255,120,150,255),.08));font-size:13px;line-height:1.5}
.pr-pv-row{display:flex;flex-wrap:wrap;gap:6px 18px}
.pr-pv-note,.pr-pv-new,.pr-pv-same{margin-top:4px;color:var(--muted)}

/* the AI title button (Drafts editor) */
.ed-ai{margin:10px 0 4px}.ed-ai-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ed-ai-cost{margin-left:6px;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11px;font-weight:600}
.ed-ai-note{font-size:12px;color:var(--muted)}.ed-ai-out{margin-top:8px}.ed-ai-out:empty{display:none}
.ed-ai-why{font-size:12.5px;color:var(--muted);margin:2px 0 8px}.ed-ai-left{margin-left:12px;font-size:12px;color:var(--muted)}
.ed-ai-msg{font-size:12.5px;margin:4px 0 8px;padding:7px 10px;border-radius:8px}.ed-ai-msg.bad{background:#fdecec;color:#9b1c1c}.ed-ai-msg.warn{background:#fff6e0;color:#7a4b00}

/* the product editor's side: only the latest reading and check, one line each */
.ed-latest{margin-top:14px;display:grid;gap:6px;font-size:13px}
.ed-latest-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;padding:8px 10px;border:1px solid var(--line,var(--pc-e4e6ef,#e4e6ef));border-radius:10px;background:var(--panel,#fff)}
.ed-latest-row>b{flex:none;min-width:88px}.ed-latest-row>span{white-space:nowrap}.ed-latest-row .pr-one{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.ed-older{margin-top:8px}.ed-older summary{cursor:pointer}.ed-older .tbl-wrap{margin-top:6px}

/* the AI description rewrite and the AI main photograph (Drafts editor) */
.ed-aic,.ed-aip{margin:2px 0 4px}
.ed-aip{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ed-aiphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}.ed-aiphead b{font-size:13.5px}
.ed-ai-cost.dark{background:rgba(var(--pcr-14-16-20,14,16,20),.08);color:inherit}
.ed-aicmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 10px}
.ed-aicol{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-width:0;font-size:13px;line-height:1.55}
.ed-aicol.new{border-color:var(--pc-b9c9ff,#b9c9ff);background:var(--pc-f4f7ff,#f4f7ff)}
.ed-aicol p{margin:6px 0 8px}.ed-aicol ul{margin:0;padding-left:18px;display:grid;gap:6px}.ed-aicol li b{color:var(--ink)}
.ed-ailab{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ed-aicol.new .ed-ailab{color:var(--brand)}
.ed-aion{padding:9px 12px;border-radius:10px;background:#eefaf2;border:1px solid #bfe3c7;color:#1d5a30;font-size:13px;line-height:1.5}
.ed-aipair{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin:8px 0 10px}
.ed-aipair figure{margin:0;display:grid;gap:6px;justify-items:center}
.ed-aipair img{width:240px;height:240px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px}
.ed-aipair figure.new img{border-color:var(--pc-b9c9ff,#b9c9ff);box-shadow:0 0 0 3px rgba(var(--pcr-26-63-212,26,63,212),.12)}
.ed-aipair figcaption{font-size:12px;color:var(--muted)}
.ed-aipair.one{align-items:center}.ed-aipair.one .ed-aion{flex:1 1 260px}
.ed-aistyle{display:inline-flex;align-items:center;gap:8px;font-size:13px}.ed-aistyle span{font-weight:650}
.ed-aiprev{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12.5px;color:var(--muted)}.ed-aiprev img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (max-width:760px){.ed-aicmp{grid-template-columns:1fr}.ed-aipair img{width:100%;max-width:240px;height:auto;aspect-ratio:1}}
html[data-theme="dark"] .ed-aicol.new{background:var(--pc-18213a,#18213a);border-color:var(--pc-3a4a7a,#3a4a7a)}
html[data-theme="dark"] .ed-aion{background:#14261a;border-color:#2f5a3b;color:#7bd48f}
html[data-theme="dark"] .ed-aipair img,html[data-theme="dark"] .ed-aiprev img{background:#fff}