/* ============================================================
   MerchantHub — Design System (ported into the framework theme)
   Source: claude.ai/design "platform" handoff → project/styles.css
   Token-based. Drives the portal shell + shared components.
   Loaded AFTER the inline $gdata.Theme.css_root block and after
   Bootstrap, so these declarations win on overlapping selectors.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

/* ---------- Accent palettes (swappable via [data-accent]) ---------- */

:root {
    --accent-h: 256; --accent-s: 88%; --accent-l: 60%;          /* indigo default */
}

:root[data-accent="violet"]  { --accent-h: 272; --accent-s: 80%; --accent-l: 60%; }

:root[data-accent="blue"]    { --accent-h: 221; --accent-s: 83%; --accent-l: 56%; }

:root[data-accent="emerald"] { --accent-h: 160; --accent-s: 70%; --accent-l: 42%; }

:root[data-accent="rose"]    { --accent-h: 346; --accent-s: 84%; --accent-l: 58%; }

:root[data-accent="amber"]   { --accent-h: 32;  --accent-s: 95%; --accent-l: 50%; }

/* ---------- Light theme (default) ---------- */

:root {
    --accent:        hsl(var(--accent-h) var(--accent-s) var(--accent-l));
    --accent-hover:  hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%));
    --accent-fg:     #fff;
    --accent-soft:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.10);
    --accent-soft-2: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
    --accent-ring:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.30);
    --accent-text:   hsl(var(--accent-h) calc(var(--accent-s) - 8%) calc(var(--accent-l) - 8%));

    --bg:            #f6f6f7;
    /* Single flat page background — no gradient (user rule 2026-08-19:
       the page background is ONE color; any color shift reads as a defect). */
    --bg-grad:       none;
    --surface:       #ffffff;
    --surface-2:     #fafafa;
    --surface-3:     #f1f1f3;
    --surface-hover: #f6f6f8;

    --border:        #e8e8ec;
    --border-2:      #ededf1;
    --border-strong: #d8d8de;

    --text:          #18181b;
    --text-2:        #52525b;
    --text-3:        #8a8a93;
    --text-4:        #b4b4bb;

    --success:       hsl(150 70% 38%);
    --success-soft:  hsl(150 70% 40% / 0.12);
    --warning:       hsl(36 92% 46%);
    --warning-soft:  hsl(36 92% 50% / 0.14);
    --danger:        hsl(354 74% 53%);
    --danger-soft:   hsl(354 74% 55% / 0.12);
    --info:          hsl(214 84% 56%);
    --info-soft:     hsl(214 84% 56% / 0.12);

    --shadow-xs: 0 1px 2px rgb(16 16 20 / 0.04);
    --shadow-sm: 0 1px 2px rgb(16 16 20 / 0.05), 0 1px 3px rgb(16 16 20 / 0.06);
    --shadow-md: 0 2px 4px rgb(16 16 20 / 0.04), 0 4px 12px rgb(16 16 20 / 0.08);
    --shadow-lg: 0 8px 24px rgb(16 16 20 / 0.10), 0 2px 6px rgb(16 16 20 / 0.06);

    --r-xs: 5px; --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px;

    --sb-w: 248px;
    --topbar-h: 60px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Bridge the framework's --color-* aliases to the MH palette so the
            shipped components (topbar uses var(--color-body), etc.) stay coherent. ---- */
    --color-body:    var(--text);
    --color-text:    var(--text);
    --color-ink:     var(--text);
    --color-muted:   var(--text-3);
    --color-border:  var(--border);
    --color-line:    var(--border);
    --color-surface: var(--surface);
    --color-bg:      var(--bg);
    --color-primary: var(--accent);
}

/* ---------- Dark theme ---------- */

:root[data-theme="dark"] {
    --accent-fg:     #fff;
    --accent-soft:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
    --accent-soft-2: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.24);
    --accent-ring:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.40);
    --accent-text:   hsl(var(--accent-h) calc(var(--accent-s) - 6%) calc(var(--accent-l) + 14%));
    --accent-hover:  hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%));

    --bg:            #0a0a0c;
    --bg-grad:       none;
    --surface:       #141417;
    --surface-2:     #18181c;
    --surface-3:     #1f1f24;
    --surface-hover: #1d1d22;

    --border:        #26262c;
    --border-2:      #222228;
    --border-strong: #34343c;

    --text:          #f4f4f6;
    --text-2:        #a8a8b2;
    --text-3:        #6e6e78;
    --text-4:        #4a4a52;

    --success:       hsl(150 60% 50%);
    --success-soft:  hsl(150 60% 50% / 0.16);
    --warning:       hsl(36 92% 56%);
    --warning-soft:  hsl(36 92% 56% / 0.16);
    --danger:        hsl(354 80% 62%);
    --danger-soft:   hsl(354 80% 62% / 0.16);
    --info:          hsl(214 90% 62%);
    --info-soft:     hsl(214 90% 62% / 0.16);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.40);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 4px 14px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 10px 30px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.45);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    background-image: var(--bg-grad);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* prototype reset — without this, bare <button> (tabs, toggles, chips) show the UA border/background */

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

ul { list-style: none; }

.tnum, .mono { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft-2); }

/* scrollbars */

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

*::-webkit-scrollbar { width: 9px; height: 9px; }

*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- Animations ---------- */

@keyframes moduleIn { from { transform: translateY(7px); } to { transform: translateY(0); } }

@keyframes spin { to { transform: rotate(360deg); } }

.anim-up { animation: moduleIn 0.35s var(--ease-out); }

.spinner { width: 18px; height: 18px; border: 2px solid var(--accent-soft-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* ============================================================
   Portal shell
   ============================================================ */

.app-shell {
    display: grid;
    grid-template-columns: var(--sb-w) 1fr;
    min-height: 100vh;
}

/* ---- Sidebar ---- */

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 12px;
    overflow-y: auto;
}

.app-sidebar .brand-block {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 6px 8px 14px;
    border-bottom: 1px solid var(--border-2);
    margin-bottom: 10px;
}

.app-sidebar .role-tag {
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent-text); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px;
}

.app-sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.app-sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-md);
    color: var(--text-2); font-weight: 500; font-size: 13.5px;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.app-sidebar nav a:hover { background: var(--surface-hover); color: var(--text); }

.app-sidebar nav a.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

.app-sidebar nav a.is-active .nav-icon { color: var(--accent); }

.app-sidebar .nav-icon { display: inline-flex; width: 18px; color: var(--text-3); }

.app-sidebar .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-sidebar .nav-badge {
    font-size: 11px; font-weight: 600; min-width: 19px; text-align: center;
    padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2);
}

.app-sidebar nav a.is-active .nav-badge { background: var(--accent); color: var(--accent-fg); }

.app-sidebar .divider {
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-4); padding: 14px 10px 5px; background: none; height: auto;
}

.app-sidebar .user-block {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; padding: 10px; border-top: 1px solid var(--border-2);
}

.app-sidebar .user-avatar {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: grid; place-items: center; font-weight: 600; font-size: 13px;
    background: var(--accent-soft); color: var(--accent-text);
}

.app-sidebar .user-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-sidebar .user-org { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Main column ---- */

.app-main { display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
    position: sticky; top: 0; z-index: 25;
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-h);
    padding: 0 16px 0 22px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(1.2) blur(12px);
    border-bottom: 1px solid var(--border);
}

.app-topbar .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; margin: 0; padding: 0; background: none;
    white-space: nowrap; overflow: hidden; min-width: 0;
}

.app-topbar .breadcrumb .brand { color: var(--text-4); font-weight: 500; }

.app-topbar .breadcrumb .sep { color: var(--text-4); }

.app-topbar .breadcrumb .module { font-weight: 580; color: var(--text); overflow: hidden; text-overflow: ellipsis; }

.app-topbar .topbar-actions { display: flex; align-items: center; gap: 8px; }

.topbar-search {
    display: flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 12px; min-width: 220px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--text-4); font-size: 13px; text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}

.topbar-search:hover { border-color: var(--border-strong); color: var(--text-3); }

.vdivider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

.topbar-iconbtn {
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-md);
    display: grid; place-items: center; flex-shrink: 0;
    color: var(--text-3); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    background: transparent; border: none; cursor: pointer; text-decoration: none;
}

.topbar-iconbtn:hover { background: var(--surface-3); color: var(--text); }

:root[data-theme="dark"] .ico-moon { display: none; }

:root:not([data-theme="dark"]) .ico-sun { display: none; }

.avatar-sm {
    width: 30px; height: 30px; border-radius: 99px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent-text);
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.topbar-user { position: relative; }

.topbar-user summary { list-style: none; cursor: pointer; display: flex; border-radius: 99px; }

.topbar-user summary::-webkit-details-marker { display: none; }

.topbar-user[open] summary .avatar-sm { box-shadow: 0 0 0 2px var(--accent); }

.topbar-menu {
    position: absolute; top: 40px; inset-inline-end: 0; width: 230px; z-index: 60; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}

.topbar-menu-head { display: flex; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--border); }

.topbar-menu-head .who { min-width: 0; display: flex; flex-direction: column; }

.topbar-menu-head .who b { font-size: 13.5px; font-weight: 580; }

.topbar-menu-head .who i { font-style: normal; font-size: 11.5px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-menu-item { display: flex; align-items: center; gap: 9px; margin: 6px; padding: 8px 9px; border-radius: var(--r-md); font-size: 13px; color: var(--text-2); text-decoration: none; }

.topbar-menu-item:hover { background: var(--surface-2); }

.topbar-menu-item.danger { color: var(--danger); }

@media (max-width: 760px) {
    .topbar-search { display: none; }
}

.app-content { padding: 24px 26px 60px; max-width: 1380px; width: 100%; }

/* sidebar toggle (mobile) — hidden on desktop */

.sidebar-toggle-btn { display: none; }

.wk-sidebar-toggle, .wk-sidebar-backdrop { display: none; }

/* ============================================================
   Components
   ============================================================ */

/* ---- Buttons (override Bootstrap .btn) ---- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
    padding: 9px 14px; border-radius: var(--r-md); border: 1px solid transparent;
    cursor: pointer; transition: filter .15s, background .15s, border-color .15s, transform .05s;
    white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }

.btn-secondary:hover { background: var(--surface-hover); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-2); }

.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-text { background: transparent; color: var(--accent-text); padding-inline: 6px; }

.btn-text:hover { background: var(--accent-soft); }

.btn-gold { background: var(--warning); color: #fff; border-color: var(--warning); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-danger:hover { filter: brightness(0.95); color: #fff; }

.btn-sm { padding: 6px 10px; font-size: 12px; }

.btn-icon { padding: 8px; width: 34px; height: 34px; }

/* ---- KPI tiles ---- */

.kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 16px 18px; box-shadow: var(--shadow-xs);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}

.kpi:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }

.kpi-label { font-size: 12.5px; color: var(--text-3); font-weight: 500; margin-bottom: 8px; }

.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.kpi-unit { font-size: 13px; color: var(--text-3); font-weight: 500; }

.kpi-trail { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-3); }

.kpi-delta-up { color: var(--success); font-weight: 600; }

.kpi-delta-down { color: var(--danger); font-weight: 600; }

.kpi-color-primary { border-top: 2px solid var(--accent); }

.kpi-color-gold { border-top: 2px solid var(--warning); }

.kpi-color-info { border-top: 2px solid var(--info); }

/* ---- Pills / badges ---- */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2);
}

.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }

.pill-primary { background: var(--accent-soft); color: var(--accent-text); }

.pill-success { background: var(--success-soft); color: var(--success); }

.pill-warning { background: var(--warning-soft); color: var(--warning); }

.pill-danger  { background: var(--danger-soft); color: var(--danger); }

.pill-info    { background: var(--info-soft); color: var(--info); }

.pill-muted   { background: var(--surface-3); color: var(--text-3); }

/* ---- Cards ---- */

.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs); overflow: hidden;
}

.card-header {
    padding: 14px 18px; border-bottom: 1px solid var(--border-2);
    font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.card-body { padding: 18px; }

.card-footer { padding: 14px 18px; border-top: 1px solid var(--border-2); background: var(--surface-2); }

/* ---- Tables (override Bootstrap) ---- */

.table-responsive {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: auto; box-shadow: var(--shadow-xs);
}

.table { width: 100%; border-collapse: collapse; color: var(--text); margin: 0; }

.table thead th {
    text-align: start; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-3); padding: 11px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}

.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-2); font-size: 13.5px; vertical-align: middle; }

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: var(--surface-hover); }

.table .table-empty { text-align: center; color: var(--text-3); padding: 40px 16px; }

/* ---- Tabs ---- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }

.tabs .tab {
    padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--text-3);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}

.tabs .tab:hover { color: var(--text); }

.tabs .tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- Forms ---- */

.form-group { margin-bottom: 16px; }

.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }

.form-input, .form-select, .form-textarea {
    width: 100%; font-family: inherit; font-size: 13.5px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    padding: 9px 11px; transition: border-color .15s, box-shadow .15s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-help { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 5px; }

.form-error { display: block; font-size: 12px; color: var(--danger); margin-top: 5px; font-weight: 500; }

.text-danger { color: var(--danger); }

/* ---- Declarative form engine (es_form_render / boxs/form/container.html) ----
   Scoped to .wk-form so the plain .form-group rhythm above is untouched
   elsewhere. Inside a builder form the grid gap owns the vertical rhythm. */

.wk-form { padding-bottom: 4px; }

.wk-form .form-group { margin-bottom: 0; }

.wk-form .card + .card { margin-top: 14px; }

.wk-form .form-label .text-danger { font-weight: 700; margin-inline-start: 1px; }

.form-section-head {
    margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-2);
}

.form-section-title {
    font-size: 13.5px; font-weight: 640; color: var(--text); letter-spacing: -0.01em;
}

.form-section-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.wk-form-actions {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 0;
    background: var(--surface); border-top: 1px solid var(--border-2);
}

.wk-form-actions .wk-form-message { margin: 0; font-size: 13px; }

/* ---- Progressive disclosure: the per-section "Advanced" block ----
   boxs/form/container.html renders a native <details> for every field the
   builder marked 'advanced', so a small business sees only the fields it
   needs and the power fields stay one click away (and work with JS off). */

.wk-form .form-advanced {
    margin-top: 16px; padding-top: 2px; border-top: 1px solid var(--border-2);
}

.wk-form .form-advanced > summary {
    display: inline-flex; align-items: center; gap: 7px;
    list-style: none; cursor: pointer; user-select: none;
    margin: 0; padding: 10px 2px 2px;
    font-size: 12.5px; font-weight: 600; color: var(--text-3);
    transition: color .15s;
}

.wk-form .form-advanced > summary::-webkit-details-marker { display: none; }

.wk-form .form-advanced > summary::before {
    content: ""; width: 0; height: 0; flex: none;
    border-inline-start: 5px solid currentColor;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: transform .15s;
}

.wk-form .form-advanced[open] > summary::before { transform: rotate(90deg); }

.wk-form .form-advanced > summary:hover { color: var(--text); }

.wk-form .form-advanced-body { padding-top: 14px; }

/* ---- Media field: the image IS the value (boxs/component/input_media.html).
   Preview tile + Upload / Replace / Remove; the path is a hidden input and
   is never shown (UX contract §0). ---- */

.media-field .media-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
}

.media-field .media-tile-preview {
    width: 76px; height: 76px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); background: var(--surface-2);
    border: 1px solid var(--border-2); overflow: hidden; padding: 6px;
}

.media-field.is-empty .media-tile-preview { border-style: dashed; border-color: var(--border-strong); }

.media-field .media-tile-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.media-field .media-tile-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.2;
}

.media-field .media-tile-empty svg { width: 18px; height: 18px; }

.media-field .media-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

.media-field .media-tile-actions .btn { margin: 0; cursor: pointer; }

.media-field .media-tile-status { font-size: 12px; color: var(--text-3); }

.media-field.is-busy .media-tile-preview { opacity: .5; }

/* ---- Store settings (view/websitesetting/edit.html): one section at a
   time. A side nav on the start side, one panel visible; JS adds .has-js so
   every panel stays visible with JS off. ---- */

.page-website-settings .settings-layout {
    display: grid; grid-template-columns: 208px minmax(0, 1fr);
    gap: 28px; align-items: start;
}

.page-website-settings .settings-nav {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 70px;
}

.page-website-settings .settings-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-md);
    font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: none;
    transition: background .15s, color .15s;
}

.page-website-settings .settings-nav a svg { width: 16px; height: 16px; flex: none; opacity: .8; }

.page-website-settings .settings-nav a:hover { background: var(--surface-2); color: var(--text); }

.page-website-settings .settings-nav a.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

.page-website-settings .settings-nav a.is-active svg { opacity: 1; }

.page-website-settings .settings-panels { max-width: 760px; min-width: 0; }

.page-website-settings.has-js .settings-panel { display: none; }

.page-website-settings.has-js .settings-panel.is-active { display: block; }

.page-website-settings .settings-panel + .settings-panel { margin-top: 22px; }

.page-website-settings.has-js .settings-panel + .settings-panel { margin-top: 0; }

@media (max-width: 760px) {
    .page-website-settings .settings-layout { grid-template-columns: 1fr; gap: 16px; }
    .page-website-settings .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
    .page-website-settings .settings-nav a { white-space: nowrap; }
}

/* ---- Lookup field (boxs/component/input_lookup.html + lookup-field.js) ----
   The search-as-you-type replacement for a select that would otherwise carry
   hundreds of options. The results list is absolutely positioned, so the
   wrapper owns the positioning context. */

.form-lookup { position: relative; }

/* A card clips its overflow, which would cut the results list off when the
   lookup sits near the card's bottom edge — let any card holding a lookup
   overflow, so the list floats over whatever is below. */

.card:has(.form-lookup) { overflow: visible; }

.form-lookup-control { position: relative; }

.form-lookup-control .form-input { padding-inline-end: 32px; }

.form-lookup-clear {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 20px; height: 20px; padding: 0; line-height: 1;
    background: none; border: 0; cursor: pointer;
    color: var(--text-3); font-size: 15px; border-radius: var(--r-sm);
}

.form-lookup-clear:hover { color: var(--text); background: var(--surface-hover); }

.form-lookup-results {
    position: absolute; z-index: 20; inset-inline: 0; top: 100%;
    margin: 4px 0 0; padding: 4px; list-style: none;
    max-height: 240px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-md);
}

.form-lookup-results[hidden] { display: none; }

.form-lookup-results li {
    padding: 7px 9px; font-size: 13px; color: var(--text);
    border-radius: var(--r-sm); cursor: pointer;
}

.form-lookup-results li:hover,
.form-lookup-results li.is-active { background: var(--surface-hover); }

.form-lookup-results li.is-empty { color: var(--text-3); cursor: default; }

.form-lookup-results li > span { display: block; font-weight: 560; }

.form-lookup-results li .form-lookup-sub {
    display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Launch wizard: stepper + main/aside layout ---- */

.launch-stepper { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 22px; }

.launch-step {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px;
    border-radius: 999px; font-size: 12.5px; color: var(--text-3); text-decoration: none;
}

.launch-step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 999px; border: 1.5px solid var(--border-strong); font-size: 11.5px; font-weight: 700;
}

.launch-step-num svg { width: 12px; height: 12px; }

.launch-step.is-done { color: var(--accent-text); }

.launch-step.is-done .launch-step-num { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }

.launch-step.is-done:hover { background: var(--accent-soft); }

.launch-step.is-current { background: var(--accent); color: var(--accent-fg); font-weight: 600; }

.launch-step.is-current .launch-step-num { background: rgb(255 255 255 / 0.22); border-color: transparent; color: var(--accent-fg); }

.launch-step + .launch-step::before { content: ""; width: 14px; height: 1px; background: var(--border-strong); margin-inline-end: 6px; }

.launch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

.launch-layout.is-single { grid-template-columns: minmax(0, 1fr); }

.launch-aside { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 14px; }

.launch-fact { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-2); font-size: 13px; }

.launch-fact:first-of-type { border-top: 0; }

.launch-fact strong { font-size: 15px; min-width: 28px; }

.launch-fact span { color: var(--text-3); }

@media (max-width: 1100px) {
    .launch-layout { grid-template-columns: minmax(0, 1fr); }
    .launch-aside { position: static; }
}

.launch-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }

.launch-package { border: 1.5px solid var(--border); transition: border-color 160ms var(--ease), opacity 160ms var(--ease); }

.launch-package.is-on { border-color: var(--accent); }

.launch-package.is-off { opacity: 0.7; }

.form-lookup-results li.is-empty:hover { background: none; }

/* ---- Modal ---- */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgb(8 8 12 / 0.45); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 20px;
}

.modal-backdrop[hidden] { display: none; }

.modal {
    width: min(560px, 100%); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}

/* bootstrap.min.css also loads on the panel and hides every .modal
   (display:none; position:fixed; full-screen). A .modal inside our own
   backdrop is shown by un-hiding the backdrop, so undo Bootstrap there —
   otherwise the page greys out with no dialog (welcome, bulk, archive). */

.modal-backdrop > .modal {
    display: block; position: relative; inset: auto; z-index: auto;
    height: auto; max-height: calc(100dvh - 40px); overflow-y: auto;
}

.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-2); font-weight: 600; font-size: 15px; }

.modal-body { padding: 20px; }

.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-2); display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Pagination (Bootstrap .pagination polish) ---- */

.pagination { gap: 4px; }

.pagination .page-link {
    border: 1px solid var(--border); border-radius: var(--r-sm) !important;
    color: var(--text-2); font-size: 13px; padding: 6px 11px; background: var(--surface);
}

.pagination .page-link:hover { background: var(--surface-hover); color: var(--text); }

.pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.pagination .page-item.disabled .page-link { color: var(--text-4); background: var(--surface-2); }

/* ---- Wordmark ---- */

.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }

.wordmark .wordmark-mark { color: var(--accent); width: 30px; height: 30px; }

.wordmark .wordmark-text { display: flex; flex-direction: column; line-height: 1.05; }

.wordmark .wordmark-ar { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.wordmark .wordmark-en { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: var(--text-3); }

.wordmark-sm .wordmark-ar { font-size: 14px; }

/* ============================================================
   MerchantHub view helpers (used by per-page templates)
   ============================================================ */

.mh-stack { display: flex; flex-direction: column; gap: 22px; }

.mh-grid { display: grid; gap: 16px; }

.mh-grid-2 { grid-template-columns: repeat(2, 1fr); }

.mh-grid-3 { grid-template-columns: repeat(3, 1fr); }

.mh-grid-4 { grid-template-columns: repeat(4, 1fr); }

.mh-grid-stat { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.mh-section-title { font-size: 14px; font-weight: 600; }

.mh-muted { color: var(--text-3); }

.mh-fs-sm { font-size: 12.5px; }

/* toolbar above data tables */

.mh-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}

.mh-search {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 11px;
    color: var(--text-3);
}

.mh-search input { border: none; outline: none; background: none; flex: 1; font-size: 13.5px; color: var(--text); }

.mh-chip {
    font-size: 12.5px; font-weight: 500; color: var(--text-2);
    border: 1px solid var(--border-strong); background: var(--surface);
    padding: 7px 12px; border-radius: 999px; cursor: pointer;
}

.mh-chip.is-active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-ring); }

/* avatar + cell helpers */

.mh-avatar {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    display: grid; place-items: center; font-weight: 600; font-size: 12px;
    background: var(--accent-soft); color: var(--accent-text);
}

.mh-thumb {
    width: 40px; height: 40px; border-radius: 9px; flex: none; object-fit: cover;
    background: var(--surface-3); display: grid; place-items: center; color: var(--text-4); overflow: hidden;
}

.mh-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }

.mh-cell-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-cell-sub { font-size: 11.5px; color: var(--text-3); }

.mh-rowact { display: inline-flex; gap: 6px; }

.mh-rowact a { color: var(--text-3); padding: 4px; border-radius: 6px; display: inline-flex; }

.mh-rowact a:hover { background: var(--surface-3); color: var(--accent-text); }

/* ---- prototype interaction states (mhkit components) ---- */

.mh-btn:hover { filter: brightness(0.97); }

.mh-btn:active { transform: scale(0.985); }

.mh-iconbtn:hover { background: var(--surface-3) !important; color: var(--text-2); }

.mh-iconbtn:active { transform: scale(0.92); }

.mh-row:hover { background: var(--surface-hover); }

.mh-card { transition: box-shadow .2s, border-color .2s, transform .2s; }

.mh-menuitem:hover { background: var(--surface-hover); }

.mh-crumb:hover { color: var(--accent-text); }

.anim-scale { animation: mhScaleIn 0.16s var(--ease-out); }

@keyframes mhScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* simple progress bar (top products / fulfilment) */

.mh-bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }

.mh-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* mini chart bars */

.mh-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }

.mh-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; }

.mh-chart .col i { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 0 0; background: var(--accent); opacity: .85; }

.mh-chart .col span { font-size: 11px; color: var(--text-3); }

/* activity feed */

.mh-feed { display: flex; flex-direction: column; gap: 2px; }

.mh-feed-item { display: flex; gap: 11px; padding: 9px 4px; }

.mh-feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; }

.mh-feed-body { font-size: 13px; }

.mh-feed-time { font-size: 11.5px; color: var(--text-4); }

/* page header (used inside content when no topbar action room) */

.mh-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }

/* definition / detail rows */

.mh-deflist { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 13.5px; }

.mh-deflist dt { color: var(--text-3); }

.mh-deflist dd { margin: 0; font-weight: 500; }

