/* ===========================================================================
   VESTIRÉ STUDIO — design system + shared UI primitives  -> window
   Editorial-luxury refresh. Themes/type switch via data-attrs on the app root.
   =========================================================================== */
const { useState, useEffect, useRef, useMemo } = React;

/* ---- STYLESHEET ---------------------------------------------------------- */
const VS_CSS = `
:root{
  --font-display:'Playfair Display', Georgia, serif;
  --font-sans:'Outfit', system-ui, sans-serif;
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --shadow-sm:0 1px 2px rgba(40,30,18,.05), 0 2px 8px rgba(40,30,18,.05);
  --shadow-md:0 6px 18px rgba(40,30,18,.07), 0 18px 44px rgba(40,30,18,.07);
  --shadow-lg:0 20px 60px rgba(40,30,18,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* THEME - Atelier Ivory (default) */
[data-theme="atelier"]{
  --paper:#eef1ea; --paper-2:#e3e8dd; --surface:#fbfdf9; --surface-2:#eef2ea;
  --ink:#1e241b; --ink-2:#46503f; --muted:#7e8a76; --line:#d7ded0; --line-2:#e6ebe0;
  --accent:#6f8a63; --accent-ink:#fff; --accent-soft:#e0e8d8; --accent-2:#4f6a47;
  --pending:#9a7d2e; --pending-bg:#f1ecd6;
  --processing:#3f6f8f; --processing-bg:#e1ecf2;
  --completed:#4f7a52; --completed-bg:#e2eedd;
  --cancelled:#a8504a; --cancelled-bg:#f2ded9;
}
/* THEME - Editorial Noir */
[data-theme="noir"]{
  --paper:#15120d; --paper-2:#1d1912; --surface:#211c14; --surface-2:#2a241a;
  --ink:#f4ecdd; --ink-2:#d3c8b4; --muted:#9a8e78; --line:#332c20; --line-2:#3d3527;
  --accent:#c8a360; --accent-ink:#1a1610; --accent-soft:#2c2518; --accent-2:#e0bd76;
  --pending:#d6a747; --pending-bg:#2e2614;
  --processing:#6fa6c8; --processing-bg:#162630;
  --completed:#7fb182; --completed-bg:#16271a;
  --cancelled:#d98079; --cancelled-bg:#2e1715;
}
/* THEME - Blush Couture */
[data-theme="blush"]{
  --paper:#f4e7e3; --paper-2:#eed9d4; --surface:#fffafa; --surface-2:#faedeb;
  --ink:#3a2530; --ink-2:#664a56; --muted:#a07f88; --line:#ecd4cf; --line-2:#f3e2de;
  --accent:#b06a73; --accent-ink:#fff; --accent-soft:#f0dcdb; --accent-2:#8c4b56;
  --pending:#bb7a36; --pending-bg:#f6e6d4;
  --processing:#6f7fa8; --processing-bg:#e6e8f2;
  --completed:#5f8a63; --completed-bg:#e3efe1;
  --cancelled:#b0565a; --cancelled-bg:#f4dde0;
}
*{box-sizing:border-box;}
.vs-root{font-family:var(--font-sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.vs-root ::selection{background:var(--accent); color:var(--accent-ink);}

h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.05;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
img{display:block; max-width:100%;}

.serif{font-family:var(--font-display);}
.disp{font-family:var(--font-display); font-weight:500; letter-spacing:.005em; font-variant-numeric:lining-nums;}
/* All numerals: consistent lining figures app-wide; prices/tables also tabular */
.vs-root{font-variant-numeric:lining-nums;}
.price{font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums lining-nums; letter-spacing:0; line-height:1.1;}
.vtable td,.vtable th{font-variant-numeric:tabular-nums lining-nums;}
.eyebrow{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-2); font-weight:600;}
.kicker{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* layout helpers */
.row{display:flex; align-items:center;}
.col{display:flex; flex-direction:column;}
.gap2{gap:2px;}.gap3{gap:3px;}.gap4{gap:4px;}.gap5{gap:5px;}.gap6{gap:6px;}.gap8{gap:8px;}.gap10{gap:10px;}.gap12{gap:12px;}.gap14{gap:14px;}.gap16{gap:16px;}.gap18{gap:18px;}.gap20{gap:20px;}.gap22{gap:22px;}.gap24{gap:24px;}.gap26{gap:26px;}.gap28{gap:28px;}.gap30{gap:30px;}.gap32{gap:32px;}
.wrap{flex-wrap:wrap;}
.between{justify-content:space-between;}
.acenter{align-items:center;}
.aend{align-items:flex-end;}
.grow{flex:1;}
.container{max-width:1240px; margin:0 auto; padding:0 28px;}
.divider{height:1px; background:var(--line);}

/* BUTTONS */
.vbtn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:.04em;
  padding:12px 22px; border-radius:50px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; white-space:nowrap;}
.vbtn svg{width:16px; height:16px;}
.vbtn:active{transform:translateY(1px) scale(.99);}
.vbtn--primary{background:var(--ink); color:var(--paper);}
.vbtn--primary:hover{background:var(--accent-2); color:#fff;}
.vbtn--accent{background:var(--accent); color:var(--accent-ink);}
.vbtn--accent:hover{filter:brightness(1.06); box-shadow:0 8px 22px -8px var(--accent);}
.vbtn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.vbtn--ghost:hover{border-color:var(--ink); background:var(--surface);}
.vbtn--soft{background:var(--surface-2); color:var(--ink); border-color:var(--line);}
.vbtn--soft:hover{background:var(--accent-soft); border-color:var(--accent-soft);}
.vbtn--danger{background:transparent; color:var(--cancelled); border-color:color-mix(in srgb,var(--cancelled) 35%, transparent);}
.vbtn--danger:hover{background:var(--cancelled-bg);}
.vbtn--sm{padding:8px 15px; font-size:12px;}
.vbtn--lg{padding:15px 30px; font-size:14px;}
.vbtn--block{width:100%;}
.vbtn[disabled]{opacity:.45; cursor:not-allowed;}

/* link chip */
.lnk{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--accent-2); cursor:pointer; letter-spacing:.02em;}
.lnk svg{width:15px;height:15px; transition:transform .2s var(--ease);}
.lnk:hover svg{transform:translateX(3px);}

/* CARD / surfaces */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.pad14{padding:14px;}.pad16{padding:16px;}.pad18{padding:18px;}.pad20{padding:20px;}.pad22{padding:22px;}.pad24{padding:24px;}.pad26{padding:26px;}.pad28{padding:28px;}.pad30{padding:30px;}.pad32{padding:32px;}

/* PILL / badge */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 11px 5px 9px; border-radius:50px; line-height:1;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.pill--pending{color:var(--pending); background:var(--pending-bg);}
.pill--processing{color:var(--processing); background:var(--processing-bg);}
.pill--completed{color:var(--completed); background:var(--completed-bg);}
.pill--cancelled{color:var(--cancelled); background:var(--cancelled-bg);}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-2); background:var(--accent-soft); padding:4px 10px; border-radius:50px;}
.tag--line{background:transparent; border:1px solid var(--line); color:var(--muted);}

/* FORM */
.field{display:flex; flex-direction:column; gap:7px;}
.label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted);}
.input,.select,.textarea{font-family:var(--font-sans); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  outline:none; transition:border-color .2s, box-shadow .2s; width:100%;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.textarea{resize:vertical; min-height:96px; line-height:1.5;}
.input::placeholder,.textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%, transparent);}

/* chip selectors */
.chip{font-size:12px; font-weight:600; letter-spacing:.03em; padding:9px 16px; border-radius:50px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:.18s var(--ease);}
.chip:hover{border-color:var(--accent); color:var(--ink);}
.chip--on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.sizechip{min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-sm); font-weight:600; font-size:13px; cursor:pointer; background:var(--surface); transition:.15s;}
.sizechip--on{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.sizechip[disabled]{opacity:.3; cursor:not-allowed; text-decoration:line-through;}

/* STEPPER (status) */
.stepper{display:flex; align-items:center; width:100%;}
.stepper .node{display:flex; flex-direction:column; align-items:center; gap:8px; position:relative;}
.stepper .dot{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); background:var(--surface); color:var(--muted); flex:none; transition:.25s;}
.stepper .dot svg{width:15px; height:15px;}
.stepper .seg{height:2px; flex:1; background:var(--line); margin:0 -2px; align-self:flex-start; margin-top:14px;}
.stepper .lbl{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted);}
.stepper .node--done .dot{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.stepper .node--done .lbl{color:var(--ink);}
.stepper .node--now .dot{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.stepper .node--now .lbl{color:var(--ink);}
.stepper .seg--done{background:var(--accent);}
.stepper--cancelled .dot{border-color:var(--cancelled) !important; color:var(--cancelled) !important; background:var(--cancelled-bg) !important;}

/* TIMELINE (status) */
.timeline{display:flex; flex-direction:column;}
.tl-item{display:flex; gap:14px; padding-bottom:18px; position:relative;}
.tl-item:last-child{padding-bottom:0;}
.tl-rail{display:flex; flex-direction:column; align-items:center; flex:none;}
.tl-bead{width:14px; height:14px; border-radius:50%; border:2px solid var(--line); background:var(--surface); flex:none; margin-top:2px;}
.tl-line{width:2px; flex:1; background:var(--line); margin:3px 0;}
.tl-item--done .tl-bead{background:var(--accent); border-color:var(--accent);}
.tl-item--done .tl-line{background:var(--accent);}
.tl-item--now .tl-bead{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.tl-item--cancel .tl-bead{background:var(--cancelled); border-color:var(--cancelled);}

/* progress bar */
.prog{height:6px; border-radius:50px; background:var(--line-2); overflow:hidden;}
.prog > i{display:block; height:100%; border-radius:50px; background:var(--accent); transition:width .5s var(--ease);}

/* TABLE */
.vtable{width:100%; border-collapse:separate; border-spacing:0;}
.vtable th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted);
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); white-space:nowrap;}
.vtable td{padding:14px 16px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:middle;}
.vtable tbody tr{transition:background .15s;}
.vtable tbody tr:hover{background:var(--surface-2);}
.vtable tr:last-child td{border-bottom:none;}

/* thumbs */
.thumb{border-radius:var(--r-sm); object-fit:cover; background:var(--surface-2); flex:none;}
.avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-2); font-weight:700; font-size:13px; flex:none; letter-spacing:.02em;}

/* scrollbars */
.vs-root *::-webkit-scrollbar{width:10px; height:10px;}
.vs-root *::-webkit-scrollbar-thumb{background:var(--line); border-radius:50px; border:3px solid transparent; background-clip:padding-box;}
.vs-root *::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* animations - entrance only; resting state is always visible (safe for print / reduced-motion) */
@keyframes vsUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes vsFade{from{opacity:0;} to{opacity:1;}}
@keyframes vsPop{from{opacity:0; transform:scale(.96) translateY(8px);} to{opacity:1; transform:none;}}
.anim-up,.anim-fade,.anim-pop{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .anim-up{animation:vsUp .5s var(--ease) both;}
  .anim-fade{animation:vsFade .4s ease both;}
  .anim-pop{animation:vsPop .35s var(--ease) both;}
}

/* toast */
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:9000;
  background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:50px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; animation:vsPop .3s var(--ease) both;}
.toast svg{width:17px; height:17px; color:var(--accent);}

/* utilities */
.hide-sb::-webkit-scrollbar{display:none;}
.clamp2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ---- SALES REPORT (preview + print) ------------------------------------- */
.report-overlay{position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column;
  background:rgba(30,36,27,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:vsFade .2s ease both;}
.report-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:var(--surface); border-bottom:1px solid var(--line); flex:none;}
.report-scroll{flex:1; overflow:auto; padding:24px; display:flex; justify-content:center;}
.print-doc{background:#fff; color:#1e241b; width:100%; max-width:1040px; padding:38px 42px;
  box-shadow:0 24px 70px rgba(0,0,0,.3); border-radius:6px; font-family:var(--font-sans); align-self:flex-start;}
.report-head{margin-bottom:6px;}
.report-mark{width:48px; height:48px; border-radius:50%; border:1.5px solid #a9824a; color:#a9824a;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:26px; font-weight:600; flex:none;}
.report-rule{height:2px; background:#a9824a; opacity:.5; margin:16px 0;}
.report-head .rl{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8a7a5e; font-weight:700;}
.report-head .rv{font-size:15px; font-weight:600; margin-top:3px;}
.report-table{width:100%; border-collapse:collapse; margin-top:20px; font-size:11px;}
.report-table th{text-align:left; background:#f5f1e8; color:#6b5d44; text-transform:uppercase;
  font-size:9px; letter-spacing:.05em; padding:8px 9px; border-bottom:1.5px solid #e3d9c8;}
.report-table td{padding:7px 9px; border-bottom:1px solid #efefef; vertical-align:top;}
.report-table tfoot td{border-top:1.5px solid #d7ded0; border-bottom:none; font-size:12px; padding-top:10px;}
.report-status{font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:50px; white-space:nowrap;}
.rs-pending{background:#f4eed8; color:#9a7d2e;}
.rs-processing{background:#e1ecf2; color:#3f6f8f;}
.rs-completed{background:#e2eedd; color:#4f7a52;}
.rs-cancelled{background:#f3ded9; color:#a8504a;}
.report-foot{margin-top:24px; padding-top:12px; border-top:1px solid #eee; display:flex;
  justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:9px; color:#999;}

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body * { visibility: hidden !important; }
  .report-overlay, .report-overlay * { visibility: visible !important; }
  .report-overlay{ position:static !important; background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .report-bar{ display:none !important; }
  .report-scroll{ overflow:visible !important; padding:0 !important; display:block !important; }
  .print-doc{ box-shadow:none !important; max-width:none !important; width:100% !important; padding:0 !important; border-radius:0 !important; }
  .twk-panel{ display:none !important; }
}
`;

