npm - @rovela-ai/sdk - Versions diffs - 0.19.4 → 0.19.5 - Mend

@rovela-ai/sdk 0.19.4 → 0.19.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/docs/design/admin-ledger-visual-universe.html ADDED Viewed

@@ -0,0 +1,1961 @@
+<!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1"><style>:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}</style></head><body>
+<title>Rovela Admin — LEDGER Visual Universe</title>
+<style>
+  /* ════════════════════════════════════════════════════════════════
+     PAGE CHROME TOKENS (the spec document around the artboards)
+     ════════════════════════════════════════════════════════════════ */
+  :root{
+    --pg-bg:#ECE7DE;
+    --pg-card:#F7F3ED;
+    --pg-ink:#262F31;
+    --pg-muted:#657172;
+    --pg-subtle:#8C9899;
+    --pg-border:#DCD5C8;
+    --pg-accent:#0CAF7D;
+    --pg-accent-deep:#087C58;
+    --pg-code:#F1ECE3;
+    --frame-edge:#D8D1C3;
+  }
+  @media (prefers-color-scheme: dark){
+    :root{
+      --pg-bg:#191B1C;
+      --pg-card:#212425;
+      --pg-ink:#E8E6E1;
+      --pg-muted:#9BA3A2;
+      --pg-subtle:#6E7877;
+      --pg-border:#32373820;
+      --pg-border:#343839;
+      --pg-code:#1D2021;
+      --frame-edge:#3A3F40;
+    }
+  }
+  :root[data-theme="dark"]{
+    --pg-bg:#191B1C; --pg-card:#212425; --pg-ink:#E8E6E1; --pg-muted:#9BA3A2;
+    --pg-subtle:#6E7877; --pg-border:#343839; --pg-code:#1D2021; --frame-edge:#3A3F40;
+  }
+  :root[data-theme="light"]{
+    --pg-bg:#ECE7DE; --pg-card:#F7F3ED; --pg-ink:#262F31; --pg-muted:#657172;
+    --pg-subtle:#8C9899; --pg-border:#DCD5C8; --pg-code:#F1ECE3; --frame-edge:#D8D1C3;
+  }
+  *{box-sizing:border-box;margin:0;padding:0}
+  html{scroll-behavior:smooth}
+  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
+  body{
+    background:var(--pg-bg);
+    color:var(--pg-ink);
+    font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size:14px; line-height:1.55;
+    -webkit-font-smoothing:antialiased;
+  }
+  ::selection{background:#0CAF7D33}
+  .wrap{max-width:1240px;margin:0 auto;padding:0 32px}
+  @media(max-width:760px){ .wrap{padding:0 16px} }
+  /* ── hero ─────────────────────────────────────────────── */
+  .hero{padding:72px 0 40px}
+  .hero .eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pg-accent-deep)}
+  :root[data-theme="dark"] .hero .eyebrow{color:var(--pg-accent)}
+  @media (prefers-color-scheme: dark){ .hero .eyebrow{color:var(--pg-accent)} }
+  .hero h1{font-size:clamp(28px,4.5vw,44px);font-weight:700;letter-spacing:-0.02em;line-height:1.12;margin:10px 0 14px;text-wrap:balance}
+  .hero p.lede{max-width:62ch;color:var(--pg-muted);font-size:15px}
+  .hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
+  .hero .meta span{font-size:12px;font-weight:600;color:var(--pg-muted);border:1px solid var(--pg-border);border-radius:999px;padding:4px 12px;background:var(--pg-card)}
+  /* ── sticky toc ───────────────────────────────────────── */
+  .toc{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--pg-bg) 88%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--pg-border)}
+  .toc .wrap{display:flex;gap:4px;overflow-x:auto;padding-top:10px;padding-bottom:10px}
+  .toc a{font-size:12.5px;font-weight:600;color:var(--pg-muted);text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:color .14s,background .14s}
+  .toc a:hover{color:var(--pg-ink);background:var(--pg-card)}
+  .toc a:focus-visible{outline:2px solid var(--pg-accent);outline-offset:2px}
+  section{padding:56px 0 8px}
+  .sec-eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pg-subtle)}
+  .sec-title{font-size:24px;font-weight:700;letter-spacing:-0.015em;margin:6px 0 8px}
+  .sec-note{color:var(--pg-muted);max-width:70ch;margin-bottom:26px;font-size:14px}
+  /* ── laws grid ────────────────────────────────────────── */
+  .laws{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
+  .law{background:var(--pg-card);border:1px solid var(--pg-border);border-radius:12px;padding:18px 18px 16px}
+  .law .n{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--pg-accent-deep)}
+  @media (prefers-color-scheme: dark){ .law .n{color:var(--pg-accent)} }
+  :root[data-theme="dark"] .law .n{color:var(--pg-accent)}
+  :root[data-theme="light"] .law .n{color:var(--pg-accent-deep)}
+  .law h3{font-size:14px;font-weight:700;margin:6px 0 6px}
+  .law p{font-size:12.5px;color:var(--pg-muted);line-height:1.5}
+  /* ── generic spec panels ──────────────────────────────── */
+  .panel{background:var(--pg-card);border:1px solid var(--pg-border);border-radius:12px;padding:22px;margin-bottom:14px}
+  .panel h3{font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:14px;text-transform:uppercase;font-size:11px;letter-spacing:.09em;color:var(--pg-subtle)}
+  .cols{display:grid;gap:14px}
+  @media(min-width:900px){ .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:1fr 1fr 1fr} }
+  .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
+  .sw{border:1px solid var(--pg-border);border-radius:10px;overflow:hidden;background:var(--pg-card)}
+  .sw .chip{height:52px}
+  .sw .lbl{padding:8px 10px}
+  .sw .lbl b{display:block;font-size:12px;font-weight:600}
+  .sw .lbl span{font-size:11px;color:var(--pg-subtle);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+  .type-row{display:flex;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px dashed var(--pg-border)}
+  .type-row:last-child{border-bottom:none}
+  .type-row .px{width:118px;flex:none;font-size:11px;color:var(--pg-subtle);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+  .type-row .use{margin-left:auto;font-size:11.5px;color:var(--pg-muted);text-align:right;max-width:220px}
+  code, .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  pre.code{background:var(--pg-code);border:1px solid var(--pg-border);border-radius:10px;padding:16px;font-size:12px;line-height:1.6;overflow-x:auto;color:var(--pg-ink)}
+  pre.code .c{color:var(--pg-subtle)} pre.code .k{color:var(--pg-accent-deep);font-weight:600}
+  @media (prefers-color-scheme: dark){ pre.code .k{color:var(--pg-accent)} }
+  :root[data-theme="dark"] pre.code .k{color:var(--pg-accent)}
+  /* ════════════════════════════════════════════════════════════════
+     ARTBOARD TOKENS (the product itself; deliberately light-only)
+     ════════════════════════════════════════════════════════════════ */
+  .board{
+    --bg:#F7F3ED; --card:#FFFFFF; --sidebar:#F9F7F4; --side-hover:#EFEBE4;
+    --ink:#262F31; --muted:#657172; --subtle:#8C9899;
+    --border:#E5E0D6; --border-strong:#D8D1C3;
+    --accent:#0CAF7D; --accent-hover:#0C9A6E; --accent-deep:#087C58; --accent-tint:#E3F8F0;
+    --ok-bg:#E2F5EC; --ok-fg:#0B7A57; --ok:#129B6C;
+    --warn-bg:#FCF0D8; --warn-fg:#8A6116; --warn:#E8A213;
+    --err-bg:#FCE5E3; --err-fg:#B3372C;
+    --info-bg:#E3EFFA; --info-fg:#2563A8; --info:#3372BD;
+    --attn-bg:#EEF2D9; --attn-fg:#5F6E1D;
+    --edge:0 1px 2px rgba(38,47,49,.04);
+    --pop:0 4px 14px -4px rgba(38,47,49,.14), 0 0 0 1px rgba(38,47,49,.03);
+    --lift:0 16px 44px -14px rgba(38,47,49,.28);
+    --r-ctl:6px; --r-card:10px; --r-modal:12px;
+    --t:140ms cubic-bezier(.2,0,0,1);
+    background:var(--bg); color:var(--ink);
+    font-size:13px; line-height:1.5;
+    font-variant-ligatures:none;
+  }
+  .frame{border:1px solid var(--frame-edge);border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.05)}
+  .frame-bar{display:flex;align-items:center;gap:8px;background:var(--pg-card);border-bottom:1px solid var(--pg-border);padding:9px 14px}
+  .frame-bar .dots{display:flex;gap:5px}
+  .frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--pg-border);display:block}
+  .frame-bar .url{margin-left:6px;font-size:11.5px;color:var(--pg-subtle);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+  .frame-scroll{overflow-x:auto}
+  .board{min-width:1080px}
+  .board *{box-sizing:border-box}
+  .board .num{font-variant-numeric:tabular-nums}
+  .board .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
+  /* ── board: buttons ───────────────────────────────────── */
+  .b-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);white-space:nowrap}
+  .b-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+  .b-btn svg{width:15px;height:15px;flex:none}
+  .b-btn-primary{background:var(--accent);color:#fff}
+  .b-btn-primary:hover{background:var(--accent-hover)}
+  .b-btn-secondary{background:var(--card);border-color:var(--border-strong);color:var(--ink);box-shadow:var(--edge)}
+  .b-btn-secondary:hover{border-color:#C9C1B1;background:#FDFCFA}
+  .b-btn-ghost{background:transparent;color:var(--muted)}
+  .b-btn-ghost:hover{background:var(--side-hover);color:var(--ink)}
+  .b-btn-danger{background:transparent;border-color:transparent;color:var(--err-fg)}
+  .b-btn-danger:hover{background:var(--err-bg)}
+  .b-btn-danger-solid{background:#C24A3F;color:#fff}
+  .b-btn-danger-solid:hover{background:#B3372C}
+  .b-btn-sm{height:28px;padding:0 10px;font-size:12.5px}
+  .b-btn-icon{width:28px;height:28px;padding:0;justify-content:center;color:var(--subtle)}
+  .b-btn-icon:hover{background:var(--side-hover);color:var(--ink)}
+  /* ── board: inputs & selects ──────────────────────────── */
+  .b-input{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-ctl);font-size:13px;color:var(--ink);width:100%;font-family:inherit;transition:border-color var(--t),box-shadow var(--t)}
+  .b-input:focus,.b-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #0CAF7D22;outline:none}
+  .b-input input{border:none;outline:none;background:transparent;font:inherit;color:inherit;width:100%}
+  .b-input input::placeholder{color:var(--subtle)}
+  .b-input svg{width:14px;height:14px;color:var(--subtle);flex:none}
+  textarea.b-input{height:auto;min-height:72px;padding:8px 10px;resize:vertical;display:block}
+  .b-select{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;height:32px;padding:0 9px 0 11px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-ctl);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color var(--t);user-select:none}
+  .b-select:hover{border-color:#C9C1B1}
+  .b-select svg{width:13px;height:13px;color:var(--subtle)}
+  .b-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
+  .b-help{font-size:12px;color:var(--subtle);margin-top:5px}
+  .b-field{margin-bottom:16px}
+  .b-field:last-child{margin-bottom:0}
+  /* ── board: badges, chips ─────────────────────────────── */
+  .b-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.01em}
+  .b-badge-ok{background:var(--ok-bg);color:var(--ok-fg)}
+  .b-badge-warn{background:var(--warn-bg);color:var(--warn-fg)}
+  .b-badge-err{background:var(--err-bg);color:var(--err-fg)}
+  .b-badge-info{background:var(--info-bg);color:var(--info-fg)}
+  .b-badge-attn{background:var(--attn-bg);color:var(--attn-fg)}
+  .b-badge-mute{background:#EFEBE4;color:var(--muted)}
+  .b-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;cursor:pointer;transition:background var(--t),color var(--t)}
+  .b-chip:hover{background:var(--side-hover);color:var(--ink)}
+  .b-chip.on{background:var(--accent-tint);color:var(--accent-deep)}
+  .b-delta{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700}
+  .b-delta svg{width:10px;height:10px}
+  .b-delta.up{background:var(--ok-bg);color:var(--ok-fg)}
+  .b-delta.down{background:var(--err-bg);color:var(--err-fg)}
+  .b-delta.flat{background:#EFEBE4;color:var(--subtle)}
+  /* ── board: sidebar ───────────────────────────────────── */
+  .b-side{width:224px;flex:none;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:640px}
+  .b-side-brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
+  .b-side-brand .logo{width:28px;height:28px;border-radius:7px;background:var(--ink);color:#F7F3ED;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
+  .b-side-brand b{display:block;font-size:13px;font-weight:700;line-height:1.2}
+  .b-side-brand span{font-size:11px;color:var(--subtle)}
+  .b-side-nav{padding:10px 8px;flex:1}
+  .b-side-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--subtle);padding:14px 10px 5px}
+  .b-side a{display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:background var(--t),color var(--t)}
+  .b-side a:hover{background:var(--side-hover);color:var(--ink)}
+  .b-side a.on{background:var(--accent-tint);color:var(--accent-deep);font-weight:600}
+  .b-side a svg{width:15px;height:15px;flex:none}
+  .b-side-foot{border-top:1px solid var(--border);padding:10px 8px}
+  .b-side-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px}
+  .b-side-user:hover{background:var(--side-hover)}
+  .b-side-user .av{width:24px;height:24px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
+  .b-side-user b{font-size:12.5px;font-weight:600}
+  .b-main{flex:1;min-width:0;padding:22px 28px 30px;position:relative}
+  .b-shell{display:flex;position:relative;overflow:hidden}
+  /* ── board: page header ───────────────────────────────── */
+  .b-phead{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
+  .b-phead .back{width:28px;height:28px;border-radius:6px;border:1px solid var(--border-strong);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex:none;margin-top:2px;transition:background var(--t)}
+  .b-phead .back:hover{background:var(--side-hover);color:var(--ink)}
+  .b-phead .back svg{width:15px;height:15px}
+  .b-phead .tt{min-width:0}
+  .b-phead .eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:2px}
+  .b-phead h1{font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1.25;display:flex;align-items:center;gap:10px}
+  .b-phead .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
+  .b-phead .acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
+  /* ── board: cards ─────────────────────────────────────── */
+  .b-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--edge)}
+  .b-card-pad{padding:18px}
+  .b-card-title{font-size:14px;font-weight:700;margin-bottom:2px}
+  .b-card-sub{font-size:12px;color:var(--subtle)}
+  /* ── board: KPI ───────────────────────────────────────── */
+  .b-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
+  .b-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--edge);padding:14px 16px 13px}
+  .b-kpi .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle)}
+  .b-kpi .v{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin:5px 0 7px}
+  .b-kpi .m{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--subtle)}
+  /* ── board: tables ────────────────────────────────────── */
+  .b-table{width:100%;border-collapse:collapse;font-size:13px}
+  .b-table th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
+  .b-table td{padding:0 12px;height:44px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
+  .b-table tr:last-child td{border-bottom:none}
+  .b-table tbody tr{transition:background var(--t);cursor:pointer}
+  .b-table tbody tr:hover{background:#FBF9F5}
+  .b-table .r{text-align:right}
+  .b-table .muted{color:var(--muted)}
+  .b-check{width:15px;height:15px;border:1.5px solid var(--border-strong);border-radius:4px;background:var(--card);appearance:none;cursor:pointer;display:inline-block;vertical-align:middle;position:relative;transition:background var(--t),border-color var(--t)}
+  .b-check:checked{background:var(--accent);border-color:var(--accent)}
+  .b-check:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
+  .b-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+  /* ── board: filter row / bulk bar ─────────────────────── */
+  .b-filters{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-height:32px}
+  .b-filters .grow{flex:1}
+  .b-bulk{display:none;align-items:center;gap:10px;background:var(--ink);color:#F5F2EC;border-radius:8px;padding:0 8px 0 14px;height:40px;font-size:12.5px;font-weight:600}
+  .b-bulk .b-btn{background:transparent;border:1px solid #4A5456;color:#E8E6E1;height:26px;font-size:12px}
+  .b-bulk .b-btn:hover{background:#3A4345}
+  .b-bulk .sp{flex:1}
+  .b-bulk .x{color:#9BA3A2;cursor:pointer;display:flex}
+  .b-bulk .x:hover{color:#fff}
+  .b-listrow.bulk-on .b-filters{display:none}
+  .b-listrow.bulk-on .b-bulk{display:flex;margin-bottom:12px}
+  /* ── board: row menu (⋯) ──────────────────────────────── */
+  .b-menu-wrap{position:relative;display:inline-block}
+  .b-menu{position:absolute;right:0;top:32px;z-index:30;min-width:168px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--pop);padding:5px;display:none}
+  .b-menu.open{display:block}
+  .b-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:none;background:transparent;border-radius:5px;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:background var(--t)}
+  .b-menu button:hover{background:var(--side-hover)}
+  .b-menu button.danger{color:var(--err-fg)}
+  .b-menu button.danger:hover{background:var(--err-bg)}
+  .b-menu button svg{width:14px;height:14px;color:var(--subtle)}
+  .b-menu button.danger svg{color:var(--err-fg)}
+  .b-menu hr{border:none;border-top:1px solid var(--border);margin:5px 4px}
+  /* ── board: save bar — the ATTENTION BAND ─────────────── */
+  /* The top bar is the identity band (emerald wash, one hairline). A dirty
+     document raises its bottom bookend: a DOCKED full-width surface in the
+     sidebar tone with an amber wash + top hairline. Never a floating dark
+     pill — in this system bands are washed surfaces; ink is for toasts. */
+  .b-savebar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 18px;background:linear-gradient(to top, rgba(232,162,19,.08), rgba(232,162,19,.015)),#F9F7F4;border-top:1px solid rgba(38,47,49,.12);transform:translateY(102%);transition:transform 200ms cubic-bezier(.2,0,0,1);z-index:40}
+  .b-savebar.show{transform:none}
+  .b-savebar .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
+  .b-savebar .lbl{font-size:13px;font-weight:700;white-space:nowrap}
+  .b-savebar .meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .b-savebar .sp{flex:1}
+  .b-savebar .b-btn{height:30px}
+  .b-savebar.saving .dot{background:var(--subtle)}
+  .b-savebar.saved{background:linear-gradient(to top, rgba(18,155,108,.10), rgba(18,155,108,.02)),#F9F7F4}
+  .b-savebar.saved .dot{background:var(--ok)}
+  .b-savebar.error-state{background:linear-gradient(to top, rgba(179,55,44,.09), rgba(179,55,44,.02)),#F9F7F4}
+  .b-savebar.error-state .dot{background:#B3372C}
+  /* Nav-guard: clicking away while dirty SHAKES the bar instead of silently
+     losing work (the beloved Shopify behavior). */
+  .b-savebar.shake{animation:sb-shake 320ms cubic-bezier(.36,.07,.19,.97)}
+  @keyframes sb-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-5px)}}
+  /* ── board: modal ─────────────────────────────────────── */
+  .b-overlay{position:absolute;inset:0;background:rgba(38,47,49,.32);display:none;align-items:center;justify-content:center;z-index:60;backdrop-filter:blur(1px)}
+  .b-overlay.open{display:flex}
+  .b-modal{width:400px;background:var(--card);border-radius:var(--r-modal);box-shadow:var(--lift);padding:20px;transform:translateY(4px) scale(.985);opacity:0;transition:transform 160ms cubic-bezier(.2,0,0,1),opacity 160ms}
+  .b-overlay.open .b-modal{transform:none;opacity:1}
+  .b-modal h4{font-size:15px;font-weight:700;margin-bottom:6px}
+  .b-modal p{font-size:13px;color:var(--muted);margin-bottom:16px}
+  .b-modal p b{color:var(--ink);font-weight:600}
+  .b-modal .acts{display:flex;justify-content:flex-end;gap:8px}
+  /* ── board: toast — THE notification (events only) ────── */
+  /* The toast is the FLOATING-CARD sibling of the save bar: same washed
+     surface language (green wash = success, red wash = error), ink text,
+     hairline border. It floats, so it earns the popover shadow. */
+  .b-toast{position:absolute;bottom:18px;right:18px;display:flex;align-items:center;gap:9px;background:linear-gradient(to top, rgba(18,155,108,.10), rgba(18,155,108,.02)),#fff;color:var(--ink);border:1px solid var(--border);font-size:12.5px;font-weight:600;border-radius:8px;padding:10px 14px;box-shadow:var(--pop);transform:translateY(64px);opacity:0;transition:transform 200ms cubic-bezier(.2,0,0,1),opacity 200ms;z-index:70}
+  .b-toast.show{transform:none;opacity:1}
+  .b-toast svg{width:14px;height:14px;color:#0B7A57;flex:none}
+  .b-toast.err{background:linear-gradient(to top, rgba(179,55,44,.10), rgba(179,55,44,.02)),#fff}
+  .b-toast.err svg{color:#B3372C}
+  .b-toast-action{margin-left:4px;color:var(--accent-deep);font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
+  .b-toast-x{margin-left:6px;display:inline-flex;color:var(--subtle);cursor:pointer}
+  .b-toast-x:hover{color:var(--ink)}
+  /* Stacked toaster (playground): a fixed bottom-right column inside the
+     board; newest at the bottom, max 3, success auto-dismisses, error is
+     sticky with a dismiss. */
+  .b-toaster{position:absolute;bottom:14px;right:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:80}
+  .b-toaster .b-toast{position:static;transform:none;opacity:1;animation:toast-in 200ms cubic-bezier(.2,0,0,1)}
+  @keyframes toast-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
+  .b-toaster .b-toast.leaving{opacity:0;transform:translateY(8px)}
+  /* ── board: misc ──────────────────────────────────────── */
+  .b-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px}
+  .b-empty .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-tint);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
+  .b-empty .ic svg{width:18px;height:18px}
+  .b-empty b{font-size:14px;font-weight:700}
+  .b-empty p{font-size:12.5px;color:var(--muted);margin:4px 0 14px;max-width:34ch}
+  .b-skel{height:12px;border-radius:5px;background:linear-gradient(90deg,#EFEBE4 25%,#F6F2EB 45%,#EFEBE4 65%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
+  @keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
+  .b-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
+  .b-tabs button{border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t)}
+  .b-tabs button:hover{color:var(--ink)}
+  .b-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
+  .b-seg{display:inline-flex;background:var(--card);border:1px solid var(--border-strong);border-radius:7px;padding:2px;gap:1px}
+  .b-seg button{border:none;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--muted);height:26px;padding:0 11px;border-radius:5px;cursor:pointer;transition:background var(--t),color var(--t)}
+  .b-seg button:hover{color:var(--ink)}
+  .b-seg button.on{background:var(--accent-tint);color:var(--accent-deep)}
+  .b-kbd{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--subtle);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--card)}
+  /* ── board: AUTH — the front door ─────────────────────── */
+  /* One shared shell for all five doors: cream page with the identity wash
+     greeting you at the top, brand tile (favicon-first) + store name +
+     ADMIN chip, a single 380px card, powered-by underneath. */
+  .v4{display:block;min-height:640px;background:linear-gradient(to bottom, rgba(12,175,125,.055), rgba(12,175,125,0) 220px),#F7F3ED;padding:0}
+  .v4-grid{display:grid;grid-template-columns:1fr 400px;gap:0;min-height:640px}
+  .v4-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
+  .v4-rail{border-left:1px solid var(--border);background:#F3EEE6;padding:22px;overflow-y:auto;max-height:640px}
+  .v4-rail-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:12px}
+  .v4-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
+  .v4-tile{width:40px;height:40px;border-radius:9px;background:#fff;border:1px solid var(--border);box-shadow:0 1px 2px rgba(38,47,49,.05);display:flex;align-items:center;justify-content:center}
+  .v4-tile span{font-weight:800;font-size:17px;color:#C0392B}
+  .v4-brand .nm{display:flex;align-items:center;gap:8px}
+  .v4-brand .nm b{font-size:15px;font-weight:700}
+  .v4-brand .nm i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#EFEBE4;border-radius:999px;padding:2px 7px}
+  .v4-card{width:380px;max-width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--edge);padding:24px}
+  .v4-card h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
+  .v4-card .sub{font-size:12.5px;color:var(--muted);margin:4px 0 18px}
+  .v4-field{margin-bottom:14px}
+  .v4-lblrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
+  .v4-lbl{font-size:12.5px;font-weight:600}
+  .v4-forgot{font-size:12px;font-weight:600;color:var(--accent-deep);cursor:pointer;text-decoration:none}
+  .v4-forgot:hover{text-decoration:underline}
+  .v4-input{position:relative;display:flex;align-items:center}
+  .v4-input input{width:100%;height:36px;padding:0 11px;background:#fff;border:1px solid #D8D1C3;border-radius:6px;font:inherit;font-size:13px;color:var(--ink);transition:border-color .14s,box-shadow .14s}
+  .v4-input input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(12,175,125,.13)}
+  .v4-eye{position:absolute;right:9px;color:var(--subtle);cursor:pointer;display:flex}
+  .v4-eye:hover{color:var(--ink)}
+  .v4-remember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:2px 0 16px;cursor:pointer;user-select:none}
+  .v4-submit{width:100%;height:36px;border:none;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .14s}
+  .v4-submit:hover{background:var(--accent-hover)}
+  .v4-submit:disabled{opacity:.75;cursor:default}
+  .v4-alert{display:none;background:linear-gradient(to top, rgba(179,55,44,.08), rgba(179,55,44,.02)),#fff;border:1px solid rgba(179,55,44,.25);border-radius:6px;padding:9px 11px;font-size:12.5px;color:#B3372C;font-weight:600;margin-bottom:14px}
+  .v4-alert.show{display:block}
+  .v4-pow{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--subtle);margin-top:20px}
+  .v4-pow b{color:var(--accent-deep)}
+  .v4-mini{background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:var(--edge);padding:16px;margin-bottom:12px}
+  .v4-mini .cap{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
+  .v4-mini h2{font-size:15px;font-weight:700;letter-spacing:-.01em}
+  .v4-mini .s{font-size:11px;color:var(--muted);margin:3px 0 10px}
+  .v4-mini .f{height:26px;border:1px solid #E0DACE;border-radius:5px;margin-bottom:8px;background:#FDFCFA}
+  .v4-mini .b{height:26px;border-radius:5px;background:var(--accent);opacity:.92;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
+  .v4-mini .okwash{display:flex;align-items:center;gap:8px;background:linear-gradient(to top, rgba(18,155,108,.10), rgba(18,155,108,.02)),#fff;border:1px solid var(--border);border-radius:6px;padding:9px 11px;font-size:11.5px;font-weight:600;color:#0B7A57}
+  /* ── board: ONE-WAY-EACH consolidation kit (tab 07) ───────── */
+  .os-cell{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px;box-shadow:var(--edge)}
+  .os-lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:12px;display:flex;align-items:center;gap:8px}
+  .os-lab .fix{margin-left:auto;font-size:10px;letter-spacing:.02em;text-transform:none;font-weight:700;color:var(--accent-deep);background:var(--accent-tint);border-radius:999px;padding:2px 8px;white-space:nowrap}
+  .os-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:12px}
+  .os-note b{color:var(--ink)}
+  .os-beh{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
+  .os-beh span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--border-strong);border-radius:999px;padding:3px 9px;background:var(--card)}
+  .os-beh span svg{width:10px;height:10px;color:var(--ok)}
+  .b-spin{display:inline-block;border:2px solid rgba(38,47,49,.14);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:b-rot .7s linear infinite;flex:none}
+  .b-spin.sm{width:12px;height:12px;border-width:1.5px}
+  .b-spin.lg{width:22px;height:22px}
+  .b-spin.inv{border-color:rgba(255,255,255,.35);border-top-color:#fff}
+  @keyframes b-rot{to{transform:rotate(360deg)}}
+  .b-switch{position:relative;width:34px;height:20px;border-radius:999px;background:#D8D1C3;border:none;cursor:pointer;transition:background var(--t);flex:none;padding:0}
+  .b-switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(38,47,49,.22);transition:transform var(--t)}
+  .b-switch[aria-checked="true"]{background:var(--accent)}
+  .b-switch[aria-checked="true"]::after{transform:translateX(14px)}
+  .b-switch:disabled{opacity:.45;cursor:default}
+  .b-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+  .os-addon{display:flex;align-items:stretch;width:100%}
+  .os-addon .pre{display:flex;align-items:center;padding:0 10px;background:#F3EEE6;border:1px solid var(--border-strong);border-right:none;border-radius:6px 0 0 6px;font-size:12.5px;color:var(--muted);font-weight:600}
+  .os-addon input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--border-strong);border-radius:0 6px 6px 0;font:inherit;font-size:13px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
+  .os-addon input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0CAF7D22}
+  .os-vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:12.5px}
+  .os-vs > div{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center}
+  .os-vs > div:nth-child(odd){border-right:1px solid var(--border);color:var(--subtle);background:#FBF9F5;text-decoration:line-through}
+  .os-vs > div:nth-last-child(-n+2){border-bottom:none}
+  .os-pagerow{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--border);margin-top:-1px}
+  .os-pagerow .info{font-size:12px;color:var(--muted)}
+  .os-alert{display:flex;align-items:center;gap:8px;background:linear-gradient(to top, rgba(179,55,44,.08), rgba(179,55,44,.02)),#fff;border:1px solid rgba(179,55,44,.25);border-radius:6px;padding:8px 11px;font-size:12.5px;color:#B3372C;font-weight:600;margin-bottom:14px}
+  /* ── board: MOBILE kit (tab 08) — phone frames ─────────── */
+  .ph{width:350px;flex:none;background:#F7F3ED;border:1px solid var(--frame-edge);border-radius:26px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);position:relative}
+  .ph-status{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 4px;font-size:10.5px;font-weight:700;color:var(--ink)}
+  .ph-status i{font-style:normal;letter-spacing:.06em;color:var(--subtle);font-weight:600}
+  .ph-body{position:relative;height:640px;overflow:hidden;display:flex;flex-direction:column;background:#F7F3ED}
+  .ph-home{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:110px;height:4px;border-radius:999px;background:rgba(38,47,49,.28);z-index:60;pointer-events:none}
+  .m-top{display:flex;align-items:center;gap:9px;height:48px;padding:0 10px;background:linear-gradient(to bottom, rgba(12,175,125,.06), rgba(12,175,125,.015)),#F9F7F4;border-bottom:1px solid rgba(38,47,49,.12);flex:none}
+  .m-burger{width:40px;height:40px;border:none;background:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex:none;margin-left:-6px}
+  .m-burger:hover{background:var(--side-hover)}
+  .m-burger svg{width:18px;height:18px}
+  .m-tile{width:24px;height:24px;border-radius:6px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#C0392B;flex:none}
+  .m-name{font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .m-iconbtn{width:36px;height:36px;border:none;background:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex:none}
+  .m-iconbtn:hover{background:var(--side-hover);color:var(--ink)}
+  .m-iconbtn svg{width:15px;height:15px}
+  .m-av{width:28px;height:28px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
+  .m-scroll{flex:1;overflow-y:auto;padding:14px 12px 70px}
+  .m-scrim{position:absolute;inset:0;background:rgba(38,47,49,.32);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
+  .ph.nav-open .m-scrim,.ph.sheet-open .m-scrim{opacity:1;pointer-events:auto}
+  .m-drawer{position:absolute;top:0;bottom:0;left:0;width:272px;background:#F9F7F4;border-right:1px solid var(--border);transform:translateX(-105%);transition:transform .2s cubic-bezier(.2,0,0,1);z-index:30;display:flex;flex-direction:column}
+  .ph.nav-open .m-drawer{transform:none}
+  .m-drawer-head{display:flex;align-items:center;gap:9px;padding:12px 12px;border-bottom:1px solid var(--border)}
+  .m-drawer-head .x{margin-left:auto;width:36px;height:36px;border:none;background:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--subtle);cursor:pointer}
+  .m-drawer-head .x:hover{background:var(--side-hover);color:var(--ink)}
+  .m-drawer-head .x svg{width:15px;height:15px}
+  .m-drawer nav{flex:1;overflow-y:auto;padding:8px}
+  .m-drawer nav a{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none}
+  .m-drawer nav a:hover{background:var(--side-hover);color:var(--ink)}
+  .m-drawer nav a.on{background:var(--accent-tint);color:var(--accent-deep);font-weight:600}
+  .m-drawer nav a svg{width:16px;height:16px;flex:none}
+  .m-kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
+  .m-kpi{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--edge);padding:11px 12px}
+  .m-kpi .k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle)}
+  .m-kpi .v{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:3px 0 4px;font-variant-numeric:tabular-nums}
+  .m-chiprow{display:flex;gap:2px;overflow-x:auto;margin:10px 0;padding-bottom:2px;scrollbar-width:none}
+  .m-chiprow::-webkit-scrollbar{display:none}
+  .m-chiprow .b-chip{flex:none;height:34px}
+  .m-row{display:flex;align-items:center;gap:10px;padding:12px 12px;border-bottom:1px solid var(--border);background:#fff}
+  .m-row:last-child{border-bottom:none}
+  .m-row b{font-size:13px;display:block}
+  .m-row .s{font-size:11.5px;color:var(--subtle)}
+  .m-row .amt{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;flex:none}
+  .m-savebar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:9px 12px 22px;background:linear-gradient(to top, rgba(232,162,19,.08), rgba(232,162,19,.015)),#F9F7F4;border-top:1px solid rgba(38,47,49,.12);z-index:15}
+  .m-savebar .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
+  .m-savebar .lbl{font-size:12.5px;font-weight:700}
+  .m-savebar .sp{flex:1}
+  .m-savebar .b-btn{height:36px}
+  .m-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .22s cubic-bezier(.2,0,0,1);z-index:40;box-shadow:var(--lift);padding:8px 18px 30px}
+  .ph.sheet-open .m-sheet{transform:none}
+  .m-sheet .grab{width:36px;height:4px;border-radius:999px;background:var(--border-strong);margin:4px auto 12px}
+  .m-sheet h4{font-size:15px;font-weight:700;margin-bottom:5px}
+  .m-sheet p{font-size:12.5px;color:var(--muted);margin-bottom:16px}
+  .m-sheet .acts{display:flex;justify-content:flex-end;gap:8px}
+  .m-sheet .b-btn{height:40px}
+  .m-toast{position:absolute;left:12px;right:12px;bottom:70px;display:flex;align-items:center;gap:8px;background:linear-gradient(to top, rgba(18,155,108,.10), rgba(18,155,108,.02)),#fff;border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-size:12.5px;font-weight:600;box-shadow:var(--pop);z-index:16}
+  .m-toast svg{width:14px;height:14px;color:#0B7A57;flex:none}
+  /* ── pattern switcher ─────────────────────────────────── */
+  .ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
+  .ptab{border:1px solid var(--pg-border);background:var(--pg-card);color:var(--pg-muted);font:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .14s}
+  .ptab:hover{color:var(--pg-ink)}
+  .ptab.on{background:var(--pg-ink);color:var(--pg-bg);border-color:var(--pg-ink)}
+  .ptab .k{opacity:.55;font-weight:700;margin-right:6px;font-size:11px}
+  .artwrap{display:none}
+  .artwrap.on{display:block}
+  .art-caption{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:6px}
+  .art-caption span{font-size:12px;color:var(--pg-muted);background:var(--pg-card);border:1px solid var(--pg-border);border-radius:999px;padding:4px 12px}
+  .art-caption span b{color:var(--pg-ink);font-weight:600}
+  /* mini board strip for primitives */
+  .strip{background:#F7F3ED;border:1px solid var(--frame-edge);border-radius:12px;padding:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
+  .strip + .strip{margin-top:10px}
+  .strip .lab{width:100%;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8C9899;margin-bottom:-2px}
+  footer{padding:48px 0 64px;color:var(--pg-subtle);font-size:12.5px}
+  footer .wrap{border-top:1px solid var(--pg-border);padding-top:24px}
+  /* charts */
+  .b-chartgrid line{stroke:var(--border);stroke-dasharray:3 4;stroke-width:1}
+  .b-axis{font-size:10.5px;fill:var(--subtle);font-family:inherit}
+</style>
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <defs>
+    <symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5.5 8.8V21h13V8.8"/><path d="M9.5 21v-6h5v6"/></symbol>
+    <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 3h13v18l-2.2-1.4-2.1 1.4-2.2-1.4L9.9 21l-2.2-1.4L5.5 21z"/><path d="M9 8.5h6M9 12.5h6"/></symbol>
+    <symbol id="i-box" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.2 12 3 3 8.2v7.6L12 21l9-5.2z"/><path d="M3 8.2l9 5.1 9-5.1"/><path d="M12 21v-7.7"/></symbol>
+    <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.4"/><path d="M2.8 20c.4-3.3 3-5.2 6.2-5.2s5.8 1.9 6.2 5.2"/><path d="M15.5 5.2a3.2 3.2 0 0 1 0 6"/><path d="M17.3 15.1c2.4.5 4 2.2 4.3 4.9"/></symbol>
+    <symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h4l2 2.5h7A2.5 2.5 0 0 1 21 10v7.5a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/></symbol>
+    <symbol id="i-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.8 11.8 3H21v9.2L12.2 21z"/><circle cx="16.2" cy="7.8" r="1.3"/></symbol>
+    <symbol id="i-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21.3S5.2 15 5.2 10.2a6.8 6.8 0 0 1 13.6 0C18.8 15 12 21.3 12 21.3z"/><circle cx="12" cy="10" r="2.4"/></symbol>
+    <symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.4" cy="9.6" r="1.5"/><path d="M21 15.5 16 10.5 6.5 19"/></symbol>
+    <symbol id="i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7.5 8.5 6 8.5-6"/></symbol>
+    <symbol id="i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20v-7M12 20V5M19 20v-10"/></symbol>
+    <symbol id="i-card" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 10h19"/></symbol>
+    <symbol id="i-truck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.5H14V17H2.5z"/><path d="M14 9.5h3.8l2.7 3V17H14"/><circle cx="7" cy="17.6" r="1.9"/><circle cx="16.8" cy="17.6" r="1.9"/></symbol>
+    <symbol id="i-pct" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19 19 5"/><circle cx="7" cy="7" r="2.4"/><circle cx="17" cy="17" r="2.4"/></symbol>
+    <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/><circle cx="9.5" cy="7" r="1.9" fill="var(--sidebar,#F9F7F4)"/><circle cx="15" cy="12" r="1.9" fill="var(--sidebar,#F9F7F4)"/><circle cx="7.5" cy="17" r="1.9" fill="var(--sidebar,#F9F7F4)"/></symbol>
+    <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.4"/><path d="M20.5 20.5 15.8 15.8"/></symbol>
+    <symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></symbol>
+    <symbol id="i-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
+    <symbol id="i-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></symbol>
+    <symbol id="i-more" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></symbol>
+    <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></symbol>
+    <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></symbol>
+    <symbol id="i-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9.5 7V4.5h5V7M6.5 7l.9 13.5h9.2L17.5 7"/><path d="M10 11v6M14 11v6"/></symbol>
+    <symbol id="i-ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4 10.5 13.5M17.5 13.5V20h-13V6.5H11"/></symbol>
+    <symbol id="i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 19.5.9-3.6L16.6 4.7a2 2 0 0 1 2.8 2.8L8.2 18.7z"/></symbol>
+    <symbol id="i-store" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 4h15.6L21 9H3z"/><path d="M5 9v11h14V9"/><path d="M9.5 20v-5.5h5V20"/></symbol>
+    <symbol id="i-dup" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 4H6a2 2 0 0 0-2 2v10"/></symbol>
+  </defs>
+</svg>
+<header class="hero">
+  <div class="wrap">
+    <div class="eyebrow">Rovela Admin · Design Language Proposal</div>
+    <h1>LEDGER<br>Warm paper. Precise ink. One emerald.</h1>
+    <p class="lede">One visual universe for the store admin, built from the platform's own DNA. Every screen is composed from the same twelve primitives under eight laws, so the product feels engineered rather than assembled, and the CSS gets lighter with every page we migrate.</p>
+    <div class="meta">
+      <span>13px working size</span><span>Weight over size</span><span>1px edges, no shadow soup</span><span>Accent used once per view</span><span>140ms ease-out</span><span>Tabular numerals</span>
+    </div>
+  </div>
+</header>
+<nav class="toc" aria-label="Sections">
+  <div class="wrap">
+    <a href="#laws">The 8 laws</a>
+    <a href="#foundations">Foundations</a>
+    <a href="#primitives">Primitives</a>
+    <a href="#patterns">Page patterns</a>
+    <a href="#lighter">Lighter code</a>
+  </div>
+</nav>
+<!-- ═══════════════════════ LAWS ═══════════════════════ -->
+<section id="laws">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 1</div>
+    <h2 class="sec-title">Eight laws every component follows</h2>
+    <p class="sec-note">These are the whole rulebook. Anything a component wants to do visually is an application of one of these laws; anything outside them is a bug. They live as a comment block at the top of admin-theme.css and in CLAUDE.md so Claude Code obeys them when it builds custom admin pages.</p>
+    <div class="laws">
+      <div class="law"><div class="n">LAW 01</div><h3>13px is the working size</h3><p>Body, tables, forms and nav all read at 13px. Hierarchy below 16px is carried by weight (500 → 600 → 700), never by size. 20px exists for exactly two things: the page title and hero stat values.</p></div>
+      <div class="law"><div class="n">LAW 02</div><h3>The emerald is spent once</h3><p>Per view, the accent appears on the single primary action, the active nav item and focus rings. Nothing else. Links, icons, filters and avatars are ink or tint, so the one green button is unmistakably "the thing to do".</p></div>
+      <div class="law"><div class="n">LAW 03</div><h3>One status recipe</h3><p>Every state chip is a tinted background with a dark saturated foreground at 4.5:1. Five tones: success, warning, error, info, attention. No solid fills, no alpha tricks, no borrowing the accent.</p></div>
+      <div class="law"><div class="n">LAW 04</div><h3>Edges, not shadows</h3><p>Resting cards sit on the cream with a hairline border and a 1px bottom edge. Blur is earned by elevation: popovers get a soft 4px, modals a deep 16px. Nothing else floats.</p></div>
+      <div class="law"><div class="n">LAW 05</div><h3>Differentiated radii</h3><p>6px on controls, 10px on cards, 12px on modals, full round on badges and chips. One radius everywhere is how templates look; three radii is how products look.</p></div>
+      <div class="law"><div class="n">LAW 06</div><h3>Numbers are typeset</h3><p>Money and quantities render in tabular numerals, right-aligned, so columns never wobble. Order numbers, SKUs and codes render in the mono stack. A commerce tool is judged by how its numbers sit.</p></div>
+      <div class="law"><div class="n">LAW 07</div><h3>Icons are quiet</h3><p>Lucide only, 15 to 16px beside 13px text, 1.5px stroke. Icons appear in nav, buttons and empty states. They never decorate data cells: no envelope before every email, no calendar before every date.</p></div>
+      <div class="law"><div class="n">LAW 08</div><h3>Motion comes from somewhere</h3><p>One token pair: 140ms ease-out for micro feedback, 200ms for surfaces. Menus grow from their trigger, the save bar slides from the bottom, toasts rise. Nothing fades in from nowhere, and reduced-motion is respected.</p></div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════ FOUNDATIONS ═══════════════════════ -->
+<section id="foundations">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 2</div>
+    <h2 class="sec-title">Foundations</h2>
+    <p class="sec-note">The palette is the platform's: warm cream ground, white cards, warm ink, one emerald. These are the exact tokens already landed in admin-theme.css; nothing here invents a second world.</p>
+    <div class="panel">
+      <h3>Color · surfaces &amp; ink</h3>
+      <div class="swatches">
+        <div class="sw"><div class="chip" style="background:#F7F3ED"></div><div class="lbl"><b>Cream ground</b><span>#F7F3ED</span></div></div>
+        <div class="sw"><div class="chip" style="background:#FFFFFF;border-bottom:1px solid #E5E0D6"></div><div class="lbl"><b>Card</b><span>#FFFFFF</span></div></div>
+        <div class="sw"><div class="chip" style="background:#F9F7F4"></div><div class="lbl"><b>Sidebar</b><span>#F9F7F4</span></div></div>
+        <div class="sw"><div class="chip" style="background:#E5E0D6"></div><div class="lbl"><b>Hairline</b><span>#E5E0D6</span></div></div>
+        <div class="sw"><div class="chip" style="background:#262F31"></div><div class="lbl"><b>Ink</b><span>#262F31</span></div></div>
+        <div class="sw"><div class="chip" style="background:#657172"></div><div class="lbl"><b>Ink muted</b><span>#657172</span></div></div>
+        <div class="sw"><div class="chip" style="background:#0CAF7D"></div><div class="lbl"><b>Emerald (scarce)</b><span>#0CAF7D</span></div></div>
+        <div class="sw"><div class="chip" style="background:#087C58"></div><div class="lbl"><b>Emerald deep</b><span>#087C58 on tints</span></div></div>
+      </div>
+    </div>
+    <div class="cols cols-2">
+      <div class="panel">
+        <h3>Color · the one status recipe</h3>
+        <div style="display:flex;flex-direction:column;gap:10px">
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#E2F5EC;color:#0B7A57">Paid</span><span style="font-size:12px;color:var(--pg-muted)">success · #E2F5EC / #0B7A57</span></div>
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#FCF0D8;color:#8A6116">Pending</span><span style="font-size:12px;color:var(--pg-muted)">warning · #FCF0D8 / #8A6116</span></div>
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#FCE5E3;color:#B3372C">Out of stock</span><span style="font-size:12px;color:var(--pg-muted)">error · #FCE5E3 / #B3372C</span></div>
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#E3EFFA;color:#2563A8">Shipped</span><span style="font-size:12px;color:var(--pg-muted)">info · #E3EFFA / #2563A8</span></div>
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#EEF2D9;color:#5F6E1D">Needs review</span><span style="font-size:12px;color:var(--pg-muted)">attention · #EEF2D9 / #5F6E1D</span></div>
+          <div style="display:flex;align-items:center;gap:12px"><span class="b-badge" style="background:#EFEBE4;color:#657172">Cancelled</span><span style="font-size:12px;color:var(--pg-muted)">neutral · never black, never red</span></div>
+        </div>
+      </div>
+      <div class="panel">
+        <h3>Type · the inverted ramp (Plus Jakarta Sans)</h3>
+        <div class="type-row"><span class="px">20 / 700 / -1%</span><span style="font-size:20px;font-weight:700;letter-spacing:-0.01em">Orders</span><span class="use">Page titles and hero stats. The only large text.</span></div>
+        <div class="type-row"><span class="px">14 / 700</span><span style="font-size:14px;font-weight:700">Customer details</span><span class="use">Card and section titles</span></div>
+        <div class="type-row"><span class="px">13 / 400–600</span><span style="font-size:13px">The working size: tables, forms, nav, body</span><span class="use">Weight makes hierarchy, not size</span></div>
+        <div class="type-row"><span class="px">12 / 500</span><span style="font-size:12px;color:var(--pg-muted)">Helper text, meta, timestamps</span><span class="use">Secondary voice</span></div>
+        <div class="type-row"><span class="px">11 / 700 / +7%</span><span style="font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pg-subtle)">Performance</span><span class="use">Eyebrows, column headers, KPI labels</span></div>
+        <div class="type-row"><span class="px">12 mono</span><span class="code" style="font-size:12px">#DD71DFDD · SKU 100638</span><span class="use">IDs, SKUs, codes</span></div>
+      </div>
+    </div>
+    <div class="cols cols-3">
+      <div class="panel">
+        <h3>Radii</h3>
+        <div style="display:flex;gap:10px;align-items:flex-end">
+          <div style="text-align:center"><div style="width:64px;height:40px;border:1.5px solid var(--pg-border);border-radius:6px;background:var(--pg-bg)"></div><div style="font-size:11px;color:var(--pg-subtle);margin-top:6px" class="code">6 · controls</div></div>
+          <div style="text-align:center"><div style="width:64px;height:48px;border:1.5px solid var(--pg-border);border-radius:10px;background:var(--pg-bg)"></div><div style="font-size:11px;color:var(--pg-subtle);margin-top:6px" class="code">10 · cards</div></div>
+          <div style="text-align:center"><div style="width:64px;height:56px;border:1.5px solid var(--pg-border);border-radius:12px;background:var(--pg-bg)"></div><div style="font-size:11px;color:var(--pg-subtle);margin-top:6px" class="code">12 · modals</div></div>
+          <div style="text-align:center"><div style="width:64px;height:22px;border:1.5px solid var(--pg-border);border-radius:999px;background:var(--pg-bg)"></div><div style="font-size:11px;color:var(--pg-subtle);margin-top:6px" class="code">999 · chips</div></div>
+        </div>
+      </div>
+      <div class="panel">
+        <h3>Elevation · three levels only</h3>
+        <div style="display:flex;flex-direction:column;gap:8px;font-size:12.5px">
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Resting card</b><span class="code" style="font-size:11px;color:var(--pg-subtle)">1px border + 0 1px 2px @4%</span></div>
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Popover / menu</b><span class="code" style="font-size:11px;color:var(--pg-subtle)">0 4px 14px -4px @14%</span></div>
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Modal / save bar</b><span class="code" style="font-size:11px;color:var(--pg-subtle)">0 16px 44px -14px @28%</span></div>
+        </div>
+      </div>
+      <div class="panel">
+        <h3>Motion · one token pair</h3>
+        <div style="display:flex;flex-direction:column;gap:8px;font-size:12.5px">
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Micro (hover, chips)</b><span class="code" style="font-size:11px;color:var(--pg-subtle)">140ms cubic-bezier(.2,0,0,1)</span></div>
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Surface (bar, modal, drawer)</b><span class="code" style="font-size:11px;color:var(--pg-subtle)">200ms, same curve</span></div>
+          <div style="display:flex;justify-content:space-between;gap:12px"><b style="font-weight:600">Origin rule</b><span style="font-size:11px;color:var(--pg-subtle)">everything enters from its trigger</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════ PRIMITIVES ═══════════════════════ -->
+<section id="primitives">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 3</div>
+    <h2 class="sec-title">Twelve primitives, rendered live</h2>
+    <p class="sec-note">Everything below is real HTML and CSS following the laws, on the actual cream ground. Hover them. These twelve are the entire component vocabulary: header, button, input, select, badge, chip, table, row menu, save bar, modal, empty state, skeleton. Every admin page is a composition of these and nothing else.</p>
+    <div class="strip board">
+      <div class="lab">Buttons · one primary per view, secondaries are ink</div>
+      <button class="b-btn b-btn-primary"><svg><use href="#i-plus"/></svg>Add product</button>
+      <button class="b-btn b-btn-secondary"><svg><use href="#i-ext"/></svg>View store</button>
+      <button class="b-btn b-btn-secondary">Export</button>
+      <button class="b-btn b-btn-ghost">Cancel</button>
+      <button class="b-btn b-btn-danger">Delete</button>
+      <button class="b-btn b-btn-icon" aria-label="More actions"><svg><use href="#i-more"/></svg></button>
+      <span style="flex-basis:100%"></span>
+      <span style="font-size:11.5px;color:#8C9899">Danger is quiet until confirmed; the solid red button lives only inside the confirm modal.</span>
+    </div>
+    <div class="strip board">
+      <div class="lab">Inputs &amp; selects · never browser-native, one focus ring</div>
+      <label class="b-input" style="max-width:250px"><svg><use href="#i-search"/></svg><input placeholder="Search orders" aria-label="Search orders"></label>
+      <span class="b-select" role="button" tabindex="0">All statuses<svg><use href="#i-chev"/></svg></span>
+      <span class="b-select" role="button" tabindex="0">Newest first<svg><use href="#i-chev"/></svg></span>
+      <span class="b-seg"><button>Today</button><button>7d</button><button class="on">30d</button><button>90d</button></span>
+      <span class="b-kbd">⌘K</span>
+    </div>
+    <div class="strip board">
+      <div class="lab">Badges &amp; chips · status speaks in tints, filters in emerald tint</div>
+      <span class="b-badge b-badge-ok">Paid</span>
+      <span class="b-badge b-badge-info">Shipped</span>
+      <span class="b-badge b-badge-warn">Pending</span>
+      <span class="b-badge b-badge-err">Out of stock</span>
+      <span class="b-badge b-badge-attn">Needs review</span>
+      <span class="b-badge b-badge-mute">Draft</span>
+      <span style="width:18px"></span>
+      <button class="b-chip">All</button>
+      <button class="b-chip on">Active</button>
+      <button class="b-chip">Drafts</button>
+      <button class="b-chip">Archived</button>
+    </div>
+    <div class="strip board" style="display:block">
+      <div class="lab" style="margin-bottom:12px">Page header · one component, four slots: back, eyebrow + title, subtitle, actions</div>
+      <div class="b-phead" style="margin-bottom:0">
+        <button class="back" aria-label="Back to products"><svg><use href="#i-back"/></svg></button>
+        <div class="tt">
+          <div class="eyebrow">Products</div>
+          <h1>Ampoule LED bulbe bleu B22 <span class="b-badge b-badge-ok" style="position:relative;top:-1px">Active</span></h1>
+          <div class="sub">SKU 100638 · last edited 2 hours ago</div>
+        </div>
+        <div class="acts">
+          <button class="b-btn b-btn-icon" aria-label="More"><svg><use href="#i-more"/></svg></button>
+          <button class="b-btn b-btn-secondary"><svg><use href="#i-ext"/></svg>Preview</button>
+          <button class="b-btn b-btn-primary">Save</button>
+        </div>
+      </div>
+    </div>
+    <div class="strip board" style="display:block">
+      <div class="lab" style="margin-bottom:12px">Empty state &amp; skeleton · designed, specific, geometry-true</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+        <div class="b-card"><div class="b-empty">
+          <div class="ic"><svg><use href="#i-tag"/></svg></div>
+          <b>No discounts yet</b>
+          <p>Create a code or an automatic promotion. It applies in your checkout with card and manual payments alike.</p>
+          <button class="b-btn b-btn-primary b-btn-sm"><svg><use href="#i-plus"/></svg>Create discount</button>
+        </div></div>
+        <div class="b-card b-card-pad">
+          <div style="display:flex;flex-direction:column;gap:14px;padding-top:4px">
+            <div style="display:flex;gap:12px;align-items:center"><div class="b-skel" style="width:34px;height:34px;border-radius:8px"></div><div style="flex:1"><div class="b-skel" style="width:55%;margin-bottom:8px"></div><div class="b-skel" style="width:35%"></div></div><div class="b-skel" style="width:56px;height:20px;border-radius:999px"></div></div>
+            <div style="display:flex;gap:12px;align-items:center"><div class="b-skel" style="width:34px;height:34px;border-radius:8px"></div><div style="flex:1"><div class="b-skel" style="width:65%;margin-bottom:8px"></div><div class="b-skel" style="width:30%"></div></div><div class="b-skel" style="width:56px;height:20px;border-radius:999px"></div></div>
+            <div style="display:flex;gap:12px;align-items:center"><div class="b-skel" style="width:34px;height:34px;border-radius:8px"></div><div style="flex:1"><div class="b-skel" style="width:45%;margin-bottom:8px"></div><div class="b-skel" style="width:40%"></div></div><div class="b-skel" style="width:56px;height:20px;border-radius:999px"></div></div>
+          </div>
+          <div style="font-size:11.5px;color:#8C9899;margin-top:14px">Skeletons mirror the final row geometry. Spinners exist only inside buttons.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════ PATTERNS ═══════════════════════ -->
+<section id="patterns">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 4</div>
+    <h2 class="sec-title">The five page patterns</h2>
+    <p class="sec-note">Every admin route is one of five shapes. These artboards are interactive: check rows on Orders to raise the bulk bar, edit a field on the Product page to summon the save bar, open the row menu on Discounts and delete one to see the canonical confirm and toast. Tab 07 is the consolidation kit from the July 11 full-admin audit: for every job that still has several answers in the code, the one sanctioned answer.</p>
+    <div class="ptabs" role="tablist">
+      <button class="ptab on" data-art="art-dash" role="tab"><span class="k">01</span>Dashboard</button>
+      <button class="ptab" data-art="art-index" role="tab"><span class="k">02</span>Index · Orders</button>
+      <button class="ptab" data-art="art-detail" role="tab"><span class="k">03</span>Detail · Product</button>
+      <button class="ptab" data-art="art-mgr" role="tab"><span class="k">04</span>Manager · Discounts</button>
+      <button class="ptab" data-art="art-states" role="tab"><span class="k">05</span>Overlays &amp; states</button>
+      <button class="ptab" data-art="art-auth" role="tab"><span class="k">06</span>Auth</button>
+      <button class="ptab" data-art="art-onesource" role="tab"><span class="k">07</span>One way each</button>
+      <button class="ptab" data-art="art-mobile" role="tab"><span class="k">08</span>Mobile</button>
+    </div>
+    <!-- ── ARTBOARD 01 · DASHBOARD ── -->
+    <div class="artwrap on" id="art-dash">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin</span></div>
+        <div class="frame-scroll"><div class="board b-shell">
+          <aside class="b-side">
+            <div class="b-side-brand"><div class="logo">E</div><div><b>EasyElec</b><span>Admin</span></div></div>
+            <nav class="b-side-nav">
+              <a class="on" href="#art-dash" onclick="return false"><svg><use href="#i-home"/></svg>Home</a>
+              <a href="#" onclick="return false"><svg><use href="#i-receipt"/></svg>Orders</a>
+              <a href="#" onclick="return false"><svg><use href="#i-box"/></svg>Products</a>
+              <a href="#" onclick="return false"><svg><use href="#i-users"/></svg>Customers</a>
+              <div class="b-side-eyebrow">Store</div>
+              <a href="#" onclick="return false"><svg><use href="#i-folder"/></svg>Categories</a>
+              <a href="#" onclick="return false"><svg><use href="#i-tag"/></svg>Discounts</a>
+              <a href="#" onclick="return false"><svg><use href="#i-pin"/></svg>Locations</a>
+              <a href="#" onclick="return false"><svg><use href="#i-image"/></svg>Files</a>
+              <a href="#" onclick="return false"><svg><use href="#i-mail"/></svg>Emails</a>
+              <a href="#" onclick="return false"><svg><use href="#i-chart"/></svg>Analytics</a>
+              <div class="b-side-eyebrow">Configuration</div>
+              <a href="#" onclick="return false"><svg><use href="#i-card"/></svg>Payments</a>
+              <a href="#" onclick="return false"><svg><use href="#i-truck"/></svg>Shipping</a>
+              <a href="#" onclick="return false"><svg><use href="#i-pct"/></svg>Tax</a>
+              <a href="#" onclick="return false"><svg><use href="#i-users"/></svg>Team</a>
+              <a href="#" onclick="return false"><svg><use href="#i-sliders"/></svg>Settings</a>
+            </nav>
+            <div class="b-side-foot">
+              <a href="#" onclick="return false" style="display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:none"><svg style="width:14px;height:14px"><use href="#i-edit"/></svg>Edit store</a>
+              <a href="#" onclick="return false" style="display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:none"><svg style="width:14px;height:14px"><use href="#i-ext"/></svg>View store</a>
+              <div class="b-side-user"><div class="av">GB</div><div><b>Ghali Bennis</b></div><svg style="width:13px;height:13px;color:var(--subtle);margin-left:auto"><use href="#i-chev"/></svg></div>
+            </div>
+          </aside>
+          <main class="b-main">
+            <div class="b-phead">
+              <div class="tt">
+                <div class="eyebrow">Friday, July 10</div>
+                <h1>Good afternoon, Ghali</h1>
+              </div>
+              <div class="acts">
+                <span class="b-seg"><button>Today</button><button>7d</button><button class="on">30d</button><button>90d</button></span>
+                <button class="b-btn b-btn-secondary"><svg><use href="#i-ext"/></svg>View store</button>
+                <button class="b-btn b-btn-primary"><svg><use href="#i-plus"/></svg>Add product</button>
+              </div>
+            </div>
+            <div class="b-kpis">
+              <div class="b-kpi"><div class="k">Revenue</div><div class="v num">€4,090.00</div><div class="m"><span class="b-delta up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 17 17 7M9 7h8v8"/></svg>5.1%</span>vs Jun 10 – Jul 9</div></div>
+              <div class="b-kpi"><div class="k">Orders</div><div class="v num">15</div><div class="m"><span class="b-delta up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 17 17 7M9 7h8v8"/></svg>87.5%</span>vs prior period</div></div>
+              <div class="b-kpi"><div class="k">Average order</div><div class="v num">€272.63</div><div class="m"><span class="b-delta down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 7l10 10M17 9v8H9"/></svg>44%</span>vs prior period</div></div>
+              <div class="b-kpi"><div class="k">Refund rate</div><div class="v num">0%</div><div class="m"><span class="b-delta flat">–</span>no refunds this period</div></div>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 320px;gap:12px;margin-bottom:12px">
+              <div class="b-card b-card-pad">
+                <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px">
+                  <div><div class="b-card-title">Revenue</div><div class="b-card-sub">Daily, last 30 days</div></div>
+                  <div style="text-align:right"><span class="num" style="font-size:20px;font-weight:700;letter-spacing:-0.01em">€4,090.00</span><div class="b-card-sub">total</div></div>
+                </div>
+                <svg viewBox="0 0 640 170" style="width:100%;height:auto;display:block" role="img" aria-label="Revenue line chart">
+                  <g class="b-chartgrid">
+                    <line x1="0" y1="20" x2="640" y2="20"/><line x1="0" y1="60" x2="640" y2="60"/><line x1="0" y1="100" x2="640" y2="100"/><line x1="0" y1="140" x2="640" y2="140"/>
+                  </g>
+                  <text class="b-axis" x="0" y="14">€1.8K</text><text class="b-axis" x="0" y="96">€900</text><text class="b-axis" x="0" y="136">€450</text>
+                  <path d="M40 148 L90 138 L140 142 L190 120 L240 132 L290 128 L340 136 L390 118 L440 126 L490 30 L540 118 L600 112 L600 152 L40 152 Z" fill="#0CAF7D" opacity="0.07"/>
+                  <path d="M40 148 L90 138 L140 142 L190 120 L240 132 L290 128 L340 136 L390 118 L440 126 L490 30 L540 118 L600 112" fill="none" stroke="#0CAF7D" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round"/>
+                  <circle cx="600" cy="112" r="3.5" fill="#0CAF7D"/>
+                  <circle cx="600" cy="112" r="7" fill="#0CAF7D" opacity=".18"/>
+                  <text class="b-axis" x="36" y="166">Jun 11</text><text class="b-axis" x="300" y="166">Jun 25</text><text class="b-axis" x="572" y="166">Jul 9</text>
+                </svg>
+              </div>
+              <div class="b-card b-card-pad">
+                <div class="b-card-title">Order status</div>
+                <div class="b-card-sub" style="margin-bottom:14px">20 orders in period</div>
+                <div style="display:flex;height:8px;border-radius:999px;overflow:hidden;margin-bottom:16px">
+                  <span style="width:50%;background:#129B6C"></span><span style="width:15%;background:#E8A213"></span><span style="width:15%;background:#3372BD"></span><span style="width:10%;background:#0B7A57"></span><span style="width:10%;background:#C9C1B1"></span>
+                </div>
+                <div style="display:flex;flex-direction:column;gap:9px;font-size:12.5px">
+                  <div style="display:flex;align-items:center;gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:#129B6C"></i>Paid<span class="num" style="margin-left:auto;font-weight:600">10</span><span class="num" style="color:var(--subtle);width:36px;text-align:right">50%</span></div>
+                  <div style="display:flex;align-items:center;gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:#E8A213"></i>Pending<span class="num" style="margin-left:auto;font-weight:600">3</span><span class="num" style="color:var(--subtle);width:36px;text-align:right">15%</span></div>
+                  <div style="display:flex;align-items:center;gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:#3372BD"></i>Shipped<span class="num" style="margin-left:auto;font-weight:600">3</span><span class="num" style="color:var(--subtle);width:36px;text-align:right">15%</span></div>
+                  <div style="display:flex;align-items:center;gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:#0B7A57"></i>Delivered<span class="num" style="margin-left:auto;font-weight:600">2</span><span class="num" style="color:var(--subtle);width:36px;text-align:right">10%</span></div>
+                  <div style="display:flex;align-items:center;gap:8px"><i style="width:8px;height:8px;border-radius:2px;background:#C9C1B1"></i>Cancelled<span class="num" style="margin-left:auto;font-weight:600">2</span><span class="num" style="color:var(--subtle);width:36px;text-align:right">10%</span></div>
+                </div>
+              </div>
+            </div>
+            <div class="b-card">
+              <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)">
+                <div class="b-card-title" style="margin:0">Recent orders</div>
+                <button class="b-btn b-btn-ghost b-btn-sm">View all</button>
+              </div>
+              <table class="b-table">
+                <thead><tr><th>Order</th><th>Customer</th><th>Status</th><th class="r">Total</th><th class="r">Date</th></tr></thead>
+                <tbody>
+                  <tr><td class="mono">#DD71DFDD</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-info">Shipped</span></td><td class="r num" style="font-weight:600">€537.56</td><td class="r muted num">9 Jul, 10:40</td></tr>
+                  <tr><td class="mono">#BD95B061</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-ok">Delivered</span></td><td class="r num" style="font-weight:600">€987.73</td><td class="r muted num">9 Jul, 10:24</td></tr>
+                  <tr><td class="mono">#5DCEEBD5</td><td>romain.berthier@gmail.com</td><td><span class="b-badge b-badge-ok">Paid</span></td><td class="r num" style="font-weight:600">€40.41</td><td class="r muted num">9 Jul, 10:13</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </main>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>What changed:</b> icon chips removed from KPI cards, numbers own the card</span>
+        <span>tabular numerals throughout</span>
+        <span>donut → segmented bar, cancelled is neutral, never black</span>
+        <span>one emerald button in the whole view</span>
+        <span>chart: hairline grid, emphasized endpoint</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 02 · INDEX (ORDERS) ── -->
+    <div class="artwrap" id="art-index">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin/orders</span></div>
+        <div class="frame-scroll"><div class="board b-shell">
+          <main class="b-main" style="padding:22px 28px 30px">
+            <div class="b-phead">
+              <div class="tt">
+                <h1>Orders</h1>
+                <div class="sub">15 orders this period · <span class="num">€4,090.00</span> collected</div>
+              </div>
+              <div class="acts">
+                <button class="b-btn b-btn-secondary">Export</button>
+              </div>
+            </div>
+            <div class="b-listrow" id="orders-list">
+              <div class="b-filters">
+                <label class="b-input" style="max-width:240px"><svg><use href="#i-search"/></svg><input placeholder="Search order or email" aria-label="Search orders"></label>
+                <button class="b-chip on">All</button>
+                <button class="b-chip">To fulfill <span class="num" style="margin-left:5px;opacity:.65">6</span></button>
+                <button class="b-chip">Pending <span class="num" style="margin-left:5px;opacity:.65">3</span></button>
+                <button class="b-chip">Completed</button>
+                <span class="grow"></span>
+                <span class="b-select" role="button" tabindex="0">Newest first<svg><use href="#i-chev"/></svg></span>
+              </div>
+              <div class="b-bulk" role="toolbar" aria-label="Bulk actions">
+                <span id="bulk-count" class="num">2 selected</span>
+                <button class="b-btn b-btn-sm">Mark as shipped</button>
+                <button class="b-btn b-btn-sm">Print packing slips</button>
+                <span class="sp"></span>
+                <span class="x" id="bulk-clear" role="button" tabindex="0" aria-label="Clear selection"><svg style="width:14px;height:14px"><use href="#i-x"/></svg></span>
+              </div>
+              <div class="b-card" style="overflow:visible">
+                <table class="b-table">
+                  <thead><tr>
+                    <th style="width:36px"><input type="checkbox" class="b-check" id="check-all" aria-label="Select all"></th>
+                    <th>Order</th><th>Customer</th><th>Status</th><th class="r">Total</th><th class="r">Date</th><th style="width:44px"></th>
+                  </tr></thead>
+                  <tbody>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#DD71DFDD</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-info">Shipped</span></td><td class="r num" style="font-weight:600">€537.56</td><td class="r muted num">9 Jul, 10:40</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-check"/></svg>Mark as delivered</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#E3644758</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-warn">Pending</span></td><td class="r num" style="font-weight:600">€617.28</td><td class="r muted num">8 Jul, 19:24</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-check"/></svg>Mark as paid</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#C08DAA98</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-ok">Paid</span></td><td class="r num" style="font-weight:600">€1,214.57</td><td class="r muted num">8 Jul, 19:09</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-truck"/></svg>Mark as shipped</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#FAEAB4C4</td><td>info@enitherm.com</td><td><span class="b-badge b-badge-warn">Pending</span></td><td class="r num" style="font-weight:600">€2,191.81</td><td class="r muted num">29 Jun, 16:33</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-check"/></svg>Mark as paid</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#3155279C</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-info">Shipped</span></td><td class="r num" style="font-weight:600">€64.10</td><td class="r muted num">5 Jul, 16:52</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-check"/></svg>Mark as delivered</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                    <tr><td><input type="checkbox" class="b-check row-check" aria-label="Select order"></td><td class="mono">#992A832B</td><td>ghali@rovela.ai</td><td><span class="b-badge b-badge-ok">Paid</span></td><td class="r num" style="font-weight:600">€48.70</td><td class="r muted num">7 Jul, 16:52</td>
+                      <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Order actions"><svg><use href="#i-more"/></svg></button>
+                        <span class="b-menu"><button><svg><use href="#i-receipt"/></svg>View order</button><button><svg><use href="#i-truck"/></svg>Mark as shipped</button><button><svg><use href="#i-mail"/></svg>Resend confirmation</button><hr><button class="danger"><svg><use href="#i-x"/></svg>Cancel order</button></span>
+                      </span></td></tr>
+                  </tbody>
+                </table>
+              </div>
+              <div style="display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--subtle)">
+                <span class="num">1–6 of 15</span>
+                <span style="display:flex;gap:6px"><button class="b-btn b-btn-secondary b-btn-sm" disabled style="opacity:.5;cursor:default">Previous</button><button class="b-btn b-btn-secondary b-btn-sm">Next</button></span>
+              </div>
+            </div>
+          </main>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>What changed:</b> one filter row, always: search + view chips + sort</span>
+        <span>per-row status dropdowns → badge + row menu</span>
+        <span>select rows: the filter row becomes the bulk bar in place, try it</span>
+        <span>order numbers in mono, totals tabular right-aligned</span>
+        <span>the row itself is the link</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 03 · DETAIL (PRODUCT) ── -->
+    <div class="artwrap" id="art-detail">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin/products/100638</span></div>
+        <div class="frame-scroll"><div class="board b-shell" id="detail-board">
+          <main class="b-main">
+            <div class="b-phead">
+              <button class="back" aria-label="Back to products"><svg><use href="#i-back"/></svg></button>
+              <div class="tt">
+                <div class="eyebrow">Products</div>
+                <h1>Ampoule LED bulbe bleu B22 1W <span class="b-badge b-badge-ok" style="position:relative;top:-1px">Active</span></h1>
+                <div class="sub">SKU 100638 · 5 sold in the last 30 days</div>
+              </div>
+              <div class="acts">
+                <button class="b-btn b-btn-icon" aria-label="More actions"><svg><use href="#i-more"/></svg></button>
+                <button class="b-btn b-btn-secondary"><svg><use href="#i-ext"/></svg>Preview</button>
+              </div>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:start">
+              <div style="display:flex;flex-direction:column;gap:12px">
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:14px">Details</div>
+                  <div class="b-field">
+                    <label class="b-label" for="f-name">Name</label>
+                    <label class="b-input"><input id="f-name" class="dirty-watch" value="Ampoule LED bulbe bleu B22 1W 230Vac"></label>
+                  </div>
+                  <div class="b-field">
+                    <label class="b-label" for="f-desc">Description</label>
+                    <textarea id="f-desc" class="b-input dirty-watch" rows="3">Ampoule LED B22 basse consommation, teinte bleue, 1W, 230Vac. Idéale pour guirlandes et enseignes.</textarea>
+                    <div class="b-help">Shown on the product page. Type here to see the save bar.</div>
+                  </div>
+                </div>
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:14px">Pricing</div>
+                  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
+                    <div><label class="b-label" for="f-price">Price</label><label class="b-input"><input id="f-price" class="dirty-watch num" value="€11.00"></label></div>
+                    <div><label class="b-label" for="f-cmp">Compare-at</label><label class="b-input"><input id="f-cmp" class="dirty-watch num" value="€14.00"></label></div>
+                    <div><label class="b-label" for="f-sku">SKU</label><label class="b-input"><input id="f-sku" class="dirty-watch mono" value="100638"></label></div>
+                  </div>
+                </div>
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:12px">Media</div>
+                  <div style="border:1.5px dashed var(--border-strong);border-radius:8px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--subtle)">
+                    <svg style="width:20px;height:20px"><use href="#i-image"/></svg>
+                    <span style="font-size:12.5px;font-weight:600;color:var(--muted)">Drop images or videos, or browse</span>
+                    <span style="font-size:11.5px">Up to 10 items · <a href="#" onclick="return false" style="color:var(--accent-deep);font-weight:600;text-decoration:none">choose from library</a></span>
+                  </div>
+                </div>
+              </div>
+              <div style="display:flex;flex-direction:column;gap:12px">
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:12px">Status</div>
+                  <span class="b-select" style="width:100%" role="button" tabindex="0">Active<svg><use href="#i-chev"/></svg></span>
+                  <div class="b-help">Visible in your storefront and search.</div>
+                </div>
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:12px">Organization</div>
+                  <div class="b-field"><label class="b-label">Category</label><span class="b-select" style="width:100%" role="button" tabindex="0">Ampoules LED<svg><use href="#i-chev"/></svg></span></div>
+                  <div class="b-field"><label class="b-label">Vendor</label><label class="b-input"><input class="dirty-watch" value="Vision-EL"></label></div>
+                </div>
+                <div class="b-card b-card-pad">
+                  <div class="b-card-title" style="margin-bottom:10px">Inventory</div>
+                  <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px"><span class="muted" style="color:var(--muted)">In stock</span><b class="num">42</b></div>
+                  <div style="display:flex;justify-content:space-between;font-size:13px"><span style="color:var(--muted)">Sold, 30 days</span><b class="num">5</b></div>
+                </div>
+              </div>
+            </div>
+            <div class="b-savebar" id="savebar">
+              <span class="dot"></span>
+              <span class="lbl" id="sb-label">Unsaved changes</span>
+              <span class="meta" id="sb-meta"></span>
+              <span class="sp"></span>
+              <span class="b-kbd">⌘S</span>
+              <button class="b-btn b-btn-ghost" id="discard-btn">Discard</button>
+              <button class="b-btn b-btn-primary" id="save-btn">Save</button>
+            </div>
+          </main>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>What changed:</b> back button belongs to the header band, framed and consistent</span>
+        <span>2/3 editing + 1/3 status &amp; metadata, capped width</span>
+        <span><b>the attention band:</b> edit any field — the amber bar docks to the bottom edge with the changed fields named, then morphs Saving → Saved on save</span>
+        <span>replaces every floating pill and per-card Save on document pages</span>
+        <span>selects are styled, never browser-native</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 04 · MANAGER (DISCOUNTS) ── -->
+    <div class="artwrap" id="art-mgr">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin/discounts</span></div>
+        <div class="frame-scroll"><div class="board b-shell" id="mgr-board">
+          <main class="b-main">
+            <div class="b-phead">
+              <div class="tt">
+                <h1>Discounts</h1>
+                <div class="sub">Codes and automatic promotions, applied in your checkout</div>
+              </div>
+              <div class="acts">
+                <button class="b-btn b-btn-primary"><svg><use href="#i-plus"/></svg>Create discount</button>
+              </div>
+            </div>
+            <div class="b-card">
+              <table class="b-table">
+                <thead><tr><th>Discount</th><th>Type</th><th>Status</th><th class="r">Used</th><th style="width:44px"></th></tr></thead>
+                <tbody>
+                  <tr>
+                    <td><span class="mono" style="font-weight:600">WELCOME10</span><div style="font-size:12px;color:var(--muted);white-space:normal">10% off entire order · Offre de bienvenue</div></td>
+                    <td class="muted">Code</td>
+                    <td><span class="b-badge b-badge-ok">Active</span></td>
+                    <td class="r num">1</td>
+                    <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Discount actions"><svg><use href="#i-more"/></svg></button>
+                      <span class="b-menu"><button><svg><use href="#i-edit"/></svg>Edit</button><button><svg><use href="#i-dup"/></svg>Duplicate</button><button><svg><use href="#i-x"/></svg>Deactivate</button><hr><button class="danger del-discount" data-code="WELCOME10"><svg><use href="#i-trash"/></svg>Delete</button></span>
+                    </span></td>
+                  </tr>
+                  <tr>
+                    <td><span class="mono" style="font-weight:600">PRO15</span><div style="font-size:12px;color:var(--muted);white-space:normal">15% off entire order · Offre pro</div></td>
+                    <td class="muted">Code · <span class="b-badge b-badge-attn" style="height:18px;font-size:11px">Group-only</span></td>
+                    <td><span class="b-badge b-badge-ok">Active</span></td>
+                    <td class="r num">0</td>
+                    <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Discount actions"><svg><use href="#i-more"/></svg></button>
+                      <span class="b-menu"><button><svg><use href="#i-edit"/></svg>Edit</button><button><svg><use href="#i-dup"/></svg>Duplicate</button><button><svg><use href="#i-x"/></svg>Deactivate</button><hr><button class="danger del-discount" data-code="PRO15"><svg><use href="#i-trash"/></svg>Delete</button></span>
+                    </span></td>
+                  </tr>
+                  <tr>
+                    <td><span style="font-weight:600">10% dès 500 € d'achat</span><div style="font-size:12px;color:var(--muted);white-space:normal">10% off entire order, applies automatically</div></td>
+                    <td class="muted">Automatic</td>
+                    <td><span class="b-badge b-badge-ok">Active</span></td>
+                    <td class="r num">2</td>
+                    <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Discount actions"><svg><use href="#i-more"/></svg></button>
+                      <span class="b-menu"><button><svg><use href="#i-edit"/></svg>Edit</button><button><svg><use href="#i-dup"/></svg>Duplicate</button><button><svg><use href="#i-x"/></svg>Deactivate</button><hr><button class="danger del-discount" data-code="this automatic promotion"><svg><use href="#i-trash"/></svg>Delete</button></span>
+                    </span></td>
+                  </tr>
+                  <tr>
+                    <td><span class="mono" style="font-weight:600">LIVRAISON</span><div style="font-size:12px;color:var(--muted);white-space:normal">Free shipping · Livraison offerte</div></td>
+                    <td class="muted">Code</td>
+                    <td><span class="b-badge b-badge-mute">Inactive</span></td>
+                    <td class="r num">0</td>
+                    <td class="r"><span class="b-menu-wrap"><button class="b-btn b-btn-icon row-menu-btn" aria-label="Discount actions"><svg><use href="#i-more"/></svg></button>
+                      <span class="b-menu"><button><svg><use href="#i-edit"/></svg>Edit</button><button><svg><use href="#i-dup"/></svg>Duplicate</button><button><svg><use href="#i-check"/></svg>Activate</button><hr><button class="danger del-discount" data-code="LIVRAISON"><svg><use href="#i-trash"/></svg>Delete</button></span>
+                    </span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="b-overlay" id="mgr-overlay">
+              <div class="b-modal" role="dialog" aria-modal="true" aria-labelledby="del-title">
+                <h4 id="del-title">Delete discount?</h4>
+                <p><b id="del-code">WELCOME10</b> will stop working immediately. Customers who already used it keep their orders. This can't be undone.</p>
+                <div class="acts">
+                  <button class="b-btn b-btn-ghost" id="del-cancel">Cancel</button>
+                  <button class="b-btn b-btn-danger-solid" id="del-confirm">Delete discount</button>
+                </div>
+              </div>
+            </div>
+            <div class="b-toast" id="mgr-toast"><svg><use href="#i-check"/></svg>Discount deleted</div>
+          </main>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>What changed:</b> the page header owns the title and the Create button, no second card header</span>
+        <span>rows follow the index grammar: name + tinted status + numbers + row menu</span>
+        <span>delete lives behind the menu and always goes through the one confirm modal, try it</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 05 · OVERLAYS & STATES ── -->
+    <div class="artwrap" id="art-states">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">overlay &amp; feedback grammar</span></div>
+        <div class="frame-scroll"><div class="board" style="min-width:1080px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative">
+          <div class="b-toaster" id="toaster"></div>
+          <div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:10px">The one confirm modal · destructive</div>
+            <div class="b-modal" style="opacity:1;transform:none;width:100%">
+              <h4>Delete 3 products?</h4>
+              <p>They will be removed from your storefront immediately. Products with order history are archived instead, so past orders stay intact.</p>
+              <div class="acts"><button class="b-btn b-btn-ghost">Cancel</button><button class="b-btn b-btn-danger-solid">Delete products</button></div>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:18px 0 10px">The same modal · consequential, not destructive</div>
+            <div class="b-modal" style="opacity:1;transform:none;width:100%">
+              <h4>Refund €537.56?</h4>
+              <p>The full amount returns to the customer's card in 5 to 10 business days. The order moves to <b>Refunded</b>.</p>
+              <div class="acts"><button class="b-btn b-btn-ghost">Cancel</button><button class="b-btn b-btn-primary">Refund order</button></div>
+            </div>
+          </div>
+          <div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:10px">Menus grow from their trigger</div>
+            <div class="b-card" style="padding:14px;display:flex;justify-content:flex-end;position:relative;height:196px">
+              <span class="b-menu-wrap"><button class="b-btn b-btn-icon" style="background:var(--side-hover);color:var(--ink)" aria-label="Example menu"><svg><use href="#i-more"/></svg></button>
+                <span class="b-menu open" style="position:absolute">
+                  <button><svg><use href="#i-edit"/></svg>Edit</button>
+                  <button><svg><use href="#i-dup"/></svg>Duplicate</button>
+                  <button><svg><use href="#i-ext"/></svg>View in store</button>
+                  <hr>
+                  <button class="danger"><svg><use href="#i-trash"/></svg>Delete</button>
+                </span>
+              </span>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:18px 0 10px">Notifications · one system, events only</div>
+            <div style="display:flex;flex-direction:column;gap:8px">
+              <div class="b-toast show" style="position:static;transform:none;opacity:1;width:fit-content"><svg><use href="#i-check"/></svg>Discount deleted<span style="font-size:11px;color:var(--subtle);margin-left:2px">auto-dismisses · 3s</span></div>
+              <div class="b-toast show" style="position:static;transform:none;opacity:1;width:fit-content"><svg><use href="#i-check"/></svg>Test email sent to you<span class="b-toast-action">View email</span></div>
+              <div class="b-toast show err" style="position:static;transform:none;opacity:1;width:fit-content"><svg><use href="#i-x"/></svg>Couldn't send the invite. Check the email address and try again.<span class="b-toast-x"><svg style="width:12px;height:12px"><use href="#i-x"/></svg></span><span style="font-size:11px;color:var(--subtle);margin-left:2px">sticky until dismissed</span></div>
+            </div>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:16px 0 8px">Try the stack</div>
+            <div style="display:flex;gap:8px;flex-wrap:wrap">
+              <button class="b-btn sec" id="fire-ok" style="background:#fff;border:1px solid #D8D1C3;height:30px;border-radius:6px;padding:0 12px;font-size:12.5px;font-weight:600;cursor:pointer">Fire a success</button>
+              <button class="b-btn sec" id="fire-action" style="background:#fff;border:1px solid #D8D1C3;height:30px;border-radius:6px;padding:0 12px;font-size:12.5px;font-weight:600;cursor:pointer">Success with action</button>
+              <button class="b-btn sec" id="fire-err" style="background:#fff;border:1px solid #D8D1C3;height:30px;border-radius:6px;padding:0 12px;font-size:12.5px;font-weight:600;cursor:pointer">Fire an error</button>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-top:12px;line-height:1.55">
+              <b style="color:var(--ink)">The grammar — events vs states:</b> an EVENT (something just happened: deleted, sent, marked paid, failed) is always a toast from the ONE global toaster: ink pill, bottom-right, stack of 3, rises above the save bar when both exist. A STATE (something is wrong here and stays wrong: fetch failed, invalid field, auth error) is an inline alert at the thing it describes, and never auto-dismisses. Document saves are neither: the save bar's morph is their feedback. Never two channels for one outcome. Success toasts speak the button's words and dismiss in 3s; error toasts are sticky with a ✕ and say what to fix.
+            </p>
+            <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:18px 0 10px">Save bar · the attention band, four states</div>
+            <div style="display:flex;flex-direction:column;gap:8px">
+              <div class="b-savebar show" style="position:static;transform:none;border:1px solid var(--border);border-radius:8px">
+                <span class="dot"></span><span class="lbl">Unsaved changes</span><span class="meta">Name · Price</span><span class="sp"></span><span class="b-kbd">⌘S</span><button class="b-btn b-btn-ghost">Discard</button><button class="b-btn b-btn-primary">Save</button>
+              </div>
+              <div class="b-savebar show saving" style="position:static;transform:none;border:1px solid var(--border);border-radius:8px">
+                <span class="dot"></span><span class="lbl">Saving…</span><span class="sp"></span><button class="b-btn b-btn-ghost" disabled style="opacity:.5">Discard</button><button class="b-btn b-btn-primary" disabled style="opacity:.7">Saving…</button>
+              </div>
+              <div class="b-savebar show saved" style="position:static;transform:none;border:1px solid var(--border);border-radius:8px">
+                <span class="dot"></span><span class="lbl">Saved</span><span class="meta">All changes are live in your store</span><span class="sp"></span>
+              </div>
+              <div class="b-savebar show error-state" style="position:static;transform:none;border:1px solid var(--border);border-radius:8px">
+                <span class="dot"></span><span class="lbl">Couldn't save</span><span class="meta">Check the price field and try again</span><span class="sp"></span><button class="b-btn b-btn-ghost">Discard</button><button class="b-btn b-btn-primary">Try again</button>
+              </div>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-top:10px;line-height:1.55">
+              <b style="color:var(--ink)">The rules:</b> document pages (Settings, Tax, a product) raise the bar on dirty state and it docks full-width to the bottom edge — the top bar's bookend. Transactional editors inside managers (create a discount, add a location) keep their inline form buttons. Clicking away while dirty <b style="color:var(--ink)">shakes the bar</b> instead of losing work; ⌘S saves; the saved morph is the feedback, so no toast fires for a bar save.
+            </p>
+          </div>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>The confirmation rule:</b> destructive = solid red in the modal only; consequential = primary; both name the object and the consequence</span>
+        <span><b>The notification rule:</b> events → the one toaster (fire the playground buttons); states → inline alerts that never auto-dismiss; document saves → the save bar morph. Never two channels for one outcome</span>
+        <span>toasts speak the button's language: "Delete discount" → "Discount deleted"</span>
+        <span>no browser confirm(), ever</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 06 · AUTH ── -->
+    <div class="artwrap" id="art-auth">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin/login</span></div>
+        <div class="frame-scroll"><div class="board v4">
+          <div class="v4-grid">
+            <div class="v4-main">
+              <div class="v4-brand">
+                <div class="v4-tile"><span>e</span></div>
+                <div class="nm"><b>EasyElec</b><i>Admin</i></div>
+              </div>
+              <div class="v4-card">
+                <h1>Sign in</h1>
+                <p class="sub">Manage EasyElec from its admin.</p>
+                <div class="v4-alert" id="auth-alert">That password doesn't match. Try again or reset it below.</div>
+                <div class="v4-field">
+                  <div class="v4-lblrow"><span class="v4-lbl">Email</span></div>
+                  <div class="v4-input"><input type="email" value="ghali@rovela.ai"></div>
+                </div>
+                <div class="v4-field">
+                  <div class="v4-lblrow"><span class="v4-lbl">Password</span><a class="v4-forgot" href="#" onclick="return false">Forgot password?</a></div>
+                  <div class="v4-input"><input type="password" id="auth-pw" value="hunter2222"><span class="v4-eye" id="auth-eye"><svg style="width:14px;height:14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="2.6"/></svg></span></div>
+                </div>
+                <label class="v4-remember"><input type="checkbox" class="b-check" checked> Keep me signed in for 30 days</label>
+                <button class="v4-submit" id="auth-submit">Sign in</button>
+              </div>
+              <div class="v4-pow">Powered by <b>⟠ Rovela</b></div>
+            </div>
+            <aside class="v4-rail">
+              <div class="v4-rail-label">The other four doors · same shell</div>
+              <div class="v4-mini">
+                <div class="cap">/admin/login · first run</div>
+                <h2>Create your admin account</h2>
+                <p class="s">You're the owner of EasyElec. Set a password to get started.</p>
+                <div class="f"></div><div class="f"></div><div class="f"></div>
+                <div class="b">Create account</div>
+              </div>
+              <div class="v4-mini">
+                <div class="cap">/admin/forgot-password</div>
+                <h2>Forgot your password?</h2>
+                <p class="s">We'll email you a reset link.</p>
+                <div class="f"></div>
+                <div class="b">Send reset link</div>
+              </div>
+              <div class="v4-mini">
+                <div class="cap">/admin/forgot-password · sent</div>
+                <h2>Check your email</h2>
+                <p class="s">If an admin account exists for that address, the link is on its way.</p>
+                <div class="okwash"><svg style="width:13px;height:13px"><use href="#i-check"/></svg>Sent to g•••@rovela.ai</div>
+              </div>
+              <div class="v4-mini">
+                <div class="cap">/admin/accept-invite</div>
+                <h2>Join EasyElec's team</h2>
+                <p class="s">Ghali invited you as a Manager. Set a password to accept.</p>
+                <div class="f"></div><div class="f"></div>
+                <div class="b">Accept invite</div>
+              </div>
+            </aside>
+          </div>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>One shell, five doors:</b> identity wash at the top, favicon-first brand tile + store name + Admin chip, one 380px card, powered-by beneath</span>
+        <span>tile resolution: favicon → logo → ink monogram — the exact AdminTopBar logic, shared</span>
+        <span>titles are 20px sentence-case purposes, never "Set Up Admin Account"</span>
+        <span><b>try it:</b> toggle the eye, then Sign in — loading, then the error STATE inline (auth errors are never toasts)</span>
+        <span>the forgot link lives on the password label row</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 07 · ONE WAY EACH ── -->
+    <div class="artwrap" id="art-onesource">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">the consolidation kit — one sanctioned answer per job</span></div>
+        <div class="frame-scroll"><div class="board" style="min-width:1080px;padding:22px;display:flex;flex-direction:column;gap:14px;position:relative">
+          <!-- live modal demo overlay (covers the whole board) -->
+          <div class="b-overlay" id="os-overlay">
+            <div class="b-modal">
+              <div style="display:flex;align-items:flex-start">
+                <h4 style="flex:1">Cancel this order?</h4>
+                <button class="b-btn b-btn-icon" id="os-modal-x" aria-label="Close" style="margin:-6px -8px 0 0"><svg><use href="#i-x"/></svg></button>
+              </div>
+              <p>Order <b>#1041</b> moves to Cancelled and the customer is notified by email. Stock returns to your inventory.</p>
+              <div class="acts"><button class="b-btn b-btn-ghost" id="os-modal-cancel">Keep order</button><button class="b-btn b-btn-danger-solid" id="os-modal-go">Cancel order</button></div>
+            </div>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+            <!-- AdminModal -->
+            <div class="os-cell">
+              <div class="os-lab">AdminModal · the one overlay <span class="fix">8 implementations → 1</span></div>
+              <div class="b-modal" style="opacity:1;transform:none;width:100%;border:1px solid var(--border);box-shadow:var(--pop)">
+                <div style="display:flex;align-items:flex-start">
+                  <h4 style="flex:1">Remove this payment method?</h4>
+                  <button class="b-btn b-btn-icon" aria-label="Close" style="margin:-6px -8px 0 0"><svg><use href="#i-x"/></svg></button>
+                </div>
+                <p>Customers will no longer see <b>Bank transfer</b> at checkout. Past orders keep their records.</p>
+                <div class="os-alert">Couldn't remove it. Check your connection and try again.</div>
+                <div class="acts"><button class="b-btn b-btn-ghost">Cancel</button><button class="b-btn b-btn-danger-solid">Remove method</button></div>
+              </div>
+              <div class="os-beh">
+                <span><svg><use href="#i-check"/></svg>React portal</span>
+                <span><svg><use href="#i-check"/></svg>Blurred backdrop</span>
+                <span><svg><use href="#i-check"/></svg>Esc closes</span>
+                <span><svg><use href="#i-check"/></svg>Click-outside, guarded while busy</span>
+                <span><svg><use href="#i-check"/></svg>Scroll lock</span>
+                <span><svg><use href="#i-check"/></svg>Focus stays inside</span>
+              </div>
+              <div class="os-note"><b>Three widths, one anatomy:</b> 400px confirms · 480px editors (Shipping, Tax) · 720px pickers (media library). Errors inside are the inline STATE, never a toast. DeleteConfirmDialog rebuilds on top of it, so its 13 consumers never move.</div>
+              <div style="margin-top:12px"><button class="b-btn b-btn-secondary" id="os-modal-open">Open the live modal</button> <span style="font-size:11.5px;color:var(--subtle);margin-left:6px">then press Esc, or click the backdrop</span></div>
+            </div>
+            <!-- AdminEmptyState -->
+            <div class="os-cell">
+              <div class="os-lab">AdminEmptyState · two meanings, two messages <span class="fix">33 sites · 11 shapes → 1</span></div>
+              <span class="b-seg" id="os-empty-seg"><button class="on" data-em="em-first">First run</button><button data-em="em-nomatch">No matches</button></span>
+              <div id="em-first" style="border:1px solid var(--border);border-radius:8px;margin-top:10px">
+                <div class="b-empty">
+                  <div class="ic"><svg><use href="#i-box"/></svg></div>
+                  <b>No products yet</b>
+                  <p>Your catalog starts here. Add your first product and it goes live on your storefront.</p>
+                  <button class="b-btn b-btn-primary"><svg><use href="#i-plus"/></svg>Add product</button>
+                </div>
+              </div>
+              <div id="em-nomatch" style="border:1px solid var(--border);border-radius:8px;margin-top:10px;display:none">
+                <div class="b-empty">
+                  <div class="ic" style="background:#EFEBE4;color:var(--muted)"><svg><use href="#i-search"/></svg></div>
+                  <b>No products match</b>
+                  <p>Nothing matches “cable” with these filters. Try different terms or clear the filters.</p>
+                  <button class="b-btn b-btn-secondary">Clear filters</button>
+                </div>
+              </div>
+              <div class="os-note"><b>The rule:</b> an empty list always answers three questions: what is this, why is it empty, what do I do next. First run invites creation; a filter miss offers relief. Today only 5 of 33 sites make that distinction and only 1 offers a next step. Compact tier for sub-panels stays a single quiet line: <i style="font-style:normal;color:var(--subtle)">“No customer groups yet. Create them from Customers → Manage groups.”</i></div>
+            </div>
+          </div>
+          <!-- List toolkit -->
+          <div class="os-cell">
+            <div class="os-lab">The list toolkit · search, chips, pagination, row actions <span class="fix">4 paginations → 1 · 3 search markups → 1 · 16 native selects → 0</span></div>
+            <div class="b-filters">
+              <label class="b-input" style="max-width:260px"><svg><use href="#i-search"/></svg><input id="os-search" placeholder="Search products…" aria-label="Search products"></label>
+              <span id="os-chips" style="display:inline-flex;gap:2px"><button class="b-chip on">All</button><button class="b-chip">Active</button><button class="b-chip">Drafts</button><button class="b-chip">Out of stock</button></span>
+              <span class="grow"></span>
+              <span class="b-select">Newest first<svg><use href="#i-chev"/></svg></span>
+            </div>
+            <table class="b-table" id="os-list">
+              <thead><tr><th style="width:26px"></th><th>Product</th><th>Status</th><th class="r">Inventory</th><th class="r">Price</th><th style="width:84px"></th></tr></thead>
+              <tbody>
+                <tr><td><input type="checkbox" class="b-check"></td><td><b>USB-C Hub 7-in-1</b></td><td><span class="b-badge b-badge-ok">Active</span></td><td class="r num">142</td><td class="r num">€49.90</td><td><span style="display:inline-flex;gap:6px"><button class="b-btn b-btn-icon" aria-label="Edit"><svg><use href="#i-edit"/></svg></button> <button class="b-btn b-btn-icon" aria-label="Delete" style="color:var(--err-fg)"><svg><use href="#i-trash"/></svg></button></span></td></tr>
+                <tr><td><input type="checkbox" class="b-check"></td><td><b>Cat-6 Cable 3m</b></td><td><span class="b-badge b-badge-ok">Active</span></td><td class="r num">908</td><td class="r num">€12.50</td><td><span style="display:inline-flex;gap:6px"><button class="b-btn b-btn-icon" aria-label="Edit"><svg><use href="#i-edit"/></svg></button> <button class="b-btn b-btn-icon" aria-label="Delete" style="color:var(--err-fg)"><svg><use href="#i-trash"/></svg></button></span></td></tr>
+                <tr><td><input type="checkbox" class="b-check"></td><td><b>Smart Plug Duo</b></td><td><span class="b-badge b-badge-mute">Draft</span></td><td class="r num">54</td><td class="r num">€34.00</td><td><span style="display:inline-flex;gap:6px"><button class="b-btn b-btn-icon" aria-label="Edit"><svg><use href="#i-edit"/></svg></button> <button class="b-btn b-btn-icon" aria-label="Delete" style="color:var(--err-fg)"><svg><use href="#i-trash"/></svg></button></span></td></tr>
+                <tr><td><input type="checkbox" class="b-check"></td><td><b>HDMI 2.1 Cable</b></td><td><span class="b-badge b-badge-err">Out of stock</span></td><td class="r num">0</td><td class="r num">€19.90</td><td><span style="display:inline-flex;gap:6px"><button class="b-btn b-btn-icon" aria-label="Edit"><svg><use href="#i-edit"/></svg></button> <button class="b-btn b-btn-icon" aria-label="Delete" style="color:var(--err-fg)"><svg><use href="#i-trash"/></svg></button></span></td></tr>
+              </tbody>
+            </table>
+            <div class="os-pagerow">
+              <span class="info num">Showing 1–4 of 84,907</span>
+              <span style="flex:1"></span>
+              <button class="b-btn b-btn-secondary b-btn-sm" disabled style="opacity:.5">Previous</button>
+              <button class="b-btn b-btn-secondary b-btn-sm">Next</button>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px">
+              <div style="border:1px solid var(--border);border-radius:8px;padding:12px">
+                <div style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px">Table rows → quiet icon pair</div>
+                <span style="display:inline-flex;gap:6px"><button class="b-btn b-btn-icon" aria-label="Edit"><svg><use href="#i-edit"/></svg></button> <button class="b-btn b-btn-icon" aria-label="Delete" style="color:var(--err-fg)"><svg><use href="#i-trash"/></svg></button></span>
+              </div>
+              <div style="border:1px solid var(--border);border-radius:8px;padding:12px">
+                <div style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px">Card lists → text actions</div>
+                <span style="font-size:12.5px;font-weight:600;color:var(--accent-deep);cursor:pointer">Edit</span><span style="color:var(--border-strong);margin:0 8px">·</span><span style="font-size:12.5px;font-weight:600;color:var(--err-fg);cursor:pointer">Delete</span>
+              </div>
+              <div style="border:1px solid var(--border);border-radius:8px;padding:12px">
+                <div style="font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px">3+ actions → one ⋯ menu</div>
+                <button class="b-btn b-btn-icon" aria-label="More actions"><svg><use href="#i-more"/></svg></button><span style="font-size:11.5px;color:var(--subtle);margin-left:6px">permission-gated menus only</span>
+              </div>
+            </div>
+            <div class="os-note"><b>Type in the search</b> — it filters live. In the product it debounces 300ms, so one keystroke never equals one request (today Products and Orders fetch on every key). Chips are the one filter idiom; dropdown filters are always the styled select, never a native one.</div>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+            <!-- AdminSwitch + field anatomy -->
+            <div class="os-cell">
+              <div class="os-lab">AdminSwitch + the one field anatomy <span class="fix">3 switches → 1 · 5 caption styles → 1</span></div>
+              <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:16px">
+                <label style="display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer"><button class="b-switch os-sw" role="switch" aria-checked="true" aria-label="Charge tax on this product"></button>Charge tax on this product</label>
+                <label style="display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer"><button class="b-switch os-sw" role="switch" aria-checked="false" aria-label="Enable cash on delivery"></button>Enable cash on delivery</label>
+                <label style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--subtle)"><button class="b-switch" role="switch" aria-checked="true" disabled aria-label="Stripe payments, always on"></button>Stripe payments <span style="font-size:11px">(managed by Rovela)</span></label>
+              </div>
+              <div class="os-note" style="margin:0 0 16px"><b>The rule:</b> a state gets a switch, in Settings AND in managers. Today settings pages use switches while every manager uses a checkbox for the identical Enabled toggle. Checkboxes only ever mean selection.</div>
+              <div class="b-field">
+                <label class="b-label">Price <span style="color:#B3372C">*</span></label>
+                <div class="os-addon"><span class="pre">€</span><input value="49.90" aria-label="Price"></div>
+                <div class="b-help">Charged at checkout. Compare-at shows as a strikethrough.</div>
+              </div>
+              <div class="b-field">
+                <label class="b-label">Compare-at price</label>
+                <label class="b-input" style="border-color:#B3372C;box-shadow:0 0 0 3px rgba(179,55,44,.10)"><input value="0.00" aria-label="Compare-at price"></label>
+                <div style="font-size:12px;color:#B3372C;margin-top:5px">Enter a price above 0.</div>
+              </div>
+              <div class="os-note" style="margin-top:12px"><b>One anatomy everywhere:</b> label with the required mark, field, one helper-text class, one error-text class. Currency lives inside the field as a left addon, never in the label. Five forms currently hide which fields are required; 80+ captions are hand-styled five different ways.</div>
+            </div>
+            <!-- Loading grammar -->
+            <div class="os-cell">
+              <div class="os-lab">Loading · one spinner, one skeleton, one rule <span class="fix">3 spinners → 1</span></div>
+              <div style="display:flex;align-items:center;gap:18px;margin-bottom:14px">
+                <span style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)"><span class="b-spin sm"></span>12</span>
+                <span style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)"><span class="b-spin"></span>16</span>
+                <span style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)"><span class="b-spin lg"></span>22 · the only three sizes</span>
+              </div>
+              <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:14px">
+                <div class="b-skel" style="width:38%"></div>
+                <div class="b-skel" style="width:86%"></div>
+                <div class="b-skel" style="width:64%"></div>
+              </div>
+              <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
+                <button class="b-btn b-btn-primary" id="os-save" style="min-width:96px;justify-content:center">Save</button>
+                <span style="font-size:11.5px;color:var(--subtle)">press it — the one in-flight style: spinner + present-progressive label</span>
+              </div>
+              <div class="os-note"><b>The rule:</b> first visit renders skeletons in the real layout. A refetch keeps the content mounted — never blank a table you already showed (today most tables flash to skeletons on every background reload). Buttons in flight show the small spinner and a present-progressive label with a real ellipsis: “Saving…”, never “Saving...”. Charts use the same spinner as everything else.</div>
+            </div>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+            <!-- Badge semantics -->
+            <div class="os-cell">
+              <div class="os-lab">Badges · one recipe, semantic tones <span class="fix">“Inactive” had 3 colors → 1</span></div>
+              <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px">
+                <span class="b-badge b-badge-ok">Paid</span>
+                <span class="b-badge b-badge-warn">Pending</span>
+                <span class="b-badge b-badge-info">Shipped</span>
+                <span class="b-badge b-badge-attn">Return requested</span>
+                <span class="b-badge b-badge-err">Out of stock</span>
+                <span class="b-badge b-badge-mute">Inactive</span>
+              </div>
+              <div class="os-vs">
+                <div>“Inactive” = warning, neutral or draft, depending on the page</div><div>Inactive is always neutral</div>
+                <div>Green “paid” badge borrowed for Pickup and Default chips</div><div>Positive capability uses the success tone, by name</div>
+                <div>The status→color map pasted in 4 files</div><div>One shared statusBadgeClass() helper</div>
+              </div>
+              <div class="os-note"><b>Tones mean things:</b> green is money received or success, amber is waiting, red is stopped, blue is in motion, neutral is off. A badge never borrows a tone for its color.</div>
+            </div>
+            <!-- Voice -->
+            <div class="os-cell">
+              <div class="os-lab">Microcopy · sentence case, real ellipsis <span class="fix">17 files of “...” → “…”</span></div>
+              <div class="os-vs">
+                <div>Create Zone</div><div>Create zone</div>
+                <div>Process Refund</div><div>Process refund</div>
+                <div>Admin Sign In</div><div>Sign in</div>
+                <div>Sign Out</div><div>Sign out</div>
+                <div>Deleting...</div><div>Deleting…</div>
+              </div>
+              <div style="margin-top:14px;border:1px solid var(--border);border-radius:8px;padding:12px">
+                <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)">Shipping address</div>
+                <div style="font-size:12px;color:var(--muted);margin-top:6px">The one section eyebrow — a single class replaces 22 hand-rolled variants (4 different weights, trackings and sizes today).</div>
+              </div>
+              <div class="os-note"><b>Icons:</b> 16px and quiet, 1.5 stroke set once for the whole admin instead of per icon — today most icons silently render at the heavier default. Every icon-only button carries an aria-label.</div>
+            </div>
+          </div>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>The principle:</b> behaviors live in the primitive so pages can't forget them — Esc, scroll lock and focus work everywhere because they're written once</span>
+        <span><b>try it:</b> open the live modal (Esc closes it) · toggle the empty state · type in the list search · flip the switches · press Save</span>
+        <span>everything is additive: .admin-* classes never rename, old stores keep working</span>
+        <span>zero data-flow changes — chrome only, exactly like the auth pass</span>
+      </div>
+    </div>
+    <!-- ── ARTBOARD 08 · MOBILE ── -->
+    <div class="artwrap" id="art-mobile">
+      <div class="frame">
+        <div class="frame-bar"><div class="dots"><i></i><i></i><i></i></div><span class="url">easyelec.rovela.app/admin · 390px — the same LEDGER, thumb-sized</span></div>
+        <div class="frame-scroll"><div class="board" style="min-width:1080px;padding:22px;display:flex;flex-direction:column;gap:14px">
+          <div style="display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:wrap">
+            <!-- PHONE A · shell + drawer -->
+            <div>
+              <div class="ph" id="ph-a">
+                <div class="ph-status"><span>9:41</span><i>●●● ▲ ▮</i></div>
+                <div class="ph-body">
+                  <div class="m-top">
+                    <button class="m-burger" id="ph-a-burger" aria-label="Open menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+                    <span class="m-tile">E</span>
+                    <span class="m-name">EasyElec</span>
+                    <span style="flex:1"></span>
+                    <button class="m-iconbtn" aria-label="View store"><svg><use href="#i-ext"/></svg></button>
+                    <button class="m-iconbtn" aria-label="Edit store"><svg><use href="#i-edit"/></svg></button>
+                    <span class="m-av">GB</span>
+                  </div>
+                  <div class="m-scroll">
+                    <div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)">Friday, July 11</div>
+                    <div style="font-size:18px;font-weight:700;letter-spacing:-.01em;margin:2px 0 12px">Good afternoon, Ghali</div>
+                    <div class="m-kpis">
+                      <div class="m-kpi"><div class="k">Revenue</div><div class="v">€4,090.00</div><span class="b-delta up" style="height:16px;font-size:10px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 17 17 7M9 7h8v8"/></svg>5.1%</span></div>
+                      <div class="m-kpi"><div class="k">Orders</div><div class="v">15</div><span class="b-delta up" style="height:16px;font-size:10px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 17 17 7M9 7h8v8"/></svg>87.5%</span></div>
+                      <div class="m-kpi"><div class="k">Average order</div><div class="v">€272.63</div><span class="b-delta down" style="height:16px;font-size:10px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M7 7l10 10M17 9v8H9"/></svg>44%</span></div>
+                      <div class="m-kpi"><div class="k">Refund rate</div><div class="v">0%</div><span class="b-delta flat" style="height:16px;font-size:10px">–</span></div>
+                    </div>
+                    <div class="b-card b-card-pad" style="padding:13px">
+                      <div class="b-card-title" style="font-size:13px">Revenue</div>
+                      <div class="b-card-sub">Daily, last 30 days</div>
+                      <svg viewBox="0 0 300 90" style="width:100%;display:block;margin-top:8px"><path d="M8 74 L38 68 L68 70 L98 58 L128 64 L158 62 L188 66 L218 56 L248 16 L292 54 L292 82 L8 82 Z" fill="#0CAF7D" opacity=".08"/><path d="M8 74 L38 68 L68 70 L98 58 L128 64 L158 62 L188 66 L218 56 L248 16 L292 54" fill="none" stroke="#0CAF7D" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>
+                    </div>
+                  </div>
+                  <div class="m-scrim" data-close="ph-a"></div>
+                  <div class="m-drawer">
+                    <div class="m-drawer-head">
+                      <span class="m-tile">E</span>
+                      <div><b style="font-size:13px;display:block;line-height:1.2">EasyElec</b><span style="font-size:10px;color:var(--subtle)">Admin</span></div>
+                      <button class="x" data-close="ph-a" aria-label="Close menu"><svg><use href="#i-x"/></svg></button>
+                    </div>
+                    <nav>
+                      <a class="on" href="#" onclick="return false"><svg><use href="#i-home"/></svg>Home</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-receipt"/></svg>Orders</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-box"/></svg>Products</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-users"/></svg>Customers</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-tag"/></svg>Discounts</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-mail"/></svg>Emails</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-chart"/></svg>Analytics</a>
+                      <a href="#" onclick="return false"><svg><use href="#i-sliders"/></svg>Settings</a>
+                    </nav>
+                  </div>
+                  <div class="ph-home"></div>
+                </div>
+              </div>
+              <p style="text-align:center;font-size:11.5px;color:var(--pg-muted);margin-top:8px"><b style="color:var(--pg-ink)">The shell.</b> Tap the burger — drawer slides over a scrim, 44px rows, closes on scrim / X / navigate.</p>
+            </div>
+            <!-- PHONE B · index page -->
+            <div>
+              <div class="ph">
+                <div class="ph-status"><span>9:41</span><i>●●● ▲ ▮</i></div>
+                <div class="ph-body">
+                  <div class="m-top">
+                    <button class="m-burger" aria-label="Open menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+                    <span class="m-tile">E</span>
+                    <span class="m-name">EasyElec</span>
+                    <span style="flex:1"></span>
+                    <button class="m-iconbtn" aria-label="View store"><svg><use href="#i-ext"/></svg></button>
+                    <span class="m-av">GB</span>
+                  </div>
+                  <div class="m-scroll">
+                    <div style="display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px">
+                      <div style="font-size:18px;font-weight:700;letter-spacing:-.01em">Orders</div>
+                      <button class="b-btn b-btn-primary" style="height:40px"><svg><use href="#i-plus"/></svg>Add</button>
+                    </div>
+                    <label class="b-input" style="height:44px"><svg><use href="#i-search"/></svg><input placeholder="Search by order ID or email…"></label>
+                    <div class="m-chiprow"><button class="b-chip on">All</button><button class="b-chip">Pending</button><button class="b-chip">Paid</button><button class="b-chip">Shipped</button><button class="b-chip">Delivered</button></div>
+                    <div style="border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff">
+                      <div class="m-row"><div><b>#1042</b><span class="s">Marie Dubois · Jul 11</span></div><span class="b-badge b-badge-warn" style="margin-left:6px">Pending</span><span class="amt">€89.90</span></div>
+                      <div class="m-row"><div><b>#1041</b><span class="s">Tom Verly · Jul 11</span></div><span class="b-badge b-badge-ok" style="margin-left:6px">Paid</span><span class="amt">€537.56</span></div>
+                      <div class="m-row"><div><b>#1040</b><span class="s">Ana Costa · Jul 10</span></div><span class="b-badge b-badge-info" style="margin-left:6px">Shipped</span><span class="amt">€1,041.00</span></div>
+                      <div class="m-row"><div><b>#1039</b><span class="s">Leo Martens · Jul 10</span></div><span class="b-badge b-badge-ok" style="margin-left:6px">Paid</span><span class="amt">€49.90</span></div>
+                      <div class="m-row"><div><b>#1038</b><span class="s">Emma Klein · Jul 9</span></div><span class="b-badge b-badge-mute" style="margin-left:6px">Refunded</span><span class="amt">€12.50</span></div>
+                    </div>
+                    <div style="display:flex;align-items:center;justify-content:space-between;margin-top:10px">
+                      <span style="font-size:11.5px;color:var(--muted)" class="num">1–25 of 312</span>
+                      <span style="display:flex;gap:8px"><button class="b-btn b-btn-secondary" style="height:40px;opacity:.5" disabled>Previous</button><button class="b-btn b-btn-secondary" style="height:40px">Next</button></span>
+                    </div>
+                  </div>
+                  <div class="ph-home"></div>
+                </div>
+              </div>
+              <p style="text-align:center;font-size:11.5px;color:var(--pg-muted);margin-top:8px;max-width:350px"><b style="color:var(--pg-ink)">Index pages.</b> Full-width 44px search, chips scroll on one line, low-priority columns hidden, bulk selection rests until desktop (Shopify's own call).</p>
+            </div>
+            <!-- PHONE C · form + save bar + sheet + toast -->
+            <div>
+              <div class="ph" id="ph-c">
+                <div class="ph-status"><span>9:41</span><i>●●● ▲ ▮</i></div>
+                <div class="ph-body">
+                  <div class="m-top">
+                    <button class="m-burger" aria-label="Open menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+                    <span class="m-tile">E</span>
+                    <span class="m-name">USB-C Hub 7-in-1</span>
+                    <span style="flex:1"></span>
+                    <span class="m-av">GB</span>
+                  </div>
+                  <div class="m-scroll" style="padding-bottom:120px">
+                    <div class="b-card b-card-pad" style="padding:14px;margin-bottom:10px">
+                      <div class="b-label" style="margin-bottom:6px">Name</div>
+                      <label class="b-input" style="height:44px;margin-bottom:12px"><input value="USB-C Hub 7-in-1"></label>
+                      <div class="b-label" style="margin-bottom:6px">Price</div>
+                      <div class="os-addon" style="margin-bottom:12px"><span class="pre" style="display:flex;align-items:center">€</span><input value="49.90" style="height:44px"></div>
+                      <div style="display:flex;align-items:center;gap:10px;font-size:13px"><button class="b-switch" role="switch" aria-checked="true" aria-label="Charge tax"></button>Charge tax on this product</div>
+                    </div>
+                    <button class="b-btn b-btn-secondary" id="ph-c-open" style="height:40px;width:100%;justify-content:center">Open the delete confirm</button>
+                  </div>
+                  <div class="m-toast"><svg><use href="#i-check"/></svg>Product saved</div>
+                  <div class="m-savebar">
+                    <span class="dot"></span><span class="lbl">Unsaved changes</span><span class="sp"></span>
+                    <button class="b-btn b-btn-ghost">Discard</button><button class="b-btn b-btn-primary">Save</button>
+                  </div>
+                  <div class="m-scrim" data-close="ph-c"></div>
+                  <div class="m-sheet">
+                    <div class="grab"></div>
+                    <h4>Delete this product?</h4>
+                    <p>It will be removed from your storefront immediately. Products with order history are archived instead.</p>
+                    <div class="acts"><button class="b-btn b-btn-ghost" data-close="ph-c">Cancel</button><button class="b-btn b-btn-danger-solid" data-close="ph-c">Delete product</button></div>
+                  </div>
+                  <div class="ph-home"></div>
+                </div>
+              </div>
+              <p style="text-align:center;font-size:11.5px;color:var(--pg-muted);margin-top:8px;max-width:350px"><b style="color:var(--pg-ink)">Forms + feedback.</b> 44px fields, the save bar docks full-width above the home indicator, modals become bottom sheets, toasts span the width.</p>
+            </div>
+          </div>
+          <!-- Spec cells -->
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+            <div class="os-cell">
+              <div class="os-lab">The three breakpoints — nothing else</div>
+              <div class="os-vs" style="text-decoration:none">
+                <div style="text-decoration:none;color:var(--ink);font-weight:600;background:#fff">&lt; 480px · phones</div><div>optional table columns + bulk checkboxes hide · toasts span the width · top-bar labels go icon-only</div>
+                <div style="text-decoration:none;color:var(--ink);font-weight:600;background:#fff">&lt; 640px · phones + small</div><div>AdminModal becomes a bottom sheet (slide-up, top radius, safe-area footer)</div>
+                <div style="text-decoration:none;color:var(--ink);font-weight:600;background:#fff">&lt; 768px · the shell pivot</div><div>sidebar → drawer + burger · save bar full-width (rule already exists) · detail grids already stack at 1024</div>
+              </div>
+              <div class="os-note"><b>Why 768 and not the platform's 1024:</b> the admin lives inside the platform's preview iframe, often 800–1000px wide on laptops — pivoting at 1024 would put the drawer inside the desktop editing experience. 768 keeps the approved desktop chrome everywhere it fits and matches the save bar's existing mobile rule.</div>
+            </div>
+            <div class="os-cell">
+              <div class="os-lab">Touch + platform ergonomics</div>
+              <div class="os-vs">
+                <div>36px buttons · 32px chips/nav · 28px top-bar pills</div><div>@media (pointer: coarse): 44px controls, 44px nav rows, 36px chips — desktop density untouched</div>
+                <div>Toast max-width 416px overflows a 375px phone</div><div>toasts clamp to the viewport with 12px gutters</div>
+                <div>No safe-area handling anywhere</div><div>env(safe-area-inset-bottom) on the save bar, sheets and toaster (the cookie banner's proven recipe)</div>
+                <div>CustomerTable + UsersTable can blow the page sideways</div><div>every table gets the overflow-x wrapper guarantee</div>
+              </div>
+              <div class="os-note"><b>Deliberately NOT doing:</b> no bottom tab bar (native-app pattern — Shopify's mobile web admin uses a drawer), no card-transformation of tables in v1 (column priority + the scroll guarantee is Polaris' own condensed logic at a fraction of the risk), no new dependencies (the drawer animates with pure CSS — the SDK has no motion library, and keeps it that way).</div>
+            </div>
+          </div>
+        </div></div>
+      </div>
+      <div class="art-caption">
+        <span><b>try it:</b> tap the burger on phone A · open the delete confirm on phone C — the modal arrives as a bottom sheet</span>
+        <span><b>where the code lands:</b> ~90% additive media queries in admin-theme.css + ~60 lines of drawer wiring in AdminLayout/TopBar/Nav — the shell components barely change</span>
+        <span>the scroll lock is the AdminModal counter, shared — a drawer over a locked body, like every overlay</span>
+        <span>same LEDGER: one accent, washed bands, quiet icons — nothing gets a new visual language on mobile</span>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════ LIGHTER CODE ═══════════════════════ -->
+<section id="lighter">
+  <div class="wrap">
+    <div class="sec-eyebrow">Section 5</div>
+    <h2 class="sec-title">Why the code gets lighter</h2>
+    <p class="sec-note">Today each page hand-assembles its header, filters, buttons and confirmations, which is where the inconsistency comes from. Under LEDGER, pages stop owning visual decisions: they instantiate primitives. The CSS shrinks because variants disappear, and new surfaces are consistent by construction because there is nothing else to reach for.</p>
+    <div class="cols cols-2">
+      <div class="panel">
+        <h3>Before · every page invents</h3>
+<pre class="code"><span class="c">// products/page.tsx today</span>
+&lt;div className="flex items-center justify-between"&gt;
+  &lt;div&gt;
+    &lt;h1 className="admin-page-title"&gt;Products&lt;/h1&gt;
+    &lt;p className="admin-page-subtitle"&gt;Manage your…&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;button className="inline-flex items-center gap-2
+    rounded-md bg-primary px-4 py-2 text-sm…"&gt;
+    Add Product
+  &lt;/button&gt;
+&lt;/div&gt;
+<span class="c">// + its own confirm markup, its own filter stack,
+// + per-row delete buttons, per-page spacing…</span></pre>
+      </div>
+      <div class="panel">
+        <h3>After · every page composes</h3>
+<pre class="code"><span class="c">// any index page</span>
+&lt;<span class="k">AdminPageHeader</span> title="Products" subtitle="84,907 active"
+  primary={{ label: 'Add product', icon: Plus }} /&gt;
+&lt;<span class="k">AdminFilterRow</span> search chips={views} sort={sorts} /&gt;
+&lt;<span class="k">AdminTable</span> … /&gt;
+<span class="c">// any form page</span>
+&lt;<span class="k">AdminPageHeader</span> back title={product.name} badge="Active" /&gt;
+&lt;<span class="k">AdminSaveBar</span> when={isDirty} onSave={save} /&gt;
+<span class="c">// any destructive action</span>
+confirm({ title: 'Delete discount?', danger: true })</pre>
+      </div>
+    </div>
+    <div class="panel">
+      <h3>The contract in one table</h3>
+      <div style="overflow-x:auto">
+      <table style="width:100%;border-collapse:collapse;font-size:12.5px">
+        <thead><tr>
+          <th style="text-align:left;padding:8px 10px;border-bottom:1px solid var(--pg-border);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-subtle)">Job</th>
+          <th style="text-align:left;padding:8px 10px;border-bottom:1px solid var(--pg-border);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-subtle)">The one way to do it</th>
+          <th style="text-align:left;padding:8px 10px;border-bottom:1px solid var(--pg-border);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pg-subtle)">Replaces</th>
+        </tr></thead>
+        <tbody>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Open a page</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminPageHeader (back · eyebrow · title · badge · subtitle · actions)</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">20 hand-rolled headers, floating back arrows, double card titles</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Filter a list</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminFilterRow: search + view chips + sort, one line, swaps to bulk bar</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">Stacked full-width selects, native dropdowns, three-row filter blocks</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Act on a row</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">Row = link, one ⋯ menu for everything else</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">Per-row status dropdowns, pencil + trash pairs, green text-link triplets</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Save a form</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminSaveBar on dirty state</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">Floating Save pills, per-card Save buttons</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Confirm anything</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">One modal: object + consequence + Cancel / verb button</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">Mixed inline confirms, divergent dialogs, browser confirm()</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Show status</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">One badge recipe, five tones + neutral</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">Solid fills, accent-colored states, black donut segments</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Overlay anything</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminModal: portal, blur, Esc, guarded click-outside, scroll lock, three widths</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">8 hand-rolled dialogs, 4 backdrop styles, Esc on 1 of 8</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Show an empty list</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminEmptyState: first-run invites creation, no-match offers clearing filters</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">33 sites in 11 shapes, one CTA in the whole admin</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Search + paginate</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminSearchInput (300ms debounce) + AdminPagination</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">3 search markups, fetch-per-keystroke, 4 pagination re-rolls</td></tr>
+          <tr><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);font-weight:600">Toggle a state</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border)">AdminSwitch everywhere; checkboxes mean selection only</td><td style="padding:8px 10px;border-bottom:1px solid var(--pg-border);color:var(--pg-muted)">3 switch builds + checkbox-as-toggle in every manager</td></tr>
+          <tr><td style="padding:8px 10px;font-weight:600">Wait for data</td><td style="padding:8px 10px">Skeletons on first visit, content stays on refetch, one spinner</td><td style="padding:8px 10px;color:var(--pg-muted)">3 spinner builds, tables blanking on background reloads</td></tr>
+        </tbody>
+      </table>
+      </div>
+    </div>
+  </div>
+</section>
+<footer>
+  <div class="wrap">
+    LEDGER · Rovela Admin design language proposal · drafted July 10, 2026. Revised July 11 with tab 07 (One way each), the consolidation kit from the full-admin consistency audit. Tab 08 (Mobile) added the same day: the LEDGER at thumb size — drawer shell, condensed lists, bottom sheets, 44px touch targets. The artboards use EasyElec production data and the exact tokens already landed in admin-theme.css. The spec page itself follows the laws it proposes.
+  </div>
+</footer>
+<script>
+(function(){
+  // pattern tab switcher
+  document.querySelectorAll('.ptab').forEach(function(tab){
+    tab.addEventListener('click', function(){
+      document.querySelectorAll('.ptab').forEach(function(t){ t.classList.remove('on') });
+      document.querySelectorAll('.artwrap').forEach(function(a){ a.classList.remove('on') });
+      tab.classList.add('on');
+      document.getElementById(tab.dataset.art).classList.add('on');
+    });
+  });
+  // row menus (⋯)
+  function closeMenus(){ document.querySelectorAll('.b-menu.open').forEach(function(m){ if(!m.dataset.pinned) m.classList.remove('open') }) }
+  document.querySelectorAll('.row-menu-btn').forEach(function(btn){
+    btn.addEventListener('click', function(e){
+      e.stopPropagation();
+      var menu = btn.parentElement.querySelector('.b-menu');
+      var wasOpen = menu.classList.contains('open');
+      closeMenus();
+      if(!wasOpen) menu.classList.add('open');
+    });
+  });
+  document.addEventListener('click', closeMenus);
+  // orders bulk bar
+  var list = document.getElementById('orders-list');
+  if(list){
+    var rows = list.querySelectorAll('.row-check');
+    var all = document.getElementById('check-all');
+    function sync(){
+      var n = list.querySelectorAll('.row-check:checked').length;
+      list.classList.toggle('bulk-on', n > 0);
+      var c = document.getElementById('bulk-count');
+      if(c) c.textContent = n + ' selected';
+      if(all){ all.checked = n === rows.length && n > 0; }
+    }
+    rows.forEach(function(ch){ ch.addEventListener('change', sync); ch.addEventListener('click', function(e){ e.stopPropagation() }) });
+    if(all){ all.addEventListener('change', function(){ rows.forEach(function(ch){ ch.checked = all.checked }); sync() }) }
+    var clear = document.getElementById('bulk-clear');
+    if(clear){ clear.addEventListener('click', function(){ rows.forEach(function(ch){ ch.checked=false }); if(all) all.checked=false; sync() }) }
+  }
+  // save bar demo — dirty tracking with changed-field summary, then the
+  // saving → saved morph (the bar IS the feedback; no separate toast)
+  var savebar = document.getElementById('savebar');
+  if(savebar){
+    var sbLabel = document.getElementById('sb-label');
+    var sbMeta = document.getElementById('sb-meta');
+    var saveBtn = document.getElementById('save-btn');
+    var discardBtn = document.getElementById('discard-btn');
+    var FIELD_LABELS = { 'f-name':'Name', 'f-desc':'Description', 'f-price':'Price', 'f-cmp':'Compare-at', 'f-sku':'SKU' };
+    var touched = {};
+    function resetBar(){
+      savebar.classList.remove('show','saving','saved');
+      sbLabel.textContent = 'Unsaved changes';
+      sbMeta.textContent = '';
+      saveBtn.textContent = 'Save';
+      saveBtn.disabled = false; discardBtn.disabled = false;
+      touched = {};
+    }
+    document.querySelectorAll('.dirty-watch').forEach(function(inp){
+      inp.addEventListener('input', function(){
+        touched[inp.id || 'vendor'] = FIELD_LABELS[inp.id] || 'Vendor';
+        var names = Object.keys(touched).map(function(k){ return touched[k] });
+        sbMeta.textContent = names.slice(0,3).join(' · ') + (names.length > 3 ? ' · …' : '');
+        savebar.classList.remove('saved','saving');
+        sbLabel.textContent = 'Unsaved changes';
+        savebar.classList.add('show');
+      });
+    });
+    discardBtn.addEventListener('click', resetBar);
+    saveBtn.addEventListener('click', function(){
+      savebar.classList.add('saving');
+      sbLabel.textContent = 'Saving…'; saveBtn.textContent = 'Saving…';
+      saveBtn.disabled = true; discardBtn.disabled = true;
+      setTimeout(function(){
+        savebar.classList.remove('saving');
+        savebar.classList.add('saved');
+        sbLabel.textContent = 'Saved';
+        sbMeta.textContent = 'All changes are live in your store';
+        setTimeout(resetBar, 1400);
+      }, 900);
+    });
+  }
+  // discounts delete flow
+  var overlay = document.getElementById('mgr-overlay');
+  if(overlay){
+    var codeEl = document.getElementById('del-code');
+    var mgrToast = document.getElementById('mgr-toast');
+    document.querySelectorAll('.del-discount').forEach(function(btn){
+      btn.addEventListener('click', function(e){
+        e.stopPropagation();
+        closeMenus();
+        codeEl.textContent = btn.dataset.code;
+        overlay.classList.add('open');
+      });
+    });
+    document.getElementById('del-cancel').addEventListener('click', function(){ overlay.classList.remove('open') });
+    overlay.addEventListener('click', function(e){ if(e.target === overlay) overlay.classList.remove('open') });
+    document.getElementById('del-confirm').addEventListener('click', function(){
+      overlay.classList.remove('open');
+      mgrToast.classList.add('show');
+      setTimeout(function(){ mgrToast.classList.remove('show') }, 2200);
+    });
+  }
+  // Toast playground — the ONE toaster: stack of 3, success auto-dismisses,
+  // errors sticky with a dismiss
+  var toaster = document.getElementById('toaster');
+  if(toaster){
+    var dismissToast = function(el){
+      el.classList.add('leaving');
+      setTimeout(function(){ el.remove() }, 200);
+    };
+    var spawnToast = function(kind){
+      while(toaster.children.length >= 3){ toaster.removeChild(toaster.firstChild) }
+      var t = document.createElement('div');
+      t.className = 'b-toast';
+      if(kind === 'err'){
+        t.className = 'b-toast err';
+        t.innerHTML = '<svg style="width:14px;height:14px"><use href="#i-x"/></svg>' +
+          "Couldn't send the invite. Check the email address and try again." +
+          '<span class="b-toast-x"><svg style="width:12px;height:12px"><use href="#i-x"/></svg></span>';
+        t.querySelector('.b-toast-x').addEventListener('click', function(){ dismissToast(t) });
+      } else if(kind === 'action'){
+        t.innerHTML = '<svg style="width:14px;height:14px"><use href="#i-check"/></svg>Test email sent to you<span class="b-toast-action">View email</span>';
+        setTimeout(function(){ if(t.parentNode) dismissToast(t) }, 3000);
+      } else {
+        t.innerHTML = '<svg style="width:14px;height:14px"><use href="#i-check"/></svg>Discount deleted';
+        setTimeout(function(){ if(t.parentNode) dismissToast(t) }, 3000);
+      }
+      toaster.appendChild(t);
+    };
+    var fo = document.getElementById('fire-ok');
+    var fa = document.getElementById('fire-action');
+    var fe = document.getElementById('fire-err');
+    if(fo) fo.addEventListener('click', function(){ spawnToast('ok') });
+    if(fa) fa.addEventListener('click', function(){ spawnToast('action') });
+    if(fe) fe.addEventListener('click', function(){ spawnToast('err') });
+  }
+  // AUTH: eye toggle + submit -> loading -> inline error state demo
+  var authEye = document.getElementById('auth-eye');
+  var authPw = document.getElementById('auth-pw');
+  if(authEye && authPw){
+    authEye.addEventListener('click', function(){
+      authPw.type = authPw.type === 'password' ? 'text' : 'password';
+    });
+  }
+  var authSubmit = document.getElementById('auth-submit');
+  var authAlert = document.getElementById('auth-alert');
+  if(authSubmit && authAlert){
+    authSubmit.addEventListener('click', function(){
+      authAlert.classList.remove('show');
+      authSubmit.disabled = true;
+      authSubmit.textContent = 'Signing in…';
+      setTimeout(function(){
+        authSubmit.disabled = false;
+        authSubmit.textContent = 'Sign in';
+        authAlert.classList.add('show');
+      }, 900);
+    });
+  }
+  // 07 · live AdminModal demo: Esc + backdrop + buttons all close
+  var osOverlay = document.getElementById('os-overlay');
+  if(osOverlay){
+    var closeOs = function(){ osOverlay.classList.remove('open') };
+    document.getElementById('os-modal-open').addEventListener('click', function(){ osOverlay.classList.add('open') });
+    document.getElementById('os-modal-cancel').addEventListener('click', closeOs);
+    document.getElementById('os-modal-x').addEventListener('click', closeOs);
+    document.getElementById('os-modal-go').addEventListener('click', closeOs);
+    osOverlay.addEventListener('click', function(e){ if(e.target === osOverlay) closeOs() });
+    document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeOs() });
+  }
+  // 07 · empty-state variant toggle
+  document.querySelectorAll('#os-empty-seg button').forEach(function(b){
+    b.addEventListener('click', function(){
+      document.querySelectorAll('#os-empty-seg button').forEach(function(x){ x.classList.remove('on') });
+      b.classList.add('on');
+      document.getElementById('em-first').style.display = b.dataset.em === 'em-first' ? '' : 'none';
+      document.getElementById('em-nomatch').style.display = b.dataset.em === 'em-nomatch' ? '' : 'none';
+    });
+  });
+  // 07 · live list search filter
+  var osSearch = document.getElementById('os-search');
+  if(osSearch){
+    osSearch.addEventListener('input', function(){
+      var q = osSearch.value.toLowerCase();
+      document.querySelectorAll('#os-list tbody tr').forEach(function(tr){
+        tr.style.display = tr.textContent.toLowerCase().indexOf(q) > -1 ? '' : 'none';
+      });
+    });
+  }
+  // 07 · chips are single-select
+  document.querySelectorAll('#os-chips .b-chip').forEach(function(ch){
+    ch.addEventListener('click', function(){
+      document.querySelectorAll('#os-chips .b-chip').forEach(function(x){ x.classList.remove('on') });
+      ch.classList.add('on');
+    });
+  });
+  // 07 · switches
+  document.querySelectorAll('.os-sw').forEach(function(sw){
+    sw.addEventListener('click', function(){
+      sw.setAttribute('aria-checked', sw.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
+    });
+  });
+  // 07 · button in-flight demo
+  var osSave = document.getElementById('os-save');
+  if(osSave){
+    osSave.addEventListener('click', function(){
+      if(osSave.disabled) return;
+      osSave.disabled = true;
+      osSave.innerHTML = '<span class="b-spin sm inv"></span>Saving…';
+      setTimeout(function(){ osSave.disabled = false; osSave.textContent = 'Save'; }, 1100);
+    });
+  }
+  // 08 · phone demos: drawer + bottom sheet
+  var phA = document.getElementById('ph-a');
+  if(phA){
+    document.getElementById('ph-a-burger').addEventListener('click', function(){ phA.classList.add('nav-open') });
+    document.querySelectorAll('[data-close="ph-a"]').forEach(function(el){ el.addEventListener('click', function(){ phA.classList.remove('nav-open') }) });
+    phA.querySelectorAll('.m-drawer nav a').forEach(function(a){ a.addEventListener('click', function(){ phA.classList.remove('nav-open') }) });
+  }
+  var phC = document.getElementById('ph-c');
+  if(phC){
+    document.getElementById('ph-c-open').addEventListener('click', function(){ phC.classList.add('sheet-open') });
+    document.querySelectorAll('[data-close="ph-c"]').forEach(function(el){ el.addEventListener('click', function(){ phC.classList.remove('sheet-open') }) });
+  }
+  // keep artboard rows from navigating
+  document.querySelectorAll('.b-table tbody tr').forEach(function(tr){
+    tr.addEventListener('click', function(){ /* row is the link in product; inert in mock */ });
+  });
+})();
+</script>
+</body></html>