/* timeline */

.mh-timeline { display: flex; flex-direction: column; }

.mh-tl-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }

.mh-tl-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 7px; top: 18px; bottom: 0; width: 2px; background: var(--border); }

.mh-tl-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--surface); border: 3px solid var(--accent); z-index: 1; }

.mh-tl-dot.is-muted { border-color: var(--border-strong); }

.mh-tl-title { font-weight: 600; font-size: 13px; }

.mh-tl-time { font-size: 11.5px; color: var(--text-4); }

/* empty state */

.mh-empty { text-align: center; color: var(--text-3); padding: 50px 20px; }

/* stub / coming-soon */

.mh-stub { display: grid; place-items: center; text-align: center; padding: 60px 24px; }

.mh-stub-icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }

.mh-stub h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }

.mh-stub p { color: var(--text-3); max-width: 460px; margin: 0 auto 6px; }

.mh-feature-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; max-width: 560px; }

.mh-feature-list span { font-size: 12.5px; color: var(--text-2); background: var(--surface-3); padding: 6px 11px; border-radius: 999px; }

/* invoice sheet */

.print-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

.print-sheet {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 40px; max-width: 820px; margin: 0 auto; color: var(--text);
}

.print-sheet h1 { font-size: 22px; }

@media print {
    .app-sidebar, .app-topbar, .print-bar { display: none !important; }
    .app-content { padding: 0 !important; }
    .print-sheet { box-shadow: none; border: none; max-width: none; padding: 0; }
    body { background: #fff; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .mh-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .mh-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; inset-inline-start: 0; top: 0; z-index: 60; width: var(--sb-w);
        transform: translateX(-105%); transition: transform .25s var(--ease-out);
    }
    [dir="rtl"] .app-sidebar { transform: translateX(105%); }
    .wk-sidebar-toggle:checked ~ .app-shell .app-sidebar,
    .wk-sidebar-toggle:checked ~ .app-frame .app-sidebar { transform: translateX(0); }
    .wk-sidebar-toggle:checked ~ .wk-sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55; background: rgb(8 8 12 / 0.4);
    }
    .sidebar-toggle-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: 1px solid var(--border-strong);
        border-radius: var(--r-md); background: var(--surface);
    }
    .sidebar-toggle-btn span, .sidebar-toggle-btn span::before, .sidebar-toggle-btn span::after {
        content: ""; display: block; width: 16px; height: 2px; background: var(--text-2); border-radius: 2px; position: relative;
    }
    .sidebar-toggle-btn span::before { position: absolute; top: -5px; }
    .sidebar-toggle-btn span::after { position: absolute; top: 5px; }
    .app-content { padding: 18px 16px 50px; }
    .app-topbar { padding: 10px 16px; }
}

@media (max-width: 620px) {
    .mh-grid-4, .mh-grid-3, .mh-grid-2 { grid-template-columns: 1fr; }
    .mh-deflist { grid-template-columns: 1fr; gap: 3px 0; }
    .mh-deflist dt { margin-top: 8px; }
}

/* ---- Item form (stage 1): language toggle, mini rich-text, checkbox rows ---- */

.it-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }

.lang-2 { display: none; }

.it-rt-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }

.it-rt-toolbar button { width: 30px; height: 28px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }

.it-rt { min-height: 96px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 13.5px; line-height: 1.6; color: var(--text); outline: none; }

.it-rt:focus { border-color: var(--accent); }

.it-rt:empty:before { content: attr(data-ph); color: var(--text-4); pointer-events: none; }

/* ---- MerchantHub form controls (token-styled; used by the item form) ---- */

.mhf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); margin-bottom: 16px; overflow: hidden; }

.mhf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14.5px; font-weight: 600; }

.mhf-body { padding: 18px; }

.mhf-group { margin-bottom: 14px; }

.mhf-group:last-child { margin-bottom: 0; }

.mhf-label { display: block; font-size: 12.5px; font-weight: 540; color: var(--text-2); margin-bottom: 6px; }

.mhf-input, .mhf-select { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; color: var(--text); outline: none; transition: border-color .15s var(--ease); }

.mhf-input.mono { font-family: var(--mono); font-size: 12.5px; }

.mhf-select[multiple] { height: auto; min-height: 96px; padding: 6px; }

.mhf-input:focus, .mhf-select:focus { border-color: var(--accent); }

.mhf-req { color: var(--danger); }

.mhf-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding-block: 0; padding-inline: 12px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; color: var(--text); cursor: pointer; text-align: start; }

.mhf-pick .mhf-pick-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mhf-pick .mhf-pick-ph { color: var(--text-4); }

/* ---- Modern switch — a styled checkbox, so .checked / change events keep
   working everywhere. Add class="mh-switch" to any form checkbox. ---- */

input[type="checkbox"].mh-switch {
    -webkit-appearance: none; appearance: none;
    width: 36px; height: 21px; border-radius: 99px; border: none; outline: none;
    background: var(--border-strong); position: relative; cursor: pointer;
    flex-shrink: 0; margin: 0; vertical-align: middle;
    transition: background .2s var(--ease);
}

input[type="checkbox"].mh-switch::before {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 15px; height: 15px; border-radius: 99px; background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease);
}

input[type="checkbox"].mh-switch:checked { background: var(--accent); }

input[type="checkbox"].mh-switch:checked::before { transform: translateX(15px); }

[dir="rtl"] input[type="checkbox"].mh-switch:checked::before { transform: translateX(-15px); }

[dir="rtl"] input[type="checkbox"].mh-switch.mh-switch-sm:checked::before { transform: translateX(-12px); }

input[type="checkbox"].mh-switch:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }

input[type="checkbox"].mh-switch:disabled { opacity: .5; cursor: not-allowed; }

input[type="checkbox"].mh-switch.mh-switch-sm { width: 30px; height: 18px; }

input[type="checkbox"].mh-switch.mh-switch-sm::before { width: 12px; height: 12px; }

input[type="checkbox"].mh-switch.mh-switch-sm:checked::before { transform: translateX(12px); }

/* =====================================================================
   Panel accessibility base (ux-contract §5)
   - .focus-ring was referenced by sidebar.html but never defined; every
     interactive element now shows a visible keyboard focus indicator.
   - :focus (not :focus-visible) is deliberately NOT styled so mouse
     clicks stay clean; keyboard focus always shows.
   - Reduced-motion users get instant state changes panel-wide.
   ===================================================================== */

.focus-ring:focus-visible,
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
.app-shell summary:focus-visible,
.app-shell [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm, 6px);
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   Table filter toolbar v2 (.mh-filter) + active-filter chips (.mh-chip)
   Logical properties throughout — RTL-correct by construction.
   ===================================================================== */

.mh-filter { margin-bottom: 14px; }

.mh-filter__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.mh-filter__search { position: relative; flex: 1; min-width: 220px; }

.mh-filter__icon { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); color: var(--text-4); display: inline-flex; pointer-events: none; }

.mh-filter__search input { width: 100%; height: 38px; padding-inline: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--text); outline: none; }

.mh-filter__search input.has-icon { padding-inline-start: 36px; }

.mh-filter__search input:focus { border-color: var(--accent); }

.mh-filter__control { height: 38px; padding-inline: 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text); }

details.mh-filter__more { position: relative; }

.mh-filter__summary { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 13px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 540; cursor: pointer; list-style: none; user-select: none; }

.mh-filter__summary::-webkit-details-marker { display: none; }

details.mh-filter__more[open] > .mh-filter__summary { border-color: var(--accent); color: var(--accent-text); }

.mh-filter__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); flex: none; }

.mh-filter__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; width: max-content; max-width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .14)); padding: 14px; display: flex; flex-direction: column; gap: 11px; }

.mh-filter__field { display: flex; flex-direction: column; gap: 5px; }

.mh-filter__field .mh-filter__control { width: 100%; }

.mh-filter__label { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }

.mh-filter__panel-actions { display: flex; align-items: center; gap: 12px; padding-top: 3px; }

.mh-filter__apply { height: 34px; padding-inline: 16px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-fg); font-size: 13px; font-weight: 560; border: 0; cursor: pointer; }

.mh-filter__clear { font-size: 12.5px; color: var(--text-3); text-decoration: underline; }

.mh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }

.mh-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding-inline: 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 540; text-decoration: none; }

.mh-chip__x { font-size: 15px; line-height: 1; }

.mh-chip:hover .mh-chip__x { color: var(--danger); }

.mh-chip--clear { background: transparent; border: 1px dashed var(--border); color: var(--text-3); }

.mh-chip--clear:hover { color: var(--text-2); border-color: var(--text-4); }

/* ---- Topbar website context ("Managing: X") ---- */

details.topbar-website { position: relative; }

details.topbar-website > summary { list-style: none; cursor: pointer; }

details.topbar-website > summary::-webkit-details-marker { display: none; }

.topbar-website-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-inline: 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--text-2); margin-inline-start: 10px; white-space: nowrap; }

.topbar-website-pill b { font-weight: 600; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.topbar-website-hint { color: var(--text-4); }

details.topbar-website .topbar-menu { inset-inline-end: auto; inset-inline-start: 0; }

details.topbar-website .topbar-menu-item.is-current { color: var(--accent-text); font-weight: 600; }

@media (max-width: 760px) {
    .topbar-website-hint { display: none; }
    .topbar-website-pill b { max-width: 110px; }
}

/* ---- Direction-safe back link (boxs/component/backlink.html) ---- */

.mh-backlink { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); text-decoration: none; }

.mh-backlink:hover { color: var(--text-2); }

[dir="rtl"] .mh-backlink svg { transform: scaleX(-1); }

/* =====================================================================
   PANEL — ES Design System v2 (source: "Panel Screens" canvas)
   ---------------------------------------------------------------------
   Loaded last, so it re-points the MerchantHub tokens to the new palette and
   restyles the shell WITHOUT touching the 28 view templates — every rule below
   targets a class the templates already emit (.app-topbar, .app-sidebar,
   .btn, .card, table, …). The only markup change is pages.html, where the
   topbar moved above .app-shell so the dark bar spans the full width.

   Panel tokens keep their own names (--accent / --bg / --text / --border);
   the storefront's --color-* set is scoped to .sf-scope, so the two systems
   never collide on one page.
   ===================================================================== */

:root {
    --accent:        #1b4dd8;
    --accent-hover:  color-mix(in oklab, #1b4dd8 86%, #000);
    --accent-fg:     #ffffff;
    --accent-soft:   color-mix(in oklab, #1b4dd8 10%, #ffffff);
    --accent-soft-2: color-mix(in oklab, #1b4dd8 16%, #ffffff);
    --accent-ring:   color-mix(in oklab, #1b4dd8 30%, transparent);
    --accent-text:   #1b4dd8;
    --accent-warm:   #e07b00;
    --shell-ink:     #0f172a;

    --bg:            #f4f6f9;
    --bg-grad:       none;
    --surface:       #ffffff;
    --surface-2:     color-mix(in oklab, #ffffff 94%, #0e1420);
    --surface-3:     color-mix(in oklab, #ffffff 88%, #0e1420);
    --surface-hover: color-mix(in oklab, #ffffff 96%, #0e1420);

    --border:        #dde2ea;
    --border-2:      color-mix(in oklab, #dde2ea 70%, #ffffff);
    --border-strong: color-mix(in oklab, #dde2ea 70%, #0e1420);

    --text:          #0e1420;
    --text-2:        #3a4459;
    --text-3:        #59637a;
    --text-4:        #8d97ab;

    --success:       #0f7a45;
    --success-soft:  color-mix(in oklab, #0f7a45 12%, #ffffff);
    --warning:       #96600a;
    --warning-soft:  color-mix(in oklab, #96600a 14%, #ffffff);
    --danger:        #c22a2a;
    --danger-soft:   color-mix(in oklab, #c22a2a 12%, #ffffff);
    --info:          #0f62aa;
    --info-soft:     color-mix(in oklab, #0f62aa 12%, #ffffff);

    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px;
    --sb-w: 258px;
    --topbar-h: 58px;
    --font: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root[data-theme="dark"] {
    --accent:        #6f9bff;
    --accent-hover:  color-mix(in oklab, #6f9bff 88%, #fff);
    --accent-fg:     #08101f;
    --accent-soft:   color-mix(in oklab, #6f9bff 16%, #161b25);
    --accent-soft-2: color-mix(in oklab, #6f9bff 24%, #161b25);
    --accent-text:   #9dbaff;
    --accent-warm:   #f0a340;
    --shell-ink:     #10151f;

    --bg:            #0d1017;
    --surface:       #161b25;
    --surface-2:     color-mix(in oklab, #161b25 88%, #fff);
    --surface-3:     color-mix(in oklab, #161b25 78%, #fff);
    --surface-hover: color-mix(in oklab, #161b25 92%, #fff);

    --border:        #28303e;
    --border-2:      color-mix(in oklab, #28303e 70%, #161b25);
    --border-strong: color-mix(in oklab, #28303e 60%, #fff);

    --text:          #eef1f7;
    --text-2:        #c3cbdb;
    --text-3:        #9aa4ba;
    --text-4:        #6d7791;

    --success:       #3fbe7d;
    --success-soft:  color-mix(in oklab, #3fbe7d 16%, #161b25);
    --warning:       #e0a33c;
    --warning-soft:  color-mix(in oklab, #e0a33c 16%, #161b25);
    --danger:        #f2726f;
    --danger-soft:   color-mix(in oklab, #f2726f 16%, #161b25);
    --info:          #63aef5;
    --info-soft:     color-mix(in oklab, #63aef5 16%, #161b25);
}

body { font-size: 15px; line-height: 1.55; }

/* ---------- Shell: full-width dark bar over a sidebar + content row ------- */

.app-frame { display: flex; flex-direction: column; min-height: 100vh; }

.app-frame > .app-shell {
    flex: 1;
    display: grid;
    grid-template-columns: var(--sb-w) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: 20px clamp(14px, 2.6vw, 28px) 60px;
}

/* ---------- Topbar — the dark utility bar ---------- */

.app-frame > .app-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    width: 100%; height: auto; min-height: var(--topbar-h);
    padding: 10px clamp(14px, 2.6vw, 28px);
    border: 0;
    background: var(--shell-ink);
    color: #fff;
}

.app-frame > .app-topbar .breadcrumb { color: rgba(255, 255, 255, .72); }

.app-frame > .app-topbar .breadcrumb .brand { color: rgba(255, 255, 255, .58); font-weight: 600; }

.app-frame > .app-topbar .breadcrumb .sep { color: rgba(255, 255, 255, .38); }

.app-frame > .app-topbar .breadcrumb .module { color: #fff; font-weight: 600; }

.app-frame > .app-topbar .breadcrumb a.module { color: rgba(255, 255, 255, .72) !important; }

.app-frame > .app-topbar .topbar-website-pill {
    min-height: 34px; padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.app-frame > .app-topbar .topbar-website-pill b { color: #fff; }

.app-frame > .app-topbar .topbar-website-hint { color: rgba(255, 255, 255, .6); }

.app-frame > .app-topbar .topbar-search {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
}

.app-frame > .app-topbar .topbar-search:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.app-frame > .app-topbar .topbar-iconbtn { color: rgba(255, 255, 255, .82); background: transparent; }

.app-frame > .app-topbar .topbar-iconbtn:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.app-frame > .app-topbar .vdivider { background: rgba(255, 255, 255, .18); }

.app-frame > .app-topbar .btn-primary { background: var(--accent-warm); border-color: var(--accent-warm); color: #fff; }

.app-frame > .app-topbar .btn-primary:hover { background: color-mix(in oklab, var(--accent-warm) 88%, #000); border-color: color-mix(in oklab, var(--accent-warm) 88%, #000); }

.app-frame > .app-topbar .btn-secondary,
.app-frame > .app-topbar .btn-ghost {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22);
}

.app-frame > .app-topbar .btn-secondary:hover,
.app-frame > .app-topbar .btn-ghost:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.app-frame > .app-topbar .avatar-sm { background: rgba(255, 255, 255, .16); color: #fff; }

.app-frame > .app-topbar .topbar-menu { color: var(--text); }

/* ---------- Sidebar — a bordered card that sticks under the bar ---------- */

.app-frame .app-sidebar {
    position: sticky; top: calc(var(--topbar-h) + 18px);
    width: auto; height: auto; max-height: calc(100vh - var(--topbar-h) - 38px);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    overflow-y: auto;
}

.app-frame .app-sidebar .brand-block { padding: 8px 10px 12px; }

.app-frame .app-sidebar nav { gap: 1px; }

.app-frame .app-sidebar nav a {
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    color: var(--text);
}

.app-frame .app-sidebar nav a:hover { background: var(--surface-2); }

.app-frame .app-sidebar nav a.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

.app-frame .app-sidebar .divider {
    margin: 12px 10px 4px;
    font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3);
}

.app-frame .app-sidebar .user-block {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ---------- Content column ---------- */

.app-frame .app-main { min-width: 0; }

.app-frame .app-content { padding: 0; max-width: none; }

/* ---------- Surfaces ---------- */

.card,
.mh-card,
.panel-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: none;
}

.card:hover { box-shadow: none; }

/* ---------- Buttons ---------- */

.btn {
    min-height: 38px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 14px;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ---------- Tables ---------- */

table thead th,
.mh-table thead th {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

table tbody td,
.mh-table tbody td { border-bottom: 1px solid var(--border-2); font-size: 14px; }

table tbody tr:hover td,
.mh-table tbody tr:hover td { background: var(--surface-hover); }

/* ---------- Status pills ---------- */

.badge, .pill, .status-badge {
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

/* ---------- Inputs ---------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="password"], input[type="search"],
select, textarea, .form-control, .input {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
}

input:focus, select:focus, textarea:focus, .form-control:focus, .input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
}

/* ---------- KPI tiles ---------- */

.kpi-card, .statc {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.kpi-card .kpi-value, .statc b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }

.kpi-card .kpi-label, .statc span { font-size: 13px; color: var(--text-3); }

/* ---------- Alerts (panel) ---------- */

.alert, .pnl-alert {
    display: flex; gap: 12px;
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-inline-start-width: 4px;
    border-radius: var(--r-md);
    font-size: 14px;
}

.alert-success, .pnl-alert--success { color: var(--success); background: var(--success-soft); }

.alert-warning, .pnl-alert--warning { color: var(--warning); background: var(--warning-soft); }

.alert-danger,  .pnl-alert--danger  { color: var(--danger);  background: var(--danger-soft); }

.alert-info,    .pnl-alert--info    { color: var(--info);    background: var(--info-soft); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .app-frame > .app-shell { grid-template-columns: minmax(0, 1fr); }
    /* Off-canvas drawer below 1024px - see "Stage 2 W3 panel shell" at the
       end of this file (the sidebar must never stay in the page flow, or
       every panel page opens blank on phones). */
    .app-frame .app-sidebar { max-height: none; }
}

/* Sidebar card internals (screenshot review): the base shell gives .app-sidebar
   height:100vh with the user block pushed down by margin-top:auto, which in the
   v2 card clipped the last nav item and let the user block float over it.
   The card now sizes to its content, the nav scrolls inside it, and the user
   block stays pinned at the bottom of the card. */

.app-frame .app-sidebar { height: auto; display: flex; flex-direction: column; overflow: hidden; }

.app-frame .app-sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.app-frame .app-sidebar .user-block { flex: 0 0 auto; margin-top: 10px; }

.app-frame .app-sidebar .brand-block { flex: 0 0 auto; }

/* ---- panel sign-in (v2) — centred card on the panel surface ---- */

.pnl-login {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 40px 20px;
    background: var(--bg);
}

.pnl-login__card {
    width: 100%; max-width: 420px;
    padding: 30px 30px 26px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.pnl-login__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.pnl-login__mark {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--r-md); background: var(--accent); color: var(--accent-fg);
}

.pnl-login__brandtext { display: flex; flex-direction: column; min-width: 0; }

.pnl-login__brandtext b { font-size: 14.5px; font-weight: 650; color: var(--text); }

.pnl-login__brandtext i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

.pnl-login__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

.pnl-login__sub { margin: 0 0 22px; font-size: 13.5px; color: var(--text-3); }

.pnl-login__msg { display: none; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; }

.pnl-login__msg.is-error,
.pnl-login__msg.wk-form-message-error { display: block; color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger); }

.pnl-login__msg.is-ok,
.pnl-login__msg.wk-form-message-ok { display: block; color: var(--success); background: var(--success-soft); border: 1px solid var(--success); }

.pnl-login__field { margin-bottom: 14px; }

.pnl-login__field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }

.pnl-login__field .form-control { width: 100%; }

.pnl-login__submit { width: 100%; min-height: 44px; margin-top: 4px; font-size: 14.5px; }

.pnl-login__foot {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 20px 0 0; padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-4);
}

/* ---- Topbar workspace pill (General / store) ---- */

.topbar-website-ico { display: inline-flex; color: var(--text-3); }

.app-frame > .app-topbar .topbar-website-ico { color: rgba(255, 255, 255, .7); }

.topbar-menu-ico { display: inline-flex; color: var(--text-4); flex: none; }

.topbar-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-menu-more { border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; padding-top: 12px; color: var(--accent-text); font-weight: 600; }

details.topbar-website .topbar-menu { min-width: 240px; max-height: 70vh; overflow-y: auto; }

/* ---- Workspace chooser (view/panel/workspace.html) — the first screen
        after sign-in: General card + website cards, flat page background,
        1160px grid, RTL-safe logical properties. ---- */

.pnl-ws { min-height: 100vh; background: var(--bg); color: var(--text); }

.pnl-ws__bar {
    min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 8px 24px; border-bottom: 1px solid var(--border); background: var(--surface);
}

.pnl-ws__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.pnl-ws__mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent); color: var(--accent-fg); }

.pnl-ws__brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.pnl-ws__brandtext b { font-size: 14px; font-weight: 650; }

.pnl-ws__brandtext i { font-style: normal; font-size: 11px; color: var(--text-4); }

.pnl-ws__tools { display: flex; align-items: center; gap: 14px; }

.pnl-ws__iconbtn {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
    font-size: 12.5px; font-weight: 600; text-decoration: none;
}

.pnl-ws__who { display: flex; align-items: center; gap: 9px; }

.pnl-ws__avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 650; }

.pnl-ws__whotext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.pnl-ws__whotext i { font-style: normal; font-size: 10.5px; color: var(--text-4); }

.pnl-ws__whotext b { font-size: 12.5px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pnl-ws__logout { font-size: 12.5px; color: var(--danger); text-decoration: none; }

.pnl-ws__main { width: 100%; max-width: 1160px; margin-inline: auto; padding: 44px 24px 64px; }

.pnl-ws__title { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

.pnl-ws__sub { margin: 0 0 26px; font-size: 14px; color: var(--text-3); max-width: 72ch; }

.pnl-ws__general,
.pnl-ws__card {
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
    color: inherit; text-decoration: none; box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pnl-ws__general:hover, .pnl-ws__card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.pnl-ws__general.is-current, .pnl-ws__card.is-current { border-color: var(--accent); background: var(--accent-soft); }

.pnl-ws__general { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 30px; }

.pnl-ws__general-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }

.pnl-ws__general-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.pnl-ws__general-text b { font-size: 16px; font-weight: 650; }

.pnl-ws__general-text i { font-style: normal; font-size: 13px; color: var(--text-3); }

.pnl-ws__go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }

[dir="rtl"] .pnl-ws__go svg { transform: scaleX(-1); }

.pnl-ws__sites-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.pnl-ws__sites-head h2 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }

.pnl-ws__count { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }

.pnl-ws__search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }

.pnl-ws__search .form-control { min-width: 240px; min-height: 38px; }

.pnl-ws__srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pnl-ws__clear { font-size: 12.5px; color: var(--text-3); }

.pnl-ws__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.pnl-ws__card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 150px; }

.pnl-ws__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }

.pnl-ws__card-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); }

.pnl-ws__badge { font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 999px; }

.pnl-ws__badge.is-live { background: var(--success-soft); color: var(--success); }

.pnl-ws__badge.is-draft { background: var(--warning-soft); color: var(--warning); }

.pnl-ws__card-name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pnl-ws__card-host { font-style: normal; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pnl-ws__card-entity { font-size: 11.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pnl-ws__card .pnl-ws__go { margin-top: auto; padding-top: 8px; }

.pnl-ws__pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }

.pnl-ws__pageinfo { font-size: 12.5px; color: var(--text-3); }

.pnl-ws__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; border: 1px dashed var(--border); border-radius: var(--r-lg); text-align: center; }

.pnl-ws__empty-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); }

.pnl-ws__empty b { font-size: 14.5px; font-weight: 650; }

.pnl-ws__empty i { font-style: normal; font-size: 13px; color: var(--text-3); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) { .pnl-ws__general, .pnl-ws__card { transition: none; } }

@media (max-width: 640px) {
    .pnl-ws__bar { padding-inline: 16px; }
    .pnl-ws__whotext { display: none; }
    .pnl-ws__main { padding: 28px 16px 40px; }
    .pnl-ws__title { font-size: 22px; }
    .pnl-ws__search .form-control { min-width: 0; flex: 1; }
}

/* ==========================================================================
   Tree editor (assets/tree-editor.js) — shared by the menu editor and the
   category tree. Flat rows indented by depth (logical padding so RTL mirrors),
   a drag handle, per-row move buttons, drop hints and a save toast.
   ========================================================================== */

.tree { display: flex; flex-direction: column; gap: 4px; }

.tree-node {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); position: relative; outline: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.tree-node:hover { background: var(--surface-hover); }

.tree-node:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }

.tree-depth-1 { margin-inline-start: 0; }

.tree-depth-2 { margin-inline-start: 28px; }

.tree-depth-3 { margin-inline-start: 56px; }

.tree-depth-4 { margin-inline-start: 84px; }

.tree-node.is-dragging { opacity: .45; }

.tree-node.is-drop-before::before,
.tree-node.is-drop-after::after {
    content: ""; position: absolute; inset-inline: 8px; height: 3px; border-radius: 3px;
    background: var(--accent);
}

.tree-node.is-drop-before::before { top: -4px; }

.tree-node.is-drop-after::after { bottom: -4px; }

.tree-node.is-drop-child { border-color: var(--accent); background: var(--accent-soft); }

.tree-node.is-loading { opacity: .6; }

.tree-handle {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 6px; color: var(--text-3); cursor: grab; flex: 0 0 auto;
}

.tree-handle:active { cursor: grabbing; }

.tree-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; flex: 0 0 auto;
    transition: transform .2s;
}

.tree-toggle:hover { background: var(--surface-3); color: var(--text); }

.tree-node[data-expanded="0"] .tree-toggle { transform: rotate(-90deg); }

[dir="rtl"] .tree-node[data-expanded="0"] .tree-toggle { transform: rotate(90deg); }

.tree-toggle-spacer { width: 24px; flex: 0 0 auto; }

.tree-node-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.tree-node-label { font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; }

.tree-node-label:hover { text-decoration: underline; }

.tree-node-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); min-width: 0; }

.tree-node-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-3); }

.tree-node-target, .tree-node-url { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tree-node-url { color: var(--text-3); text-decoration: none; }

.tree-node-url:hover { color: var(--accent-text); }

.tree-count { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; }

.tree-node-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.tree-node-actions .btn[disabled] { opacity: .3; pointer-events: none; }

.tree-node[data-match="1"] { border-color: var(--accent); background: var(--accent-soft); }

.tree-empty { padding: 28px 16px; text-align: center; color: var(--text-3); }

.tree.is-saving, [data-tree].is-saving .tree { opacity: .7; pointer-events: none; }

.tree-toast {
    position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 1200;
    padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--surface);
    font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none;
}

.tree-toast.is-visible { opacity: 1; transform: none; }

.tree-toast.is-error { background: var(--danger); color: #fff; }

.tree-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }

@media (max-width: 960px) { .tree-editor-grid { grid-template-columns: minmax(0, 1fr); } }

.tree-search { display: flex; align-items: center; gap: 8px; }

.tree-search .form-input { max-width: 320px; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

.seg > a, .seg > button { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 0; text-decoration: none; cursor: pointer; }

.seg > a + a, .seg > button + button { border-inline-start: 1px solid var(--border); }

.seg > [aria-pressed="true"], .seg > .is-active { background: var(--accent-soft); color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
    .tree-node, .tree-toggle, .tree-toast { transition: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Variant bulk grid (boxs/component/variant_grid.html) */

.variant-grid-table td { vertical-align: middle; }

.variant-grid-table .form-input { min-width: 90px; padding: 6px 8px; font-size: 13px; }

.variant-grid-table tr.is-dirty td { background: var(--warning-soft); }

.variant-grid-table tr.is-saved td { background: var(--success-soft); }

.variant-grid-table tr.is-error td { background: var(--danger-soft); }

.variant-grid-table tr.is-inactive td:first-child { color: var(--text-3); text-decoration: line-through; }

[data-grid-message].is-error { color: var(--danger); }

/* Quick-edit cells + saved views (table engine, Stage 4) */

.mh-editcell__trigger { background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; cursor: text; font: inherit; }

.mh-editcell__trigger:hover { background: var(--surface-3); }

.mh-editcell__input { width: 110px; padding: 5px 8px; font-size: 13px; text-align: end; }

.mh-editcell.is-saving { opacity: .6; }

.mh-editcell.is-saved .mh-editcell__trigger { background: var(--success-soft); }

.mh-editcell.is-error .mh-editcell__trigger { background: var(--danger-soft); }

.mh-views__panel { min-width: 260px; }

.mh-views__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; }

.mh-views__link { flex: 1 1 auto; padding: 6px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; }

.mh-views__link:hover { background: var(--surface-hover); }

.mh-views__link.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

.mh-views__empty { padding: 6px 8px; font-size: 12.5px; color: var(--text-3); }

.mh-views__save { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.mh-views__save .form-input { flex: 1 1 auto; }

/* Bulk dialog, progress bars, import wizard (catalog Stage 4) */

.mh-progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }

.mh-progress__bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .2s ease; }

.mh-bulk__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.mh-bulk__failures { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--text-2); max-height: 200px; overflow: auto; }

.mh-bulk__failures li { margin: 2px 0; }

.mh-tablescroll { overflow-x: auto; }

.import-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }

.import-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); }

.import-step__num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }

.import-step.is-current { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; }

.import-step.is-current .import-step__num { background: rgb(255 255 255 / 0.22); color: var(--accent-fg); }

.import-step.is-done { color: var(--accent-text); border-color: var(--accent-soft-2); }

.import-step.is-done .import-step__num { background: var(--accent-soft); color: var(--accent-text); }

.import-columns summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }

.import-columns__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin-top: 10px; }

.import-columns__row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--text-2); }

.import-columns__row code { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text); }

.import-map td, .import-review td, .import-map th, .import-review th { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--border-2); text-align: start; }

.import-map__sample { color: var(--text-3); font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.import-map .form-select { min-width: 220px; }

.import-review tr.is-error td { background: var(--danger-soft); }

/* ============================================================
   Product editor (view/item/create.html + edit.html) — one rhythm:
   20px card padding, 14px between rows, 18px column gap, 16px between
   cards; labels 12.5/600, inputs 13.5, help 11.5, card titles 14/620.
   The global input rule below (min-height 40 / 14.5px) is overridden
   here so a label and its field read as one size family.
   ============================================================ */

.page-item-form .item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

.page-item-form .item-head__title { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; line-height: 1.25; }

.page-item-form .item-head__code { font-size: 13px; color: var(--text-4); font-weight: 500; margin-inline-start: 6px; }

.page-item-form .item-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.page-item-form .item-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }

.page-item-form .item-tabs > button { flex: none; padding: 10px 4px; margin-inline-end: 20px; font-size: 13.5px; font-weight: 540; font-family: inherit; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); cursor: pointer; white-space: nowrap; }

.page-item-form .item-tabs > button:hover { color: var(--text); }

.page-item-form .item-tabs > button[data-active="1"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.page-item-form .item-stack { display: flex; flex-direction: column; gap: 16px; }

.page-item-form .item-stack > * { margin: 0; }

.page-item-form .item-card { padding: 20px; overflow: visible; }

.page-item-form .item-card + .item-card { margin-top: 16px; }

.page-item-form .item-card__title { margin: 0 0 14px; font-size: 14px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); }

.page-item-form .item-card__hint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-4); }

.page-item-form .item-card__title + .item-card__hint { margin-top: -8px; }

.page-item-form .item-card__reveal { display: none; margin: -8px 0 14px; font-size: 12px; color: var(--accent-text); }

.page-item-form[data-editor-mode="simple"] [data-mode="advanced"] .item-card__reveal { display: block; }

.page-item-form .item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }

