/* Rakr design system. Tokens first, then component classes. Helvetica only,
   headings bold, body regular. Monochrome (black, white, grey) with lavender as the single accent. State colours are a
   separate vocabulary and never count as accent. Light and dark are both designed. */
:root {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F1F1;
  --color-text: #111111;
  --color-text-2: #555555;
  --color-text-3: #8A8A8A;
  --color-line: #E8E8E8;
  --color-accent: #7C6CE0;
  --color-accent-soft: #EEEBFF;
  --color-accent-ink: #5B4BC4;
  --color-on-accent: #FFFFFF;
  --state-live: #2E7D4F;
  --state-live-soft: #E3F3E8;
  --state-queued: #B7791F;
  --state-queued-soft: #FBF1DC;
  --state-review: #3A6EA5;
  --state-review-soft: #E6EEF8;
  --state-needs: #C43D3D;
  --state-needs-soft: #FBE7E7;
  --state-sold: #1F1F1F;
  --state-sold-soft: #E9E9E9;
  --state-none: #8A8A8A;
  --state-none-soft: #F1F1F1;

  --font-heading: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-heading-weight: 700;
  --font-body: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 30px rgba(0,0,0,.07);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.18);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0E0E0E;
    --color-surface: #171717;
    --color-surface-2: #1F1F1F;
    --color-text: #F2F2F2;
    --color-text-2: #B5B5B5;
    --color-text-3: #7F7F7F;
    --color-line: #2A2A2A;
    --color-accent: #B8ADFF;
    --color-accent-soft: #262238;
    --color-accent-ink: #CFC7FF;
    --color-on-accent: #14112A;
    --state-live: #6CC08F;
    --state-live-soft: #17271D;
    --state-queued: #E0A94A;
    --state-queued-soft: #2C2416;
    --state-review: #86ACDF;
    --state-review-soft: #1A2331;
    --state-needs: #E57373;
    --state-needs-soft: #331C1C;
    --state-sold: #EDEDED;
    --state-sold-soft: #2E2E2E;
    --state-none: #7F7F7F;
    --state-none-soft: #1F1F1F;
  }
}
:root[data-theme="dark"] {
  --color-bg: #0E0E0E;
  --color-surface: #171717;
  --color-surface-2: #1F1F1F;
  --color-text: #F2F2F2;
  --color-text-2: #B5B5B5;
  --color-text-3: #7F7F7F;
  --color-line: #2A2A2A;
  --color-accent: #B8ADFF;
  --color-accent-soft: #262238;
  --color-accent-ink: #CFC7FF;
  --color-on-accent: #14112A;
  --state-live: #6CC08F;
  --state-live-soft: #17271D;
  --state-queued: #E0A94A;
  --state-queued-soft: #2C2416;
  --state-review: #86ACDF;
  --state-review-soft: #1A2331;
  --state-needs: #E57373;
  --state-needs-soft: #331C1C;
  --state-sold: #EDEDED;
  --state-sold-soft: #2E2E2E;
  --state-none: #7F7F7F;
  --state-none-soft: #1F1F1F;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, strong, b, th { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
h1 { font-size: 26px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--space-2); }
h2 { font-size: 20px; line-height: 1.2; margin: 0 0 var(--space-2); }
h3 { font-size: 16px; margin: 0 0 var(--space-1); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.muted { color: var(--color-text-3); font-size: 12.5px; }
.eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-3); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 700 14px/1.2 var(--font-heading); color: var(--color-on-accent); background: var(--color-accent); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 10px 18px; text-decoration: none; }
.btn:hover { filter: brightness(.94); }
.btn:active { filter: brightness(.88); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-line); }
.btn-ghost:hover { background: var(--color-surface-2); filter: none; }
.btn-accent-ghost { background: var(--color-accent-soft); color: var(--color-accent-ink); border-color: transparent; }
.btn-quiet { background: var(--color-surface-2); color: var(--color-text); }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }
.btn-block { width: 100%; padding: 13px 18px; }

