/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-a5wtagmfv8] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-a5wtagmfv8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Printing.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   Printing.razor.css — Blazor CSS-isolated (scoped to this page only, never leaks globally).

   Ported VERBATIM (property values, not reworded) from Legacy's real, standalone
   panels/settings/print-settings.html (shell: header/tabs/content/pane, lines 24-416) plus the
   3 tab modules' own <style> injection arrays (panels/settings/print-tabs/{maint-receipt.js
   lines 10-197, maint-invoice.js lines 14-222, repair-labels.js lines 10-194}). All 3 tab
   modules use the SAME section/field/pill/toggle/field-card design system with only their class
   prefix differing (mr-/mi-/rl-) — verified property-by-property identical — so this file
   consolidates them into ONE shared `pt-` prefix instead of tripling the same rules 3×. The
   `ps-` prefixed shell classes keep Legacy's own exact names (traceability).

   Tokens are scoped to `.pt-page` instead of `:root` — Blazor's CSS isolation appends its scope
   attribute to real rendered elements, not to `:root`/`<html>`, so `:root{--x:1}` inside an
   isolated stylesheet would silently never apply; `.pt-page` (this page's own top-level wrapper)
   is the correct isolation-safe equivalent, and V2's dark/light toggle already sets
   `data-theme` on `<html>` (wwwroot/js/theme.js) exactly like Legacy did, so the same
   `[data-theme="light"] .pt-page{...}` override technique still works unchanged.

   `.pt-page` also carries `.content-area`'s real ancestor sizing: MainLayout's
   `.content-area{height:calc(100 * var(--vh));overflow-y:auto;padding:24px}` already gives every page a
   definite-height ancestor, so `height:100%` on `.pt-page` resolves correctly (unlike the usual
   "height:100% does nothing" trap) — letting this page reproduce Legacy's real fixed-header/
   fixed-tabs + only-the-content-scrolls app-shell feel instead of the whole page scrolling. */

/* ═══ TOKENS — print-settings.html lines 29-60, scoped to .pt-page (see note above) ═══ */
.pt-page[b-edha3siftc] {
    --ps-bg: #050811;
    --ps-panel: rgba(15,23,42,0.60);
    --ps-border: rgba(255,255,255,0.06);
    --ps-border-soft: rgba(255,255,255,0.10);
    --ps-text: #e2e8f0;
    --ps-text-sec: #94a3b8;
    --ps-text-muted: #64748b;
    --ps-accent: #6366f1;
    --ps-accent-light: #818cf8;
    --ps-accent-2: #a855f7;
    --ps-tab-hover: rgba(255,255,255,0.04);

    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--ps-border-soft);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    color: var(--ps-text);
    background: var(--ps-bg);
    transition: background .4s, color .4s, border-color .4s;
}
[data-theme="light"] .pt-page[b-edha3siftc] {
    --ps-bg: #f1f5f9;
    --ps-panel: rgba(255,255,255,0.88);
    --ps-border: rgba(15,23,42,0.07);
    --ps-border-soft: rgba(15,23,42,0.12);
    --ps-text: #1e293b;
    --ps-text-sec: #475569;
    --ps-text-muted: #94a3b8;
    --ps-accent: #4f46e5;
    --ps-accent-light: #6366f1;
    --ps-accent-2: #9333ea;
    --ps-tab-hover: rgba(15,23,42,0.04);
}

/* ═══ HEADER — print-settings.html .ps-header/.ps-header-icon/.ps-header-title/.ps-header-sub ═══ */
.ps-header[b-edha3siftc] {
    flex-shrink: 0;
    padding: 18px 24px;
    background: var(--ps-panel);
    border-bottom: 1px solid var(--ps-border-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.4s, border-color 0.4s;
}
.ps-header-icon[b-edha3siftc] {
    width: 46px; height: 46px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(168,85,247,0.12));
    border: 1px solid rgba(99,102,241,0.28);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ps-accent-light);
}
.ps-header-icon svg[b-edha3siftc] { width: 22px; height: 22px; }
.ps-header-title[b-edha3siftc] { font-size: 20px; font-weight: 800; color: var(--ps-text); line-height: 1.2; }
.ps-header-sub[b-edha3siftc] { font-size: 12px; color: var(--ps-text-muted); margin-top: 3px; font-weight: 500; }