.page-item-form .item-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-item-form .item-grid--tight { gap: 10px 14px; }

.page-item-form .item-grid--end { align-items: end; }

.page-item-form .item-grid__end { display: flex; align-items: end; min-height: 38px; }

.page-item-form .item-grid + .item-grid, .page-item-form .item-grid + .item-row, .page-item-form .item-row + .item-grid, .page-item-form .item-row + .item-row, .page-item-form .item-check-list + .item-grid, .page-item-form .item-grid + .item-check-list, .page-item-form .form-advanced-body + .form-advanced-body, .page-item-form .item-toggle-row + .item-grid { margin-top: 14px; }

.page-item-form .item-row { display: block; }

@media (max-width: 640px) { .page-item-form .item-grid, .page-item-form .item-grid--3 { grid-template-columns: 1fr; } }

.page-item-form .form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }

.page-item-form .form-input, .page-item-form .form-select, .page-item-form .form-textarea,
.page-item-form input[type="text"], .page-item-form input[type="number"], .page-item-form input[type="url"], .page-item-form input[type="email"], .page-item-form input[type="search"], .page-item-form select, .page-item-form textarea {
    min-height: 38px; padding: 8px 11px; font-size: 13.5px; line-height: 1.4; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
}

.page-item-form textarea, .page-item-form .form-textarea { min-height: 96px; resize: vertical; }

.page-item-form input[type="file"].form-input { padding: 7px 11px; line-height: 1.6; }

.page-item-form .form-help { font-size: 11.5px; line-height: 1.45; color: var(--text-3); margin-top: 5px; }

.page-item-form .item-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-size: 13.5px; line-height: 1.4; color: var(--text); }

.page-item-form .item-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }

.page-item-form .item-check__title { display: block; font-weight: 560; }

.page-item-form .item-check__help { display: block; font-size: 12px; line-height: 1.45; color: var(--text-4); margin-top: 2px; }

.page-item-form .item-check-list { display: flex; flex-direction: column; gap: 12px; }

.page-item-form .item-readouts { display: flex; gap: 12px; margin-top: 16px; }

.page-item-form .item-readout { flex: 1; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }

.page-item-form .item-readout--good { background: var(--success-soft); }

.page-item-form .item-readout__label { font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }

.page-item-form .item-readout__value { font-size: 18px; font-weight: 660; letter-spacing: -0.01em; }

.page-item-form .item-readout__value--good { color: var(--success); }

.page-item-form .item-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }

.page-item-form .item-toggle-row__title { font-size: 13.5px; font-weight: 600; }

.page-item-form .item-toggle-row__hint { font-size: 12px; color: var(--text-4); margin-top: 2px; }

.page-item-form .item-actions { display: flex; align-items: center; gap: 10px; }

.page-item-form .item-more-hint { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page-item-form .item-message { font-size: 13px; }

.page-item-form .item-danger { color: var(--danger); }

.page-item-form .item-opt-group { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }

.page-item-form .item-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.page-item-form .item-opt-row { display: flex; gap: 8px; }

.page-item-form .item-opt-row .btn { white-space: nowrap; flex: none; }

.page-item-form .item-message--above { margin-bottom: 12px; }

.page-item-form .item-opt-footer { margin-top: 10px; text-align: end; }

.page-item-form .item-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; background: var(--surface-2); }

.page-item-form .item-chip__x { background: none; border: 0; padding: 0; cursor: pointer; color: var(--danger); font-size: 14px; line-height: 1; }

.page-item-form .item-media-status { font-size: 12.5px; margin-top: 8px; color: var(--text-3); }

.page-item-form .item-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }

.page-item-form .item-media-tile { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

.page-item-form .item-media-tile__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--surface-2); }

.page-item-form .item-media-tile__bar { padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }

.page-item-form .item-media-tile__main { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }

.page-item-form .item-media-tile__remove { background: none; border: 0; padding: 0; cursor: pointer; color: var(--danger); font-size: 12px; }

/* Multi-record picker (input_multilookup.html) + lookup filters on list tables */

.form-multilookup__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.form-multilookup__chips:empty { display: none; }

.form-multilookup__chip { gap: 6px; padding-inline-end: 6px; }

.form-multilookup__remove { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--text-3); font-size: 14px; line-height: 1; }

.form-multilookup__remove:hover { color: var(--danger); }

.mh-filter__lookup { min-width: 220px; }

.mh-filter__lookup .form-lookup-control .mh-filter__control { padding-inline-end: 30px; }

.mh-filter__panel .mh-filter__lookup { width: 100%; }

.mh-filter__panel, .mh-filter__bar { overflow: visible; }

/* ============================================================
   Page + page category editors (view/page/form.html,
   view/pagecategory/form.html, assets/page-editor.js) — record page:
   header → notices → main column + side column (stacks under 960px).
   Logical properties only (RTL-safe); tokens only (theme-safe).
   ============================================================ */

.pe { max-width: 1160px; margin-inline: auto; }

.pe--narrow { max-width: 720px; }

.pe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

.pe-head__main { min-width: 0; }

.pe-head__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.pe-head__title { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }

.pe-head__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

.pe-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pe-danger { color: var(--danger); }

.pe-danger:hover { background: var(--danger-soft); color: var(--danger); }

.pe-muted { color: var(--text-3); font-size: 12.5px; }

.pe-notice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }

.pe-notice[hidden] { display: none; }

.pe-notice > svg { width: 18px; height: 18px; flex: none; }

.pe-notice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }

.pe-notice__body strong { color: var(--text); font-weight: 620; }

.pe-notice--success { background: var(--success-soft); border-color: transparent; }

.pe-notice--success > svg { color: var(--success); }

.pe-notice--info { background: var(--info-soft); border-color: transparent; }

.pe-notice--info > svg { color: var(--info); }

.pe-notice--muted { background: var(--surface-3); border-color: transparent; }

.pe-notice__close { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--text-3); cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }

.pe-notice__close:hover { color: var(--text); background: var(--surface-3); }

.pe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; border: 0; margin: 0; padding: 0; min-width: 0; }

.pe-main, .pe-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pe-card { padding: 20px; }

.pe-card--overflow { overflow: visible; }

.pe-card .form-group + .form-group { margin-top: 16px; }

.pe-card [hidden] { display: none; }

.pe-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.pe-card__title { margin: 0 0 12px; font-size: 14px; font-weight: 630; letter-spacing: -0.01em; color: var(--text); }

.pe-card__head .pe-card__title { margin-bottom: 2px; }

.pe-card__desc { margin: 0; font-size: 12.5px; color: var(--text-3); }

.pe-card__desc--lead { margin-bottom: 16px; }

.pe-title-input { font-size: 15px; padding: 11px 12px; }

.pe-input-short { max-width: 160px; }

.pe-ar-toggle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.pe-ar-toggle .btn svg { width: 14px; height: 14px; }

.pe-card .pe-ar-toggle + .form-group { margin-top: 16px; }

.pe-content { margin-top: 18px; }

.pe-content__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

.pe-content__head .form-label { margin: 0; }

.pe-content__foot { display: flex; justify-content: flex-end; margin-top: 6px; min-height: 16px; }

.pe-editor { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s, box-shadow .15s; }

.pe-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.pe-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px; border-bottom: 1px solid var(--border-2); background: var(--surface-2); border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); position: sticky; top: var(--topbar-h); z-index: 3; }

.pe-toolbar button { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 14px; font-family: inherit; cursor: pointer; }

.pe-toolbar button svg { width: 16px; height: 16px; }

.pe-toolbar button:hover { background: var(--surface-3); color: var(--text); }

.pe-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pe-toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

.pe-toolbar__block { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

.pe-toolbar__sep { width: 1px; height: 18px; background: var(--border); margin-inline: 4px; }

.pe-toolbar__spacer { flex: 1; }

.pe-rt { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 14px 16px; font-size: 14.5px; line-height: 1.7; color: var(--text); outline: none; overflow-wrap: anywhere; }

.pe-rt[hidden] { display: none; }

.pe-rt:empty::before { content: attr(data-ph); color: var(--text-4); pointer-events: none; }

.pe-rt > :first-child { margin-top: 0; }

.pe-rt p { margin: 0 0 .8em; }

.pe-rt h2 { font-size: 1.35em; font-weight: 650; margin: 1.1em 0 .45em; line-height: 1.3; }

.pe-rt h3 { font-size: 1.12em; font-weight: 630; margin: 1em 0 .4em; line-height: 1.35; }

.pe-rt ul, .pe-rt ol { margin: 0 0 .8em; padding-inline-start: 1.4em; }

.pe-rt blockquote { margin: 0 0 .8em; padding-inline-start: 12px; border-inline-start: 3px solid var(--border-strong); color: var(--text-2); }

.pe-rt a { color: var(--accent-text); text-decoration: underline; }

.pe-rt hr { border: 0; border-top: 1px solid var(--border); margin: 1.2em 0; }

.pe-rt[contenteditable="false"] { background: var(--surface-2); color: var(--text-2); }

.pe-lang-tabs[hidden] { display: none; }

.pe-serp { padding: 14px 16px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-2); }

.pe-serp__url { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; direction: ltr; text-align: start; }

.pe-serp__title { margin-top: 3px; font-size: 17px; line-height: 1.3; color: var(--info); overflow-wrap: anywhere; }

.pe-serp__desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }

.pe-serp__desc:empty { display: none; }

.pe-seo-fields { margin-top: 16px; }

.pe-counter { text-align: end; }

.pe-counter.is-over { color: var(--warning); font-weight: 600; }

.pe-radio-list { display: flex; flex-direction: column; gap: 8px; }

.pe-radio { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, background .15s; }

.pe-radio:hover { background: var(--surface-hover); }

.pe-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.pe-radio input { margin-top: 3px; accent-color: var(--accent); }

.pe-radio__title { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }

.pe-radio__hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }

.pe-affix { display: flex; align-items: stretch; direction: ltr; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }

.pe-affix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.pe-affix__prefix { display: flex; align-items: center; padding: 0 4px 0 10px; font-size: 12.5px; color: var(--text-3); background: var(--surface-2); white-space: nowrap; border-right: 1px solid var(--border-2); }

.pe-affix .pe-affix__input { border: 0; border-radius: 0; box-shadow: none; min-width: 0; }

.pe-affix .pe-affix__input:focus { box-shadow: none; }

.pe-affix:has(.is-invalid) { border-color: var(--danger); }

.pe-address-preview { margin-top: 8px; padding: 7px 10px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: var(--r-sm); overflow-wrap: anywhere; text-align: left; }

.pe-side-link { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent-text); }

.pe-side-link:hover { text-decoration: underline; }

.pe-lookup--store { margin-top: 16px; }

.pe-actions { justify-content: flex-start; padding-inline: 2px; }

.pe-dirty { font-size: 12.5px; color: var(--warning); font-weight: 600; }

.pe-dirty[hidden] { display: none; }

.pe-shortcut { margin-inline-start: auto; font-size: 11.5px; color: var(--text-4); }

.pe-dialog__lead { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }

/* Own dialog box class: Bootstrap's .modal is display:none + fixed, which
   hid the box inside the (visible) theme backdrop. */

.pe-modal { width: min(480px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }

.pe-modal .modal-footer { display: flex; justify-content: flex-end; gap: 8px; }

.pe-more { margin-top: 16px; border-top: 1px solid var(--border-2); padding-top: 12px; }

.pe-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); list-style-position: inside; }

.pe-more__body { margin-top: 12px; }

.pe-pages-summary { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.pe-pages-summary .pe-card__title { margin-bottom: 2px; }

.pe-pages-summary__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pe-pages-summary__actions .btn svg { width: 14px; height: 14px; }

.pe-builtin { margin-top: 16px; padding: 18px 20px; }

.pe-builtin__head .pe-card__title { margin-bottom: 2px; }

.pe-builtin__list { list-style: none; margin: 12px 0 0; padding: 0; }

.pe-builtin__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-2); }

.pe-builtin__main { display: flex; flex-direction: column; min-width: 0; }

.pe-builtin__title { font-size: 13.5px; font-weight: 600; color: var(--text); }

.pe-builtin__url { font-size: 12px; color: var(--text-3); text-align: start; }

.pe-builtin__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 960px) {
    .pe-layout { grid-template-columns: minmax(0, 1fr); }
    .pe-toolbar { position: static; }
}

@media (max-width: 560px) {
    .pe-head__actions { width: 100%; }
    .pe-card { padding: 16px; }
    .pe-rt { min-height: 220px; }
    .pe-shortcut { display: none; }
    .pe-builtin__row { grid-template-columns: minmax(0, 1fr); }
    .pe-builtin__actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pe-editor, .pe-radio, .pe-affix { transition: none; }
}

/* Stage 2 W3 panel shell
   ------------------------------------------------------------------------
   1. Phones + tablets (<= 1024px): the sidebar is an off-canvas drawer —
      position:fixed, full dynamic viewport height, slid out of view with
      translateX (mirrored under RTL), opened by the #wk-sidebar-toggle
      checkbox that sits BEFORE .app-frame (pages.html), closed by tapping
      the backdrop. It never keeps its height in the page flow, so content
      starts right under the top bar (the blank-page-on-phones bug).
   2. Dashboard: period switch + KPI tiles that open their filtered lists.
   Logical properties throughout, so EN and AR mirror cleanly. */

@media (max-width: 1024px) {
    .app-frame .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 70;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
        border-block: 0;
        border-inline-start: 0;
        box-shadow: var(--shadow-lg);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .25s var(--ease-out), visibility 0s linear .25s;
    }
    [dir="rtl"] .app-frame .app-sidebar { transform: translateX(105%); }
    .wk-sidebar-toggle:checked ~ .app-frame .app-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform .25s var(--ease-out), visibility 0s linear 0s;
    }
    .wk-sidebar-toggle:checked ~ .wk-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: rgb(8 8 12 / 0.45);
        cursor: pointer;
    }
    /* The page behind an open drawer does not scroll. */
    body:has(.wk-sidebar-toggle:checked) { overflow: hidden; }

    .app-frame > .app-topbar .sidebar-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: var(--r-md);
        background: transparent;
        cursor: pointer;
    }
    .app-frame > .app-topbar .sidebar-toggle-btn:hover { background: rgba(255, 255, 255, .13); }
    .app-frame > .app-topbar .sidebar-toggle-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .app-frame > .app-topbar .sidebar-toggle-btn span,
    .app-frame > .app-topbar .sidebar-toggle-btn span::before,
    .app-frame > .app-topbar .sidebar-toggle-btn span::after {
        content: "";
        display: block;
        position: relative;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }
    .app-frame > .app-topbar .sidebar-toggle-btn span::before { position: absolute; top: -6px; }
    .app-frame > .app-topbar .sidebar-toggle-btn span::after { position: absolute; top: 6px; }

    .app-frame > .app-shell { padding-block-start: 16px; }
}

@media (max-width: 560px) {
    .app-frame > .app-topbar { gap: 8px; }
    .app-frame > .app-topbar .topbar-website-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-frame .app-sidebar { transition: none; }
}

/* ---- Dashboard: period switch + KPI tiles ---- */

.dash-kpis-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-block-end: 12px;
}

.dash-kpis-title { font-weight: 640; font-size: 14.5px; }

.dash-period {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.dash-period__opt {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 560;
    color: var(--text-3);
    text-decoration: none;
    white-space: nowrap;
}

.dash-period__opt:hover { color: var(--text); }

.dash-period__opt.is-current {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-block-end: 16px;
}

.dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.dash-kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.dash-kpi__label { font-size: 13px; font-weight: 560; color: var(--text-3); }

.dash-kpi__value {
    font-size: 24px;
    font-weight: 680;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dash-kpi__unit { font-size: 13px; font-weight: 500; color: var(--text-3); }

.dash-kpi__sub { font-size: 12.5px; color: var(--text-3); }

.dash-kpi__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-block-start: auto;
    padding-block-start: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-text);
}

.dash-kpi__arrow { display: inline-flex; }

.dash-kpi__arrow svg { width: 14px; height: 14px; }

[dir="rtl"] .dash-kpi__arrow svg { transform: scaleX(-1); }

@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dash-kpi { padding: 14px; }
    .dash-kpi__value { font-size: 20px; }
    .dash-kpis-head { align-items: flex-start; }
}

/* Stage 2 W1 order detail
   Panel order page (view/order/get.html): two columns that stack under
   900px, the "Next step" workflow card, plain-sentence timeline, and the
   storefront order page's "Pay now" notice. Logical properties only. */

.od-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 18px; flex-wrap: wrap; }

.od-title { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.od-title__date { font-size: 13px; color: var(--text-4); font-weight: 500; }

.od-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.od-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 560; }

.od-badge--sm { padding: 2px 9px; font-size: 11.5px; font-weight: 540; }

.od-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.od-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }

.od-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.od-card { padding: 20px; }

.od-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 620; }

.od-muted { color: var(--text-3); font-size: 13px; margin: 0; }

.od-sub { color: var(--text-2); }

.od-strong { font-weight: 600; }

.od-link { font-weight: 560; color: var(--accent-text); }

.od-msg { display: none; margin-block: 10px; font-size: 13px; }

.od-next__hint { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }

.od-next__warn { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: var(--danger-soft); color: var(--danger); }

.od-next__form { margin: 0 0 10px; }

.od-next__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block-end: 12px; }

.od-next__fields .form-group { margin: 0; }

.od-next__cancel { margin: 14px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--border); }

.od-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }

.od-btn-danger:hover { background: var(--danger-soft); color: var(--danger); }

.od-table-wrap { overflow-x: auto; }

.od-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.od-table th { padding: 8px 10px; text-align: start; border-block-end: 1px solid var(--border); color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }

.od-table td { padding: 10px; border-block-end: 1px solid var(--border); }

.od-table .od-num { text-align: end; }

.od-line__name { font-weight: 560; }

.od-line__opt { font-size: 11.5px; color: var(--text-4); }

.od-totals { display: flex; flex-direction: column; gap: 6px; margin-block-start: 14px; margin-inline-start: auto; max-width: 280px; font-size: 13px; }

.od-totals__row { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); }

.od-totals__row--total { font-weight: 640; color: var(--text); border-block-start: 1px solid var(--border); padding-block-start: 8px; }