function injectVSStyles() {
  if (document.getElementById("vs-css")) return;
  const s = document.createElement("style");
  s.id = "vs-css";
  s.textContent = VS_CSS;
  document.head.appendChild(s);
}

/* ---- ICONS (thin-line) --------------------------------------------------- */
const PATHS = {
  cart: '<circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h2.2l2.3 12.2a1.5 1.5 0 0 0 1.5 1.2h8.7a1.5 1.5 0 0 0 1.5-1.2L20 7H6"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/>',
  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/>',
  heart: '<path d="M12 20S3.5 14.5 3.5 8.8A4.3 4.3 0 0 1 12 6a4.3 4.3 0 0 1 8.5 2.8C20.5 14.5 12 20 12 20Z"/>',
  check: '<path d="M4 12.5 9 17.5 20 6.5"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>',
  x: '<path d="M6 6l12 12M18 6 6 18"/>',
  arrow: '<path d="M5 12h14M13 6l6 6-6 6"/>',
  arrowL: '<path d="M19 12H5M11 6l-6 6 6 6"/>',
  chevD: '<path d="M6 9l6 6 6-6"/>',
  chevR: '<path d="M9 6l6 6-6 6"/>',
  menu: '<path d="M3 6h18M3 12h18M3 18h18"/>',
  calendar: '<rect x="3" y="4.5" width="18" height="16" rx="2.5"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/>',
  bag: '<path d="M5 8h14l-1 12.5H6Z"/><path d="M8.5 8V6.5a3.5 3.5 0 0 1 7 0V8"/>',
  mail: '<rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="m3.5 7 8.5 6 8.5-6"/>',
  grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
  hanger: '<path d="M12 6.5a2 2 0 1 1 2 2c-1 0-2 .8-2 2.2"/><path d="M12 10.7 3.5 17a1.4 1.4 0 0 0 .9 2.5h15.2a1.4 1.4 0 0 0 .9-2.5L12 10.7Z"/>',
  users: '<circle cx="9" cy="8" r="3.4"/><path d="M2.5 20c0-3.2 2.9-5 6.5-5s6.5 1.8 6.5 5"/><path d="M16 5.2a3.4 3.4 0 0 1 0 6.6M18 20c0-2.4-1-4-3-4.6"/>',
  chart: '<path d="M4 4v16h16"/><path d="M8 15l3-4 3 2.5L20 7"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  trash: '<path d="M4 7h16M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M6 7l1 13h10l1-13"/>',
  edit: '<path d="M4 20h4L19 9l-4-4L4 16Z"/><path d="M14 6l4 4"/>',
  filter: '<path d="M3 5h18l-7 8.5V20l-4 1v-7.5Z"/>',
  star: '<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9Z"/>',
  scissors: '<circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><path d="M8 8l12 9M20 7 9.5 14.5"/>',
  sparkle: '<path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7Z"/>',
  pin: '<path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/>',
  phone: '<path d="M6 3h3l1.5 5-2 1.2a12 12 0 0 0 5.3 5.3l1.2-2 5 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3Z"/>',
  logout: '<path d="M14 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3"/><path d="M9 12h11M16 8l4 4-4 4"/>',
  truck: '<rect x="2.5" y="6.5" width="11" height="9" rx="1.5"/><path d="M13.5 9.5H18l3 3v3h-7.5"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
  box: '<path d="M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5Z"/><path d="M3.5 7.5 12 12l8.5-4.5M12 12v9"/>',
  eye: '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  ruler: '<rect x="3" y="8" width="18" height="8" rx="1.5"/><path d="M7 8v3M11 8v4M15 8v3M19 8v4"/>'
};
function Icon({ name, size = 18, stroke = 1.6, style, className }) {
  return React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    style, className, dangerouslySetInnerHTML: { __html: PATHS[name] || "" }
  });
}