/* State chips: colour carries the state, the text carries the reason. */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1.4 var(--font-heading); padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--state-none-soft); color: var(--state-none); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-live { background: var(--state-live-soft); color: var(--state-live); }
.chip-queued { background: var(--state-queued-soft); color: var(--state-queued); }
.chip-review { background: var(--state-review-soft); color: var(--state-review); }
.chip-needs { background: var(--state-needs-soft); color: var(--state-needs); }
.chip-sold { background: var(--state-sold-soft); color: var(--state-sold); }
/* Pills: the compact platform badge inside a list row */
.pill { display: inline-block; font: 700 10.5px/1.5 var(--font-heading); padding: 2px 7px; border-radius: 5px; letter-spacing: .02em; background: var(--state-none-soft); color: var(--state-none); }
.pill-live { background: var(--state-live-soft); color: var(--state-live); }
.pill-queued { background: var(--state-queued-soft); color: var(--state-queued); }
.pill-review { background: var(--state-review-soft); color: var(--state-review); }
.pill-needs { background: var(--state-needs-soft); color: var(--state-needs); }
.pill-sold { background: var(--state-sold-soft); color: var(--state-sold); }

/* Cards and KPIs */
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.card-tint { background: var(--color-accent-soft); border-color: transparent; }
.card-alert { border-color: var(--state-needs); }
.card .t { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.card .d { font-size: 13px; color: var(--color-text-2); margin-top: 2px; }
.kpi { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.kpi .card { padding: 12px 10px; }
.kpi b { display: block; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--color-text-3); }
.meter { height: 6px; background: var(--color-surface-2); border-radius: 3px; overflow: hidden; margin: 6px 0 2px; }
.meter i { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }

/* Matrix: products by platform */
.matrix { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; font-size: 13.5px; }
.matrix th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-3); background: var(--color-bg); padding: 9px 12px; border-bottom: 1px solid var(--color-line); }
.matrix td { padding: 9px 12px; border-bottom: 1px solid var(--color-surface-2); vertical-align: middle; }
.matrix tr:last-child td { border-bottom: none; }
.matrix .thumb { width: 36px; height: 44px; border-radius: 5px; object-fit: cover; background: var(--color-surface-2); vertical-align: middle; margin-right: 10px; }
.matrix .reason { font-size: 11.5px; color: var(--color-text-3); margin-top: 2px; }

/* Item row (mobile list) */
.item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-surface-2); }
.item .thumb { width: 54px; height: 66px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-line), var(--color-surface-2)); }
.item .n { font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.25; }
.item .m { font-size: 12px; color: var(--color-text-3); margin: 1px 0 6px; }
.item .plats { display: flex; gap: 5px; flex-wrap: wrap; }

/* Task row: a question only the customer can answer */
.task { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-surface-2); }
.task .bar { width: 8px; height: 44px; border-radius: 4px; background: var(--state-queued); }
.task .bar-needs { background: var(--state-needs); }
.task .bar-done { background: var(--state-live); }
.task .tt { font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1.25; }
.task .td { font-size: 12.5px; color: var(--color-text-2); }

/* Forms */
.field { display: block; }
.field > label { display: block; font: 700 11.5px/1.4 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-3); margin-bottom: 4px; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 10px 12px; font: inherit; background: var(--color-surface); color: var(--color-text); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-3); }
.input:focus-visible, .textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.textarea { min-height: 110px; resize: vertical; }
.hint { font-size: 12.5px; color: var(--color-text-3); margin-top: 4px; }
.hint-warn { color: var(--state-queued); } .hint-ok { color: var(--state-live); }
.suggest { position: relative; }
.suggest ul { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 220px; overflow: auto; }
.suggest li { padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--color-accent-soft); }
.drop { border: 2px dashed var(--color-line); border-radius: 10px; padding: 18px; text-align: center; color: var(--color-text-3); cursor: pointer; }
.drop:hover { border-color: var(--color-accent); }
.switch { width: 44px; height: 26px; border-radius: 13px; background: var(--color-accent); position: relative; flex: none; display: inline-block; }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.switch-off { background: var(--color-line); } .switch-off::after { right: auto; left: 3px; }