.od-totals__row--credit .tnum { color: var(--success, #15803d); }

.od-totals__row--note { font-size: 12.5px; color: var(--text-3); }

.od-totals__row--refund .tnum, .od-totals__row--refund { color: var(--danger, #b42318); font-weight: 600; }

/* Stage 6C: refunds card + invoice button (view/order/get.html). */

.od-invoice-btn { margin-inline-end: 4px; }

.od-refund__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.od-refund__item { padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2, #f8f9fb); }

.od-refund__line { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }

.od-refund__box > summary { list-style: none; cursor: pointer; display: inline-flex; }

.od-refund__box > summary::-webkit-details-marker { display: none; }

.od-refund__box[open] > summary { margin-block-end: 12px; }

.od-refund__form { display: flex; flex-direction: column; gap: 12px; }

.od-refund__rows { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: 10px; }

.od-refund__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }

.od-refund__row + .od-refund__row { border-block-start: 1px solid var(--border-2); }

.od-refund__row.is-done { opacity: 0.6; }

.od-refund__name { display: flex; flex-direction: column; min-width: 0; }

.od-refund__qty { display: inline-flex; align-items: center; gap: 6px; flex: none; }

.od-refund__qty .form-input { width: 76px; text-align: center; }

.od-refund__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.od-refund__opts { display: flex; flex-direction: column; gap: 10px; }

/* Stage 6D: the Google preview (boxs/component/seo_preview.html). */

.seo-preview { display: flex; flex-direction: column; gap: 6px; margin-block-end: 12px; }

.seo-preview__label { font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }

.seo-preview__card { padding: 14px 16px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); font-family: Arial, "IBM Plex Sans Arabic", sans-serif; }

.seo-preview__url { font-size: 12.5px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seo-preview__title { margin-block: 3px 2px; font-size: 18px; line-height: 1.3; color: #1a0dab; }

.seo-preview__desc { font-size: 13.5px; line-height: 1.5; color: #4d5156; }

.seo-preview__meter { display: flex; gap: 14px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.seo-preview__meter .is-over { color: var(--warning, #b45309); font-weight: 650; }

.seo-preview__hint { margin: 0; font-size: 12px; color: var(--text-3); }

.seo-fix-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 16px; padding: 14px 16px; border-inline-start: 3px solid var(--warning, #b45309); }

.seo-fix-card__text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; min-width: 240px; flex: 1; }

.seo-fix-card__text span { color: var(--text-2); }

.seo-fix-card .wk-form { margin: 0; }

.od-pill { display: inline-block; align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; }

.od-pill--pickup { background: var(--primary-soft, #e8efff); color: var(--primary, #1d4ed8); }

.od-code { display: inline-block; margin-inline-start: 4px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2, #f1f3f5); color: var(--text); font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em; }

.od-tl { list-style: none; margin: 0; padding: 0; }

.od-tl__row { display: flex; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--border); font-size: 13px; }

.od-tl__row:last-child { border-block-end: 0; }

.od-tl__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); flex-shrink: 0; margin-block-start: 5px; }

.od-tl__row--accent .od-tl__dot { background: var(--accent); }

.od-tl__row--success .od-tl__dot { background: var(--success); }

.od-tl__row--danger .od-tl__dot { background: var(--danger); }

.od-tl__body { min-width: 0; flex: 1; }

.od-tl__text { color: var(--text); }

.od-tl__note { margin-block-start: 3px; padding: 6px 9px; border-radius: 6px; background: var(--bg-2, rgba(127, 127, 127, 0.08)); color: var(--text-2); white-space: pre-line; }

.od-tl__date { margin-block-start: 2px; font-size: 11.5px; color: var(--text-4); }

.od-note { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--border); font-size: 13px; }

.od-note summary { cursor: pointer; font-weight: 560; color: var(--accent-text); }

.od-note form { margin-block-start: 10px; }

.od-stack { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.od-section { margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--border); font-size: 12.5px; }

.od-section__title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

.od-kv { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.od-kv__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.od-kv__row dt { color: var(--text-3); margin: 0; }

.od-kv__row dd { color: var(--text); margin: 0; text-align: end; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .od-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .od-next__fields { grid-template-columns: minmax(0, 1fr); }
    .od-totals { max-width: none; }
}

/* Stage 2 W2 checkout settings
   ---------------------------------------------------------------------
   Store settings → Payments: gateway toggle cards (logo + name + switch,
   view/websitesetting/gateway_cards.html). Panel → Checkout form
   (view/checkoutfield/form.html + form_row.html). Payment detail page
   (view/payment/get.html) — plain summary + platform-only Technical
   details. Logical properties throughout, so RTL needs no overrides. */

/* ---- Gateway toggle cards ---- */

.ws-gateways__help { margin: 2px 0 10px; font-size: 12.5px; color: var(--text-3); }

.ws-gateways__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

.ws-gwcard {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); cursor: pointer; min-width: 0;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.ws-gwcard:hover { border-color: var(--border-strong); }

.ws-gwcard.is-on { border-color: var(--accent); background: var(--accent-soft); }

.ws-gwcard:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.ws-gwcard__logos { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; width: 76px; flex-wrap: wrap; }

.ws-gwcard__logos img { height: 18px; width: auto; max-width: 34px; object-fit: contain; }

.ws-gwcard__glyph { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); }

.ws-gwcard__glyph svg { width: 16px; height: 16px; }

.ws-gwcard__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

.ws-gwcard__name { font-size: 13.5px; font-weight: 580; color: var(--text); overflow-wrap: anywhere; }

.ws-gwcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-4); }

.ws-gwcard__test { padding: 1px 7px; border-radius: 999px; background: var(--warning-soft, hsl(38 92% 50% / 0.14)); color: var(--warning, hsl(32 90% 38%)); font-weight: 600; }

.ws-gateways__none, .ws-gateways__empty { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }

.ws-gateways__none { padding: 9px 12px; border-radius: var(--r-md); background: var(--surface-2); }

/* ---- Checkout form ---- */

.page-checkoutform { max-width: 1160px; }

.cf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }

.cf-head__title { margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.cf-head__sub { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }

.cf-empty { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cf-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }

.cf-empty__title { margin: 6px 0 0; font-size: 16px; font-weight: 620; }

.cf-empty__text { margin: 0 0 8px; font-size: 13px; color: var(--text-3); max-width: 420px; }

.cf-groups { display: flex; flex-direction: column; gap: 16px; }

.cf-group { padding: 20px; }

.cf-group__head { margin-bottom: 12px; }

.cf-group__title { margin: 0; font-size: 15px; font-weight: 620; }

.cf-group__desc { margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); }

.cf-group__desc a { color: var(--accent-text); font-weight: 540; }

.cf-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

.cf-colhead, .cf-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 90px; align-items: center; gap: 8px 12px; padding: 10px 14px; }

.cf-colhead { background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }

.cf-row { border-top: 1px solid var(--border); position: relative; }

.cf-row.is-hidden-field .cf-row__main { opacity: .55; }

.cf-row.is-saving { opacity: .75; }

.cf-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cf-row__label { font-size: 13.5px; font-weight: 560; color: var(--text); overflow-wrap: anywhere; }

.cf-row__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-4); }

.cf-row__lock { padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); }

.cf-row__switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.cf-row__switch input:disabled { cursor: not-allowed; }

.cf-row__switchtxt { display: none; font-size: 12.5px; color: var(--text-3); }

.cf-row__actions { display: flex; justify-content: flex-end; }

.cf-row__confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--danger-soft, hsl(0 80% 50% / 0.08)); font-size: 12.5px; color: var(--text-2); }

.cf-row__confirm-actions { display: inline-flex; gap: 8px; }

.cf-row__confirm[hidden], .cf-add[hidden], .cf-add-open[hidden], .cf-list__empty[hidden], .ws-gateways__none[hidden], .page-website-settings [data-form-field][hidden] { display: none; }

.cf-row__status { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--success); display: none; }

.cf-row__status.is-visible { display: block; }

.cf-row__status.is-error { color: var(--danger); }

.cf-list__empty { margin: 0; padding: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }

.cf-add-open { margin-top: 12px; }

.cf-add { margin-top: 12px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); }

.cf-add__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }

.cf-add__req { display: flex; align-items: flex-end; }

.cf-switchline { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }

.cf-add__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

.cf-add__msg { font-size: 12.5px; color: var(--text-3); }

.cf-add__msg.is-error { color: var(--danger); }

.cf-add .form-input.is-invalid { border-color: var(--danger); }

@media (max-width: 720px) {
    .cf-colhead { display: none; }
    .cf-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cf-row__main { grid-column: 1 / -1; }
    .cf-row__switchtxt { display: inline; }
    .cf-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
    .cf-add__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Payment detail ---- */

.pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }

.pay-head__title { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.pay-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pay-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 560; }

.pay-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.pay-reason { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--text-2); }

.pay-reason strong { font-size: 13px; color: var(--text); }

.pay-reason--failed { border-color: var(--danger); background: var(--danger-soft, hsl(0 80% 50% / 0.08)); }

.pay-reason--expired { border-color: var(--warning, hsl(38 92% 50%)); background: var(--warning-soft, hsl(38 92% 50% / 0.10)); }

.pay-tech { margin-top: 18px; padding: 0; overflow: hidden; }

.pay-tech__summary { padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 600; }

.pay-tech__hint { margin-inline-start: 8px; font-size: 11.5px; font-weight: 500; color: var(--text-4); }

.pay-tech__body { padding: 0 20px 20px; }

.pay-tech__codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 0 0 14px; }

.pay-tech__codes dt { font-size: 11.5px; color: var(--text-4); }

.pay-tech__codes dd { margin: 2px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }

.pay-tech__empty { margin: 0; font-size: 13px; color: var(--text-3); }

.pay-log { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; }

.pay-log__summary { padding: 10px 14px; cursor: pointer; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pay-log__type { font-weight: 560; text-transform: capitalize; }

.pay-log__code { font-size: 11.5px; color: var(--text-3); }

.pay-log__date { margin-inline-start: auto; font-size: 11.5px; color: var(--text-4); }

.pay-log__body { padding: 0 14px 14px; font-size: 12px; }

.pay-log__url { margin-bottom: 8px; color: var(--text-3); word-break: break-all; }

.pay-log__label { margin-bottom: 4px; font-weight: 600; color: var(--text-3); }

.pay-log__pre { margin: 0 0 10px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-3); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* Stage 2 W4 product gallery */

/* Product editor: gallery tiles (drag / main star / remove / More), the
   Remove-sale action, the archived notice. Scoped to .page-item-form. */

.page-item-form .ig { position: relative; transition: box-shadow .15s ease; }

.page-item-form .ig.is-drop-target { box-shadow: 0 0 0 2px var(--accent); }

.page-item-form .ig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.page-item-form .ig-head .item-card__hint { margin-bottom: 14px; max-width: 60ch; }

.page-item-form .ig-add { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }

.page-item-form .ig-add__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.page-item-form .ig-add:focus-within { box-shadow: 0 0 0 3px var(--accent-soft-2); }

.page-item-form .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.page-item-form .ig-tile { position: relative; margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }

.page-item-form .ig-tile[draggable="true"] { cursor: grab; }

.page-item-form .ig-tile.is-dragging { opacity: .45; border-style: dashed; }

.page-item-form .ig-tile.is-main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.page-item-form .ig-tile__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); }

.page-item-form .ig-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-item-form .ig-tile__badge { display: none; position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; }

.page-item-form .ig-tile.is-main .ig-tile__badge { display: inline-block; }

.page-item-form .ig-tile__progress { display: none; position: absolute; inset-inline: 10px; inset-block-end: 10px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / .75); overflow: hidden; }

.page-item-form .ig-tile__progress > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s linear; }

.page-item-form .ig-tile.is-uploading .ig-tile__progress { display: block; }

.page-item-form .ig-tile.is-uploading .ig-tile__img { opacity: .55; }

.page-item-form .ig-tile.is-uploading .ig-tile__bar, .page-item-form .ig-tile.is-uploading .ig-more { visibility: hidden; }

.page-item-form .ig-tile__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: 12px; }

.page-item-form .ig-tile__star { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-3); font: inherit; cursor: pointer; }

.page-item-form .ig-tile__star:hover { background: var(--surface-2); color: var(--text); }

.page-item-form .ig-tile__star[aria-pressed="true"] { color: var(--accent); cursor: default; }

.page-item-form .ig-tile__star[aria-pressed="true"] .ig-tile__star-label { display: none; }

.page-item-form .ig-tile__remove { min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--danger); font: inherit; cursor: pointer; }

.page-item-form .ig-tile__remove:hover { background: var(--surface-2); }

.page-item-form .ig-tile__star:focus-visible, .page-item-form .ig-tile__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.page-item-form .ig-more { border-top: 1px solid var(--border-2, var(--border)); font-size: 12px; }

.page-item-form .ig-more > summary { padding: 6px 8px; cursor: pointer; color: var(--text-3); list-style: none; }

.page-item-form .ig-more > summary::-webkit-details-marker { display: none; }

.page-item-form .ig-more > summary::after { content: " \25BE"; }

.page-item-form .ig-more[open] > summary { color: var(--text); }

.page-item-form .ig-more__body { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 10px; }

.page-item-form .ig-more__body .form-label { margin: 4px 0 0; font-size: 11.5px; }

.page-item-form .ig-more__body .form-input { padding: 6px 8px; font-size: 12.5px; }

.page-item-form .ig-more__move { display: flex; gap: 4px; flex-wrap: wrap; }

.page-item-form .ig-more__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.page-item-form .ig-more__status { font-size: 11.5px; color: var(--success); }

.page-item-form .ig-more__status.is-error { color: var(--danger); }

.page-item-form .ig-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--border); border-radius: var(--r-md); text-align: center; font-size: 13px; color: var(--text-3); }

.page-item-form .ig-empty strong { color: var(--text); font-size: 14px; }

.page-item-form .ig-status { margin-top: 10px; font-size: 12.5px; color: var(--success); }

.page-item-form .ig-status.is-error { color: var(--danger); }

.page-item-form .ig-dialog__thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); margin-bottom: 10px; background: var(--surface-2); }

.page-item-form .item-sale { position: relative; }

.page-item-form .item-sale__remove { margin-top: 6px; color: var(--danger); }

.page-item-form .item-sale__note { color: var(--warning); font-weight: 560; }

.page-item-form .item-archived { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--warning); border-radius: var(--r-md); background: var(--warning-soft); font-size: 13.5px; }

.page-item-form .item-archived__form { display: flex; align-items: center; gap: 8px; margin: 0; }

@media (max-width: 640px) {
    .page-item-form .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-item-form .ig-add { width: 100%; justify-content: center; }
}

/* Stage 2 W5 storefront */

/* =====================================================================
   1. Storefront reboot. Storefront pages (body.sf-body) no longer load
      Bootstrap; these are the Bootstrap reboot rules the storefront markup
      relied on, at ZERO specificity (:where) so every component rule still
      wins exactly as it did over Bootstrap's element rules.
   ===================================================================== */

[hidden] { display: none !important; }

/* =====================================================================
   5. Panel — message detail (view/contactmessage/get.html).
   ===================================================================== */

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-head__title { margin: 6px 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-head__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; color: var(--text-3); }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-card { padding: 20px; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 620; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; color: var(--text); }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 16px; font-size: 13px; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-facts dt { color: var(--text-3); font-weight: 500; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-facts dd { margin: 0; overflow-wrap: anywhere; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

:is(.page-contactmessage-view, .page-abandonedcart-view) .cm-markform { margin: 0; }

@media (max-width: 900px) {
    :is(.page-contactmessage-view, .page-abandonedcart-view) .cm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Stage 6F: abandoned carts (view/abandonedcart/list.html, get.html) ---- */

.page-abandonedcart-list .ac-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }

.page-abandonedcart-list .ac-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }

.page-abandonedcart-list .ac-stat__label { font-size: 12.5px; color: var(--text-3); }

.page-abandonedcart-list .ac-stat__value { font-size: 22px; font-weight: 700; color: var(--text); }

.page-abandonedcart-list .ac-stat__value--good { color: var(--success, #027a48); }

.page-abandonedcart-list .ac-stat__sub { font-size: 12.5px; color: var(--text-3); }

.page-abandonedcart-list .ac-note { margin: 0 0 14px; padding: 12px 16px; font-size: 13.5px; }

.page-abandonedcart-view .ac-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2, #f2f4f7); color: var(--text-2, #475467); }

.page-abandonedcart-view .ac-badge--reminded { background: #eff8ff; color: #175cd3; }

.page-abandonedcart-view .ac-badge--recovered { background: #ecfdf3; color: #027a48; }

.page-abandonedcart-view .ac-lines { margin: 0; padding: 0; list-style: none; }

.page-abandonedcart-view .ac-line { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, #e4e7ec); }

.page-abandonedcart-view .ac-line__img { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f2f4f7); }

.page-abandonedcart-view .ac-line__img img { width: 100%; height: 100%; object-fit: cover; }

.page-abandonedcart-view .ac-line__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }

.page-abandonedcart-view .ac-line__name { font-weight: 600; color: var(--text); text-decoration: none; }

.page-abandonedcart-view .ac-line__opts, .page-abandonedcart-view .ac-line__qty { font-size: 12.5px; color: var(--text-3); }

.page-abandonedcart-view .ac-line__total { font-weight: 600; font-size: 13.5px; white-space: nowrap; }

.page-abandonedcart-view .ac-subtotal { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 14px; }

.page-abandonedcart-view .ac-timeline__title { margin-top: 22px; }

.page-abandonedcart-view .ac-timeline { margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--border, #e4e7ec); }

.page-abandonedcart-view .ac-timeline li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 0 0 12px 16px; padding-inline-start: 16px; padding-inline-end: 0; font-size: 13px; }

.page-abandonedcart-view .ac-timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface, #fff); border: 2px solid var(--primary, #1d4ed8); }

.page-abandonedcart-view .ac-timeline__when { color: var(--text-3); }

.page-abandonedcart-view .ac-auto { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2, #f2f4f7); font-size: 13px; color: var(--text-2, #475467); }

.page-abandonedcart-view .ac-remind { margin: 0; }

.page-abandonedcart-view .ac-help { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); }

.page-abandonedcart-view .ac-recovered { margin: 0; font-size: 13.5px; }

@media (max-width: 720px) {
    .page-abandonedcart-list .ac-stats { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Stage 3 B search account
   - .cmdk*          command palette (boxs/component/command_palette.html)
   - .phone-field*   phone + searchable dial code (boxs/inputs/phone.html)
   - .pacct*         My account (view/user/account.html)
   - .pforgot*, .pnl-login__forgot  panel forgot / reset password
   Tokens only; logical properties (RTL-safe); 44px touch targets.
   ===================================================================== */

/* ---- Command palette ---- */

.cmdk { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }

.cmdk[hidden] { display: none; }

.cmdk__backdrop { position: absolute; inset: 0; background: rgb(10 10 14 / 0.45); }

.cmdk__dialog {
    position: relative; width: 100%; max-width: 640px; max-height: 72vh;
    display: flex; flex-direction: column;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); overflow: hidden;
    animation: cmdk-in .16s var(--ease-out);
}

@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }

html.cmdk-open { overflow: hidden; }

.cmdk__srtitle, .phone-field__srlabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cmdk__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-2); }

.cmdk__bar-ico { display: inline-flex; color: var(--text-3); flex: none; }

.cmdk__input {
    flex: 1; min-width: 0; min-height: 40px; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 15.5px; color: var(--text);
}

.cmdk__input::placeholder { color: var(--text-4); }

.cmdk__busy {
    width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--accent);
    animation: cmdk-spin .7s linear infinite;
}

.cmdk__busy[hidden] { display: none; }

@keyframes cmdk-spin { to { transform: rotate(360deg); } }

.cmdk__esc {
    flex: none; min-height: 30px; padding: 4px 9px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3);
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}

.cmdk__esc:hover { color: var(--text); }

.cmdk__body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; }

.cmdk__group + .cmdk__group { margin-top: 6px; }

.cmdk__group-label { padding: 10px 10px 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .03em; color: var(--text-3); }

.cmdk__opt {
    display: flex; align-items: center; gap: 11px;
    min-height: 44px; padding: 7px 10px; border-radius: var(--r-md);
    cursor: pointer; color: var(--text);
}

.cmdk__opt.is-active { background: var(--accent-soft); }

.cmdk__opt-ico {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2);
}

.cmdk__opt.is-active .cmdk__opt-ico { background: var(--surface); color: var(--accent-text); }

.cmdk__opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.cmdk__opt-label { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmdk__opt-hint { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmdk__tag {
    flex: none; padding: 3px 8px; border-radius: 999px;
    background: var(--warning-soft); color: var(--warning); font-size: 11px; font-weight: 700;
}

.cmdk__switch {
    flex: none; min-height: 32px; padding: 5px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--accent); background: var(--surface); color: var(--accent-text);
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

.cmdk__switch:hover { background: var(--accent); color: var(--accent-fg); }

.cmdk__msg { margin: 0; padding: 22px 14px; text-align: center; font-size: 13px; color: var(--text-3); }

.cmdk__msg[hidden] { display: none; }

.cmdk__foot {
    display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 14px;
    border-top: 1px solid var(--border-2); background: var(--surface-2);
    font-size: 11.5px; color: var(--text-3);
}

.cmdk__foot kbd {
    display: inline-block; min-width: 20px; padding: 1px 5px; margin-inline-end: 3px;
    border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px;
    background: var(--surface); font: inherit; font-size: 11px; text-align: center; color: var(--text-2);
}

@media (max-width: 600px) {
    .cmdk { padding: 8px; }
    .cmdk__dialog { max-height: calc(100vh - 16px); }
    .cmdk__foot { display: none; }
    .cmdk__switch { display: none; }
}

/* ---- Phone field ---- */

.phone-field { position: relative; }

.phone-field__row { display: flex; align-items: stretch; gap: 6px; }

.phone-field__code {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    min-width: 88px; min-height: 40px; padding: 0 10px;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text);
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

.phone-field__code:hover { background: var(--surface-hover); }

.phone-field__code[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.phone-field__code svg { width: 14px; height: 14px; color: var(--text-3); }

.phone-field__number { flex: 1; min-width: 0; }

.phone-field__pop {
    position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% - 2px);
    width: min(340px, 100%); min-width: 260px; padding: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.phone-field__pop[hidden] { display: none; }

.phone-field__list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }

.phone-field__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm);
    font-size: 13px; cursor: pointer;
}

.phone-field__opt[hidden] { display: none; }

.phone-field__opt.is-active, .phone-field__opt:hover { background: var(--accent-soft); }

.phone-field__opt[aria-selected="true"] .phone-field__opt-name { font-weight: 650; }

.phone-field__opt-dial { color: var(--text-3); font-variant-numeric: tabular-nums; }

.phone-field__none { margin: 8px 4px 2px; font-size: 12.5px; color: var(--text-3); }

/* ---- My account ---- */

.pacct { max-width: 1160px; }

.pacct__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }

.pacct__avatar {
    width: 52px; height: 52px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
    font-size: 18px; font-weight: 700;
}

.pacct__who { min-width: 0; }

.pacct__title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.pacct__sub { margin: 3px 0 0; font-size: 13px; color: var(--text-3); }

.pacct__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }

.pacct__nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--topbar-h) + 16px); }

.pacct__tab {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-md);
    background: transparent; color: var(--text-2); text-align: start;
    font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}

.pacct__tab:hover { background: var(--surface-3); color: var(--text); }

.pacct__tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--accent-text); font-weight: 650; box-shadow: var(--shadow-xs); }

.pacct__tab svg { width: 16px; height: 16px; flex: none; }

.pacct__panel[hidden] { display: none; }

.pacct__panel + .pacct__panel { margin-top: 16px; }

.pacct__card { padding: 22px; overflow: visible; }

.pacct__card-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-2); }

.pacct__card-title { margin: 0; font-size: 15px; font-weight: 650; }

.pacct__card-desc { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

.pacct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }

.pacct__grid .form-group { margin-bottom: 0; }

.pacct__stack { display: grid; gap: 16px; max-width: 440px; }

.pacct__stack .form-group { margin-bottom: 0; }

.pacct__readonly { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--text-3); }

.pacct__readonly b { color: var(--text); font-weight: 600; }

.pacct__actions { background: transparent; }

.pacct__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }

.pacct__facts dt { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }

.pacct__facts dd { margin: 0; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }

.pacct__note { margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); }

.pacct__choice { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }

.pacct__choice-help { margin: -2px 0 10px; }

.pacct__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }

.pacct__option {
    display: flex; align-items: flex-start; gap: 10px;
    min-height: 44px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.pacct__option:hover { border-color: var(--accent); }

.pacct__option.is-current { border-color: var(--accent); background: var(--accent-soft); }

.pacct__option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.pacct__option input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }

.pacct__option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pacct__option-text b { font-size: 13.5px; font-weight: 650; color: var(--text); }

.pacct__option-text i { font-style: normal; font-size: 12px; color: var(--text-3); }

.pacct__choice[aria-busy="true"] { opacity: .6; pointer-events: none; }

.pacct__status { min-height: 18px; margin: 0; font-size: 12.5px; color: var(--success); }

.pacct__status.is-error { color: var(--danger); }

.pacct__strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }

.pacct__strength span { height: 4px; border-radius: 2px; background: var(--border); transition: background .2s var(--ease); }

.pacct__strength[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }

.pacct__strength[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }

.pacct__strength[data-level="3"] span:nth-child(-n+3) { background: var(--info); }

.pacct__strength[data-level="4"] span { background: var(--success); }

.pacct__show { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--text-2); cursor: pointer; }

.pacct__show input { accent-color: var(--accent); }