/* ---- LOGO ---------------------------------------------------------------- */
function Logo({ size = 30, sub = true, light = false }) {
  return (
    <div className="row gap10 acenter">
      <img src={light ? "img/logo-white.webp" : "img/logo-dark.webp"} alt="Vestiré Studio" style={{
        width: size + 30, height: size + 30, borderRadius: "50%", flex: "none",
        objectFit: "cover", boxShadow: "0 2px 8px rgba(0,0,0,0.12)"
      }} />
      <div className="col" style={{ lineHeight: 1 }}>
        <span className="disp" style={{ fontSize: size, letterSpacing: ".02em", color: light ? "#fff" : "var(--ink)" }}>Vestiré&nbsp;Studio</span>
        {sub && <span style={{ fontSize: 8.5, letterSpacing: ".34em", textTransform: "uppercase", color: "var(--muted)", marginTop: 3 }}>Atelier&nbsp;·&nbsp;Davao</span>}
      </div>
    </div>
  );
}

/* ---- BUTTON / LINK ------------------------------------------------------- */
function Btn({ variant = "primary", size, block, icon, iconR, children, ...rest }) {
  const cls = ["vbtn", "vbtn--" + variant, size === "sm" ? "vbtn--sm" : size === "lg" ? "vbtn--lg" : "", block ? "vbtn--block" : ""].join(" ");
  return (
    <button className={cls} {...rest}>
      {icon && <Icon name={icon} />}
      {children}
      {iconR && <Icon name={iconR} />}
    </button>
  );
}
function Link({ icon, iconR = "arrow", children, ...rest }) {
  return (
    <span className="lnk" {...rest}>
      {icon && <Icon name={icon} />}
      {children}
      {iconR && <Icon name={iconR} />}
    </span>
  );
}