/* ═══ TABS BAR — print-settings.html .ps-tabs-wrap/.ps-tabs/.ps-tab/.ps-tab-icon ═══ */
.ps-tabs-wrap[b-edha3siftc] {
    flex-shrink: 0;
    background: var(--ps-panel);
    border-bottom: 1px solid var(--ps-border-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow-x: auto;
    scrollbar-width: none;
}
.ps-tabs-wrap[b-edha3siftc]::-webkit-scrollbar { display: none; }
.ps-tabs[b-edha3siftc] { display: flex; padding: 0 16px; min-width: max-content; gap: 2px; }
.ps-tab[b-edha3siftc] {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 18px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--ps-text-sec);
    background: transparent;
    border: none; border-bottom: 2.5px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ps-tab:hover[b-edha3siftc] { color: var(--ps-text); background: var(--ps-tab-hover); }
.ps-tab.active[b-edha3siftc] { color: var(--ps-accent-light); border-bottom-color: var(--ps-accent); background: rgba(99,102,241,0.06); }
[data-theme="light"] .ps-tab.active[b-edha3siftc] { color: var(--ps-accent); }
.ps-tab-icon[b-edha3siftc] {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
[data-theme="light"] .ps-tab-icon[b-edha3siftc] { background: rgba(15,23,42,0.05); }
.ps-tab.active .ps-tab-icon[b-edha3siftc] { background: rgba(99,102,241,0.18); color: var(--ps-accent-light); }
[data-theme="light"] .ps-tab.active .ps-tab-icon[b-edha3siftc] { background: rgba(79,70,229,0.12); color: var(--ps-accent); }
.ps-tab-icon svg[b-edha3siftc] { width: 14px; height: 14px; }

/* ═══ CONTENT / PANE — print-settings.html .ps-content/.ps-pane ═══ */
.ps-content[b-edha3siftc] {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.25) transparent;
}
.ps-content[b-edha3siftc]::-webkit-scrollbar { width: 5px; }
.ps-content[b-edha3siftc]::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 10px; }
.ps-pane[b-edha3siftc] { display: none; height: 100%; min-height: 400px; }
.ps-pane.active[b-edha3siftc] { display: flex; }