@media (max-width: 900px) {
    .pacct__layout { grid-template-columns: minmax(0, 1fr); }
    .pacct__nav { position: static; flex-direction: row; overflow-x: auto; }
    .pacct__tab { width: auto; flex: none; }
    .pacct__grid, .pacct__facts, .pacct__options { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Panel forgot / reset password (on the .pnl-login card) ---- */

.pnl-login__forgot {
    display: inline-block; margin-top: 8px; padding: 4px 0;
    font-size: 12.5px; font-weight: 600; color: var(--accent-text); text-decoration: none;
}

.pnl-login__forgot:hover { text-decoration: underline; }

.pforgot__lang {
    margin-inline-start: auto; min-width: 36px; min-height: 36px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    font-size: 12.5px; font-weight: 650; color: var(--text-2); text-decoration: none;
}

.pforgot__lang:hover { color: var(--text); background: var(--surface-3); }

.pforgot__done { outline: none; }

.pforgot__done[hidden] { display: none; }

.pforgot__done-ico {
    width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px;
    border-radius: 50%; background: var(--success-soft); color: var(--success);
}

.pforgot__done-ico.is-warn { background: var(--warning-soft); color: var(--warning); }

.pforgot__hint { margin: -12px 0 18px; font-size: 12.5px; color: var(--text-3); }

.pforgot__paused {
    display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0; padding: 10px 12px;
    border-radius: var(--r-md); background: var(--info-soft); color: var(--text-2); font-size: 12.5px;
}

.pforgot__paused svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--info); }

.pforgot__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 600; }

.pforgot__back:hover { color: var(--text); }

.pforgot__back svg { width: 14px; height: 14px; }

[dir="rtl"] .pforgot__back svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
    .cmdk__dialog { animation: none; }
    .cmdk__busy { animation-duration: 2s; }
    .pacct__tab, .pacct__option, .pacct__strength span { transition: none; }
}

/* =====================================================================
   Stage 3 A mode engine — Easy / Pro panel shell
   ---------------------------------------------------------------------
   1. Form + detail grids: columns come from --cols (set by the engines),
      ONE column under 640px (inline grid styles could not be overridden).
   2. List tables: header row that wraps, the "More" menus (Pro actions in
      Easy mode), the "Columns" chooser, 36px row-action targets.
   3. Topbar: menu <button>, palette search button, Easy · Pro switch.
   4. Home (store workspace): store card, publication, tip, email stats.
   Logical properties throughout, so EN and AR mirror cleanly.
   ===================================================================== */

/* ---- 1. Form + detail grids ---- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    gap: 14px 18px;
}

.form-grid__cell { min-width: 0; }

.form-grid__cell.is-full { grid-column: 1 / -1; }

.wk-form > .card + .card { margin-block-start: 16px; }

.detail-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.detail-card__head { padding: 14px 18px; border-block-end: 1px solid var(--border); font-size: 14px; font-weight: 600; }

.detail-card__sub { font-weight: 400; color: var(--text-4); font-size: 12.5px; margin-inline-start: 8px; }

.detail-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 16px 20px;
}

.detail-grid__cell { min-width: 0; }

.detail-grid__cell.is-full { grid-column: 1 / -1; }

.detail-grid__label { font-size: 11px; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; margin-block-end: 5px; }

[dir="rtl"] .detail-grid__label { text-transform: none; letter-spacing: 0; font-size: 12px; }

.detail-grid__value { font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }

.detail-grid__value.is-mono { font-size: 12.5px; }

.detail-grid__badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 540; }

.detail-card__more { border-block-start: 1px solid var(--border); }

.detail-card__more > summary {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding-inline: 18px;
    list-style: none; cursor: pointer;
    font-size: 13px; font-weight: 560; color: var(--text-3);
}

.detail-card__more > summary::-webkit-details-marker { display: none; }

.detail-card__more > summary::before { content: "›"; display: inline-block; transition: transform .2s var(--ease-out, ease); }

[dir="rtl"] .detail-card__more > summary::before { transform: scaleX(-1); }

.detail-card__more[open] > summary::before { transform: rotate(90deg); }

.detail-card__more > summary:hover { color: var(--text); }

.detail-card__more .detail-grid { padding-block-start: 4px; }

@media (max-width: 640px) {
    .form-grid,
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
    .detail-grid { padding: 14px; }
}

/* ---- 2. List tables ---- */

.mh-table-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 12px 16px; margin-block-end: 18px;
}

.mh-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

details.mh-more { position: relative; }

details.mh-more > summary { list-style: none; cursor: pointer; }

details.mh-more > summary::-webkit-details-marker { display: none; }

.mh-more__toggle {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding-inline: 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-2);
    font-size: 13px; font-weight: 540;
}

.mh-more--bulk .mh-more__toggle { height: 32px; border-radius: var(--r-sm); font-size: 12.5px; }

details.mh-more[open] > .mh-more__toggle { border-color: var(--accent); color: var(--text); }

.mh-more__menu {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 45;
    display: flex; flex-direction: column;
    min-width: 210px; max-width: min(320px, calc(100vw - 32px));
    padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .14));
}

.mh-more__item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 40px; padding: 8px 10px;
    border: 0; border-radius: var(--r-md); background: transparent;
    font: inherit; font-size: 13px; color: var(--text-2); text-align: start; text-decoration: none; cursor: pointer;
}

.mh-more__item:hover,
.mh-more__item:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }

.mh-cols__panel { min-width: 230px; gap: 4px; }

.mh-cols__hint { font-size: 12px; color: var(--text-3); margin-block-end: 4px; }

.mh-cols__opt { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; color: var(--text-2); cursor: pointer; }

.mh-cols__opt input { width: 16px; height: 16px; accent-color: var(--accent); }

.mh-cols__opt.is-locked { color: var(--text-4); cursor: default; }

.mh-cols[aria-busy="true"] .mh-cols__panel { opacity: .6; pointer-events: none; }

.mh-iconbtn { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }

.mh-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 640px) {
    .mh-table-head { flex-direction: column; align-items: stretch; }
    .mh-table-actions > .mh-btn { flex: 1 1 auto; justify-content: center; }
    .mh-more__menu { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ---- 3. Topbar ---- */

.app-topbar .sidebar-toggle-btn { padding: 0; font: inherit; color: inherit; }

.app-topbar .breadcrumb .crumb-link { text-decoration: none; font-weight: 500; }

.app-topbar .breadcrumb .crumb-link:hover { text-decoration: underline; }

button.topbar-search { font: inherit; cursor: pointer; text-align: start; }

.topbar-search__label { flex: 1; }

.topbar-search__kbd {
    font: inherit; font-size: 11px; line-height: 1;
    padding: 3px 6px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .22); color: inherit; opacity: .8;
}

@media (max-width: 760px) {
    .app-frame > .app-topbar .topbar-search { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 40px; height: 40px; padding: 0; }
    .app-frame > .app-topbar .topbar-search__label,
    .app-frame > .app-topbar .topbar-search__kbd { display: none; }
}

.topbar-menu--user { width: 272px; }

.topbar-menu--user .topbar-menu-item { min-height: 40px; }

.topbar-mode { padding: 12px 14px; border-block-end: 1px solid var(--border); }

.topbar-mode__label { font-size: 11.5px; font-weight: 600; color: var(--text-4); margin-block-end: 7px; }

.topbar-mode__seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}

.topbar-mode__opt {
    min-height: 34px; border: 0; border-radius: calc(var(--r-md) - 2px); background: transparent;
    font: inherit; font-size: 13px; font-weight: 560; color: var(--text-3); cursor: pointer;
    transition: background .2s var(--ease-out, ease), color .2s var(--ease-out, ease);
}

.topbar-mode__opt:hover { color: var(--text); }

.topbar-mode__opt.is-current { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08)); }

.topbar-mode__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.topbar-mode__hint { margin-block-start: 7px; font-size: 11.5px; line-height: 1.45; color: var(--text-4); }

.topbar-mode[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Sidebar: the Easy-mode "More tools" section sits apart from the rest. */

.app-sidebar .mh-navsection[data-section="more"] { margin-block-start: 8px; padding-block-start: 4px; border-block-start: 1px dashed var(--border); }

/* ---- 4. Home ---- */

.home-head { margin-block-end: 20px; }

.home-head__title { margin: 0 0 4px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.home-head__sub { margin: 0; color: var(--text-3); font-size: 13.5px; }

.home-card { padding: 18px 20px; margin-block-end: 16px; }

.home-stack > .home-card { margin-block-end: 18px; }

.home-card__title { font-weight: 640; font-size: 14.5px; }

.home-card__hint { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.home-card__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: var(--r-md);
    background: var(--accent-soft); color: var(--accent-text);
}

.home-card__icon--lg { width: 40px; height: 40px; }

.home-store { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }

.home-store__text { flex: 1 1 220px; min-width: 0; }

.home-store__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 640; font-size: 15px; }

.home-store__url { margin-block-start: 3px; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }

.home-store__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.home-publish { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

.home-publish:not(.is-live) { border-inline-start: 3px solid var(--warning); }

.home-publish__text { flex: 1 1 320px; min-width: 0; }

.home-publish__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Delete this store (store hub, super level only) */
.home-danger { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-block-start: 24px; border-inline-start: 3px solid var(--danger); }

.home-danger__text { flex: 1 1 320px; min-width: 0; }

.home-danger .home-card__title { margin: 0; }

.home-danger__live { color: var(--danger); font-weight: 600; }

.home-danger__list { list-style: none; margin: 10px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.home-danger__item { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--danger-soft); font-size: 12.5px; }

.home-danger__item strong { font-weight: 640; font-variant-numeric: tabular-nums; }

.home-danger__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.home-danger__actions .btn { min-height: 40px; }

.home-blockers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.home-blockers__link { display: flex; align-items: center; gap: 9px; min-height: 32px; font-size: 13px; color: inherit; text-decoration: none; border-radius: var(--r-sm); }

.home-blockers__link:hover { color: var(--accent-text); }

.home-blockers__dot { display: inline-flex; flex: none; width: 18px; height: 18px; border-radius: 99px; border: 1.5px dashed var(--warning); }

.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-block-start: 14px; }

.home-stat { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); }

.home-stat__label { font-size: 12px; color: var(--text-3); }

.home-stat__value { margin-block-start: 2px; font-size: 20px; font-weight: 640; }

.home-stat__value.is-success { color: var(--success); }

.home-stat__value.is-danger { color: var(--danger); }

.home-tip { margin-block-end: 16px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px; background: var(--accent-soft); border-color: transparent; }

.home-tip__text { flex: 1 1 280px; min-width: 0; }

.home-tip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 640px) {
    .home-card { padding: 16px; }
    .home-store__actions,
    .home-publish__actions,
    .home-tip__actions { width: 100%; }
    .home-store__actions > .btn,
    .home-publish__actions form,
    .home-publish__actions .btn { flex: 1 1 auto; }
    .home-publish__actions .btn { width: 100%; justify-content: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-mode__opt,
    .detail-card__more > summary::before { transition: none; }
}

/* Stage 3 C plain language — shared feedback (assets/panel-ui.js), the
   Orders status tabs, the fixed Header / Footer menu cards and the RTL
   rule for directional icons. Logical properties only. */

.panel-ui-backdrop { z-index: 1300; }

.panel-ui-open { overflow: hidden; }

.panel-ui-dialog .modal-body { display: flex; flex-direction: column; gap: 8px; }

.panel-ui-dialog__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }

.panel-ui-dialog__error { margin: 0; }

.panel-ui-dialog .modal-footer { flex-wrap: wrap; }

.panel-ui-dialog .modal-footer .btn { min-height: 40px; }

.panel-toasts {
    position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 1400;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    max-width: min(420px, calc(100vw - 32px)); pointer-events: none;
}

.panel-toast {
    display: flex; align-items: flex-start; gap: 10px; padding-block: 10px;
    padding-inline: 16px 10px; border-radius: var(--r-md); background: var(--text); color: var(--surface);
    font-size: 13px; font-weight: 600; line-height: 1.45; box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto;
}

.panel-toast.is-visible { opacity: 1; transform: none; }

.panel-toast--success { background: var(--success); color: #fff; }

.panel-toast--error { background: var(--danger); color: #fff; }

.panel-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.panel-toast__close {
    flex: none; width: 24px; height: 24px; margin-block-start: -2px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .8;
}

.panel-toast__close:hover, .panel-toast__close:focus-visible { opacity: 1; background: rgb(255 255 255 / 0.16); }

/* Directional icons (back / next / indent arrows) point the reading way. */

[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Orders status tabs (view/order/list.html). */

.order-tabs {
    display: flex; gap: 4px; margin-block: 4px 14px; border-block-end: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
}

.order-tabs::-webkit-scrollbar { display: none; }

.order-tabs__tab {
    flex: none; padding: 9px 12px; margin-block-end: -1px; border-block-end: 2px solid transparent;
    font-size: 13px; font-weight: 600; color: var(--text-3); text-decoration: none; white-space: nowrap;
    transition: color .2s, border-color .2s;
}

.order-tabs__tab:hover { color: var(--text); }

.order-tabs__tab.is-active { color: var(--accent-text); border-block-end-color: var(--accent); }

.order-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }

/* Menus: the two fixed menu cards (view/menu/list.html). */

.menu-slots-head { margin-block-end: 16px; }

.menu-slots-head__title { margin: 0; font-size: 21px; font-weight: 680; letter-spacing: -0.02em; }

.menu-slots-head__hint { margin: 3px 0 0; font-size: 13px; color: var(--text-3); }

.menu-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-block-end: 24px; }

.menu-slot { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px 20px; }

.menu-slot__title { margin: 0; font-size: 16px; font-weight: 640; }

.menu-slot__hint { margin: 4px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.5; }

.menu-slot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }

.menu-slot__count { font-size: 12.5px; color: var(--text-3); }

.menu-slot__empty { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }

.menu-slot__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.menu-slot__actions .wk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 640px) {
    .panel-toasts { inset-inline: 16px; inset-block-end: 16px; max-width: none; align-items: stretch; }
    .menu-slot__actions .btn { width: 100%; justify-content: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-toast, .order-tabs__tab { transition: none; }
}

/* Stage 3 D settings pages
   Store settings filter box + "Pages & policies" link list, the folded test
   payment methods, the Pages "Store pages" card, and the Website edit header
   (name + one status badge) with its template / address cards. Logical
   properties only (RTL-safe). */

.page-website-settings .ws-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.page-website-settings .ws-head__title { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.ws-filter { position: relative; flex: 0 1 320px; min-width: 220px; }

.ws-filter__icon { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-3); pointer-events: none; }

.ws-filter__input.form-input { width: 100%; padding-inline-start: 34px; }

.ws-filter__none { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--text-3); }

.page-website-settings.has-js.is-filtering .settings-panel { display: block; }

.page-website-settings.has-js.is-filtering .settings-panel + .settings-panel { margin-top: 18px; }

.page-website-settings.is-filtering .settings-nav a.is-active { background: transparent; }

.page-website-settings .ws-filter-miss { display: none !important; }

.ws-pages { padding: 20px; }

.ws-pages__list { list-style: none; margin: 10px 0 0; padding: 0; }

.ws-pages__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 11px 0; border-top: 1px solid var(--border-2); }

.ws-pages__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }

.ws-pages__title { font-size: 13.5px; font-weight: 600; color: var(--text); }

.ws-pages__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.ws-pages__foot { margin: 6px 0 0; }

.ws-gateways__tests { margin-top: 10px; }

.pe-store { padding: 18px 20px; margin-bottom: 16px; }

.pe-store .pe-builtin__head .pe-card__title { margin-bottom: 2px; }

.pe-builtin__state { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.pe-archived-note { margin: 10px 0 0; }

.pe-store-address { margin: 0 0 6px; font-size: 13px; font-weight: 560; color: var(--text); overflow-wrap: anywhere; }

.page-website-edit .we-head { margin-bottom: 16px; }

.page-website-edit .we-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

.page-website-edit .we-head__title { margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-website-edit .we-head__hint { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

.page-website-edit .we-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }

.page-website-edit .we-card { padding: 16px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.page-website-edit .we-card__title { font-size: 14px; font-weight: 640; }

.page-website-edit .we-card__value { margin: 0; font-size: 13.5px; font-weight: 560; color: var(--text); }

.page-website-edit .we-card__muted { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--text-3); }

.page-website-edit .we-card__warn { margin: 0; font-size: 13px; color: var(--warning); }

.page-website-edit .we-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.page-website-edit .we-card__chips a { text-decoration: none; }

.page-website-edit .we-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
    .ws-filter { flex: 1 1 100%; }
    .ws-pages__row .btn { width: 100%; justify-content: center; }
}

/* Stage 4 Z3 designer studio */

/* assets/designer-studio.js: Draft / Live pill, undo + redo, History side
   panel, Publish, and the preview size + language bar. 44px targets,
   logical properties only, tokens only. */

.wk-ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.wk-ds-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.wk-ds-group--status { gap: 8px; min-width: 0; }

.wk-ds-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); border: 1px solid transparent; white-space: nowrap; }

.wk-ds-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.wk-ds-pill--live { background: var(--success-soft); border-color: var(--success-soft); }

.wk-ds-pill--live .wk-ds-pill__dot { background: var(--success); }

.wk-ds-pill--draft { background: var(--warning-soft); border-color: var(--warning-soft); }

.wk-ds-pill--draft .wk-ds-pill__dot { background: var(--warning); }

.wk-ds-status { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

.wk-ds-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }

.wk-ds-btn:hover:not(:disabled) { background: var(--surface-hover); }

.wk-ds-btn:disabled { color: var(--text-4); cursor: not-allowed; background: var(--surface-2); }

.wk-ds-btn--ghost { border-color: transparent; background: transparent; }

.wk-ds-btn--ghost:hover:not(:disabled) { background: var(--surface-3); }

.wk-ds-icon { width: 18px; height: 18px; flex: 0 0 auto; }

[dir="rtl"] .wk-ds-icon--flip { transform: scaleX(-1); }

.wk-ds-touch { min-height: 44px; }

.wk-ds-publish[aria-busy="true"] { cursor: progress; opacity: .85; }

.wk-ds-btn:focus-visible,
.wk-ds-seg__btn:focus-visible,
.wk-ds-touch:focus-visible,
.wk-ds-drawer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Preview bar: device widths + preview language (above the preview frame). */

.wk-ds-previewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }

.wk-ds-seg { display: inline-flex; align-items: stretch; padding: 3px; gap: 2px; border-radius: var(--r-lg); background: var(--surface-3); border: 1px solid var(--border); }

.wk-ds-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; color: var(--text-2); background: transparent; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }

.wk-ds-seg__btn:hover { color: var(--text); }

.wk-ds-seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

.wk-ds-stage { position: relative; height: clamp(420px, 72vh, 900px); background: var(--surface-3); }

.wk-ds-stage > .wk-designer-preview { position: absolute; top: 0; left: 50%; transform-origin: top center; transition: width .2s var(--ease); }

.wk-ds-stage[data-device="tablet"] > .wk-designer-preview,
.wk-ds-stage[data-device="phone"] > .wk-designer-preview { box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-md); }

.wk-ds-tip { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }

/* History side panel. */

.wk-ds-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1250; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg); padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }

.wk-ds-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; }

.wk-ds-drawer__title { margin: 0; font-size: 16px; font-weight: 640; color: var(--text); }

.wk-ds-drawer__hint { margin: 0; padding: 0 16px 12px; font-size: 12.5px; color: var(--text-3); border-block-end: 1px solid var(--border-2); }

.wk-ds-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; }

.wk-ds-drawer__state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 8px; text-align: center; font-size: 13px; color: var(--text-2); }

.wk-ds-drawer__state p { margin: 0; }

.wk-ds-versions { list-style: none; margin: 0; padding: 0; }

.wk-ds-version { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-block-end: 1px solid var(--border-2); }

.wk-ds-version:last-child { border-block-end: 0; }

.wk-ds-version.is-current { background: var(--accent-soft); margin-inline: -16px; padding-inline: 16px; }

.wk-ds-version__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.wk-ds-version__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.wk-ds-version__date { font-size: 13.5px; font-weight: 600; color: var(--text); }

.wk-ds-version__user { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }

.wk-ds-version__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.wk-ds-version__actions .btn { flex: 1 1 auto; }

.wk-ds-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }

.wk-ds-tag--live { background: var(--success-soft); color: var(--text); }

@media (max-width: 640px) {
    .wk-ds-seg__text { display: none; }
    .wk-ds-status { max-width: 100%; }
    .wk-ds-stage { height: clamp(360px, 64vh, 720px); }
}

@media (prefers-reduced-motion: reduce) {
    .wk-ds-btn, .wk-ds-seg__btn, .wk-ds-stage > .wk-designer-preview { transition: none; }
}

/* Stage 4 Z4 slides theme
   Designer SLIDES dialog (assets/designer-slides.js, .dsl-*) and the
   Designer THEME side panel (assets/designer-theme.js, .dth-*). Panel
   tokens only, logical properties only (RTL-safe), 44px touch targets,
   visible focus, reduced motion respected. */

.dsl-backdrop { z-index: 1200; }

.dsl-dialog {
    width: min(760px, 100%); max-height: min(88vh, 920px); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); overflow: hidden;
}

.dsl-head {
    display: flex; align-items: center; gap: 10px; padding-block: 12px;
    padding-inline: 20px 12px; border-block-end: 1px solid var(--border-2);
}

.dsl-head__text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

.dsl-title { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -0.01em; }

.dsl-count { font-size: 12.5px; color: var(--text-3); }

.dsl-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-inline-start: -8px; }

.dsl-close { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

.dsl-body { flex: 1 1 auto; min-height: 180px; overflow-y: auto; padding: 18px 20px; }

.dsl-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-block-start: 1px solid var(--border-2); background: var(--surface-2);
}

.dsl-foot:empty { display: none; }

.dsl-foot .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }

.dsl-foot__note { margin: 0; margin-inline-end: auto; font-size: 12.5px; color: var(--text-3); }

.dsl-live, .dsl-visually-hidden, .dsl-row .dsl-switch__text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dsl-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* list */

.dsl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.dsl-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .2s, box-shadow .2s, opacity .2s;
}

.dsl-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

.dsl-row.is-dragging { opacity: .55; border-style: dashed; box-shadow: var(--shadow-md); }

.dsl-row__grip { flex: none; display: inline-flex; color: var(--text-4); cursor: grab; }

.dsl-row__grip:active { cursor: grabbing; }

.dsl-thumb {
    flex: none; width: 116px; aspect-ratio: 16 / 6; display: grid; place-items: center; overflow: hidden;
    border-radius: var(--r-md); background: var(--surface-3); color: var(--text-4);
}

.dsl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dsl-thumb.is-empty { border: 1px dashed var(--border-strong); }

.dsl-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.dsl-row__title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dsl-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--text-3); }

.dsl-pill { padding: 2px 9px; }

.dsl-row__link { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dsl-row__actions { flex: none; display: flex; align-items: center; gap: 2px; }

.dsl-row__actions .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-2); }

.dsl-row__actions .btn-icon:disabled { opacity: .35; }

.dsl-row__actions .btn-secondary { min-height: 36px; margin-inline: 4px; }

.dsl-row__delete:hover, .dsl-row__delete:focus-visible { color: var(--danger); }

.dsl-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 13.5px; font-weight: 560; color: var(--text); }

.dsl-row .dsl-switch { margin-inline-end: 6px; }

/* states */

.dsl-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; }

.dsl-state__title { margin: 0; font-size: 15px; font-weight: 640; color: var(--text); }

.dsl-state__text { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.55; color: var(--text-3); }

.dsl-state .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-block-start: 6px; }

.dsl-empty__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }

.dsl-empty__icon svg { width: 24px; height: 24px; }

.dsl-spinner {
    width: 22px; height: 22px; border: 2px solid var(--border); border-block-start-color: var(--accent);
    border-radius: 50%; animation: dsl-spin .8s linear infinite;
}

@keyframes dsl-spin { to { transform: rotate(360deg); } }

/* form */

.dsl-form { display: flex; flex-direction: column; gap: 16px; }

.dsl-field { margin: 0; }

.dsl-field .form-input { width: 100%; }

.dsl-field textarea.form-input { min-height: 64px; resize: vertical; }

.dsl-field.has-error .form-input, .dsl-field .form-input.is-invalid { border-color: var(--danger); }

.dsl-error { display: block; margin-block-start: 4px; }

.dsl-media__tile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.dsl-media__preview {
    position: relative; flex: 0 1 320px; min-width: 200px; aspect-ratio: 16 / 6; display: grid; place-items: center;
    overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}

.dsl-media.is-empty .dsl-media__preview { border-style: dashed; border-color: var(--border-strong); }

.dsl-field.has-error .dsl-media__preview { border-color: var(--danger); }

.dsl-media__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dsl-media .media-tile-empty { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }

.dsl-media .media-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.dsl-media .media-tile-actions .btn { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; }

.dsl-media label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.dsl-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.dsl-lang { min-width: 0; margin: 0; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border-2); border-radius: var(--r-lg); }