/* ---- STATUS PRIMITIVES --------------------------------------------------- */
function StatusPill({ status }) {
  return (
    <span className={"pill pill--" + status.toLowerCase()}>
      <span className="dot" />{status}
    </span>
  );
}
const STATUS_ICON = { Pending: "clock", Processing: "scissors", Completed: "check" };
function StatusStepper({ status }) {
  const steps = VS.statusOrder; // Pending, Processing, Completed
  const cancelled = status === "Cancelled";
  const idx = cancelled ? 1 : steps.indexOf(status);
  return (
    <div className={"stepper" + (cancelled ? " stepper--cancelled" : "")}>
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          {i > 0 && <div className={"seg" + (i <= idx && !cancelled ? " seg--done" : "")} />}
          <div className={"node " + (cancelled ? "node--done" : i < idx ? "node--done" : i === idx ? "node--now" : "")}>
            <div className="dot"><Icon name={cancelled ? "x" : i < idx ? "check" : STATUS_ICON[s]} /></div>
            <span className="lbl">{cancelled && i === 1 ? "Cancelled" : s}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}
function StatusTimeline({ req }) {
  const steps = [
    { k: "Pending", label: "Request received", note: "We've got your request and will confirm availability.", date: req.createdAt },
    { k: "Processing", label: "In preparation", note: req.type === "rental" ? "Fitting & reservation in progress." : "Order confirmed, preparing your gown.", date: req.status !== "Pending" ? req.updatedAt : null },
    { k: "Completed", label: req.type === "rental" ? "Ready for pickup" : "Completed", note: req.type === "rental" ? "Collect on your reserved date." : "All done - enjoy!", date: req.status === "Completed" ? req.updatedAt : null }
  ];
  const order = VS.statusOrder;
  const cancelled = req.status === "Cancelled";
  const idx = cancelled ? 0 : order.indexOf(req.status);
  return (
    <div className="timeline">
      {(cancelled ? steps.slice(0, 1).concat([{ k: "Cancelled", label: "Request cancelled", note: "This request was cancelled.", date: req.updatedAt }]) : steps).map((s, i, arr) => {
        const done = !cancelled && i < idx;
        const now = !cancelled && i === idx;
        const cancel = s.k === "Cancelled";
        return (
          <div key={s.k} className={"tl-item " + (cancel ? "tl-item--cancel" : done ? "tl-item--done" : now ? "tl-item--now tl-item--done" : "")}>
            <div className="tl-rail">
              <div className="tl-bead" />
              {i < arr.length - 1 && <div className="tl-line" />}
            </div>
            <div className="col gap4" style={{ paddingBottom: 2 }}>
              <div className="row gap8 acenter wrap">
                <span style={{ fontWeight: 700, fontSize: 14, color: (done || now || cancel) ? "var(--ink)" : "var(--muted)" }}>{s.label}</span>
                {s.date && <span className="muted" style={{ fontSize: 12 }}>· {fmtDate(s.date)}</span>}
              </div>
              <span className="muted" style={{ fontSize: 12.5, lineHeight: 1.45 }}>{s.note}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---- MISC HELPERS -------------------------------------------------------- */
function fmtDate(d) {
  if (!d) return "—";
  const dt = new Date(d.length <= 10 ? d + "T00:00:00" : d.replace(" ", "T"));
  return dt.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}
function initials(name) {
  return name.split(" ").filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
}
function Stat({ label, value, sub, icon, accent }) {
  return (
    <div className="card pad20 col gap12" style={{ borderRadius: "var(--r-md)" }}>
      <div className="row between acenter">
        <span className="label">{label}</span>
        {icon && <span style={{ color: accent ? "var(--accent)" : "var(--muted)" }}><Icon name={icon} size={17} /></span>}
      </div>
      <div className="disp" style={{ fontSize: 32, lineHeight: 1 }}>{value}</div>
      {sub && <span className="muted" style={{ fontSize: 12.5 }}>{sub}</span>}
    </div>
  );
}
function Field({ label, children }) {
  return (<label className="field"><span className="label">{label}</span>{children}</label>);
}
function Toast({ msg, icon = "check" }) {
  return (<div className="toast"><Icon name={icon} />{msg}</div>);
}

Object.assign(window, {
  injectVSStyles, Icon, Logo, Btn, Link, StatusPill, StatusStepper, StatusTimeline,
  fmtDate, initials, Stat, Field, Toast
});