/* Navigation */
.topbar { display: flex; gap: 18px; align-items: center; padding: 14px 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.topbar .brand { font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.topnav { display: flex; gap: 4px; }
.topnav a { padding: 7px 14px; border-radius: var(--radius-pill); font-weight: 700; color: var(--color-text-2); text-decoration: none; }
.topnav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.tabbar { display: flex; justify-content: space-around; align-items: flex-start; height: 78px; background: var(--color-surface); border-top: 1px solid var(--color-line); padding: 10px 6px 0; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--color-text-3); width: 64px; position: relative; text-decoration: none; }
.tabbar .ic { width: 26px; height: 26px; border-radius: 8px; border: 2px solid currentColor; display: block; }
.tabbar a[aria-current="page"] { color: var(--color-accent-ink); }
.tabbar a[aria-current="page"] .ic { background: var(--color-accent); border-color: var(--color-accent); }
.tabbar .badge { position: absolute; top: -4px; right: 12px; background: var(--state-needs); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); padding: 0 5px; line-height: 16px; }

/* Progress ring (Vinted session) */
.ring { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--color-accent) 0 var(--pct, 60%), var(--color-surface-2) var(--pct, 60%) 100%); display: flex; align-items: center; justify-content: center; }
.ring > div { width: 118px; height: 118px; border-radius: 50%; background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.ring span { font-size: 11.5px; color: var(--color-text-3); }

/* Event log */
.log { font-size: 12.5px; color: var(--color-text-2); border-left: 2px solid var(--color-line); padding-left: 10px; }
.log div { padding: 3px 0; }
.log b { color: var(--color-text); }

/* Phone frame for mobile previews */
.phone { width: 390px; max-width: 100%; height: 844px; background: var(--color-surface); border-radius: 44px; border: 10px solid #111111; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }

/* ---- Dashboard layout (app shell, Rakr) ---- */
:root{--side:236px;--topbar:56px}
body{background:var(--color-bg)}
.shell{min-height:100vh;display:grid;grid-template-columns:var(--side) 1fr}
/* sidebar */
.side{position:sticky;top:0;height:100vh;background:#111;color:#F2F2F2;display:flex;flex-direction:column;padding:18px 14px;gap:6px}
.side .brand{font:700 22px/1 var(--font-heading);letter-spacing:-.02em;padding:6px 10px 18px;color:#fff;display:flex;align-items:center;gap:10px}
.side .brand img{width:26px;height:26px;border-radius:8px;display:block}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:#B5B5B5;text-decoration:none;font:700 14px/1 var(--font-heading)}
.side nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side nav a:hover{background:#1C1C1C;color:#fff}
.side nav a[aria-current]{background:#222;color:#fff}
.side nav a .chip{margin-left:auto}
.side .sep{height:1px;background:#242424;margin:10px 6px}
.side .grow{flex:1}
.side .foot{padding:10px 12px;font-size:12.5px;color:#8A8A8A;line-height:1.5}
.side .foot b{display:block;color:#F2F2F2;font-size:13px}
.side .foot .row{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0}
.side .foot .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;line-height:1.4}
.side .foot .acct{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #242424}
.side .btn-ghost{color:#F2F2F2;border-color:#333}
.side .btn-ghost:hover{background:#1C1C1C}
.side .dot{width:8px;height:8px;border-radius:50%;background:var(--state-live);box-shadow:0 0 0 3px rgba(46,125,79,.25)}
.side .dot.off{background:var(--state-queued);box-shadow:0 0 0 3px rgba(183,121,31,.25)}
/* content */
.content{min-width:0}
.topbar{display:none}
main.page{max-width:1180px;width:100%;margin:0 auto;padding:30px 32px 90px}
.view{display:none}.view.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:28px;letter-spacing:-.02em}
.pagehead .sub{color:var(--color-text-3);font-size:13.5px;margin-top:5px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid32{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px}
@media (max-width:1000px){.grid2,.grid3,.grid4,.grid32{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){.grid2,.grid3,.grid4,.grid32{grid-template-columns:1fr}}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.card{min-width:0}
.card dl.facts dd{min-width:0;overflow-wrap:anywhere}
.card dl.facts dd .chip{margin:2px 2px 2px 0}
.card{padding:18px 20px}
.card h3{margin:0 0 12px;font-size:14px;letter-spacing:.01em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3 .muted{font-weight:400;font-size:12.5px}
/* KPI tiles */
.kpi-card{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:start;position:relative;overflow:hidden}
.kpi-card b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:8px}
.kpi-card span{font-size:12.5px;color:var(--color-text-3);display:block}
.kpi-card .lbl{font:700 11.5px/1 var(--font-heading);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-3)}
.kpi-card .ic{width:36px;height:36px;border-radius:10px;background:var(--color-accent-soft);color:var(--color-accent-ink);display:grid;place-items:center;grid-row:1/3}
.kpi-card .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kpi-card.alert .ic{background:var(--state-needs-soft);color:var(--state-needs)}
.kpi-card.ok .ic{background:var(--state-live-soft);color:var(--state-live)}
.kpi-card .sub{grid-column:1/-1;font-size:12.5px;color:var(--color-text-3)}
/* platform cards */
.pcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.mono{width:40px;height:40px;border-radius:12px;background:var(--color-surface-2);display:grid;place-items:center;font:700 15px var(--font-heading);color:var(--color-text);flex:none}
.mono.sm{width:28px;height:28px;border-radius:9px;font-size:12px}
.mono.vinted{background:#E6F7F8;color:#0B7F86}.mono.vestiaire{background:#F3EFE6;color:#5C4A1F}.mono.grailed{background:#EDEDED;color:#111}.mono.ebay{background:#FFF1E6;color:#B3540A}
.pcard .n{font:700 14px var(--font-heading)}
.pcard .v{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pcard .v small{font-size:12.5px;color:var(--color-text-3);font-weight:400;letter-spacing:0}
.pcard .meter{grid-column:1/-1;height:6px;background:var(--color-surface-2);border-radius:3px;overflow:hidden}
.pcard .meter i{display:block;height:100%;background:var(--color-accent);border-radius:3px;transition:width .4s ease}
.pcard .foot{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--color-text-3)}
/* activity feed */
.feed{display:grid;gap:2px}
.feed .ev{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:9px 0;border-bottom:1px solid var(--color-surface-2);font-size:13.5px}
.feed .ev:last-child{border-bottom:none}
.feed .ev .t{color:var(--color-text-3);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.feed .ev .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--color-surface-2);color:var(--color-text-2)}
.feed .ev .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feed .ev.ok .ic{background:var(--state-live-soft);color:var(--state-live)}
.feed .ev.bad .ic{background:var(--state-needs-soft);color:var(--state-needs)}
.feed .ev.info .ic{background:var(--state-review-soft);color:var(--state-review)}
.feed .ev.money .ic{background:var(--color-accent-soft);color:var(--color-accent-ink)}
.empty{padding:40px 20px;text-align:center;color:var(--color-text-3);border:1px dashed var(--color-line);border-radius:var(--radius-lg);font-size:14px;background:var(--color-surface)}
.empty b{display:block;color:var(--color-text);margin-bottom:4px;font-size:15px}
.empty .ic{width:44px;height:44px;border-radius:14px;background:var(--color-accent-soft);color:var(--color-accent-ink);display:grid;place-items:center;margin:0 auto 12px}
.empty .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.matrix{border:0;border-radius:0}
.matrix th{position:sticky;top:0;z-index:1;background:var(--color-surface);border-bottom:1px solid var(--color-line);padding:11px 14px}
.matrix td{padding:12px 14px}
.matrix tbody tr{cursor:pointer;transition:background .12s}
.matrix tbody tr:hover{background:var(--color-bg)}
.matrix .name{font-family:var(--font-heading);font-weight:700;line-height:1.3}
.matrix .meta{font-size:12px;color:var(--color-text-3);margin-top:2px}
.matrix .reason{font-size:12px;color:var(--color-text-3);margin-top:4px;max-width:220px}
.thumbwrap{display:flex;gap:12px;align-items:center}
.thumb{width:44px;height:54px;border-radius:8px;object-fit:cover;background:var(--color-surface-2);border:1px solid var(--color-line);flex:none}
.seg{flex:none;display:inline-flex;border:1px solid var(--color-line);border-radius:var(--radius-pill);overflow:hidden;background:var(--color-surface);padding:3px;gap:2px}
.seg button{all:unset;cursor:pointer;padding:6px 12px;border-radius:var(--radius-pill);font:700 12.5px var(--font-heading);color:var(--color-text-2)}
.seg button:hover{background:var(--color-surface-2)}
.seg button.on{background:var(--color-text);color:var(--color-surface)}
.search{border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:9px 14px 9px 36px;font:inherit;background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center/16px no-repeat;min-width:260px}
.search:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:14px}
.switch{cursor:pointer}
/* tasks */
.tgroup{margin-bottom:18px}
.tgroup h3{margin:0 0 8px;font-size:13px;color:var(--color-text-3);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.tgroup h3 .chip{text-transform:none;letter-spacing:0}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-surface-2)}
.task:last-child{border-bottom:none}
.task .bar{display:none}
.task .tt{font-family:var(--font-heading);font-weight:700;line-height:1.35}
.task .td{font-size:12.5px;color:var(--color-text-3);margin-top:2px;line-height:1.5}
.task .act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* item detail */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:8px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md);background:var(--color-surface-2)}
.gallery img:first-child{grid-row:span 2}
.prow{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-surface-2)}
.prow:last-child{border-bottom:none}
.prow .pn{font-family:var(--font-heading);font-weight:700;display:flex;align-items:center;gap:10px}
.prow .pd{font-size:12.5px;color:var(--color-text-3)}
.prow .pp{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13.5px}
dl.facts dt{color:var(--color-text-3)}dl.facts dd{margin:0;font-weight:700}
/* log (settings) */
.log{border-left:2px solid var(--color-line);padding-left:12px}
.log div{padding:5px 0;font-size:13px;color:var(--color-text-2)}
.log b{color:var(--color-text);font-variant-numeric:tabular-nums;margin-right:6px}
/* dialogs and toasts */
.backdrop{position:fixed;inset:0;background:rgba(17,17,17,.45);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:20;padding:16px}
.backdrop.on{display:flex}
.dialog{background:var(--color-surface);border-radius:var(--radius-lg);padding:24px;width:min(520px,100%);box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto}
.dialog h2{margin:0 0 6px;font-size:18px}
.dialog .muted{margin-bottom:14px}
.dialog .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.dialog .list button{width:100%;text-align:left;margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--color-text);color:var(--color-surface);padding:11px 18px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:700;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s;z-index:30;pointer-events:none}
.toast.on{opacity:1}
/* login */
.login{position:fixed;inset:0;background:radial-gradient(1200px 600px at 20% -10%,var(--color-accent-soft),transparent 60%),var(--color-bg);z-index:40;display:none}
.login.on{display:block}
.login .box{max-width:400px;margin:12vh auto 0;padding:0 20px}
.login .brand{font:700 34px/1 var(--font-heading);letter-spacing:-.03em;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.login .brand img{width:34px;height:34px;border-radius:10px;display:block}
.login .card{padding:24px;margin-top:18px}
.field+.field{margin-top:12px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form2 .full{grid-column:1/-1}
@media (max-width:700px){.form2{grid-template-columns:1fr}}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos .ph{position:relative;margin:0;width:84px;cursor:grab;transition:transform .12s,opacity .12s}
.photos .ph.dragging{opacity:.4;cursor:grabbing}
.photos .ph.over{transform:translateX(6px)}
.photos .ph.over::before{content:"";position:absolute;left:-6px;top:0;bottom:16px;width:3px;border-radius:2px;background:var(--color-accent)}
.photos .ph img{width:84px;height:104px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-line);display:block}
.photos .ph:first-child img{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft)}
.photos .ph figcaption{font:700 10.5px/1.6 var(--font-heading);letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent-ink);text-align:center}
.photos .ph .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-text-2);font:700 14px/1 var(--font-heading);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .12s;box-shadow:var(--shadow-sm)}
.photos .ph:hover .x,.photos .ph:focus-within .x{opacity:1}
.photos .ph .x:hover{color:var(--state-needs);border-color:var(--state-needs)}
.linkbtn{all:unset;cursor:pointer;color:var(--color-accent-ink);font-weight:700;font-size:13px}
.linkbtn:hover{text-decoration:underline}
.chip-dot::before{display:none}
.num{font-variant-numeric:tabular-nums}
/* mobile */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky;height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:8px;overflow-x:auto}
  .side .brand{padding:0 6px;font-size:18px}
  .side nav{flex-direction:row}
  .side nav a{padding:8px 10px;font-size:13px}
  .side nav a span.l{display:none}
  .side .sep,.side .foot,.side .grow{display:none}
  main.page{padding:20px 16px 80px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
}
@media (prefers-color-scheme: dark){
  .side{background:#0A0A0A}
  .mono.vinted{background:#0F2A2C;color:#5FD1D8}.mono.vestiaire{background:#2A2418;color:#D9C08F}.mono.grailed{background:#222;color:#F2F2F2}.mono.ebay{background:#2C1D10;color:#F0A468}
}

/* table polish */
#v-stock .matrix td:first-child{min-width:220px}
#v-sales .matrix td:first-child{min-width:170px}
#v-sales .matrix td{white-space:nowrap}
#v-sales .matrix td:first-child,#v-sales .matrix td:last-child{white-space:normal}
#v-sales .matrix td:last-child{min-width:190px}
.matrix .meta,.matrix .reason{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:240px}
.matrix td .chip{vertical-align:middle}
.rules{display:grid;gap:10px;font-size:13.5px}
.rules .r{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start}
.rules .r b{font-family:var(--font-heading)}
.rules .r .muted{font-size:12.5px}

#v-sales .matrix{font-size:13px}
#v-sales .matrix td,#v-sales .matrix th{padding:10px 10px}
#v-sales .matrix td:last-child{min-width:170px}
#v-settings .matrix td{white-space:normal}

.switchrow .seg{flex:none}
#v-settings .card h3{margin-bottom:4px}
#v-settings .matrix td{padding:9px 10px}

/* platform picks on the new-item form */
.picks{display:flex;gap:8px;flex-wrap:wrap}
.picks label{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface);cursor:pointer;font:700 13px var(--font-heading);user-select:none}
.picks label:hover{background:var(--color-surface-2)}
.picks label:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent-ink)}
.picks input{accent-color:var(--color-accent);width:16px;height:16px;margin:0}
.picks label.off{opacity:.5;cursor:not-allowed}

/* author styles must not beat the hidden attribute */
[hidden]{display:none !important}

/* full-size photo preview */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(17,17,17,.82);backdrop-filter:blur(3px);display:grid;place-items:center;padding:32px;cursor:zoom-out;animation:fade .15s ease}
.lightbox img{max-width:min(92vw,1100px);max-height:88vh;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--color-surface)}
.lightbox .close{position:fixed;top:18px;right:22px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:400 24px/1 var(--font-heading);cursor:pointer}
.lightbox .close:hover{background:rgba(255,255,255,.26)}

/* subscription banner */
.bill{background:var(--state-needs-soft);color:var(--state-needs);border-bottom:1px solid var(--state-needs);padding:11px 32px;font:700 13.5px var(--font-heading);display:flex;gap:12px;align-items:center;justify-content:space-between}
.bill.warn{background:var(--state-queued-soft);color:var(--state-queued);border-color:var(--state-queued)}
.bill .btn{padding:6px 14px;font-size:12.5px}
@media (max-width:900px){.bill{padding:10px 16px}}