.dsl-lang__title { padding-inline: 6px; font-size: 12px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.dsl-link { display: flex; flex-direction: column; gap: 8px; }

.dsl-picker { position: relative; }

.dsl-picker[hidden], .dsl-picker__chosen[hidden], .dsl-picker__search[hidden], .dsl-link__url[hidden] { display: none; }

.dsl-picker__chosen {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
    padding-block: 4px; padding-inline: 12px 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}

.dsl-picker__name { min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dsl-picker__results {
    position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 5; max-height: 240px; overflow-y: auto;
    list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-md);
}

.dsl-picker__option { padding: 10px 10px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; }

.dsl-picker__option:hover, .dsl-picker__option.is-active { background: var(--accent-soft); color: var(--accent-text); }

.dsl-picker__empty { padding: 10px; font-size: 13px; color: var(--text-3); }

.dsl-more { padding-inline: 14px; border: 1px solid var(--border-2); border-radius: var(--r-lg); }

.dsl-more[open] { padding-block-end: 12px; }

.dsl-more__summary { display: flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }

.dsl-more__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.dsl-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block-end: 6px; }

.dsl-visible { display: flex; flex-direction: column; gap: 2px; }

/* THEME panel */

.dth-trigger { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.dth-trigger__dots { display: inline-flex; padding-inline-start: 4px; }

.dth-trigger__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }

.dth-trigger__dot + .dth-trigger__dot { margin-inline-start: -4px; }

.dth-panel {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1100; width: min(390px, 100vw);
    display: flex; flex-direction: column; background: var(--surface);
    border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg);
}

.dth-panel[hidden] { display: none; }

.dth-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px;
    padding-inline: 20px 12px; border-block-end: 1px solid var(--border-2);
}

.dth-title { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -0.01em; }

.dth-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

.dth-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 20px; }

.dth-foot { padding: 10px 20px; border-block-start: 1px solid var(--border-2); background: var(--surface-2); }

.dth-status { margin: 0; font-size: 12.5px; color: var(--text-3); }

.dth-status.is-saving { color: var(--text-2); }

.dth-status.is-error { color: var(--danger); font-weight: 600; }

.dth-intro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.dth-state-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 8px; text-align: center; font-size: 13px; color: var(--text-3); }

.dth-state-box p { margin: 0; }

.dth-statecard {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-lg);
}

.dth-statecard.is-own { background: var(--success-soft); border-color: transparent; }

.dth-statecard__template { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }

.dth-statecard__help { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

.dth-reset { min-height: 40px; margin-inline-start: -8px; }

.dth-section { display: flex; flex-direction: column; gap: 10px; }

.dth-section__title { margin: 0; font-size: 12px; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

.dth-section__help { margin: -4px 0 0; font-size: 12.5px; color: var(--text-3); }

.dth-color { display: grid; grid-template-columns: 44px minmax(0, 1fr) 100px; align-items: center; gap: 4px 12px; }

.dth-color__picker {
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer;
}

.dth-color__picker::-webkit-color-swatch-wrapper { padding: 4px; }

.dth-color__picker::-webkit-color-swatch { border: 0; border-radius: 6px; }

.dth-color__picker::-moz-color-swatch { border: 0; border-radius: 6px; }

.dth-color__picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dth-color__text { min-width: 0; }

.dth-color__label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }

.dth-color__help { display: block; font-size: 12px; line-height: 1.4; color: var(--text-3); }

.dth-hex.form-input { width: 100%; min-height: 40px; padding-inline: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.dth-hex.is-invalid { border-color: var(--danger); }

.dth-color__error { grid-column: 2 / -1; }

.dth-contrast {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--r-md);
    background: var(--warning-soft); font-size: 12.5px; line-height: 1.45; color: var(--text);
}

.dth-contrast[hidden] { display: none; }

.dth-contrast svg { flex: none; color: var(--warning); }

.dth-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.dth-font {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 12px;
    border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color .2s, background .2s;
}

.dth-font:hover { border-color: var(--border-strong); }

.dth-font:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }

.dth-font:has(:focus-visible), .dth-size:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.dth-font__input, .dth-size__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.dth-font__sample { font-size: 20px; line-height: 1.25; color: var(--text); }

.dth-font__name { font-size: 12px; color: var(--text-3); }

.dth-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }

.dth-size {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px;
    font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s;
}

.dth-size + .dth-size { border-inline-start: 1px solid var(--border); }

.dth-size:has(:checked) { background: var(--accent); color: var(--accent-fg); }

.dth-logo-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

.dth-logo-link svg { width: 15px; height: 15px; }

[dir="rtl"] .dth-logo-link svg { transform: scaleX(-1); }

@media (max-width: 640px) {
    .dsl-backdrop { padding: 0; align-items: end; }
    .dsl-dialog { max-height: 94vh; border-end-start-radius: 0; border-end-end-radius: 0; }
    .dsl-body { padding: 14px 16px; }
    .dsl-row { flex-wrap: wrap; }
    .dsl-thumb { width: 88px; }
    .dsl-row__main { flex-basis: calc(100% - 140px); }
    .dsl-row__actions { width: 100%; justify-content: flex-end; }
    .dsl-langs, .dsl-dates { grid-template-columns: minmax(0, 1fr); }
    .dsl-foot .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .dth-panel { width: 100vw; }
    .dth-color { grid-template-columns: 44px minmax(0, 1fr) 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .dsl-row, .dth-font, .dth-size { transition: none; }
    .dsl-spinner { animation-duration: 2.4s; }
}

/* Stage 4 Z2 designer inspector
   Section list | live preview | section settings (view/designer/build.html +
   assets/designer-builder.js) and the Designer launcher (view/designer/build.php).
   Logical properties only (RTL-safe); colours through theme tokens. */

.wkd-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }

.wkd-top__intro { min-width: 0; }

.wkd-top__title { margin: 6px 0 0; font-size: 20px; font-weight: 660; letter-spacing: -0.01em; color: var(--text); }

.wkd-top__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }

.wkd-top__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.wkd-slot:empty { display: none; }

.wkd-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.wkd-status { font-size: 12.5px; color: var(--text-3); }

.wkd-switchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }

.wkd-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.wkd-switch__label { font-size: 12.5px; color: var(--text-3); }

.wkd-switch .form-select { min-width: 190px; }

.wkd-switch__templates { font-size: 12.5px; color: var(--color-primary); text-decoration: none; }

.wkd-switch__templates:hover { text-decoration: underline; }

.wkd-scope-alert { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; font-size: 12.5px; }

.wkd-panes { display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(290px, 340px); gap: 16px; align-items: start; }

.wkd-pane { padding: 12px; min-width: 0; }

.wkd-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }

.wkd-pane__title { margin: 0; font-size: 12px; font-weight: 640; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.wkd-pane__hint { margin: 8px 0 10px; font-size: 11.5px; color: var(--text-4); }

.wkd-add { width: 100%; justify-content: center; white-space: nowrap; }

.wkd-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

.wkd-pane--inspector { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

.wkd-preview { border: 1px solid var(--border); border-radius: var(--r-md, 10px); overflow: hidden; background: var(--surface-2); }

.wkd-preview__frame { display: block; width: 100%; height: max(560px, calc(100vh - 230px)); border: 0; background: var(--surface); }

@media (max-width: 1180px) {
    .wkd-panes { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
    .wkd-pane--inspector { grid-column: 1 / -1; position: static; max-height: none; }
}

@media (max-width: 760px) {
    .wkd-panes { grid-template-columns: minmax(0, 1fr); }
    .wkd-preview__frame { height: 460px; }
    .wkd-switch .form-select { min-width: 0; width: 100%; }
}

/* Inspector */

.wkd-inspector { display: flex; flex-direction: column; }

.wkd-insp__empty { font-size: 12.5px; color: var(--text-4); padding: 6px 2px; }

.wkd-insp__head { margin: 0 0 12px; }

.wkd-insp__kind { font-size: 15px; font-weight: 680; color: var(--text); letter-spacing: -.01em; }

.wkd-insp__design { margin-top: 2px; font-size: 12px; color: var(--text-3); }

.wkd-insp__note { margin: 8px 0 0; padding: 7px 10px; border-radius: var(--r-sm, 6px); background: var(--surface-2); font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

.wkd-insp__hidden { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--warning); border-radius: var(--r-md, 10px); background: var(--warning-soft); }

.wkd-insp__hidden .wkd-note { margin: 0; }

.wkd-section { box-shadow: var(--shadow-xs); }

.wkd-field { margin: 0 0 14px; }

.wkd-field:last-child { margin-bottom: 4px; }

.wkd-field__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }

.wkd-field__label { margin: 0; }

.wkd-field__badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.wkd-field__help { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text-4); }

.wkd-field--inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.wkd-field--inline .wkd-field__head { margin: 0; }

.wkd-field.has-error .form-input, .wkd-field.has-error .form-select { border-color: var(--danger); }

.wkd-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.6; }

.wkd-badge--warn { background: var(--warning-soft); color: var(--warning); }

.wkd-badge[hidden] { display: none; }

.wkd-linkbtn { border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--color-primary); cursor: pointer; text-align: start; }

.wkd-linkbtn:hover { text-decoration: underline; }

.wkd-linkbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

.wkd-linkbtn--danger { color: var(--danger); }

.wkd-note { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--text-3); }

.wkd-note--auto { padding: 8px 10px; border-radius: var(--r-sm, 6px); background: var(--info-soft); color: var(--text-2); }

.wkd-code { margin: 10px 0 0; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--text-4); overflow-wrap: anywhere; }

.wkd-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; }

.wkd-change__hint { flex: 1 1 140px; font-size: 11.5px; color: var(--text-3); }

.wkd-operator { border-style: dashed !important; }

/* Bilingual twin */

.wkd-twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }

.wkd-twin__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.wkd-twin__tag { font-size: 10.5px; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: .03em; }

.wkd-twin__copy { align-self: flex-start; }

.wkd-twin__copy[hidden] { display: none; }

.wkd-textarea { min-height: 64px; resize: vertical; }

/* Media tile */

.wkd-media { display: flex; flex-direction: column; gap: 8px; }

.wkd-media__frame { position: relative; aspect-ratio: 16 / 9; max-height: 170px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r-md, 10px); overflow: hidden; background: var(--surface-2); }

.wkd-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wkd-media__img[hidden] { display: none; }

.wkd-media__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-4); }

.wkd-media__empty[hidden] { display: none; }

.wkd-media__empty svg { width: 22px; height: 22px; }

.wkd-media__busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 80%, transparent); font-size: 12px; font-weight: 600; color: var(--text-2); }

.wkd-media__busy[hidden] { display: none; }

.wkd-media__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.wkd-media__actions .wkd-linkbtn[hidden] { display: none; }

.wkd-media.is-busy .wkd-media__frame { border-style: solid; }

.wkd-lib { max-width: 860px; }

.wkd-lib__status { margin: 0 0 12px; font-size: 13px; color: var(--text-3); }

.wkd-lib__status[hidden] { display: none; }

.wkd-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.wkd-lib__item { padding: 0; border: 1px solid var(--border); border-radius: var(--r-md, 10px); overflow: hidden; background: var(--surface-2); cursor: pointer; aspect-ratio: 1; transition: border-color .2s, box-shadow .2s; }

.wkd-lib__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wkd-lib__item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.wkd-lib__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Record search + chooser */

.wkd-search { display: flex; flex-direction: column; gap: 6px; }

.wkd-search[hidden] { display: none; }

.wkd-search__status { margin: 0; font-size: 11.5px; color: var(--text-4); }

.wkd-search__status[hidden] { display: none; }

.wkd-search__list { list-style: none; margin: 0; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface); }

.wkd-search__list[hidden] { display: none; }

.wkd-search__item { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 5px; cursor: pointer; font-size: 12.5px; color: var(--text); }

.wkd-search__item:hover, .wkd-search__item.is-active { background: var(--accent-soft, var(--surface-2)); }

.wkd-search__sub { font-size: 11px; color: var(--text-4); }

.wkd-chooser__chosen { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface-2); }

.wkd-chooser__chosen[hidden] { display: none; }

.wkd-chooser__name { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* Link picker */

.wkd-link { display: flex; flex-direction: column; gap: 6px; }

.wkd-link__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface-2); }

.wkd-link__opens { min-width: 0; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }

.wkd-link__opens.is-empty { color: var(--text-4); }

.wkd-link > .wkd-linkbtn[hidden] { display: none; }

.wkd-link__panel { padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); }

.wkd-link__panel[hidden] { display: none; }

.wkd-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }

.wkd-tabs__tab { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 11.5px; color: var(--text-2); cursor: pointer; }

.wkd-tabs__tab.is-active { border-color: var(--color-primary); background: var(--color-primary); color: var(--on-primary, #fff); }

.wkd-tabs__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.wkd-linklist { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }

.wkd-linklist__opt { padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); text-align: start; cursor: pointer; }

.wkd-linklist__opt:hover, .wkd-linklist__opt:focus-visible { background: var(--accent-soft, var(--surface-2)); outline: none; }

.wkd-web { display: flex; flex-direction: column; gap: 6px; }

.wkd-web__use { align-self: flex-start; }

/* Icon picker */

.wkd-icon { display: flex; flex-direction: column; gap: 6px; }

.wkd-icon__current { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: start; }

.wkd-icon__current:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.wkd-icon__preview { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); color: var(--color-primary); flex: 0 0 auto; }

.wkd-icon__label { flex: 1 1 auto; min-width: 0; }

.wkd-icon__action { font-size: 11.5px; font-weight: 600; color: var(--color-primary); }

.wkd-icon__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); }

.wkd-icon__grid[hidden] { display: none; }

.wkd-icon__opt { display: inline-flex; align-items: center; justify-content: center; height: 38px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); cursor: pointer; }

.wkd-icon__opt:hover, .wkd-icon__opt.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--accent-soft, var(--surface-2)); }

.wkd-icon__opt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.wkd-icon__opt--none { grid-column: 1 / -1; height: 30px; font: inherit; font-size: 11.5px; }

/* Toggle, colour, number, menu, bindings */

.wkd-toggle { display: inline-flex; align-items: center; gap: 8px; }

.wkd-toggle__input { width: 34px; height: 20px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

.wkd-toggle__state { font-size: 12px; color: var(--text-3); }

.wkd-number { max-width: 120px; }

.wkd-color { display: flex; align-items: center; gap: 10px; }

.wkd-color__input { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface); }

.wkd-menu-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }

.wkd-menu-row .wkd-field__help { margin: 0; }

.wkd-menu-row__link { font-size: 11px; font-weight: 640; white-space: nowrap; color: var(--color-primary); text-decoration: none; }

.wkd-bind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

.wkd-bind[hidden] { display: none; }

.wkd-bind .form-select, .wkd-bind .form-input { flex: 1 1 110px; min-width: 0; }

.wkd-bind__label { font-size: 11px; color: var(--text-4); }

.wkd-bind__toggle { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-4); }

.wkd-bind__toggle.is-on { color: var(--color-primary); }

/* Choices (radio cards) */

.wkd-choice { display: flex; flex-direction: column; gap: 6px; }

.wkd-choice__opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px); background: var(--surface); font-size: 12.5px; color: var(--text); cursor: pointer; }

.wkd-choice__opt:has(input:checked) { border-color: var(--color-primary); background: var(--accent-soft, var(--surface-2)); }

.wkd-choice__opt input { margin: 0; accent-color: var(--color-primary); }

.wkd-choice__extra { margin-top: 8px; }

.wkd-choice__extra[hidden] { display: none; }

/* Repeaters */

.wkd-rep { margin: 0 0 14px; }

.wkd-rep__head { margin-bottom: 6px; }

.wkd-rep__list { display: flex; flex-direction: column; gap: 10px; }

.wkd-rep__row { padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface-2); }

.wkd-rep__row .wkd-field { margin-bottom: 10px; }

.wkd-rep__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }

.wkd-rep__rowtitle { font-size: 12px; font-weight: 640; color: var(--text-2); }

.wkd-rep__tools { display: inline-flex; gap: 3px; }

.wkd-rep__tools button:disabled { opacity: .4; cursor: default; }

.wkd-rep__add { margin-top: 10px; }

.wkd-rep__add[hidden] { display: none; }

.wkd-slides-btn { margin-top: 2px; }

/* Gallery: "Browse all designs" */

.wkd-gal-more__toggle { margin: 4px 0 16px; }

.wkd-gal-more__hint { margin: 0 0 12px; font-size: 12px; color: var(--text-3); }

.wkd-gal-more[hidden] { display: none; }

/* Launcher (panel/designer) */

.wkd-launch { max-width: 1160px; }

.wkd-launch__title { margin: 0 0 4px; font-size: 20px; font-weight: 660; }

.wkd-launch__hint { margin: 0 0 20px; font-size: 13.5px; color: var(--text-3); }

.wkd-launch__section { margin: 26px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }

.wkd-launch__store { padding: 16px 18px; margin: 0 0 16px; }

.wkd-launch__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }

.wkd-launch__store-name { margin: 0; font-size: 15px; font-weight: 640; }

.wkd-launch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.wkd-launch__card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, box-shadow .2s; }

.wkd-launch__card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.wkd-launch__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft, var(--surface-2)); color: var(--color-primary); }

.wkd-launch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wkd-launch__name { font-size: 13.5px; font-weight: 640; }

.wkd-launch__desc { font-size: 12px; line-height: 1.4; color: var(--text-3); }

.wkd-launch__more { margin-top: 14px; }

.wkd-launch__more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-primary); }

.wkd-launch__group { margin-top: 12px; }

.wkd-launch__group-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }

.wkd-launch__links { display: flex; flex-wrap: wrap; gap: 8px; }

.wkd-launch__path { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 420px; }

.wkd-launch__path-row { display: flex; gap: 8px; }

.wkd-launch__path-row .form-input { flex: 1 1 auto; min-width: 0; }

.wkd-launch__empty { font-size: 13px; color: var(--text-4); }

@media (prefers-reduced-motion: reduce) {
    .wkd-launch__card, .wkd-lib__item { transition: none; }
}

.wkd-card-badge { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-size: 10px; font-weight: 600; line-height: 1.7; }

.wkd-card-badge--every { background: var(--accent-soft, var(--surface-2)); color: var(--color-primary); }

.wkd-switch .form-select { width: auto; }

.wk-designer-card:not(:hover):not(:focus-within):not([aria-current]) .wkd-card__extra { display: none; }

.od-badge--quick { background: var(--accent-soft, var(--surface-2)); color: var(--accent-text, var(--color-primary)); }

.od-badge--quick svg { flex: none; }

/* Stage 5 O1 start — "Start my store" (view/panel/start.html), the Home
   start card and the "Continue setup" line. Logical properties only. */

.sst { max-width: 820px; margin-inline: auto; }

.sst-head { margin-block-end: 14px; }

.sst-head__title { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }

.sst-head__sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }

.sst-stepper { margin-block-end: 18px; }

.sst-form, .sst-ready { display: flex; flex-direction: column; gap: 14px; }

.sst-card { padding: 20px 22px; }

.sst-card__title { margin: 0; font-size: 15px; font-weight: 640; color: var(--text); }

.sst-card__hint { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.sst-optional { margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); font-size: 11px; font-weight: 550; vertical-align: middle; }

.sst-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

.sst .form-group.is-invalid .form-input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.sst svg { width: 16px; height: 16px; flex: none; }

/* What do you sell? — radio cards */

.sst-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.sst-pack { position: relative; display: block; margin: 0; cursor: pointer; }

.sst-pack__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.sst-pack__card {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; height: 100%;
    padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); transition: border-color .2s, background .2s, box-shadow .2s;
}

.sst-pack:hover .sst-pack__card { border-color: var(--accent); }

.sst-pack__input:checked + .sst-pack__card { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }

.sst-pack__input:focus-visible + .sst-pack__card { outline: 2px solid var(--accent); outline-offset: 2px; }

.sst-pack__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-2); }

.sst-pack__input:checked + .sst-pack__card .sst-pack__icon { background: var(--accent); color: var(--accent-fg); }

.sst-pack__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-inline-end: 18px; }

.sst-pack__name { font-size: 14px; font-weight: 620; color: var(--text); }

.sst-pack__eg { font-size: 12px; line-height: 1.4; color: var(--text-3); }

.sst-pack__tick { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: none; color: var(--accent-text); }

.sst-pack__tick svg { width: 14px; height: 14px; }

.sst-pack__input:checked + .sst-pack__card .sst-pack__tick { display: inline-flex; }

.sst-packs.is-invalid .sst-pack__card { border-color: var(--danger); }

.sst-samples { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 14px; font-size: 13px; color: var(--text-2); cursor: pointer; min-height: 32px; }

.sst-samples input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* The free web address: label field + fixed platform suffix */

.sst-addr { display: flex; align-items: stretch; max-width: 560px; }

.sst-addr .sst-addr__input { flex: 1 1 auto; min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; font-weight: 600; }

.sst-addr__suffix {
    display: inline-flex; align-items: center; padding-inline: 12px; border: 1px solid var(--border-strong);
    border-inline-start: 0; border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md);
    background: var(--surface-3); color: var(--text-2); font-size: 13.5px; white-space: nowrap;
}

.sst-addr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 24px; margin-block-start: 6px; font-size: 12.5px; color: var(--text-3); }

.sst-addr-status__ok { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--success); font-weight: 600; }

.sst-addr-status__ok svg { width: 14px; height: 14px; }

.sst-addr-status__ok strong { font-weight: 650; }

.sst-addr-status.is-taken .sst-addr-status__bad { color: var(--danger); font-weight: 600; }

.sst-addr-status__use { min-height: 32px; }

/* Actions */

.sst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 4px 8px; }

.sst-actions__main { min-height: 44px; padding: 12px 22px; font-size: 14px; }

.sst-actions .btn { min-height: 44px; }

.sst-actions__note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-3); }

.sst-actions__note svg { width: 14px; height: 14px; }

/* Screen 2 — logo, colour, selling */

.sst-logo .media-tile { max-width: 460px; }

.sst-logo .media-tile-actions label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.sst-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.sst-swatch { position: relative; display: inline-flex; align-items: center; margin: 0; cursor: pointer; }

.sst-swatch__dot {
    position: relative; display: inline-block; width: 36px; height: 36px; border-radius: 999px;
    border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); transition: box-shadow .2s;
}

.sst-swatch input:checked + .sst-swatch__dot { box-shadow: 0 0 0 2px var(--text); }

.sst-swatch input:focus-visible + .sst-swatch__dot { outline: 2px solid var(--accent); outline-offset: 3px; }

.sst-swatch__dot--custom { background: var(--surface-3); border-style: dashed; border-color: var(--border-strong); }

.sst-swatch__dot--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.sst-swatch__label { margin-inline-start: 8px; font-size: 12.5px; font-weight: 550; color: var(--text-2); }

.sst-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px 14px; border-block-end: 1px solid var(--border-2); }

.sst-toggle-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.sst-toggle-row__label { display: block; float: none; width: auto; margin: 0; padding: 0; font-size: 13.5px; font-weight: 620; color: var(--text); }

.sst-toggle-row__hint { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

.sst-switch { position: relative; display: inline-flex; flex: none; width: 46px; height: 26px; }

.sst-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.sst-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .2s; }

.sst-switch__track::after {
    content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 20px; height: 20px;
    border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s;
}

.sst-switch input:checked + .sst-switch__track { background: var(--accent); }

.sst-switch input:checked + .sst-switch__track::after { transform: translateX(20px); }

[dir="rtl"] .sst-switch input:checked + .sst-switch__track::after { transform: translateX(-20px); }

.sst-switch input:focus-visible + .sst-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

.sst-choice { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 14px 0 0; border: 0; }

.sst-segment { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }

.sst-segment__opt { margin: 0; cursor: pointer; }

.sst-segment__opt span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong);
    border-radius: var(--r-md); background: var(--surface); font-size: 13px; font-weight: 550; color: var(--text-2);
    transition: border-color .2s, background .2s, color .2s;
}

.sst-segment__opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 640; }

.sst-segment__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Screen 3 — ready */

.sst-ready__hero, .sst-already { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }

.sst-ready__check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 999px; background: var(--success-soft); color: var(--success); }

.sst-ready__check svg { width: 22px; height: 22px; }

.sst-ready__text, .sst-already__text { flex: 1 1 240px; min-width: 0; }

.sst-ready__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 17px; font-weight: 660; }

.sst-ready__host { margin-block-start: 3px; font-size: 13px; color: var(--text-3); text-align: start; }

.sst-made { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }

.sst-made li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }

.sst-made__tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--success-soft); color: var(--success); }

.sst-made__tick svg { width: 13px; height: 13px; }

.sst-next { display: grid; gap: 8px; margin: 12px 0 0; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

.sst-next__look { margin-block: 14px 0; }

.sst-next__look a { color: var(--accent-text); font-weight: 600; }

.sst-already__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }

/* Home — the "Start my store" card and the "Continue setup" line */

.sst-home {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-block-end: 16px; padding: 22px 24px;
    border: 1px solid var(--accent-soft-2); border-radius: var(--r-lg); background: var(--accent-soft);
}

.sst-home__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: var(--r-lg); background: var(--accent); color: var(--accent-fg); }

.sst-home__icon svg { width: 24px; height: 24px; }

.sst-home__text { flex: 1 1 280px; min-width: 0; }

.sst-home__title { margin: 0; font-size: 17px; font-weight: 670; color: var(--text); }

.sst-home__sub { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.sst-home__points { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }

.sst-home__points li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--text-2); }

.sst-home__points svg { width: 14px; height: 14px; color: var(--success); }

.sst-home__cta { min-height: 44px; padding: 12px 22px; font-size: 14px; }

.sst-resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-end: 16px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs);
}

.sst-resume__bar { display: inline-block; flex: none; width: 120px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }

.sst-resume__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

.sst-resume__text { flex: 1 1 200px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }

.sst-resume .btn { min-height: 36px; }