/* ═══ PERMISSION GATE (this page's own, no equivalent needed in Legacy — a single V2-only state) ═══ */
.pt-gate[b-edha3siftc] { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.pt-gate-card[b-edha3siftc] { text-align: center; max-width: 420px; }
.pt-gate-card svg[b-edha3siftc] { width: 48px; height: 48px; color: var(--ps-text-muted); margin: 0 auto 14px; }
.pt-gate-title[b-edha3siftc] { font-size: 16px; font-weight: 800; color: var(--ps-text); margin-bottom: 6px; }
.pt-gate-sub[b-edha3siftc] { font-size: 13px; color: var(--ps-text-muted); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   TWO-COLUMN SPLIT — mr-layout/mr-settings-col/mr-preview-col (+ mi-/rl- identical siblings).
   Legacy's real, opposite-of-a-generic-admin-panel split: the FORM is the fixed narrow column,
   the PREVIEW is the large flexible one — this is the exact split the owner's complaint named.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.pt-layout[b-edha3siftc] { display: flex; width: 100%; height: 100%; overflow: hidden; }
.pt-settings-col[b-edha3siftc] {
    flex: 0 0 470px;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--ps-border-soft);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.2) transparent;
    background: var(--ps-panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pt-settings-col[b-edha3siftc]::-webkit-scrollbar { width: 4px; }
.pt-settings-col[b-edha3siftc]::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 6px; }
.pt-preview-col[b-edha3siftc] { flex: 1; display: flex; flex-direction: column; background: var(--ps-bg); overflow: hidden; min-width: 0; }

@media (max-width: 960px) {
    .pt-layout[b-edha3siftc] { flex-direction: column; }
    .pt-settings-col[b-edha3siftc] { flex: none; border-left: none; border-bottom: 1px solid var(--ps-border-soft); max-height: 55%; }
    .pt-preview-col[b-edha3siftc] { flex: 1; min-height: 280px; }
}

/* ═══ SECTIONS — mr-section/mr-section-header/mr-section-icon/mr-section-title/-sub/-body ═══ */
.pt-section[b-edha3siftc] { border-bottom: 1px solid var(--ps-border); }
.pt-section:last-child[b-edha3siftc] { border-bottom: none; }
.pt-section-header[b-edha3siftc] { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; }
.pt-section-icon[b-edha3siftc] {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pt-section-icon svg[b-edha3siftc] { width: 15px; height: 15px; }
.pt-section-title[b-edha3siftc] { font-size: 13px; font-weight: 800; color: var(--ps-text); }
.pt-section-sub[b-edha3siftc] { font-size: 11px; color: var(--ps-text-muted); margin-top: 1px; }
.pt-section-body[b-edha3siftc] { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.pt-row[b-edha3siftc] { display: flex; gap: 10px; }
.pt-row > .pt-field[b-edha3siftc] { flex: 1; min-width: 0; }

/* ═══ FORM CONTROLS — mr-field/mr-field-label/mr-select/mr-input ═══ */
.pt-field[b-edha3siftc] { display: flex; flex-direction: column; gap: 5px; }
.pt-field-label[b-edha3siftc] { font-size: 11.5px; font-weight: 700; color: var(--ps-text-sec); }
.pt-field-hint[b-edha3siftc] { font-size: 10px; color: var(--ps-text-muted); margin-top: 2px; }
.pt-select[b-edha3siftc], .pt-input[b-edha3siftc] {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ps-border-soft);
    border-radius: 10px;
    color: var(--ps-text);
    font-family: Cairo, sans-serif;
    font-size: 13px; font-weight: 600;
    padding: 9px 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .4s;
    width: 100%;
    -webkit-appearance: none; appearance: none;
}
[data-theme="light"] .pt-select[b-edha3siftc], [data-theme="light"] .pt-input[b-edha3siftc] { background: rgba(255,255,255,.9); border-color: rgba(15,23,42,.12); color: #1e293b; }
.pt-select:focus[b-edha3siftc], .pt-input:focus[b-edha3siftc] { border-color: var(--ps-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.pt-input[type=color][b-edha3siftc] { padding: 3px; height: 38px; cursor: pointer; }
.pt-input[type=range][b-edha3siftc] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 4px; background: rgba(99,102,241,.18);
    outline: none; cursor: pointer; accent-color: var(--ps-accent); padding: 0; border: none;
}
.pt-input[type=range][b-edha3siftc]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--ps-accent); cursor: pointer; box-shadow: 0 2px 6px rgba(99,102,241,.35);
}
.pt-input-sm[b-edha3siftc] { max-width: 110px; }

/* ═══ PILLS — mr-paper-pills/mr-paper-pill (+ currency/action/payment, identical rules) ═══ */
.pt-pills[b-edha3siftc] { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-pill[b-edha3siftc] {
    padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--ps-border-soft);
    background: rgba(255,255,255,.03);
    color: var(--ps-text-muted);
    font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pt-pill:hover[b-edha3siftc] { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: var(--ps-accent-light); }
.pt-pill.active[b-edha3siftc] { background: rgba(99,102,241,.15); border-color: var(--ps-accent); color: var(--ps-accent-light); }
[data-theme="light"] .pt-pill[b-edha3siftc] { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #64748b; }
[data-theme="light"] .pt-pill:hover[b-edha3siftc], [data-theme="light"] .pt-pill.active[b-edha3siftc] { background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.3); color: var(--ps-accent); }

/* ═══ TOGGLE — mr-toggle (a styled checkbox itself, no wrapper span needed) ═══ */
.pt-toggle-row[b-edha3siftc] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-toggle-label[b-edha3siftc] { font-size: 13px; font-weight: 700; color: var(--ps-text); }
.pt-toggle[b-edha3siftc] {
    width: 36px; height: 20px; border-radius: 10px;
    background: rgba(255,255,255,.1);
    border: none; cursor: pointer; position: relative;
    transition: background .2s; flex-shrink: 0;
    -webkit-appearance: none; appearance: none; outline: none;
}
[data-theme="light"] .pt-toggle[b-edha3siftc] { background: rgba(15,23,42,.12); }
.pt-toggle[b-edha3siftc]::after {
    content: ''; position: absolute; top: 3px; right: 3px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pt-toggle:checked[b-edha3siftc] { background: var(--ps-accent); }
.pt-toggle:checked[b-edha3siftc]::after { transform: translateX(-16px); }

/* ═══ COLOR SWATCHES — mi-color-row/mi-swatch/mi-color-custom ═══ */
.pt-color-row[b-edha3siftc] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-swatch[b-edha3siftc] { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: transform .15s, border-color .15s; flex-shrink: 0; padding: 0; }
.pt-swatch:hover[b-edha3siftc] { transform: scale(1.15); }
.pt-swatch.active[b-edha3siftc] { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
[data-theme="light"] .pt-swatch.active[b-edha3siftc] { border-color: #1e293b; }
.pt-color-custom[b-edha3siftc] { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid var(--ps-border-soft); padding: 0; }

/* ═══ SOURCE TABS (logo upload/url) — mr-logo-source-tabs/mr-logo-tab ═══ */
.pt-src-tabs[b-edha3siftc] { display: flex; gap: 6px; }
.pt-src-tab[b-edha3siftc] {
    flex: 1; padding: 7px 10px; border-radius: 9px;
    border: 1px solid var(--ps-border-soft);
    background: rgba(255,255,255,.03);
    color: var(--ps-text-muted);
    font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all .15s; text-align: center;
}
.pt-src-tab:hover[b-edha3siftc] { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: var(--ps-accent-light); }
.pt-src-tab.active[b-edha3siftc] { background: rgba(99,102,241,.15); border-color: var(--ps-accent); color: var(--ps-accent-light); }
[data-theme="light"] .pt-src-tab[b-edha3siftc] { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #64748b; }
[data-theme="light"] .pt-src-tab.active[b-edha3siftc] { background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.3); color: var(--ps-accent); }

/* ═══ LOGO PREVIEW — mr-logo-preview-wrap/-img/-info/-name/-size/-clear ═══ */
.pt-logo-preview[b-edha3siftc] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,.03); border: 1px solid var(--ps-border-soft); border-radius: 10px; }
[data-theme="light"] .pt-logo-preview[b-edha3siftc] { background: rgba(255,255,255,.8); border-color: rgba(15,23,42,.1); }
.pt-logo-preview-img[b-edha3siftc] { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
.pt-logo-preview-info[b-edha3siftc] { flex: 1; min-width: 0; }
.pt-logo-preview-name[b-edha3siftc] { font-size: 11.5px; font-weight: 700; color: var(--ps-text); }
.pt-clear-btn[b-edha3siftc] {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid var(--ps-border-soft);
    background: rgba(239,68,68,.08); color: #f87171;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.pt-clear-btn:hover[b-edha3siftc] { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.3); }
.pt-clear-btn svg[b-edha3siftc] { width: 12px; height: 12px; }
.pt-size-row[b-edha3siftc] { display: flex; flex-direction: column; gap: 5px; }
.pt-size-label-row[b-edha3siftc] { display: flex; justify-content: space-between; align-items: center; }
.pt-size-val[b-edha3siftc] { font-size: 11px; font-weight: 800; color: var(--ps-accent-light); background: rgba(99,102,241,.1); border-radius: 5px; padding: 1px 7px; }

/* ═══ CONTENT-FIELDS GRID — mr-fields-grid/mr-field-card/mr-fc-icon/-info/-name/-hint ═══ */
.pt-fields-grid[b-edha3siftc] { display: flex; flex-direction: column; gap: 8px; }
.pt-field-card[b-edha3siftc] {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 11px 14px; border-radius: 11px;
    border: 1px solid var(--ps-border);
    background: rgba(255,255,255,.02);
    transition: background .15s, border-color .15s;
}
.pt-field-card:hover[b-edha3siftc] { background: rgba(255,255,255,.04); }
[data-theme="light"] .pt-field-card[b-edha3siftc] { background: rgba(255,255,255,.7); border-color: rgba(15,23,42,.08); }
[data-theme="light"] .pt-field-card:hover[b-edha3siftc] { background: rgba(255,255,255,.9); }
.pt-field-card.pt-fc-disabled .pt-fc-name[b-edha3siftc], .pt-field-card.pt-fc-disabled .pt-fc-hint[b-edha3siftc] { opacity: .4; }
.pt-fc-main-row[b-edha3siftc] { display: flex; align-items: center; gap: 12px; width: 100%; }
.pt-fc-icon[b-edha3siftc] { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.14); }
.pt-fc-info[b-edha3siftc] { flex: 1; min-width: 0; }
.pt-fc-name[b-edha3siftc] { font-size: 13px; font-weight: 800; color: var(--ps-text); }
.pt-fc-hint[b-edha3siftc] { font-size: 10px; color: var(--ps-text-muted); margin-top: 1px; }
.pt-fc-right[b-edha3siftc] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pt-fc-extras[b-edha3siftc] { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ═══ ADVANCED PANEL TOGGLE — rl-fc-adv-btn/rl-fc-icon-panel/rl-icon-row/rl-icon-mini-label ═══ */
.pt-adv-btn[b-edha3siftc] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 7px;
    border: 1px solid var(--ps-border-soft);
    background: rgba(255,255,255,.02);
    color: var(--ps-text-muted);
    font-family: Cairo, sans-serif; font-size: 10.5px; font-weight: 700;
    cursor: pointer; transition: all .15s; margin-top: 8px; align-self: flex-start;
}
.pt-adv-btn:hover[b-edha3siftc] { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: var(--ps-accent-light); }
[data-theme="light"] .pt-adv-btn[b-edha3siftc] { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #64748b; }
.pt-icon-panel[b-edha3siftc] { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ps-border-soft); }
.pt-icon-row[b-edha3siftc] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-icon-mini-label[b-edha3siftc] { font-size: 9px; font-weight: 700; color: var(--ps-text-muted); white-space: nowrap; flex-shrink: 0; width: 68px; }
.pt-icon-row .pt-input[b-edha3siftc], .pt-icon-row .pt-select[b-edha3siftc] { flex: 1; min-width: 90px; }

/* ═══ LAYOUT SEGMENTED CONTROL — rl-layout-toggle/rl-layout-option ═══ */
.pt-seg[b-edha3siftc] { display: flex; gap: 0; border: 1px solid var(--ps-border-soft); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.02); }
.pt-seg-option[b-edha3siftc] { flex: 1; padding: 8px 0; border: none; background: transparent; color: var(--ps-text-muted); font-family: Cairo, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; text-align: center; }
.pt-seg-option.active[b-edha3siftc] { background: var(--ps-accent); color: #fff; }
.pt-seg-option:hover:not(.active)[b-edha3siftc] { background: rgba(99,102,241,.08); }

/* ═══ SIZE PRESETS — rl-presets/rl-preset-btn ═══ */
.pt-presets[b-edha3siftc] { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-preset-btn[b-edha3siftc] {
    padding: 5px 11px; border-radius: 7px;
    border: 1px solid var(--ps-border-soft);
    background: rgba(255,255,255,.03);
    color: var(--ps-text-muted);
    font-family: Cairo, sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pt-preset-btn:hover[b-edha3siftc] { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: var(--ps-accent-light); }
[data-theme="light"] .pt-preset-btn[b-edha3siftc] { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #64748b; }

/* ═══ SAVE BUTTON — mr-save-btn/mi-save-btn/rl-save-btn ═══ */
.pt-save-btn[b-edha3siftc] {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-2));
    border: none; border-radius: 10px; color: #fff;
    font-family: Cairo, sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: opacity .2s, transform .15s; width: 100%;
}
.pt-save-btn:hover[b-edha3siftc] { opacity: .88; transform: translateY(-1px); }
.pt-save-btn:disabled[b-edha3siftc] { opacity: .6; cursor: default; transform: none; }
.pt-save-btn svg[b-edha3siftc] { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PREVIEW COLUMN — mr-preview-header/-icon/-title/-sub + mr-preview-stage-wrap (checkerboard)
   + mr-preview-footer/-hint. THIS is the column that fixes "the preview is too small": it is
   flex:1 of the whole pane (all remaining width after the fixed 470px settings column), not a
   cramped fixed box, and its stage gets generous centered padding so the artifact reads as
   prominent regardless of its own physical paper/label size.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.pt-preview-header[b-edha3siftc] {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--ps-border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-shrink: 0;
    background: var(--ps-panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pt-preview-title-wrap[b-edha3siftc] { display: flex; align-items: center; gap: 10px; }
.pt-preview-icon[b-edha3siftc] { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-preview-icon svg[b-edha3siftc] { width: 15px; height: 15px; }
.pt-preview-title[b-edha3siftc] { font-size: 13px; font-weight: 800; color: var(--ps-text); }
.pt-preview-sub[b-edha3siftc] { font-size: 10.5px; color: var(--ps-text-muted); margin-top: 1px; }

.pt-preview-stage-wrap[b-edha3siftc] {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 24px;
    overflow: auto;
    position: relative;
}
.pt-preview-stage-wrap[b-edha3siftc]::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-conic-gradient(rgba(255,255,255,.025) 0% 25%, transparent 0% 50%) 0 0/20px 20px;
    pointer-events: none;
}
[data-theme="light"] .pt-preview-stage-wrap[b-edha3siftc]::before {
    background: repeating-conic-gradient(rgba(15,23,42,.04) 0% 25%, transparent 0% 50%) 0 0/20px 20px;
}
.pt-preview-frame[b-edha3siftc] {
    position: relative; z-index: 1;
    border: none;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08);
    border-radius: 6px;
    flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
}

.pt-preview-footer[b-edha3siftc] {
    padding: 10px 20px;
    border-top: 1px solid var(--ps-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-shrink: 0;
    background: var(--ps-panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pt-preview-hint[b-edha3siftc] { font-size: 11px; color: var(--ps-text-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.pt-preview-hint svg[b-edha3siftc] { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }

/* ═══ RESPONSIVE — mr-/mi-/rl- @media blocks (identical breakpoints/values) ═══ */
@media (max-width: 640px) {
    .ps-header[b-edha3siftc] { padding: 14px 16px; gap: 10px; }
    .ps-header-title[b-edha3siftc] { font-size: 17px; }
    .ps-header-icon[b-edha3siftc] { width: 40px; height: 40px; border-radius: 11px; }
    .ps-header-icon svg[b-edha3siftc] { width: 19px; height: 19px; }
    .ps-tab[b-edha3siftc] { padding: 11px 13px; font-size: 12px; }
    .ps-tab-icon[b-edha3siftc] { width: 24px; height: 24px; }
}
@media (max-width: 400px) {
    .ps-header-sub[b-edha3siftc] { display: none; }
    .ps-tab[b-edha3siftc] { padding: 10px 11px; font-size: 11.5px; gap: 6px; }
    .ps-tab-label[b-edha3siftc] { display: none; }
    .ps-tab-icon[b-edha3siftc] { width: 28px; height: 28px; border-radius: 8px; }
}
@media (max-width: 560px) {
    .pt-section-body[b-edha3siftc] { padding: 0 14px 16px; }
    .pt-section-header[b-edha3siftc] { padding: 14px 14px 10px; }
    .pt-preset-btn[b-edha3siftc] { font-size: 10px; padding: 4px 8px; }
}