@media (max-width: 640px) {
    .sst-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .sst-card { padding: 16px; }
    .sst-actions .btn { width: 100%; }
    .sst-actions__note { width: 100%; justify-content: center; }
    .sst-toggle-row { align-items: flex-start; }
    .sst-home__cta, .sst-resume .btn { width: 100%; }
    .sst-addr__suffix { padding-inline: 8px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .sst-pack__card, .sst-swatch__dot, .sst-switch__track, .sst-switch__track::after, .sst-segment__opt span { transition: none; }
}

/* Stage 5 O1 end */

/* Stage 5 O2 guide — setup guide card, "You are live" card, web address
   connection card, help drawer, welcome dialog, Getting started page.
   Logical properties only; tokens only. */

.guide { padding: 18px 20px; scroll-margin-block-start: 80px; }

.guide__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.guide__title { margin: 0; font-size: 15px; font-weight: 660; }

.guide__count { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

.guide__bar { height: 8px; margin-block: 10px 14px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }

.guide__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }

.guide__next { padding: 14px 16px; border-radius: var(--r-lg); background: var(--accent-soft); border-inline-start: 3px solid var(--accent); }

.guide__next--ready { background: var(--success-soft); border-inline-start-color: var(--success); }

.guide__next-eyebrow { font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }

.guide__next-label { margin-block-start: 2px; font-size: 15px; font-weight: 660; color: var(--text); }

.guide__next-reason { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.guide__next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }

.guide__next-actions .btn { min-height: 36px; }

.guide__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }

.guide__item { display: flex; align-items: flex-start; gap: 11px; padding-block: 10px; border-block-end: 1px solid var(--border-2); }

.guide__item:last-child { border-block-end: 0; }

.guide__item.is-locked { opacity: .65; }

.guide__dot { flex: none; width: 20px; height: 20px; margin-block-start: 1px; border-radius: 99px; border: 1.5px dashed var(--border-strong); }

.guide__tick { display: inline-flex; flex: none; width: 20px; height: 20px; border-radius: 99px; align-items: center; justify-content: center; background: var(--success-soft); color: var(--success); }

.guide__tick svg { width: 12px; height: 12px; }

.guide__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.guide__label { font-size: 13.5px; font-weight: 580; color: var(--text); }

.guide__item.is-done .guide__label { font-weight: 500; color: var(--text-3); }

.guide__reason { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

.guide__status { margin: 4px 0 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }

.guide__status--success { color: var(--success); }

.guide__status--warning { color: var(--warning); }

.guide__status--danger { color: var(--danger); }

.guide__status--muted { color: var(--text-3); }

.guide__actions { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

.guide__edit { flex: none; font-size: 12.5px; color: var(--accent-text); text-decoration: none; }

.guide__edit:hover, .guide__edit:focus-visible { text-decoration: underline; }

.guide__done { margin-block-start: 8px; border-block-start: 1px solid var(--border-2); padding-block-start: 8px; }

.guide__done-summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding-block: 4px; list-style-position: inside; }

.guide__done-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.guide__list--done { margin-block-start: 4px; }

.guide--live { border-inline-start: 3px solid var(--success); }

.guide-live { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.guide-live__text { flex: 1 1 280px; min-width: 0; }

.guide-live__title { margin: 8px 0 4px; font-size: 19px; font-weight: 680; letter-spacing: -0.01em; }

.guide-live__hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.guide-live__link { display: flex; gap: 8px; margin-block-start: 14px; }

.guide-live__url { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }

.guide-live__url:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.guide-live__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }

.guide-live__qr { flex: none; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

.guide-live__qr-img { display: block; width: 148px; height: 148px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; }

.guide-live__qr-img svg { display: block; width: 100%; height: 100%; }

.guide-live__qr-caption { max-width: 170px; font-size: 12px; line-height: 1.4; color: var(--text-3); }

.guide-live__qr-download { font-size: 12.5px; color: var(--accent-text); }

.guide-live__foot { display: flex; justify-content: flex-end; margin-block-start: 8px; }

.dconn { padding: 18px 20px; margin-block-end: 16px; }

.dconn[data-state="waiting"] { border-inline-start: 3px solid var(--warning); }

.dconn[data-state="ssl"] { border-inline-start: 3px solid var(--danger); }

.dconn[data-state="ok"] { border-inline-start: 3px solid var(--success); }

.dconn__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.dconn__eyebrow { font-size: 12px; color: var(--text-3); }

.dconn__host { font-size: 16px; font-weight: 660; overflow-wrap: anywhere; }

.dconn__detail { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 72ch; }

.dconn__when { margin: 4px 0 0; font-size: 12px; color: var(--text-4); }

.dconn__records { margin-block-start: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-2); }

.dconn__records-title { font-size: 13px; font-weight: 620; margin-block-end: 8px; }

.dconn__table-wrap { overflow-x: auto; }

.dconn__table { width: 100%; border-collapse: collapse; font-size: 13px; }

.dconn__table th { text-align: start; font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 6px 8px; border-block-end: 1px solid var(--border); }

.dconn__table td { padding: 8px; vertical-align: top; border-block-end: 1px solid var(--border-2); }

.dconn__table tr:last-child td { border-block-end: 0; }

.dconn__value { font-size: 12.5px; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-3); overflow-wrap: anywhere; }

.dconn__note { display: block; margin-block-start: 3px; font-size: 11.5px; color: var(--text-3); }

.dconn__hint { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }

.dconn__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }

.dconn__actions:empty { display: none; }

.panel-help-btn svg { display: block; }

.help-drawer { position: fixed; inset: 0; z-index: 1200; }

.help-drawer__backdrop { position: absolute; inset: 0; background: rgb(8 8 12 / 0.35); opacity: 0; transition: opacity .2s; }

.help-drawer__panel {
    position: absolute; inset-block: 0; inset-inline-end: 0; width: min(380px, 100vw);
    display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--border);
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .2s; outline: none;
}

[dir="rtl"] .help-drawer__panel { transform: translateX(-100%); }

.help-drawer.is-open .help-drawer__backdrop { opacity: 1; }

.help-drawer.is-open .help-drawer__panel { transform: none; }

.help-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-block-end: 1px solid var(--border-2); }

.help-drawer__title { margin: 0; font-size: 16px; font-weight: 660; }

.help-drawer__close { width: 36px; height: 36px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; }

.help-drawer__close:hover, .help-drawer__close:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }

.help-drawer__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }

.help-drawer__chip { min-height: 32px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }

.help-drawer__chip[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }

.help-drawer__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.help-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; }

.help-drawer__topic-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 650; }

.help-drawer__tips { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

.help-drawer__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-block-start: 1px solid var(--border-2); }

.help-drawer-open { overflow: hidden; }

.welcome-dialog { z-index: 1250; }

.welcome-dialog__box { width: min(500px, 100%); }

.welcome-dialog__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.welcome-dialog__title { margin: 8px 0 0; font-size: 19px; font-weight: 680; letter-spacing: -0.01em; }

.welcome-dialog__intro { margin: 0; font-size: 13.5px; color: var(--text-2); }

.welcome-dialog__steps { margin: 8px 0 4px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; }

.welcome-dialog__steps li b { display: block; font-size: 13.5px; font-weight: 640; color: var(--text); }

.welcome-dialog__steps li span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.welcome-dialog__hint { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

.welcome-dialog__foot { flex-wrap: wrap; }

.welcome-dialog__foot .btn { min-height: 40px; }

.page-start-guide .sg-guide { margin-block-end: 22px; }

.page-start-guide .sg-choose { margin-block-end: 22px; }

.sg-section-title { margin: 6px 0 12px; font-size: 15px; font-weight: 660; }

.sg-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.sg-step__card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; }

a.sg-step__card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

.sg-step__num { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; font-size: 12px; font-weight: 700; color: var(--text-4); }

.sg-step__title { font-size: 14px; font-weight: 650; }

.sg-step__text { font-size: 12.5px; line-height: 1.5; color: var(--text-3); flex: 1 1 auto; }

.sg-step__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }

.sg-step__cta svg { width: 14px; height: 14px; }

.sg-topics { padding: 6px 18px; margin-block-end: 16px; }

.sg-topic { border-block-end: 1px solid var(--border-2); }

.sg-topic:last-child { border-block-end: 0; }

.sg-topic__summary { cursor: pointer; padding-block: 12px; font-size: 14px; font-weight: 620; }

.sg-topic__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.sg-topic__tips { margin: 0 0 14px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 72ch; }

.sg-foot { margin: 0; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 640px) {
    .guide, .dconn { padding: 16px; }
    .guide__item { flex-wrap: wrap; }
    .guide__actions { width: 100%; padding-inline-start: 31px; }
    .guide__actions .btn, .guide__next-actions .btn { min-height: 44px; }
    .guide-live__link { flex-direction: column; }
    .guide-live__link .btn, .guide-live__actions .btn { width: 100%; justify-content: center; min-height: 44px; }
    .guide-live__qr { width: 100%; }
    .dconn__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .help-drawer__panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
    .guide__bar-fill, .help-drawer__backdrop, .help-drawer__panel, .help-drawer__chip, .sg-step__card { transition: none; }
}

/* Stage 5 O2 guide end */

/* Stage 5 O3 wizard — launch wizard payments step + provisioning report,
   sample-products banner, card-payment request card, team page + invite
   form, launch queue detail pages. Logical properties only (RTL-safe),
   theme tokens only, 44px touch targets on the primary controls. */

/* ---- Launch wizard ---- */

.launch-op-note { margin: -6px 0 14px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); font-size: 12.5px; line-height: 1.5; max-width: 72ch; }

.launch-payments { padding: 20px; margin-bottom: 14px; overflow: visible; }

.launch-invite { border-top: 1px solid var(--border-2); margin-top: 18px; }

.launch-invite__done { margin: 4px 0 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--success-soft); color: var(--success); font-size: 13px; font-weight: 560; }

.launch-report { padding: 18px 20px; margin-bottom: 20px; border-color: var(--accent); }

.launch-report__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.launch-report__title { font-size: 15px; font-weight: 660; }

.launch-report__hint { margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); max-width: 60ch; }

.launch-report__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.launch-report__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-2); font-size: 13px; }

.launch-report__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--border-strong); color: var(--success); }

.launch-report__mark svg { width: 12px; height: 12px; }

.launch-report__row.is-created .launch-report__mark { background: var(--success-soft); border-color: transparent; }

.launch-report__row.is-skipped .launch-report__mark { border-style: dashed; }

.launch-report__what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.launch-report__label { font-weight: 600; }

.launch-report__text { color: var(--text-3); }

.launch-report__link { flex: none; font-size: 12.5px; color: var(--accent-text); text-decoration: underline; min-height: 24px; display: inline-flex; align-items: center; }

/* ---- Sample products banner (Products list) ---- */

.sample-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin-bottom: 16px; background: var(--info-soft); border-color: transparent; }

.sample-banner__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface); color: var(--info); }

.sample-banner__icon svg { width: 18px; height: 18px; }

.sample-banner__body { flex: 1 1 280px; min-width: 0; }

.sample-banner__title { font-size: 14px; font-weight: 640; }

.sample-banner__text { margin: 2px 0 0; font-size: 13px; color: var(--text-2); max-width: 72ch; }

.sample-banner__form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.sample-banner__form .btn { min-height: 40px; }

/* ---- Card payments request card (settings Payments tab + wizard) ---- */

.payreq-card { padding: 16px 18px; margin-top: 16px; }

.payreq-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }

.payreq-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }

.payreq-card__icon svg { width: 18px; height: 18px; }

.payreq-card__heading { flex: 1 1 260px; min-width: 0; }

.payreq-card__title { margin: 0; font-size: 14.5px; font-weight: 640; }

.payreq-card__text { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 72ch; }

.payreq-card__note { margin: 8px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--warning); background: var(--warning-soft); border-radius: var(--r-sm); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

.payreq-card--ready .payreq-card__icon { background: var(--success-soft); color: var(--success); }

.payreq-card__form { margin: 12px 0 0; padding-inline-start: 50px; }

.payreq-card__more { margin-bottom: 10px; }

.payreq-card__more summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); min-height: 24px; }

.payreq-card__more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.payreq-card__more .form-group { margin-top: 8px; }

.payreq-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.payreq-card__actions .btn { min-height: 44px; }

.payreq-card__operator { margin: 10px 0 0; padding-inline-start: 50px; font-size: 12.5px; }

.payreq-card__operator a { color: var(--accent-text); }

/* ---- Invite form (team page + wizard Team step) ---- */

.inv-form { margin: 0; }

.inv-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }

.inv-form__optional { font-weight: 400; color: var(--text-3); font-size: 12px; }

.inv-roles { border: 0; padding: 0; margin: 4px 0 12px; min-width: 0; }

.inv-roles legend { padding: 0; margin-bottom: 6px; }

.inv-roles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }

.inv-role { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); min-height: 44px; }

.inv-role:hover { border-color: var(--border-strong); }

.inv-role:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.inv-role:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.inv-role input { margin-top: 3px; flex: none; }

.inv-role__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.inv-role__label { font-size: 13.5px; font-weight: 620; }

.inv-role__desc { font-size: 12px; line-height: 1.45; color: var(--text-3); }

.inv-form:has([data-role-needs-branch="0"]:checked) .inv-branch { display: none; }

.inv-form__how { margin: 2px 0 12px; font-size: 12.5px; color: var(--text-3); max-width: 72ch; }

.inv-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.inv-form__actions .btn { min-height: 44px; }

.inv-form--compact .inv-roles__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---- Team page ---- */

.page-team .team-head { margin-bottom: 16px; }

.page-team .team-head__title { margin: 0; font-size: 20px; font-weight: 660; letter-spacing: -0.01em; }

.page-team .team-head__sub { margin: 4px 0 0; font-size: 13px; color: var(--text-3); max-width: 72ch; }

.page-team .team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; margin-bottom: 18px; }

.page-team .team-card { padding: 20px; overflow: visible; }

.page-team .team-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 620; }

.page-team .team-card__more, .page-team .team-card__empty { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }

.page-team .team-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.page-team .team-person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border-2); }

.page-team .team-person:first-child { border-top: 0; padding-top: 0; }

.page-team .team-person__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 640; }

.page-team .team-person__who { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }

.page-team .team-person__name { font-size: 13.5px; font-weight: 600; }

.page-team .team-person__email { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }

.page-team .team-person__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
    .page-team .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Launch queue detail pages ---- */

.page-launchqueue-item .lq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

.page-launchqueue-item .lq-head__title { margin: 6px 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-launchqueue-item .lq-head__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; color: var(--text-3); }

.page-launchqueue-item .lq-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.page-launchqueue-item .lq-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.page-launchqueue-item .lq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }

.page-launchqueue-item .lq-main, .page-launchqueue-item .lq-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.page-launchqueue-item .lq-card { padding: 20px; overflow: visible; }

.page-launchqueue-item .lq-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 620; }

.page-launchqueue-item .lq-card__hint { margin: 0 0 10px; font-size: 13px; color: var(--text-3); }

.page-launchqueue-item .lq-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 12px; font-size: 13px; }

.page-launchqueue-item .lq-facts dt { color: var(--text-3); font-weight: 500; }

.page-launchqueue-item .lq-facts dd { margin: 0; overflow-wrap: anywhere; }

.page-launchqueue-item .lq-quote { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--border-strong); background: var(--surface-2); border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.page-launchqueue-item .lq-checks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.page-launchqueue-item .lq-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }

.page-launchqueue-item .lq-check__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px dashed var(--warning); color: var(--success); }

.page-launchqueue-item .lq-check__mark svg { width: 12px; height: 12px; }

.page-launchqueue-item .lq-check.is-ok .lq-check__mark { border: 0; background: var(--success-soft); }

.page-launchqueue-item .lq-choices { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.page-launchqueue-item .lq-choices legend { padding: 0; margin-bottom: 6px; }

.page-launchqueue-item .lq-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; min-height: 44px; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }

.page-launchqueue-item .lq-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.page-launchqueue-item .lq-choice:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }

.page-launchqueue-item .lq-choice input { margin-top: 3px; flex: none; }

.page-launchqueue-item .lq-choice__text { display: flex; flex-direction: column; gap: 2px; }

.page-launchqueue-item .lq-choice__label { font-size: 13.5px; font-weight: 620; }

.page-launchqueue-item .lq-choice__help { font-size: 12px; line-height: 1.45; color: var(--text-3); }

.page-launchqueue-item .lq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.page-launchqueue-item .lq-actions .btn { min-height: 44px; }

.page-launchqueue-item .lq-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 900px) {
    .page-launchqueue-item .lq-grid { grid-template-columns: minmax(0, 1fr); }
    .payreq-card__form, .payreq-card__operator { padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-role, .page-launchqueue-item .lq-choice { transition: none; }
}

.page-client-view .client-addresses { margin-top: 18px; padding: 18px 20px; }

.page-client-view .client-addresses__title { margin: 0 0 10px; font-size: 15px; font-weight: 620; }

.page-client-view .client-addresses__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.page-client-view .client-addresses__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border, #e4e7ec); border-radius: 8px; }

.page-client-view .client-addresses__name { font-weight: 600; font-size: 13.5px; }

.page-client-view .client-addresses__default { margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: #ecfdf3; color: #027a48; font-size: 11.5px; font-weight: 600; }

.page-client-view .client-addresses__line { font-size: 13px; color: var(--text-3); }

.page-client-view .client-addresses__empty { margin: 0; font-size: 13px; color: var(--text-3); }

/* Panel menu: hide / show + top-bar position (desktop only)
   ------------------------------------------------------------------------
   html[data-nav-hidden] hides the menu entirely; html[data-nav-pos=top]
   turns the sidebar into a horizontal bar above the content, each titled
   section opening a drop-down. Set by the script in pages.html and remembered
   per browser. Below 1025px the off-canvas drawer is untouched. */

@media (min-width: 1025px) {
    .app-frame > .app-topbar .sidebar-toggle-btn {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto; width: 40px; height: 40px;
        border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-md);
        background: transparent; cursor: pointer;
    }
    .app-frame > .app-topbar .sidebar-toggle-btn:hover { background: rgba(255, 255, 255, .13); }
    .app-frame > .app-topbar .sidebar-toggle-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .app-frame > .app-topbar .sidebar-toggle-btn span,
    .app-frame > .app-topbar .sidebar-toggle-btn span::before,
    .app-frame > .app-topbar .sidebar-toggle-btn span::after {
        content: ""; display: block; position: relative;
        width: 18px; height: 2px; border-radius: 2px; background: #fff;
    }
    .app-frame > .app-topbar .sidebar-toggle-btn span::before { position: absolute; top: -6px; }
    .app-frame > .app-topbar .sidebar-toggle-btn span::after { position: absolute; top: 6px; }

    /* Hidden: no menu, content takes the full width. */
    html[data-nav-hidden] .app-frame > .app-shell { grid-template-columns: minmax(0, 1fr); }
    html[data-nav-hidden] .app-frame .app-sidebar { display: none !important; }

    /* Top bar: one row of section tabs above the content. */
    html[data-nav-pos="top"] .app-frame > .app-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html[data-nav-pos="top"] .app-frame .app-sidebar {
        position: relative; top: auto; z-index: 40;
        max-height: none; overflow: visible; padding: 4px 8px;
        flex-direction: row; align-items: center;
    }
    html[data-nav-pos="top"] .app-sidebar .mh-brand,
    html[data-nav-pos="top"] .app-sidebar .mh-foot { display: none !important; }
    html[data-nav-pos="top"] .app-frame .app-sidebar nav.mh-nav {
        display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px;
        overflow: visible !important; padding: 0 !important; width: 100%;
    }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-head {
        width: auto !important; padding: 0 12px !important; height: 40px;
        font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
        font-weight: 600 !important; color: var(--text-2) !important;
    }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-head:hover,
    html[data-nav-pos="top"] .app-sidebar .mh-navsection.is-pop .mh-navsection-head { background: var(--surface-2) !important; color: var(--text) !important; }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection[data-section="more"] { margin: 0; padding: 0; border: 0; }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-items { display: flex; flex-wrap: wrap; gap: 2px; }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-items[hidden] { display: none; }
    html[data-nav-pos="top"] .app-sidebar .mh-navitem { margin-bottom: 0 !important; }
    /* Titled sections become drop-downs. */
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-head ~ .mh-navsection-items {
        display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0;
        flex-direction: column; flex-wrap: nowrap; min-width: 220px; padding: 6px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection.is-pop .mh-navsection-head ~ .mh-navsection-items { display: flex !important; }
    html[data-nav-pos="top"] .app-sidebar .mh-navsection-head ~ .mh-navsection-items .mh-navitem { white-space: nowrap; }
}

/* =====================================================================
   Stage 6H: Create order (view/order/create.html, mo-*) + order page
   additions (manual badge, payment link, mark as paid).
   ===================================================================== */

.page-order-create .mo-head { margin-bottom: 16px; }

.page-order-create .mo-head__title { margin: 6px 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-order-create .mo-head__sub { margin: 0; font-size: 13px; color: var(--text-3); }

.page-order-create .mo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

.page-order-create .mo-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.page-order-create .mo-side { position: sticky; top: 16px; }

.page-order-create .mo-card { padding: 18px 20px; }

.page-order-create .mo-card[hidden] { display: none; }

.page-order-create .mo-card__title { margin: 0 0 12px; font-size: 15px; font-weight: 620; }

.page-order-create .mo-muted, .page-order-create .mo-hint, .page-order-create .mo-empty { margin: 8px 0 0; font-size: 13px; color: var(--text-3); }

.page-order-create .mo-empty[hidden], .page-order-create .mo-hint[hidden] { display: none; }

.page-order-create .mo-search { position: relative; }

.page-order-create .mo-search[hidden] { display: none; }

.page-order-create .mo-search__results { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface, #fff); border: 1px solid var(--border, #e4e7ec); border-radius: 10px; box-shadow: 0 12px 28px rgb(16 24 40 / 0.12); }

.page-order-create .mo-search__results[hidden] { display: none; }

.page-order-create .mo-search__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }

.page-order-create .mo-search__row:hover { background: var(--surface-2, #f2f4f7); }

.page-order-create .mo-search__img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; }

.page-order-create .mo-search__text { display: flex; flex-direction: column; min-width: 0; }

.page-order-create .mo-search__name { font-weight: 600; font-size: 13.5px; }

.page-order-create .mo-search__sub { font-size: 12px; color: var(--text-3); }

.page-order-create .mo-search__status { padding: 10px; font-size: 13px; color: var(--text-3); }

.page-order-create .mo-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.page-order-create .mo-line { padding: 10px 12px; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; }

.page-order-create .mo-line__head { display: flex; align-items: center; gap: 10px; }

.page-order-create .mo-line__img { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f2f4f7); }

.page-order-create .mo-line__img img { width: 100%; height: 100%; object-fit: cover; }

.page-order-create .mo-line__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.page-order-create .mo-line__name { font-size: 13.5px; }

.page-order-create .mo-line__price { font-size: 12.5px; color: var(--text-3); }

.page-order-create .mo-line__qty { width: 76px; flex: none; }

.page-order-create .mo-line__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; margin-top: 10px; }

.page-order-create .mo-opt { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2, #475467); }

.page-order-create .mo-link { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--primary, #1d4ed8); cursor: pointer; }

.page-order-create .mo-link--danger { color: var(--danger, #b42318); }

.page-order-create .mo-chosen { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #f2f4f7); font-weight: 600; }

.page-order-create .mo-chosen[hidden] { display: none; }

.page-order-create .mo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 12px; }

.page-order-create .mo-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

.page-order-create .mo-fields .mo-field { margin-top: 0; }

.page-order-create .mo-field[hidden] { display: none; }

.page-order-create .mo-field--wide { grid-column: 1 / -1; }

.page-order-create .mo-label { font-size: 13px; font-weight: 600; }

.page-order-create .mo-req { color: var(--danger, #b42318); }

.page-order-create .mo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }

.page-order-create .mo-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }

.page-order-create .mo-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }

.page-order-create .mo-select-sm { width: auto; min-width: 120px; }

.page-order-create .mo-choices { display: grid; gap: 8px; }

.page-order-create .mo-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; cursor: pointer; }

.page-order-create .mo-choice:has(input:checked) { border-color: var(--primary, #1d4ed8); box-shadow: 0 0 0 1px var(--primary, #1d4ed8) inset; }

.page-order-create .mo-choice.is-disabled { opacity: .55; cursor: not-allowed; }

.page-order-create .mo-choice--compact { padding: 9px 12px; }

.page-order-create .mo-choice input { margin-top: 3px; }

.page-order-create .mo-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }

.page-order-create .mo-choice__body small { font-size: 12.5px; color: var(--text-3); }

.page-order-create .mo-saved { display: grid; gap: 8px; margin: 12px 0 4px; }

.page-order-create .mo-saved[hidden] { display: none; }

.page-order-create [data-mo-address-block][hidden] { display: none; }

.page-order-create .mo-error { margin: 6px 0 0; font-size: 12.5px; color: var(--danger, #b42318); }

.page-order-create .mo-error[hidden] { display: none; }

.page-order-create .mo-error--block { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fef3f2; }

.page-order-create .form-control.is-invalid { border-color: var(--danger, #b42318); }

.page-order-create .mo-sum-lines { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.page-order-create .mo-sum-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }

.page-order-create .mo-sum-line__name { display: flex; flex-direction: column; min-width: 0; }

.page-order-create .mo-sum-line__name small { color: var(--text-3); font-size: 12px; }

.page-order-create .mo-sum-line__total { white-space: nowrap; font-weight: 600; }

.page-order-create .mo-coupon { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border, #e4e7ec); }

.page-order-create .mo-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--border, #e4e7ec); font-size: 13.5px; }

.page-order-create .mo-totals dt { color: var(--text-3); font-weight: 500; }

.page-order-create .mo-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

.page-order-create .mo-totals [hidden] { display: none; }

.page-order-create .mo-totals .mo-totals__total { padding-top: 8px; border-top: 1px solid var(--border, #e4e7ec); color: var(--text); font-weight: 700; font-size: 15px; }

.page-order-create .mo-create { width: 100%; margin-top: 14px; min-height: 44px; }

@media (max-width: 960px) {
    .page-order-create .mo-grid { grid-template-columns: minmax(0, 1fr); }
    .page-order-create .mo-side { position: static; }
}

@media (max-width: 560px) {
    .page-order-create .mo-fields { grid-template-columns: minmax(0, 1fr); }
}

.od-badge--manual { background: #f4f3ff; color: #5925dc; }

.od-created { padding: 14px 18px; border-color: #abefc6; background: #ecfdf3; }

.od-created__title { margin: 0; font-weight: 650; color: #067647; }

.od-paylink__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.od-markpaid__form { display: flex; flex-direction: column; gap: 6px; }

.od-markpaid__row { display: flex; gap: 8px; }

.od-markpaid__row .form-control { flex: 1; min-width: 0; }

/* =====================================================================
   Stage 6I: Products > Running low (view/item/low_stock.html, ls-*).
   ===================================================================== */

.page-low-stock .ls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.page-low-stock .ls-head__title { margin: 0 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-low-stock .ls-head__sub { margin: 0; max-width: 70ch; font-size: 13px; color: var(--text-3); }

.page-low-stock .ls-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }

.page-low-stock .ls-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }

.page-low-stock .ls-stat__label { font-size: 12.5px; color: var(--text-3); }

.page-low-stock .ls-stat__value { font-size: 22px; font-weight: 700; }

.page-low-stock .ls-stat__value--out { color: #b42318; }

.page-low-stock .ls-stat__value--low { color: #b54708; }

.page-low-stock .ls-search { margin-bottom: 12px; }

.page-low-stock .ls-card { padding: 6px 18px; }

.page-low-stock .ls-muted { margin: 6px 0; font-size: 13px; color: var(--text-3); }

.page-low-stock .ls-list { margin: 0; padding: 0; list-style: none; }

.page-low-stock .ls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border, #e4e7ec); }

.page-low-stock .ls-row:last-child { border-bottom: 0; }

.page-low-stock .ls-row.is-ok { opacity: .6; }

.page-low-stock .ls-row__img { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f2f4f7); }

.page-low-stock .ls-row__img img { width: 100%; height: 100%; object-fit: cover; }

.page-low-stock .ls-row__info { display: flex; flex-direction: column; gap: 1px; flex: 1 1 200px; min-width: 0; }

.page-low-stock .ls-row__name { font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; }

.page-low-stock .ls-row__variant, .page-low-stock .ls-row__level { font-size: 12.5px; color: var(--text-3); }

.page-low-stock .ls-badge { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.page-low-stock .ls-badge--out { background: #fef3f2; color: #b42318; }

.page-low-stock .ls-badge--low { background: #fffaeb; color: #b54708; }

.page-low-stock .ls-badge--ok { background: #ecfdf3; color: #027a48; }

.page-low-stock .ls-restock { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; }

.page-low-stock .ls-restock__input { width: 90px; }

.page-low-stock .ls-restock__msg { font-size: 12px; color: var(--text-3); min-width: 0; }

.page-low-stock .ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-low-stock .ls-empty { padding: 28px 8px; text-align: center; }

.page-low-stock .ls-empty__title { margin: 0 0 4px; font-weight: 650; }

@media (max-width: 560px) {
    .page-low-stock .ls-restock { flex: 1 1 100%; }
}

/* Quick payment (panel/item/quick): one narrow card, two fields, one button. */

.page-item-quick { max-width: 520px; margin-inline: auto; }

.page-item-quick .item-card { padding: 24px; }

.page-item-quick__lead { margin: 0 0 18px; color: var(--color-muted, #6b7280); font-size: 14px; line-height: 1.5; }

.page-item-quick .form-input { min-height: 48px; font-size: 16px; }

.page-item-quick .item-actions { margin-top: 20px; }

.page-item-quick .item-actions .btn { width: 100%; min-height: 48px; justify-content: center; }

.page-item-quick__done { text-align: center; }

.page-item-quick__done .item-actions { flex-direction: column; }

.page-item-quick__full { display: block; margin-top: 16px; text-align: center; font-size: 13px; }

/* =====================================================================
   Stage 6J: Reports (view/report/index.html, rp-*).
   ===================================================================== */

.page-report .rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.page-report .rp-head__title { margin: 0 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-report .rp-head__sub { margin: 0; font-size: 13px; color: var(--text-3); }

.page-report .rp-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }

.page-report .rp-period select { width: auto; min-width: 150px; }

.page-report .rp-period__custom { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.page-report .rp-period__custom input { width: auto; }

.page-report .rp-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap; }

.page-report .rp-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }

.page-report .rp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-width: 0; }

.page-report .rp-kpi__label { font-size: 12.5px; color: var(--text-3); }

.page-report .rp-kpi__value { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page-report .rp-kpi__change { align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2, #f2f4f7); color: var(--text-3); }

.page-report .rp-kpi__change--up { background: #ecfdf3; color: #027a48; }

.page-report .rp-kpi__change--down { background: #fef3f2; color: #b42318; }

.page-report .rp-extras { margin: 0 0 16px; }

.page-report .rp-muted { font-size: 12.5px; color: var(--text-3); }

.page-report .rp-card { padding: 16px 18px; margin-bottom: 12px; min-width: 0; }

.page-report .rp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

.page-report .rp-card__title { margin: 0; font-size: 15px; font-weight: 640; }

.page-report .rp-dl { font-size: 12.5px; white-space: nowrap; }

.page-report .rp-empty { margin: 8px 0; padding: 18px 8px; text-align: center; font-size: 13px; color: var(--text-3); }

.page-report .rp-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 3px; height: 190px; padding-bottom: 20px; overflow-x: auto; }

.page-report .rp-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 0 8px; max-width: 72px; height: 100%; }

.page-report .rp-bar__fill { display: block; width: 100%; min-height: 0; border-radius: 4px 4px 0 0; background: var(--primary, #2f6feb); opacity: .85; }

.page-report .rp-bar:hover .rp-bar__fill { opacity: 1; }

.page-report .rp-bar__x { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: 10.5px; color: var(--text-3); }

.page-report .rp-chart:has(.rp-bar:nth-child(15)) .rp-bar:not(:nth-child(3n+1)) .rp-bar__x { visibility: hidden; }

.page-report .rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

.page-report .rp-list { margin: 0; padding: 0; list-style: none; }

.page-report .rp-list__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border, #e4e7ec); font-size: 13px; }

.page-report .rp-list__row:last-child { border-bottom: 0; }

.page-report .rp-list__img { flex: none; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--surface-2, #f2f4f7); }

.page-report .rp-list__img img { width: 100%; height: 100%; object-fit: cover; }

.page-report .rp-list__name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; font-weight: 550; overflow-wrap: anywhere; }

.page-report .rp-list__name small { font-weight: 400; font-size: 12px; color: var(--text-3); }

.page-report .rp-list__meta { flex: none; font-size: 12px; color: var(--text-3); }

.page-report .rp-list__value { flex: none; font-variant-numeric: tabular-nums; }

.page-report .rp-share { padding: 6px 0; font-size: 13px; }

.page-report .rp-share__top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }

.page-report .rp-share__val { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.page-report .rp-share__bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2, #f2f4f7); overflow: hidden; }

.page-report .rp-share__bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary, #2f6feb); }

@media (max-width: 1100px) {
    .page-report .rp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .page-report .rp-grid { grid-template-columns: 1fr; }
    .page-report .rp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-report .rp-period { width: 100%; }
    .page-report .rp-period select { flex: 1 1 auto; }
}

/* Checkout form: Normal checkout / Quick payment switch. */

.page-checkoutform .cf-modes { margin-bottom: 16px; }

.page-checkoutform .cf-quick-row { padding: 12px 0; border-top: 1px solid var(--color-border, #e5e7eb); }

.page-checkoutform .cf-quick-row:first-child { border-top: 0; }

/* =====================================================================
   Stage 6K: Activity (view/activity/list.html, al-*).
   ===================================================================== */

.page-report .rp-extras bdi { white-space: nowrap; }

.page-activity .al-head { margin-bottom: 16px; }

.page-activity .al-head__title { margin: 0 0 2px; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }

.page-activity .al-head__sub { margin: 0; max-width: 70ch; font-size: 13px; color: var(--text-3); }

.page-activity .al-filters { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-bottom: 12px; }

.page-activity .al-filters__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page-activity .al-filters__search { flex: 1 1 260px; min-width: 0; }

.page-activity .al-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-3); }

.page-activity .al-date input { width: auto; }

.page-activity .al-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.page-activity .al-chips__label { font-size: 12.5px; color: var(--text-3); margin-inline-end: 2px; }

.page-activity .al-chip { padding: 4px 12px; border: 1px solid var(--border, #e4e7ec); border-radius: 999px; font-size: 12.5px; color: var(--text); text-decoration: none; background: var(--surface, #fff); }

.page-activity .al-chip:hover { border-color: var(--primary, #2f6feb); }

.page-activity .al-chip.is-on { background: var(--primary, #2f6feb); border-color: var(--primary, #2f6feb); color: #fff; }

.page-activity .al-card { padding: 4px 18px 10px; }

.page-activity .al-list { margin: 0; padding: 0; list-style: none; }

.page-activity .al-day { padding: 14px 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); }

.page-activity .al-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, #e4e7ec); }

.page-activity .al-row:last-child { border-bottom: 0; }

.page-activity .al-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; font-weight: 650; background: var(--surface-2, #f2f4f7); color: var(--text-2, #344054); }

.page-activity .al-row--add .al-avatar { background: #ecfdf3; color: #027a48; }

.page-activity .al-row--remove .al-avatar { background: #fef3f2; color: #b42318; }

.page-activity .al-row__body { flex: 1 1 auto; min-width: 0; }

.page-activity .al-row__line { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }

.page-activity .al-row__who { font-weight: 650; color: var(--text); text-decoration: none; }

.page-activity .al-row__who:hover { text-decoration: underline; }

.page-activity .al-row__what { color: var(--text-2, #344054); }

.page-activity .al-row__thing { font-weight: 600; }

.page-activity .al-row__notes { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }

.page-activity .al-row__time { flex: none; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.page-activity .al-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 4px; }

.page-activity .al-pager__text { font-size: 12.5px; color: var(--text-3); }

.page-activity .al-empty { padding: 32px 8px; text-align: center; }

.page-activity .al-empty__title { margin: 0 0 6px; font-weight: 650; }

.page-activity .al-empty__help { margin: 0 auto; max-width: 52ch; font-size: 13px; color: var(--text-3); }

@media (max-width: 560px) {
    .page-activity .al-date { flex: 1 1 calc(50% - 8px); }
    .page-activity .al-date input { flex: 1 1 auto; min-width: 0; }
}

/* =====================================================================
   Stage 6L: Templates for your business (view/designer/industry.html, it-*).
   ===================================================================== */

.it { margin: 0 0 8px; }

.it-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--r-lg, 12px); background: var(--surface); font-size: 13.5px; }

.it-title { margin: 0 0 4px; font-size: 13px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

.it-hint { margin: 0 0 14px; max-width: 80ch; font-size: 13px; color: var(--text-3); }

.it-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.it-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-xl, 14px); background: var(--surface); }

.it-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.it-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2, #f2f4f7); }

.it-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.it-card__badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--accent); color: #fff; }

.it-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 14px 16px 16px; }

.it-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.it-card__name { margin: 0; font-size: 15.5px; font-weight: 650; }

.it-card__swatches { display: inline-flex; gap: 4px; flex: none; }

.it-card__swatches i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .08); }

.it-card__desc { margin: 0; font-size: 13px; color: var(--text-2, #52525b); }

.it-card__list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-3); }

.it-card__list li { position: relative; padding-inline-start: 18px; margin: 3px 0; }

.it-card__list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 8px; height: 4px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }

.it-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

.it-card__actions .btn { flex: 1 1 0; justify-content: center; }

.it-modal .modal-body { display: flex; flex-direction: column; gap: 4px; }

.it-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--border-2, #eee); cursor: pointer; }

.it-option input { flex: none; margin-top: 3px; width: 16px; height: 16px; }

.it-option span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }

.it-option small { font-size: 12.5px; color: var(--text-3); }

.it-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }

.it-error { margin: 8px 0 0; font-size: 13px; color: #b42318; }

.it-done__title { margin: 0 0 8px; font-weight: 650; }

.it-done__list { margin: 0; padding-inline-start: 18px; font-size: 13.5px; }

.it-done__list li { margin: 4px 0; }

@media (max-width: 1100px) {
    .it-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .it-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Onboarding, simpler (2026-10-01): "Start my store" as one calm card per
   screen (view/panel/start.html, sst-one / sst-q / sst-pick / sst-done).
   ===================================================================== */

.sst { max-width: 680px; }

.sst-head { text-align: center; }

.sst-stepper { justify-content: center; }

.sst-one { display: flex; flex-direction: column; gap: 26px; padding: 28px 30px; }

.sst-q { display: flex; flex-direction: column; gap: 10px; }

.sst-q .form-group { margin: 0; }

.sst-q__label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--text); }

.sst-q__input { height: 48px; font-size: 16px; }

.sst-link { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 550; color: var(--accent-text, var(--accent)); cursor: pointer; }

.sst-link:hover { text-decoration: underline; }

.sst-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.sst-pick { position: relative; display: block; margin: 0; cursor: pointer; }

.sst-pick__card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--border); border-radius: var(--r-lg, 12px); background: var(--surface); transition: border-color 140ms, box-shadow 140ms, transform 140ms; }

.sst-pick:hover .sst-pick__card { border-color: var(--accent); transform: translateY(-1px); }

.sst-pick input:checked + .sst-pick__card { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.sst-pick input:focus-visible + .sst-pick__card { outline: 2px solid var(--accent); outline-offset: 2px; }

.sst-pick__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2, #f2f4f7); color: var(--text-3); }

.sst-pick__img img { width: 100%; height: 100%; object-fit: cover; }

.sst-pick__img svg { width: 28px; height: 28px; }

.sst-pick__name { padding: 9px 10px 10px; font-size: 13.5px; font-weight: 620; text-align: center; color: var(--text); }

.sst-pick__tick { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); }

.sst-pick__tick svg { width: 14px; height: 14px; }

.sst-pick input:checked + .sst-pick__card .sst-pick__tick { display: inline-flex; }

[data-field="pack"].is-invalid .sst-pick__card { border-color: var(--danger); }

.sst-one .sst-samples { margin: 0; }

.sst-addr-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md, 10px); background: var(--surface-2, #f2f4f7); font-size: 14px; }

.sst-addr-line__icon { display: inline-flex; color: var(--text-3); }

.sst-addr-line__host { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }

.sst-addr-line__host strong { color: var(--text); }

.sst-addr-field { display: flex; flex-direction: column; gap: 6px; }

.sst-addr-line .sst-addr-status { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 600; }

.sst-addr-line .sst-addr-status:empty { display: none; }

.sst-addr-line .sst-addr-status.is-taken { flex-basis: 100%; order: 5; font-weight: 500; }

.sst-go { min-height: 48px; font-size: 15px; font-weight: 650; }

.sst-one > .sst-go { width: 100%; }

.sst-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }

.sst-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sst-row .sst-go { flex: 1 1 220px; }

.sst-row--center { justify-content: center; }

.sst-done { align-items: center; gap: 14px; text-align: center; padding-block: 36px; }

.sst-done__check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft, #ecfdf3); color: var(--success, #027a48); }

.sst .sst-done__check svg { width: 32px; height: 32px; }

.sst-done__name { margin: 0; font-size: 22px; font-weight: 700; }

.sst-done__host { margin: -6px 0 0; font-size: 14px; color: var(--text-3); }

.sst-done__made { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }

.sst-done__made li { padding: 4px 12px; border-radius: 999px; background: var(--surface-2, #f2f4f7); font-size: 12.5px; color: var(--text-2); }

.sst-done .sst-row { width: 100%; max-width: 440px; }

.sst-done__next { margin: 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 640px) {
    .sst-one { padding: 20px 16px; gap: 22px; }
    .sst-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sst-look { grid-template-columns: 1fr; }
}

/* Phones: the stepper shows the current step's name only. */

@media (max-width: 640px) {
    .sst-stepper { flex-wrap: nowrap; gap: 6px; }
    .sst-stepper .launch-step:not(.is-current) > span:last-child { display: none; }
}

/* =====================================================================
   Record picker (assets/record-picker.js, pk-*): a searchable list in a
   dialog — choose one record among thousands.
   ===================================================================== */

.pk-backdrop { align-items: start; padding-top: min(10vh, 80px); }

.modal-backdrop > .pk { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(640px, calc(100dvh - 40px)); overflow: hidden; }

.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }

.pk-title { font-size: 16px; font-weight: 650; }

.pk-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }

.pk-close:hover { background: var(--surface-2, #f2f4f7); color: var(--text); }

.pk-search { position: relative; margin: 0 18px; }

.pk-search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

.pk-input { width: 100%; height: 46px; padding-inline: 40px 12px; border: 1.5px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); font-size: 15px; color: var(--text); }

.pk-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(27, 77, 216, .15)); }

.pk-body { flex: 1 1 auto; min-height: 0; margin-top: 10px; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; }

.pk-list { margin: 0; padding: 0; list-style: none; }

.pk-sentinel { height: 1px; }

.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 18px; border-top: 1px solid var(--border-2, #eef0f3); }

.pk-count { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.pk-more { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--accent-text, var(--accent)); cursor: pointer; }

.pk-more:hover { background: var(--surface-2, #f2f4f7); }

.pk-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-md, 10px); background: transparent; text-align: start; color: var(--text); cursor: pointer; }

.pk-row:hover, .pk-row.is-active { background: var(--surface-2, #f2f4f7); }

.pk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pk-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft, #e8eefc); color: var(--accent-text, var(--accent)); font-weight: 650; }

.pk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pk-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-sub { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-status { padding: 0 18px; font-size: 13px; color: var(--text-3); }

.pk-status:empty { display: none; }

.pk-status.is-loading { padding-block: 10px; }

.pk-status.is-error { padding-block: 10px; color: var(--danger, #b42318); }

.pk-empty { padding: 26px 8px; text-align: center; }

.pk-empty__title { margin: 0 0 4px; font-weight: 650; color: var(--text); }

.pk-empty__help { margin: 0; font-size: 13px; }

/* Launch wizard, step 1 — one question, one button. */

.launch-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; margin: 24px auto; padding: 36px 28px; text-align: center; }

.launch-pick__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: var(--accent-soft, #e8eefc); color: var(--accent-text, var(--accent)); }

.launch-pick__title { margin: 0; font-size: 19px; font-weight: 680; }

.launch-pick__chosen { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md, 10px); background: var(--surface-2, #f2f4f7); font-weight: 600; }

.launch-pick__change { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 550; color: var(--accent-text, var(--accent)); cursor: pointer; }

.launch-pick__go { min-width: 220px; min-height: 46px; font-size: 15px; }

.launch-more { margin-top: 22px; }

.launch-more > summary, .launch-package__more > summary { cursor: pointer; font-size: 13px; font-weight: 550; color: var(--text-3); }

.launch-more > summary { margin-bottom: 12px; }

.launch-package__more > summary { margin: 2px 0 0; }

.launch-package__inner { margin-top: 10px; }

/* ---- Roles & permissions (rp-*) — panel/accessgroup/view, user Roles card ---- */

.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

.rp-head__title { margin: 6px 0 8px; font-size: 22px; font-weight: 640; letter-spacing: -0.01em; }

.rp-head__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }

.rp-head__inherits a { color: var(--accent-text); font-weight: 560; }

.rp-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.rp-note { margin-bottom: 16px; }

.rp-tabs .tab { background: none; border-top: 0; border-inline: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

.rp-tabs__count { font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-3); border-radius: 99px; padding: 1px 8px; }

.rp-intro { margin: 0 0 14px; color: var(--text-3); font-size: 13.5px; }

.rp-help { margin: 6px 0 0; color: var(--text-3); font-size: 12.5px; }

.rp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.rp-search { max-width: 380px; padding: 0 11px; min-height: 40px; }

.rp-search input, .rp-search input:focus { border: 0; box-shadow: none; padding: 8px 0; height: auto; min-height: 0; background: transparent; }

.rp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.rp-area { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 10px; }

.rp-area__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; cursor: pointer; list-style: none; border-radius: var(--r-lg); }

.rp-area__head::-webkit-details-marker { display: none; }

.rp-area__head:hover { background: var(--surface-hover); }

.rp-area__name { font-weight: 620; font-size: 14.5px; }

.rp-area__count { margin-inline-start: auto; font-size: 12.5px; color: var(--text-3); }

.rp-area__chev { color: var(--text-3); transition: transform .18s ease; flex: none; }

.rp-area[open] > .rp-area__head .rp-area__chev { transform: rotate(180deg); }

.rp-area__body { border-top: 1px solid var(--border); }

/* contain: the wide grid scrolls inside its card instead of widening the page (.app-content is a min-width:auto flex item) */
.rp-table-wrap { overflow-x: auto; contain: inline-size; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }

.rp-table th, .rp-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }

.rp-table thead th { padding: 10px 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); background: var(--surface-2); }

.rp-table tbody tr:last-child > * { border-bottom: 0; }

.rp-table tbody tr:hover { background: var(--surface-hover); }

.rp-table .rp-table__res { text-align: start; padding-inline-start: 16px; font-weight: 560; white-space: nowrap; }

.rp-table .rp-table__more { text-align: end; padding-inline-end: 16px; width: 1%; white-space: nowrap; }

.rp-na { color: var(--text-4); }

.rp-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 4px; }

.rp-scope-select { min-height: 30px; padding-block: 3px; padding-inline: 8px 22px; font-size: 12px; font-weight: 560; color: var(--text-2); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; width: 116px; }

.rp-scope-select:hover:not(:disabled) { border-color: var(--text-4); }

.rp-scope-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rp-scope-select:disabled { opacity: .6; cursor: not-allowed; }

/* "Everything" crosses every tenant — make it stand out */
.rp-scope-select.is-wide { color: var(--danger); border-color: var(--danger); background-color: var(--danger-soft); }

.rp-scope-select.is-saved { box-shadow: 0 0 0 3px var(--success-soft); }

/* 44px hit area around an 18px box */
.rp-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex: none; }

.rp-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.rp-check input:disabled { cursor: not-allowed; }

.rp-check__box { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, border-color .12s ease; }

.rp-check input:checked + .rp-check__box { background: var(--accent); border-color: var(--accent); }

/* physical border-left on purpose: a checkmark must not mirror under RTL */
.rp-check input:checked + .rp-check__box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: translateY(-1px) rotate(-45deg); }

.rp-check input:indeterminate + .rp-check__box { background: var(--accent-soft-2); border-color: var(--accent); }

.rp-check input:indeterminate + .rp-check__box::after { content: ""; width: 8px; height: 2px; background: var(--accent); border-radius: 1px; }

.rp-check input:focus-visible + .rp-check__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.rp-check input:disabled + .rp-check__box { opacity: .55; }

.rp-check.is-saving .rp-check__box { opacity: .5; }

.rp-check.is-saved .rp-check__box { box-shadow: 0 0 0 3px var(--success-soft); }

.rp-more__toggle { cursor: pointer; font-size: 12.5px; color: var(--text-2); font-weight: 560; padding: 6px 10px; border: 1px solid var(--border); border-radius: 99px; min-height: 32px; display: inline-flex; align-items: center; list-style: none; }

.rp-more__toggle::-webkit-details-marker { display: none; }

.rp-more[open] .rp-more__toggle { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }

.rp-more__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 8px; padding: 6px 0 8px; text-align: start; white-space: normal; min-width: 270px; }

.rp-more__item { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--text-2); }

.rp-more__item .rp-cell { display: contents; }

.rp-more__item > span { order: 1; flex: 1; }

.rp-more__item .rp-scope-select { order: 2; }

.rp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-size: 12.5px; color: var(--text-3); }

.rp-legend__title { flex-basis: 100%; }

.rp-legend strong { color: var(--text-2); font-weight: 600; }

.rp-empty { padding: 28px 16px; text-align: center; color: var(--text-3); }

.rp-advanced { margin-top: 18px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }

.rp-advanced__head { padding: 12px 16px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-2); }

.rp-advanced__body { padding: 4px 16px 16px; display: grid; gap: 18px; }

.rp-template { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.rp-add { padding: 16px; margin-bottom: 14px; }

.rp-add__row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

.rp-add__field { flex: 1; min-width: 240px; }

.rp-add__field .form-group { margin-bottom: 0; }

.rp-add__btn { min-height: 40px; }

.rp-user-roles { padding: 20px; margin-top: 18px; }

.rp-user-roles__head { margin-bottom: 14px; }

.rp-user-roles__title { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -0.01em; }

.rp-user-roles .rp-add { padding: 0; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
    .rp-area__chev, .rp-check__box { transition: none; }
}