/* ============================================================
   PPphp Designer — consolidated stylesheet (v3 clean rebuild)
   Preserves the existing v2 "compact-pro" design language.
   Replaces 17 layered CSS patches with one source of truth.
   ============================================================ */

body.ppd-body {
    /* Design tokens (carried over from designer-v2 + final-professional-ui) */
    --ppd-shell-h: 56px;   /* matches project-shell.css .navbar-top (fixed-top) */
    --ppd-status-h: 34px;
    --ppd-workbar-h: 54px;
    --ppd-left-w: clamp(244px, 17vw, 296px);
    --ppd-right-w: clamp(300px, 19vw, 356px);

    --ppd-border: #dfe7f2;
    --ppd-border-soft: #e5edf6;
    --ppd-soft: #f1f5f9;
    --ppd-bg: #f6f9fd;
    --ppd-surface: #ffffff;
    --ppd-chrome: #ffffff;
    --ppd-chrome-soft: #f8fbff;
    --ppd-chrome-raised: #ffffff;
    --ppd-chrome-input: #ffffff;
    --ppd-chrome-hover: #f1f5f9;
    --ppd-text: #0f172a;
    --ppd-muted: #64748b;
    --ppd-primary: #2563eb;
    --ppd-primary-soft: #eff6ff;
    --ppd-primary-border: #bfdbfe;
    --ppd-danger: #dc2626;
    --ppd-ok: #16a34a;
    /* Console-theme snapshots — captured at chrome scope so they survive the
       canvas app-theme override; used by system previews (e.g. Admin Area). */
    --ppd-con-text: var(--ppd-text);
    --ppd-con-muted: var(--ppd-muted);
    --ppd-con-border: var(--ppd-border);
    --ppd-con-primary: var(--ppd-primary);
    --ppd-con-surface: #ffffff;
    --ppd-con-soft: #eef2ff;
    --ppd-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    --ppd-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);

    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--ppd-bg);
    color: var(--ppd-text);
}
html { height: 100%; }

body.ppd-left-collapsed { --ppd-left-w: 0px; }
body.ppd-right-collapsed { --ppd-right-w: 0px; }

/* ---------- Workspace grid ---------- */
.ppd-workspace {
    display: grid;
    grid-template-columns: var(--ppd-left-w) minmax(0, 1fr) var(--ppd-right-w);
    /* offset below the global fixed-top navbar so the workbar/canvas are never hidden */
    margin-top: var(--ppd-shell-h);
    height: calc(100vh - var(--ppd-shell-h) - var(--ppd-status-h));
    min-height: 0;
    overflow: hidden;
    background: var(--ppd-bg);
}

.ppd-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--ppd-surface);
    overflow: hidden;
}
/* Explicit columns so a collapsed (display:none) panel never makes the others reflow. */
.ppd-left { grid-column: 1; border-right: 1px solid var(--ppd-border); }
.ppd-right { grid-column: 3; border-left: 1px solid var(--ppd-border); }
body.ppd-left-collapsed .ppd-left,
body.ppd-right-collapsed .ppd-right { display: none; }

.ppd-panel-head {
    height: var(--ppd-workbar-h);
    min-height: var(--ppd-workbar-h);
    max-height: var(--ppd-workbar-h);
    box-sizing: border-box;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ppd-border);
    background: #fcfdff;
}
.ppd-panel-head strong { display: block; font-size: 13.5px; font-weight: 800; }
.ppd-panel-head small { display: block; color: var(--ppd-muted); font-size: 11px; }

.ppd-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }

/* ---------- Buttons ---------- */
.ppd-icon-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--ppd-border);
    border-radius: 10px;
    background:var(--pp-surface,#fff); color: var(--ppd-text);
    display: inline-grid; place-items: center; cursor: pointer;
    box-shadow: var(--ppd-shadow-sm);
}
.ppd-icon-btn:hover { color: var(--ppd-primary); background: var(--ppd-primary-soft); border-color: var(--ppd-primary-border); }

.ppd-btn {
    height: 34px; border: 1px solid var(--ppd-border); border-radius: 10px;
    background:var(--pp-surface,#fff); color: var(--ppd-text); padding: 0 12px;
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ppd-btn:hover { border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-btn.primary { background: var(--ppd-primary); border-color: var(--ppd-primary); color:var(--pp-primary-text,#fff); }
.ppd-btn.primary:hover { filter: brightness(1.05); }
.ppd-btn.danger { color: var(--ppd-danger); border-color:var(--pp-danger-border,#fecaca); }
.ppd-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Left panel — dense, professional sidebar
   (designed to scale to 100+ tables / 400+ components)
   ============================================================ */

/* Tabs — segmented control */
/* ── Section tabs ────────────────────────────────────────────────────────────
   Same segmented control as the Style module's editor tabs, so the two panels
   read as one product. The panel is fluid (clamp(244px, 17vw, 296px)), so the
   adaptive rule uses a container query on the panel itself, not the viewport.

   Stays text-only. The panel is capped at 296px, and measuring it with icons
   shown clips ALL THREE labels (e.g. "Components" needs 74px in a 70px span) —
   so the icons are kept hidden rather than shipping a truncating layout. */
.ppd-tabs {
    /* The panel is a flex column, so the nav must not shrink — without this it
       gets squashed to ~15px. The old rule masked it with an explicit button
       height; pinning the track is the actual fix. */
    flex: 0 0 auto;
    display: flex; gap: 2px; margin: 8px 8px 6px; padding: 3px;
    background: var(--pp-surface-muted, #eef2f8); border: 1px solid var(--ppd-border-soft);
    border-radius: 11px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ppd-tabs::-webkit-scrollbar { display: none; }
.ppd-tabs button {
    flex: 1 1 auto; min-height: 30px; border: 0; border-radius: 8px; padding: 6px 6px;
    background: transparent; color: var(--ppd-muted); font-size: 11px; font-weight: 700; letter-spacing: -.01em;
    line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; white-space: nowrap; overflow: hidden;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
/* Icons now show — each tab carries its own accent (--tab-c) so the three
   sections are colour-coded: Pages indigo, Components teal, Fields amber. The
   icon wears the accent even when the tab is idle, adding colour + recognition. */
.ppd-tabs button i { display: inline-flex; font-size: 15px; flex: 0 0 auto; color: var(--tab-c, var(--ppd-muted)); transition: color .15s ease, transform .15s ease; }
/* Segmented control that always fits: idle tabs are icon-only (their name is one
   hover away via the tooltip); the ACTIVE tab expands to show its label. So only
   ever one label is on screen, which can't overflow even a narrow sidebar. */
.ppd-tabs button span { overflow: hidden; text-overflow: ellipsis; max-width: 0; opacity: 0; transition: max-width .2s ease, opacity .18s ease; }
.ppd-tabs button.active { flex: 4 1 auto; }
.ppd-tabs button:not(.active) { flex: 0 1 auto; }
.ppd-tabs button.active span { max-width: 120px; opacity: 1; }
.ppd-tabs button[data-ppd-tab="pages"]      { --tab-c: #6d5dfc; }
.ppd-tabs button[data-ppd-tab="components"] { --tab-c: #0d9488; }
.ppd-tabs button[data-ppd-tab="fields"]     { --tab-c: #ea7a0c; }
.ppd-tabs button:hover:not(.active) { background: color-mix(in srgb, var(--tab-c) 12%, var(--pp-surface, #fff)); color: var(--ppd-text); }
.ppd-tabs button:hover:not(.active) i { transform: translateY(-1px); }
.ppd-tabs button:focus-visible { outline: 2px solid var(--tab-c, var(--ppd-primary)); outline-offset: -2px; }
/* Selected = a FILLED pill in the section's accent, white glyph, soft matching
   glow + a hair of lift. Colour-coded so the active section reads at a glance. */
.ppd-tabs button.active {
    background: var(--tab-c, var(--ppd-primary));
    color: #fff; font-weight: 800; transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tab-c, var(--ppd-primary)) 45%, transparent);
}
.ppd-tabs button.active i { color: #fff; }
.ppd-tab-section { display: none; padding: 4px 8px 10px; }
.ppd-tab-section.active { display: block; }

/* NOTE: lines 168-1033 used to hold a byte-identical duplicate of the block
   that follows (a copy-paste accident). Removed 2026-07-26 — verified by
   computed-style fingerprint over 794 elements before/after. */
/* Collapsible section header (Common Pages / Tables) */
.ppd-section { margin-bottom: 6px; }
.ppd-section-title {
    width: 100%; height: 28px; border: 0; border-radius: 6px;
    background: transparent; padding: 0 8px; display: flex; align-items: center; gap: 6px;
    color: #51607a; font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
}
.ppd-section-title:hover { background:var(--pp-surface-soft,#f1f5f9); color: var(--ppd-text); }
.ppd-section-title > span { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ppd-section-title > span i { font-size: 12px; color:var(--pp-muted,#94a3b8); }
.ppd-section-title em { font-style: normal; background:var(--pp-track,#e8eef6); color: var(--ppd-muted); border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 800; }
.ppd-section-title .bi-chevron-right { transition: transform .15s ease; font-size: 10px; color:var(--pp-muted,#94a3b8); }
.ppd-section-title[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }
.ppd-section-body { display: none; padding: 2px 0 4px; }
.ppd-section-body.open { display: block; }

/* Search */
.ppd-search {
    height: 30px; border: 1px solid var(--ppd-border); border-radius: 8px;
    display: flex; align-items: center; gap: 7px; padding: 0 9px;
    color: var(--ppd-muted); background:var(--pp-surface,#fff); margin: 2px 0 6px;
}
.ppd-search i { font-size: 12px; }
.ppd-search input { border: 0; outline: 0; width: 100%; min-width: 0; background: transparent; font: inherit; font-size: 12.5px; }
.ppd-search:focus-within { border-color: var(--ppd-primary); box-shadow:var(--pp-shadow-md,0 0 0 3px rgba(37,99,235,.1)); }
/* keep the table search in view while a long table list scrolls */
[data-ppd-panel="tables"] .ppd-search { position: sticky; top: -8px; z-index: 3; }
.ppd-section-note { display: block; padding: 4px 10px 8px; color: var(--ppd-muted); font-size: 10.5px; line-height: 1.5; }
.ppd-section + .ppd-section { margin-top: 4px; padding-top: 4px; border-top: 1px solid #eef2f7; }

/* Flat, dense tree-style rows (pages, tables) */
.ppd-list { display: flex; flex-direction: column; gap: 1px; }
.ppd-list-item {
    min-height: 28px; border: 0; border-radius: 6px; position: relative;
    background: transparent; padding: 0 8px; display: flex; align-items: center; gap: 8px;
    color:var(--pp-text,#334155); font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; width: 100%;
}
.ppd-list-item > i { font-size: 13px; color:var(--pp-muted,#94a3b8); flex: 0 0 auto; }
.ppd-list-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-list-item em { font-style: normal; color:var(--pp-muted,#94a3b8); font-size: 10px; font-weight: 700; background:var(--pp-surface-soft,#f1f5f9); border-radius: 999px; padding: 0 6px; flex: 0 0 auto; }
.ppd-list-item:hover { background:var(--pp-surface-soft,#f1f5f9); }
.ppd-list-item.active { background: var(--ppd-primary-soft); color: var(--ppd-primary); font-weight: 800; }
.ppd-list-item.active > i { color: var(--ppd-primary); }
.ppd-list-item.active em { background:var(--pp-primary-soft,#dbeafe); color: var(--ppd-primary); }
.ppd-list-item.active::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ppd-primary); }
/* Compact density for long lists (Tables can reach 50–100+): tighter rows, a
   lighter count badge, one line each — keeps a big list scannable. */
/* `.ppd-list.ppd-list--compact` (two classes) so this beats the later global
   `.ppd-list { gap: 8px }` rule regardless of source order. */
.ppd-list.ppd-list--compact { gap: 0; }
.ppd-list--compact .ppd-list-item { min-height: 23px; padding: 1px 8px; border-radius: 5px; gap: 7px; font-size: 12px; }
.ppd-list--compact .ppd-list-item > i { font-size: 12px; }
.ppd-list--compact .ppd-list-item span { font-size: 12px; }
.ppd-list--compact .ppd-list-item em { background: transparent; color: var(--pp-muted, #94a3b8); font-size: 10px; padding: 0 2px; min-width: 12px; text-align: right; }
.ppd-list--compact .ppd-list-item.active em { background: transparent; }
/* Tighter selected rail for the shorter rows. */
.ppd-list--compact .ppd-list-item.active::before { top: 3px; bottom: 3px; }

/* Custom Pages: per-row rename/delete actions (revealed on hover/focus, swapping
   in for the table badge to save width) + a dashed "New custom page" row. */
.ppd-custom-item { position: relative; }
.ppd-item-actions { display: none; align-items: center; gap: 1px; flex: 0 0 auto; }
.ppd-custom-item:hover .ppd-item-actions, .ppd-custom-item:focus-within .ppd-item-actions { display: inline-flex; }
.ppd-custom-item:hover > em, .ppd-custom-item:focus-within > em { display: none; }
.ppd-item-act { border: 0; background: transparent; color: var(--ppd-muted); font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 6px; cursor: pointer; display: inline-flex; }
.ppd-item-act:hover { background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-item-act.danger:hover { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
.ppd-newpage { color: var(--ppd-primary); font-weight: 700; border: 1px dashed var(--ppd-border) !important; border-radius: 7px; justify-content: flex-start; margin-top: 4px; }
.ppd-newpage > i { color: var(--ppd-primary) !important; }
.ppd-newpage:hover { background: var(--ppd-primary-soft); border-color: var(--ppd-primary) !important; }
/* Swal: the New-page form (table select + name). */
.ppd-swal-form { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.ppd-swal-form label { font-size: 12px; font-weight: 700; color: var(--pp-text, #334155); margin: 8px 2px 0; }
.ppd-swal-form .swal2-select, .ppd-swal-form .swal2-input { margin: 4px 0 0; width: 100%; }
.ppd-swal-hint { display: block; margin: 4px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--pp-muted, #64748b); }
.ppd-starter-name-input { margin-top: 4px !important; }
.ppd-starter-search { margin: 4px 0 8px !important; font-size: 13px !important; }
/* Starter-layout picker cards (console-only, inside the New-page dialog). */
.ppd-starter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 4px; }
.ppd-starter-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 8px 8px 12px; border-radius: 12px; border: 1.5px solid var(--ppd-border, #e2e8f0); background: var(--pp-surface, #fff); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ppd-starter-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ppd-primary, #6d5dfc) 45%, transparent); }
.ppd-starter-card input { position: absolute; opacity: 0; pointer-events: none; }
.ppd-starter-card > i { font-size: 22px; color: var(--ppd-primary, #6d5dfc); }
.ppd-starter-thumb-box { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--pp-surface-soft, #f8fafc); border: 1px solid var(--ppd-border-soft, #eef2f7); }
.ppd-starter-thumb { display: block; width: 100%; height: 100%; }
.ppd-starter-name { font-size: 13px; font-weight: 700; color: var(--pp-text, #0f172a); margin-top: 1px; }
.ppd-starter-card small { font-size: 10.5px; line-height: 1.35; color: var(--pp-muted, #64748b); }
.ppd-starter-card.is-sel { border-color: var(--ppd-primary, #6d5dfc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppd-primary, #6d5dfc) 18%, transparent); }
.ppd-starter-card.is-sel::after { content: '✓'; position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 800; color: var(--ppd-primary, #6d5dfc); }
@media (max-width: 600px) { .ppd-starter-grid { grid-template-columns: repeat(2, 1fr); } }
/* Standalone badge on a custom-page row. */
.ppd-badge-std { color: #6d5dfc !important; background: color-mix(in srgb, #6d5dfc 14%, transparent) !important; font-weight: 800 !important; }

/* ---------- Left-panel footer: Common + Templates (compact, popover) -------
   Theme-aware: uses the --ppd-chrome* tokens (defined for dark, light-fallback
   here) so the bar + chips + popover flip with the selected console theme
   instead of staying white. */
.ppd-left-foot {
    flex: 0 0 auto; position: relative; display: flex; gap: 7px; padding: 8px;
    border-top: 1px solid var(--ppd-border);
    background: var(--ppd-chrome, #fcfdff);
}
.ppd-left-foot[hidden] { display: none; }
.ppd-foot-chip {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
    border: 1px solid var(--ppd-border); border-radius: 9px;
    background: var(--ppd-chrome-raised, #fff); color: var(--ppd-text);
    font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--ppd-text) 6%, transparent);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.ppd-foot-chip > i { font-size: 14px; color: var(--ppd-muted); flex: 0 0 auto; transition: color .14s ease; }
.ppd-foot-chip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ppd-foot-chip em {
    font-style: normal; font-size: 10px; font-weight: 800; color: var(--ppd-muted);
    background: color-mix(in srgb, var(--ppd-muted) 16%, transparent); border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; line-height: 1.5;
}
.ppd-foot-chip:hover { border-color: var(--ppd-primary); color: var(--ppd-primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--ppd-primary) 22%, transparent); transform: translateY(-1px); }
.ppd-foot-chip:hover > i { color: var(--ppd-primary); }
.ppd-foot-chip:active { transform: translateY(0); }
.ppd-foot-chip.open {
    background: var(--ppd-primary-soft); border-color: var(--ppd-primary); color: var(--ppd-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ppd-primary) 30%, transparent);
}
.ppd-foot-chip.open > i { color: var(--ppd-primary); }
.ppd-foot-chip.open em { background: color-mix(in srgb, var(--ppd-primary) 20%, transparent); color: var(--ppd-primary); }
/* "You are here": when the page open in the canvas belongs to a footer group,
   that chip is flagged .is-current — it accents, EXPANDS to show the open page's
   name (a live dot + label), and the sibling compresses to an icon + count. */
.ppd-foot-now {
    display: none; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto;
    font-size: 11px; font-weight: 800; color: var(--ppd-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppd-foot-now::before {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ppd-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppd-primary) 22%, transparent);
}
.ppd-foot-chip.is-current {
    background: var(--ppd-primary-soft); border-color: var(--ppd-primary); color: var(--ppd-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ppd-primary) 34%, transparent), 0 2px 8px color-mix(in srgb, var(--ppd-primary) 18%, transparent);
}
.ppd-foot-chip.is-current > i { color: var(--ppd-primary); }
.ppd-foot-chip.is-current .ppd-foot-lbl { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .72; }
.ppd-foot-chip.is-current .ppd-foot-count { display: none; }
.ppd-foot-chip.is-current .ppd-foot-now { display: inline-flex; }
/* Expand the current chip, compress the sibling to icon + count. */
.ppd-left-foot.has-current .ppd-foot-chip { flex: 0 0 auto; }
.ppd-left-foot.has-current .ppd-foot-chip.is-current { flex: 1 1 auto; min-width: 0; }
.ppd-left-foot.has-current .ppd-foot-chip:not(.is-current) .ppd-foot-lbl { display: none; }
/* Popover floats UP from the footer so it never pushes the tables list. */
.ppd-foot-pop {
    position: absolute; left: 8px; right: 8px; bottom: calc(100% + 7px); z-index: 40;
    background: var(--ppd-chrome-raised, #fff); border: 1px solid var(--ppd-border); border-radius: 13px;
    box-shadow: var(--ppd-shadow, 0 16px 40px rgba(2, 6, 23, .18)); overflow: hidden;
    display: flex; flex-direction: column; max-height: 56vh;
    animation: ppdFootPop .13s cubic-bezier(.2, .8, .2, 1);
}
@keyframes ppdFootPop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.ppd-foot-pop[hidden] { display: none; }
.ppd-foot-pop-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 800;
    color: var(--ppd-text); border-bottom: 1px solid var(--ppd-border);
    background: var(--ppd-chrome-soft, #fbfcfe);
}
.ppd-foot-pop-head i { color: var(--ppd-primary); font-size: 13px; }
.ppd-foot-pop-x { margin-left: auto; border: 0; background: transparent; color: var(--ppd-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 6px; transition: background .12s, color .12s; }
.ppd-foot-pop-x:hover { background: var(--ppd-chrome-hover, #f1f5f9); color: var(--ppd-text); }
.ppd-foot-pop-body { padding: 6px; overflow: auto; scrollbar-width: thin; }
/* Header pieces (back arrow + icon + title) for the drill-in view. */
.ppd-foot-pop-hicon { color: var(--ppd-primary); font-size: 13px; }
.ppd-foot-pop-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-foot-pop-back { border: 0; background: transparent; color: var(--ppd-primary); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; margin: -2px 0 -2px -2px; border-radius: 7px; display: inline-flex; }
.ppd-foot-pop-back[hidden] { display: none; }
.ppd-foot-pop-back:hover { background: var(--ppd-chrome-hover, #eef2ff); }
/* Drill-in: the page list gives way so the template gallery fills the popover. */
.ppd-foot-pop.is-gallery #ppdCommonList { display: none; }
.ppd-foot-pop.is-gallery .ppd-login-template-picker { margin: 0; padding-top: 0; border-top: 0; }
.ppd-foot-pop.is-gallery { max-height: min(640px, 82vh); }
/* Template gallery: a clear section header + roomier, tappable cards. */
.ppd-tpl-head { display: none; align-items: center; gap: 6px; padding: 4px 4px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ppd-muted); }
.ppd-tpl-head i { color: var(--ppd-primary); font-size: 12px; }
.ppd-foot-pop.is-gallery .ppd-tpl-head { display: flex; }

/* ---------- Components palette (compact tiles) ---------- */
.ppd-comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ppd-comp-card {
    position: relative;
    min-height: 48px; border: 1px solid var(--ppd-border); border-radius: 8px; background:var(--pp-surface,#fff);
    display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px 4px;
    color:var(--pp-text,#475569); font-weight: 700; font-size: 10.5px; line-height: 1.1; text-align: center; cursor: grab;
    transition: border-color .12s, background .12s, color .12s;
}
.ppd-comp-hot { position: absolute; top: 4px; right: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #f97316, #ef4444); padding: 1px 5px; border-radius: 999px; line-height: 1.5; box-shadow: 0 1px 2px rgba(2,6,23,.18); pointer-events: none; }
.ppd-comp-card.is-hot { border-color: color-mix(in srgb, #f97316 40%, var(--ppd-border)); }
.ppd-comp-card:hover { border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-comp-card i { font-size: 15px; color: var(--ppd-primary); }
.ppd-comp-card.dragging { opacity: .5; }
.ppd-cat-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color:var(--pp-muted,#94a3b8); margin: 10px 2px 5px; }
.ppd-cat-label:first-child { margin-top: 2px; }

/* Login template chooser */
.ppd-login-template-picker { margin: 5px 5px 7px; padding-top: 3px; border-top: 1px solid var(--ppd-border-soft); }
.ppd-login-template-picker[hidden] { display: none; }
.ppd-login-template-picker > small { display: block; margin: 7px 3px 3px; color: var(--ppd-muted); font-size: 10.5px; line-height: 1.4; }
.ppd-login-template { width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: 9px; padding: 5px;
    display: grid; grid-template-columns: 54px minmax(0,1fr) 16px; align-items: center; gap: 8px; background: transparent; color: var(--ppd-text); text-align: left; cursor: pointer; }
.ppd-login-template:hover { background:var(--pp-surface-soft,#f8fafc); border-color: var(--ppd-border); }
.ppd-login-template.active { background: var(--ppd-primary-soft); border-color: var(--ppd-primary-border); }
.ppd-login-template:disabled { opacity: .55; cursor: wait; }
.ppd-login-template > span:nth-child(2) { min-width: 0; }
.ppd-login-template strong, .ppd-login-template small { display: block; }
.ppd-login-template strong { font-size: 11.5px; }
.ppd-login-template small { margin-top: 2px; color: var(--ppd-muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppd-login-template > .bi-check-circle-fill { color: var(--ppd-primary); opacity: 0; }
.ppd-login-template.active > .bi-check-circle-fill { opacity: 1; }
.ppd-login-template-preview { height: 38px; border-radius: 7px; overflow: hidden; position: relative; display: grid; place-items: center; color:var(--pp-primary-text,#fff); }
.ppd-login-template-preview::before, .ppd-login-template-preview::after, .ppd-login-template-preview b { content: ""; position: absolute; }
.ppd-login-template-preview i { position: relative; z-index: 2; font-size: 11px; }
.ppd-login-template-preview.is-aurora { background: linear-gradient(135deg,#11152d 0 54%,#f7f8fc 54%); }
.ppd-login-template-preview.is-aurora::after { width: 13px; height: 18px; right: 8px; background:var(--pp-surface,#fff); border-radius: 3px; box-shadow: 0 2px 7px #0f172a24; }
.ppd-login-template-preview.is-halo { background: radial-gradient(circle at 25% 20%,#a78bfa,#3b1c81 44%,#100b2d); }
.ppd-login-template-preview.is-halo::after { width: 18px; height: 25px; background: #ffffffc9; border: 1px solid #ffffffaa; border-radius: 4px; }
.ppd-login-template-preview.is-executive { background: linear-gradient(90deg,#e6eeeb 0 43%,var(--pp-surface,#fff) 43%); }
.ppd-login-template-preview.is-executive::after { width: 17px; height: 22px; right: 8px; background:var(--pp-surface,#fff); border:1px solid var(--pp-border,#cbd5e1); border-radius: 3px; }
.ppd-login-template-preview.is-verdant {
    background:
        radial-gradient(90% 55% at 8% 92%,#235037 0 43%,transparent 44%),
        radial-gradient(90% 55% at 94% 82%,#7ea94a 0 46%,transparent 47%),
        linear-gradient(180deg,#78989a 0 43%,#ddc48f 44% 55%,#659042 56% 100%);
}
.ppd-login-template-preview.is-verdant::after {
    width: 18px; height: 25px; border: 1px solid #ffffffc7; border-radius: 5px;
    background: #183a2d66; box-shadow: 0 3px 8px #10291f55; backdrop-filter: blur(4px);
}

/* Field chips (dense rows) */
.ppd-field-chip {
    border: 0; border-radius: 6px; background: transparent; padding: 0 8px; min-height: 26px;
    display: flex; align-items: center; gap: 7px; color:var(--pp-text,#334155); font-size: 12px; font-weight: 600; cursor: grab; width: 100%;
    /* it's a <button>: the UA default text-align:center centred the field NAME
       inside its flex:1 span. Field name reads left, type reads right. */
    text-align: left;
}
.ppd-field-chip i { font-size: 12px; color:var(--pp-muted,#94a3b8); flex: 0 0 auto; }
.ppd-field-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-field-chip small { color:var(--pp-muted,#94a3b8); font-weight: 500; font-size: 10px; flex: 0 0 auto;
    text-align: right; white-space: nowrap; }
.ppd-field-chip:hover { background:var(--pp-surface-soft,#f1f5f9); }

.ppd-muted { color: var(--ppd-muted); padding: 10px 8px; font-size: 12px; }

/* ---------- Main / workbar ---------- */
.ppd-main {
    grid-column: 2;
    display: grid; grid-template-rows: var(--ppd-workbar-h) minmax(0, 1fr);
    min-width: 0; min-height: 0; height: 100%; overflow: hidden;
    background-image: radial-gradient(#d9e4f2 1px, transparent 1px);
    background-size: 18px 18px; background-color:var(--pp-surface-soft,#f8fbff);
}
.ppd-workbar {
    display: grid; grid-template-columns: 34px minmax(120px, 188px) minmax(220px, 1fr) auto;
    align-items: center; gap: 9px; height: var(--ppd-workbar-h); min-height: var(--ppd-workbar-h); max-height: var(--ppd-workbar-h); box-sizing: border-box; padding: 0 12px;
    background: rgba(255,255,255,.99); border-bottom: 1px solid var(--ppd-border);
    box-shadow:var(--pp-shadow-sm,0 1px 0 rgba(15,23,42,.03));
}
.ppd-context { min-width: 0; padding-right: 10px; border-right: 1px solid var(--ppd-border-soft); }
.ppd-kicker { display: flex; align-items: center; gap: 5px; color: var(--ppd-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ppd-context strong { display: block; font-size: 14px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-context small { display: block; font-size: 11px; color: var(--ppd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ribbon + its compact scroll arrows. The wrap is the flex child of the toolbar;
   the arrows only appear (via .has-nav) when the page-type list overflows, so a
   normal table shows none and nothing else in the toolbar shifts. */
.ppd-ribbon-wrap { display: flex; align-items: stretch; min-width: 0; gap: 4px; }
.ppd-ribbon-nav {
    flex: 0 0 auto; width: 22px; align-self: center; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ppd-border); border-radius: 8px; background: var(--ppd-chrome-raised, #fff); color: var(--ppd-muted);
    font-size: 12px; cursor: pointer; box-shadow: var(--ppd-shadow-sm); transition: color .12s, border-color .12s, background .12s;
}
.ppd-ribbon-nav:hover { color: var(--ppd-primary); border-color: var(--ppd-primary); background: var(--ppd-chrome-hover, #f8fbff); }
.ppd-ribbon-nav[hidden] { display: none; }
.ppd-ribbon {
    flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; height: 36px; overflow-x: auto; overflow-y: hidden;
    border: 1px solid var(--ppd-border); border-radius: 10px; background:var(--pp-surface,#fff); box-shadow: var(--ppd-shadow-sm); scrollbar-width: none;
}
.ppd-ribbon::-webkit-scrollbar { display: none; }
.ppd-ribbon button {
    flex: 0 0 auto; min-width: 56px; height: 34px; padding: 0 13px; border: 0; border-right: 1px solid var(--ppd-border-soft);
    background:var(--pp-surface,#fff); color: var(--ppd-text); font-size: 12.5px; font-weight: 800; cursor: pointer; position: relative;
}
.ppd-ribbon button:last-child { border-right: 0; }
.ppd-ribbon button:hover { background:var(--pp-surface-soft,#f8fbff); color: var(--ppd-primary); }
.ppd-ribbon button.active { background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-ribbon button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ppd-primary); }

.ppd-toolset { display: flex; align-items: center; gap: 8px; min-width: max-content; }
.ppd-device-switch { display: flex; height: 36px; border: 1px solid var(--ppd-border); border-radius: 10px; overflow: hidden; background:var(--pp-surface,#fff); }
.ppd-device-switch button { width: 36px; border: 0; border-right: 1px solid var(--ppd-border-soft); background:var(--pp-surface,#fff); color: var(--ppd-muted); cursor: pointer; }
.ppd-device-switch button:last-child { border-right: 0; }
.ppd-device-switch button:hover { color: var(--ppd-primary); background: var(--ppd-primary-soft); }
.ppd-device-switch button.active { background: var(--ppd-primary); color:var(--pp-primary-text,#fff); }
.ppd-tool-btn {
    height: 36px; min-width: 36px; padding: 0 11px; border: 1px solid var(--ppd-border); border-radius: 10px;
    background:var(--pp-surface,#fff); color: var(--ppd-text); display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: var(--ppd-shadow-sm);
}
.ppd-tool-btn:hover, .ppd-tool-btn.active { background: var(--ppd-primary-soft); color: var(--ppd-primary); border-color: var(--ppd-primary-border); }
.ppd-icon-btn.is-off { background: var(--ppd-primary-soft); color: var(--ppd-primary); border-color: var(--ppd-primary-border); }

/* ---------- Canvas ---------- */
.ppd-canvas-wrap { min-width: 0; min-height: 0; height: 100%; overflow: auto; padding: 14px 18px 22px; }
.ppd-canvas {
    width: min(100%, 1180px); max-width: 100%; min-height: 540px; margin: 0 auto;
    background:var(--pp-surface,#fff); border: 1px solid #dbe4f0; border-radius: 14px; box-shadow: var(--ppd-shadow); overflow: hidden;
    transform-origin: top center;
}
/* Locked page (Properties → Lock page): amber ring + corner chip; edits are
   blocked in model.lockedGuard(), this is the visual cue. */
.ppd-canvas-locked { position: relative; box-shadow: var(--ppd-shadow), 0 0 0 2px #fcd34d inset; }
.ppd-canvas-locked::after {
    content: "🔒 Page locked"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 45;
    background:var(--pp-warning-soft,#fef3c7); color:var(--pp-warning-text,#92400e); border: 1px solid #fcd34d; border-radius: 999px;
    padding: 3px 11px; font-size: 11px; font-weight: 700; pointer-events: none; box-shadow:var(--pp-shadow-sm,0 2px 6px rgba(0,0,0,.08));
}
.ppd-device-tablet .ppd-canvas, .ppd-canvas.ppd-device-tablet { width: min(100%, 840px); }
.ppd-device-mobile .ppd-canvas, .ppd-canvas.ppd-device-mobile { width: min(100%, 420px); }

.ppd-page-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--ppd-border); background:var(--pp-surface-soft,#f8fbff);
}
.ppd-page-head .t { font-size: 16px; font-weight: 900; }
.ppd-page-head .s { font-size: 12px; color: var(--ppd-muted); }
.ppd-live-badge { font-size: 11px; font-weight: 800; color: var(--ppd-primary); background: var(--ppd-primary-soft); border: 1px solid var(--ppd-primary-border); border-radius: 999px; padding: 3px 10px; }

.ppd-page-body { padding: 16px 18px; display: grid; gap: 12px; }

/* component wrappers (selectable units on canvas) */
.ppd-node {
    position: relative; border: 1px solid transparent; border-radius: 12px; transition: outline .12s, background .12s;
}
.ppd-node:hover { outline: 1px dashed #93c5fd; outline-offset: 2px; }
.ppd-node.selected { outline: 2px solid var(--ppd-primary); outline-offset: 2px; }
.ppd-node.selected::after {
    content: attr(data-label); position: absolute; top: -20px; right: 6px; z-index: 6;
    background:var(--pp-text,#0f172a); color:var(--pp-primary-text,#fff); border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.ppd-node.ppd-drop-before { box-shadow: 0 -3px 0 var(--ppd-primary); }
.ppd-node.ppd-drop-after { box-shadow: 0 3px 0 var(--ppd-primary); }
.ppd-node-tools {
    position: absolute; top: -14px; left: 6px; z-index: 7; display: none; gap: 4px;
}
.ppd-node.selected .ppd-node-tools { display: flex; }
.ppd-node-tools button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); color:var(--pp-text,#334155); display: grid; place-items: center; cursor: pointer; font-size: 12px; box-shadow: var(--ppd-shadow-sm); }
.ppd-node-tools button:hover { color: var(--ppd-primary); border-color: var(--ppd-primary-border); }
.ppd-node-tools button.del:hover { color: var(--ppd-danger); border-color:var(--pp-danger-border,#fecaca); }
/* Field-controls button is tinted so it reads as "configure this field's controls". */
.ppd-node-tools button.fc { color: var(--ppd-primary); border-color: var(--ppd-primary-border); }
.ppd-node-tools button.fc:hover { background: var(--ppd-primary-soft, #eef2ff); }

/* canvas drop zone (empty / between) */
.ppd-canvas.ppd-drop-active .ppd-page-body { outline: 2px dashed var(--ppd-primary); outline-offset: -6px; }
.ppd-empty {
    min-height: 280px; margin: 16px; border:1px dashed var(--pp-border,#cbd5e1); border-radius: 16px; background: rgba(248,250,252,.75);
    display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: var(--ppd-muted);
}
.ppd-empty strong { color: var(--ppd-text); font-size: 17px; }
.ppd-empty-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: var(--ppd-primary); background: var(--ppd-primary-soft); border: 1px dashed #93c5fd; font-size: 24px; }

/* ---------- Rendered component primitives ---------- */
.ppd-c-heading { font-weight: 900; margin: 0; }
.ppd-c-heading.h1 { font-size: 26px; } .ppd-c-heading.h2 { font-size: 21px; } .ppd-c-heading.h3 { font-size: 17px; }
.ppd-c-text { color:var(--pp-text,#334155); line-height: 1.5; }
.ppd-c-section { border: 1px solid var(--sec-border, var(--ppd-border)); border-radius: var(--sec-radius, 14px); overflow: hidden; }
.ppd-c-section > .h { padding: 9px 12px; font-weight: 800; background:var(--pp-surface-soft,#f8fbff); border-bottom: 1px solid var(--ppd-border); display:flex; gap:8px; align-items:center; }
.ppd-c-section > .b { padding: 12px; display: grid; gap: 10px; }
.ppd-c-section.card { box-shadow: var(--ppd-shadow-sm); }
.ppd-c-section.shadow-sm { box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(2,6,23,.06)); }
.ppd-c-section.shadow-md { box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }
.ppd-c-section.shadow-lg { box-shadow: var(--pp-shadow-lg, 0 12px 28px rgba(2,6,23,.16)); }
.ppd-c-section.is-collapsed > .b { display: none; }
.ppd-c-section .ppd-fold-ic { margin-left: auto; transition: transform .15s ease; }
.ppd-c-section.is-foldable .ppd-fold-ic { cursor: pointer; pointer-events: auto; padding: 2px 4px; border-radius: 6px; }
.ppd-c-section.is-foldable .ppd-fold-ic:hover { background: var(--pp-surface-soft,#eef2ff); color: var(--ppd-primary); }
.ppd-c-section.is-collapsed .ppd-fold-ic { transform: rotate(-90deg); }
.ppd-c-section.shadow-none { box-shadow: none; }
.ppd-c-section.is-hover { transition: transform .18s ease, box-shadow .18s ease; }
.ppd-c-section.is-hover:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-lg, 0 12px 28px rgba(2,6,23,.16)); }
.ppd-c-section.is-accent-top { border-top: 3px solid var(--card-accent, var(--ppd-primary)); }
.ppd-c-section.is-accent-left { border-left: 3px solid var(--card-accent, var(--ppd-primary)); }

.ppd-c-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ppd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); font-size: 12px; font-weight: 600; }
.ppd-sep { color: var(--ppd-muted); }

.ppd-c-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ppd-c-toolbar .grow { flex: 1; }

.ppd-c-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ppd-border); border-radius: 10px; padding: 7px 10px; color: var(--ppd-muted); background:var(--pp-surface,#fff); }
.ppd-c-search input { border: 0; outline: 0; background: transparent; width: 100%; }
.ppd-c-search-form { display: flex; align-items: center; gap: 8px; }
.ppd-c-search-form .ppd-c-search { flex: 1 1 auto; }
.ppd-c-search-btn { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 8px 16px; font-weight: 600; font-size: 13px; cursor: pointer; background: var(--pp-primary, var(--ppd-primary)); color: var(--pp-primary-text, #fff); }
.ppd-c-search-btn:hover { filter: brightness(1.05); }
.ppd-c-search-form.pp-search-sm { max-width: 320px; } .ppd-c-search-form.pp-search-sm .ppd-c-search { padding: 5px 9px; font-size: 12.5px; } .ppd-c-search-form.pp-search-sm .ppd-c-search-btn { padding: 6px 12px; font-size: 12.5px; }
.ppd-c-search-form.pp-search-md { max-width: 480px; }
.ppd-c-search-form.pp-search-lg { max-width: 100%; } .ppd-c-search-form.pp-search-lg .ppd-c-search { padding: 10px 14px; font-size: 15px; } .ppd-c-search-form.pp-search-lg .ppd-c-search-btn { padding: 11px 22px; font-size: 15px; }
/* dbcolumns multi-picker (inspector only — not shipped to generated apps) */
.ppd-dbcols { display: flex; flex-direction: column; gap: 6px; }
.ppd-dbcol-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 4px; }
.ppd-dbcol-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--ppd-primary-soft, #eef2ff); color: var(--ppd-primary, #4f46e5); border: 1px solid var(--ppd-primary-border, #c7d2fe); border-radius: 999px; padding: 2px 3px 2px 10px; font-size: 12px; font-weight: 600; }
.ppd-dbcol-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; opacity: .7; }
.ppd-dbcol-x:hover { opacity: 1; background: rgba(0,0,0,.12); }
.ppd-dbcol-empty { color: var(--ppd-muted); font-size: 12px; font-style: italic; }
.ppd-dbcol-add { width: 100%; }

.ppd-c-field { display: grid; gap: 6px; }
.ppd-c-field > label { font-size: 12px; font-weight: 800; color:var(--pp-text,#334155); }
.ppd-c-field .req { color: var(--ppd-danger); }
.ppd-c-field input, .ppd-c-field select, .ppd-c-field textarea {
    width: 100%; border: 1px solid var(--ppd-border); border-radius: 9px; padding: 8px 10px; font: inherit;
    /* plugin approx mocks must follow the app theme like .pp-fld .pp-input does
       (inputs do not inherit text colour — dark themes went black-on-dark) */
    background: var(--ppd-surface, var(--pp-surface, #fff)); color: var(--ppd-text, #0f172a);
}
.ppd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* ---------- responsive 12-column form grid (Add/Edit) ---------- */
.ppd-children-zone.ppd-form12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.ppd-children-zone.ppd-form12.gap-tight { gap: 8px; --pp-form-gap: 8px; }
.ppd-children-zone.ppd-form12.gap-normal { gap: 14px; --pp-form-gap: 14px; }
.ppd-children-zone.ppd-form12.gap-roomy { gap: 22px; --pp-form-gap: 22px; }
/* nodes inside the form grid default to a full row until a span is set */
.ppd-form12 > .ppd-node { grid-column: span 12; }
/* label-on-left variant */
.ppd-form12.lbl-left .ppd-c-field { grid-template-columns: 130px minmax(0,1fr); align-items: center; gap: 4px 12px; }
.ppd-form12.lbl-left .ppd-c-field > label { margin: 0; }
.ppd-form12.lbl-left .ppd-c-field .ppd-c-help { grid-column: 2; }
/* Designed fields render as .pp-fld (the old .ppd-c-field rules above are
   legacy), and they are DESCENDANTS — often nested inside a Cell Grid — so the
   form's Labels=left setting has to reach them through any container. Float
   labels live inside the input and are left alone. */
.ppd-form12.lbl-left .pp-fld:not(.is-float) { display: grid; grid-template-columns: var(--lbl-w, 130px) minmax(0, 1fr);
  align-items: center; gap: 4px 12px; }
.ppd-form12.lbl-left .pp-fld:not(.is-float) > label { margin: 0; }
.ppd-form12.lbl-left .pp-fld:not(.is-float) > .pp-fld-wrap { grid-column: 2; }
.ppd-form12.lbl-left .pp-fld:not(.is-float) .pp-field-help { grid-column: 2; }

/* field control polish */
.ppd-c-inputwrap { position: relative; display: flex; align-items: center; }
.ppd-c-inputwrap > i { position: absolute; left: 10px; color:var(--pp-muted,#94a3b8); font-size: 13px; pointer-events: none; }
.ppd-c-inputwrap > i + input { padding-left: 30px; }
.ppd-c-field input:focus, .ppd-c-field select:focus, .ppd-c-field textarea:focus { outline: 0; border-color: var(--ppd-primary); box-shadow:var(--pp-shadow-md,0 0 0 3px rgba(37,99,235,.12)); }
.ppd-c-help { font-size: 11px; color: var(--ppd-muted); }
.ppd-c-viewval { padding: 8px 10px; border-radius: 8px; background:var(--pp-surface-soft,#f6f8fb); color:var(--pp-text,#334155); font-size: 13px; font-weight: 600; }
.ppd-c-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
/* checkbox/radio inputs must not stretch to 100% like text inputs (alignment fix) */
.ppd-c-field input[type="checkbox"], .ppd-c-field input[type="radio"] { width: auto; min-width: 0; margin: 0; accent-color: var(--ppd-primary); }
.ppd-c-checkline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color:var(--pp-text,#334155); padding: 6px 0; cursor: default; }
.ppd-c-checkline > span { font-weight: 650; }
.ppd-mapper-note { color: var(--ppd-muted); font-size: 12.5px; padding: 6px 2px; }
.ppd-c-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; font-size: 13px; }
.ppd-c-radios label { display: inline-flex; align-items: center; gap: 6px; }
.ppd-c-toggle { display: inline-block; width: 40px; height: 22px; border-radius: 999px; background:var(--pp-border,#cbd5e1); position: relative; margin-top: 4px; }
.ppd-c-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background:var(--pp-surface,#fff); box-shadow: var(--ppd-shadow-sm); }
.ppd-c-file { padding: 8px 10px; border:1.5px dashed var(--pp-border,#c7d2e3); border-radius: 8px; color:var(--pp-muted,#8aa0bd); font-size: 13px; background:var(--pp-surface-soft,#fbfdff); display: flex; align-items: center; gap: 7px; }
.ppd-c-dropzone { padding: 16px 12px; border:1.5px dashed var(--pp-border,#c7d2e3); border-radius: 10px; color:var(--pp-muted,#8aa0bd); background:var(--pp-surface-soft,#fbfdff); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ppd-c-dropzone i { font-size: 22px; opacity:.85; }
.ppd-c-dropzone span { font-size: 13px; color: var(--pp-text,#33415a); }
.ppd-c-dropzone u { color: var(--pp-primary,#3b82f6); text-decoration: none; border-bottom: 1px solid currentColor; }
.ppd-c-dropzone small { font-size: 11px; }

/* drag-to-resize handle on form fields */
.ppd-form12 > .ppd-node { position: relative; }
.ppd-resize-handle { position: absolute; top: 0; right: -4px; width: 10px; height: 100%; cursor: col-resize; z-index: 6; }
.ppd-resize-handle::after { content: ""; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--ppd-primary-border); opacity: 0; transition: opacity .12s; }
.ppd-form12 > .ppd-node:hover > .ppd-resize-handle::after, .ppd-resize-handle:hover::after { opacity: 1; }
.ppd-node.ppd-resizing { outline: 2px solid var(--ppd-primary); outline-offset: 2px; }
.ppd-node.ppd-resizing > .ppd-resize-handle::after { opacity: 1; background: var(--ppd-primary); }

/* responsive-width editor */
.ppd-span-active { background: var(--ppd-primary-soft); border-radius: 6px; }
.ppd-span-active > span { color: var(--ppd-primary) !important; }

/* generic repeatable-list editor (Timeline milestones, Quick Links, KPI tiles…) */
.ppd-list { display: flex; flex-direction: column; gap: 8px; }
.ppd-litem { border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 9px; padding: 8px 9px; background: var(--ppd-chrome-soft, #f8fafc); }
.ppd-litem-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ppd-litem-h > strong { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-muted, #64748b); }
.ppd-litem-tools { display: inline-flex; gap: 2px; }
.ppd-litem-tools button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: var(--ppd-muted, #64748b); cursor: pointer; }
.ppd-litem-tools button:hover { background: var(--ppd-chrome-hover, #eef2f7); color: var(--ppd-text, #0f172a); }
.ppd-litem-tools .ppd-litem-del:hover { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
.ppd-list-add { justify-content: center; gap: 5px; border-style: dashed !important; }
/* Custom Button — small badge on the canvas when it has an event flow (before/server/after) */
.ppd-cb-flow { display: inline-flex; align-items: center; margin-left: 4px; color: var(--ppd-primary, #2563eb); font-size: 11px; vertical-align: middle; }
/* compact auto-grow textarea inside a list item (e.g. milestone description) */
.ppd-litem-ta { resize: vertical; min-height: 32px; max-height: 220px; overflow: hidden; line-height: 1.35; }

/* per-device visibility ("Show on" chips) — icon-only, one compact line */
.ppd-vis-row .ppd-vis-devs { display:flex; gap:5px; flex-wrap:nowrap; justify-content:flex-end; }
.ppd-vis-dev { display:inline-flex; align-items:center; justify-content:center; width:28px; height:24px; border:1px solid var(--ppd-border,#cbd5e1); border-radius:7px; font-size:12px; cursor:pointer; user-select:none; color:var(--ppd-muted,#64748b); background:transparent; }
.ppd-vis-dev input { display:none; }
.ppd-vis-dev.is-on { color:var(--pp-primary-text,#fff); border-color:var(--ppd-primary,#2563eb); background:var(--ppd-primary,#2563eb); }
.ppd-vis-dev:not(.is-on) { opacity:.55; }

/* canvas: component hidden on the current preview device */
.ppd-node.ppd-hide-dev { outline:1px dashed color-mix(in srgb, var(--ppd-primary,#2563eb) 55%, transparent); outline-offset:2px; position:relative; }
.ppd-node.ppd-hide-dev::after { content:"Hidden here"; position:absolute; top:2px; right:2px; z-index:5; font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:1px 5px; border-radius:4px; background:color-mix(in srgb, var(--ppd-primary,#2563eb) 85%, #000); color:#fff; pointer-events:none; }

/* ---------- import / export building blocks ---------- */
.ppd-steps-wrap { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; }
.ppd-steps-counter { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ppd-muted); }
.ppd-steps { --wz-accent: var(--ppd-primary); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ppd-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--wz-step-bg, var(--pp-surface-soft,#f1f5f9)); color:var(--ppd-muted,#64748b); font-size: 12.5px; font-weight: 700; }
.ppd-step-n { width: 20px; height: 20px; border-radius: 50%; background: var(--wz-marker-bg, var(--pp-border,#cbd5e1)); color: var(--wz-marker-color, var(--pp-primary-text,#fff)); display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.ppd-step-lbl { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ppd-step-lbl > span:first-child { font-family: var(--wz-label-font, inherit); font-size: var(--wz-label-size, inherit); font-weight: var(--wz-label-weight, inherit); color: var(--wz-label-color, inherit); }
.ppd-step-lbl small { font-family: var(--wz-desc-font, inherit); font-weight: 500; font-size: var(--wz-desc-size, 10.5px); color: var(--wz-desc-color, var(--ppd-muted)); }
.ppd-step.is-active { background: var(--wz-step-bg, color-mix(in srgb, var(--wz-accent) 14%, transparent)); color: var(--wz-accent); }
.ppd-step.is-active .ppd-step-n { background: var(--wz-accent); }
.ppd-step.is-done { color: var(--wz-accent); }
.ppd-step.is-done .ppd-step-n { background: var(--wz-accent); }
.ppd-step-bar { flex: 1 1 12px; min-width: 12px; height: 2px; background:var(--pp-border,#e2e8f0); }
.ppd-steps.wz-noline .ppd-step-bar { display: none; }
.ppd-steps.wz-noline { gap: 8px; }
/* sizes */
.ppd-steps.wz-sm .ppd-step { padding: 4px 9px; font-size: 11px; } .ppd-steps.wz-sm .ppd-step-n { width: 16px; height: 16px; font-size: 9.5px; }
.ppd-steps.wz-lg .ppd-step { padding: 9px 16px; font-size: 14px; } .ppd-steps.wz-lg .ppd-step-n { width: 26px; height: 26px; font-size: 13px; }
/* dot marker */
.ppd-steps.wz-mk-dot .ppd-step-n { width: 10px; height: 10px; }
.ppd-steps.wz-sm.wz-mk-dot .ppd-step-n { width: 8px; height: 8px; }
/* stacked (marker above label, centred) */
.ppd-steps.wz-stack .ppd-step { flex-direction: column; text-align: center; gap: 5px; background: var(--wz-step-bg, transparent); padding: 4px 10px; }
.ppd-steps.wz-stack .ppd-step-lbl { align-items: center; }
/* vertical */
.ppd-steps.wz-vert { flex-direction: column; align-items: stretch; gap: 0; }
.ppd-steps.wz-vert .ppd-step { justify-content: flex-start; background: var(--wz-step-bg, transparent); }
.ppd-steps.wz-vert .ppd-step-bar { width: 2px; height: 16px; min-height: 12px; margin-left: 21px; flex: none; }
.ppd-steps.wz-vert.wz-sm .ppd-step-bar { margin-left: 18px; }
.ppd-steps.wz-vert.wz-lg .ppd-step-bar { margin-left: 27px; }
/* Workflow Steps (feature-packed stepper) */
.ppd-wf { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.ppd-wf.ppd-wf-vert { flex-direction: column; align-items: stretch; gap: 0; }
.ppd-wf-step { display: inline-flex; align-items: center; gap: 9px; }
.ppd-wf.ppd-wf-vert .ppd-wf-step { padding: 4px 0; }
.ppd-wf-no { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--pp-border, #cbd5e1); color: var(--pp-primary-text, #fff); display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; }
.ppd-wf-txt { display: inline-flex; flex-direction: column; line-height: 1.25; }
.ppd-wf-lbl { font-size: 13px; font-weight: 700; color: var(--pp-text, #334155); }
.ppd-wf-desc { font-size: 11px; color: var(--ppd-muted); font-weight: 500; }
.ppd-wf-step.active .ppd-wf-no { background: var(--ppd-primary); }
.ppd-wf-step.active .ppd-wf-lbl { color: var(--ppd-primary); }
.ppd-wf-step.done .ppd-wf-no { background: var(--ppd-ok, #16a34a); }
.ppd-wf-bar { flex: 1 1 16px; min-width: 16px; height: 2px; background: var(--pp-border, #e2e8f0); align-self: center; }
.ppd-wf.ppd-wf-vert .ppd-wf-bar { flex: 0 0 auto; width: 2px; height: 16px; margin-left: 12px; }
.ppd-wf.ppd-wf-sm .ppd-wf-no { width: 22px; height: 22px; font-size: 11px; } .ppd-wf.ppd-wf-sm .ppd-wf-lbl { font-size: 12px; }
.ppd-wf.ppd-wf-lg .ppd-wf-no { width: 32px; height: 32px; font-size: 14px; } .ppd-wf.ppd-wf-lg .ppd-wf-lbl { font-size: 15px; }

.ppd-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ppd-format-tile { display: grid; place-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--ppd-border); border-radius: 12px; background:var(--pp-surface,#fff); color:var(--pp-text,#475569); font-size: 12px; font-weight: 700; cursor: pointer; }
.ppd-format-tile i { font-size: 22px; color:var(--pp-muted,#64748b); }
.ppd-format-tile.active { border-color: var(--ppd-primary); background: var(--ppd-primary-soft); color: var(--ppd-primary); box-shadow:var(--pp-shadow-md,0 0 0 3px rgba(37,99,235,.1)); }
.ppd-format-tile.active i { color: var(--ppd-primary); }

.ppd-mapper { border: 1px solid var(--ppd-border); border-radius: 12px; overflow: hidden; }
.ppd-mapper-row { display: grid; grid-template-columns: 1fr 32px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px 12px; border-top:1px solid var(--pp-border,#eef2f8); }
.ppd-mapper-row:first-child { border-top: 0; }
.ppd-mapper-row.head { background:var(--pp-surface-soft,#f8fbff); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color:var(--pp-muted,#64748b); }
.ppd-mapper-src { font-weight: 700; color:var(--pp-text,#334155); }
.ppd-mapper-row > i { text-align: center; color:var(--pp-muted,#94a3b8); }
.ppd-mapper-row select { height: 32px; border: 1px solid var(--ppd-border); border-radius: 8px; padding: 0 8px; font-size: 12.5px; background:var(--pp-surface,#fff); }

.ppd-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; grid-auto-rows: 1fr; align-items: stretch; }
.ppd-summary-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ppd-border); border-radius: 12px; background:var(--pp-surface,#fff); height: 100%; box-sizing: border-box; min-width: 0; }
.ppd-summary-item > div { min-width: 0; }
.ppd-summary-item i { font-size: 20px; color: var(--ppd-muted); }
.ppd-summary-item strong { display: block; font-size: 18px; font-weight: 800; color:var(--pp-text,#0f172a); }
.ppd-summary-item small { color: var(--ppd-muted); font-size: 12px; font-weight: 600; }
.ppd-summary-item.tone-warn i { color:var(--pp-warning-text,#d97706); }
.ppd-summary-item.tone-ok i { color: var(--ppd-ok); }
.ppd-summary-item.tone-danger i { color: var(--pp-danger, #dc2626); }
.ppd-summary-item.tone-info i { color: var(--pp-info, #2563eb); }
.ppd-summary.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-summary.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-summary.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Responsive collapse for the FIXED column modes — a fixed repeat(4,1fr) used to
   stay 4-across on a phone and crush every card. Breakpoints match the platform:
   tablet 768–1023px, mobile <768px. (The default `auto` mode already reflows.) */
@media (max-width: 1023px) {
  .ppd-summary.cols-4, .ppd-summary.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ppd-summary.cols-4, .ppd-summary.cols-3, .ppd-summary.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .ppd-summary.cols-4, .ppd-summary.cols-3, .ppd-summary.cols-2 { grid-template-columns: 1fr; }
}
/* Per-card layout mode — opt-in when any KPI card carries its own responsive
   width. The strip becomes a 12-col grid and each card spans --ksp columns
   (--kspt on tablet, --kspm on mobile). A card with no width set falls back to
   the sensible defaults below, so mixing configured + unconfigured cards is safe. */
.ppd-summary.is-spanned { grid-template-columns: repeat(12, 1fr); }
.ppd-summary.is-spanned .ppd-summary-item { grid-column: span var(--ksp, 3); }        /* desktop: 4 / row */
@media (max-width: 1023px) {
  .ppd-summary.is-spanned .ppd-summary-item { grid-column: span var(--kspt, 6); }      /* tablet: 2 / row */
}
@media (max-width: 767px) {
  .ppd-summary.is-spanned .ppd-summary-item { grid-column: span var(--kspm, 6); }      /* mobile: 2 / row */
}
/* A KPI card is selectable in the Designer (part). */
.ppd-summary-item.ppd-part { cursor: pointer; }
.ppd-summary.is-center .ppd-summary-item { justify-content: center; text-align: center; }
.ppd-summary.size-sm .ppd-summary-item strong { font-size: 15px; }

/* ── v1.0 dashboard polish: animated KPI icons + hover lift + foldable sections ── */
.ppd-summary-item { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease; }
.ppd-summary-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.10); border-color: color-mix(in srgb, var(--pp-primary,#4f46e5) 28%, var(--ppd-border)); }
.ppd-summary-item i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 19px; flex: 0 0 auto; background: color-mix(in srgb, currentColor 13%, transparent); transition: background .2s ease; }
.ppd-summary-item:hover i { background: color-mix(in srgb, currentColor 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ppd-summary-item i { animation: pp-kpi-float 3.6s ease-in-out infinite; will-change: transform; }
  .ppd-summary-item:nth-child(2) i { animation-delay: .3s } .ppd-summary-item:nth-child(3) i { animation-delay: .6s }
  .ppd-summary-item:nth-child(4) i { animation-delay: .9s } .ppd-summary-item:nth-child(5) i { animation-delay: 1.2s }
  .ppd-summary-item:nth-child(6) i { animation-delay: 1.5s } .ppd-summary-item:nth-child(7) i { animation-delay: 1.8s }
}
@keyframes pp-kpi-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3.5px) } }
/* Section fold affordance */
.ppd-c-section.is-foldable > :first-child { cursor: pointer; user-select: none; transition: background .15s ease; }
.ppd-c-section .ppd-fold-ic { transition: transform .25s ease; margin-left: auto; opacity: .7; }
.ppd-c-section.is-foldable > :first-child:hover .ppd-fold-ic { opacity: 1; }
.ppd-c-section .ppd-c-section-body, .ppd-c-section > :last-child:not(:first-child) { transition: opacity .2s ease; }
.ppd-c-section.is-collapsed .ppd-fold-ic { transform: rotate(-90deg); }
.ppd-summary.size-lg .ppd-summary-item strong { font-size: 24px; }
.ppd-summary-item.shadow-sm { box-shadow: var(--pp-shadow-sm, 0 1px 2px rgba(2,6,23,.06)); }
.ppd-summary-item.shadow-md { box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }
.ppd-summary-item.shadow-lg { box-shadow: var(--pp-shadow-lg, 0 12px 28px rgba(2,6,23,.16)); }
.ppd-summary-heading { font-weight: 800; font-size: 14px; color: var(--pp-text, #0f172a); margin: 0 0 10px; }
a.ppd-summary-link { text-decoration: none; color: inherit; display: flex; }
a.ppd-summary-link > .ppd-summary-item { flex: 1 1 auto; }
a.ppd-summary-link:hover .ppd-summary-item { border-color: var(--ppd-primary); box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }

.ppd-fieldsel { border: 1px solid var(--ppd-border); border-radius: 12px; overflow: hidden; }
.ppd-fieldsel-all { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background:var(--pp-surface-soft,#f8fbff); border-bottom: 1px solid var(--ppd-border); font-size: 13px; }
.ppd-fieldsel-all em { font-style: normal; color: var(--ppd-muted); font-size: 11px; font-weight: 600; margin-left: auto; }
.ppd-fieldsel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; padding: 10px 12px; }
.ppd-fieldsel-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color:var(--pp-text,#334155); }
.ppd-fieldsel-item input, .ppd-fieldsel-all input { accent-color: var(--ppd-primary); }

/* ---------- print page: paper sheet ---------- */
.ppd-canvas.ppd-print-sheet { background:var(--pp-surface,#fff); border: 1px solid #d9e1ee; border-radius: 2px; box-shadow:var(--pp-shadow-md,0 10px 40px rgba(15,23,42,.14)); overflow: visible; }
.ppd-canvas.ppd-print-sheet .ppd-page-body { padding: var(--print-margin, 18mm); gap: 0; display: block; min-height: 0; }
.ppd-canvas.ppd-print-sheet .ppd-node { color: #111827; }
.ppd-canvas.ppd-print-sheet .ppd-node:hover { outline-color: #c7d2e3; }
/* document header */
.ppd-print-header { margin-bottom: 14px; }
.ppd-print-header .ph-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color:var(--pp-text,#475569); }
.ppd-print-header .ph-org { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color:var(--pp-text,#0f172a); }
.ppd-print-header .ph-org i { color: var(--ppd-primary); font-size: 16px; }
.ppd-print-header .ph-title { margin: 12px 0 2px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color:var(--pp-text,#0f172a); }
.ppd-print-header .ph-sub { font-size: 13px; color:var(--pp-muted,#64748b); }
.ppd-print-header .ph-rule { border: 0; border-top: 2px solid #0f172a; margin: 12px 0 0; }
/* document footer */
.ppd-print-footer { margin-top: 18px; }
.ppd-print-footer .pf-rule { border: 0; border-top:1px solid var(--pp-border,#cbd5e1); margin: 0 0 6px; }
.ppd-print-footer .pf-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color:var(--pp-muted,#64748b); }
.ppd-print-footer .pf-center { flex: 1; text-align: center; }
.ppd-print-footer .pf-right { text-align: right; }
/* view-mode value cells read as document text on the sheet */
.ppd-canvas.ppd-print-sheet .ppd-c-viewval { background: transparent; padding: 4px 0; border-bottom:1px dotted var(--pp-border,#cbd5e1); border-radius: 0; font-weight: 600; }
.ppd-canvas.ppd-print-sheet .ppd-form12.lbl-left .ppd-c-field { grid-template-columns: 150px minmax(0,1fr); gap: 2px 14px; }
.ppd-canvas.ppd-print-sheet .ppd-form12.lbl-left .ppd-c-field > label { color:var(--pp-text,#475569); font-weight: 700; }

.ppd-c-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ppd-c-buttons.ppd-btngroup { display: inline-flex; align-items: stretch; }
.ppd-c-buttons.bg-vert { flex-direction: column; }
.ppd-bg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 9px; background: var(--pp-surface, #fff); color: var(--ppd-text, #0f172a); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ppd-bg-btn:hover { border-color: var(--ppd-primary); color: var(--ppd-primary); }
.ppd-bg-btn.primary { background: var(--pp-primary, var(--ppd-primary)); border-color: transparent; color: var(--pp-primary-text, #fff); }
.ppd-bg-btn.primary:hover { filter: brightness(1.05); color: var(--pp-primary-text, #fff); }
.ppd-bg-btn.danger { background: var(--pp-danger, #dc2626); border-color: transparent; color: #fff; }
.ppd-c-buttons.bg-sm .ppd-bg-btn { padding: 5px 10px; font-size: 12px; }
.ppd-c-buttons.bg-lg .ppd-bg-btn { padding: 11px 18px; font-size: 15px; }
.ppd-c-buttons.is-attached { gap: 0; }
.ppd-c-buttons.is-attached .ppd-bg-btn { border-radius: 0; margin-left: -1px; }
.ppd-c-buttons.is-attached.bg-horz .ppd-bg-btn:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.ppd-c-buttons.is-attached.bg-horz .ppd-bg-btn:last-child { border-radius: 0 9px 9px 0; }
.ppd-c-buttons.is-attached.bg-vert .ppd-bg-btn { margin-left: 0; margin-top: -1px; }
.ppd-c-buttons.is-attached.bg-vert .ppd-bg-btn:first-child { border-radius: 9px 9px 0 0; margin-top: 0; }
.ppd-c-buttons.is-attached.bg-vert .ppd-bg-btn:last-child { border-radius: 0 0 9px 9px; }

.ppd-table-wrap { border: 1px solid var(--ppd-border); border-radius: 12px; overflow: auto; background:var(--pp-surface,#fff); }
/* Designer 3-row template grid */
.ppd-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ppd-grid caption { caption-side: top; text-align: left; padding: 8px 10px; font-weight: 800; font-size: 13px; color:var(--pp-text,#1f2937); background:var(--pp-surface-soft,#f8fbff); border-bottom: 1px solid var(--ppd-border); cursor: pointer; }
.ppd-grid th, .ppd-grid td { padding: 8px 10px; border: 1px solid #e3ebf5; text-align: left; vertical-align: middle; }
.ppd-grid thead th { background: #f4f8ff; font-weight: 800; color: #27364a; white-space: nowrap; }
.ppd-grid tbody td { color:var(--pp-text,#334155); background:var(--pp-surface,#fff); }
.ppd-grid tfoot td { background: #fff8ef; color:var(--pp-text,#334155); font-weight: 700; }
.ppd-grid tfoot tr.ppd-foot-off td { opacity: .5; }

/* density */
.ppd-grid.dens-compact th, .ppd-grid.dens-compact td { padding: 6px 8px; }
.ppd-grid.dens-normal th, .ppd-grid.dens-normal td { padding: 9px 11px; }
.ppd-grid.dens-comfortable th, .ppd-grid.dens-comfortable td { padding: 13px 14px; }
/* borders / striping / hover / wrap */
.ppd-grid.is-bordered th, .ppd-grid.is-bordered td { border: 1px solid #e3ebf5; }
.ppd-grid:not(.is-bordered) th, .ppd-grid:not(.is-bordered) td { border: 0; border-bottom: 1px solid #eef2f8; }
.ppd-grid.is-striped tbody tr:nth-child(even) td { background:var(--pp-surface-soft,#fafcff); }
.ppd-grid.is-hover tbody tr:hover td { background: #f3f8ff; }
.ppd-grid.is-nowrap td, .ppd-grid.is-nowrap th { white-space: nowrap; }
.ppd-grid.is-wrap td .ppd-field-token { white-space: normal; }
.ppd-grid.is-nowrap td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* sticky header (within the scroll container) */
.ppd-grid.sticky-head thead th { position: sticky; top: 0; z-index: 3; }
/* pinned columns */
.ppd-grid th.pin-left, .ppd-grid td.pin-left { position: sticky; left: 0; z-index: 2; box-shadow: 2px 0 0 #e3ebf5; }
.ppd-grid th.pin-right, .ppd-grid td.pin-right { position: sticky; right: 0; z-index: 2; box-shadow: -2px 0 0 #e3ebf5; }
.ppd-pin { color: var(--ppd-primary); font-size: 10px; }
.ppd-sort-ico { opacity: .35; font-size: 10px; }
/* row numbers / selection radio */
.ppd-grid-num { width: 38px; text-align: center; color:var(--pp-muted,#94a3b8); font-weight: 700; background:var(--pp-surface-soft,#fafcff); }
.ppd-radio { display: inline-block; width: 14px; height: 14px; border:2px solid var(--pp-border,#cbd5e1); border-radius: 50%; }
/* filter row */
.ppd-filter-row td { background:var(--pp-surface-soft,#fbfdff); padding: 5px 8px !important; }
.ppd-filter-row input, .ppd-filter-row select { width: 100%; min-width: 0; height: 26px; border: 1px solid var(--ppd-border); border-radius: 6px; padding: 0 6px; font-size: 11.5px; background:var(--pp-surface,#fff); }
.ppd-filter-row .rng { display: flex; gap: 4px; }
.ppd-grid-filter { cursor: pointer; }
/* responsive stack hint */
.ppd-table-wrap.resp-stack::after { content: "↕ stacks on mobile"; display: block; padding: 4px 8px; font-size: 10px; color:var(--pp-muted,#94a3b8); font-weight: 700; }
/* leftmost gutter labelling each of the 3 rows */
.ppd-rowlabel { background:var(--pp-surface-soft,#eef2f8) !important; color:var(--pp-text,#475569) !important; font-weight: 800 !important; font-size: 11px; white-space: nowrap; width: 1%; position: sticky; left: 0; z-index: 2; }
.ppd-rowlabel i { opacity: .7; margin-right: 2px; }
.ppd-field-token { font: 600 11.5px/1 ui-monospace, Menlo, monospace; color: var(--ppd-primary, #2563eb); background: var(--ppd-primary-soft, #eff6ff); border: 1px solid var(--ppd-primary-border, #dbeafe); border-radius: 6px; padding: 3px 7px; display: inline-block; }
.ppd-field-token.ppd-part { cursor: pointer; }
.ppd-fieldctl-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; font: 700 9.5px/1 -apple-system, system-ui, sans-serif; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 5px; padding: 2px 5px; vertical-align: middle; }
.ppd-fieldctl-chip > i { font-size: 10px; }
.ppd-agg { font-weight: 800; color:var(--pp-warning-text,#92400e); font-size: 11.5px; }
.ppd-agg.muted { color: var(--pp-sidebar-text, #cbd5e1); font-weight: 600; }
/* drag-to-reorder columns */
.ppd-grid thead th.ppd-col-grip { cursor: grab; }
.ppd-grid thead th.ppd-col-grip:active { cursor: grabbing; }
.ppd-col-dragging { opacity: .45; }
.ppd-grid th.ppd-col-before { box-shadow: inset 3px 0 0 var(--ppd-primary); }
.ppd-grid th.ppd-col-after { box-shadow: inset -3px 0 0 var(--ppd-primary); }
.ppd-grid thead th.ppd-col-grip::before { content: "\F2C2"; font-family: "bootstrap-icons"; font-size: 9px; color: var(--pp-sidebar-text, #cbd5e1); margin-right: 4px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.ppd-grid thead th.ppd-col-grip:hover::before { opacity: 1; }
.ppd-grid-check { width: 34px; text-align: center; }
.ppd-grid-actcol { white-space: nowrap; }
.ppd-row-actions { display: inline-flex; gap: 5px; }
.ppd-act { min-width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); color:var(--pp-text,#334155); display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; cursor: pointer; }
.ppd-act.has-label { padding: 0 9px; font-size: 12px; font-weight: 700; }
.ppd-act.danger { color: var(--ppd-danger); border-color:var(--pp-danger-border,#fecaca); }
.ppd-act:hover { border-color: var(--ppd-primary-border); color: var(--ppd-primary); background: var(--ppd-primary-soft); }
.ppd-act.danger:hover { color: var(--ppd-danger); border-color:var(--pp-danger-border,#fecaca); background:var(--pp-danger-soft,#fef2f2); }

.ppd-note { margin: 8px 12px; padding: 7px 9px; border-radius: 8px; background: #f0f7ff; border: 1px solid #dbeafe; color: #3b5b80; font-size: 11px; line-height: 1.45; display: block; }
.ppd-note > i:first-child { margin-right: 4px; }
.ppd-subhead { margin: 12px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ppd-muted, #94a3b8); }
/* Language hint atop the "Labels & text" group — a subtle chip using theme tokens (dark-safe). */
.ppd-note.ppd-lang-hint { margin: 2px 0 9px; background: var(--ppd-primary-soft); border-color: var(--ppd-primary-border); color: var(--ppd-primary); }
.ppd-note.ppd-lang-hint b { font-weight: 800; }
/* inline "jump to Conditional formatting" button inside a card-part note */
.ppd-cf-jump { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; margin-left: 1px; border: 1px solid var(--ppd-primary-border, #bcd3f5); border-radius: 6px;
  background: var(--ppd-primary-soft, #eaf1fe); color: var(--ppd-primary, #2563eb); font-size: 11px; font-weight: 700; cursor: pointer; vertical-align: baseline; transition: background .12s, border-color .12s; }
.ppd-cf-jump:hover { background: var(--ppd-primary, #2563eb); color:var(--pp-primary-text,#fff); border-color: var(--ppd-primary, #2563eb); }
.ppd-cf-jump i { font-size: 10px; }
/* brief highlight when a section is jumped to */
@keyframes ppdFlash { 0% { background: var(--ppd-primary-soft, #eaf1fe); } 100% { background: transparent; } }
.ppd-insp-group.ppd-flash { animation: ppdFlash 1.1s ease-out; }
.ppd-insp-group.ppd-flash > summary { color: var(--ppd-primary, #2563eb); }

/* full-width action row inside the inspector body (e.g. reset buttons) */
.ppd-reset-row { padding: 6px 12px 10px; }
.ppd-reset-row .ppd-btn { width: 100%; justify-content: center; }

.ppd-c-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ppd-c-pagination.pp-pag-left { justify-content: flex-start; }
.ppd-c-pagination.pp-pag-right { justify-content: flex-end; }
.ppd-c-pagination .ppd-pg.gap { border: 0; background: transparent; cursor: default; min-width: 18px; }
.ppd-c-pagination .ppd-pg-summary { color: var(--ppd-muted); font-size: 11.5px; margin-left: 6px; }
.ppd-c-pagination.pp-pag-sm .ppd-pg { min-width: 27px; height: 27px; font-size: 12px; }
.ppd-c-pagination.pp-pag-lg .ppd-pg { min-width: 38px; height: 38px; }
.ppd-pg { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); cursor: pointer; font-weight: 700; }
.ppd-pg.active { background: var(--ppd-primary); border-color: var(--ppd-primary); color:var(--pp-primary-text,#fff); }

.ppd-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; }
.ppd-stat { border: 1px solid var(--ppd-border); border-radius: 14px; padding: 14px; background:var(--pp-surface,#fff); box-shadow: var(--ppd-shadow-sm); }
.ppd-stat .v { font-size: 24px; font-weight: 900; } .ppd-stat .l { color: var(--ppd-muted); font-size: 12px; font-weight: 700; }
.ppd-stat.stat-sh-none { box-shadow: none; }
.ppd-stat.stat-sh-sm { box-shadow: var(--ppd-shadow-sm, 0 1px 2px rgba(2,6,23,.06)); }
.ppd-stat.stat-sh-md { box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }
.ppd-stat.stat-sh-lg { box-shadow: var(--pp-shadow-lg, 0 12px 28px rgba(2,6,23,.16)); }
.ppd-stat.stat-v-sm .v { font-size: 18px; }
.ppd-stat.stat-v-md .v { font-size: 24px; }
.ppd-stat.stat-v-lg .v { font-size: 32px; }
.ppd-stat.stat-v-xl .v { font-size: 42px; }
.ppd-stat.has-accent { border-left: 3px solid var(--stat-accent, var(--ppd-primary)); }
.ppd-stat .ppd-elicon.is-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ppd-primary-soft, #eef2ff); color: var(--stat-accent, var(--ppd-primary)); font-size: 16px; }
.ppd-stat .l.is-upper { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.ppd-stat.is-hover { transition: transform .18s ease, box-shadow .18s ease; }
.ppd-stat.is-hover:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-lg, 0 12px 28px rgba(2,6,23,.16)); }
.ppd-stat.has-accent .ppd-elicon { color: var(--stat-accent, var(--ppd-primary)); }
.ppd-stat .ppd-stat-sub { display: block; color: var(--ppd-muted); font-size: 10.5px; margin-top: 5px; }
a.ppd-stat-link { text-decoration: none; display: block; color: inherit; }
a.ppd-stat-link:hover .ppd-stat { border-color: var(--ppd-primary); box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }
.ppd-chart { height: 180px; border: 1px solid var(--ppd-border); border-radius: 14px; background:linear-gradient(180deg,var(--pp-surface,#fff),var(--pp-surface-soft,#f8fbff)); display: grid; place-items: center; color: var(--ppd-muted); }
.ppd-upload { border:2px dashed var(--pp-border,#cbd5e1); border-radius: 14px; padding: 28px; text-align: center; color: var(--ppd-muted); background:var(--pp-surface-soft,#f8fbff); }

.ppd-row { display: grid; gap: 12px; }
.ppd-row.cols-2 { grid-template-columns: 1fr 1fr; }
.ppd-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ppd-row .ppd-col { border: 1px dashed var(--ppd-border); border-radius: 12px; min-height: 60px; padding: 10px; display: grid; gap: 10px; }

/* ---------- Inspector (compact, consistent with the left sidebar) ---------- */
.ppd-insp { display: flex; flex-direction: column; height: 100%; font-size: 12px; }
.ppd-insp-head { padding: 7px 12px; border-bottom: 1px solid var(--ppd-border); background: linear-gradient(180deg, #f3f8ff, #e9f2fe); }
.ppd-insp-head strong { display: block; font-size: 12.5px; font-weight: 800; color: #0b4a6f; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-insp-head small { display: block; color: #5b7c93; font-size: 10px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-insp-body { flex: 1 1 auto; overflow: auto; padding-bottom: 8px; }

/* Group headers — flat, hover-highlight, matching .ppd-section-title */
.ppd-insp-group { border-bottom: 1px solid var(--ppd-border-soft); }
.ppd-insp-group > summary {
    list-style: none; cursor: pointer; height: 28px; padding: 0 12px; background: transparent;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #51607a;
    display: flex; align-items: center; gap: 7px;
}
.ppd-insp-group > summary:hover { background:var(--pp-surface-soft,#f1f5f9); color: var(--ppd-text); }
.ppd-insp-group > summary::-webkit-details-marker { display: none; }
.ppd-insp-group > summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: 9px; color:var(--pp-muted,#94a3b8); transition: transform .15s; }
.ppd-insp-group[open] > summary::before { transform: rotate(90deg); }

.ppd-field-row { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 8px; align-items: center; padding: 3px 12px; }
.ppd-field-row.full { grid-template-columns: 1fr; gap: 3px; }
.ppd-field-row > span { font-size: 11px; font-weight: 600; color:var(--pp-muted,#64748b); }
.ppd-field-row input, .ppd-field-row select, .ppd-field-row textarea {
    width: 100%; min-width: 0; height: 26px; border: 1px solid var(--ppd-border); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 12px; background:var(--pp-surface,#fff); color: var(--ppd-text);
}
.ppd-field-row input:focus, .ppd-field-row select:focus, .ppd-field-row textarea:focus { outline: 0; border-color: var(--ppd-primary); box-shadow:var(--pp-shadow-md,0 0 0 3px rgba(37,99,235,.1)); }
.ppd-field-row textarea { height: auto; padding: 5px 8px; resize: vertical; }
.ppd-field-row input[readonly] { background:var(--pp-surface-soft,#f6f8fb); color:var(--pp-muted,#94a3b8); }
.ppd-field-row input[type="color"] { padding: 1px; height: 26px; }
/* Inline helper line under a field (e.g. the SQL-variable hint on WHERE boxes). */
.ppd-field-note { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.45; color: var(--pp-muted,#94a3b8); margin: 1px 0 2px; }
.ppd-field-note code { background: var(--pp-surface-soft,#f1f5f9); color: var(--pp-primary,#2563eb); padding: 0 3px; border-radius: 3px; font-size: 10px; font-family: var(--pp-font-mono,ui-monospace,monospace); }

.ppd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; padding: 4px 12px; }
.ppd-check { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color:var(--pp-text,#334155); min-height: 22px; }
.ppd-check input { accent-color: var(--ppd-primary); width: 13px; height: 13px; }

.ppd-back { margin: 7px 12px 3px; display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 9px; border: 1px solid var(--ppd-border); border-radius: 7px; background:var(--pp-surface,#fff); color:var(--pp-text,#475569); font-size: 11px; font-weight: 700; cursor: pointer; }
.ppd-back:hover { color: var(--ppd-primary); border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); }

.ppd-insp-actions { position: sticky; bottom: 0; display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ppd-border); background: rgba(255,255,255,.97); backdrop-filter: blur(6px); }
.ppd-insp-actions .ppd-btn { flex: 1; justify-content: center; height: 30px; }
/* compact, de-emphasised "Reset to default" (destructive — shouldn't dominate) */
.ppd-insp-actions-reset { justify-content: flex-end; background: transparent; backdrop-filter: none; border-top: 1px dashed var(--ppd-border); }
.ppd-insp-actions-reset .ppd-btn.ppd-btn-xs { flex: 0 0 auto; height: auto; padding: 4px 9px; font-size: 11px; font-weight: 600; opacity: .8; }
.ppd-insp-actions-reset .ppd-btn.ppd-btn-xs:hover { opacity: 1; }
.ppd-id { margin: 7px 12px; padding: 6px 8px; border: 1px solid var(--ppd-border); border-radius: 7px; background:var(--pp-surface-soft,#f6f8fb); color: #7689a3; font: 10px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; }
.ppd-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 5px 12px; }
.ppd-icon-pick { height: 26px; border: 1px solid var(--ppd-border); border-radius: 6px; background:var(--pp-surface,#fff); color:var(--pp-text,#334155); cursor: pointer; }
.ppd-icon-pick.active, .ppd-icon-pick:hover { color: var(--ppd-primary); border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); }

/* ---------- Status bar ---------- */
.ppd-statusbar {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--ppd-status-h); z-index: 1100;
    display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(300px,1fr); align-items: center; gap: 16px; padding: 0 18px;
    background:linear-gradient(180deg, var(--pp-sidebar-bg,#071423), var(--pp-sidebar-bg,#06101d)); color: var(--pp-sidebar-text, #cbd5e1); font-size: 12px; border-top:1px solid var(--pp-sidebar-border,rgba(255,255,255,.08));
}
.ppd-status-left, .ppd-status-right, .ppd-status-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ppd-status-controls { justify-content: center; gap: 6px; }
.ppd-status-right { justify-content: flex-end; }
.ppd-statusbar strong { color:var(--pp-primary-text,#fff); }
.ppd-statusbar .ok { color:var(--pp-success,#22c55e); }
.ppd-save-status.ok { color:var(--pp-success,#22c55e); }
.ppd-save-status.dirty { color: #fbbf24; }
.ppd-save-status.saving { color: #60a5fa; }
.ppd-save-status.err { color: #f87171; }
.ppd-status-btn { height: 30px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 9px; border:1px solid var(--pp-topbar-border,rgba(148,163,184,.22)); background:var(--pp-sidebar-hover,rgba(255,255,255,.08)); color:var(--pp-sidebar-text,#f8fafc); font-size: 13px; font-weight: 800; cursor: pointer; }
.ppd-status-btn:hover { background:var(--pp-row-selected,rgba(37,99,235,.24)); border-color:var(--pp-primary-border,rgba(147,197,253,.38)); }
.ppd-status-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Preview modal ---------- */
.ppd-modal { position: fixed; inset: 0; z-index: 2000; background:var(--pp-scrim,rgba(15,23,42,.55)); display: grid; place-items: center; padding: 24px; }
.ppd-modal-box { width: min(1000px, 96vw); max-height: 92vh; overflow: auto; background:var(--pp-surface,#fff); border-radius: 16px; box-shadow:var(--pp-shadow-lg,0 30px 80px rgba(2,6,23,.4)); }
.ppd-modal-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ppd-border); background:var(--pp-surface-soft,#f8fbff); font-weight: 800; }

/* ---------- Toast ---------- */
.ppd-toast-host { position: fixed; bottom: calc(var(--ppd-status-h) + 14px); right: 18px; z-index: 2200; display: grid; gap: 8px; }
/* Theme-aware toast: a solid dark chip with light text that stays legible in
   every console theme (same tokens as the instant tooltip). A left accent bar
   conveys tone without relying on a light background. */
.ppd-toast-host > div {
    max-width: 340px; padding: 10px 14px 10px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.35;
    background: var(--pp-tooltip-bg, #0f172a); color: var(--pp-tooltip-text, #f8fafc);
    border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--pp-accent, #6d5dfc);
    box-shadow: 0 12px 30px rgba(2, 6, 23, .45);
    opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.ppd-toast-host > div.show { opacity: 1; transform: none; }
.ppd-toast-host > div.ok { border-left-color: #10b981; }
.ppd-toast-host > div.err { border-left-color: #ef4444; }

@media (max-width: 1320px) {
    .ppd-workbar { grid-template-columns: 44px minmax(110px,160px) minmax(200px,1fr) auto; gap: 8px; }
    .ppd-tool-btn span { display: none; }
}
@media (max-width: 980px) {
    body.ppd-body { --ppd-left-w: 0px; --ppd-right-w: 0px; }
}

/* ============================================================
   Nested containers, drop zones, premium components, polish
   ============================================================ */

/* children drop zones (inside containers + page root) */
.ppd-children-zone { display: grid; gap: 12px; min-height: 16px; }
.ppd-children-zone.b { padding: 12px; }
.ppd-children-zone.ppd-form-grid, .ppd-children-zone.ppd-row { padding: 4px; }
.ppd-children-zone.cols-2 { grid-template-columns: 1fr 1fr; }
.ppd-children-zone.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ppd-children-zone:empty { min-height: 64px; border:1.5px dashed var(--pp-border,#cbd5e1); border-radius: 12px; background: rgba(248,250,252,.6); }
.ppd-children-zone:empty::before {
    content: attr(data-ppd-empty); grid-column: 1/-1; align-self: center; justify-self: center;
    color:var(--pp-muted,#94a3b8); font-size: 12px; font-weight: 700; padding: 16px;
}
.ppd-children-zone.ppd-zone-active { outline: 2px dashed var(--ppd-primary); outline-offset: 2px; background: rgba(37,99,235,.04); border-radius: 12px; }
.ppd-tabpane { padding: 12px; }

/* node container affordance */
.ppd-node.is-container { min-height: 40px; }
.ppd-node-type { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); color: var(--ppd-primary); display: grid; place-items: center; font-size: 12px; box-shadow: var(--ppd-shadow-sm); }
.ppd-node-tools { left: 6px; }

/* inline rename */
.ppd-rename { position: absolute; top: -14px; left: 96px; z-index: 8; height: 26px; border: 1px solid var(--ppd-primary); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; font-weight: 700; box-shadow: var(--ppd-shadow); }

/* component primitives added in the power pass */
.ppd-c-hr { border: 0; border-top: 1px solid var(--ppd-border); margin: 4px 0; }
.ppd-c-divider { display: flex; align-items: center; gap: 12px; color: var(--ppd-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ppd-c-divider::before, .ppd-c-divider::after { content: ""; flex: 1; border-top: 1px solid var(--ppd-border); }

.ppd-c-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 13px; border: 1px solid; }
.ppd-c-alert i { font-size: 16px; margin-top: 1px; }
.ppd-c-alert.info { background:var(--pp-primary-soft,#eff6ff); border-color: var(--pp-primary-border, #bfdbfe); color:var(--pp-info-text,#1e3a8a); }
.ppd-c-alert.success { background:var(--pp-success-soft,#ecfdf5); border-color:var(--pp-success-border,#a7f3d0); color:var(--pp-success-text,#065f46); }
.ppd-c-alert.warning { background:var(--pp-warning-soft,#fffbeb); border-color:var(--pp-warning-border,#fde68a); color:var(--pp-warning-text,#92400e); }
.ppd-c-alert.danger { background:var(--pp-danger-soft,#fef2f2); border-color:var(--pp-danger-border,#fecaca); color:var(--pp-danger-text,#991b1b); }
.ppd-c-alert-body { flex: 1; min-width: 0; }
.ppd-c-alert-title { font-weight: 700; margin-bottom: 2px; color: var(--box-title, inherit); }
.ppd-c-alert .ppd-elicon { color: var(--box-icon, inherit); }
.ppd-c-alert-close { margin-left: auto; align-self: flex-start; cursor: pointer; opacity: .55; background: none; border: none; color: inherit; font-size: 17px; line-height: 1; padding: 0 2px; }
.ppd-c-alert-close:hover { opacity: 1; }
.ppd-c-alert-action { display: inline-block; margin-top: 6px; font-weight: 700; text-decoration: underline; color: inherit; }
/* variants */
.ppd-c-alert.alert-solid { color: #fff; border-color: transparent; }
.ppd-c-alert.alert-solid.info { background: var(--ppd-primary,#6366f1); } .ppd-c-alert.alert-solid.success { background: var(--pp-success,#16a34a); }
.ppd-c-alert.alert-solid.warning { background: var(--pp-warning,#f59e0b); } .ppd-c-alert.alert-solid.danger { background: var(--pp-danger,#ef4444); }
.ppd-c-alert.alert-outline { background: transparent; }
.ppd-c-alert.alert-accent { border-left-width: 4px; }
.ppd-c-alert.alert-sm { padding: 8px 11px; font-size: 12px; } .ppd-c-alert.alert-lg { padding: 15px 17px; font-size: 14px; }

/* Image component. The wrapper (.ppd-c-imgbox) carries width/align/background/
   radius/border/shadow (all inline from props); the <img> carries fit/ratio/
   filters. Background defaults to TRANSPARENT (no hardcoded fill) so SVG/PNG
   logos show through — set a Background colour in the inspector for a backdrop. */
.ppd-c-imgbox { display: block; box-sizing: border-box; overflow: hidden; line-height: 0; transition: transform .2s ease, box-shadow .2s ease; }
.ppd-c-imglink { display: block; text-decoration: none; }
.ppd-c-image { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .3s ease, filter .3s ease; }
.ppd-c-image.placeholder { width: 100%; display: grid; place-items: center; align-content: center; gap: 6px; color:var(--pp-muted,#94a3b8); font-size: 22px; border-radius: 12px; border: 1px dashed var(--ppd-border,#e2e8f0); background:var(--pp-surface-soft,#f1f5f9); }
.ppd-c-image.placeholder small { font-size: 12px; line-height: 1.3; }
/* Hover effects (opt-in). Named .ppd-c-* so the build's CSS allow-list ships them. */
.ppd-c-imh-zoom:hover .ppd-c-image { transform: scale(1.06); }
.ppd-c-imh-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,6,23,.22); }
.ppd-c-imh-glow:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary,#4f46e5) 45%, transparent); }
.ppd-c-imh-tilt:hover .ppd-c-image { transform: perspective(600px) rotateX(4deg) rotateY(-4deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ppd-c-imgbox, .ppd-c-image { transition: none; } .ppd-c-imh-zoom:hover .ppd-c-image, .ppd-c-imh-tilt:hover .ppd-c-image { transform: none; } }

/* ── Navbar (marketing/landing header) ── token-driven so it adapts to the theme.
   Mobile menu is a pure-CSS checkbox toggle (no JS). Classes are .ppd-c-* so the
   build's CSS allow-list ships them to the generated app. */
.ppd-c-nav { position: relative; width: 100%; background: var(--pp-surface, #fff); border-bottom: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-nav--transparent { background: transparent; border-bottom-color: transparent; }
.ppd-c-nav--blur { background: color-mix(in srgb, var(--pp-surface, #fff) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ppd-c-nav.is-sticky { position: sticky; top: 0; z-index: 50; }
.ppd-c-nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ppd-c-nav-inner { display: flex; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 12px 20px; }
.ppd-c-nav-inner.is-full { max-width: none; }
.ppd-c-nav-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--pp-text, #0f172a); text-decoration: none; white-space: nowrap; }
.ppd-c-nav-brand img { height: 30px; width: auto; display: block; }
.ppd-c-nav-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ppd-c-nav.menu-center .ppd-c-nav-menu { margin: 0 auto; }
.ppd-c-nav.menu-left .ppd-c-nav-menu { margin-right: auto; margin-left: 24px; }
.ppd-c-nav-link { padding: 8px 12px; border-radius: 8px; color: var(--pp-muted, #475569); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.ppd-c-nav-link:hover { background: var(--pp-surface-soft, #f1f5f9); color: var(--pp-text, #0f172a); }
.ppd-c-nav-cta { margin-left: 8px; padding: 9px 18px; border-radius: 10px; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); text-decoration: none; font-weight: 700; font-size: 14.5px; border: 1px solid var(--pp-primary, #4f46e5); white-space: nowrap; }
.ppd-c-nav-cta:hover { filter: brightness(1.06); }
.ppd-c-nav-cta.is-outline { background: transparent; color: var(--pp-primary, #4f46e5); }
.ppd-c-nav-burger { display: none; margin-left: auto; flex-direction: column; gap: 5px; width: 40px; height: 40px; border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface, #fff); }
.ppd-c-nav-burger span { width: 18px; height: 2px; background: var(--pp-text, #0f172a); border-radius: 2px; }
@media (max-width: 768px) {
  .ppd-c-nav-burger { display: flex; }
  .ppd-c-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px; background: var(--pp-surface, #fff); border-bottom: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 14px 30px rgba(2, 6, 23, .14); }
  .ppd-c-nav-toggle:checked ~ .ppd-c-nav-inner .ppd-c-nav-menu { display: flex; }
  .ppd-c-nav-link { padding: 11px 12px; }
  .ppd-c-nav-cta { margin: 6px 0 0; text-align: center; }
}

/* ── Hero ── */
.ppd-c-hero { position: relative; width: 100%; display: flex; overflow: hidden; color: var(--pp-text, #0f172a); background: var(--pp-surface, #fff); }
.ppd-c-hero.h-md { min-height: 380px; }
.ppd-c-hero.h-lg { min-height: 540px; }
.ppd-c-hero.h-screen { min-height: 100vh; }
.ppd-c-hero.tone-light { color: #fff; }
.ppd-c-hero.tone-light .ppd-c-hero-sub { color: rgba(255, 255, 255, .85); }
.ppd-c-hero-ov { position: absolute; inset: 0; background: #000; z-index: 1; }
.ppd-c-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 48px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.ppd-c-hero.layout-center .ppd-c-hero-inner { justify-content: center; }
.ppd-c-hero-text { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.ppd-c-hero.layout-split .ppd-c-hero-text { flex: 1 1 50%; }
.ppd-c-hero-text.align-center { align-items: center; text-align: center; margin: 0 auto; }
.ppd-c-hero-text.align-left { align-items: flex-start; text-align: left; }
.ppd-c-hero-eyebrow { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--pp-primary, #4f46e5) 14%, transparent); color: var(--pp-primary, #4f46e5); }
.ppd-c-hero-text.align-center .ppd-c-hero-eyebrow { align-self: center; }
.ppd-c-hero.tone-light .ppd-c-hero-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.ppd-c-hero-h { margin: 0; font-size: clamp(30px, 5vw, 52px); font-weight: 850; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.ppd-c-hero-sub { margin: 0; font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--pp-muted, #475569); max-width: 60ch; }
.ppd-c-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ppd-c-hero-text.align-center .ppd-c-hero-cta { justify-content: center; }
.ppd-c-hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform .12s ease, filter .15s ease; }
.ppd-c-hero-btn:hover { transform: translateY(-1px); }
.ppd-c-hero-btn.is-primary { background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-hero-btn.is-primary:hover { filter: brightness(1.06); }
.ppd-c-hero-btn.is-ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.ppd-c-hero-media { flex: 1 1 45%; min-width: 0; }
.ppd-c-hero-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 24px 60px rgba(2, 6, 23, .20); }
.ppd-c-hero-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 42px; color: var(--pp-muted, #94a3b8); background: var(--pp-surface-soft, #f1f5f9); border: 1px dashed var(--pp-border, #e2e8f0); border-radius: 16px; }
@media (max-width: 860px) {
  .ppd-c-hero-inner { flex-direction: column; padding: 56px 20px; gap: 32px; }
  .ppd-c-hero.layout-split .ppd-c-hero-text, .ppd-c-hero-media { flex: 1 1 100%; width: 100%; }
  .ppd-c-hero.layout-split .ppd-c-hero-text { align-items: center; text-align: center; }
}

/* ── Feature Grid ── */
.ppd-c-features { width: 100%; }
.ppd-c-feat-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.ppd-c-feat-head { text-align: center; max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-feat-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); text-wrap: balance; }
.ppd-c-feat-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-feat-grid { display: grid; gap: 22px; }
.ppd-c-feat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-feat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-feat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ppd-c-feat { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; }
.ppd-c-feat:not(.is-plain) { background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .04); transition: transform .15s ease, box-shadow .15s ease; }
.ppd-c-feat:not(.is-plain):hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2, 6, 23, .10); }
.ppd-c-feat.align-center { align-items: center; text-align: center; }
.ppd-c-feat-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--pp-primary, #4f46e5) 12%, transparent); color: var(--pp-primary, #4f46e5); }
.ppd-c-feat-ic.is-plain { background: transparent; width: auto; height: auto; font-size: 28px; }
.ppd-c-feat h3 { margin: 0; font-size: 18px; font-weight: 750; color: var(--pp-text, #0f172a); }
.ppd-c-feat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pp-muted, #475569); }
@media (max-width: 900px) { .ppd-c-feat-grid.cols-3, .ppd-c-feat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ppd-c-feat-grid { grid-template-columns: 1fr !important; } }

/* ── Footer ── */
.ppd-c-foot { width: 100%; }
.ppd-c-foot.variant-light { background: var(--pp-surface-soft, #f8fafc); color: var(--pp-text, #0f172a); border-top: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-foot.variant-dark { background: #0f172a; color: #e2e8f0; }
.ppd-c-foot-main { max-width: 1200px; margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 1.4fr 3fr; gap: 40px; }
.ppd-c-foot-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: inherit; text-decoration: none; }
.ppd-c-foot-brand img { height: 28px; width: auto; }
.ppd-c-foot-tag { margin: 12px 0 0; font-size: 14px; line-height: 1.6; max-width: 34ch; opacity: .8; }
.ppd-c-foot-socs { display: flex; gap: 8px; margin-top: 16px; }
.ppd-c-foot-soc { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 16px; color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); opacity: .85; transition: opacity .15s ease, transform .12s ease; }
.ppd-c-foot-soc:hover { opacity: 1; transform: translateY(-2px); }
.ppd-c-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px; }
.ppd-c-foot-col h4 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
.ppd-c-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ppd-c-foot-col a { color: inherit; text-decoration: none; font-size: 14.5px; opacity: .82; transition: opacity .15s ease; }
.ppd-c-foot-col a:hover { opacity: 1; }
.ppd-c-foot-bottom { border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.ppd-c-foot-bottom span { display: block; max-width: 1200px; margin: 0 auto; padding: 20px 24px; font-size: 13.5px; opacity: .7; }
@media (max-width: 760px) { .ppd-c-foot-main { grid-template-columns: 1fr; gap: 32px; } }

/* ── Pricing ── */
.ppd-c-pricing { width: 100%; }
.ppd-c-price-switch { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ppd-c-price-wrap { max-width: 1160px; margin: 0 auto; padding: 64px 24px; }
.ppd-c-price-head { text-align: center; max-width: 680px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-price-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-price-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-price-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 34px; font-size: 14px; font-weight: 600; color: var(--pp-muted, #475569); }
.ppd-c-price-sw { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--pp-border, #cbd5e1); cursor: pointer; transition: background .18s ease; }
.ppd-c-price-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(2, 6, 23, .3); transition: transform .18s ease; }
.ppd-c-price-switch:checked ~ .ppd-c-price-wrap .ppd-c-price-sw { background: var(--pp-primary, #4f46e5); }
.ppd-c-price-switch:checked ~ .ppd-c-price-wrap .ppd-c-price-knob { transform: translateX(20px); }
.ppd-c-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; align-items: stretch; }
.ppd-c-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; border-radius: 18px; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .04); }
.ppd-c-plan.is-highlight { border-color: var(--pp-primary, #4f46e5); box-shadow: 0 20px 50px color-mix(in srgb, var(--pp-primary, #4f46e5) 22%, transparent); transform: translateY(-6px); }
.ppd-c-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-plan-name { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--pp-muted, #475569); }
.ppd-c-plan-price { font-size: 42px; font-weight: 850; letter-spacing: -.02em; color: var(--pp-text, #0f172a); line-height: 1; }
.ppd-c-plan-price em { font-size: 15px; font-weight: 600; color: var(--pp-muted, #94a3b8); font-style: normal; margin-left: 3px; }
.ppd-c-price-y { display: none; }
.ppd-c-price-switch:checked ~ .ppd-c-price-wrap .ppd-c-price-m { display: none; }
.ppd-c-price-switch:checked ~ .ppd-c-price-wrap .ppd-c-price-y { display: inline; }
.ppd-c-plan-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pp-muted, #475569); }
.ppd-c-plan-feats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-plan-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--pp-text, #0f172a); }
.ppd-c-plan-feats li .bi, .ppd-c-plan-feats li i { color: var(--pp-primary, #4f46e5); margin-top: 2px; }
.ppd-c-plan-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 11px; font-weight: 700; font-size: 14.5px; text-decoration: none; background: var(--pp-surface-soft, #f1f5f9); color: var(--pp-text, #0f172a); border: 1px solid var(--pp-border, #e5e7eb); transition: filter .15s ease; }
.ppd-c-plan-cta.is-primary { background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); border-color: transparent; }
.ppd-c-plan-cta:hover { filter: brightness(.98); }

/* ── Testimonials ── */
.ppd-c-testimonials { width: 100%; }
.ppd-c-tm-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.ppd-c-tm-head { text-align: center; max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-tm-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-tm-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-tm-grid { display: grid; gap: 22px; }
.ppd-c-tm-grid.cols-1 { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.ppd-c-tm-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-tm-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-tm { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 26px; border-radius: 16px; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .04); }
.ppd-c-tm-stars { display: flex; gap: 2px; color: #f59e0b; font-size: 15px; }
.ppd-c-tm-quote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pp-text, #0f172a); }
.ppd-c-tm-by { display: flex; align-items: center; gap: 12px; margin: 0; }
.ppd-c-tm-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ppd-c-tm-av-ph { display: inline-grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--pp-primary, #4f46e5); background: color-mix(in srgb, var(--pp-primary, #4f46e5) 14%, transparent); }
.ppd-c-tm-meta { display: flex; flex-direction: column; line-height: 1.3; }
.ppd-c-tm-meta b { font-size: 14.5px; font-weight: 700; color: var(--pp-text, #0f172a); }
.ppd-c-tm-meta em { font-size: 13px; font-style: normal; color: var(--pp-muted, #64748b); }
@media (max-width: 900px) { .ppd-c-tm-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ppd-c-tm-grid.cols-2, .ppd-c-tm-grid.cols-3 { grid-template-columns: 1fr; } }

/* ── Contact form ── */
.ppd-c-contact { width: 100%; }
.ppd-c-contact-wrap { max-width: 620px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-contact.align-center .ppd-c-contact-head { text-align: center; }
.ppd-c-contact-head { margin: 0 0 26px; display: flex; flex-direction: column; gap: 8px; }
.ppd-c-contact-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-contact-head p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-contact-form { display: flex; flex-direction: column; gap: 16px; }
.ppd-c-cf-field { display: flex; flex-direction: column; gap: 6px; }
.ppd-c-cf-field label { font-size: 13.5px; font-weight: 600; color: var(--pp-text, #0f172a); }
.ppd-c-cf-field input, .ppd-c-cf-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a); font-size: 14.5px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.ppd-c-cf-field input:focus, .ppd-c-cf-field textarea:focus { outline: none; border-color: var(--pp-primary, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary, #4f46e5) 18%, transparent); }
.ppd-c-cf-field textarea { resize: vertical; min-height: 120px; }
.ppd-c-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.ppd-c-contact-btn { align-self: flex-start; padding: 12px 24px; border-radius: 11px; border: 0; cursor: pointer; font-weight: 700; font-size: 15px; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); transition: filter .15s ease; }
.ppd-c-contact.align-center .ppd-c-contact-btn { align-self: center; }
.ppd-c-contact-btn:hover { filter: brightness(1.06); }
.ppd-c-contact-ok, .ppd-c-contact-err, .ppd-c-contact-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.4; }
.ppd-c-contact-ok { background: color-mix(in srgb, #10b981 14%, transparent); color: #047857; border: 1px solid color-mix(in srgb, #10b981 30%, transparent); }
.ppd-c-contact-err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; border: 1px solid color-mix(in srgb, #ef4444 28%, transparent); }
.ppd-c-contact-note { background: var(--pp-surface-soft, #f1f5f9); color: var(--pp-muted, #64748b); font-size: 13px; }

/* ── Announcement Bar ── */
.ppd-c-annc-wrap { width: 100%; }
.ppd-c-annc-x { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ppd-c-annc { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 44px; font-size: 14px; font-weight: 500; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-annc.align-center { justify-content: center; text-align: center; }
.ppd-c-annc.align-left { justify-content: flex-start; }
.ppd-c-annc-in { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: inherit; }
.ppd-c-annc-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.ppd-c-annc-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px; font-size: 20px; line-height: 1; cursor: pointer; opacity: .8; color: inherit; }
.ppd-c-annc-close:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.ppd-c-annc-x:checked ~ .ppd-c-annc { display: none; }

/* ── Logo Cloud ── */
.ppd-c-logos { width: 100%; }
.ppd-c-logos-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px; overflow: hidden; }
.ppd-c-logos-h { margin: 0 0 24px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted, #94a3b8); }
.ppd-c-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; }
.ppd-c-logo { display: inline-flex; align-items: center; justify-content: center; height: 34px; }
/* Definite height (not max-height) so SVGs with a viewBox but no intrinsic px
   size don't collapse to 0×0; width derives from the ratio, capped for wordmarks. */
.ppd-c-logo img { height: 34px; width: auto; max-width: 170px; display: block; object-fit: contain; }
.ppd-c-logo-ph { width: 110px; color: var(--pp-muted, #cbd5e1); font-size: 26px; }
.ppd-c-logos.is-gray .ppd-c-logo { filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease; }
.ppd-c-logos.is-gray .ppd-c-logo:hover { filter: grayscale(0); opacity: 1; }
.ppd-c-logos-marq { display: flex; width: max-content; animation: ppmarquee 32s linear infinite; }
.ppd-c-logos-marq .ppd-c-logos-track { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.ppd-c-logos.is-marquee:hover .ppd-c-logos-marq { animation-play-state: paused; }
@keyframes ppmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ppd-c-logos-marq { animation: none; } }

/* ── Stats Counter ── */
.ppd-c-stats { width: 100%; }
.ppd-c-stats-wrap { max-width: 1160px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-stats-h { text-align: center; margin: 0 0 36px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-stats-grid { display: grid; gap: 24px; text-align: center; }
.ppd-c-stats-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ppd-c-stat-num { font-size: clamp(34px, 5vw, 52px); font-weight: 850; letter-spacing: -.02em; line-height: 1; color: var(--pp-primary, #4f46e5); font-variant-numeric: tabular-nums; }
.ppd-c-stat-lbl { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--pp-muted, #475569); }
@media (max-width: 640px) { .ppd-c-stats-grid.cols-3, .ppd-c-stats-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }

/* ── CTA Band ── */
.ppd-c-cta { width: 100%; color: var(--pp-text, #0f172a); }
.ppd-c-cta.tone-light { color: #fff; }
.ppd-c-cta.tone-light .ppd-c-cta-txt p { color: rgba(255, 255, 255, .85); }
.ppd-c-cta-in { max-width: 1120px; margin: 0 auto; padding: 56px 24px; display: flex; align-items: center; gap: 32px; }
.ppd-c-cta.align-center .ppd-c-cta-in { flex-direction: column; text-align: center; }
.ppd-c-cta.align-left .ppd-c-cta-in { justify-content: space-between; }
.ppd-c-cta-txt h2 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.ppd-c-cta-txt p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--pp-muted, #475569); }
.ppd-c-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.ppd-c-cta.align-center .ppd-c-cta-btns { justify-content: center; }
@media (max-width: 720px) { .ppd-c-cta.align-left .ppd-c-cta-in { flex-direction: column; text-align: center; } .ppd-c-cta.align-left .ppd-c-cta-btns { justify-content: center; } }

/* ── Team Grid ── */
.ppd-c-teams { width: 100%; }
.ppd-c-team-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.ppd-c-team-head { text-align: center; max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-team-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-team-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-team-grid { display: grid; gap: 24px; }
.ppd-c-team-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-team-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-team-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ppd-c-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 20px; border-radius: 16px; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-team-ph { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.ppd-c-team-ph-x { display: inline-grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--pp-primary, #4f46e5); background: color-mix(in srgb, var(--pp-primary, #4f46e5) 14%, transparent); }
.ppd-c-team-name { font-size: 17px; font-weight: 750; color: var(--pp-text, #0f172a); }
.ppd-c-team-role { font-size: 13.5px; font-weight: 600; color: var(--pp-primary, #4f46e5); }
.ppd-c-team-bio { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-team-socs { display: flex; gap: 8px; margin-top: 12px; }
.ppd-c-team-soc { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: 15px; color: var(--pp-muted, #64748b); text-decoration: none; border: 1px solid var(--pp-border, #e5e7eb); transition: color .15s ease, border-color .15s ease; }
.ppd-c-team-soc:hover { color: var(--pp-primary, #4f46e5); border-color: var(--pp-primary, #4f46e5); }
@media (max-width: 900px) { .ppd-c-team-grid.cols-3, .ppd-c-team-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ppd-c-team-grid { grid-template-columns: 1fr !important; } }

/* ── FAQ ── */
.ppd-c-faq { width: 100%; }
.ppd-c-faq-wrap { max-width: 860px; margin: 0 auto; padding: 64px 24px; }
.ppd-c-faq-head { text-align: center; margin: 0 auto 32px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-faq-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-faq-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-faq-list { display: grid; gap: 12px; }
.ppd-c-faq-list.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-faq-item { border: 1px solid var(--pp-border, #e5e7eb); border-radius: 12px; background: var(--pp-surface, #fff); overflow: hidden; }
.ppd-c-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; font-size: 15.5px; font-weight: 650; color: var(--pp-text, #0f172a); list-style: none; }
.ppd-c-faq-q::-webkit-details-marker { display: none; }
.ppd-c-faq-ic { color: var(--pp-muted, #94a3b8); transition: transform .2s ease; flex: 0 0 auto; }
.ppd-c-faq-item[open] .ppd-c-faq-ic { transform: rotate(180deg); }
.ppd-c-faq-a { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--pp-muted, #475569); }
@media (max-width: 640px) { .ppd-c-faq-list.cols-2 { grid-template-columns: 1fr; } }

/* ── Carousel (CSS scroll-snap) ── */
.ppd-c-carou { width: 100%; }
.ppd-c-carou-wrap { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
.ppd-c-carou-h { text-align: center; margin: 0 0 28px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-carou-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ppd-c-carou-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; border-radius: 16px; overflow: hidden; background: var(--pp-surface-soft, #f1f5f9); border: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-carou.is-peek .ppd-c-carou-slide { flex-basis: 82%; }
.ppd-c-carou-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppd-c-carou-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 42px; color: var(--pp-muted, #94a3b8); }
.ppd-c-carou-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px; font-size: 14.5px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(2, 6, 23, .72), transparent); }
.ppd-c-carou-hint { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--pp-muted, #94a3b8); display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (min-width: 768px) { .ppd-c-carou-slide { flex-basis: 48%; } .ppd-c-carou.is-peek .ppd-c-carou-slide { flex-basis: 44%; } }

/* ── Gallery (CSS :target lightbox) ── */
.ppd-c-gallery { width: 100%; }
.ppd-c-gal-wrap { max-width: 1200px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-gal-h { text-align: center; margin: 0 0 28px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-gal-grid { display: grid; gap: 14px; }
.ppd-c-gallery.gap-sm .ppd-c-gal-grid { gap: 8px; }
.ppd-c-gallery.gap-lg .ppd-c-gal-grid { gap: 22px; }
.ppd-c-gal-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-gal-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-gal-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ppd-c-gal-cell { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--pp-surface-soft, #f1f5f9); border: 1px solid var(--pp-border, #e5e7eb); cursor: zoom-in; }
.ppd-c-gal-cell > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ppd-c-gal-cell:hover > img { transform: scale(1.05); }
.ppd-c-gal-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; color: var(--pp-muted, #94a3b8); }
.ppd-c-gal-lb { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 32px; background: rgba(2, 6, 23, .88); }
.ppd-c-gal-lb:target { display: flex; }
.ppd-c-gal-lb-bg { position: absolute; inset: 0; cursor: zoom-out; }
.ppd-c-gal-lb > img { position: relative; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ppd-c-gal-lb-x { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 26px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .14); }
.ppd-c-gal-lb-x:hover { background: rgba(255, 255, 255, .26); }
@media (max-width: 720px) { .ppd-c-gal-grid.cols-3, .ppd-c-gal-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }

/* ── Countdown ── */
.ppd-c-countdown { width: 100%; }
.ppd-c-cd-wrap { max-width: 900px; margin: 0 auto; padding: 52px 24px; }
.ppd-c-countdown.align-center .ppd-c-cd-wrap { text-align: center; }
.ppd-c-cd-h { margin: 0 0 22px; font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-cd { display: inline-flex; align-items: center; gap: 10px; }
.ppd-c-cd-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; }
.ppd-c-cd.is-boxes .ppd-c-cd-cell { padding: 14px 10px; border-radius: 14px; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .05); }
.ppd-c-cd-num { font-size: clamp(28px, 5vw, 44px); font-weight: 850; line-height: 1; color: var(--pp-primary, #4f46e5); font-variant-numeric: tabular-nums; }
.ppd-c-cd-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted, #94a3b8); }
.ppd-c-cd-sep { font-size: clamp(24px, 4vw, 36px); font-weight: 800; color: var(--pp-border, #cbd5e1); margin-top: -14px; }
.ppd-c-cd.is-boxes .ppd-c-cd-sep { display: none; }
.ppd-c-cd-done { font-size: 20px; font-weight: 700; color: var(--pp-primary, #4f46e5); padding: 14px 0; }

/* ── Marquee ── */
.ppd-c-mq { width: 100%; overflow: hidden; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-mq-track { display: flex; width: max-content; animation: ppmarquee 26s linear infinite; }
.ppd-c-mq.spd-slow .ppd-c-mq-track { animation-duration: 44s; }
.ppd-c-mq.spd-fast .ppd-c-mq-track { animation-duration: 14s; }
.ppd-c-mq:hover .ppd-c-mq-track { animation-play-state: paused; }
.ppd-c-mq-seq { display: flex; align-items: center; padding: 11px 0; }
.ppd-c-mq-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 28px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ppd-c-mq-item .bi, .ppd-c-mq-item i { font-size: 9px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ppd-c-mq-track { animation: none; } }

/* ── Social Links ── */
.ppd-c-socials { width: 100%; }
.ppd-c-soc-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px; display: flex; align-items: center; gap: 16px; }
.ppd-c-socials.align-center .ppd-c-soc-wrap { justify-content: center; }
.ppd-c-socials.align-right .ppd-c-soc-wrap { justify-content: flex-end; }
.ppd-c-soc-h { font-size: 14px; font-weight: 700; color: var(--pp-muted, #64748b); }
.ppd-c-soc-row { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.ppd-c-soc { display: inline-grid; place-items: center; text-decoration: none; transition: transform .12s ease, background .15s ease, color .15s ease; }
.ppd-c-socials.s-sm .ppd-c-soc { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
.ppd-c-socials.s-md .ppd-c-soc { width: 42px; height: 42px; font-size: 18px; border-radius: 10px; }
.ppd-c-socials.s-lg .ppd-c-soc { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
.ppd-c-socials.v-filled .ppd-c-soc { background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-socials.v-outline .ppd-c-soc { border: 1px solid var(--pp-border, #e5e7eb); color: var(--pp-text, #0f172a); }
.ppd-c-socials.v-plain .ppd-c-soc { color: var(--pp-muted, #64748b); }
.ppd-c-soc:hover { transform: translateY(-2px); }
.ppd-c-socials.v-outline .ppd-c-soc:hover, .ppd-c-socials.v-plain .ppd-c-soc:hover { color: var(--pp-primary, #4f46e5); }
.ppd-c-socials.v-filled .ppd-c-soc:hover { filter: brightness(1.08); }

/* ── Comparison Table ── */
.ppd-c-compare { width: 100%; }
.ppd-c-cmp-wrap { max-width: 1120px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-cmp-head { text-align: center; max-width: 680px; margin: 0 auto 34px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-cmp-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-cmp-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-cmp-scroll { overflow-x: auto; }
.ppd-c-cmp-tbl { width: 100%; border-collapse: collapse; min-width: 520px; }
.ppd-c-cmp-tbl th, .ppd-c-cmp-tbl td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-cmp-tbl thead th { font-size: 15px; font-weight: 750; color: var(--pp-text, #0f172a); position: relative; }
.ppd-c-cmp-tbl thead th.is-hi { color: var(--pp-primary, #4f46e5); }
.ppd-c-cmp-tbl tbody th[scope="row"] { text-align: left; font-size: 14.5px; font-weight: 600; color: var(--pp-text, #0f172a); }
.ppd-c-cmp-tbl td.is-hi { background: color-mix(in srgb, var(--pp-primary, #4f46e5) 6%, transparent); }
.ppd-c-cmp-tbl thead th.is-hi { background: color-mix(in srgb, var(--pp-primary, #4f46e5) 9%, transparent); border-top-left-radius: 12px; border-top-right-radius: 12px; }
.ppd-c-cmp-badge { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-primary, #4f46e5); }
.ppd-c-cmp-yes { color: #10b981; font-size: 19px; }
.ppd-c-cmp-no { color: var(--pp-border, #cbd5e1); font-size: 18px; }
.ppd-c-cmp-txt { font-size: 14px; font-weight: 600; color: var(--pp-text, #0f172a); }

/* ── Back to Top ── */
.ppd-c-totop { position: fixed; bottom: 24px; z-index: 60; width: 46px; height: 46px; display: inline-grid; place-items: center; border: 0; cursor: pointer; font-size: 20px; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); box-shadow: 0 8px 22px rgba(2, 6, 23, .24); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.ppd-c-totop.pos-right { right: 24px; }
.ppd-c-totop.pos-left { left: 24px; }
.ppd-c-totop.sh-circle { border-radius: 50%; }
.ppd-c-totop.sh-rounded { border-radius: 12px; }
.ppd-c-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ppd-c-totop:hover { filter: brightness(1.08); }
/* Canvas preview: show it inline where it was dropped, not fixed. */
.ppd-c-totop.is-preview { position: static; opacity: 1; visibility: visible; transform: none; margin: 12px; }

/* ── Cookie Consent ── */
.ppd-c-cookie { position: fixed; z-index: 70; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 16px 20px; background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 -6px 30px rgba(2, 6, 23, .16); transform: translateY(130%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.ppd-c-cookie.pos-bottom { left: 0; right: 0; bottom: 0; justify-content: center; }
.ppd-c-cookie.pos-bl { left: 20px; bottom: 20px; max-width: 400px; border-radius: 14px; flex-direction: column; align-items: flex-start; }
.ppd-c-cookie.is-live { transform: none; }
.ppd-c-cookie.is-hidden { transform: translateY(130%); }
.ppd-c-cookie-msg { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--pp-muted, #475569); }
.ppd-c-cookie-msg > .bi, .ppd-c-cookie-msg > i { color: var(--pp-primary, #4f46e5); font-size: 18px; flex: 0 0 auto; }
.ppd-c-cookie-link { color: var(--pp-primary, #4f46e5); text-decoration: underline; text-underline-offset: 2px; }
.ppd-c-cookie-acts { display: inline-flex; gap: 10px; }
.ppd-c-cookie-btn { padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; }
.ppd-c-cookie-btn.is-primary { background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-cookie-btn.is-ghost { background: transparent; color: var(--pp-text, #0f172a); border-color: var(--pp-border, #e5e7eb); }
.ppd-c-cookie.is-preview { position: static; transform: none; border-radius: 14px; margin: 12px; }

/* ── Newsletter ── */
.ppd-c-news { width: 100%; }
.ppd-c-news-wrap { max-width: 640px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.ppd-c-news-head { margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.ppd-c-news-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-news-head p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-news-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.ppd-c-news.layout-stacked .ppd-c-news-form { flex-direction: column; }
.ppd-c-news-form input { flex: 1 1 auto; min-width: 0; padding: 12px 15px; border-radius: 11px; border: 1px solid var(--pp-border, #e5e7eb); background: var(--pp-surface, #fff); color: var(--pp-text, #0f172a); font-size: 15px; }
.ppd-c-news-form input:focus { outline: none; border-color: var(--pp-primary, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary, #4f46e5) 18%, transparent); }
.ppd-c-news-btn { flex: 0 0 auto; padding: 12px 24px; border-radius: 11px; border: 0; cursor: pointer; font-weight: 700; font-size: 15px; background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); transition: filter .15s ease; }
.ppd-c-news-btn:hover { filter: brightness(1.06); }
.ppd-c-news-ok, .ppd-c-news-err, .ppd-c-news-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; padding: 12px 16px; border-radius: 11px; font-size: 14px; }
.ppd-c-news-ok { background: color-mix(in srgb, #10b981 14%, transparent); color: #047857; }
.ppd-c-news-err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #b91c1c; }
.ppd-c-news-note { background: var(--pp-surface-soft, #f1f5f9); color: var(--pp-muted, #64748b); font-size: 13px; }
@media (max-width: 520px) { .ppd-c-news-form { flex-direction: column; } }

/* ── Scroll-reveal ("Animate in") — cross-component. Default state is VISIBLE so
   content shows without JS / with reduced motion; the reveal script adds .is-armed
   (hidden) then .is-in (revealed) as each element scrolls into view. */
.ppd-c-reveal.is-armed { opacity: 0; will-change: opacity, transform; }
.ppd-c-reveal.rv-up.is-armed { transform: translateY(28px); }
.ppd-c-reveal.rv-down.is-armed { transform: translateY(-28px); }
.ppd-c-reveal.rv-left.is-armed { transform: translateX(-34px); }
.ppd-c-reveal.rv-right.is-armed { transform: translateX(34px); }
.ppd-c-reveal.rv-zoom.is-armed { transform: scale(.92); }
.ppd-c-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ppd-c-reveal.rd-1.is-in { transition-delay: .1s; }
.ppd-c-reveal.rd-2.is-in { transition-delay: .2s; }
.ppd-c-reveal.rd-3.is-in { transition-delay: .3s; }
.ppd-c-reveal.rd-4.is-in { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .ppd-c-reveal.is-armed { opacity: 1; transform: none; } }

/* ── Feature Split (media + text rows) ── */
.ppd-c-fsplit { width: 100%; }
.ppd-c-fs-wrap { max-width: 1160px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; gap: 24px; }
.ppd-c-fs-head { text-align: center; max-width: 680px; margin: 24px auto 8px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-fs-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-fs-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-fs-row { display: flex; align-items: center; gap: 48px; padding: 24px 0; }
.ppd-c-fs-row.media-right { flex-direction: row-reverse; }
.ppd-c-fs-media { flex: 1 1 50%; min-width: 0; }
.ppd-c-fs-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 20px 50px rgba(2, 6, 23, .14); }
.ppd-c-fs-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 40px; color: var(--pp-muted, #94a3b8); background: var(--pp-surface-soft, #f1f5f9); border: 1px dashed var(--pp-border, #e2e8f0); border-radius: 16px; }
.ppd-c-fs-text { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ppd-c-fs-eyebrow { display: inline-flex; align-self: flex-start; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--pp-primary, #4f46e5) 12%, transparent); color: var(--pp-primary, #4f46e5); }
.ppd-c-fs-text h3 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--pp-text, #0f172a); text-wrap: balance; }
.ppd-c-fs-text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pp-muted, #475569); max-width: 52ch; }
.ppd-c-fs-cta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; font-weight: 700; font-size: 15px; color: var(--pp-primary, #4f46e5); text-decoration: none; }
.ppd-c-fs-cta:hover { gap: 10px; }
@media (max-width: 820px) {
  .ppd-c-fs-row, .ppd-c-fs-row.media-right { flex-direction: column; gap: 24px; text-align: center; }
  .ppd-c-fs-media, .ppd-c-fs-text { flex: 1 1 100%; width: 100%; }
  .ppd-c-fs-text { align-items: center; }
  .ppd-c-fs-eyebrow, .ppd-c-fs-cta { align-self: center; }
}

/* ── Bento Grid ── */
.ppd-c-bentos { width: 100%; }
.ppd-c-bento-wrap { max-width: 1160px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-bento-head { text-align: center; max-width: 680px; margin: 0 auto 34px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-bento-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-bento-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); grid-auto-flow: dense; gap: 16px; }
.ppd-c-bento { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .04); transition: transform .15s ease, box-shadow .15s ease; }
.ppd-c-bento:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(2, 6, 23, .10); }
.ppd-c-bento.sz-wide { grid-column: span 2; }
.ppd-c-bento.sz-tall { grid-row: span 2; }
.ppd-c-bento.sz-big { grid-column: span 2; grid-row: span 2; }
.ppd-c-bento-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; font-size: 21px; background: color-mix(in srgb, var(--bento-accent, var(--pp-primary, #4f46e5)) 13%, transparent); color: var(--bento-accent, var(--pp-primary, #4f46e5)); }
.ppd-c-bento h3 { margin: 4px 0 0; font-size: 17px; font-weight: 750; color: var(--pp-text, #0f172a); }
.ppd-c-bento p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-bento.sz-big h3 { font-size: 22px; }
.ppd-c-bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ppd-c-bento.has-img { color: #fff; }
.ppd-c-bento.has-img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(2, 6, 23, .82), rgba(2, 6, 23, .3)); }
.ppd-c-bento.has-img > * { position: relative; z-index: 2; }
.ppd-c-bento.has-img h3, .ppd-c-bento.has-img p { color: #fff; }
.ppd-c-bento.has-img .ppd-c-bento-ic { background: rgba(255, 255, 255, .18); color: #fff; }
@media (max-width: 900px) { .ppd-c-bento-grid { grid-template-columns: repeat(2, 1fr); } .ppd-c-bento.sz-big, .ppd-c-bento.sz-wide { grid-column: span 2; } .ppd-c-bento.sz-tall { grid-row: span 1; } }
@media (max-width: 520px) { .ppd-c-bento-grid { grid-template-columns: 1fr; } .ppd-c-bento.sz-big, .ppd-c-bento.sz-wide { grid-column: span 1; } }

/* ── Video ── */
.ppd-c-video { margin: 0; width: 100%; }
.ppd-c-video-frame { position: relative; width: 100%; overflow: hidden; background: #0f172a; }
.ppd-c-video.is-rounded .ppd-c-video-frame { border-radius: 16px; }
.ppd-c-video.is-shadow .ppd-c-video-frame { box-shadow: 0 24px 60px rgba(2, 6, 23, .22); }
.ppd-c-video-frame > iframe, .ppd-c-video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.ppd-c-video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; background: linear-gradient(135deg, #1e293b, #0f172a); }
.ppd-c-video-play { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 30px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.ppd-c-video-lbl { font-size: 13.5px; font-weight: 600; opacity: .85; }
.ppd-c-video figcaption { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--pp-muted, #64748b); }

/* ── Post Grid ── */
.ppd-c-posts { width: 100%; }
.ppd-c-post-wrap { max-width: 1200px; margin: 0 auto; padding: 60px 24px; }
.ppd-c-post-head { text-align: center; max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-post-head h2 { margin: 0; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-post-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-post-grid { display: grid; gap: 24px; }
.ppd-c-post-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ppd-c-post-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ppd-c-post { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e5e7eb); box-shadow: 0 1px 2px rgba(2, 6, 23, .04); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.ppd-c-post:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(2, 6, 23, .12); }
.ppd-c-post-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pp-surface-soft, #f1f5f9); }
.ppd-c-post-media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
a.ppd-c-post:hover .ppd-c-post-media > img { transform: scale(1.05); }
.ppd-c-post-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; color: var(--pp-muted, #94a3b8); }
.ppd-c-post-body { display: flex; flex-direction: column; gap: 9px; padding: 20px; flex: 1 1 auto; }
.ppd-c-post-cat { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: color-mix(in srgb, var(--pp-primary, #4f46e5) 12%, transparent); color: var(--pp-primary, #4f46e5); }
.ppd-c-post-body h3 { margin: 0; font-size: 18px; font-weight: 750; line-height: 1.3; color: var(--pp-text, #0f172a); }
.ppd-c-post-body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-post-meta { font-size: 12.5px; color: var(--pp-muted, #94a3b8); }
.ppd-c-post-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--pp-primary, #4f46e5); }
a.ppd-c-post:hover .ppd-c-post-more { gap: 10px; }
@media (max-width: 900px) { .ppd-c-post-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ppd-c-post-grid.cols-2, .ppd-c-post-grid.cols-3 { grid-template-columns: 1fr; } }

/* ── Checklist ── */
.ppd-c-checklist { width: 100%; }
.ppd-c-check-wrap { max-width: 820px; margin: 0 auto; padding: 56px 24px; }
.ppd-c-check-head { text-align: center; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 10px; }
.ppd-c-check-head h2 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--pp-text, #0f172a); }
.ppd-c-check-head p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pp-muted, #475569); }
.ppd-c-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ppd-c-check-list.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.ppd-c-check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.5; color: var(--pp-text, #0f172a); }
.ppd-c-check-list li .bi, .ppd-c-check-list li i { font-size: 19px; margin-top: 1px; flex: 0 0 auto; }
.ppd-c-check-list li.is-yes .bi, .ppd-c-check-list li.is-yes i { color: #10b981; }
.ppd-c-check-list li.is-no { color: var(--pp-muted, #94a3b8); }
.ppd-c-check-list li.is-no .bi, .ppd-c-check-list li.is-no i { color: var(--pp-border, #cbd5e1); }
@media (max-width: 560px) { .ppd-c-check-list.cols-2 { grid-template-columns: 1fr; } }

/* ── Link List (link-in-bio) ── */
.ppd-c-linklist { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0 auto; padding: 10px 0; }
.ppd-c-linkitem { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .12s ease, filter .15s ease; }
.ppd-c-linkitem:hover { transform: translateY(-2px); }
.ppd-c-linkitem.is-solid { background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.ppd-c-linkitem.is-solid:hover { filter: brightness(1.06); }
.ppd-c-linkitem.is-outline { background: transparent; color: var(--pp-text, #0f172a); border: 1.5px solid var(--pp-border, #e5e7eb); }
.ppd-c-linkitem.is-soft { background: var(--pp-surface-soft, #f1f5f9); color: var(--pp-text, #0f172a); border: 1px solid var(--pp-border, #e5e7eb); }
.ppd-c-linkitem .bi, .ppd-c-linkitem i { font-size: 18px; }

.ppd-c-tabs { border: 1px solid var(--ppd-border); border-radius: 14px; overflow: hidden; }
.ppd-tabbar { display: flex; gap: 2px; background:var(--pp-surface-soft,#f8fbff); border-bottom: 1px solid var(--ppd-border); padding: 6px 6px 0; }
.ppd-tab { padding: 8px 14px; font-size: 13px; font-weight: 800; color: var(--ppd-muted); border-radius: 9px 9px 0 0; }
.ppd-c-tabs button.ppd-tab { border: 0; background: transparent; font: inherit; cursor: pointer; }
.ppd-tab.active { color: var(--ppd-primary); background:var(--pp-surface,#fff); box-shadow: inset 0 -2px 0 var(--ppd-primary); }
.ppd-tabpane[hidden] { display: none; }
/* Tabs variants (bar style / alignment / size / vertical) — mirrored into the built app */
.ppd-c-tabs.bar-pills, .ppd-c-tabs.bar-segmented, .ppd-c-tabs.is-vertical { overflow: visible; border: 0; }
.ppd-c-tabs.align-center > .ppd-tabbar { justify-content: center; }
.ppd-c-tabs.align-end > .ppd-tabbar { justify-content: flex-end; }
.ppd-c-tabs.align-stretch > .ppd-tabbar > .ppd-tab { flex: 1 1 0; text-align: center; }
.ppd-c-tabs.size-sm .ppd-tab { padding: 4px 10px; font-size: 12px; }
.ppd-c-tabs.size-lg .ppd-tab { padding: 10px 18px; font-size: 15px; }
.ppd-c-tabs.is-vertical { display: flex; gap: 0; }
.ppd-c-tabs.is-vertical > .ppd-tabbar { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--ppd-border); padding: 6px; min-width: 130px; }
.ppd-c-tabs.is-vertical > .ppd-tabpane { flex: 1; min-width: 0; }
.ppd-c-tabs.is-vertical .ppd-tab { border-radius: 8px; }
.ppd-c-tabs.is-vertical .ppd-tab.active { box-shadow: inset -2px 0 0 var(--ppd-primary); }
.ppd-c-tabs.bar-pills > .ppd-tabbar { background: transparent; border-bottom: 0; gap: 6px; padding: 4px 0; }
.ppd-c-tabs.bar-pills .ppd-tab { border-radius: 999px; }
.ppd-c-tabs.bar-pills .ppd-tab.active { background: var(--pptab-active, var(--ppd-primary)); color: #fff; box-shadow: none; }
.ppd-c-tabs.bar-boxed .ppd-tab { border: 1px solid transparent; border-bottom: 0; }
.ppd-c-tabs.bar-boxed .ppd-tab.active { border-color: var(--ppd-border); background:var(--pp-surface,#fff); color: var(--pptab-active, var(--ppd-primary)); box-shadow: none; }
.ppd-c-tabs.bar-segmented > .ppd-tabbar { display: inline-flex; background: var(--pptab-barbg, var(--pp-surface-soft,#f1f5f9)); border-radius: 10px; padding: 3px; gap: 2px; border-bottom: 0; }
.ppd-c-tabs.bar-segmented .ppd-tab { border-radius: 7px; }
.ppd-c-tabs.bar-segmented .ppd-tab.active { background:var(--pp-surface,#fff); box-shadow: 0 1px 3px rgba(2,6,23,.14); color: var(--pptab-active, var(--ppd-text,#111827)); }
/* per-tab config cards in the inspector */
.ppd-tabcfg { border: 1px solid var(--ppd-border); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; background: var(--ppd-surface, #fff); }
.ppd-tabcfg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 12px; color: var(--ppd-muted); }
.ppd-tabcfg-del { border: 0; background: transparent; color:var(--pp-danger-text,#dc2626); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ppd-tabcfg-del:hover { background: rgba(220, 38, 38, .1); }

/* hidden-node badge on canvas */
.ppd-node.is-hidden::before { content: "hidden"; position: absolute; top: 4px; left: 8px; z-index: 5; font-size: 9px; font-weight: 800; color:var(--pp-primary-text,#fff); background: #94a3b8; border-radius: 5px; padding: 1px 5px; }

/* saving spinner on save button */
.ppd-tool-btn.is-saving i { animation: ppd-spin .7s linear infinite; }
@keyframes ppd-spin { to { transform: rotate(360deg); } }

/* hidden sub-parts stay visible (dimmed) in the designer so they can be reselected & re-enabled */
.ppd-part-hidden { opacity: .38; filter: grayscale(.5); outline: 1px dashed #cbd5e1; outline-offset: 1px; }
.ppd-part-hidden.ppd-part-selected, .ppd-part-hidden.ppd-part-selected { opacity: .95; filter: none; }
/* selection-dependent controls (Delete/Update Selected) render disabled until rows are selected */
.ppd-needsel { opacity: .55; }
.ppd-needsel.ppd-part-selected { opacity: 1; }

/* deep selection: every sub-element is individually selectable */
.ppd-part { cursor: pointer; }
.ppd-part:hover { outline: 1px dashed #93c5fd; outline-offset: -1px; }
th.ppd-part:hover, td.ppd-part:hover { background: rgba(37,99,235,.06); }
.ppd-part-selected { outline: 2px solid var(--ppd-primary) !important; outline-offset: -1px; position: relative; z-index: 1; }
th.ppd-part-selected, td.ppd-part-selected, .ppd-chip.ppd-part-selected, .ppd-stat.ppd-part-selected, .ppd-tab.ppd-part-selected { background:var(--pp-selection,rgba(37,99,235,.1)) !important; }
.ppd-btn.ppd-part-selected, .ppd-act.ppd-part-selected { box-shadow:var(--pp-shadow-md,0 0 0 3px rgba(37,99,235,.22)); }
/* owner node shows a faint context ring while one of its parts is selected */
.ppd-node.ppd-has-part { outline: 1px solid var(--ppd-primary-border); outline-offset: 2px; border-radius: 12px; }
.ppd-node.ppd-has-part .ppd-node-tools { display: flex; }
.ppd-grid-check { width: 34px; text-align: center; }
.ppd-grid-actcol { white-space: nowrap; }

/* nicer scrollbars */
.ppd-panel-body::-webkit-scrollbar, .ppd-insp-body::-webkit-scrollbar, .ppd-canvas-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.ppd-panel-body::-webkit-scrollbar-thumb, .ppd-insp-body::-webkit-scrollbar-thumb, .ppd-canvas-wrap::-webkit-scrollbar-thumb { background:var(--pp-border,#cbd5e1); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.ppd-panel-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* ============================================================
   Table Toolbar (3-zone) + conditional formatting
   ============================================================ */
/* two-tier toolbar: [actions | utility]  /  [search+filter+custom | count+page-size] */
.ppd-list-toolbar { display: flex; flex-direction: column; gap: 8px; }
.ppd-tb-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ppd-tbzone { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ppd-tbzone.center { flex: 1 1 auto; }
.ppd-tbzone.utility, .ppd-tbzone.info { margin-left: auto; flex: 0 0 auto; justify-content: flex-end; }
.ppd-tb-row:first-child { border-bottom: 1px dashed var(--ppd-border-soft); padding-bottom: 8px; }
.ppd-tb-search { flex: 1 1 auto; min-width: 170px; max-width: 460px; }
/* compact, uniform control height across the whole toolbar */
.ppd-list-toolbar .ppd-btn { height: 32px; font-size: 12.5px; padding: 0 9px; gap: 6px; }
/* PDF toolbar button keeps its red identity (mirrors the generated app) */
.ppd-list-toolbar [data-ppd-part="tb:pdf"] i { color: #e2483d; }
.ppd-tb-menu-item i { width: 15px; text-align: center; }
.ppd-list-toolbar .ppd-tb-search, .ppd-list-toolbar .ppd-tb-dd, .ppd-list-toolbar .ppd-tb-pagesize, .ppd-list-toolbar .ppd-tb-placeholder { height: 32px; }

/* search box + Search button (mirrors the generated app: 150–200px input) */
.ppd-tb-searchgrp { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; }
/* Unified frosted-glass search field: leading magnifier + input + trailing accent
   submit inside. Semi-transparent + backdrop-blur + refractive edge (mirrors app). */
.ppd-tb-search { display: inline-flex; align-items: center; gap: 7px; height: 34px; flex: 0 1 auto; min-width: 150px; max-width: 200px; padding: 0 10px; border-radius: 10px; color: var(--ppd-muted);
  border: 1px solid color-mix(in srgb, var(--ppd-border, #cbd5e1) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-surface, #fff) 82%, transparent), color-mix(in srgb, var(--pp-surface, #fff) 60%, transparent));
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 2px 8px rgba(2,6,23,.06), 0 1px 2px rgba(2,6,23,.04), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  transition: border-color .16s, box-shadow .16s, background .16s; }
.ppd-tb-search:focus-within { border-color: var(--ppd-primary, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppd-primary, #6366f1) 15%, transparent), 0 2px 8px rgba(2,6,23,.06), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
.ppd-tb-search input { border: 0; outline: 0; background: transparent; font: inherit; width: 100%; min-width: 0; }
/* Search DESIGNS (props.searchStyle) — 'glass' is the frosted base above. The
   canvas theme-bridge (:is(… .ppd-tb-search …)) sets a solid dark bg at high
   specificity, so the variant-defining props use !important to win reliably. */
.ppd-tb-search--minimal { border: 0 !important; border-bottom: 1.5px solid var(--ppd-border, #cbd5e1) !important; border-radius: 0 !important; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.ppd-tb-search--minimal:focus-within { border-bottom-color: var(--ppd-primary, #6366f1) !important; }
.ppd-tb-search--minimal .ppd-tb-search-go { background: transparent; color: var(--ppd-primary, #6366f1); }
.ppd-tb-search--soft { border: 1px solid transparent !important; background: color-mix(in srgb, var(--ppd-text, #64748b) 8%, transparent) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.ppd-tb-search--soft:focus-within { border-color: var(--ppd-primary, #6366f1) !important; }
.ppd-tb-search--outline { border: 1px solid var(--ppd-border, #cbd5e1) !important; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.ppd-tb-search--pill { border-radius: 999px !important; }
.ppd-tb-search--pill .ppd-tb-search-go { border-radius: 999px; }
.ppd-tb-search-uni { position: relative; gap: 0; padding: 0 42px 0 34px; min-width: 200px; max-width: 320px; flex: 1 1 auto; }
.ppd-tb-search-uni > .bi:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--ppd-muted); }
.ppd-tb-search-uni input { height: 100%; }
.ppd-tb-search-go { position: absolute; right: 4px; top: 0; bottom: 0; margin: auto 0; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 8px; line-height: 0; background: var(--pp-primary, #6366f1); color: var(--pp-primary-text, #fff); box-shadow: 0 2px 5px color-mix(in srgb, var(--pp-primary, #6366f1) 42%, transparent); transition: transform .15s, box-shadow .15s; }
.ppd-tb-search-go .bi { display: block; font-size: 15px; line-height: 1; }
.ppd-tb-search:focus-within .ppd-tb-search-go { transform: scale(1.05); }
/* thin divider between Filter and the Table/Cards/Board view switch */
.ppd-tb-viewsep { display: inline-block; width: 1px; height: 20px; margin: 0 3px; background: color-mix(in srgb, var(--ppd-border, #cbd5e1) 80%, transparent); flex: 0 0 auto; }
/* icon-only toolbar dropdown (Saved views): square, no label, hide the caret */
.ppd-tb-dd.ppd-tb-icononly { width: 34px; padding: 0; justify-content: center; }
.ppd-tb-dd.ppd-tb-icononly > .ppd-caret { display: none; }
/* Inline Add renders icon-only on the canvas too (mirrors the generated app). */
.ppd-list-toolbar [data-ppd-part="tb:inline_add"] > span { display: none; }
.ppd-list-toolbar [data-ppd-part="tb:inline_add"] { width: 34px; padding: 0; justify-content: center; gap: 0; }
/* Table / Cards view-toggle (mirrors generated .ppd-view-toggle) */
.ppd-tb-viewtoggle { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--ppd-border); border-radius: 9px; overflow: hidden; background:var(--pp-surface,#fff); }
.ppd-tb-viewtoggle .ppd-vt-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 100%; color: var(--ppd-muted); border-right: 1px solid var(--ppd-border); }
.ppd-tb-viewtoggle .ppd-vt-btn:last-child { border-right: 0; }
.ppd-tb-viewtoggle .ppd-vt-btn.is-active { background: var(--ppd-primary, #4f46e5); color:var(--pp-primary-text,#fff); }

/* custom-button placeholder */
.ppd-tb-placeholder { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border:1.5px dashed var(--pp-border,#c7d2e3); border-radius: 9px; background:var(--pp-surface-soft,#fbfdff); color:var(--pp-muted,#8aa0bd); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ppd-tb-placeholder:hover { border-color: var(--ppd-primary); color: var(--ppd-primary); background: var(--ppd-primary-soft); }

/* export dropdown + page-size, with hover menu */
.ppd-tb-dd, .ppd-tb-pagesize { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--ppd-border); border-radius: 9px; background:var(--pp-surface,#fff); color: var(--ppd-text); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--ppd-shadow-sm); }
.ppd-tb-dd:hover, .ppd-tb-pagesize:hover { border-color: var(--ppd-primary-border); color: var(--ppd-primary); background: var(--ppd-primary-soft); }
.ppd-caret { font-size: 9px; opacity: .6; }
/* records-count info */
.ppd-tb-info { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 4px; color: var(--ppd-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ppd-tb-info.ppd-part-selected { outline-offset: 2px; }
.ppd-ri-eye, .ppd-ri-short { display: none; }
.ppd-ri-eye { font-size: 14px; }
.ppd-tb-pagesize .lbl { color: var(--ppd-muted); font-weight: 700; font-size: 12px; }
.ppd-tb-pagesize .box { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--ppd-border); border-radius: 7px; background:var(--pp-surface-soft,#f8fbff); font-weight: 800; }
.ppd-tb-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 150px; background:var(--pp-surface,#fff); border: 1px solid var(--ppd-border); border-radius: 10px; box-shadow: var(--ppd-shadow); padding: 5px; display: none; z-index: 30; }
.ppd-tb-dd:hover .ppd-tb-menu, .ppd-tb-pagesize:hover .ppd-tb-menu { display: block; }
.ppd-tb-pagesize .box .ppd-tb-menu { left: auto; right: 0; }
.ppd-tb-menu-item { display: block; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color:var(--pp-text,#334155); white-space: nowrap; }
.ppd-tb-menu-item:hover { background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-tb-menu-item.is-active { color: var(--ppd-primary); font-weight: 800; background: var(--ppd-primary-soft); }
/* Data menu: rule + caption separating the transfer screens from the
   one-click downloads (mirrors .pp-menu-sep / .pp-menu-cap in the built app).
   Variables carry fallbacks: --ppd-border/--ppd-surface are not defined in the
   canvas scope, so a bare var() would collapse to transparent. */
.ppd-tb-menu-sep { display: block; height: 1px; background: var(--ppd-border, var(--pp-border, #e2e8f0)); margin: 5px 2px; }
.ppd-tb-menu-cap { display: block; padding: 3px 9px 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ppd-muted, var(--pp-muted, #94a3b8)); white-space: nowrap; }

/* filter chips */
.ppd-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ppd-fchips-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-muted); display: inline-flex; align-items: center; gap: 5px; }
.ppd-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ppd-primary-soft); border: 1px solid var(--ppd-primary-border); color: var(--ppd-primary); font-size: 12px; font-weight: 700; }
.ppd-fchip i { font-size: 10px; opacity: .7; }
.ppd-fchips-clear { height: 26px; border: 0; background: transparent; color: var(--ppd-muted); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ppd-fchips-hint { font-size: 10.5px; color:var(--pp-muted,#94a3b8); font-style: italic; margin-left: auto; }
.ppd-filter-chips.pp-fchips-center { justify-content: center; }
.ppd-filter-chips.pp-fchips-right { justify-content: flex-end; }
a.ppd-fchip { text-decoration: none; cursor: pointer; }
a.ppd-fchip:hover { filter: brightness(.97); }
.ppd-fchip-n, .pp-fchip-n { opacity: .7; font-weight: 600; }
a.ppd-fchips-clear { cursor: pointer; text-decoration: underline; }
/* Font dropdown — each option previews in its own font. */
/* ---- Custom font picker (live per-row font preview; native <select> can't) ----
   Uses the --pp-* theme tokens (like .ppd-field-row controls) so it tracks the
   selected light / dark / custom theme; --ppd-* tokens only track the stock
   "dark" console theme, which left this white on custom themes. */
.ppd-fp { position: relative; width: 100%; }
.ppd-fp-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px; height: 34px;
    padding: 0 10px; border-radius: 9px; font-size: 14px; cursor: pointer; text-align: left;
    transition: border-color .12s, box-shadow .12s;
    background: var(--pp-input-bg, var(--pp-surface, #fff));
    border: 1px solid var(--pp-input-border, var(--pp-border, var(--ppd-border, #e2e8f0)));
    color: var(--pp-input-text, var(--pp-text, var(--ppd-text, #0f172a)));
}
.ppd-fp-trigger:hover { border-color: var(--pp-primary, var(--ppd-primary, #2563eb)); }
.ppd-fp-trigger:focus-visible { outline: none; border-color: var(--pp-primary, var(--ppd-primary, #2563eb)); box-shadow: 0 0 0 3px var(--pp-primary-soft, rgba(37,99,235,.18)); }
.ppd-fp-cur { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-fp-caret { flex: 0 0 auto; font-size: 12px; color: var(--pp-text-muted, var(--ppd-muted, #94a3b8)); }
.ppd-fp-menu {
    position: fixed; z-index: 3000; max-height: 320px; display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden; box-shadow: var(--pp-shadow-lg, 0 18px 44px rgba(15,23,42,.28));
    background: var(--pp-surface-raised, var(--pp-surface, #fff));
    border: 1px solid var(--pp-border, var(--ppd-border, #e2e8f0));
    color: var(--pp-text, var(--ppd-text, #0f172a));
}
.ppd-fp-menu[hidden] { display: none; }
.ppd-fp-search-wrap {
    display: flex; align-items: center; gap: 7px; padding: 8px 10px;
    border-bottom: 1px solid var(--pp-border, var(--ppd-border-soft, #eef2f8));
    color: var(--pp-text-muted, var(--ppd-muted, #94a3b8));
}
.ppd-fp-search { flex: 1 1 auto; border: 0; outline: none; background: transparent; font-size: 13px; color: var(--pp-text, var(--ppd-text, #0f172a)); }
.ppd-fp-search::placeholder { color: var(--pp-text-muted, var(--ppd-muted, #94a3b8)); }
.ppd-fp-list { overflow-y: auto; padding: 5px; scrollbar-width: thin; }
.ppd-fp-opt {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
    font-size: 15px; line-height: 1.25; cursor: pointer; white-space: nowrap;
    color: var(--pp-text, var(--ppd-text, #0f172a));
}
.ppd-fp-opt:hover { background: var(--pp-surface-muted, var(--pp-surface-soft, rgba(127,127,127,.14))); }
.ppd-fp-opt.sel { background: var(--pp-primary-soft, rgba(37,99,235,.16)); color: var(--pp-primary, var(--ppd-primary, #2563eb)); }
.ppd-fp-tick { flex: 0 0 16px; font-size: 13px; opacity: 0; color: var(--pp-primary, var(--ppd-primary, #2563eb)); }
.ppd-fp-opt.sel .ppd-fp-tick { opacity: 1; }
.ppd-fp-name { overflow: hidden; text-overflow: ellipsis; }
.ppd-fp-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--pp-text-muted, var(--ppd-muted, #94a3b8)); }
.ppd-fp-empty[hidden] { display: none; }
/* Property tooltip — the small info icon beside a property label (native title). */
.ppd-tip { font-size: 10px; opacity: .45; cursor: help; margin-left: 3px; vertical-align: middle; transition: opacity .12s; }
.ppd-tip:hover { opacity: .9; color: var(--ppd-primary, #2563eb); }
.ppd-field-row > span { display: inline-flex; align-items: center; }
/* Filter Tabs (where-tabs) — canvas preview mirrors the generated list tab strip. */
.ppd-c-where-tabs { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--ppd-border, #e2e8f0); }
.ppd-wt-tab { display: inline-flex; align-items: center; gap: 5px; padding: .4rem .9rem; font-size: 13px; color: var(--ppd-primary, #2563eb); border-bottom: 2px solid transparent; cursor: default; white-space: nowrap; }
.ppd-wt-tab.ppd-wt-active { color: var(--ppd-text, #111827); font-weight: 600; border-bottom-color: var(--ppd-primary, #2563eb); }
.ppd-wt-badge { opacity: .65; font-weight: 400; font-size: .85em; }
.ppd-wt-hint { font-size: 10.5px; color: var(--pp-muted, #94a3b8); font-style: italic; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding-bottom: 4px; }
a.ppd-wt-tab { text-decoration: none; cursor: pointer; }
a.ppd-wt-tab:not(.ppd-wt-active):hover { color: var(--ppd-text, #111827); }
.ppd-c-where-tabs.pp-wt-compact .ppd-wt-tab { padding: .25rem .65rem; font-size: .82rem; }
.ppd-c-where-tabs.pp-wt-large .ppd-wt-tab { padding: .6rem 1.2rem; font-size: 1rem; }

/* selection summary bar */
.ppd-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(180deg,#eff6ff,#e4eefe); border: 1px solid var(--ppd-primary-border); }
.ppd-selbar > i { color: var(--ppd-primary); font-size: 16px; }
.ppd-selbar-count { color:var(--pp-info-text,#1e3a8a); font-size: 13px; font-weight: 800; margin-right: 4px; }
.ppd-selbar .ppd-btn { height: 30px; }
.ppd-selbar-clear { height: 30px; border: 0; background: transparent; color: var(--ppd-muted); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ppd-selbar-hint { font-size: 10.5px; color: #5b7c93; font-style: italic; margin-left: auto; }

/* columns show/hide menu */
.ppd-tb-menu-cols { min-width: 200px; max-height: 280px; overflow: auto; right: 0; left: auto; }
.ppd-tb-col { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color:var(--pp-text,#334155); white-space: nowrap; cursor: pointer; }
.ppd-tb-col:hover { background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-tb-col input { accent-color: var(--ppd-primary); width: 14px; height: 14px; }

/* conditional formatting badge on the grid */
.ppd-cond-note { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color:var(--pp-warning-text,#92400e); background: #fff7ed; border: 1px solid #fed7aa; }

/* conditional rules editor (inspector) */
.ppd-rules { padding: 6px 12px; }
.ppd-rule { border: 1px solid var(--ppd-border); border-radius: 8px; padding: 7px; margin-bottom: 7px; background: #fcfdff; }
.ppd-rule-head { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; color:var(--pp-text,#475569); margin-bottom: 5px; }
.ppd-rule-del { width: 21px; height: 21px; border:1px solid var(--pp-danger-border,#fecaca); border-radius: 6px; background:var(--pp-surface,#fff); color: var(--ppd-danger); cursor: pointer; }
.ppd-rule-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.ppd-rule-line > span:first-child { width: 50px; font-size: 10px; font-weight: 800; color:var(--pp-muted,#94a3b8); text-transform: uppercase; }
.ppd-rule-line select, .ppd-rule-line input { height: 26px; border: 1px solid var(--ppd-border); border-radius: 6px; padding: 0 6px; font-size: 12px; background:var(--pp-surface,#fff); flex: 1; min-width: 56px; }
.ppd-rule-color { display: inline-flex; gap: 4px; align-items: center; flex: 1; }
.ppd-rule-color input[type="color"] { width: 26px; height: 26px; padding: 1px; flex: 0 0 26px; border-radius: 6px; }
.ppd-rule-add { width: 100%; height: 30px; border: 1px dashed var(--ppd-primary-border); border-radius: 8px; background: var(--ppd-primary-soft); color: var(--ppd-primary); font-weight: 800; font-size: 12px; cursor: pointer; }
.ppd-rule-add:hover { background: #e0edff; }
/* Enhanced conditional-formatting: multi-condition rows + add/remove */
.ppd-cond-line { padding-left: 4px; }
.ppd-cond-join { width: 34px !important; text-transform: lowercase !important; font-style: italic; color: var(--pp-muted, #94a3b8); }
.ppd-cond-del { flex: 0 0 22px !important; min-width: 22px !important; width: 22px; height: 26px; border: 1px solid var(--ppd-border); border-radius: 6px; background: var(--pp-surface, #fff); color: var(--ppd-danger); cursor: pointer; padding: 0; }
.ppd-cond-add { margin: 0 0 7px; padding: 3px 9px; border: 1px dashed var(--ppd-border); border-radius: 6px; background: transparent; color: var(--ppd-primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.ppd-cond-add:hover { background: var(--ppd-primary-soft); }
/* In-place "Guide & examples" for conditional formatting */
.ppd-cf-guide-btn { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px; padding: 3px 10px; border: 1px solid var(--ppd-primary-border); border-radius: 999px; background: var(--ppd-primary-soft); color: var(--ppd-primary); font-size: 11px; font-weight: 800; cursor: pointer; }
.ppd-cf-guide-btn:hover { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 16%, transparent); }
.ppd-cf-guide-btn.is-on { background: var(--ppd-primary, #2563eb); color: #fff; border-color: var(--ppd-primary, #2563eb); }
.ppd-cf-guide { margin: 0 0 9px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--ppd-primary-border); background: color-mix(in srgb, var(--ppd-primary, #2563eb) 5%, var(--pp-surface, #fff)); font-size: 11.5px; color: var(--pp-text, #334155); }
.ppd-cf-guide-lead { margin: 0 0 7px; color: var(--pp-muted, #64748b); }
.ppd-cf-guide-table { width: 100%; border-collapse: collapse; margin: 0 0 7px; }
.ppd-cf-guide-table th, .ppd-cf-guide-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--ppd-primary, #2563eb) 12%, var(--ppd-border)); vertical-align: top; }
.ppd-cf-guide-table th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--pp-muted, #94a3b8); }
.ppd-cf-guide-table td:first-child { width: 44%; font-weight: 700; }
.ppd-cf-guide-note { margin: 0; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--ppd-primary, #2563eb) 20%, var(--ppd-border)); color: var(--pp-muted, #64748b); }
.ppd-cf-guide code { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 12%, transparent); color: var(--ppd-primary); padding: .05em .35em; border-radius: 4px; font-size: .92em; }

/* ---------------- per-field validation rules ---------------- */
.ppd-vrs { padding: 6px 12px; display: flex; flex-direction: column; gap: 7px; }
.ppd-vr { border: 1px solid var(--ppd-border); border-radius: 9px; padding: 8px; background: var(--ppd-soft); }
.ppd-vr-head { display: flex; align-items: center; gap: 6px; }
.ppd-vr-head select { flex: 1; height: 30px; border: 1px solid var(--ppd-border); border-radius: 7px; padding: 0 8px; font-size: 12px; font-weight: 700; background: var(--ppd-surface); color: var(--ppd-text); }
.ppd-vr-del { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ppd-primary-border); border-radius: 7px; background: var(--ppd-surface); color: var(--ppd-danger); cursor: pointer; }
.ppd-vr-del:hover { background: var(--ppd-danger); color:var(--pp-primary-text,#fff); border-color: var(--ppd-danger); }
.ppd-vr-params { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 7px; }
.ppd-vr-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 96px; min-width: 0; }
.ppd-vr-field > span { font-size: 10px; font-weight: 800; color: var(--ppd-muted); text-transform: uppercase; letter-spacing: .02em; }
.ppd-vr-field input, .ppd-vr-field select { height: 28px; border: 1px solid var(--ppd-border); border-radius: 6px; padding: 0 7px; font-size: 12px; background: var(--ppd-surface); color: var(--ppd-text); width: 100%; }
.ppd-vr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ppd-text); align-self: center; padding: 4px 2px; }
.ppd-vr-msg { width: 100%; height: 28px; margin-top: 7px; border: 1px dashed var(--ppd-border); border-radius: 6px; padding: 0 8px; font-size: 12px; background: var(--ppd-surface); color: var(--ppd-text); }
.ppd-vr-msg::placeholder { color: var(--ppd-muted); font-style: italic; }
.ppd-vr-add { width: 100%; height: 30px; border: 1px dashed var(--ppd-primary-border); border-radius: 8px; background: var(--ppd-primary-soft); color: var(--ppd-primary); font-weight: 800; font-size: 12px; cursor: pointer; }
.ppd-vr-add:hover { filter: brightness(.97); }

/* ---- Validation rule cards (Field Controls modal → Validation tab) ---- */
/* The stack lives inside .ppd-fcm-body (a 2-col grid for control settings) — span
   both columns so validation cards use the full detail width. */
.ppd-fcx-settings .ppd-vrs { grid-column: 1 / -1; padding: 4px 2px 2px; gap: 12px; }
.ppd-fcx-settings .ppd-vr { padding: 13px 14px 14px; border-radius: 12px; background: var(--ppd-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ppd-vr-head { justify-content: space-between; }
.ppd-vr-desc { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ppd-muted); }
/* Options sub-section */
.ppd-vr-opts { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--ppd-border-soft, var(--ppd-border)); }
.ppd-vr-opts-h { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ppd-muted); margin-bottom: 7px; }
.ppd-vr-opts .ppd-vr-params { margin-top: 0; }
.ppd-vr-hint { font-size: 10.5px; line-height: 1.3; color: var(--ppd-muted); margin-top: 1px; }
/* Custom-message block */
.ppd-vr-msglbl { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ppd-muted); }
.ppd-vr-msglbl span { font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 10px; color: var(--ppd-muted); background: var(--ppd-soft); border: 1px solid var(--ppd-border-soft, var(--ppd-border)); border-radius: 999px; padding: 1px 7px; }
.ppd-fcx-settings .ppd-vr-msg { margin-top: 6px; height: 32px; }
.ppd-vr-msghint { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--ppd-muted); font-style: italic; }
/* Regex helper */
.ppd-vr-rx { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.ppd-vr-rx-intro { font-size: 11.5px; line-height: 1.5; color: var(--ppd-text); background: var(--ppd-primary-soft); border: 1px solid var(--ppd-primary-border); border-radius: 9px; padding: 8px 10px; }
.ppd-vr-rx-intro i { color: var(--ppd-primary); margin-right: 3px; }
.ppd-vr-rx code, .ppd-vr-rx-cheat code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--ppd-soft); border: 1px solid var(--ppd-border-soft, var(--ppd-border)); border-radius: 4px; padding: 0 4px; color: var(--ppd-primary); }
.ppd-vr-rx-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ppd-vr-rx-exlabel, .ppd-vr-rx-testlbl { flex: 0 0 auto; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ppd-muted); }
.ppd-vr-chip { border: 1px solid var(--ppd-border); background: var(--ppd-surface); color: var(--ppd-text); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.ppd-vr-chip:hover { background: var(--ppd-primary-soft); border-color: var(--ppd-primary-border); color: var(--ppd-primary); }
.ppd-vr-rx-test { display: flex; align-items: center; gap: 8px; }
.ppd-vr-rx-testin { flex: 1 1 auto; min-width: 0; height: 30px; border: 1px solid var(--ppd-border); border-radius: 7px; padding: 0 9px; font-size: 12px; background: var(--ppd-surface); color: var(--ppd-text); }
.ppd-vr-rx-result { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--ppd-muted); display: inline-flex; align-items: center; gap: 4px; min-width: 96px; }
.ppd-vr-rx-result.is-ok { color: var(--ppd-success, #16a34a); }
.ppd-vr-rx-result.is-no, .ppd-vr-rx-result.is-err { color: var(--ppd-danger, #dc2626); }
.ppd-vr-rx-cheat { font-size: 11px; line-height: 1.7; color: var(--ppd-muted); }
.ppd-vr-rx-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--ppd-primary-border); border-radius: 7px; background: var(--ppd-primary-soft); color: var(--ppd-primary); font-size: 11px; font-weight: 800; cursor: pointer; }
.ppd-vr-rx-open:hover { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 16%, transparent); }
/* Regular-expression "Live tester" modal — opened FROM the Field Controls
   modal (.ppd-fcm-backdrop, z-index 10060), so it must stack above it. */
.ppd-modal.ppd-rxtest { z-index: 10080; }
.ppd-rxtest-box { width: min(680px, 96vw); }
.ppd-rxtest-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ppd-rxtest-patrow { display: flex; gap: 10px; }
.ppd-rxtest-pat { flex: 1 1 auto; }
.ppd-rxtest-flags { flex: 0 0 90px; }
.ppd-rxtest-pat span, .ppd-rxtest-flags span, .ppd-rxtest-lbl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ppd-muted); margin-bottom: 4px; }
.ppd-rxtest-pat input, .ppd-rxtest-flags input { width: 100%; height: 34px; border: 1px solid var(--ppd-border); border-radius: 8px; padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--ppd-surface); color: var(--ppd-text); box-sizing: border-box; }
.ppd-rxtest-status { font-size: 12px; font-weight: 700; color: var(--ppd-muted); display: flex; align-items: center; gap: 5px; min-height: 18px; }
.ppd-rxtest-status.is-ok { color: var(--ppd-success, #16a34a); }
.ppd-rxtest-status.is-err { color: var(--ppd-danger, #dc2626); }
.ppd-rxtest-status code { font-family: ui-monospace, Menlo, monospace; background: var(--ppd-soft); border-radius: 4px; padding: 0 4px; }
.ppd-rxtest-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ppd-rxtest-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ppd-muted); }
.ppd-rxtest-grid { display: flex; gap: 0; border: 1px solid var(--ppd-border); border-radius: 8px; overflow: hidden; }
.ppd-rxtest-grid textarea { flex: 1 1 auto; min-height: 132px; resize: vertical; border: 0; padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 22px; background: var(--ppd-surface); color: var(--ppd-text); outline: none; }
.ppd-rxtest-results { flex: 0 0 34px; padding: 8px 0; background: var(--ppd-soft); border-left: 1px solid var(--ppd-border); overflow: hidden; }
.ppd-rxtest-r { height: 22px; line-height: 22px; text-align: center; font-size: 13px; }
.ppd-rxtest-r.is-ok { color: var(--ppd-success, #16a34a); }
.ppd-rxtest-r.is-no { color: var(--ppd-danger, #dc2626); }
.ppd-rxtest-summary { font-size: 12px; font-weight: 700; min-height: 16px; }
.ppd-rxtest-summary .all { color: var(--ppd-success, #16a34a); }
.ppd-rxtest-summary .some { color: var(--ppd-warning, #d97706); }
.ppd-rxtest-summary .none { color: var(--ppd-danger, #dc2626); }
.ppd-rxtest-groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.ppd-rxtest-glabel { font-weight: 700; color: var(--ppd-muted); }
.ppd-rxtest-g { background: var(--ppd-soft); border: 1px solid var(--ppd-border); border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, Menlo, monospace; }
.ppd-rxtest-g b { color: var(--ppd-primary); margin-right: 3px; }
/* "Live tester" button on the In-list / Length / Compare rules */
.ppd-vr-test-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 5px 11px; border: 1px solid var(--ppd-primary-border); border-radius: 7px; background: var(--ppd-primary-soft); color: var(--ppd-primary); font-size: 11px; font-weight: 800; cursor: pointer; }
.ppd-vr-test-btn:hover { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 16%, transparent); }
/* Tester extras: In-list chips, Length result width, Compare two-value row */
.ppd-rxtest-ci { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ppd-text); }
.ppd-rxtest-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 4px; }
.ppd-rxtest-listchip { background: var(--ppd-primary-soft); border: 1px solid var(--ppd-primary-border); color: var(--ppd-primary); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; }
.ppd-rxtest-hint { color: var(--ppd-muted); font-size: 11px; font-style: italic; }
.ppd-rxtest-results.ppd-rxtest-len { flex: 0 0 62px; }
.ppd-rxtest-len .ppd-rxtest-r { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 9px; }
.ppd-rxtest-len .ppd-rxtest-r b { font-variant-numeric: tabular-nums; color: var(--ppd-muted); font-weight: 700; }
.ppd-rxtest-cmp { display: flex; gap: 10px; }
.ppd-rxtest-cmp .ppd-rxtest-pat { flex: 1 1 0; }
.ppd-rxtest-cmp code { font-family: ui-monospace, Menlo, monospace; }
/* Conditional gate ("Only validate when …") */
.ppd-vr-when { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--ppd-border-soft, var(--ppd-border)); }
.ppd-vr-when-h { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ppd-muted); margin-bottom: 7px; }
.ppd-vr-when-h i { color: var(--ppd-primary); }
.ppd-vr-when-row { display: flex; gap: 6px; align-items: center; }
/* Scoped above the generic .ppd-fcm-body input/select {width:100%} so the three
   controls share one row instead of each taking the full width. */
.ppd-fcm-body .ppd-vr-when-f, .ppd-fcm-body .ppd-vr-when-v { flex: 1 1 0; width: auto; min-width: 0; }
.ppd-fcm-body .ppd-vr-when-op { flex: 0 1 auto; width: auto; min-width: 0; }
.ppd-vr-when-v[hidden] { display: none; }
.ppd-vr-when-hint { margin-top: 5px; font-size: 11px; color: var(--ppd-muted); font-style: italic; }

/* ---------------- card gallery (cards page template) ---------------- */
/* ── Card Gallery (card-grid) — DESIGN-TIME EXTRAS ONLY.
   The card's actual look lives in the ONE shared stylesheet
   public/assets/css/pp-cards.css (inlined into the canvas by index.php and into
   every generated app by BuildWriter::sharedCardCss) — edit visuals there so the
   Designer and output can't drift. The rules below are canvas-only chrome:
   ghost cards, the image/value placeholders, and the preview action buttons.
   All are .ppd-canvas-scoped so they out-specify the shared bare selectors. ── */
.ppd-canvas .pp-card.is-ghost { opacity: .5; pointer-events: none; }
.ppd-canvas .pp-card-media.pp-card-media-ph { background: repeating-linear-gradient(45deg, var(--pp-muted-bg, #f1f5f9), var(--pp-muted-bg, #f1f5f9) 10px, color-mix(in srgb, var(--pp-muted-bg, #eef2f7) 70%, #dbe2ec) 10px, color-mix(in srgb, var(--pp-muted-bg, #eef2f7) 70%, #dbe2ec) 20px); }
.ppd-canvas .pp-card-row dd.pp-card-ph { color: var(--pp-text-muted, #94a3b8); font-style: italic; }
/* The foot action buttons (.ppd-rcard-act) are styled by the shared
   .pp-card-foot button rule in pp-cards.css — same look as the generated app. */

/* ============================================================
   Searchable icon picker (FontAwesome Pro / Bootstrap / Material)
   ============================================================ */
/* compact inspector icon control — single row: preview · input · browse (opens the modal) */
.ppd-iconpick { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ppd-iconpick-prev { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--ppd-border); border-radius: 7px; background:var(--pp-surface,#fff); color: var(--ppd-primary); font-size: 15px; }
.ppd-iconpick-input { flex: 1 1 auto; min-width: 0; }
.ppd-iconpick-browse { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--ppd-border); border-radius: 7px; background:var(--pp-surface,#fff); color:var(--pp-text,#475569); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ppd-iconpick-browse:hover { color: var(--ppd-primary); border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); }

/* ============================================================
   Icon browser modal
   ============================================================ */
.ppd-icm-backdrop { position: fixed; inset: 0; z-index: 4000; background:var(--pp-scrim,rgba(15, 23, 42, .55)); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ppd-icm-backdrop[hidden] { display: none; }
.ppd-icm { width: min(880px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--ppd-surface); border-radius: 16px; box-shadow:var(--pp-shadow-lg,0 24px 70px rgba(2, 6, 23, .5)); overflow: hidden; animation: ppd-icm-in .14s ease-out; }
@keyframes ppd-icm-in { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.ppd-icm-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--ppd-border); }
.ppd-icm-head strong { font-size: 15px; color:var(--pp-text,#0f172a); } .ppd-icm-head small { display: block; font-size: 11.5px; color: var(--ppd-muted); margin-top: 2px; }
.ppd-icm-close { width: 34px; height: 34px; border: 1px solid var(--ppd-border); border-radius: 9px; background:var(--pp-surface,#fff); color:var(--pp-text,#475569); cursor: pointer; font-size: 15px; }
.ppd-icm-close:hover { color: var(--ppd-danger); border-color:var(--pp-danger-border,#fecaca); background:var(--pp-danger-soft,#fef2f2); }
.ppd-icm-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--ppd-border-soft); flex-wrap: wrap; }
.ppd-icm-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px; border: 1px solid var(--ppd-border); border-radius: 10px; background:var(--pp-surface-soft,#fbfdff); color: var(--ppd-muted); }
.ppd-icm-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color:var(--pp-text,#0f172a); }
.ppd-icm-packs { display: inline-flex; gap: 4px; background:var(--pp-surface-soft,#eef2f8); border: 1px solid var(--ppd-border-soft); border-radius: 10px; padding: 3px; }
.ppd-icm-packs button { border: 0; background: transparent; color: var(--ppd-muted); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.ppd-icm-packs button.is-active { background:var(--pp-surface,#fff); color: var(--ppd-primary); box-shadow: var(--ppd-shadow-sm); }
.ppd-icm-body { flex: 1; overflow: auto; padding: 10px 18px 18px; }
.ppd-icm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ppd-icm-sec { grid-column: 1 / -1; position: sticky; top: 0; background: var(--ppd-surface); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ppd-muted); padding: 12px 2px 7px; z-index: 1; }
.ppd-icm-sec:first-child { padding-top: 2px; }
.ppd-icm-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 9px; border: 1px solid var(--ppd-border); border-radius: 11px; background:var(--pp-surface,#fff); cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.ppd-icm-ic:hover { border-color: var(--ppd-primary-border); background: var(--ppd-primary-soft); transform: translateY(-1px); }
.ppd-icm-ic.is-active { border-color: var(--ppd-primary); box-shadow: 0 0 0 2px var(--ppd-primary-soft); }
.ppd-icm-ic-glyph { font-size: 24px; color:var(--pp-text,#334155); line-height: 1; height: 26px; display: flex; align-items: center; }
.ppd-icm-ic:hover .ppd-icm-ic-glyph { color: var(--ppd-primary); }
.ppd-icm-ic-lbl { font-size: 10px; color: var(--ppd-muted); max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.ppd-icm-empty { text-align: center; color: var(--ppd-muted); font-size: 14px; padding: 60px 0; }
.ppd-icm-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-top: 1px solid var(--ppd-border); font-size: 12px; color: var(--ppd-muted); }
.ppd-icm-esc { opacity: .7; }

/* ============================================================
   Catalogue components — generic placeholder + real renders
   ============================================================ */
.ppd-c-generic { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--ppd-border); border-radius: 11px; background:linear-gradient(180deg, var(--pp-surface,#fff), var(--pp-surface-soft,#f8fbff)); }
.ppd-c-generic-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--ppd-primary-soft); color: var(--ppd-primary); border: 1px solid var(--ppd-primary-border); font-size: 17px; }
.ppd-c-generic-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ppd-c-generic-meta strong { font-size: 13px; color:var(--pp-text,#1e293b); }
.ppd-c-generic-meta small { font-size: 11.5px; color: var(--ppd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppd-c-generic-badge { font-size: 10px; font-weight: 800; color: var(--ppd-muted); background:var(--pp-surface-soft,#eef2f8); border: 1px solid var(--ppd-border-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* layout drop-zones */
.ppd-children-zone.ppd-lay-2 { grid-template-columns: 1fr 1fr; }
.ppd-children-zone.ppd-lay-kpi { grid-template-columns: repeat(4, 1fr); }
.ppd-children-zone.ppd-lay-analytics { grid-template-columns: 2fr 1fr; }
@media (max-width: 720px) { .ppd-children-zone.ppd-lay-2, .ppd-children-zone.ppd-lay-kpi, .ppd-children-zone.ppd-lay-analytics { grid-template-columns: 1fr; } }

/* structure: accordion / modal / offcanvas */
.ppd-accordion, .ppd-modal, .ppd-offcanvas { border: 1px solid var(--ppd-border); border-radius: 11px; overflow: hidden; background:var(--pp-surface,#fff); }
.ppd-accordion-h, .ppd-modal-h, .ppd-offcanvas-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px; font-weight: 650; font-size: 13px; background:linear-gradient(180deg, var(--pp-surface-soft,#fbfdff), var(--pp-surface-soft,#f4f8fd)); border-bottom: 1px solid var(--ppd-border-soft); }
.ppd-modal-h, .ppd-offcanvas-h { justify-content: space-between; }
.ppd-modal { box-shadow: var(--ppd-shadow-sm); }
.ppd-modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--ppd-border-soft); background:var(--pp-surface-soft,#fbfdff); }
.ppd-offcanvas { max-width: 340px; }
/* Offcanvas component — design-time preview (runtime uses Bootstrap .offcanvas) */
.ppd-oc { display: inline-flex; flex-direction: column; gap: 9px; border: 1px dashed var(--ppd-border); border-radius: 12px; padding: 11px; background: var(--pp-surface-soft, #f8fbff); }
.ppd-oc-preview-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ppd-muted); display: inline-flex; align-items: center; gap: 5px; }
.ppd-oc-panel { border: 1px solid var(--ppd-border); border-radius: 10px; background: var(--pp-surface, #fff); overflow: hidden; min-width: 260px; box-shadow: var(--ppd-shadow-sm); }
.ppd-oc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; font-weight: 650; font-size: 13px; border-bottom: 1px solid var(--ppd-border-soft); background: linear-gradient(180deg, var(--pp-surface-soft, #fbfdff), var(--pp-surface-soft, #f4f8fd)); }
.ppd-oc-body { padding: 12px; display: grid; gap: 10px; min-height: 44px; }

/* feedback widgets */
.ppd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ppd-primary-border); background: var(--ppd-primary-soft); color: var(--ppd-primary); }
.ppd-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ppd-badge.tone-ok { color: var(--pp-success-text, #047857); background:var(--pp-success-soft,#ecfdf5); border-color:var(--pp-success-border,#a7f3d0); }
.ppd-badge.tone-warn { color:var(--pp-warning-text,#b45309); background:var(--pp-warning-soft,#fffbeb); border-color:var(--pp-warning-border,#fde68a); }
.ppd-badge.tone-danger { color: var(--ppd-danger); background:var(--pp-danger-soft,#fef2f2); border-color:var(--pp-danger-border,#fecaca); }
.ppd-badge.tone-info { color:var(--pp-primary-hover,#1d4ed8); background:var(--pp-primary-soft,#eff6ff); border-color: var(--pp-primary-border, #bfdbfe); }
.ppd-badge.tone-muted { color:var(--pp-text,#475569); background:var(--pp-surface-soft,#f1f5f9); border-color: var(--ppd-border); }
.ppd-badge.tone-primary { color:var(--ppd-primary); background:var(--ppd-primary-soft); border-color:var(--ppd-primary-border); }
/* variants */
.ppd-badge.bdg-solid { color: var(--pp-primary-text,#fff); border-color: transparent; }
.ppd-badge.bdg-solid.tone-ok { background: var(--pp-success,#16a34a); } .ppd-badge.bdg-solid.tone-warn { background: var(--pp-warning,#f59e0b); }
.ppd-badge.bdg-solid.tone-danger { background: var(--pp-danger,#ef4444); } .ppd-badge.bdg-solid.tone-info,.ppd-badge.bdg-solid.tone-primary { background: var(--ppd-primary,#6366f1); }
.ppd-badge.bdg-solid.tone-muted { background: var(--ppd-muted,#64748b); }
.ppd-badge.bdg-outline { background: transparent; }
/* sizes */
.ppd-badge.bdg-sm { font-size: 10.5px; padding: 2px 8px; gap: 5px; } .ppd-badge.bdg-lg { font-size: 13.5px; padding: 5px 13px; }
.ppd-badge.bdg-square { border-radius: 6px; }
.ppd-badge > i { font-size: 1em; }
/* pulsing dot (live indicators) */
.ppd-badge .dot.pulse { position: relative; }
.ppd-badge .dot.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pp-badge-pulse 1.5s ease-out infinite; }
@keyframes pp-badge-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
.ppd-toast { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--ppd-border); background:var(--pp-surface,#fff); box-shadow: var(--ppd-shadow-sm); max-width: 380px; }
.ppd-toast strong { display: block; font-size: 13px; } .ppd-toast small { color: var(--ppd-muted); font-size: 12px; }
.ppd-toast > div { flex: 1; } .ppd-toast.tone-ok { border-left:3px solid var(--pp-success,#10b981); } .ppd-toast.tone-warn { border-left:3px solid var(--pp-warning,#f59e0b); } .ppd-toast.tone-danger { border-left:3px solid var(--pp-danger,#ef4444); } .ppd-toast.tone-info { border-left:3px solid var(--pp-info,#3b82f6); }
.ppd-toast { --toast-ic: currentColor; }
.ppd-toast.tone-ok { --toast-ic: var(--pp-success,#10b981); } .ppd-toast.tone-warn { --toast-ic: var(--pp-warning,#f59e0b); } .ppd-toast.tone-danger { --toast-ic: var(--pp-danger,#ef4444); } .ppd-toast.tone-info { --toast-ic: var(--pp-info,#3b82f6); }
.ppd-toast > i:first-child { color: var(--box-icon, var(--toast-ic)); }
.ppd-toast strong { color: var(--box-title, inherit); }
.ppd-toast-close { margin-left: 6px; align-self: flex-start; cursor: pointer; background: none; border: none; color: var(--ppd-muted); font-size: 16px; line-height: 1; padding: 0 2px; }
.ppd-toast-close:hover { color: var(--pp-text,#334155); }
/* live popup host (generated app) */
.ppd-toastc { position: fixed; z-index: 3000; max-width: min(92vw, 400px); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.ppd-toastc.show { opacity: 1; pointer-events: auto; }
.ppd-toastc.pos-tr { top: 18px; right: 18px; transform: translateY(-10px); } .ppd-toastc.pos-tl { top: 18px; left: 18px; transform: translateY(-10px); }
.ppd-toastc.pos-br { bottom: 18px; right: 18px; transform: translateY(10px); } .ppd-toastc.pos-bl { bottom: 18px; left: 18px; transform: translateY(10px); }
.ppd-toastc.pos-tc { top: 18px; left: 50%; transform: translate(-50%,-10px); } .ppd-toastc.pos-bc { bottom: 18px; left: 50%; transform: translate(-50%,10px); }
.ppd-toastc.pos-tr.show, .ppd-toastc.pos-tl.show, .ppd-toastc.pos-br.show, .ppd-toastc.pos-bl.show { transform: none; }
.ppd-toastc.pos-tc.show, .ppd-toastc.pos-bc.show { transform: translateX(-50%); }
.ppd-progress-wrap { width: 100%; } .ppd-progress-lbl { display: flex; justify-content: space-between; font-size: 12px; color:var(--pp-text,#475569); margin-bottom: 4px; font-weight: 600; }
.ppd-progress { height: 9px; border-radius: 999px; background:var(--pp-track,#e8eef6); overflow: hidden; }
.ppd-progress-bar { height: 100%; border-radius: 999px; background-color: var(--pp-primary,#4f8bff); }
.ppd-rating { display: inline-flex; align-items: center; gap: 3px; font-size: var(--rate-size, 16px); color:var(--pp-warning,#f59e0b); }
.ppd-rating .is-on { color: var(--rate-color, var(--pp-warning,#f59e0b)); }
.ppd-rating .is-off { color: var(--rate-empty, var(--ppd-border,#e2e8f0)); }
.ppd-rating-lbl { font-size: .78em; color: var(--ppd-muted); margin-right: 6px; }
.ppd-rating-val { font-size: .8em; font-weight: 700; color: var(--pp-text,#334155); margin-left: 6px; }
.ppd-avatar { --av-size: 40px; display: inline-flex; align-items: center; gap: 10px; }
.ppd-avatar.av-sm { --av-size: 30px; } .ppd-avatar.av-lg { --av-size: 56px; } .ppd-avatar.av-xl { --av-size: 76px; }
.ppd-avatar-media { position: relative; display: inline-flex; flex: none; }
.ppd-avatar-img { display: inline-flex; align-items: center; justify-content: center; width: var(--av-size); height: var(--av-size); border-radius: 50%; background: var(--av-bg, var(--ppd-primary-soft)); color: var(--av-color, var(--ppd-primary)); border: 1px solid var(--av-ring, var(--ppd-primary-border)); font-size: calc(var(--av-size) * .4); font-weight: 700; overflow: hidden; box-sizing: border-box; line-height: 1; }
.ppd-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppd-avatar.av-rounded .ppd-avatar-img { border-radius: 24%; }
.ppd-avatar.av-square .ppd-avatar-img { border-radius: 0; }
.ppd-avatar-dot { position: absolute; right: 0; bottom: 0; width: 30%; height: 30%; min-width: 9px; min-height: 9px; border-radius: 50%; border: 2px solid var(--pp-surface,#fff); box-sizing: border-box; }
.ppd-avatar-dot.st-online { background: #22c55e; } .ppd-avatar-dot.st-away { background: #f59e0b; } .ppd-avatar-dot.st-busy { background: #ef4444; } .ppd-avatar-dot.st-offline { background: #94a3b8; }
.ppd-avatar-text strong { display: block; font-size: 13px; color: var(--pp-text,#1e293b); } .ppd-avatar-text small { color: var(--ppd-muted); font-size: 11.5px; }
.ppd-avatar strong { display: block; font-size: 13px; } .ppd-avatar small { color: var(--ppd-muted); font-size: 11.5px; }
.ppd-signature { height: 60px; border: 1.5px dashed var(--ppd-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ppd-muted); font-size: 13px; background:repeating-linear-gradient(45deg, var(--pp-surface-soft,#fafcff), var(--pp-surface-soft,#fafcff) 6px, var(--pp-surface-soft,#f3f7fc) 6px, var(--pp-surface-soft,#f3f7fc) 12px); }
/* --- Signature pad (real draw/type field) --- */
.ppd-sig { position: relative; border: 1.5px dashed var(--sig-border, var(--ppd-border)); border-radius: var(--sig-radius, 8px); background: var(--sig-bg, var(--pp-surface,#fff)); overflow: hidden; }
.ppd-sig.sig-solid { border-style: solid; }
.ppd-sig.sig-none { border: none; }
.ppd-sig-canvas { display: block; width: 100%; height: var(--sig-h, 140px); touch-action: none; cursor: crosshair; }
.ppd-sig-preview { display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--sig-h, 140px); color: var(--ppd-muted); font-size: 13px; font-style: italic; }
.ppd-sig-baseline { position: absolute; left: 14px; right: 14px; bottom: 26px; border-bottom: 1px solid var(--ppd-border); pointer-events: none; }
.ppd-sig-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; }
.ppd-sig-clear { font-size: 11px; font-weight: 600; color: var(--ppd-muted); background: var(--pp-surface,#fff); border: 1px solid var(--ppd-border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.ppd-sig-clear:hover { color: var(--pp-text,#334155); border-color: var(--ppd-primary); }
.ppd-sig-typebox { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--sig-h, 140px); border: none; background: transparent; text-align: center; font-size: 32px; font-family: var(--sig-font, "Segoe Script", "Brush Script MT", cursive); color: var(--sig-pen, #111827); box-sizing: border-box; padding: 0 12px; }
.ppd-sig-typebox::placeholder { color: var(--ppd-muted); opacity: .6; }
.ppd-sig-typebox:focus { outline: none; }
.ppd-sig-req { color: var(--ppd-danger, #ef4444); }
.ppd-sig-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ppd-sig-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ppd-muted); background: var(--pp-surface,#fff); border: 1px solid var(--ppd-border); border-radius: 7px; padding: 5px 9px; cursor: pointer; line-height: 1; }
.ppd-sig-btn:hover:not(:disabled) { color: var(--pp-text,#334155); border-color: var(--ppd-primary); }
.ppd-sig-btn:disabled { opacity: .4; cursor: default; }
.ppd-sig-btn.is-primary { color: var(--pp-primary-text,#fff); background: var(--ppd-primary); border-color: var(--ppd-primary); }
.ppd-sig-btn.is-primary:hover:not(:disabled) { filter: brightness(.95); }
.ppd-sig-msg { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ppd-ok, #16a34a); }
.ppd-sig-msg.is-err { color: var(--ppd-danger, #ef4444); }
.ppd-qr { width: 84px; height: 84px; border: 1px solid var(--ppd-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 52px; color:var(--pp-text,#1e293b); background:var(--pp-surface,#fff); }
/* --- QR Code (real, scannable) --- */
.ppd-qr-box { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; max-width: 100%; }
.ppd-qr-img { display: block; max-width: 100%; height: auto; }
.ppd-qr-cap { font-size: 12px; color: var(--ppd-muted); text-align: center; line-height: 1.4; word-break: break-word; }

/* dashboard widgets */
.ppd-widget { border: 1px solid var(--ppd-border); border-radius: 12px; background:var(--pp-surface,#fff); padding: 13px 15px; box-shadow: var(--ppd-shadow-sm); }
.ppd-widget-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 13px; color:var(--pp-text,#1e293b); }
.ppd-widget-h small { color: var(--ppd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.ppd-widget-hint { color: var(--ppd-muted); font-size: 11.5px; }
/* Progress Card / bar variants — thickness, tone, striped/animated, target marker */
.ppd-progress { position: relative; }
.ppd-progress.pp-prog-sm { height: 5px; }
.ppd-progress.pp-prog-md { height: 9px; }
.ppd-progress.pp-prog-lg { height: 14px; }
.ppd-progress.pp-prog-square, .ppd-progress.pp-prog-square .ppd-progress-bar { border-radius: 0; }
.ppd-progress-bar { transition: width .35s ease; }
.ppd-progress-bar.tone-danger { background-color: var(--pp-danger, #dc2626); }
.ppd-progress-bar.tone-warning { background-color: var(--pp-warning, #f59e0b); }
.ppd-progress-bar.tone-success { background-color: var(--pp-success, #16a34a); }
.ppd-progress-bar.is-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent); background-size: .9rem .9rem; }
.ppd-progress-bar.is-animated { animation: pp-prog-stripes .9s linear infinite; }
@keyframes pp-prog-stripes { from { background-position: .9rem 0; } to { background-position: 0 0; } }
.ppd-progress .ppd-progtgt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pp-text, #0f172a); opacity: .45; z-index: 1; }
/* Progress — circular / ring variant (conic-gradient + a hole) */
.ppd-progress-ring-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.ppd-progress-ring { position: relative; display: inline-grid; place-items: center; width: var(--ring-sz,84px); height: var(--ring-sz,84px); border-radius: 50%; background: conic-gradient(var(--ring-fill, var(--pp-primary,#4f8bff)) calc(var(--ring-p,0)*1%), var(--ring-track, var(--pp-track,#e8eef6)) 0); }
.ppd-progress-ring::before { content: ''; position: absolute; inset: var(--ring-th,9px); border-radius: 50%; background: var(--pp-surface,#fff); }
.ppd-progress-ring-txt { position: relative; font-size: calc(var(--ring-sz,84px) * .22); font-weight: 800; color: var(--pp-text,#0f172a); line-height: 1; }
.ppd-progress-ring-lbl { font-size: 12px; color: var(--ppd-muted); text-align: center; }
.ppd-widget .ppd-dynbadge { font-size: 11px; opacity: .5; }
.ppd-kpi-value { font-size: 26px; font-weight: 800; color:var(--pp-text,#0f172a); letter-spacing: -.02em; }
.ppd-kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.ppd-kpi-delta.tr-up { color:var(--pp-success,#059669); } .ppd-kpi-delta.tr-down { color:var(--pp-danger-text,#dc2626); } .ppd-kpi-delta.tr-flat { color: var(--ppd-muted); }
.ppd-kpi-ic { color: var(--ppd-muted); font-size: 15px; opacity: .75; margin-left: auto; }
.ppd-feed-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--ppd-border-soft); }
.ppd-feed-row:first-of-type { border-top: 0; } .ppd-feed-row .k { font-size: 12.5px; font-weight: 600; color:var(--pp-text,#334155); display: block; } .ppd-feed-row small { color: var(--ppd-muted); font-size: 11px; }
.ppd-feed-row > i, .ppd-feed-row > span:first-child { color: var(--ppd-primary); }
.ppd-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color:var(--pp-text,#334155); } .ppd-task-row input { accent-color: var(--ppd-primary); }
.ppd-task-row.is-done span { text-decoration: line-through; opacity: .55; }
.ppd-task-empty { color: var(--ppd-muted); font-size: 12.5px; padding: 6px 2px; }
.ppd-task-list.is-scroll { max-height: 220px; overflow-y: auto; }
.ppd-quicklinks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ppd-quicklink { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--ppd-border); border-radius: 9px; background:var(--pp-surface-soft,#fbfdff); font-size: 12.5px; color:var(--pp-text,#334155); cursor: pointer; } .ppd-quicklink:hover { border-color: var(--ppd-primary-border); color: var(--ppd-primary); }
.ppd-quicklink > i, .ppd-quicklink > span:first-child { color: var(--ppd-primary); }
/* Quick links may be real anchors (menu / landing page) — keep them looking
   like chips rather than inheriting the global underlined link style. */
a.ppd-quicklink, a.ppd-quicklink:hover { text-decoration: none; }
/* A widget with no heading is just a chip row inside its parent card. */
.ppd-widget.is-bare { border: 0; background: none; padding: 0; box-shadow: none; }
/* ── Welcome hero (Menu / landing page) ──────────────────────────────────────
   Every colour is a theme token or derived from one with color-mix, so the hero
   re-skins with any theme in light and dark. `--pp-on-hero` is derived from the
   primary so the text stays readable whatever brand colour is chosen. */
.pp-hero { --pp-on-hero: var(--pp-primary-text, #fff);
  --pp-hero-veil: color-mix(in srgb, var(--pp-on-hero) 16%, transparent);
  --pp-hero-veil-2: color-mix(in srgb, var(--pp-on-hero) 26%, transparent);
  position: relative; display: flex; align-items: center; gap: 20px;
  overflow: visible; border-radius: var(--pp-radius-lg, 16px); padding: 26px 28px;
  color: var(--pp-on-hero);
  background: linear-gradient(120deg, var(--pp-primary), color-mix(in srgb, var(--pp-primary) 52%, var(--pp-topbar-bg, #0f172a)));
  box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(2,6,23,.12)); }
.pp-hero::after { content: ''; position: absolute; inset: auto -60px -120px auto; width: 320px; height: 320px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--pp-on-hero) 20%, transparent), transparent 68%); }
.pp-hero-in { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.pp-hero-title { margin: 0; font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); font-weight: 800;
  letter-spacing: -.02em; color: inherit; }
.pp-greet-name { opacity: .92; }
.pp-hero-sub { margin: .35rem 0 0; font-size: .95rem; line-height: 1.5; opacity: .88; max-width: 62ch; color: inherit; }
.pp-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp-hero-date { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px;
  font-size: .78rem; font-weight: 600; background: var(--pp-hero-veil); }

/* ── Hero clock ──────────────────────────────────────────────────────────────
   Frosted-glass analog clock. The hands are animated ENTIRELY in CSS: each is a
   360° rotation whose period is its cycle (60s / 1h / 12h) and whose
   animation-delay is set once to minus the elapsed time, which positions it
   exactly. No per-frame JavaScript — the reference version ran
   requestAnimationFrame forever, which repaints even in a background tab.

   EVERY dimension derives from --clk, so the whole clock scales by changing one
   value. It was previously hard-coded at 150px, which is why it could only be
   hidden on small screens rather than shrunk. Colours are theme tokens, never
   prefers-color-scheme. */
.pp-hero-clock { position: relative; z-index: 1; flex: 0 0 auto; color: var(--pp-on-hero); }
/* The hero dial is the standalone Clock component, tinted for the dark hero and
   sized per breakpoint (it sits beside the greeting text, so it must shrink). */
.pp-hero-clock .pp-clock-widget {
  width: auto; --clk: 150px;
  --clk-fg: var(--pp-on-hero);
  --clk-s: var(--pp-danger, #ff453a);
  --clk-face-bg: color-mix(in srgb, var(--pp-on-hero) 15%, transparent);
}
.pp-hero-clock .ppc-face { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: color-mix(in srgb, var(--pp-on-hero) 38%, transparent); }
@media (max-width: 991.98px) { .pp-hero-clock .pp-clock-widget { --clk: 128px; } }
@media (max-width: 767.98px) { .pp-hero-clock .pp-clock-widget { --clk: 108px; } }
@media (max-width: 575.98px) { .pp-hero-clock .pp-clock-widget { --clk: 88px; } .pp-hero-clock .ppc-chip { display: none; } }
@media (max-width: 380px)    { .pp-hero-clock .pp-clock-widget { --clk: 72px; } .pp-hero-clock .ppc-emoji { display: none; } }
/* The Designer device switcher toggles a CLASS, not the viewport — mirror it. */
.ppd-canvas.ppd-device-tablet .pp-hero-clock .pp-clock-widget { --clk: 128px; }
.ppd-canvas.ppd-device-mobile .pp-hero-clock .pp-clock-widget { --clk: 88px; }
.ppd-canvas.ppd-device-mobile .pp-hero-clock .ppc-chip { display: none; }
.pp-clk { --clk: 150px; --sd: 0s; --md: 0s; --hd: 0s;
  width: var(--clk); height: var(--clk); position: relative; }
.pp-clk-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--pp-on-hero) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-on-hero) 38%, transparent);
  box-shadow: 0 14px 34px rgba(2, 6, 23, .22), inset 0 1px 0 color-mix(in srgb, var(--pp-on-hero) 28%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pp-clk-face::before { content: ''; position: absolute; inset: calc(var(--clk) * .067); border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pp-on-hero) 22%, transparent); pointer-events: none; }
/* Ticks pivot about the dial centre: origin = (radius - inset - own height). */
.pp-clk-tick { position: absolute; left: 50%; top: calc(var(--clk) * .033);
  width: 2px; height: calc(var(--clk) * .047); margin-left: -1px; border-radius: 2px;
  transform-origin: 50% calc(var(--clk) * .467); transform: rotate(var(--t));
  background: color-mix(in srgb, var(--pp-on-hero) 45%, transparent); }
.pp-clk-tick.major { height: calc(var(--clk) * .073); width: 2.5px; margin-left: -1.25px;
  background: color-mix(in srgb, var(--pp-on-hero) 80%, transparent); }
.pp-clk-emoji { position: absolute; left: 50%; top: calc(var(--clk) * .173); transform: translateX(-50%);
  font-size: calc(var(--clk) * .113); line-height: 1; z-index: 5;
  animation: pp-clk-float 4s ease-in-out infinite; }
.pp-clk-chip { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  padding: calc(var(--clk) * .013) calc(var(--clk) * .047); border-radius: 6px;
  font-size: calc(var(--clk) * .063); font-weight: 800; letter-spacing: .02em; line-height: 1.35;
  color: var(--pp-on-hero);
  background: color-mix(in srgb, var(--pp-on-hero) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-on-hero) 30%, transparent); }
.pp-clk-day  { left: calc(var(--clk) * .073); }
.pp-clk-date { right: calc(var(--clk) * .073); }
/* hands — lengths as a share of the dial */
.pp-clk-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center;
  border-radius: 4px; z-index: 10; animation: pp-clk-spin linear infinite; }
.pp-clk-hand.h { width: 4.5px; height: calc(var(--clk) * .253); margin-left: -2.25px;
  animation-duration: 43200s; animation-delay: var(--hd); background: var(--pp-on-hero); }
.pp-clk-hand.m { width: 3.5px; height: calc(var(--clk) * .36); margin-left: -1.75px;
  animation-duration: 3600s; animation-delay: var(--md);
  background: color-mix(in srgb, var(--pp-on-hero) 78%, transparent); }
.pp-clk-hand.s { width: 1.8px; height: calc(var(--clk) * .40); margin-left: -.9px;
  animation-duration: 60s; animation-delay: var(--sd); background: var(--pp-danger, #ff453a); z-index: 11; }
.pp-clk-pin { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; z-index: 12; background: var(--pp-danger, #ff453a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-on-hero) 55%, transparent); }
@keyframes pp-clk-spin { to { transform: rotate(360deg); } }
@keyframes pp-clk-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }

/* Small screens: shrink, do not hide. The dial stays legible because every
   dimension scales with --clk; below ~112px the day/date chips would crowd the
   hands, so they step aside and the emoji carries the context instead. */
@media (max-width: 991.98px) { .pp-clk { --clk: 128px; } }
@media (max-width: 767.98px) { .pp-clk { --clk: 108px; } }
@media (max-width: 575.98px) {
  .pp-clk { --clk: 92px; }
  .pp-clk-chip { display: none; }
  .pp-clk-face::before { inset: calc(var(--clk) * .09); }
}
@media (max-width: 359.98px) { .pp-clk { --clk: 76px; } .pp-clk-emoji { display: none; } }
/* The Designer's device switcher changes a CLASS on the canvas, not the
   viewport, so the media queries above never fire for it. Mirror them here or
   the tablet/mobile previews would keep showing the desktop-sized clock. */
/* Desktop preview must reassert the full size: otherwise a narrow EDITOR
   window makes the viewport media query shrink a canvas that is meant to be
   previewing a desktop. The canvas device selection is the authority here. */
.ppd-canvas.ppd-device-desktop .pp-clk { --clk: 150px; }
.ppd-canvas.ppd-device-desktop .pp-clk-chip { display: inline-block; }
.ppd-canvas.ppd-device-tablet .pp-clk { --clk: 128px; }
.ppd-canvas.ppd-device-tablet .pp-clk-chip { display: inline-block; }
.ppd-canvas.ppd-device-mobile .pp-clk { --clk: 92px; }
.ppd-canvas.ppd-device-mobile .pp-clk-chip { display: none; }
.ppd-canvas.ppd-device-tablet .pp-hero-art { width: 170px; }
.ppd-canvas.ppd-device-mobile .pp-hero-art { width: 104px; }

@media (prefers-reduced-motion: reduce) { .pp-clk-emoji { animation: none; } }

/* ── Clock widget (standalone component) ─────────────────────────────────────
   A self-contained, fully-customisable analog clock — the hero dial extracted
   into its own droppable component. Unlike .pp-clk it does NOT depend on the
   hero's --pp-on-hero context; it works on any background. Every dimension is a
   share of the dial via container-query units (cqmin), so it scales perfectly
   fluidly at any --clk size, and width:min(--clk,82vw) keeps it responsive on
   narrow screens with no media queries. Colours are per-instance CSS vars. */
.pp-clock-widget { --clk: 220px; --clk-fg: var(--pp-text, #0f172a); --clk-face: var(--pp-surface, #fff);
  --clk-h: var(--clk-fg); --clk-m: color-mix(in srgb, var(--clk-fg) 72%, transparent); --clk-s: var(--pp-primary, #4f46e5);
  --clk-tick: color-mix(in srgb, var(--clk-fg) 78%, transparent); --clk-img: 48cqmin; --clk-center: 48cqmin;
  display: flex; width: 100%; }
.pp-clock-widget.ppc-al-left { justify-content: flex-start; }
.pp-clock-widget.ppc-al-center { justify-content: center; }
.pp-clock-widget.ppc-al-right { justify-content: flex-end; }
/* Float on top: lift out of the normal push-down flow and sit over the
   component(s) above (overlap upward), nudged horizontally, stacked on top. */
.pp-clock-widget.is-overlay { position: relative; z-index: 30; margin-top: calc(-1 * var(--clk-overlap, 0px)); }
.pp-clock-widget.is-overlay .ppc-clk { transform: translateX(var(--clk-ox, 0px)); }
/* On phones the float offsets are fixed pixels tuned for a wide desktop layout,
   so they shove the (near-full-width) clock off-screen. Below the mobile break
   the overlay reflows into normal, centred flow — visible and well-placed. */
@media (max-width: 767.98px) {
  .pp-clock-widget.is-overlay { margin-top: 0; }
  .pp-clock-widget.is-overlay .ppc-clk { transform: none; }
}
/* The Designer's device switcher changes a CLASS, not the viewport, so mirror
   the reflow for the tablet/mobile canvas previews. */
.ppd-canvas.ppd-device-mobile .pp-clock-widget.is-overlay,
.ppd-canvas.ppd-device-tablet .pp-clock-widget.is-overlay { margin-top: 0; }
.ppd-canvas.ppd-device-mobile .pp-clock-widget.is-overlay .ppc-clk,
.ppd-canvas.ppd-device-tablet .pp-clock-widget.is-overlay .ppc-clk { transform: none; }
/* Per-hand visibility. */
.pp-clock-widget.no-h .ppc-hand.h { display: none; }
.pp-clock-widget.no-m .ppc-hand.m { display: none; }
.pp-clock-widget.no-s .ppc-hand.s { display: none; }
.pp-clock-widget.no-s .ppc-pin { background: var(--clk-h); }
.ppc-clk { --sd: 0s; --md: 0s; --hd: 0s; width: min(var(--clk), 82vw); max-width: 100%; aspect-ratio: 1 / 1;
  position: relative; flex: 0 0 auto; container-type: size; color: var(--clk-fg); }
.ppc-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--clk-face-bg, color-mix(in srgb, var(--clk-fg) 4%, var(--clk-face)));
  border: 1px solid color-mix(in srgb, var(--clk-fg) 18%, transparent);
  box-shadow: 0 14px 34px rgba(2, 6, 23, .14), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
.ppc-face::before { content: ''; position: absolute; inset: 6.7cqmin; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--clk-fg) 16%, transparent); pointer-events: none; }
.ppc-img { position: absolute; left: 50%; top: 50%; width: var(--clk-img, 48cqmin); height: var(--clk-img, 48cqmin);
  transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; z-index: 3;
  border: 1px solid color-mix(in srgb, var(--clk-fg) 18%, transparent); box-shadow: 0 2px 12px rgba(2, 6, 23, .20); }
/* Centre content: an image OR text medallion, both sized by one slider (--clk-center). */
.ppc-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.ppc-center-img { width: var(--clk-center, 48cqmin); height: var(--clk-center, 48cqmin); border-radius: 50%; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--clk-fg) 18%, transparent); box-shadow: 0 2px 12px rgba(2, 6, 23, .20); }
.ppc-center-img.no-bd { border-color: transparent; box-shadow: none; }
.ppc-center-text { font-size: var(--clk-center, 48cqmin); font-weight: 800; line-height: 1; color: var(--clk-text, var(--clk-fg));
  max-width: 74cqmin; text-align: center; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(2, 6, 23, .18); }
.ppc-tick { position: absolute; left: 50%; top: 3.3cqmin; width: 1.4cqmin; height: 4.7cqmin; margin-left: -.7cqmin;
  border-radius: 2px; transform-origin: 50% 46.7cqmin; transform: rotate(var(--t));
  background: color-mix(in srgb, var(--clk-tick) 58%, transparent); }
.ppc-tick.major { height: 7.3cqmin; width: 2cqmin; margin-left: -1cqmin; background: var(--clk-tick); }
.ppc-emoji { position: absolute; left: 50%; top: 17cqmin; transform: translateX(-50%); font-size: 11cqmin; line-height: 1;
  z-index: 5; animation: pp-clk-float 4s ease-in-out infinite; }
.ppc-chip { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  padding: 1.2cqmin 4.4cqmin; border-radius: 6px; font-size: 6.2cqmin; font-weight: 800; letter-spacing: .02em; line-height: 1.3;
  color: var(--clk-fg); background: color-mix(in srgb, var(--clk-fg) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--clk-fg) 18%, transparent); }
.ppc-day { left: 6.5cqmin; } .ppc-date { right: 6.5cqmin; }
.ppc-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center; border-radius: 4px; z-index: 10;
  animation: pp-clk-spin linear infinite; }
.ppc-hand.h { width: 2cqmin; height: 25cqmin; margin-left: -1cqmin; animation-duration: 43200s; animation-delay: var(--hd); background: var(--clk-h); }
.ppc-hand.m { width: 1.6cqmin; height: 35cqmin; margin-left: -.8cqmin; animation-duration: 3600s; animation-delay: var(--md); background: var(--clk-m); }
.ppc-hand.s { width: .9cqmin; height: 40cqmin; margin-left: -.45cqmin; animation-duration: 60s; animation-delay: var(--sd); background: var(--clk-s); z-index: 11; }
.ppc-pin { position: absolute; left: 50%; top: 50%; width: 4cqmin; height: 4cqmin; margin: -2cqmin 0 0 -2cqmin;
  border-radius: 50%; z-index: 12; background: var(--clk-s); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clk-fg) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .ppc-emoji { animation: none; } }
.ppc-emoji img { width: 14cqmin; height: 14cqmin; object-fit: contain; vertical-align: middle; border-radius: 4px; }
.ppc-emoji .bi { font-size: 11cqmin; line-height: 1; }
/* Transparent mode: the dial has no card — just ticks, hands and image, so the
   clock can sit over any background / be positioned freely by the designer. */
.ppc-clk.is-transparent .ppc-face { background: none; border-color: transparent; box-shadow: none; }
.ppc-clk.is-transparent .ppc-face::before { display: none; }

/* Range slider control in the inspector. */
.ppd-rangein { display: flex; align-items: center; gap: 9px; }
.ppd-rangein input[type=range] { flex: 1; min-width: 0; accent-color: var(--ppd-con-accent, #6366f1); }
.ppd-rangein .ppd-range-val { font-size: 11px; font-weight: 700; min-width: 40px; text-align: right; color: var(--ppd-con-text, #0f172a); font-variant-numeric: tabular-nums; }

/* ── Hero illustration ───────────────────────────────────────────────────────
   Inline SVG, animated with CSS. Colours come from currentColor (the hero's
   own foreground), so it re-skins with any theme automatically. */
.pp-hero-art { position: relative; z-index: 1; flex: 0 0 auto; width: 210px; color: var(--pp-on-hero); }
.pp-hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-orb { fill: currentColor; opacity: .13; animation: pa-breathe 6s ease-in-out infinite; transform-origin: 120px 80px; }
.pa-card rect:first-child { fill: currentColor; opacity: .95; }
.pa-card .pa-line { fill: var(--pp-primary); opacity: .55; }
.pa-card .pa-line.dim { opacity: .28; }
.pa-card { animation: pa-drift 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pa-c1 { animation-delay: 0s; }
.pa-c2 { animation-delay: .55s; opacity: .9; }
.pa-c3 { animation-delay: 1.1s; opacity: .78; }
.pa-dot { fill: currentColor; opacity: .5; animation: pa-float 5s ease-in-out infinite; }
.pa-dot.d2 { animation-delay: .9s; opacity: .35; }
.pa-dot.d3 { animation-delay: 1.8s; opacity: .6; }
@keyframes pa-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pa-breathe { 0%,100% { transform: scale(1); opacity: .13; } 50% { transform: scale(1.07); opacity: .2; } }
@keyframes pa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 991.98px) { .pp-hero-art { width: 170px; } }
@media (max-width: 767.98px) { .pp-hero-art { width: 130px; } }
@media (max-width: 575.98px) { .pp-hero-art { width: 104px; } }
@media (max-width: 359.98px) { .pp-hero-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .pa-card, .pa-orb, .pa-dot { animation: none !important; } }

/* The text column must be allowed to shrink so the visual keeps its place
   instead of being pushed out of the band on a narrow screen. */
.pp-hero-in { min-width: 0; }
@media (max-width: 575.98px) {
  .pp-hero { padding: 18px 16px; gap: 12px; }
  .pp-hero-sub { font-size: .86rem; }
  .pp-hero-meta { margin-top: 10px; }
  .pp-hero-date { font-size: .72rem; padding: 4px 9px; }
  .pp-ava { width: 48px; height: 48px; }
  .pp-ava-face { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-hero-art { transition: none !important; }
}

/* ── Menu Card ───────────────────────────────────────────────────────────────
   Landing-page "module" card: styleable header / description / footer. With
   both off the whole card is `.is-clickable` (an <a>) linking to the table. */
.pp-mc { display: flex; flex-direction: column; border-radius: var(--pp-radius-lg, 14px); overflow: hidden;
  background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, color-mix(in srgb, var(--pp-text, #0f172a) 8%, transparent));
  box-shadow: var(--pp-shadow-sm, 0 4px 16px rgba(2, 6, 23, .06)); text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; height: 100%; }
/* Header-only mode = a stand-alone button: collapse to the header (no empty
   body), lose the card chrome, and lift on hover. The header's own background
   becomes the whole button. */
.pp-mc.is-clickable { cursor: pointer; height: auto; align-self: start; border: none; background: transparent;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .16); }
.pp-mc.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2, 6, 23, .24); filter: saturate(1.05); }
.pp-mc.is-clickable:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(2, 6, 23, .18); }
/* Size presets — control per-zone density AND the grid track width (--pp-mc-min),
   so sm packs many cards per row, lg fewer. */
.pp-mc-sm { --pp-mc-min: 158px; }
.pp-mc-md { --pp-mc-min: 216px; }
.pp-mc-lg { --pp-mc-min: 300px; }
.pp-mc-sm .pp-mc-head { padding: 8px 13px; font-size: 13.5px; gap: 7px; }
.pp-mc-md .pp-mc-head { padding: 13px 16px; font-size: 16px; }
.pp-mc-lg .pp-mc-head { padding: 18px 22px; font-size: 19px; }
.pp-mc-sm .pp-mc-desc { padding: 9px 13px; font-size: 12.5px; }
.pp-mc-lg .pp-mc-desc { padding: 17px 22px; font-size: 15px; }
.pp-mc-sm .pp-mc-foot { padding: 7px 13px; }
.pp-mc-lg .pp-mc-foot { padding: 14px 22px; }
.pp-mc-sm .pp-mc-btn { padding: 4px 9px; font-size: 12px; }
.pp-mc-lg .pp-mc-btn { padding: 8px 14px; font-size: 14px; }
/* In the menu grid, a full card stretches to the row height for a tidy row, but
   a header-only button hugs its content. Cover both the direct grid child and a
   span/style-wrapped one (.pp-grid-item), in the built app and the canvas. */
.pp-menu-page .ppd-lay-kpi > .pp-mc.is-clickable,
.pp-menu-page .ppd-lay-kpi > .pp-grid-item:has(> .pp-mc.is-clickable) { align-self: start; }
.ppd-children-zone.ppd-lay-kpi .ppd-node:has(> .pp-mc.is-clickable) { align-self: start; }
.pp-mc-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 700; font-size: 16px;
  background: var(--pp-primary, #4f46e5); color: var(--pp-primary-text, #fff); }
.pp-mc-head .pp-mc-ic { display: inline-flex; font-size: 1.12em; line-height: 1; }
.pp-mc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-mc-desc { padding: 13px 16px; color: var(--pp-text, #0f172a); font-size: 14px; line-height: 1.5; flex: 1 1 auto; }
.pp-mc-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-top: 1px solid color-mix(in srgb, var(--pp-text, #0f172a) 8%, transparent); }
.pp-mc-flabel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pp-muted, #64748b); }
.pp-mc-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.pp-mc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pp-radius, 8px);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, var(--pp-primary, #4f46e5) 12%, transparent); color: var(--pp-primary, #4f46e5); }
.pp-mc-btn:hover { background: color-mix(in srgb, var(--pp-primary, #4f46e5) 22%, transparent); }

/* ── Menu Group ──────────────────────────────────────────────────────────────
   A bordered container built on a native <fieldset>/<legend> so the heading
   overlaps and interrupts the border (the classic, always-correct cut — no need
   to match the page background). Holds Menu Cards in a responsive grid. */
.pp-mg { position: relative; min-inline-size: 0; margin: 10px 0 6px; padding: 18px 20px 24px;
  border: 1px solid var(--pp-border, color-mix(in srgb, var(--pp-text, #0f172a) 12%, transparent));
  border-radius: var(--pp-radius-lg, 16px); background: transparent; }
.pp-mg-legend { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; margin-inline-start: 6px;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; color: var(--pp-text, #0f172a); }
.pp-mg-legend .pp-mg-ic { display: inline-flex; font-size: 1.08em; line-height: 1; color: var(--pp-primary, #4f46e5); }
/* The body is a 12-column grid (.pp-zone12 in the build, .ppd-form12 on the
   canvas) so each child follows its own Size & Layout span — a card at 3/12
   gives 4 per row. Empty state keeps a little height for the drop hint. */
.pp-mg-body:empty { min-height: 46px; }
/* Equal-height cards: stretch every card in a row to the tallest one (default
   is top-aligned so cards keep their natural heights). Header-only buttons keep
   their own align-self:start, so they stay compact even here. */
.pp-mg-body.pp-mg-eq { align-items: stretch; }

/* Variant: centred legend. */
.pp-mg-center > .pp-mg-legend { margin-inline: auto; }

/* Variant: chip — the heading is a filled gradient pill floating on the border. */
.pp-mg-chip > .pp-mg-legend { padding: 6px 16px; border-radius: 999px; color: var(--pp-primary-text, #fff);
  background: linear-gradient(135deg, var(--pp-primary, #4f46e5), color-mix(in srgb, var(--pp-primary, #4f46e5) 62%, #000));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-primary, #4f46e5) 34%, transparent); }
.pp-mg-chip > .pp-mg-legend .pp-mg-ic { color: inherit; }

/* Variant: accent — a bold left rail in the brand colour. */
.pp-mg-accent { border-left: 4px solid var(--pp-primary, #4f46e5); }
.pp-mg-accent > .pp-mg-legend { color: var(--pp-primary, #4f46e5); }

/* Variant: soft — the heading sits in a tinted rounded band. */
.pp-mg-soft > .pp-mg-legend { padding: 5px 14px; border-radius: 10px; color: var(--pp-primary, #4f46e5);
  background: color-mix(in srgb, var(--pp-primary, #4f46e5) 12%, var(--pp-surface, #fff)); }

/* ── Menu page: KPI tiles ────────────────────────────────────────────────────
   The accent hue is rotated per tile from the theme primary, so the row has
   colour and rhythm while still being 100% theme-driven — change the brand
   colour and the whole palette moves with it. */
.pp-menu-page .ppd-stat { --pp-accent-i: var(--pp-primary);
  position: relative; overflow: hidden; padding: 16px 16px 14px;
  border: 1px solid var(--pp-border, #e2e8f0); border-radius: var(--pp-radius-lg, 14px);
  background: var(--pp-surface, #ffffff);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.pp-menu-page .ppd-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--pp-accent-i); }
.pp-menu-page .ppd-stat::after { content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--pp-accent-i) 16%, transparent), transparent 70%); }
.pp-menu-page .ppd-stat:hover { border-color: var(--pp-accent-i); box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(2,6,23,.12)); transform: translateY(-2px); }
.pp-menu-page .ppd-stat .v { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--pp-text, #0f172a); }
.pp-menu-page .ppd-stat .l { display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: .8rem; font-weight: 600; color: var(--pp-muted); }
.pp-menu-page .ppd-stat .l i { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 6px; font-size: .8rem; color: var(--pp-accent-i);
  background: color-mix(in srgb, var(--pp-accent-i) 14%, var(--pp-surface, #ffffff)); }

/* ── Menu page: module cards ─────────────────────────────────────────────── */
.pp-menu-page .ppd-c-section.card { --pp-accent-i: var(--pp-primary);
  border-radius: var(--pp-radius-lg, 14px); overflow: hidden; }
.pp-menu-page .ppd-c-section.card > .h { gap: 9px; font-weight: 750;
  background: color-mix(in srgb, var(--pp-accent-i) 9%, var(--pp-surface, #ffffff));
  border-bottom: 1px solid color-mix(in srgb, var(--pp-accent-i) 22%, var(--pp-border, #e2e8f0)); }
.pp-menu-page .ppd-c-section.card > .h i { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 8px; font-size: .88rem; color: var(--pp-on-shell, #fff); background: var(--pp-accent-i); }
.pp-menu-page .ppd-c-section.card .ppd-quicklink { border-color: color-mix(in srgb, var(--pp-accent-i) 28%, var(--pp-border, #e2e8f0)); }
.pp-menu-page .ppd-c-section.card .ppd-quicklink:hover { border-color: var(--pp-accent-i);
  background: color-mix(in srgb, var(--pp-accent-i) 10%, var(--pp-surface, #ffffff)); }

/* Hue rotation. Derived from the theme primary, never a literal palette. */
.pp-menu-page .ppd-lay-kpi > *:nth-child(6n+2) { --pp-accent-i: color-mix(in srgb, var(--pp-primary) 72%, var(--pp-info, #0ea5e9)); }
.pp-menu-page .ppd-lay-kpi > *:nth-child(6n+3) { --pp-accent-i: color-mix(in srgb, var(--pp-primary) 55%, var(--pp-success, #16a34a)); }
.pp-menu-page .ppd-lay-kpi > *:nth-child(6n+4) { --pp-accent-i: color-mix(in srgb, var(--pp-primary) 60%, var(--pp-warning, #d97706)); }
.pp-menu-page .ppd-lay-kpi > *:nth-child(6n+5) { --pp-accent-i: color-mix(in srgb, var(--pp-primary) 68%, var(--pp-danger, #dc2626)); }
.pp-menu-page .ppd-lay-kpi > *:nth-child(6n+6) { --pp-accent-i: color-mix(in srgb, var(--pp-primary) 50%, var(--pp-info, #0ea5e9)); }
/* The stat markup nests one level deeper than the card markup. */
.pp-menu-page .ppd-lay-kpi > * > .ppd-stat { --pp-accent-i: inherit; }

@media (prefers-reduced-motion: reduce) {
  .pp-menu-page .ppd-stat { transition: none; }
}

/* The dark-canvas normaliser (`…​.ppd-canvas … { background: var(--ppd-soft) }`)
   outranks the menu card tint on the Designer surface only. Restate it at the
   same weight so the canvas matches the built page. */
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas.pp-menu-page .ppd-c-section.card > .h {
  background: color-mix(in srgb, var(--pp-accent-i) 12%, var(--pp-surface-raised, #172033));
}

/* Card gains the same header / content / footer zones as the Group Container. */
.ppd-c-section.card > .h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppd-c-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--pp-border, #e2e8f0);
  background: var(--pp-surface-soft, #f8fafc); font-size: .82rem; color: var(--pp-muted, #64748b); }
.ppd-c-section.card > .h .ppd-c-zone, .ppd-c-foot .ppd-c-zone {
  display: flex; flex: 1 1 auto; gap: 8px; min-height: 0; margin-left: auto; }
.ppd-c-section.card > .h .ppd-c-zone:empty, .ppd-c-foot .ppd-c-zone:empty { min-height: 26px; max-width: 170px; }

/* ── Group container (group-box) ─────────────────────────────────────────────
   A real container: header / content / footer zones, and a CONTENT zone that is
   a 12-column grid so each child's own Size & Layout span applies. */
.ppd-gb { border-color: var(--pp-border, #e2e8f0); background: var(--pp-surface, #fff);
  display: flex; flex-direction: column; position: relative; }
.ppd-gb-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; font-weight: 750; font-size: .92rem; color: var(--pp-text, #0f172a);
  border-bottom: 1px solid var(--pp-border, #e2e8f0); }
.ppd-gb.has-accent > .ppd-gb-h { background: color-mix(in srgb, var(--pp-primary) 8%, var(--pp-surface, #fff));
  border-bottom-color: color-mix(in srgb, var(--pp-primary) 22%, var(--pp-border, #e2e8f0)); }
.ppd-gb-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
  font-size: .88rem; color: var(--pp-primary-text, #fff); background: var(--pp-primary); }
.ppd-gb-t { flex: 0 0 auto; }
.ppd-gb-b { flex: 1 1 auto; }
.ppd-gb-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--pp-border, #e2e8f0);
  background: var(--pp-surface-soft, #f8fafc); font-size: .82rem; color: var(--pp-muted, #64748b); }

/* Header modes. `legend` lifts the title onto the border line, fieldset-style. */
.ppd-gb.hm-plain > .ppd-gb-h { background: none; border-bottom: 0; padding-bottom: 4px; }
.ppd-gb.hm-legend { overflow: visible; margin-top: 10px; }
.ppd-gb.hm-legend > .ppd-gb-h { position: absolute; top: 0; left: 14px; transform: translateY(-50%);
  padding: 2px 10px; border: 0; border-radius: 20px; background: var(--pp-surface, #fff);
  box-shadow: 0 0 0 1px var(--pp-border, #e2e8f0); font-size: .8rem; }
.ppd-gb.hm-legend.has-accent > .ppd-gb-h { background: color-mix(in srgb, var(--pp-primary) 12%, var(--pp-surface, #fff)); }
.ppd-gb.hm-legend > .ppd-gb-b { padding-top: 6px; }

/* Padding scale — applied to the body and footer together. */
.ppd-gb.pad-none   > .ppd-gb-b, .ppd-gb.pad-none   > .ppd-gb-f { padding: 0; }
.ppd-gb.pad-tight  > .ppd-gb-b, .ppd-gb.pad-tight  > .ppd-gb-f { padding: 8px; }
.ppd-gb.pad-normal > .ppd-gb-b, .ppd-gb.pad-normal > .ppd-gb-f { padding: 14px; }
.ppd-gb.pad-roomy  > .ppd-gb-b, .ppd-gb.pad-roomy  > .ppd-gb-f { padding: 22px; }

/* Header/footer zones sit inline beside the title, so they stay compact. */
.ppd-gb-h .ppd-gb-zone, .ppd-gb-f .ppd-gb-zone { display: flex; flex: 1 1 auto; gap: 8px; min-height: 0; margin-left: auto; }
.ppd-gb-h .ppd-gb-zone:empty, .ppd-gb-f .ppd-gb-zone:empty { min-height: 26px; max-width: 180px; }

/* ── 12-column zone for the GENERATED app ────────────────────────────────────
   The canvas gets this from .ppd-form12; the built page needs its own rule
   because the build wraps each child in .pp-grid-item carrying --sp/--spt/--spm.
   Without this the spans were set but had no grid to span within, so every
   child took the full width. */
.pp-zone12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: var(--pp-form-gap, 14px); }
.pp-zone12.gap-tight  { gap: 8px; }
.pp-zone12.gap-normal { gap: 14px; }
.pp-zone12.gap-roomy  { gap: 22px; }
.pp-zone12 > * { grid-column: span 12; min-width: 0; }
/* .pp-fld = a generated-form field dropped inside a sub-grid (Field Group):
   its own Size & Layout span must beat the generic span-12 default above. */
.pp-zone12 > .pp-grid-item, .pp-zone12 > .pp-fld { grid-column: span var(--sp, 12); }
@media (max-width: 991.98px) { .pp-zone12 > .pp-grid-item, .pp-zone12 > .pp-fld { grid-column: span var(--spt, var(--sp, 12)); } }
@media (max-width: 575.98px)  { .pp-zone12 > .pp-grid-item, .pp-zone12 > .pp-fld { grid-column: span var(--spm, 12); } }

/* Field Group (canvas only): show the sub-grid bounds while designing so
   stacking/nesting is visible; invisible chrome in the built app. */
.ppd-node.ppd-type-field-group > .ppd-children-zone.ppd-fieldgroup {
  border: 1px dashed color-mix(in srgb, var(--ppd-primary, #4f46e5) 30%, transparent);
  border-radius: 10px; padding: 8px; min-height: 54px; }

/* ── Cell Grid (layout-grid) ─────────────────────────────────────────────────
   Generated app: clean CSS grid; merged cells span via inline grid-row/column.
   Cells stack on phones (block flow drops the spans safely). */
.pp-lgrid { display: grid; gap: var(--pp-form-gap, 14px); }
.pp-lgrid.gap-tight  { gap: 8px; }
.pp-lgrid.gap-normal { gap: 14px; }
.pp-lgrid.gap-roomy  { gap: 22px; }
.pp-lgcell { display: flex; flex-direction: column; min-width: 0; border-radius: 8px; }
.pp-lgcell > .pp-zone12 { flex: 1 1 auto; align-content: start; }
/* ── "Cards in a row" alignment (rowAlign) ──────────────────────────────────
   Cells in a CSS-grid row are equal height by default, but the CARD inside a
   cell floats at its natural height, so a short card next to a tall one looks
   ragged. These variants control how row-mates line up:
     • lg-ai-stretch (DEFAULT): equal height — the card fills the whole cell so
       two cards in a row are exactly as tall as the taller one.
     • lg-ai-top / center / bottom: cells hug their content and align to that
       edge (cards keep their natural height). --- */
.pp-lgrid.lg-ai-top,    .ppd-lgrid.lg-ai-top    { align-items: start;  }
.pp-lgrid.lg-ai-center, .ppd-lgrid.lg-ai-center { align-items: center; }
.pp-lgrid.lg-ai-bottom, .ppd-lgrid.lg-ai-bottom { align-items: end;    }
.pp-lgrid.lg-ai-stretch, .ppd-lgrid.lg-ai-stretch { align-items: stretch; }
/* Equal-height mode: make the card FILL its (already row-stretched) cell so the
   visible card — not just the invisible cell — matches its row-mate's height.
   We do this by STRETCHING through the grid/flex chain, NOT with height:100% at
   the top — a top-level percentage height zeroes the grid row's intrinsic size
   and the card overflows into the next row. Each level stays intrinsically
   sized, then stretches to fill. Build zone = .pp-zone12; canvas = .ppd-children-zone. */
.pp-lgrid.lg-ai-stretch > .pp-lgcell > .pp-zone12,
.ppd-lgrid.lg-ai-stretch > .ppd-lgcell > .ppd-children-zone { align-items: stretch; align-content: stretch; }
/* ── Per-cell VERTICAL align (Top / Middle / Bottom) ────────────────────────
   The cell is a flex column whose zone fills its height (flex:1 1 auto), so a
   justify-content on the cell has no free space to move — vertical align must
   drive the ZONE's align-content instead. The child selectors carry an extra
   `.pp-lgrid >` / `.ppd-lgrid >` so they tie the equal-height stretch rule above
   on specificity and win by source order (else Equal-height would pin content
   to the top). Only visible when the cell is taller than its content — e.g. an
   Equal-height row where a short cell (a clock) sits beside a tall one. */
.pp-lgrid > .pp-lgcell.lg-v-top    > .pp-zone12, .ppd-lgrid > .ppd-lgcell.lg-v-top    > .ppd-children-zone { align-content: start;  }
.pp-lgrid > .pp-lgcell.lg-v-middle > .pp-zone12, .ppd-lgrid > .ppd-lgcell.lg-v-middle > .ppd-children-zone { align-content: center; }
.pp-lgrid > .pp-lgcell.lg-v-bottom > .pp-zone12, .ppd-lgrid > .ppd-lgcell.lg-v-bottom > .ppd-children-zone { align-content: end;    }
/* Span wrapper (a component placed with a per-device width) → flex so its single
   child fills the stretched track. */
.pp-lgrid.lg-ai-stretch .pp-grid-item, .ppd-lgrid.lg-ai-stretch .pp-grid-item { display: flex; flex-direction: column; }
.pp-lgrid.lg-ai-stretch .pp-grid-item > *, .ppd-lgrid.lg-ai-stretch .pp-grid-item > * { flex: 1 1 auto; }
/* KPI stat cards: the wrapper grid stretches its card, the card's link (a block
   <a>) becomes flex so the card fills it, and the card centres its content so a
   grown card reads as intentional rather than top-loaded with empty space. */
.pp-lgrid.lg-ai-stretch .ppd-stat-cards, .ppd-lgrid.lg-ai-stretch .ppd-stat-cards { align-content: stretch; }
.pp-lgrid.lg-ai-stretch .ppd-stat-link, .ppd-lgrid.lg-ai-stretch .ppd-stat-link { display: flex; flex-direction: column; }
.pp-lgrid.lg-ai-stretch .ppd-stat-link > .ppd-stat, .ppd-lgrid.lg-ai-stretch .ppd-stat-link > .ppd-stat { flex: 1 1 auto; }
.pp-lgrid.lg-ai-stretch .ppd-stat, .ppd-lgrid.lg-ai-stretch .ppd-stat { display: flex; flex-direction: column; justify-content: center; }
/* Other common card roots fill their stretched cell the same way. */
.pp-lgrid.lg-ai-stretch .ppd-c-section, .ppd-lgrid.lg-ai-stretch .ppd-c-section,
.pp-lgrid.lg-ai-stretch .ppd-menu-card, .ppd-lgrid.lg-ai-stretch .ppd-menu-card,
.pp-lgrid.lg-ai-stretch .pp-menu-card,  .ppd-lgrid.lg-ai-stretch .pp-menu-card { align-self: stretch; }
/* ── Per-cell HORIZONTAL alignment of the component inside (cell.align) ───────
   The component is a grid item in the cell's 12-col zone. Default (Full width /
   unset) = the item stretches to fill the cell. Left/Center/Right size the item
   to its natural width and place it on that side via the zone's justify-items.
   Build zone = .pp-zone12; Designer-canvas zone = .ppd-children-zone. */
.pp-lgcell.lg-h-left   > .pp-zone12, .ppd-lgcell.lg-h-left   > .ppd-children-zone { justify-items: start;  }
.pp-lgcell.lg-h-center > .pp-zone12, .ppd-lgcell.lg-h-center > .ppd-children-zone { justify-items: center; }
.pp-lgcell.lg-h-right  > .pp-zone12, .ppd-lgcell.lg-h-right  > .ppd-children-zone { justify-items: end;    }
/* justify-items only moves items that are NARROWER than their 12-col track.
   Most components (clock, hero, cards, media) render at width:100% and so never
   shrink — the alignment then has no visible effect. Pin the cell's direct
   children to their natural width (capped at the cell) so Left/Center/Right
   actually reposition them. Build child = .pp-zone12 > * ; Designer-canvas child
   = the .ppd-node wrapper around the component. */
.pp-lgcell.lg-h-left   > .pp-zone12 > *, .pp-lgcell.lg-h-center > .pp-zone12 > *, .pp-lgcell.lg-h-right > .pp-zone12 > *,
.ppd-lgcell.lg-h-left  > .ppd-children-zone > .ppd-node,
.ppd-lgcell.lg-h-center > .ppd-children-zone > .ppd-node,
.ppd-lgcell.lg-h-right > .ppd-children-zone > .ppd-node { width: max-content; max-width: 100%; grid-column: 1 / -1; }
/* A stat-card's inner auto-fit grid wants to fill; cap it so Left/Center/Right
   actually shrink it to a sensible card width instead of spanning the cell. */
.pp-lgcell.lg-h-left   .ppd-stat-cards, .ppd-lgcell.lg-h-left   .ppd-stat-cards,
.pp-lgcell.lg-h-center .ppd-stat-cards, .ppd-lgcell.lg-h-center .ppd-stat-cards,
.pp-lgcell.lg-h-right  .ppd-stat-cards, .ppd-lgcell.lg-h-right  .ppd-stat-cards { grid-template-columns: minmax(180px, max-content); }
/* ── Responsive cell widths — ALWAYS ON, no toggle ──────────────────────────
   The cell's per-device width is authoritative and never overridden by the
   component inside it (the component fills its cell via the 12-col .pp-zone12;
   the cell's share of the ROW is set here). Model:
     • Desktop (≥1024px): the explicit inline grid stands — grid-template-columns
       from colWidths + each cell's grid-row/column (exact designer layout).
     • Tablet / Mobile: the grid becomes a real 12-column grid that auto-flows +
       wraps like a Bootstrap row, and every cell spans its per-device width in
       12ths — --w-t (tablet) / --w-m (mobile). Unset tablet falls back to the
       desktop width (keeps the grid); unset mobile falls back to 12 (stacks).
   So two cells set to 6/12 on mobile sit side by side with NO extra setting.
   Applies to the generated app (.pp-lgrid) AND the Designer canvas (.ppd-lgrid). */
@media (max-width: 767.98px) {
  .pp-lgrid, .ppd-lgrid { grid-template-columns: repeat(12, 1fr) !important; grid-auto-flow: row dense; }
  .pp-lgrid > .pp-lgcell, .ppd-lgrid > .ppd-lgcell {
    grid-column: span var(--w-m, 12) !important; grid-row: auto !important; height: auto !important; }
  .pp-lgcell.lg-hide-m, .ppd-lgcell.lg-hide-m { display: none !important; }
  .pp-lgcell.lg-full-m, .ppd-lgcell.lg-full-m { grid-column: span 12 !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pp-lgrid, .ppd-lgrid { grid-template-columns: repeat(12, 1fr) !important; grid-auto-flow: row dense; }
  .pp-lgrid > .pp-lgcell, .ppd-lgrid > .ppd-lgcell {
    grid-column: span var(--w-t, var(--w-d, 12)) !important; grid-row: auto !important; height: auto !important; }
  .pp-lgcell.lg-hide-t, .ppd-lgcell.lg-hide-t { display: none !important; }
  .pp-lgcell.lg-full-t, .ppd-lgcell.lg-full-t { grid-column: span 12 !important; }
}
@media (min-width: 1024px) { .pp-lgcell.lg-hide-d, .ppd-lgcell.lg-hide-d { display: none !important; } }
/* Canvas device preview: the Designer fakes device widths with a class (it does
   not resize the viewport), so @media never fires on the canvas. Mirror the
   tablet/mobile reflow here so the Designer's phone/tablet buttons match the
   built page exactly. */
.ppd-canvas.ppd-device-tablet .ppd-lgrid { grid-template-columns: repeat(12, 1fr) !important; grid-auto-flow: row dense; }
.ppd-canvas.ppd-device-tablet .ppd-lgrid > .ppd-lgcell {
  grid-column: span var(--w-t, var(--w-d, 12)) !important; grid-row: auto !important; height: auto !important; }
.ppd-canvas.ppd-device-tablet .ppd-lgcell.lg-hide-t { display: none !important; }
.ppd-canvas.ppd-device-tablet .ppd-lgcell.lg-full-t { grid-column: span 12 !important; }
.ppd-canvas.ppd-device-mobile .ppd-lgrid { grid-template-columns: repeat(12, 1fr) !important; grid-auto-flow: row dense; }
.ppd-canvas.ppd-device-mobile .ppd-lgrid > .ppd-lgcell {
  grid-column: span var(--w-m, 12) !important; grid-row: auto !important; height: auto !important; }
.ppd-canvas.ppd-device-mobile .ppd-lgcell.lg-hide-m { display: none !important; }
.ppd-canvas.ppd-device-mobile .ppd-lgcell.lg-full-m { grid-column: span 12 !important; }
/* Canvas: a corner "pick" tag makes a cell selectable even when a component
   fills it (fades in on hover / when selected). Canvas-only — never built. */
.ppd-lgcell-pick { position: absolute; top: 3px; left: 3px; z-index: 20; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--ppd-primary,#4f46e5) 12%, var(--pp-surface,#fff)); color: var(--ppd-primary,#4f46e5); border: 1px solid var(--ppd-primary-border,#c7d2fe); cursor: pointer; opacity: 0; transition: opacity .12s; user-select: none; }
.ppd-lgcell:hover > .ppd-lgcell-pick, .ppd-lgcell.ppd-part-selected > .ppd-lgcell-pick { opacity: 1; }
.ppd-lgcell-pick:hover { background: var(--ppd-primary,#4f46e5); color: #fff; }
.ppd-span-fixed { font-size: 11.5px; font-weight: 700; color: var(--ppd-muted); }
/* Preview modal: render Cell Grid cells clean (no canvas selection chrome) —
   the user's own cell padding/border/min-height (inline) still win. */
.ppd-preview-content .ppd-lgcell { border: 0; padding: 0; min-height: 0; cursor: default; }
.ppd-preview-content .ppd-lgcell:hover { border-color: transparent; }
.ppd-preview-content .ppd-colgrip, .ppd-preview-content .ppd-lgcell-zone > .ppd-zone-hint { display: none; }

/* Canvas: every cell is visibly selectable (dashed like a table designer),
   highlighted when selected via the standard part-selection mechanism. */
/* No gap-* class = "Match form": inherit the parent form's Spacing so that
   setting still governs field rhythm once a Cell Grid holds the fields. */
.ppd-lgrid { display: grid; position: relative; gap: var(--pp-form-gap, 14px); }
/* drag-to-resize column grips (present while the grid or a cell is selected) */
.ppd-colgrip { position: absolute; top: 0; bottom: 0; width: 9px; z-index: 55; cursor: col-resize; }
.ppd-colgrip::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--ppd-primary, #4f46e5) 22%, transparent); }
.ppd-colgrip:hover::after { background: var(--ppd-primary, #4f46e5); }
body.ppd-col-resizing { cursor: col-resize; user-select: none; }
body.ppd-col-resizing .ppd-colgrip::after { background: var(--ppd-primary, #4f46e5); }
.ppd-lgrid.gap-tight  { gap: 8px; }
.ppd-lgrid.gap-normal { gap: 14px; }
.ppd-lgrid.gap-roomy  { gap: 22px; }
.ppd-lgcell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 4px; min-height: 64px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--ppd-primary, #4f46e5) 26%, transparent); border-radius: 8px; }
.ppd-lgcell:hover { border-color: color-mix(in srgb, var(--ppd-primary, #4f46e5) 55%, transparent); }
.ppd-lgcell.ppd-part-selected { outline: 2px solid var(--ppd-primary, #4f46e5); outline-offset: -2px;
  background: color-mix(in srgb, var(--ppd-primary, #4f46e5) 5%, transparent); }
/* ⌘/Ctrl-click multi-selection members (anchor keeps the solid outline) */
.ppd-lgcell.ppd-part-multi { outline: 2px dashed var(--ppd-primary, #4f46e5); outline-offset: -2px;
  background: color-mix(in srgb, var(--ppd-primary, #4f46e5) 9%, transparent); }
.ppd-lgcell > .ppd-children-zone { flex: 1 1 auto; }
/* floating quick-op toolbar on the selected cell (designer chrome, not themed) */
.ppd-cellbar { position: absolute; top: -13px; right: 6px; z-index: 60; display: inline-flex; align-items: center; gap: 2px;
  background: var(--ppd-con-surface, #ffffff); border: 1px solid var(--ppd-con-border, #dfe3ec); border-radius: 999px;
  padding: 2px 5px; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); cursor: default; }
.ppd-cellbar button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  color: var(--ppd-con-text, #334155); font: inherit; font-size: 12px; line-height: 1; padding: 4px 5px;
  border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ppd-cellbar button:hover { background: var(--ppd-con-soft, #eef2ff); color: var(--ppd-con-primary, #4f46e5); }
.ppd-cellbar button.danger:hover { background: rgba(220, 38, 38, .1); color: #dc2626; }
.ppd-cellbar button.is-merge { background: var(--ppd-con-primary, #4f46e5); color: #fff; font-weight: 700; padding: 4px 10px; }
.ppd-cellbar button.is-merge:hover { filter: brightness(1.08); }
.ppd-cellbar .sep { width: 1px; height: 14px; background: var(--ppd-con-border, #e2e8f0); margin: 0 2px; }
/* Cell-op button rows in the inspector */
.ppd-cellops { display: flex; flex-wrap: wrap; gap: 6px; }
.ppd-cellops .ppd-btn { font-size: 11.5px; padding: 4px 8px; }
.ppd-cellops-inline { align-items: center; }
.ppd-gridsize { font-style: normal; font-weight: 700; margin-right: 4px; color: var(--ppd-muted, #64748b); }

/* Landing page rhythm: the default Menu tree is a stack of blocks. */
.pp-menu-page > * + * { margin-top: 14px; }
.pp-menu-page > h1.ppd-c-heading + .ppd-c-text { margin-top: 4px; }
.pp-menu-page .ppd-c-section.card { height: 100%; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.pp-menu-page .ppd-c-section.card:hover { border-color: var(--pp-primary); box-shadow: var(--pp-shadow-md, 0 8px 24px rgba(2,6,23,.12)); transform: translateY(-2px); }
.pp-menu-page .ppd-c-section.card .b { display: flex; flex-direction: column; gap: 10px; }
.pp-menu-page .ppd-c-section.card .ppd-quicklinks { margin-top: auto; }
.pp-menu-page h2.ppd-c-heading { margin-top: 6px; font-size: 1.05rem; letter-spacing: -.01em; }
/* Both grids auto-fit, so 1–8 modules all lay out sensibly at any width. */
.pp-menu-page .ppd-lay-kpi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(var(--pp-mc-min, 210px), 1fr)); }
/* A menu-card grid takes its column width from the cards' size preset, so sm
   packs many per row and lg fewer. (A uniform grid can't do per-card widths, so
   with mixed sizes the last-declared wins — rare; the per-card padding still
   differs.) The KPI-tile grid has no .pp-mc-* so keeps the 210px default. */
.pp-menu-page .ppd-lay-kpi:has(.pp-mc-sm) { --pp-mc-min: 158px; }
.pp-menu-page .ppd-lay-kpi:has(.pp-mc-md) { --pp-mc-min: 216px; }
.pp-menu-page .ppd-lay-kpi:has(.pp-mc-lg) { --pp-mc-min: 300px; }
@media (prefers-reduced-motion: reduce) { .pp-menu-page .ppd-c-section.card { transition: none; } }
.ppd-minitable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ppd-minitable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ppd-muted); padding: 5px 8px; border-bottom: 1px solid var(--ppd-border); }
.ppd-minitable td { padding: 6px 8px; border-bottom: 1px solid var(--ppd-border-soft); } .ppd-minitable code { color: var(--ppd-primary); background: var(--ppd-primary-soft); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
/* --- Calendar COMPONENT (namespaced .ppd-mcal to avoid colliding with the
   dedicated Calendar page-type's .ppd-cal / .ppd-cal-head / --cal-accent) --- */
.ppd-mcal-wrap { --mcal-accent: var(--ppd-primary); --mcal-event: var(--mcal-accent); }
.ppd-mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ppd-mcal-day { display: inline-flex; align-items: center; justify-content: center; height: 30px; font-size: 11px; color:var(--pp-text,#475569); border-radius: 6px; background: var(--pp-surface-soft, #f6f9fd); }
.ppd-mcal-day.is-active { background: var(--mcal-accent); color:var(--pp-primary-text,#fff); font-weight: 700; }
.ppd-mcal-day.is-blank { background: transparent; }
.ppd-mcal-head { font-weight: 800; font-size: 13px; color: var(--pp-text,#1e293b); text-align: center; margin-bottom: 8px; }
.ppd-mcal-mode { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .3px; vertical-align: middle; color: var(--pp-primary,#4f46e5); background: color-mix(in srgb, var(--pp-primary,#4f46e5) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pp-primary,#4f46e5) 30%, transparent); }
.ppd-mcal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.ppd-mcal-wd > span { text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-muted); }
.ppd-mcal-wrap.cal-sm .ppd-mcal-day { height: 22px; font-size: 10px; }
.ppd-mcal-wrap.cal-lg .ppd-mcal-day { height: 44px; font-size: 13px; }
.ppd-mcal-wrap.cal-square .ppd-mcal-day { border-radius: 0; }
.ppd-mcal-wrap.cal-circle .ppd-mcal-day { border-radius: 50%; aspect-ratio: 1; height: auto; }
.ppd-mcal-wrap .ppd-mcal-day.is-weekend { background: var(--mcal-weekend, color-mix(in srgb, var(--mcal-accent) 6%, var(--pp-surface-soft,#f6f9fd))); }
/* mark styles for a day with records */
.ppd-mcal-wrap .ppd-mcal-day.has-rec { font-weight: 700; background: color-mix(in srgb, var(--mcal-event) 12%, var(--pp-surface-soft,#f6f9fd)); box-shadow: inset 2px 0 0 0 var(--mcal-event), inset 0 0 0 1px color-mix(in srgb, var(--mcal-event) 32%, transparent); }
.ppd-mcal-wrap.mk-dot .ppd-mcal-day.has-rec { background: var(--pp-surface-soft,#f6f9fd); box-shadow: none; position: relative; }
.ppd-mcal-wrap.mk-dot .ppd-mcal-day.has-rec::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--mcal-event); }
.ppd-mcal-wrap.mk-ring .ppd-mcal-day.has-rec { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mcal-event); }
.ppd-mcal-wrap.mk-badge .ppd-mcal-day.has-rec { background: var(--pp-surface-soft,#f6f9fd); box-shadow: none; position: relative; overflow: visible; }
.ppd-mcal-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--mcal-event); color: var(--pp-primary-text,#fff); font-size: 8.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 2px rgba(15,23,42,.25); }
.ppd-mcal-wrap .ppd-mcal-day.is-active.has-rec { box-shadow: inset 0 0 0 1.5px var(--pp-primary-text,#fff); }

/* ── Interactive AD/BS (English/Nepali) calendar — pp-nepcal enhancer (app.js) ── */
.pp-nepcal { --mcal-accent: var(--pp-primary, #4f46e5); --mcal-event: var(--mcal-accent); width: 100%; position: relative; }
.pp-nepcal.is-split { display: flex; gap: 20px; align-items: stretch; }
.pp-nc-mount { min-width: 0; }
.pp-nepcal.is-split .pp-nc-mount { flex: 0 0 40%; align-self: flex-start; }
.pp-nc-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pp-nc-my { flex: 1; text-align: center; font-size: 18px; letter-spacing: .01em; color: var(--pp-text,#1e293b); }
.pp-nc-my strong { font-weight: 800; } .pp-nc-my span { color: var(--pp-muted,#94a3b8); font-weight: 600; margin-left: 3px; }
.pp-nc-nav { width: 34px; height: 34px; border: 1px solid var(--pp-border,#e2e8f0); background: var(--pp-surface,#fff); border-radius: 10px; color: var(--pp-text,#334155); font-size: 19px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .18s; }
.pp-nc-nav:hover { background: var(--mcal-accent); color: #fff; border-color: var(--mcal-accent); transform: translateY(-1px); box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--mcal-accent) 50%, transparent); }
.pp-nc-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 11px; background: var(--pp-surface-soft,#f1f5f9); }
.pp-nc-toggle button { border: 0; background: transparent; color: var(--pp-muted,#64748b); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: .18s; }
.pp-nc-toggle button.is-on { background: var(--mcal-accent); color: #fff; box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--mcal-accent) 55%, transparent); }
.pp-nc-wd { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 8px; }
.pp-nc-wd > span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-muted,#94a3b8); }
.pp-nc-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.pp-nc-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; font-size: 13px; color: var(--pp-text,#475569); border-radius: 12px; background: var(--pp-surface-soft,#f8fafc); font-weight: 600; overflow: hidden; transition: transform .14s, box-shadow .14s, background .14s; }
.pp-nepcal:not(.is-split) .pp-nc-cell { min-height: 92px; }
.pp-nepcal:not(.is-split) .pp-nc-cell.has-rec { align-items: stretch; justify-content: flex-start; }
.pp-nepcal.is-split .pp-nc-cell { min-height: 46px; padding: 0; }
.pp-nc-cell.is-blank { background: transparent; }
.pp-nc-daynum { font-weight: 700; font-size: 13.5px; }
.pp-nc-chips { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; width: 100%; }
.pp-nepcal.is-split .pp-nc-chips { display: none; }
.pp-nc-chip { font-size: 10.5px; font-weight: 600; background: color-mix(in srgb, var(--mcal-event) 16%, var(--pp-surface,#fff)); color: var(--mcal-event); border-radius: 5px; padding: 2px 6px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-nc-more { font-size: 10px; font-weight: 700; color: var(--pp-muted,#94a3b8); padding-left: 4px; }
/* Days that have records/events — an on-theme, user-tintable highlight
   (--mcal-event, defaults to the accent): a soft tint + a clean left accent bar,
   so event days read clearly and look intentional without shouting. */
.pp-nc-cell.has-rec { cursor: pointer; background: color-mix(in srgb, var(--mcal-event) 9%, var(--pp-surface,#fff)); box-shadow: inset 3px 0 0 0 var(--mcal-event), inset 0 0 0 1px color-mix(in srgb, var(--mcal-event) 24%, transparent); }
.pp-nc-cell.has-rec:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--mcal-event) 14%, var(--pp-surface,#fff)); box-shadow: inset 3px 0 0 0 var(--mcal-event), inset 0 0 0 1px color-mix(in srgb, var(--mcal-event) 34%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--mcal-event) 50%, transparent); }
.pp-nc-cell.is-sel { box-shadow: inset 0 0 0 2px var(--mcal-accent); background: color-mix(in srgb, var(--mcal-accent) 12%, var(--pp-surface,#fff)); }
.pp-nc-cell.is-today { color: var(--pp-primary-text, #fff);
  /* clean accent tile with a soft top sheen (only a hair darker at the base, so
     the accent stays true instead of muddying toward black) + a crisp inner ring */
  background: linear-gradient(155deg, color-mix(in srgb, var(--mcal-accent) 86%, #fff) 0%, var(--mcal-accent) 52%, color-mix(in srgb, var(--mcal-accent) 90%, #000) 100%);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--mcal-accent) 58%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent); }
.pp-nc-cell.is-today .pp-nc-daynum { color: var(--pp-primary-text, #fff); }
.pp-nc-cell.is-today .pp-nc-chip { background: rgba(255,255,255,.22); color: #fff; }
.pp-nc-cell.is-today .pp-nc-more { color: rgba(255,255,255,.85); }
.pp-nc-badge { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mcal-event); color: var(--pp-primary-text, #fff); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--mcal-event) 60%, transparent); }
.pp-nepcal.is-split .pp-nc-badge { top: 3px; right: 3px; min-width: 15px; height: 15px; }
.pp-nc-cell.is-today .pp-nc-badge { background: #fff; color: var(--mcal-accent); box-shadow: 0 2px 6px -1px rgba(15,23,42,.3); }
/* ── weekend / holiday shading (configurable via the gear) ──
   A heavy warm FILL (amber over a dark surface) turned muddy-brown and fought the
   theme. Mark the weekend cleanly instead: a whisper-subtle warm tint over the
   theme's own surface + a faint warm hairline, and colour the day number in the
   holiday colour — clear on both light and dark, always on-theme. */
.pp-nc-cell.is-weekend:not(.is-today) {
  background: color-mix(in srgb, var(--mcal-weekend, #f59e0b) 7%, var(--pp-surface-soft, #f8fafc));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mcal-weekend, #f59e0b) 16%, transparent);
}
.pp-nc-cell.is-weekend.has-rec:not(.is-today) {
  background: color-mix(in srgb, var(--mcal-weekend, #f59e0b) 12%, var(--pp-surface-soft, #f8fafc));
}
.pp-nc-cell.is-weekend:not(.is-today) .pp-nc-daynum { color: var(--mcal-weekend, #d97706); }
.pp-nc-wd > span.is-weekend { color: var(--mcal-weekend, #d97706); opacity: .95; }
.pp-nc-gear { width: 34px; height: 34px; border: 1px solid var(--pp-border,#e2e8f0); background: var(--pp-surface,#fff); border-radius: 10px; color: var(--pp-muted,#64748b); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: .18s; }
.pp-nc-gear:hover { color: var(--pp-text,#334155); border-color: var(--mcal-accent); transform: rotate(30deg); }
.pp-nc-cfg { position: absolute; top: 48px; right: 0; z-index: 30; width: 224px; padding: 13px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 12px; background: var(--pp-surface,#fff); box-shadow: 0 16px 36px -12px rgba(15,23,42,.3); animation: pp-nc-slide .16s ease; }
.pp-nc-cfg-t { font-size: 12px; font-weight: 700; color: var(--pp-text,#334155); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pp-nc-cfg-t .bi { color: var(--mcal-accent); }
.pp-nc-cfg-opts { display: flex; gap: 5px; margin-bottom: 11px; }
.pp-nc-cfg-opts button { flex: 1; border: 1px solid var(--pp-border,#e2e8f0); background: var(--pp-surface,#fff); color: var(--pp-muted,#64748b); font-size: 11.5px; font-weight: 700; padding: 6px 3px; border-radius: 8px; cursor: pointer; transition: .15s; }
.pp-nc-cfg-opts button.is-on { background: var(--mcal-accent); color: #fff; border-color: var(--mcal-accent); }
.pp-nc-cfg-color { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--pp-muted,#64748b); }
.pp-nc-cfg-color input { width: 42px; height: 26px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 7px; background: none; cursor: pointer; padding: 2px; }
/* ── click-to-open detail panel ── */
.pp-nc-panel { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; max-height: 620px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 14px; background: var(--pp-surface,#fff); overflow: hidden; box-shadow: 0 12px 32px -14px rgba(15,23,42,.2); animation: pp-nc-slide .22s ease; }
.pp-nc-panel[hidden] { display: none; }
@keyframes pp-nc-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.pp-nc-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--mcal-accent) 13%, var(--pp-surface,#fff)), var(--pp-surface,#fff)); border-bottom: 1px solid var(--pp-border,#e2e8f0); }
.pp-nc-panel-d strong { display: block; font-size: 15px; font-weight: 800; color: var(--pp-text,#0f172a); }
.pp-nc-panel-c { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--mcal-accent); }
.pp-nc-close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--pp-muted,#94a3b8); cursor: pointer; padding: 0 4px; } .pp-nc-close:hover { color: var(--pp-text,#334155); }
.pp-nc-panel-list { padding: 12px 14px; flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.pp-nc-ev { border: 1px solid var(--pp-border,#e2e8f0); border-left: 3px solid var(--mcal-accent); border-radius: 10px; padding: 11px 13px; background: var(--pp-surface-soft,#fafbfc); }
.pp-nc-ev-t { font-weight: 800; font-size: 13px; color: var(--pp-text,#0f172a); display: flex; align-items: center; gap: 6px; }
.pp-nc-ev-t .bi { color: var(--mcal-accent); }
.pp-nc-ev-f { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; font-size: 12px; color: var(--pp-text,#475569); }
.pp-nc-ev-f > div span { color: var(--pp-muted,#94a3b8); font-weight: 600; margin-right: 4px; }
.pp-nc-ev-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--mcal-accent); text-decoration: none; }
.pp-nc-ev-open:hover { text-decoration: underline; }
.pp-nepcal.is-split .pp-nc-daynum { font-size: 12.5px; }
@media (max-width: 640px) {
  .pp-nepcal.is-split { flex-direction: column; }
  .pp-nepcal.is-split .pp-nc-mount { flex: 1 1 auto; width: 100%; }
  .pp-nc-panel { width: 100%; }
  .pp-nepcal:not(.is-split) .pp-nc-cell { min-height: 60px; }
  .pp-nc-ev-f { grid-template-columns: 1fr; }
}
/* Hover tooltip — a theme-native surface CARD (not an inverted block). The old
   `background: var(--pp-text); color: #fff` broke in dark mode: --pp-text is a
   LIGHT colour there, so it became a light box with white text = invisible. A
   surface + text + border reads perfectly in both light and dark. */
.pp-nc-tip { position: absolute; z-index: 9999; max-width: 260px; padding: 9px 12px; background: var(--pp-surface,#fff); color: var(--pp-text,#0f172a); border: 1px solid var(--pp-border,#e2e8f0); border-radius: 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 14px 34px -10px rgba(2,6,23,.45); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .12s, transform .12s; }
.pp-nc-tip.is-on { opacity: 1; transform: translateY(0); }
.pp-nc-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: var(--pp-surface,#fff); border-right: 1px solid var(--pp-border,#e2e8f0); border-bottom: 1px solid var(--pp-border,#e2e8f0); }
.pp-nc-tip.below::after { bottom: auto; top: -5px; border: 0; border-left: 1px solid var(--pp-border,#e2e8f0); border-top: 1px solid var(--pp-border,#e2e8f0); }
.pp-nc-th { font-weight: 800; margin-bottom: 3px; color: var(--pp-text,#0f172a); }
.pp-nc-tl { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pp-muted,#64748b); }

/* ── AI record assistant (ai-assist component + app.js enhancer) ── */
.pp-ai-assist { display: flex; flex-direction: column; gap: 12px; }
.pp-ai-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pp-text,#1e293b); }
.pp-ai-head strong { font-weight: 800; } .pp-ai-head .bi { color: var(--pp-primary,#4f46e5); }
.pp-ai-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-ai-pick { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-text,#334155); font-size: 13px; }
.pp-ai-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-ai-task { border: 1px solid var(--pp-primary,#4f46e5); background: var(--pp-primary,#4f46e5); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: .15s; }
.pp-ai-task:hover { filter: brightness(1.08); } .pp-ai-task:disabled { opacity: .55; cursor: default; }
.pp-ai-task:nth-child(2), .pp-ai-task:nth-child(3) { background: var(--pp-surface,#fff); color: var(--pp-primary,#4f46e5); }
.pp-ai-out:empty { display: none; }
.pp-ai-out { border: 1px solid var(--pp-border,#e2e8f0); border-radius: 11px; background: var(--pp-surface-soft,#f8fafc); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--pp-text,#334155); max-height: 440px; overflow: auto; }
.pp-ai-result p { margin: 0 0 8px; } .pp-ai-result ul { margin: 0 0 8px; padding-left: 18px; } .pp-ai-result li { margin: 2px 0; } .pp-ai-result h5 { font-size: 13.5px; font-weight: 800; margin: 10px 0 4px; }
.pp-ai-model { margin-top: 8px; font-size: 10.5px; color: var(--pp-muted,#94a3b8); }
.pp-ai-loading { display: flex; align-items: center; gap: 8px; color: var(--pp-muted,#64748b); font-size: 13px; }
.pp-ai-spin { width: 14px; height: 14px; border: 2px solid var(--pp-border,#e2e8f0); border-top-color: var(--pp-primary,#4f46e5); border-radius: 50%; animation: pp-ai-spin .7s linear infinite; display: inline-block; }
@keyframes pp-ai-spin { to { transform: rotate(360deg); } }
.pp-ai-err { color: #dc2626; font-size: 13px; } .pp-ai-hint { color: var(--pp-muted,#64748b); font-size: 13px; }
.pp-ai-help { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--pp-border,#e2e8f0); background: var(--pp-surface-soft,#f1f5f9); color: var(--pp-muted,#64748b); font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.pp-ai-help:hover { background: var(--pp-primary,#4f46e5); color: #fff; border-color: var(--pp-primary,#4f46e5); }
.pp-ai-info { font-size: 12px; line-height: 1.55; color: var(--pp-muted,#475569); background: var(--pp-surface-soft,#f8fafc); border: 1px dashed var(--pp-border,#cbd5e1); border-radius: 9px; padding: 10px 12px; }
.pp-ai-info .bi { color: var(--pp-primary,#4f46e5); } .pp-ai-info[hidden] { display: none; }
/* "Get Premium" call-to-action (shown when AI isn't connected) */
.pp-ai-premium { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--pp-primary,#6366f1) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-primary,#6366f1) 9%, var(--pp-surface,#fff)), var(--pp-surface,#fff)); }
.pp-ai-premium-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 15px; border-radius: 999px; background: linear-gradient(135deg, #6366f1, #a855f7 55%, #ec4899); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 7px 18px -5px rgba(139,92,246,.55); }
.pp-ai-premium-badge .bi { font-size: 13px; }
.pp-ai-premium-txt { font-size: 13px; line-height: 1.6; color: var(--pp-text,#334155); }
.pp-ai-premium-txt strong { color: var(--pp-primary,#4f46e5); font-weight: 800; }
.pp-ai-premium-sub { display: block; margin-top: 5px; font-size: 11.5px; color: var(--pp-muted,#94a3b8); }

/* ── Daily cause list (cause-list component) ── */
.pp-cl { display: flex; flex-direction: column; gap: 10px; }
.pp-cl-bar { display: flex; justify-content: flex-end; }
.pp-cl-print { border: 1px solid var(--pp-primary,#4f46e5); background: var(--pp-primary,#4f46e5); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pp-cl-print:hover { filter: brightness(1.08); }
.pp-cl-doc { border: 1px solid var(--pp-border,#e2e8f0); border-radius: 11px; background: var(--pp-surface,#fff); padding: 16px 18px; }
.pp-cl-h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--pp-text,#0f172a); padding-bottom: 8px; margin-bottom: 12px; }
.pp-cl-h strong { font-size: 16px; font-weight: 800; color: var(--pp-text,#0f172a); } .pp-cl-h span { color: var(--pp-muted,#64748b); font-size: 12px; }
.pp-cl-court { font-weight: 800; font-size: 13.5px; color: var(--pp-primary,#4f46e5); margin: 14px 0 6px; } .pp-cl-court span { color: var(--pp-muted,#94a3b8); font-weight: 600; }
.pp-cl-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; }
.pp-cl-t th, .pp-cl-t td { border: 1px solid var(--pp-border,#e2e8f0); padding: 6px 9px; text-align: left; vertical-align: top; }
.pp-cl-t th { background: var(--pp-surface-soft,#f1f5f9); font-weight: 700; color: var(--pp-text,#334155); }
.pp-cl-vs { color: var(--pp-muted,#94a3b8); font-size: 11px; } .pp-cl-empty { color: var(--pp-muted,#64748b); padding: 18px; text-align: center; }
/* Mobile: the multi-column cause-list table overflowed / clipped on phones.
   Collapse each row into a tidy "label: value" card (labels come from the td's
   data-label). Tablet + desktop keep the full table. */
@media (max-width: 767.98px) {
  .pp-cl-doc { padding: 12px 12px; }
  .pp-cl-h { flex-wrap: wrap; gap: 2px 10px; }
  .pp-cl-t { font-size: 13px; margin-bottom: 12px; }
  .pp-cl-t thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-cl-t, .pp-cl-t tbody, .pp-cl-t tr, .pp-cl-t td { display: block; width: 100%; }
  .pp-cl-t tr { border: 1px solid var(--pp-border,#e2e8f0); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--pp-surface,#fff); }
  .pp-cl-t td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: 0; border-bottom: 1px solid var(--pp-border,#eef2f7); padding: 8px 12px; text-align: right; }
  .pp-cl-t td:last-child { border-bottom: 0; }
  .pp-cl-t td::before { content: attr(data-label); font-weight: 700; color: var(--pp-muted,#64748b); text-align: left; flex: 0 0 42%; white-space: nowrap; }
  .pp-cl-t td:empty { display: none; }
}

/* Deadline Tracker — risk-prioritised watchlist */
.pp-dl { display: flex; flex-direction: column; gap: 12px; }
.pp-dl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--pp-text,#1e293b); }
.pp-dl-head > i { color: var(--pp-primary,#4f46e5); }
.pp-dl-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pp-dl-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pp-dl-list { display: flex; flex-direction: column; gap: 8px; }
.pp-dl-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--pp-border,#e2e8f0); border-left-width: 4px; border-radius: 10px; background: var(--pp-surface,#fff); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease; }
.pp-dl-item.is-preview { cursor: pointer; }
.pp-dl-item.is-preview:hover, .pp-dl-item.is-preview:focus-visible { border-color: color-mix(in srgb, var(--pp-primary,#4f46e5) 40%, var(--pp-border,#e2e8f0)); box-shadow: var(--pp-shadow-sm, 0 4px 14px rgba(2,6,23,.08)); transform: translateY(-1px); outline: none; }
.pp-dl-item.is-preview:hover .pp-dl-open, .pp-dl-item.is-preview:focus-visible .pp-dl-open { background: color-mix(in srgb, var(--pp-primary,#4f46e5) 12%, transparent); }
.pp-dl-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.pp-dl-main { flex: 1 1 auto; min-width: 0; }
.pp-dl-t { font-weight: 700; font-size: 13.5px; color: var(--pp-text,#1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dl-s { font-size: 12px; color: var(--pp-muted,#64748b); }
.pp-dl-badge { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pp-dl-open { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--pp-primary,#4f46e5); text-decoration: none; padding: 3px 8px; border-radius: 7px; }
.pp-dl-open:hover { background: color-mix(in srgb, var(--pp-primary,#4f46e5) 12%, transparent); }
.pp-dl-empty { color: var(--pp-muted,#64748b); padding: 18px; text-align: center; }
/* risk palette (semantic; independent of the theme accent) */
.pp-dl-item.r-overdue { border-left-color: #dc2626; } .pp-dl-item.r-critical { border-left-color: #ea580c; }
.pp-dl-item.r-soon { border-left-color: #d97706; } .pp-dl-item.r-upcoming { border-left-color: #2563eb; }
.r-overdue .pp-dl-dot { background: #dc2626; } .r-critical .pp-dl-dot { background: #ea580c; }
.r-soon .pp-dl-dot { background: #d97706; } .r-upcoming .pp-dl-dot { background: #2563eb; }
.pp-dl-chip.r-overdue, .r-overdue .pp-dl-badge { background: color-mix(in srgb, #dc2626 15%, var(--pp-surface,#fff)); color: #dc2626; }
.pp-dl-chip.r-critical, .r-critical .pp-dl-badge { background: color-mix(in srgb, #ea580c 15%, var(--pp-surface,#fff)); color: #ea580c; }
.pp-dl-chip.r-soon, .r-soon .pp-dl-badge { background: color-mix(in srgb, #d97706 16%, var(--pp-surface,#fff)); color: #b45309; }
.pp-dl-chip.r-upcoming, .r-upcoming .pp-dl-badge { background: color-mix(in srgb, #2563eb 13%, var(--pp-surface,#fff)); color: #2563eb; }
/* chips lifted into the enclosing card header (right-aligned, before the fold caret) */
.ppd-c-section > .h .pp-dl-chips.pp-dl-chips-inhead { margin-left: auto; margin-right: 4px; font-weight: 700; }
.ppd-c-section > .h .pp-dl-chips-inhead + .ppd-fold-ic { margin-left: 0; }
/* record hover-preview card */
.pp-dl-preview { position: absolute; z-index: 9999; width: min(320px, calc(100vw - 24px)); max-width: 320px; padding: 0; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 13px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); box-shadow: var(--pp-shadow-lg, 0 18px 44px rgba(2,6,23,.20)); opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none; transition: opacity .13s ease, transform .13s ease; overflow: hidden; }
.pp-dl-preview.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pp-dl-pv-load { padding: 20px; text-align: center; color: var(--pp-muted,#94a3b8); }
.pp-dl-pv-load i { animation: pp-dl-spin 1s linear infinite; display: inline-block; }
@keyframes pp-dl-spin { to { transform: rotate(360deg); } }
.pp-dl-pv-h { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 10px; background: color-mix(in srgb, var(--pp-primary,#4f46e5) 7%, var(--pp-surface,#fff)); border-bottom: 1px solid var(--pp-border,#e2e8f0); }
.pp-dl-pv-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-primary,#4f46e5); }
.pp-dl-pv-h strong { font-size: 14.5px; font-weight: 800; color: var(--pp-text,#0f172a); line-height: 1.25; }
.pp-dl-pv-f { display: grid; grid-template-columns: minmax(72px, 40%) 1fr; gap: 5px 12px; margin: 0; padding: 12px 14px; }
.pp-dl-pv-f dt { font-size: 11.5px; font-weight: 600; color: var(--pp-muted,#64748b); margin: 0; }
.pp-dl-pv-f dd { font-size: 12.5px; font-weight: 600; color: var(--pp-text,#1e293b); margin: 0; word-break: break-word; }
.pp-dl-pv-open { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 9px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--pp-primary,#4f46e5); text-decoration: none; }
.pp-dl-pv-open:hover { background: color-mix(in srgb, var(--pp-primary,#4f46e5) 88%, #000); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pp-dl-item, .pp-dl-preview { transition: none; } .pp-dl-pv-load i { animation: none; } }

/* Document Generator — template merge */
.pp-dg { display: flex; flex-direction: column; gap: 12px; }
.pp-dg-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pp-text,#1e293b); }
.pp-dg-head > i { color: var(--pp-primary,#4f46e5); }
.pp-dg-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-dg-pick { flex: 1 1 220px; min-width: 160px; padding: 8px 11px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); font-size: 13px; }
.pp-dg-gen { padding: 8px 15px; border: 0; border-radius: 9px; background: var(--pp-primary,#4f46e5); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.pp-dg-time { padding: 7px 10px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); font-size: 13px; }
.pp-dg-print, .pp-dg-download, .pp-dg-pdf { padding: 8px 13px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-text,#334155); font-weight: 600; font-size: 13px; cursor: pointer; }
.pp-dg-pdf { color: #b91c1c; border-color: color-mix(in srgb, #b91c1c 30%, var(--pp-border,#e2e8f0)); }
.pp-dg-email, .pp-dg-sms { padding: 8px 13px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-primary,#4f46e5); font-weight: 600; font-size: 13px; cursor: pointer; }
.pp-dg-sendmsg { font-size: 12.5px; font-weight: 600; margin-top: -4px; min-height: 1em; }
.pp-dg-sendmsg.is-ok { color: #16a34a; } .pp-dg-sendmsg.is-err { color: #dc2626; } .pp-dg-sendmsg.is-wait { color: var(--pp-muted,#64748b); }
.pp-dg-sendmsg.is-premium { color: #b45309; }
.pp-dg-locked { opacity: .6; position: relative; }
.pp-dg-locked::after { content: "\F47B"; font-family: "bootstrap-icons"; font-size: 10px; margin-left: 5px; opacity: .8; }

/* Fee Calculator */
.pp-fc { display: flex; flex-direction: column; gap: 12px; }
.pp-fc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pp-text,#1e293b); } .pp-fc-head > i { color: var(--pp-primary,#4f46e5); }
.pp-fc-row { display: flex; flex-direction: column; gap: 5px; } .pp-fc-row label { font-size: 12.5px; color: var(--pp-muted,#64748b); font-weight: 600; }
.pp-fc-claim { padding: 9px 12px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; font-size: 15px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); }
.pp-fc-out { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 15px; border-radius: 11px; background: color-mix(in srgb, var(--pp-primary,#4f46e5) 10%, var(--pp-surface,#fff)); }
.pp-fc-out span { color: var(--pp-muted,#64748b); font-size: 13px; } .pp-fc-fee { font-size: 22px; font-weight: 800; color: var(--pp-primary,#4f46e5); }
.pp-fc-note { font-size: 11.5px; color: var(--pp-muted,#94a3b8); }

/* Limitation Calculator (reuses the deadline risk palette) */
.pp-lc { display: flex; flex-direction: column; gap: 11px; }
.pp-lc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pp-text,#1e293b); } .pp-lc-head > i { color: var(--pp-primary,#4f46e5); }
.pp-lc-row { display: flex; flex-direction: column; gap: 5px; } .pp-lc-row label { font-size: 12.5px; color: var(--pp-muted,#64748b); font-weight: 600; }
.pp-lc-row input, .pp-lc-row select { padding: 9px 12px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; font-size: 14px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); }
.pp-lc-out { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 15px; border-radius: 11px; border-left: 4px solid #2563eb; background: var(--pp-surface,#fff); border: 1px solid var(--pp-border,#e2e8f0); border-left-width: 4px; }
.pp-lc-out > span:first-child { color: var(--pp-muted,#64748b); font-size: 13px; } .pp-lc-deadline { font-size: 18px; font-weight: 800; } .pp-lc-left { margin-left: auto; font-weight: 700; font-size: 13px; }
.pp-lc-out.r-overdue { border-left-color: #dc2626; } .pp-lc-out.r-overdue .pp-lc-deadline, .pp-lc-out.r-overdue .pp-lc-left { color: #dc2626; }
.pp-lc-out.r-critical { border-left-color: #ea580c; } .pp-lc-out.r-critical .pp-lc-deadline, .pp-lc-out.r-critical .pp-lc-left { color: #b45309; }
.pp-lc-out.r-upcoming { border-left-color: #2563eb; } .pp-lc-out.r-upcoming .pp-lc-deadline, .pp-lc-out.r-upcoming .pp-lc-left { color: #2563eb; }

/* Activity Timeline */
.pp-tl { display: flex; flex-direction: column; gap: 12px; }
.pp-tl-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pp-text,#1e293b); } .pp-tl-head > i { color: var(--pp-primary,#4f46e5); }
.pp-tl-list { display: flex; flex-direction: column; position: relative; padding-left: 6px; }
.pp-tl-item { display: flex; gap: 14px; position: relative; padding: 0 0 16px 16px; border-left: 2px solid var(--pp-border,#e2e8f0); }
.pp-tl-item:last-child { border-left-color: transparent; }
.pp-tl-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--pp-primary,#4f46e5); border: 2px solid var(--pp-surface,#fff); box-shadow: 0 0 0 1px var(--pp-border,#e2e8f0); }
.pp-tl-body { min-width: 0; } .pp-tl-date { font-size: 11.5px; color: var(--pp-muted,#94a3b8); font-weight: 600; }
.pp-tl-title { font-weight: 700; font-size: 13.5px; color: var(--pp-text,#1e293b); } .pp-tl-title a { color: inherit; text-decoration: none; } .pp-tl-title a:hover { color: var(--pp-primary,#4f46e5); }
.pp-tl-sub { font-size: 12.5px; color: var(--pp-muted,#64748b); } .pp-tl-empty { color: var(--pp-muted,#64748b); padding: 16px; text-align: center; }

/* Daily Cause List controls (table reuses .pp-cl) */
.pp-dcl-date { padding: 7px 11px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; font-size: 13px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); }

/* Client Portal Link */
.pp-pl { display: flex; flex-direction: column; gap: 11px; }
.pp-pl-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pp-text,#1e293b); } .pp-pl-head > i { color: var(--pp-primary,#4f46e5); }
.pp-pl-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-pl-pick { flex: 1 1 200px; min-width: 150px; padding: 8px 11px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-text,#1e293b); font-size: 13px; }
.pp-pl-copy { padding: 8px 13px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; background: var(--pp-surface,#fff); color: var(--pp-primary,#4f46e5); font-weight: 600; font-size: 13px; cursor: pointer; } .pp-pl-copy.is-copied { background: color-mix(in srgb, #16a34a 15%, var(--pp-surface,#fff)); color: #16a34a; border-color: #16a34a; }
.pp-pl-open { padding: 8px 11px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; color: var(--pp-primary,#4f46e5); text-decoration: none; }
.pp-pl-url { width: 100%; padding: 8px 11px; border: 1px solid var(--pp-border,#e2e8f0); border-radius: 9px; font-size: 12px; background: var(--pp-surface-soft,#f8fafc); color: var(--pp-muted,#64748b); }
.pp-pl-hint { font-size: 11.5px; color: var(--pp-muted,#94a3b8); }
.pp-dg-doc { border: 1px solid var(--pp-border,#e2e8f0); border-radius: 11px; background: var(--pp-surface,#fff); padding: 20px 22px; min-height: 120px; }
.pp-dg-tpl, .pp-dg-out { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: "Noto Sans Devanagari", var(--pp-font, Inter), system-ui, sans-serif; font-size: 13.5px; line-height: 1.75; color: var(--pp-text,#1e293b); }
.pp-dg-tok { background: color-mix(in srgb, var(--pp-primary,#4f46e5) 14%, transparent); color: var(--pp-primary,#4f46e5); border-radius: 5px; padding: 0 4px; font-weight: 600; }
.pp-dg-empty { color: var(--pp-muted,#64748b); text-align: center; padding: 14px; }
.pp-dg-letterhead { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--pp-text,#0f172a); }
.pp-dg-lh-logo { max-height: 60px; margin-bottom: 6px; }
.pp-dg-lh-text { font-weight: 700; font-size: 15.5px; line-height: 1.45; color: var(--pp-text,#0f172a); }

/* content / media */
.ppd-icon-block { display: inline-flex; align-items: center; justify-content: center; color: var(--ppd-primary); }
.ppd-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border: 1.5px dashed var(--ppd-border); border-radius: 12px; background:var(--pp-surface-soft,#fafcff); color: var(--ppd-muted); font-size: 13px; } .ppd-media > i, .ppd-media > span:first-child { font-size: 30px; color:var(--pp-muted,#94a3b8); }
.ppd-map { background:linear-gradient(135deg, var(--pp-surface-soft,#eef4fb), var(--pp-surface-soft,#f6faff)); }
/* --- Custom Map v2: real embedded map --- */
.ppd-map-box { border-radius: 12px; overflow: hidden; line-height: 0; background: var(--pp-surface-soft,#eef4fb); }
.ppd-map-box.no-round { border-radius: 0; }
.ppd-map-box.has-border { border: 1px solid var(--ppd-border); }
.ppd-map-embed { width: 100%; border: 0; display: block; }
.ppd-map-cap { font-size: 12px; color: var(--ppd-muted); padding: 6px 2px; text-align: center; line-height: 1.4; }
.ppd-linkchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--ppd-border); border-radius: 9px; background:var(--pp-surface,#fff); color: var(--ppd-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; } .ppd-linkchip:hover { background: var(--ppd-primary-soft); border-color: var(--ppd-primary-border); }
.ppd-linkchip .bi-box-arrow-up-right { font-size: .85em; opacity: .7; }
.ppd-linkbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; border-radius: 9px; background: var(--pp-primary, var(--ppd-primary)); color: var(--pp-primary-text, #fff); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .ppd-linkbtn:hover { filter: brightness(1.05); } .ppd-linkbtn .bi-box-arrow-up-right { font-size: .85em; opacity: .8; }
.ppd-linktext { display: inline-flex; align-items: center; gap: 5px; color: var(--ppd-primary); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .ppd-linktext:hover { text-decoration: underline; } .ppd-linktext .bi-box-arrow-up-right { font-size: .8em; opacity: .7; }
.ppd-code { border: 1px solid var(--ppd-border); border-radius: 10px; overflow: hidden; background:var(--pp-text,#0f172a); }
.ppd-code-h { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 11px; font-weight: 700; color: var(--pp-sidebar-text, #cbd5e1); background:var(--pp-surface-raised,#1e293b); text-transform: uppercase; letter-spacing: .04em; }
.ppd-code-b { margin: 0; padding: 11px 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color:var(--pp-code-text,#e2e8f0); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; }

/* data / search */
.ppd-advsearch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border: 1px solid var(--ppd-border); border-radius: 11px; background:var(--pp-surface-soft,#fbfdff); }
.ppd-advsearch-f { display: flex; flex-direction: column; gap: 3px; } .ppd-advsearch-f small { font-size: 11px; color: var(--ppd-muted); font-weight: 600; }
.ppd-filterpanel { border: 1px solid var(--ppd-border); border-radius: 11px; background:var(--pp-surface,#fff); padding: 11px 13px; max-width: 320px; }
.ppd-filterpanel-h { font-weight: 700; font-size: 12.5px; color:var(--pp-text,#334155); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; } .ppd-filterpanel-h > i { color: var(--ppd-primary); }
.ppd-filterpanel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 12.5px; color:var(--pp-text,#475569); } .ppd-filterpanel-row .ppd-c-inputwrap { flex: 1; max-width: 170px; }
.ppd-totals { display: flex; flex-wrap: wrap; gap: 10px; }
.ppd-total { flex: 1; min-width: 90px; border: 1px solid var(--ppd-border); border-radius: 10px; padding: 9px 12px; background:var(--pp-surface,#fff); text-align: center; } .ppd-total small { display: block; color: var(--ppd-muted); font-size: 11px; } .ppd-total strong { font-size: 17px; color:var(--pp-text,#0f172a); }
.ppd-masterdetail { display: grid; grid-template-columns: 200px 1fr; gap: 0; border: 1px solid var(--ppd-border); border-radius: 11px; overflow: hidden; background:var(--pp-surface,#fff); }
.ppd-masterdetail-list { border-right: 1px solid var(--ppd-border-soft); background:var(--pp-surface-soft,#fbfdff); } .ppd-md-row { display: flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 12.5px; color:var(--pp-text,#475569); border-bottom: 1px solid var(--ppd-border-soft); } .ppd-md-row > i { color:var(--pp-muted,#94a3b8); }
.ppd-masterdetail-body { padding: 12px; }

/* advanced: timeline / kanban */
.ppd-timeline { padding-left: 10px; } .ppd-tl-row { position: relative; display: flex; gap: 12px; padding: 0 0 14px 18px; border-left: 2px solid var(--ppd-border); } .ppd-tl-row:last-child { border-left-color: transparent; }
/* Plain dot: a small node straddling the line. */
.ppd-tl-dot { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ppd-primary); border:2px solid var(--pp-surface,#fff); box-shadow: 0 0 0 1px var(--ppd-primary-border); box-sizing: border-box; }
/* Icon node: a larger centred medallion so the glyph sits ON the line, aligned
   to the title — never overlapping it. Icon scales with the node via em. */
.ppd-tl-dot.has-ic { left: -13px; top: 1px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--pp-primary-text,#fff); box-shadow: 0 0 0 3px var(--pp-surface,#fff); font-size: 12px; }
.ppd-tl-dot.has-ic > i, .ppd-tl-dot.has-ic > svg, .ppd-tl-dot.has-ic > .material-symbols-outlined { font-size: 1em; line-height: 1; }
.ppd-tl-row strong { font-size: 13px; color:var(--pp-text,#1e293b); display: block; } .ppd-tl-row small { color: var(--ppd-muted); font-size: 11.5px; display: block; }
/* --- Timeline v2: configurable line, per-item date, layouts, markers --- */
/* Line style/colour/width come from container CSS vars (later rule wins over 1835). */
.ppd-timeline .ppd-tl-row { border-left: var(--tl-lw,2px) var(--tl-ls,solid) var(--tl-lc,var(--ppd-border)); }
.ppd-timeline .ppd-tl-row:last-child { border-left-color: transparent; }
.ppd-tl-date { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ppd-primary); background:var(--ppd-primary-soft, color-mix(in srgb, var(--ppd-primary) 12%, transparent)); padding:1px 7px; border-radius:999px; margin-bottom:3px; }
a.ppd-tl-link { text-decoration:none; color:inherit; display:block; }
a.ppd-tl-link:hover strong { color:var(--ppd-primary); }
/* Spacing presets */
.ppd-timeline.sp-compact .ppd-tl-row { padding-bottom:6px; }
.ppd-timeline.sp-relaxed .ppd-tl-row { padding-bottom:24px; }
/* Card style: each event's body in a bordered surface */
.ppd-timeline.tl-card .ppd-tl-c { background:var(--pp-surface,#fff); border:1px solid var(--ppd-border); border-radius:10px; padding:8px 12px; box-shadow:var(--pp-shadow-sm, 0 1px 2px rgba(2,6,23,.06)); flex:1; }
/* Marker variants (only when no explicit per-item colour is set) */
.ppd-timeline.mk-outline .ppd-tl-dot:not(.has-ic) { background:var(--pp-surface,#fff); border-color:var(--ppd-primary); box-shadow:0 0 0 1px var(--ppd-primary-border); }
.ppd-timeline.mk-ring .ppd-tl-dot:not(.has-ic) { background:var(--pp-surface,#fff); border:3px solid var(--ppd-primary); }
/* Right-aligned layout: line on the right */
.ppd-timeline.tl-right { padding-left:0; padding-right:10px; }
.ppd-timeline.tl-right .ppd-tl-row { border-left:none; border-right:var(--tl-lw,2px) var(--tl-ls,solid) var(--tl-lc,var(--ppd-border)); padding:0 18px 14px 0; text-align:right; justify-content:flex-end; }
.ppd-timeline.tl-right .ppd-tl-row:last-child { border-right-color:transparent; }
.ppd-timeline.tl-right .ppd-tl-dot { left:auto; right:-7px; }
.ppd-timeline.tl-right .ppd-tl-dot.has-ic { left:auto; right:-13px; }
/* Alternating (zig-zag) layout: centred line, events left & right */
.ppd-timeline.tl-alt { padding-left:0; position:relative; }
.ppd-timeline.tl-alt::before { content:''; position:absolute; left:50%; top:6px; bottom:6px; width:var(--tl-lw,2px); background:var(--tl-lc,var(--ppd-border)); border-radius:2px; transform:translateX(-50%); }
.ppd-timeline.tl-alt .ppd-tl-row { border-left:none; width:50%; box-sizing:border-box; padding:0 26px 18px; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(odd) { margin-left:0; text-align:right; justify-content:flex-end; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(even) { margin-left:50%; text-align:left; }
.ppd-timeline.tl-alt .ppd-tl-dot { top:4px; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(odd) .ppd-tl-dot { left:auto; right:-7px; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(even) .ppd-tl-dot { left:-7px; right:auto; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(odd) .ppd-tl-dot.has-ic { left:auto; right:-13px; }
.ppd-timeline.tl-alt .ppd-tl-row:nth-child(even) .ppd-tl-dot.has-ic { left:-13px; right:auto; }
.ppd-tl-empty { color:var(--ppd-muted); font-size:12px; padding:6px 0 6px 18px; }
.ppd-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 10px; }
.ppd-kanban-col { background: var(--pp-surface-soft, #f6f9fd); border: 1px solid var(--ppd-border-soft); border-radius: 10px; padding: 9px; } .ppd-kanban-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-muted); margin-bottom: 8px; }
.ppd-kanban-card { background:var(--pp-surface,#fff); border: 1px solid var(--ppd-border); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; color:var(--pp-text,#334155); margin-bottom: 7px; box-shadow: var(--ppd-shadow-sm); }
/* --- Kanban v2: configurable width/overflow, accents, rich cards --- */
.ppd-kanban { grid-auto-columns: minmax(var(--kb-colw,140px), 1fr); }
.ppd-kanban.kb-scroll { grid-auto-columns: var(--kb-colw,220px); overflow-x: auto; padding-bottom: 4px; }
.ppd-kanban.kb-wrap { display: flex; flex-wrap: wrap; }
.ppd-kanban.kb-wrap .ppd-kanban-col { flex: 1 1 var(--kb-colw,180px); min-width: var(--kb-colw,180px); }
/* Column accent bar (per-column --kb-caccent overrides board --kb-accent). */
.ppd-kanban-col { border-top: 3px solid var(--kb-caccent, var(--kb-accent, var(--ppd-primary))); }
.ppd-kanban.kb-col-plain .ppd-kanban-col { background: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.ppd-kanban.kb-col-bordered .ppd-kanban-col { border: 1px solid var(--ppd-border); border-top: 3px solid var(--kb-caccent, var(--kb-accent, var(--ppd-primary))); }
.ppd-kanban-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ppd-kanban-count { background: var(--ppd-border-soft,#e8eef5); color: var(--ppd-muted); font-size: 10.5px; font-weight: 700; padding: 0 7px; border-radius: 999px; min-width: 18px; text-align: center; }
/* Card variants */
.ppd-kanban.kb-card-raised .ppd-kanban-card { box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(2,6,23,.10)); }
.ppd-kanban.kb-card-outline .ppd-kanban-card { background: transparent; box-shadow: none; }
.ppd-kanban.kb-compact .ppd-kanban-card { padding: 6px 9px; font-size: 11.5px; margin-bottom: 5px; }
.ppd-kanban-ct { font-weight: 600; color: var(--pp-text,#334155); }
.ppd-kanban-cs { color: var(--ppd-muted); font-size: 11px; margin-top: 2px; }
.ppd-kanban-cf { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ppd-kanban-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--kb-accent, var(--ppd-primary)); background: color-mix(in srgb, var(--kb-accent, var(--ppd-primary)) 12%, transparent); padding: 1px 7px; border-radius: 999px; }
.ppd-kanban-date { font-size: 10.5px; color: var(--ppd-muted); margin-left: auto; }
.ppd-kanban-card.is-empty { color: var(--ppd-muted); font-style: italic; background: transparent; border-style: dashed; box-shadow: none; }
/* Drag & drop */
.ppd-kanban.kb-dnd .ppd-kanban-card { cursor: grab; }
.ppd-kanban.kb-dnd .ppd-kanban-card:active { cursor: grabbing; }
.ppd-kanban-card.is-dragging { opacity: .45; }
.ppd-kanban-col.is-over { outline: 2px dashed var(--kb-accent, var(--ppd-primary)); outline-offset: -3px; background: color-mix(in srgb, var(--kb-accent, var(--ppd-primary)) 6%, transparent); }

/* ---------------- field controls (plugins) ---------------- */
.ppd-fc-slot { display: block; }
.ppd-fc-slot.is-live > * { max-width: 100%; }
.ppd-fc-slot .form-control, .ppd-fc-slot .form-select { font-size: 13px; }
.ppd-fc-img { width: 46px; height: 46px; border-radius: 8px; border: 1px solid var(--ppd-border); background: var(--pp-surface-soft, #f6f9fd); display: inline-flex; align-items: center; justify-content: center; color:var(--pp-muted,#94a3b8); font-size: 20px; }
.ppd-c-field .badge-preview { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background:var(--pp-success-soft,#ecfdf5); color: var(--pp-success-text, #047857); border:1px solid var(--pp-success-border,#a7f3d0); }

/* ---------- Login experiences ---------- */
.ppd-canvas.ppd-page-login { background: transparent; }
.ppd-page-login .ppd-page-body { padding: 0; gap: 0; }
.ppd-page-login .ppd-type-auth_form { border: 0; border-radius: 0; }
.ppd-auth-experience {
    --auth-accent: #6d5dfc; --auth-bg: #f4f7fb;
    isolation: isolate; position: relative; min-height: 620px; overflow: hidden;
    display: grid; grid-template-columns: minmax(0,1.12fr) minmax(420px,.88fr);
    background: var(--auth-bg); color: #111827; font-family: Inter, "DM Sans", system-ui, sans-serif;
}
.ppd-auth-experience *, .ppd-auth-experience *::before, .ppd-auth-experience *::after { box-sizing: border-box; }
.ppd-auth-showcase, .ppd-auth-card-zone { position: relative; z-index: 2; }
.ppd-auth-showcase { min-width: 0; padding: 52px clamp(34px,5vw,76px); display: flex; flex-direction: column; justify-content: space-between; color:var(--pp-primary-text,#fff); }
.ppd-auth-brand { display: flex; align-items: center; gap: 11px; }
.ppd-auth-brand > span { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color:var(--pp-primary-text,#fff); font-size: 17px; font-weight: 900; box-shadow: 0 9px 24px #0002; }
.ppd-auth-brand strong, .ppd-auth-brand small { display: block; }
.ppd-auth-brand strong { font-size: 16px; line-height: 1.15; letter-spacing: -.02em; }
.ppd-auth-brand small { margin-top: 3px; font-size: 10px; opacity: .7; }
.ppd-auth-copy { max-width: 570px; margin: auto 0; padding: 42px 0; }
.ppd-auth-copy > small { color: #b8b4ff; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.ppd-auth-copy h1 { max-width: 600px; margin: 14px 0 17px; color: inherit; font-size: clamp(34px,4vw,57px); line-height: 1.02; letter-spacing: -.055em; font-weight: 800; }
.ppd-auth-copy p { max-width: 490px; margin: 0; color: #c9cee4; font-size: 14px; line-height: 1.7; }
.ppd-auth-showcase blockquote { width: min(100%,480px); margin: 0; padding: 16px 18px; border: 1px solid #ffffff20; border-radius: 15px; background: #ffffff0d; backdrop-filter: blur(14px); font-size: 12.5px; line-height: 1.55; }
.ppd-auth-showcase blockquote footer { margin-top: 8px; color: #aeb7d4; font-size: 10px; font-weight: 700; }
.ppd-auth-card-zone { display: grid; place-items: center; padding: 40px clamp(26px,4vw,58px); background: #fbfcff; }
.ppd-auth-card { width: min(100%,430px); padding: 35px 38px; border: 1px solid #e8ebf2; border-radius: 23px; background:var(--pp-surface,#fff); box-shadow:var(--pp-shadow-md,0 24px 70px rgba(24,31,58,.11)); }
.ppd-auth-card > .ppd-auth-brand { display: none; margin-bottom: 28px; color: #111827; }
.ppd-auth-heading h2 { margin: 0; color: #111827; font-size: 29px; line-height: 1.15; letter-spacing: -.04em; }
.ppd-auth-heading p { margin: 8px 0 24px; color: #7a8499; font-size: 12.5px; line-height: 1.55; }
.ppd-auth-fields { display: grid; gap: 14px; }
.ppd-auth-fields > label { display: grid; gap: 7px; color: #30384a; font-size: 11.5px; font-weight: 750; }
.ppd-auth-fields > label > div { position: relative; display: flex; align-items: center; }
.ppd-auth-fields input { width: 100%; height: 43px; padding: 0 40px; border: 1px solid #dfe3ec; border-radius: 11px; background: #fbfcfe; color: #111827; font: inherit; font-size: 12px; }
.ppd-auth-fields input::placeholder { color: #a5adbb; }
.ppd-auth-fields label i { position: absolute; left: 14px; z-index: 1; color: #9aa4b4; font-size: 13px; }
.ppd-auth-fields label .ppd-auth-eye { left: auto; right: 14px; }
.ppd-auth-options { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6b7280; font-size: 10.5px; }
.ppd-auth-options label { display: inline-flex; align-items: center; gap: 6px; }
.ppd-auth-options input { accent-color: var(--auth-accent); }
.ppd-auth-experience a { color: var(--auth-accent); font-weight: 750; text-decoration: none; }
.ppd-auth-submit { width: 100%; height: 43px; border: 0; border-radius: 11px; padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 10px; color:var(--pp-primary-text,#fff); font: inherit; font-size: 12px; font-weight: 800; box-shadow: 0 10px 22px color-mix(in srgb, var(--auth-accent) 28%, transparent); cursor: default; }
.ppd-auth-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 13px; color: #9aa3b2; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ppd-auth-divider::before, .ppd-auth-divider::after { content: ""; height: 1px; flex: 1; background: #e8eaf0; }
.ppd-auth-social { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ppd-auth-social button { min-height: 39px; border: 1px solid #e1e5ed; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 9px; background:var(--pp-surface,#fff); color: #30384a; font: inherit; font-size: 10.5px; font-weight: 750; }
.ppd-auth-social button i { font-size: 13px; }
.ppd-auth-social.is-icons { grid-template-columns: repeat(auto-fit,minmax(46px,1fr)); }
.ppd-auth-social.is-icons button { min-width: 0; }
.ppd-auth-social.is-icons button span:empty { display: none; }
.ppd-auth-signup { margin-top: 20px; color: #7a8499; text-align: center; font-size: 10.5px; }
.ppd-auth-security { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 6px; color: #9aa3b2; font-size: 9px; }
.ppd-auth-security i { color: #6ca28f; }
.ppd-auth-glow { position: absolute; z-index: 0; width: 380px; height: 380px; border-radius: 50%; filter: blur(20px); opacity: .28; pointer-events: none; }
.ppd-auth-orbit { position: absolute; z-index: -1; width: 430px; height: 430px; right: -120px; top: 80px; border: 1px solid #ffffff14; border-radius: 50%; }
.ppd-auth-orbit::before, .ppd-auth-orbit::after { content: ""; position: absolute; inset: 55px; border: 1px solid #ffffff12; border-radius: inherit; }
.ppd-auth-orbit::after { inset: 118px; }
.ppd-auth-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a99cff; box-shadow: 0 0 20px #a99cff; }
.ppd-auth-orbit i:nth-child(1) { top: 42px; left: 80px; }
.ppd-auth-orbit i:nth-child(2) { right: 36px; top: 210px; }
.ppd-auth-orbit i:nth-child(3) { bottom: 42px; left: 170px; }

/* Aurora Split */
.ppd-auth-experience.is-aurora { background: #11152d; }
.ppd-auth-experience.is-aurora .ppd-auth-showcase { background: radial-gradient(circle at 15% 20%,#312b6a 0,transparent 38%),linear-gradient(145deg,#11152d,#171b3b); }
.ppd-auth-experience.is-aurora .glow-a { left: -150px; bottom: -170px; background: #635bff; }
.ppd-auth-experience.is-aurora .glow-b { left: 38%; top: -230px; background: #d946ef; }

/* Glass Halo */
.ppd-auth-experience.is-halo { grid-template-columns: 1fr; place-items: center; background: radial-gradient(circle at 12% 16%,#8b5cf6 0,transparent 31%),radial-gradient(circle at 88% 78%,#2563eb 0,transparent 32%),#100b2d; }
.ppd-auth-experience.is-halo .ppd-auth-showcase { position: absolute; inset: 0; padding: 42px 50px; }
.ppd-auth-experience.is-halo .ppd-auth-showcase > .ppd-auth-brand { display: none; }
.ppd-auth-experience.is-halo .ppd-auth-copy, .ppd-auth-experience.is-halo blockquote { display: none; }
.ppd-auth-experience.is-halo .ppd-auth-card-zone { z-index: 3; width: 100%; padding: 58px 24px; background: transparent; }
.ppd-auth-experience.is-halo .ppd-auth-card { width: min(100%,410px); border-color: #ffffff70; background: rgba(255,255,255,.91); box-shadow: 0 35px 100px #05021666; backdrop-filter: blur(28px); }
.ppd-auth-experience.is-halo .ppd-auth-card > .ppd-auth-brand { display: flex; }
.ppd-auth-experience.is-halo .ppd-auth-card > .ppd-auth-brand small { color: #667085; }
.ppd-auth-experience.is-halo .glow-a { left: 10%; bottom: -180px; background: #c026d3; }
.ppd-auth-experience.is-halo .glow-b { right: 6%; top: -180px; background: #38bdf8; }
.ppd-auth-experience.is-halo .ppd-auth-orbit { width: 560px; height: 560px; right: -80px; top: 40px; opacity: .75; }

/* Executive */
.ppd-auth-experience.is-executive { grid-template-columns: minmax(330px,.82fr) minmax(460px,1.18fr); background: #eef3f1; }
.ppd-auth-experience.is-executive .ppd-auth-showcase { color: #17332e; background: linear-gradient(145deg,#e2ece8,#f3f7f5); border-right: 1px solid #d7e2de; }
.ppd-auth-experience.is-executive .ppd-auth-copy > small { color: var(--auth-accent); }
.ppd-auth-experience.is-executive .ppd-auth-copy h1 { font-family: Georgia,serif; font-size: clamp(34px,3.7vw,52px); font-weight: 500; letter-spacing: -.045em; }
.ppd-auth-experience.is-executive .ppd-auth-copy p { color: #5c746e; }
.ppd-auth-experience.is-executive .ppd-auth-showcase blockquote { border-color: #bfd0ca; background: #ffffff70; color: #2c4c45; }
.ppd-auth-experience.is-executive .ppd-auth-showcase blockquote footer { color: #6b827c; }
.ppd-auth-experience.is-executive .ppd-auth-card-zone { background:var(--pp-surface,#fff); }
.ppd-auth-experience.is-executive .ppd-auth-card { border: 0; box-shadow: none; }
.ppd-auth-experience.is-executive .ppd-auth-card > .ppd-auth-brand { display: flex; }
.ppd-auth-experience.is-executive .ppd-auth-card > .ppd-auth-brand small { color: #667085; }
.ppd-auth-experience.is-executive .ppd-auth-orbit { border-color: #0f766e12; }
.ppd-auth-experience.is-executive .ppd-auth-orbit::before, .ppd-auth-experience.is-executive .ppd-auth-orbit::after { border-color: #0f766e10; }

/* Verdant Glass — a scenic, photo-free landscape built from CSS layers. */
.ppd-auth-experience.is-verdant {
    --auth-accent: #38c96b;
    grid-template-columns: 1fr; place-items: center;
    background:
        radial-gradient(105% 58% at -2% 79%,#254b31 0 39%,transparent 39.5%),
        radial-gradient(98% 58% at 104% 73%,#78a54b 0 41%,transparent 41.5%),
        radial-gradient(80% 30% at 48% 92%,#426e36 0 46%,transparent 47%),
        linear-gradient(180deg,#77989a 0%,#b8ad87 38%,#d9bd7c 47%,#86a957 62%,#294d31 100%);
}
.ppd-auth-experience.is-verdant::before,
.ppd-auth-experience.is-verdant::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: -6%; right: -6%; bottom: -17%; height: 47%;
    border-radius: 50% 48% 0 0 / 56% 55% 0 0;
    background: linear-gradient(145deg,#315c39,#76a142 55%,#2c5535);
    transform: rotate(3deg); filter: drop-shadow(0 -12px 24px #1737252e);
}
.ppd-auth-experience.is-verdant::after {
    left: 42%; right: -18%; bottom: -22%; height: 54%;
    background: linear-gradient(155deg,#91b95c,#4f7d3c 56%,#244a31);
    transform: rotate(-8deg);
}
.ppd-auth-experience.is-verdant .ppd-auth-showcase {
    position: absolute; inset: 0; padding: 0; z-index: 1; background: transparent;
}
.ppd-auth-experience.is-verdant .ppd-auth-showcase > .ppd-auth-brand,
.ppd-auth-experience.is-verdant .ppd-auth-copy,
.ppd-auth-experience.is-verdant .ppd-auth-showcase blockquote,
.ppd-auth-experience.is-verdant .ppd-auth-glow,
.ppd-auth-experience.is-verdant .ppd-auth-orbit { display: none; }
.ppd-auth-experience.is-verdant .ppd-auth-card-zone {
    z-index: 3; width: 100%; min-height: 620px; padding: 46px 24px; background: transparent;
}
.ppd-auth-experience.is-verdant .ppd-auth-card {
    width: min(100%,430px); color:var(--pp-primary-text,#fff);
    border: 1.5px solid #ffffffb3; border-radius: 28px;
    background: linear-gradient(145deg,rgba(255,255,255,.20),rgba(12,35,27,.42));
    box-shadow: 0 28px 80px #10271e66, inset 0 1px 0 #ffffff45;
    backdrop-filter: blur(24px) saturate(125%);
}
.ppd-auth-experience.is-verdant .ppd-auth-card > .ppd-auth-brand { display: none; }
.ppd-auth-experience.is-verdant .ppd-auth-heading h2,
.ppd-auth-experience.is-verdant .ppd-auth-fields > label { color:var(--pp-primary-text,#fff); text-shadow: 0 1px 14px #0d2c20a8; }
.ppd-auth-experience.is-verdant .ppd-auth-heading p,
.ppd-auth-experience.is-verdant .ppd-auth-options,
.ppd-auth-experience.is-verdant .ppd-auth-signup,
.ppd-auth-experience.is-verdant .ppd-auth-security,
.ppd-auth-experience.is-verdant .ppd-auth-divider { color: #f5fff7d9; }
.ppd-auth-experience.is-verdant a { color:var(--pp-primary-text,#fff); text-decoration: underline; text-underline-offset: 2px; }
.ppd-auth-experience.is-verdant .ppd-auth-fields input {
    border-color: #ffffffa6; background: rgba(15,42,31,.23); color:var(--pp-primary-text,#fff);
    box-shadow: inset 0 1px 0 #ffffff1f;
}
.ppd-auth-experience.is-verdant .ppd-auth-fields input::placeholder,
.ppd-auth-experience.is-verdant .ppd-auth-fields label i { color: #f5fff7bd; }
.ppd-auth-experience.is-verdant .ppd-auth-submit {
    background: linear-gradient(100deg,#bfd600,#22bc67);
    box-shadow: 0 14px 30px #163b2570; text-shadow: 0 1px 8px #17452680;
}
.ppd-auth-experience.is-verdant .ppd-auth-divider::before,
.ppd-auth-experience.is-verdant .ppd-auth-divider::after { background: #ffffff50; }
.ppd-auth-experience.is-verdant .ppd-auth-social button {
    border-color: #ffffff82; background: rgba(255,255,255,.15); color:var(--pp-primary-text,#fff);
}

/* Device switcher drives responsive previews even inside a wide desktop browser. */
.ppd-canvas.ppd-device-tablet .ppd-auth-experience { grid-template-columns: minmax(0,.85fr) minmax(390px,1.15fr); }
.ppd-canvas.ppd-device-tablet .ppd-auth-experience.is-verdant { grid-template-columns: 1fr; }
.ppd-canvas.ppd-device-tablet .ppd-auth-showcase { padding: 40px 30px; }
.ppd-canvas.ppd-device-tablet .ppd-auth-copy h1 { font-size: 38px; }
.ppd-canvas.ppd-device-tablet .ppd-auth-card-zone { padding: 32px 24px; }
.ppd-canvas.ppd-device-tablet .ppd-auth-card { padding: 30px; }
.ppd-canvas.ppd-device-mobile .ppd-auth-experience { min-height: 660px; display: block; }
.ppd-canvas.ppd-device-mobile .ppd-auth-showcase { display: none; }
.ppd-canvas.ppd-device-mobile .ppd-auth-card-zone { min-height: 660px; padding: 26px 17px; background: var(--auth-bg); }
.ppd-canvas.ppd-device-mobile .ppd-auth-card { padding: 28px 22px; border-radius: 19px; }
.ppd-canvas.ppd-device-mobile .ppd-auth-card > .ppd-auth-brand { display: flex; }
.ppd-canvas.ppd-device-mobile .ppd-auth-card > .ppd-auth-brand small { color: #667085; }
.ppd-canvas.ppd-device-mobile .ppd-auth-heading h2 { font-size: 26px; }
.ppd-canvas.ppd-device-mobile .ppd-auth-experience:is(.is-halo,.is-verdant) .ppd-auth-card-zone { background: transparent; }
.ppd-canvas.ppd-device-mobile .ppd-auth-experience.is-verdant .ppd-auth-card > .ppd-auth-brand { display: none; }

@media (max-width: 760px) {
    .ppd-auth-experience { min-height: 100vh; display: block; }
    .ppd-auth-showcase { display: none; }
    .ppd-auth-card-zone { min-height: 100vh; padding: 26px 17px; background: var(--auth-bg); }
    .ppd-auth-card { padding: 28px 22px; border-radius: 19px; }
    .ppd-auth-card > .ppd-auth-brand { display: flex; }
    .ppd-auth-experience.is-verdant .ppd-auth-card-zone { background: transparent; }
    .ppd-auth-experience.is-verdant .ppd-auth-card > .ppd-auth-brand { display: none; }
}
/* Inline grid-column control settings. Renders with the same layout primitives
   as the config modal (.ppd-field-row / .ppd-field-col / .ppd-fcm-flow /
   .ppd-fcm-checkrow / .ppd-rg) so every input type is usable in this narrow
   panel — no clipped labels, no 130px-capped inputs. */
.ppd-fc-settings { margin-top: 6px; padding: 9px 10px; border: 1px dashed var(--ppd-border); border-radius: 8px; background:var(--pp-surface-soft,#fbfdff); display: flex; flex-direction: column; gap: 4px; }
.ppd-fc-settings input, .ppd-fc-settings select, .ppd-fc-settings textarea { height: 28px; border: 1px solid var(--ppd-border); border-radius: 6px; padding: 0 7px; font-size: 12px; background:var(--pp-surface,#fff); width: 100%; min-width: 0; }
.ppd-fc-settings textarea { height: auto; padding: 5px 7px; }
.ppd-fc-settings .ppd-field-row { padding: 2px 0; }
.ppd-fc-settings .ppd-field-row.full { grid-template-columns: 1fr; gap: 3px; }
/* checkbox rows: box + wrapping label (long labels like "Multiple selection…") */
.ppd-fc-settings .ppd-fcm-checkrow { align-items: start; }
.ppd-fc-settings .ppd-fcm-checkrow > span { white-space: normal; line-height: 1.35; }
.ppd-fc-settings .ppd-fcm-checkrow input, .ppd-fc-settings .ppd-fcm-check-half input { width: 15px; height: 15px; flex: 0 0 auto; }
.ppd-fc-settings .ppd-fcm-flow .ppd-fcm-check-half { flex: 1 1 auto; max-width: 100%; min-width: 0; align-items: start; }
.ppd-fc-settings .ppd-fcm-check-half > span { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
/* segmented radiogroups wrap instead of clipping in the narrow panel */
.ppd-fc-settings .ppd-rg { flex-wrap: wrap; width: auto; }
.ppd-fc-settings .ppd-rg input { width: auto; height: auto; }
.ppd-fc-settings .ppd-fcm-sec:first-child { margin-top: 0; }

/* buttons + pagination share one footer line (matches the generated app) */
.ppd-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  grid-column: 1 / -1; /* inside the 12-col root grid: span the full row so buttons stay left, pagination right */ }
.ppd-bottom-row > [data-ppd-id] { margin: 0; }
.ppd-bottom-row .ppd-btn { white-space: nowrap; }

/* ══ Canvas ⇄ generated-app visual parity ══
   These rules re-skin the canvas approximations to match shell.css in the
   built app exactly, so what users design is what they get. */

/* toolbar: one row, three zones (matches .pp-toolbar) */
.ppd-list-toolbar.one-row { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.ppd-list-toolbar.one-row .ppd-tbzone.center { flex: 1; justify-content: center; }
.ppd-list-toolbar.one-row .ppd-tbzone.right { margin-left: auto; justify-content: flex-end; }
.ppd-tb-group { display: inline-flex; align-items: center; gap: 7px; }

/* WYSIWYG responsive: the canvas toolbar responds to its OWN width (container
   query, not viewport) so the device preview mirrors the generated app — desktop
   one row; when the toolbar is narrow (tablet/mobile preview, or a small canvas)
   it lays out exactly two rows: row 1 = primary actions + search, row 2 = view
   switch + secondary ACTIONS (icon-only, count hidden), never a messy wrap. */
.ppd-node.ppd-type-list-toolbar { container-type: inline-size; }
@container (max-width: 980px) {
  .ppd-list-toolbar.one-row { gap: 8px; row-gap: 8px; }
  .ppd-list-toolbar.one-row .ppd-tbzone.left { order: 0; flex: 0 0 auto; }
  .ppd-list-toolbar.one-row .ppd-tbzone.center { order: 1; flex: 1 1 0; min-width: 150px; justify-content: flex-start; flex-wrap: nowrap; }
  .ppd-list-toolbar.one-row .ppd-tbzone.right { order: 2; flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  /* let the search shrink so the Filter control stays on row 1 */
  .ppd-list-toolbar.one-row .ppd-tbzone.center .ppd-tb-search { flex: 1 1 0; min-width: 0; }
  .ppd-list-toolbar.one-row .ppd-tbzone.center .ppd-tb-search input { min-width: 0; width: 100%; }
  /* row-2 actions collapse to icons; the record count → compact "👁 1–20 / 204" */
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-dd > span:not(.ppd-tb-menu),
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-dd .ppd-caret,
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-pagesize .lbl,
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-info .ppd-ri-full { display: none; }
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-info .ppd-ri-eye,
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-info .ppd-ri-short { display: inline; }
  .ppd-list-toolbar.one-row .ppd-tbzone.right .ppd-tb-dd { gap: 4px; }
}
/* Narrow preview (large-phone / small canvas): also collapse the row-1 dropdown
   labels (Views · Filter) to icons so the primary row + search stay one line and
   the toolbar is exactly two rows. Add New + the search input keep their text. */
@container (max-width: 720px) {
  .ppd-list-toolbar.one-row .ppd-tbzone.left .ppd-tb-dd > span:not(.ppd-tb-menu),
  .ppd-list-toolbar.one-row .ppd-tbzone.left .ppd-tb-dd .ppd-caret,
  .ppd-list-toolbar.one-row .ppd-tbzone.center .ppd-tb-dd > span:not(.ppd-tb-menu),
  .ppd-list-toolbar.one-row .ppd-tbzone.center .ppd-tb-dd .ppd-caret { display: none; }
  .ppd-list-toolbar.one-row .ppd-tbzone.left .ppd-tb-dd,
  .ppd-list-toolbar.one-row .ppd-tbzone.center .ppd-tb-dd { gap: 0; }
}

/* toolbar buttons + dropdowns: match .ppd-grid-toolbar-btn in the app */
.ppd-tb-btn, .ppd-tb-dd, .ppd-tb-placeholder {
  background: var(--ppd-surface, #fff); color: var(--ppd-text, #334155);
  border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; }
.ppd-tb-btn:hover, .ppd-tb-dd:hover { border-color: var(--ppd-primary, #2563eb);
  color: var(--ppd-primary, #2563eb); background: var(--ppd-primary-soft, #eff6ff); }
.ppd-tb-search { background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0);
  border-radius: 8px; padding: 6px 10px; }

/* grid header band: color-mix primary 10% like the generated thead */
.ppd-grid thead th { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 10%, var(--ppd-surface, #fff));
  color: var(--ppd-text, #0f172a); font-weight: 700; font-size: 12.5px;
  text-transform: none; letter-spacing: normal;
  border-bottom: 2px solid color-mix(in srgb, var(--ppd-primary, #2563eb) 35%, var(--ppd-border, #e2e8f0)); }

/* aggregate row band: primary 7% + primary value, like .ppd-grid-foot */
.ppd-grid td.ppd-foot-cell { background: color-mix(in srgb, var(--ppd-primary, #2563eb) 7%, var(--ppd-surface, #fff));
  border-top: 2px solid color-mix(in srgb, var(--ppd-primary, #2563eb) 35%, var(--ppd-border, #e2e8f0)); }
.ppd-agg { color: var(--ppd-primary, #2563eb); font-weight: 700; text-transform: none; letter-spacing: normal; }

/* selection bar: flat primary-soft like .pp-selbar */
.ppd-selbar { background: var(--ppd-primary-soft, #eff6ff); border: 1px solid var(--ppd-border, #e2e8f0);
  border-radius: 8px; }

/* pagination pills: 36px, radius 10, active = primary (matches .pp-pg) */
.ppd-pg { min-width: 36px; height: 36px; border-radius: 10px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .5rem;
  border: 1px solid var(--ppd-border, #e2e8f0); background: var(--ppd-surface, #fff);
  color: var(--ppd-text, #0f172a); }
.ppd-pg:hover { border-color: var(--ppd-primary, #2563eb); color: var(--ppd-primary, #2563eb); }
.ppd-pg.active { background: var(--ppd-primary, #2563eb); border-color: var(--ppd-primary, #2563eb); color:var(--pp-primary-text,#fff); }

/* ============ account_profile component (canvas) ============ */
.ppd-profile { font-family: inherit; color: var(--ppd-text, #0f172a); }
.ppd-prof-avatar { width: 64px; height: 64px; display: grid; place-items: center; color:var(--pp-primary-text,#fff); font-weight: 800; font-size: 20px; flex-shrink: 0; }
.ppd-prof-avatar.is-circle { border-radius: 50%; }
.ppd-prof-avatar.is-rounded { border-radius: 16px; }
.ppd-prof-role { display: inline-block; background: color-mix(in srgb, var(--prof-accent, #2563eb) 12%, #fff); color: var(--prof-accent, #2563eb); border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 800; }
.ppd-prof-id { display: flex; align-items: center; gap: 10px; }
.ppd-prof-id strong { font-size: 16px; }
.ppd-prof-head h2 { margin: 14px 0 2px; font-size: 20px; letter-spacing: -.02em; }
.ppd-prof-head p { margin: 0 0 14px; color: var(--ppd-muted, #64748b); font-size: 12.5px; }
.ppd-prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ppd-prof-row { border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 10px; padding: 8px 11px; background: var(--ppd-surface, #fff); }
.ppd-prof-row span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ppd-muted, #94a3b8); font-weight: 700; }
.ppd-prof-row strong { font-size: 13px; }
.ppd-prof-field { display: grid; gap: 5px; font-size: 11.5px; font-weight: 700; margin-bottom: 10px; }
.ppd-prof-field input { height: 38px; border: 1px solid var(--ppd-border, #dfe3ec); border-radius: 9px; padding: 0 12px; font: inherit; background: var(--ppd-surface, #fff); }
.ppd-prof-save { border: 0; border-radius: 9px; height: 38px; padding: 0 18px; color:var(--pp-primary-text,#fff); font-weight: 750; cursor: pointer; }
.ppd-prof-links { display: flex; gap: 14px; margin-top: 12px; }
.ppd-prof-link { display: inline-flex; align-items: center; gap: 6px; color: var(--prof-accent, #2563eb); font-size: 12px; font-weight: 700; text-decoration: none; }
.ppd-prof-link.is-muted { color: var(--ppd-muted, #64748b); }
/* card layout */
.ppd-profile.is-card { display: grid; place-items: start center; padding: 24px 0; }
.ppd-profile.is-card .ppd-prof-card { width: min(100%, 520px); background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 18px; padding: 26px; box-shadow:var(--pp-shadow-sm,0 14px 40px rgba(15,23,42,.07)); }
.ppd-profile.is-card .ppd-prof-card > .ppd-prof-avatar { margin-bottom: 12px; }
/* cover layout */
.ppd-profile.is-cover .ppd-prof-cover { height: 110px; border-radius: 16px 16px 0 0; }
.ppd-profile.is-cover .ppd-prof-cover-body { background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-top: 0; border-radius: 0 0 16px 16px; padding: 0 26px 24px; }
.ppd-profile.is-cover .ppd-prof-avatar { margin-top: -32px; border: 4px solid var(--ppd-surface, #fff); margin-bottom: 8px; }
/* split layout */
.ppd-profile.is-split { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.ppd-profile.is-split .ppd-prof-side { background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 16px; padding: 22px; display: grid; justify-items: center; text-align: center; gap: 8px; }
.ppd-profile.is-split .ppd-prof-side .ppd-prof-links { flex-direction: column; gap: 8px; align-items: center; }
.ppd-profile.is-split .ppd-prof-main { background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 16px; padding: 22px 26px; }
/* verdant layout — CSS-generated landscape keeps the saved design self-contained */
.ppd-profile.is-verdant {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: clamp(540px, 72vh, 760px); padding: clamp(22px, 5vw, 64px);
  border-radius: 22px; color:var(--pp-primary-text,#fff);
  background:
    radial-gradient(ellipse at 72% 103%, #77ad26 0 18%, transparent 18.4%),
    radial-gradient(ellipse at 25% 110%, #91bf31 0 26%, transparent 26.4%),
    linear-gradient(160deg, transparent 52%, #3b731f 52.3% 67%, #244c22 67.4% 100%),
    linear-gradient(180deg, #a9ced2 0%, #eed49f 43%, #79945f 64%, #284c2a 100%);
}
.ppd-profile.is-verdant::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background:
    radial-gradient(ellipse at 6% 60%, rgba(22,51,48,.8) 0 10%, transparent 10.5%),
    linear-gradient(115deg, transparent 0 56%, rgba(255,230,153,.18) 56.2% 57%, transparent 57.2%);
}
.ppd-profile.is-verdant .ppd-prof-card {
  width: min(100%, 580px); padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.58); border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(11,38,28,.34));
  box-shadow: 0 28px 70px rgba(8,25,18,.32), inset 0 1px rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(22px) saturate(125%); backdrop-filter: blur(22px) saturate(125%);
}
.ppd-profile.is-verdant .ppd-prof-head p,
.ppd-profile.is-verdant .ppd-prof-row span { color: rgba(255,255,255,.74); }
.ppd-profile.is-verdant .ppd-prof-row,
.ppd-profile.is-verdant .ppd-prof-field input {
  color:var(--pp-primary-text,#fff); background: rgba(7,31,24,.23); border-color: rgba(255,255,255,.42);
}
.ppd-profile.is-verdant .ppd-prof-field input::placeholder { color: rgba(255,255,255,.62); }
.ppd-profile.is-verdant .ppd-prof-role { background: rgba(255,255,255,.18); color:var(--pp-primary-text,#fff); }
.ppd-profile.is-verdant .ppd-prof-save {
  background: linear-gradient(100deg, #c2d508, #27bf68); box-shadow:var(--pp-shadow-lg,0 10px 26px rgba(42,178,82,.28));
}
.ppd-profile.is-verdant .ppd-prof-link { color: #eaffae; }
.ppd-profile.is-verdant .ppd-prof-link.is-muted { color: rgba(255,255,255,.75); }
@media (max-width: 720px) {
  .ppd-profile.is-split { grid-template-columns: 1fr; }
  .ppd-profile.is-verdant { min-height: 560px; padding: 18px; border-radius: 16px; }
  .ppd-profile.is-verdant .ppd-prof-card { padding: 24px 20px; border-radius: 22px; }
}

/* gallery preview chips for profile templates */
.ppd-login-template-preview.is-card { background: linear-gradient(180deg,#eef2f7,var(--pp-surface,#fff)); }
.ppd-login-template-preview.is-card::after { width: 20px; height: 24px; background:var(--pp-surface,#fff); border: 1px solid #d6dee9; border-radius: 4px; box-shadow: 0 2px 6px #0f172a1c; }
.ppd-login-template-preview.is-cover { background: linear-gradient(180deg,#312e81 0 52%,var(--pp-surface,#fff) 52%); }
.ppd-login-template-preview.is-cover::after { width: 12px; height: 12px; border-radius: 50%; background:var(--pp-surface,#fff); border: 2px solid #c7d2fe; top: 12px; }
.ppd-login-template-preview.is-split { background: linear-gradient(90deg,#e2ece8 0 36%,var(--pp-surface,#fff) 36%); }
.ppd-login-template-preview.is-split::after { width: 16px; height: 20px; right: 7px; background:var(--pp-surface,#fff); border: 1px solid #cfdcd7; border-radius: 3px; }
.ppd-login-template-preview.is-card i, .ppd-login-template-preview.is-split i { color:var(--pp-text,#475569); }

/* ============ password_form component (canvas) ============ */
.ppd-pwdform { color: var(--ppd-text, #0f172a); }
.ppd-pwd-shield { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin-bottom: 10px; }
.ppd-pwd-head h2 { margin: 0 0 3px; font-size: 20px; letter-spacing: -.02em; }
.ppd-pwd-head p { margin: 0 0 16px; color: var(--ppd-muted, #64748b); font-size: 12.5px; }
.ppd-pwd-field { display: grid; gap: 5px; font-size: 11.5px; font-weight: 700; margin-bottom: 11px; }
.ppd-pwd-field > div { position: relative; display: flex; align-items: center; }
.ppd-pwd-field > div > i:first-child { position: absolute; left: 11px; color: var(--ppd-muted, #94a3b8); font-size: 13px; }
.ppd-pwd-field input { width: 100%; height: 40px; border: 1px solid var(--ppd-border, #dfe3ec); border-radius: 10px; padding: 0 34px; font: inherit; background: var(--ppd-surface, #fff); }
.ppd-pwd-field .ppd-auth-eye { position: absolute; right: 11px; color: var(--ppd-muted, #94a3b8); cursor: pointer; }
.ppd-pwd-strength { display: flex; align-items: center; gap: 5px; margin: -3px 0 10px; }
.ppd-pwd-strength i { flex: 1; height: 5px; border-radius: 99px; background: var(--ppd-border, #e2e8f0); }
.ppd-pwd-strength i.on { background: var(--pwd-accent, #2563eb); }
.ppd-pwd-strength small { color: var(--ppd-muted, #64748b); font-size: 10.5px; font-weight: 700; min-width: 40px; text-align: right; }
.ppd-pwd-reqs { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.ppd-pwd-reqs li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ppd-muted, #64748b); }
.ppd-pwd-reqs li i { font-size: 12px; }
.ppd-pwd-reqs li.ok { color: var(--pwd-accent, #16a34a); }
.ppd-pwd-save { display: block; width: 100%; border: 0; border-radius: 10px; height: 42px; color:var(--pp-primary-text,#fff); font-weight: 750; cursor: pointer; margin-top: 4px; }
.ppd-pwd-back { display: block; margin-top: 12px; text-align: center; color: var(--pwd-accent, #2563eb); font-size: 12px; font-weight: 700; text-decoration: none; }
.ppd-pwdform.is-guard { display: grid; place-items: start center; padding: 24px 0; }
.ppd-pwdform.is-guard .ppd-pwd-card { width: min(100%, 440px); background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 18px; padding: 28px; box-shadow:var(--pp-shadow-sm,0 14px 40px rgba(15,23,42,.07)); }
.ppd-pwdform.is-coach { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.ppd-pwdform.is-coach .ppd-pwd-tips { background: color-mix(in srgb, var(--pwd-accent, #2563eb) 6%, var(--ppd-surface, #fff)); border: 1px solid color-mix(in srgb, var(--pwd-accent, #2563eb) 18%, transparent); border-radius: 16px; padding: 22px; }
.ppd-pwdform.is-coach .ppd-pwd-tips strong { display: block; margin-bottom: 6px; font-size: 14px; }
.ppd-pwdform.is-coach .ppd-pwd-tips p { margin: 0; color: var(--ppd-muted, #64748b); font-size: 12px; line-height: 1.6; }
.ppd-pwdform.is-coach .ppd-pwd-main { background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 16px; padding: 24px 26px; max-width: 560px; }
.ppd-pwdform.is-compact .ppd-pwd-card { max-width: 480px; background: var(--ppd-surface, #fff); border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 14px; padding: 22px; }
.ppd-pwdform.is-verdant {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: clamp(540px, 72vh, 760px); padding: clamp(22px, 5vw, 64px);
  border-radius: 22px; color:var(--pp-primary-text,#fff);
  background:
    radial-gradient(ellipse at 72% 103%, #77ad26 0 18%, transparent 18.4%),
    radial-gradient(ellipse at 25% 110%, #91bf31 0 26%, transparent 26.4%),
    linear-gradient(160deg, transparent 52%, #3b731f 52.3% 67%, #244c22 67.4% 100%),
    linear-gradient(180deg, #a9ced2 0%, #eed49f 43%, #79945f 64%, #284c2a 100%);
}
.ppd-pwdform.is-verdant::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: radial-gradient(ellipse at 6% 60%, rgba(22,51,48,.8) 0 10%, transparent 10.5%);
}
.ppd-pwdform.is-verdant .ppd-pwd-card {
  width: min(100%, 500px); padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.58); border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(11,38,28,.34));
  box-shadow: 0 28px 70px rgba(8,25,18,.32), inset 0 1px rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(22px) saturate(125%); backdrop-filter: blur(22px) saturate(125%);
}
.ppd-pwdform.is-verdant .ppd-pwd-head p,
.ppd-pwdform.is-verdant .ppd-pwd-reqs li,
.ppd-pwdform.is-verdant .ppd-pwd-strength small { color: rgba(255,255,255,.76); }
.ppd-pwdform.is-verdant .ppd-pwd-field input {
  color:var(--pp-primary-text,#fff); background: rgba(7,31,24,.23); border-color: rgba(255,255,255,.42);
}
.ppd-pwdform.is-verdant .ppd-pwd-field input::placeholder { color: rgba(255,255,255,.62); }
.ppd-pwdform.is-verdant .ppd-pwd-field > div > i:first-child,
.ppd-pwdform.is-verdant .ppd-auth-eye { color: rgba(255,255,255,.72); }
.ppd-pwdform.is-verdant .ppd-pwd-save {
  background: linear-gradient(100deg, #c2d508, #27bf68); box-shadow:var(--pp-shadow-lg,0 10px 26px rgba(42,178,82,.28));
}
.ppd-pwdform.is-verdant .ppd-pwd-back { color: #eaffae; }
@media (max-width: 720px) {
  .ppd-pwdform.is-coach { grid-template-columns: 1fr; }
  .ppd-pwdform.is-verdant { min-height: 560px; padding: 18px; border-radius: 16px; }
  .ppd-pwdform.is-verdant .ppd-pwd-card { padding: 24px 20px; border-radius: 22px; }
}
.ppd-auth-help { margin: -4px 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.55; color: var(--ppd-muted, #64748b); background: color-mix(in srgb, var(--auth-accent, #6d5dfc) 6%, #fff); border: 1px solid color-mix(in srgb, var(--auth-accent, #6d5dfc) 16%, transparent); }
.ppd-auth-brand-img { height: 40px; max-width: 150px; object-fit: contain; border-radius: 8px; }
/* reset-password canvas strength bar (auth_form) */
.ppd-auth-strength { display: flex; gap: 5px; margin: 2px 0 10px; }
.ppd-auth-strength i { flex: 1; height: 5px; border-radius: 99px; background: #e5e7eb; }
.ppd-auth-strength i:nth-child(-n+2) { background: var(--auth-accent, #6d5dfc); }

/* gallery preview chips for change-password templates */
.ppd-login-template-preview.is-guard { background: linear-gradient(180deg,#eef4ff,var(--pp-surface,#fff)); }
.ppd-login-template-preview.is-guard::after { width: 14px; height: 14px; border-radius: 5px; background: #2563eb; opacity: .85; }
.ppd-login-template-preview.is-guard i { color:var(--pp-primary,#2563eb); }
.ppd-login-template-preview.is-coach { background: linear-gradient(90deg,#dbeafe 0 38%,var(--pp-surface,#fff) 38%); }
.ppd-login-template-preview.is-coach::after { width: 16px; height: 20px; right: 7px; background:var(--pp-surface,#fff); border:1px solid var(--pp-border,#cbd5e1); border-radius: 3px; }
.ppd-login-template-preview.is-coach i { color:var(--pp-primary-hover,#1d4ed8); }
.ppd-login-template-preview.is-compact { background:var(--pp-surface-soft,#f8fafc); border:1px solid var(--pp-border,#e2e8f0); }
.ppd-login-template-preview.is-compact::after { width: 26px; height: 8px; border-radius: 3px; background:var(--pp-border,#e2e8f0); }
.ppd-login-template-preview.is-compact i { color:var(--pp-text,#475569); }
/* ===== styled choice controls (Checkbox / RadioGroup / Switch plugins) ===== */
.pp-ctl { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none;
  font-size: .9rem; font-weight: 600; color: var(--pp-text, #0f172a); position: relative; }
.pp-ctl input[type=checkbox], .pp-ctl input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-ctl.pp-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* colors → --ctl accent */
.pp-c-primary { --ctl: var(--pp-primary, #2563eb); }
.pp-c-info { --ctl: #0ea5e9; }
.pp-c-success { --ctl: var(--pp-success, #16a34a); }
.pp-c-danger { --ctl: var(--pp-danger, #dc2626); }
.pp-c-secondary { --ctl: #8b5cf6; }
.pp-c-warning { --ctl: var(--pp-warning, #d97706); }
.pp-c-dark { --ctl: #334155; }
/* sizes */
.pp-sz-sm { --ctl-box: 16px; --sw-h: 20px; --sw-w: 36px; font-size: .8rem; }
.pp-sz-md { --ctl-box: 20px; --sw-h: 26px; --sw-w: 48px; }
.pp-sz-lg { --ctl-box: 25px; --sw-h: 32px; --sw-w: 62px; font-size: 1rem; }
/* checkbox */
.pp-checkbox .pp-ctl-box { width: var(--ctl-box); height: var(--ctl-box); border-radius: 27%;
  border: 1.5px solid var(--pp-border, #cbd5e1); background: var(--pp-surface, #fff);
  display: grid; place-items: center; transition: background .15s, border-color .15s; flex: 0 0 auto; }
.pp-checkbox .pp-ctl-box i { font-size: calc(var(--ctl-box) * .78); line-height: 1; color:var(--pp-primary-text,#fff);
  opacity: 0; transform: scale(.4); transition: opacity .12s, transform .15s; }
.pp-checkbox input:checked ~ .pp-ctl-box { background: var(--ctl); border-color: var(--ctl); }
.pp-checkbox input:checked ~ .pp-ctl-box i { opacity: 1; transform: none; }
.pp-checkbox input:focus-visible ~ .pp-ctl-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl) 25%, transparent); }
/* radio */
.pp-ctl-group { display: flex; gap: 1.05rem; flex-wrap: wrap; align-items: center; }
.pp-ctl-group.pp-stack { flex-direction: column; align-items: flex-start; gap: .5rem; }
.pp-radio .pp-ctl-box { width: var(--ctl-box); height: var(--ctl-box); border-radius: 50%;
  border: 1.5px solid var(--pp-border, #cbd5e1); background: var(--pp-surface, #fff);
  display: grid; place-items: center; transition: background .15s, border-color .15s; flex: 0 0 auto; }
.pp-radio .pp-ctl-box::after { content: ""; width: 38%; height: 38%; border-radius: 50%; background:var(--pp-surface,#fff);
  transform: scale(0); transition: transform .15s; }
.pp-radio input:checked ~ .pp-ctl-box { background: var(--ctl); border-color: var(--ctl); }
.pp-radio input:checked ~ .pp-ctl-box::after { transform: none; }
.pp-radio input:focus-visible ~ .pp-ctl-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl) 25%, transparent); }
/* switch (variants: classic / slim / text / icon / circle) */
.pp-switch .pp-sw { position: relative; width: var(--sw-w); height: var(--sw-h); border-radius: 999px;
  background: color-mix(in srgb, var(--pp-muted, #94a3b8) 38%, var(--pp-surface, #fff));
  transition: background .18s; flex: 0 0 auto; }
.pp-switch .pp-sw-thumb { position: absolute; top: 2px; left: 2px; width: calc(var(--sw-h) - 4px);
  height: calc(var(--sw-h) - 4px); border-radius: 50%; background:var(--pp-surface,#fff); display: grid; place-items: center;
  transition: left .18s; box-shadow:var(--pp-shadow-lg,0 1px 3px rgba(2, 6, 23, .35)); }
.pp-switch .pp-sw-thumb i { font-size: calc(var(--sw-h) * .48); line-height: 1; }
.pp-switch .pp-sw-thumb .ic-on { display: none; color: var(--ctl); }
.pp-switch .pp-sw-thumb .ic-off { display: block; color: var(--pp-muted, #94a3b8); }
.pp-switch input:checked ~ .pp-sw { background: var(--ctl); }
.pp-switch input:checked ~ .pp-sw .pp-sw-thumb { left: calc(100% - var(--sw-h) + 2px); }
.pp-switch input:checked ~ .pp-sw .ic-on { display: block; }
.pp-switch input:checked ~ .pp-sw .ic-off { display: none; }
.pp-switch input:focus-visible ~ .pp-sw { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl) 25%, transparent); }
.pp-sw-on, .pp-sw-off, .pp-sw-onic, .pp-sw-offic { display: none; }
/* slim: thin track, overhanging thumb */
.pp-v-slim .pp-sw { height: calc(var(--sw-h) * .38); width: calc(var(--sw-w) * .88); }
.pp-v-slim .pp-sw-thumb { top: 50%; transform: translateY(-50%); left: 0;
  width: calc(var(--sw-h) * .85); height: calc(var(--sw-h) * .85); }
.pp-v-slim input:checked ~ .pp-sw .pp-sw-thumb { left: calc(100% - var(--sw-h) * .85); }
.pp-v-slim .pp-sw-thumb i { display: none !important; }
/* text: ON/OFF inside the track */
.pp-v-text .pp-sw-on, .pp-v-text .pp-sw-off { display: block; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: calc(var(--sw-h) * .34); font-weight: 800; letter-spacing: .03em; transition: opacity .15s; }
.pp-v-text .pp-sw-on { left: 12%; color:var(--pp-primary-text,#fff); opacity: 0; }
.pp-v-text .pp-sw-off { right: 10%; color: var(--pp-muted, #64748b); opacity: 1; }
.pp-v-text input:checked ~ .pp-sw .pp-sw-on { opacity: 1; }
.pp-v-text input:checked ~ .pp-sw .pp-sw-off { opacity: 0; }
.pp-v-text .pp-sw-thumb i { display: none !important; }
/* icon: icons inside the track */
.pp-v-icon .pp-sw-onic, .pp-v-icon .pp-sw-offic { display: block; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: calc(var(--sw-h) * .45); line-height: 1; transition: opacity .15s; }
.pp-v-icon .pp-sw-onic { left: 9%; color:var(--pp-primary-text,#fff); opacity: 0; }
.pp-v-icon .pp-sw-offic { right: 9%; color: var(--pp-muted, #64748b); opacity: 1; }
.pp-v-icon input:checked ~ .pp-sw .pp-sw-onic { opacity: 1; }
.pp-v-icon input:checked ~ .pp-sw .pp-sw-offic { opacity: 0; }
.pp-v-icon .pp-sw-thumb i { display: none !important; }
/* circle: round icon button */
.pp-v-circle .pp-sw { width: calc(var(--sw-h) * 1.4); height: calc(var(--sw-h) * 1.4); border-radius: 50%;
  display: grid; place-items: center; }
.pp-v-circle .pp-sw-thumb { position: static; width: auto; height: auto; background: transparent; box-shadow: none; transform: none; }
.pp-v-circle .pp-sw-thumb i { display: none; font-size: calc(var(--sw-h) * .62); color:var(--pp-primary-text,#fff); }
.pp-v-circle .pp-sw-thumb .ic-off { display: block; color: color-mix(in srgb, var(--pp-text, #0f172a) 55%, transparent); }
.pp-v-circle input:checked ~ .pp-sw .pp-sw-thumb .ic-on { display: block; color:var(--pp-primary-text,#fff); }
.pp-v-circle input:checked ~ .pp-sw .pp-sw-thumb .ic-off { display: none; }
/* guard styled controls against the generic form-section label/span rules
   (.ppg-form-section label span { min-width:120px; color:… } would stretch
   the radio dot / checkbox box / switch track into ellipses) */
.ppg-form-section label.pp-ctl span, label.pp-ctl span, .pp-ctl span { min-width: 0; }
.ppg-form-section .pp-ctl .pp-ctl-txt, .pp-ctl .pp-ctl-txt { color: inherit; font-weight: 600; font-size: inherit; }
label.pp-ctl { gap: .55rem; margin-bottom: 0; }
.pp-ctl { margin: 0; }
/* plugin-setting hint tooltips in the properties panel */
.ppd-hint { margin-left: 5px; color:var(--pp-muted,#94a3b8); cursor: help; font-size: 11px; vertical-align: 1px; }
.ppd-hint:hover { color: var(--ppd-primary, #2563eb); }
.ppd-tip { cursor: help; color: var(--pp-muted,#94a3b8); font-size: 11px; }
.ppd-tip:hover, .ppd-tip:focus-visible { color: var(--ppd-primary, #2563eb); outline: none; }
/* Rapid, body-level property tooltip (instant — no native title delay, never clipped) */
.ppd-float-tip {
  /* Above EVERY overlay (config modal is 10060) so hints are never hidden. */
  position: fixed; z-index: 10200; display: none; max-width: 260px;
  background: var(--pp-tooltip-bg, #0f172a); color: var(--pp-tooltip-text, #f8fafc);
  font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none;
  padding: 7px 10px; border-radius: 8px; box-shadow: 0 10px 30px rgba(2,6,23,.45);
  border: 1px solid rgba(148,163,184,.18);
  pointer-events: none; white-space: normal; transition: opacity .08s ease;
}
/* live state label beside a switch (sideText = state) */
.pp-sw-side { font-size: .85em; font-weight: 650; }
.pp-sw-side .on { display: none; color: var(--ctl); }
.pp-sw-side .off { display: inline; color: var(--pp-muted, #64748b); }
.pp-ctl input:checked ~ .pp-sw-side .on { display: inline; }
.pp-ctl input:checked ~ .pp-sw-side .off { display: none; }
/* ===== Buttons / Badges / Dropdowns (styled Button + Dropdown plugins) ===== */
/* color accent → --bc / --bcf(g). Brand-ish 4 map to theme tokens; rest fixed. */
.pp-bc-primary { --bc: var(--pp-primary, #4361ee); --bcf: #fff; }
.pp-bc-info { --bc: #0ea5e9; --bcf: #fff; }
.pp-bc-success { --bc: var(--pp-success, #16a34a); --bcf: #fff; }
.pp-bc-warning { --bc: var(--pp-warning, #e0a82e); --bcf: #1f2937; }
.pp-bc-danger { --bc: var(--pp-danger, #ef4444); --bcf: #fff; }
.pp-bc-secondary { --bc: #7c5cfc; --bcf: #fff; }
.pp-bc-dark { --bc: #3b3f5c; --bcf: #fff; }
/* base button */
.pp-b2 { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid transparent; border-radius: 8px; font: inherit; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .12s, background .12s, color .12s, border-color .12s;
  padding: .5rem .95rem; font-size: .875rem; background: var(--bc, #4361ee); color: var(--bcf, #fff); }
.pp-b2:hover { filter: brightness(1.08); }
.pp-b2:active { filter: brightness(.94); }
.pp-b2:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc) 30%, transparent); }
/* variants */
.pp-b2.is-light { background: color-mix(in srgb, var(--bc) 16%, var(--pp-surface, #fff)); color: var(--bc); }
.pp-b2.is-light:hover { background: color-mix(in srgb, var(--bc) 24%, var(--pp-surface, #fff)); filter: none; }
.pp-b2.is-outline { background: transparent; color: var(--bc); border-color: var(--bc); }
.pp-b2.is-outline:hover { background: var(--bc); color: var(--bcf); filter: none; }
/* sizes */
.pp-bz-sm { padding: .3rem .65rem; font-size: .78rem; border-radius: 7px; }
.pp-bz-lg { padding: .7rem 1.4rem; font-size: 1rem; border-radius: 10px; }
/* shapes */
.pp-b2.is-rounded { border-radius: 999px; }
.pp-b2.is-square { padding: .5rem; aspect-ratio: 1; }
.pp-b2.is-square.pp-bz-sm { padding: .32rem; }
.pp-b2.is-square.pp-bz-lg { padding: .72rem; }
.pp-b2.is-circle { border-radius: 50%; padding: .5rem; aspect-ratio: 1; }
.pp-b2.is-circle.pp-bz-sm { padding: .32rem; }
.pp-b2.is-circle.pp-bz-lg { padding: .72rem; }
.pp-b2.is-block { display: flex; width: 100%; }
.pp-b2.is-disabled, .pp-b2:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; filter: none; }
.pp-b2 > i { font-size: 1.05em; line-height: 1; }
/* ---- badge (view display) ---- */
.pp-bdg { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent;
  border-radius: 7px; padding: .18rem .55rem; font-size: .78rem; font-weight: 700; line-height: 1.35;
  background: var(--bc, #4361ee); color: var(--bcf, #fff); text-decoration: none; white-space: nowrap; }
.pp-bdg.is-light { background: color-mix(in srgb, var(--bc) 16%, var(--pp-surface, #fff)); color: var(--bc); }
.pp-bdg.is-outline { background: transparent; color: var(--bc); border-color: var(--bc); }
.pp-bdg.is-rounded { border-radius: 999px; }
.pp-bdg.is-dot::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.pp-bdg.pp-bz-sm { padding: .1rem .45rem; font-size: .7rem; }
.pp-bdg.pp-bz-lg { padding: .28rem .7rem; font-size: .9rem; }
a.pp-bdg:hover { filter: brightness(1.06); }
/* ---- dropdown edit control (native select styled as button) ---- */
.pp-dd { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.pp-dd.is-block { display: flex; width: 100%; }
.pp-dd select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit;
  font: inherit; font-weight: inherit; cursor: pointer; outline: none; padding: 0; margin: 0;
  padding-right: 1.4rem; width: 100%; text-overflow: ellipsis; }
.pp-dd select option { color:var(--pp-text,#1f2937); background:var(--pp-surface,#fff); }
.pp-dd > i { position: absolute; right: .6rem; pointer-events: none; font-size: .8em; opacity: .85; }
.pp-dd.pp-bz-lg > i { right: .9rem; }
/* segmented button toggle (edit) */
.pp-seg { display: inline-flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; gap: 0; }
.pp-seg.is-block { display: flex; width: 100%; }
.pp-seg .pp-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: 0 0 auto;
  border: 1px solid var(--bc, #4361ee); background: transparent; color: var(--bc); font: inherit; font-weight: 600;
  padding: .45rem .9rem; font-size: .875rem; cursor: pointer; margin-left: -1px; transition: background .12s, color .12s; }
.pp-seg.is-block .pp-seg-btn { flex: 1; }
.pp-seg .pp-seg-btn:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.pp-seg .pp-seg-btn:last-child { border-radius: 0 8px 8px 0; }
.pp-seg.is-rounded .pp-seg-btn:first-child { border-radius: 999px 0 0 999px; }
.pp-seg.is-rounded .pp-seg-btn:last-child { border-radius: 0 999px 999px 0; }
.pp-seg .pp-seg-btn.is-on { background: var(--bc); color: var(--bcf); }
.pp-seg.pp-bz-sm .pp-seg-btn { padding: .3rem .65rem; font-size: .78rem; }
.pp-seg.pp-bz-lg .pp-seg-btn { padding: .7rem 1.3rem; font-size: 1rem; }
.pp-seg.is-disabled { opacity: .55; pointer-events: none; }
/* ===== field label styles: default / inline / float / input-group icons ===== */
/* pre/post icons (input groups) */
.pp-fld-wrap { position: relative; display: flex; align-items: center; }
.pp-fld-ic { position: absolute; display: flex; align-items: center; justify-content: center;
  color: var(--pp-muted, #94a3b8); pointer-events: none; z-index: 2; font-size: .95rem; }
.pp-fld-ic.pre { left: .7rem; }
.pp-fld-ic.post { right: .7rem; }
.pp-fld-wrap.has-pre .pp-input { padding-left: 2.2rem; }
.pp-fld-wrap.has-post .pp-input { padding-right: 2.2rem; }
/* legacy single <i> children (plugin-emitted) keep working */
.pp-fld-wrap > i:first-child { position: absolute; left: .7rem; color: var(--pp-muted, #94a3b8); font-size: .9rem; pointer-events: none; z-index: 2; }
.pp-fld-wrap > i:first-child ~ .pp-input { padding-left: 2.1rem; }
/* inline: label beside input */
.pp-fld.is-inline { display: grid; grid-template-columns: var(--lbl-w, minmax(90px, 32%)) 1fr; align-items: center; column-gap: var(--lbl-gap, .9rem); }
.pp-fld.is-inline > label { margin: 0; }
.pp-fld.is-inline .pp-field-help { grid-column: 2; }
@media (max-width: 575.98px) { .pp-fld.is-inline { grid-template-columns: 1fr; } .pp-fld.is-inline .pp-field-help { grid-column: 1; } }
/* float label — label sits inside the input, floats up on focus / when filled */
.pp-fld.is-float .pp-fld-wrap { position: relative; }
.pp-fld.is-float .pp-fld-wrap > label { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  margin: 0; color: var(--pp-muted, #94a3b8); font-weight: 500; pointer-events: none;
  transition: transform .14s ease, font-size .14s ease, color .14s ease, top .14s ease; transform-origin: left center;
  max-width: calc(100% - 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* shrink-wrap the text so the notch it cuts in the outline matches the label
     and the required mark doesn't sit far out (mirror of the generated app) */
  display: inline-flex; align-items: baseline; gap: .12rem; width: max-content; }
.pp-fld.is-float .pp-fld-wrap > label .pp-req { margin: 0; font-size: .85em; }
.pp-fld.is-float .pp-fld-wrap.has-pre > label { left: 2.2rem; }
.pp-fld.is-float .pp-input { padding-top: .55rem; }
/* floated position (focus OR has content — placeholder=" " makes this work) */
.pp-fld.is-float .pp-input:focus ~ label,
.pp-fld.is-float .pp-input:not(:placeholder-shown) ~ label { color: var(--pp-primary, #2563eb); }
/* Outline variant: label notches the top border */
.pp-fld.is-float-outline .pp-input { border: 1px solid var(--pp-border, #dfe3ec); border-radius: 10px; background: var(--pp-surface, #fff); }
.pp-fld.is-float-outline .pp-input:focus ~ label,
.pp-fld.is-float-outline .pp-input:not(:placeholder-shown) ~ label {
  top: 0; transform: translateY(-50%) scale(.82); background: var(--pp-surface, #fff); padding: 0 .3rem; left: .55rem; }
.pp-fld.is-float-outline .pp-fld-wrap.has-pre .pp-input:focus ~ label,
.pp-fld.is-float-outline .pp-fld-wrap.has-pre .pp-input:not(:placeholder-shown) ~ label { left: .55rem; }
/* Filled variant: tinted box, label shrinks to the top inside, bottom accent on focus */
.pp-fld.is-float-filled .pp-input { border: 0; border-bottom: 2px solid var(--pp-border, #dfe3ec);
  border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--pp-text, #0f172a) 6%, var(--pp-surface, #fff));
  padding-top: 1.15rem; padding-bottom: .35rem; }
.pp-fld.is-float-filled .pp-input:focus { border-bottom-color: var(--pp-primary, #2563eb); box-shadow: none; }
.pp-fld.is-float-filled .pp-fld-wrap > label { top: 50%; }
.pp-fld.is-float-filled .pp-input:focus ~ label,
.pp-fld.is-float-filled .pp-input:not(:placeholder-shown) ~ label { top: .5rem; transform: translateY(-50%) scale(.78); }
.pp-fld.is-float textarea.pp-input ~ label { top: 1.1rem; transform: none; }
.pp-fld.is-float textarea.pp-input:focus ~ label,
.pp-fld.is-float textarea.pp-input:not(:placeholder-shown) ~ label { top: 0; }
/* base field styles for canvas parity with the generated app (pp-fld/pp-input) */
.ppd-c-field .pp-fld, .pp-fld { grid-column: unset; min-width: 0; display: flex; flex-direction: column; gap: var(--lbl-gap, .32rem); margin: 0; }
/* Bootstrap's reboot sets `label { margin-bottom: .5rem }` (the console loads
   Bootstrap too) — it stacked on the flex gap and pushed labels ~8px off their
   control. The gap alone owns that spacing. */
.pp-fld > label { font-size: .8rem; font-weight: 650; color: var(--ppd-text, #0f172a); display: flex; align-items: center; gap: .3rem; margin: 0; }
.pp-fld .pp-req { color: var(--ppd-danger, #dc2626); font-weight: 800; margin-left: -.12rem; }
.pp-fld .pp-input { width: 100%; min-width: 0; background: var(--ppd-surface, #fff); color: var(--ppd-text, #0f172a);
  border: 1px solid var(--ppd-border, #dfe3ec); border-radius: 9px; padding: .5rem .7rem; font: inherit; font-size: .9rem; outline: none; }
.pp-fld textarea.pp-input { min-height: 68px; resize: vertical; }
.pp-fld .pp-field-help { color: var(--ppd-muted, #64748b); font-weight: 400; font-size: .74rem; }
.pp-fld .pp-checkline { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; }

.pp-fld-ic { color: var(--ppd-muted, #94a3b8); opacity: 1; }
/* foldable section indicator (canvas — body stays open for editing) */
.ppd-c-section .ppd-fold-ic { margin-left: auto; color: var(--ppd-muted, #94a3b8); font-size: 11px; }
.ppd-c-section.is-foldable > .h { cursor: default; }
/* section width spans + inner-component spans (canvas) */
.ppd-page-body { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.ppd-page-body > .ppd-node { grid-column: span 12; }
.ppd-children-zone.ppd-c-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.ppd-children-zone.ppd-c-grid > .ppd-node { grid-column: span 12; }
/* header height presets — compact, vertically centred. Bare text in a flex row
   with tall icon siblings can sit at the top; a wrapped title + explicit
   line-height fixes it robustly. */
.ppd-c-section > .h { display: flex; align-items: center; line-height: normal; }
.ppd-c-section > .h > * { align-self: center; }
.ppd-c-section > .h .ppd-sec-title { line-height: 1.25; }
.ppd-c-section > .h > i { line-height: 1; flex: 0 0 auto; }
.ppd-c-section > .h.hh-sm { padding: 4px 10px; font-size: .78rem; min-height: 28px; }
.ppd-c-section > .h.hh-md { padding: 7px 12px; font-size: .86rem; min-height: 34px; }
.ppd-c-section > .h.hh-lg { padding: 11px 14px; font-size: .98rem; min-height: 44px; }
.ppd-c-section > .h .ppd-fold-ic { font-size: 12px; }
/* modest empty drop area so empty/collapsed sections aren't bulky */
.ppd-c-section > .b.ppd-children-zone:empty { min-height: 40px; }
/* section content-area styling (bodyBg / bodyPadding via inline vars) */
.ppd-c-section > .b { background: var(--sec-body-bg, transparent); }
/* colour reset button in the properties panel */
.ppd-color-reset { flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 6px;
  background: var(--ppd-surface, #fff); color: var(--ppd-muted, #94a3b8); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.ppd-color-reset:hover { color: var(--ppd-danger, #dc2626); border-color: var(--ppd-danger, #dc2626); }
.ppd-eyedrop { flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 6px;
  background: var(--ppd-surface, #fff); color: var(--ppd-muted, #94a3b8); cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.ppd-eyedrop:hover { color: var(--ppd-primary, #2563eb); border-color: var(--ppd-primary, #2563eb); }
/* section content-area padding var (bodyPadding) */
.ppd-c-section > .b { padding: var(--sec-body-pad, 12px); }

/* ── plugin configuration modal ── */
.ppd-fcm-backdrop { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); padding: 20px; }
.ppd-fcm { width: min(580px, 96vw); max-height: 88vh; background: var(--ppd-surface, #fff);
  border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 16px; box-shadow:var(--pp-shadow-lg,0 28px 76px rgba(2,6,23,.4));
  display: flex; flex-direction: column; overflow: hidden; color: var(--ppd-text, #0f172a); }

/* header */
.ppd-fcm-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--ppd-border, #e2e8f0); flex: 0 0 auto; }
.ppd-fcm-ic { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: var(--ppd-primary-soft, #eff6ff); color: var(--ppd-primary, #2563eb);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ppd-fcm-head strong { font-size: 14.5px; display: block; color: var(--ppd-text, #0f172a); }
.ppd-fcm-head small { display: block; color: var(--ppd-muted, #64748b); font-size: 11.5px; margin-top: 1px; }
.ppd-fcm-close { margin-left: auto; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ppd-muted, #94a3b8); font-size: 18px; line-height: 1; cursor: pointer; transition: .12s; }
.ppd-fcm-close:hover { background: var(--ppd-soft, #f1f5f9); color: var(--ppd-text, #334155); }

/* body — a clean TWO-COLUMN form grid (label on top of each control) */
.ppd-fcm-body { padding: 12px 18px 14px; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-items: start; }
.ppd-fcm-body .ppd-field-row { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0; min-width: 0; text-align: left; }
.ppd-fcm-body .ppd-field-row.full { grid-column: 1 / -1; }         /* long values span both columns */
.ppd-fcm-body > .ppd-fcm-flow { grid-column: 1 / -1; }            /* pre-packed half rows (LookupWizard) span both */
.ppd-fcm-body .ppd-field-row > span, .ppd-fcm-body .ppd-field-col > span {
  font-size: 11.5px; color: var(--ppd-muted, #475569); font-weight: 600; line-height: 1.3; }
.ppd-fcm-body .ppd-field-row .ppd-rg { align-self: flex-start; }  /* pills hug the label, not stretched */
.ppd-fcm-body input[type="text"], .ppd-fcm-body input[type="number"], .ppd-fcm-body input:not([type]),
.ppd-fcm-body select { width: 100%; height: 32px; font-size: 12.5px; padding: 0 10px; color: var(--ppd-text, #0f172a);
  border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 8px; background: var(--ppd-input, #fff); transition: border-color .12s, box-shadow .12s; }
.ppd-fcm-body textarea { width: 100%; min-height: 34px; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ppd-text, #0f172a);
  border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 9px; background: var(--ppd-input, #fff); resize: vertical; }
.ppd-fcm-body input:focus, .ppd-fcm-body select:focus, .ppd-fcm-body textarea:focus {
  outline: 0; border-color: var(--ppd-primary, #2563eb); box-shadow: 0 0 0 3px var(--ppd-primary-soft, rgba(37,99,235,.14)); }
.ppd-fcm-body input::placeholder, .ppd-fcm-body textarea::placeholder { color: var(--ppd-muted, #94a3b8); }
.ppd-hint { color: var(--ppd-muted, #94a3b8); font-size: 13px; margin-left: 5px; cursor: help; vertical-align: middle; }

/* section headers — span the full width of the grid */
.ppd-fcm-sec { grid-column: 1 / -1; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ppd-muted, #64748b); margin: 3px 0 0; padding-top: 8px; border-top: 1px solid var(--ppd-border-soft, #eef2f7); }
.ppd-fcm-body .ppd-fcm-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* footer */
.ppd-fcm-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--ppd-border, #e2e8f0); background: var(--ppd-surface, #fff); flex: 0 0 auto; }
.ppd-fcm-foot small { color: var(--ppd-muted, #94a3b8); font-size: 11px; }
.ppd-fcm-done { margin-left: auto; background: var(--ppd-primary, #2563eb); color:var(--pp-primary-text,#fff); border: 0; border-radius: 9px;
  padding: 8px 20px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter .12s; }
.ppd-fcm-done:hover { filter: brightness(1.08); }

/* ── field-level Edit / View / Filter control studio (double-click a field) ── */
.ppd-fcx { width: min(820px, 97vw); max-height: 86vh; }
.ppd-fcx-perpage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--ppd-muted, #64748b); cursor: pointer; user-select: none; padding: 5px 10px; border-radius: 8px; transition: .12s; white-space: nowrap; }
.ppd-fcx-perpage:hover { color: var(--ppd-text, #334155); background: var(--ppd-soft, #f8fafc); }
.ppd-fcx-perpage input { width: 15px; height: 15px; accent-color: var(--ppd-primary, #2563eb); cursor: pointer; margin: 0; }
.ppd-fcx-reset { display: inline-flex; align-items: center; gap: 5px; background: transparent;
  border: 1px solid var(--ppd-border, #e2e8f0); color: var(--ppd-muted, #64748b); border-radius: 8px; padding: 5px 10px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; transition: .12s; }
.ppd-fcx-reset:hover { color: var(--ppd-text, #334155); border-color: var(--ppd-muted, #94a3b8); }
.ppd-fcx-head-gap { }
.ppd-fcx-tabs { display: flex; gap: 6px; padding: 10px 18px 0; flex: 0 0 auto; }
.ppd-fcx-tab { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 10px 10px 0 0; cursor: pointer;
  background: var(--ppd-soft, #f8fafc); color: var(--ppd-muted, #64748b); font-size: 13px; font-weight: 700; transition: .12s; }
.ppd-fcx-tab small { font-weight: 500; font-size: 10.5px; opacity: .7; }
.ppd-fcx-tab:hover { color: var(--ppd-text, #334155); }
.ppd-fcx-tab.is-on { background: var(--ppd-surface, #fff); border-color: var(--ppd-border, #e2e8f0); border-bottom-color: var(--ppd-surface, #fff);
  color: var(--ppd-primary, #2563eb); z-index: 1; }
.ppd-fcx-tab-dot { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ppd-primary, #2563eb); }

.ppd-fcx-main { display: flex; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--ppd-border, #e2e8f0); margin-top: -1px; }
/* left: searchable control list */
.ppd-fcx-list-col { flex: 0 0 232px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ppd-border, #e2e8f0); background: var(--ppd-soft, #f8fafc); }
.ppd-fcx-search { position: relative; padding: 10px 12px; flex: 0 0 auto; }
.ppd-fcx-search i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ppd-muted, #94a3b8); pointer-events: none; }
.ppd-fcx-search input { width: 100%; height: 32px; padding: 0 10px 0 30px; font-size: 12.5px; border-radius: 8px;
  border: 1px solid var(--ppd-border, #e2e8f0); background: var(--ppd-input, #fff); color: var(--ppd-text, #0f172a); }
.ppd-fcx-list { overflow-y: auto; padding: 0 8px 10px; flex: 1 1 auto; min-height: 0; }
.ppd-fcx-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; margin-bottom: 2px; border: 0;
  border-radius: 8px; background: transparent; color: var(--ppd-text, #334155); font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: left; transition: background .1s; }
.ppd-fcx-item i:first-child { font-size: 15px; width: 18px; text-align: center; color: var(--ppd-muted, #64748b); flex: 0 0 auto; }
.ppd-fcx-item span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppd-fcx-item:hover { background: var(--ppd-hover, rgba(37,99,235,.06)); }
.ppd-fcx-item.is-on { background: var(--ppd-primary-soft, #eff6ff); color: var(--ppd-primary, #2563eb); font-weight: 700; }
.ppd-fcx-item.is-on i { color: var(--ppd-primary, #2563eb); }
.ppd-fcx-item.is-auto { border-bottom: 1px solid var(--ppd-border-soft, #eef2f7); border-radius: 8px 8px 0 0; margin-bottom: 4px; padding-bottom: 10px; }
.ppd-fcx-item-ck { font-size: 13px !important; width: auto !important; }
.ppd-fcx-nomatch { padding: 16px 12px; color: var(--ppd-muted, #94a3b8); font-size: 12px; text-align: center; }
/* Validation tab: grouped rule palette + count badge on already-added rules */
.ppd-fcx-vgroup { padding: 10px 9px 3px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ppd-muted, #94a3b8); }
.ppd-fcx-vadd .ppd-fcx-vcount { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--ppd-primary, #2563eb); color: var(--pp-primary-text, #fff); font-size: 11px; font-weight: 800; }
.ppd-fcx-vadd .ppd-fcx-item-ck { color: var(--ppd-muted, #94a3b8); }
.ppd-fcx-vadd:hover .ppd-fcx-item-ck { color: var(--ppd-primary, #2563eb); }
.ppd-vr-name { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ppd-text); }
.ppd-vr-name i { color: var(--ppd-primary, #2563eb); }
/* right: preview + settings */
.ppd-fcx-detail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.ppd-fcx-detail-h { display: flex; align-items: center; gap: 11px; padding: 14px 18px 12px; flex: 0 0 auto; }
.ppd-fcx-detail-h > i { font-size: 20px; color: var(--ppd-primary, #2563eb); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--ppd-primary-soft, #eff6ff); border-radius: 9px; flex: 0 0 auto; }
.ppd-fcx-detail-h strong { display: block; font-size: 14px; color: var(--ppd-text, #0f172a); }
.ppd-fcx-detail-h small { display: block; font-size: 11px; color: var(--ppd-muted, #64748b); text-transform: capitalize; }
.ppd-fcx-preview { margin: 0 18px 4px; border: 1px solid var(--ppd-border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.ppd-fcx-preview-h { padding: 6px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ppd-muted, #64748b); background: var(--ppd-soft, #f8fafc); border-bottom: 1px solid var(--ppd-border, #e2e8f0); }
.ppd-fcx-preview-bd { padding: 14px; min-height: 40px; background: var(--ppd-surface, #fff); }
.ppd-fcx-prev-wait { color: var(--ppd-muted, #94a3b8); font-size: 12px; }
.ppd-fcm-body.ppd-fcx-settings { flex: 0 0 auto; overflow: visible; border-top: 0; }
.ppd-fcx-empty { display: flex; align-items: center; gap: 8px; margin: 6px 18px 16px; padding: 12px; border-radius: 10px;
  background: var(--ppd-soft, #f8fafc); color: var(--ppd-muted, #64748b); font-size: 12px; }
.ppd-fcx-empty i { font-size: 15px; opacity: .8; }
@media (max-width: 680px) {
  .ppd-fcx-main { flex-direction: column; }
  .ppd-fcx-list-col { flex: 0 0 auto; max-height: 180px; border-right: 0; border-bottom: 1px solid var(--ppd-border, #e2e8f0); }
}

/* inspector: plugin summary + configure button */
.ppd-fc-summary { font-size: 10.5px; color: var(--ppd-muted, #64748b); margin: 2px 2px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppd-fc-configure { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; font-size: 11.5px; font-weight: 700; color: var(--ppd-primary, #2563eb); background: var(--ppd-primary-soft, #eff6ff);
  border: 1px solid var(--ppd-primary-border, #bfdbfe); border-radius: 8px; padding: 6px 10px; cursor: pointer; margin-bottom: 6px; transition: .12s; }
.ppd-fc-configure:hover { background: var(--ppd-primary, #2563eb); color:var(--pp-primary-text,#fff); border-color: var(--ppd-primary, #2563eb); }

/* ── segmented pills (padded track, individual rounded active) ── */
.ppd-rg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--ppd-border, #e2e8f0);
  border-radius: 9px; background: var(--ppd-soft, #f1f5f9); flex-wrap: wrap; }
.ppd-rg-opt { margin: 0; cursor: pointer; }
/* Visually-hidden radio. No pointer-events:none — Safari then fails to activate
   a label-wrapped control on click. The active style keys off :checked (native,
   robust) AND the render-time .is-on class. */
.ppd-rg-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ppd-rg-opt span { display: inline-block; padding: 4px 13px; font-size: 11.5px; font-weight: 600;
  color: var(--ppd-muted, #64748b); border-radius: 6px; transition: background .12s, color .12s; }
.ppd-rg-opt.is-on span,
.ppd-rg-opt input:checked + span { background: var(--ppd-primary, #2563eb); color:var(--pp-primary-text,#fff); box-shadow:var(--pp-shadow-md,0 1px 2px rgba(2,6,23,.16)); }
.ppd-rg-opt:not(.is-on):hover span { color: var(--ppd-primary, #2563eb); background: var(--ppd-primary-soft, #eff6ff); }

/* ── checkbox rows (Full width / Multiple selection …) — checkbox beside label ── */
.ppd-fcm-body .ppd-fcm-checkrow { flex-direction: row !important; align-items: center; gap: 9px; align-self: center; padding: 3px 0; cursor: pointer; user-select: none; }
.ppd-fcm-checkrow input { width: 16px; height: 16px; accent-color: var(--ppd-primary, #2563eb); cursor: pointer; margin: 0; flex: 0 0 auto; }
.ppd-fcm-checkrow > span { font-size: 12px !important; font-weight: 600; color: var(--ppd-text, #334155) !important; }

/* ── Test button + live preview ── */
.ppd-fcm-test { display: inline-flex; align-items: center; gap: 5px; background: var(--ppd-ok-soft, #ecfdf5); color: var(--ppd-ok, #059669);
  border: 1px solid var(--ppd-ok-border, #a7f3d0); border-radius: 9px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .12s; }
.ppd-fcm-test:hover { background: var(--ppd-ok, #059669); color:var(--pp-primary-text,#fff); border-color: var(--ppd-ok, #059669); }
.ppd-fcm-prev { border-top: 1px solid var(--ppd-border, #e2e8f0); background: var(--ppd-soft, #f8fafc); flex: 0 0 auto; }
.ppd-fcm-prev-hd { display: flex; align-items: center; gap: 6px; padding: 9px 18px 0; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ppd-ok, #059669); }
.ppd-fcm-prev-x { margin-left: auto; border: 0; background: transparent; color: var(--ppd-muted, #94a3b8); font-size: 15px; cursor: pointer; }
.ppd-fcm-prev-x:hover { color: var(--ppd-danger, #dc2626); }
.ppd-fcm-prev-bd { padding: 11px 18px 15px; max-height: 160px; overflow: auto; }
.ppd-fcm-prev-bd .pp-input, .ppd-fcm-prev-bd select, .ppd-fcm-prev-bd input[type="text"] {
  width: 100%; max-width: 440px; padding: 8px 11px; border: 1px solid var(--ppd-border, #e2e8f0);
  border-radius: 9px; font-size: 13px; background: var(--ppd-input, #fff); color: var(--ppd-text, #0f172a); }
.ppd-fcm-prev-wait { color: var(--ppd-muted, #64748b); font-size: 12px; }
.ppd-fcm-prev-err { color: var(--ppd-danger, #dc2626); font-size: 12px; }

/* responsive: stack label above control on narrow viewports */
@media (max-width: 540px) {
  .ppd-fcm-body .ppd-field-row:not(.ppd-fcm-checkrow) { grid-template-columns: 1fr; gap: 5px; align-items: stretch; }
  .ppd-fcm-foot small { display: none; }
}

/* ── compact single-screen config modal ── */
.ppd-fcm { width: min(680px, 94vw); }
.ppd-fcm-body { padding: 6px 16px 12px; }
.ppd-fcm-body .ppd-field-row { grid-template-columns: 136px 1fr; padding: 4px 0; gap: 8px;
  border-bottom: 0; }
.ppd-fcm-body .ppd-field-row > span { font-size: 11.5px; }
.ppd-fcm-body input, .ppd-fcm-body select { padding: 5px 8px; font-size: 12px; }
.ppd-fcm-body .ppd-field-row > .ppd-rg,
.ppd-field-col .ppd-rg { justify-self: start; align-self: start; }
.ppd-fcm-sec { margin: 9px 0 3px; padding: 3px 8px; }
.ppd-fcm-body .ppd-fcm-sec:first-child { margin-top: 0; }

.ppd-fcm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 4px 0;
  align-items: end; }
.ppd-field-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ppd-field-col > span { font-size: 10.5px; font-weight: 700; color:var(--pp-muted,#64748b);
  text-transform: uppercase; letter-spacing: .03em; }
.ppd-fcm-check-half { display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px 0 2px;
  font-size: 12px; font-weight: 600; color:var(--pp-text,#334155); cursor: pointer; user-select: none; align-self: end; }
.ppd-fcm-check-half input { width: 15px; height: 15px; accent-color:var(--pp-primary,#2563eb); flex: 0 0 auto; }
.ppd-fcm-prev-bd { max-height: 120px; padding: 8px 16px 12px; }

/* flow lines: 2-3 settings share a row, pills hug, checkboxes align to baseline */
.ppd-fcm-flow { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0; align-items: flex-end; }
.ppd-fcm-flow .ppd-field-col { flex: 1 1 170px; min-width: 150px; }
.ppd-fcm-flow .ppd-field-col.is-fit { flex: 0 0 auto; min-width: 0; }
.ppd-fcm-flow .ppd-fcm-check-half { flex: 0 0 auto; padding-bottom: 5px; }
/* AJAX suggestions inside the Test preview */
.ppd-fcm-sug { max-width: 420px; margin-top: 3px; border: 1px solid var(--ppd-border, #e2e8f0);
  border-radius: 8px; background:var(--pp-surface,#fff); box-shadow:var(--pp-shadow-md,0 10px 26px rgba(2,6,23,.14)); overflow: hidden; }
.ppd-fcm-sug-it { padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
.ppd-fcm-sug-it:hover { background:var(--pp-primary-soft,#eff6ff); color:var(--pp-primary,#2563eb); }

/* ── Master–Detail details column (table-grid, WYSIWYG with generated list) ── */
.ppd-grid-mdcol { white-space: nowrap; }
.ppd-md-link { display: inline-flex; align-items: center; gap: 4px; color:var(--pp-primary,#2563eb);
  text-decoration: underline; font-size: 12.5px; cursor: pointer; border-radius: 4px; padding: 1px 3px; }
.ppd-md-link:hover { background:var(--pp-primary-soft,#eff6ff); }
.ppd-md-link i { font-size: 11px; }
.ppd-md-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px;
  font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; vertical-align: middle; }

/* ── Master–Detail relation sections on view/edit canvas ── */
.ppd-relsection { grid-column: 1 / -1; position: relative; cursor: pointer;
  transition: box-shadow .12s, outline-color .12s; outline: 2px solid transparent; outline-offset: 2px; }
.ppd-relsection:hover { outline-color: var(--ppd-primary-soft, #dbeafe); }
.ppd-relsection.selected { outline-color: var(--ppd-primary, #2563eb); box-shadow:var(--pp-shadow-md,0 6px 20px rgba(37,99,235,.14)); }
.ppd-relsection-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ppd-primary, #2563eb);
  background: var(--ppd-primary-soft, #eff6ff); border-radius: 999px; padding: 2px 8px; }

/* ── List-page child/detail preview panel (WYSIWYG + selectable zones) ── */
.ppd-mdprevwrap { grid-column: 1 / -1; margin-top: 10px; }
.ppd-mdprev-cap { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--ppd-muted, #94a3b8); margin: 0 0 4px 2px; }
.ppd-mdpreview { position: relative; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.ppd-mdpreview.ppd-part-selected { outline-color: var(--ppd-primary, #2563eb); }
.ppd-mdprevhead, .ppd-mdprevgrid { cursor: pointer; outline: 1.5px dashed transparent; outline-offset: 2px; border-radius: 6px; transition: outline-color .12s; }
.ppd-mdpreview:hover > .ppd-mdprevhead, .ppd-mdpreview:hover > div > .ppd-mdprevgrid { outline-color: var(--ppd-border, #cbd5e1); }
.ppd-mdprevhead.ppd-part-selected, .ppd-mdprevgrid.ppd-part-selected { outline: 2px solid var(--ppd-primary, #2563eb); outline-style: solid; }

/* ── Child/detail preview: header components + draggable columns ── */
.ppd-mdprevpart { cursor: pointer; outline: 1.5px dashed transparent; outline-offset: 2px; border-radius: 5px; transition: outline-color .12s; }
.ppd-mdprevhead:hover .ppd-mdprevpart { outline-color: var(--ppd-border, #cbd5e1); }
.ppd-mdprevpart.ppd-part-selected { outline: 2px solid var(--ppd-primary, #2563eb); }
.ppd-mdprevpart.ppd-part-hidden { opacity: .4; }
.ppd-mdprevcol { cursor: grab; position: relative; outline: 1.5px dashed transparent; outline-offset: -2px; transition: outline-color .12s; }
.ppd-mdprevgrid:hover .ppd-mdprevcol { outline-color: var(--ppd-border, #cbd5e1); }
.ppd-mdprevcol.ppd-part-selected { outline: 2px solid var(--ppd-primary, #2563eb); }
.ppd-mdprevcol.ppd-part-hidden { opacity: .4; text-decoration: line-through; }
.ppd-mdcol-grip { font-size: 9px; color: var(--ppd-muted, #cbd5e1); opacity: 0; transition: opacity .12s; }
.ppd-mdprevcol:hover .ppd-mdcol-grip { opacity: 1; }
.ppd-mdprevcol.ppd-col-before { box-shadow: inset 3px 0 0 var(--ppd-primary, #2563eb); }
.ppd-mdprevcol.ppd-col-after { box-shadow: inset -3px 0 0 var(--ppd-primary, #2563eb); }
.ppd-mdprevcol.ppd-col-dragging { opacity: .45; }

/* ============================================================
   Application theme bridge

   The global pp-php theme controls Designer chrome only. The page inside
   .ppd-canvas deliberately keeps the project's compiled theme (and its own
   Preview dark mode), so switching the builder UI never changes the design.
   ============================================================ */
html[data-pp-theme="dark"] body.ppd-body {
    --ppd-border: var(--pp-border);
    --ppd-border-soft: var(--pp-border);
    --ppd-soft: var(--pp-surface-muted);
    --ppd-bg: var(--pp-app-bg);
    --ppd-surface: var(--pp-surface);
    --ppd-chrome: var(--pp-surface);
    --ppd-chrome-soft: var(--pp-surface-soft);
    --ppd-chrome-raised: var(--pp-surface-raised);
    --ppd-chrome-input: var(--pp-input-bg);
    --ppd-chrome-hover: var(--pp-surface-muted);
    --ppd-text: var(--pp-text);
    --ppd-muted: var(--pp-text-muted);
    --ppd-primary: var(--pp-accent);
    --ppd-primary-soft: var(--pp-accent-soft);
    --ppd-primary-border: var(--pp-border-strong);
    --ppd-shadow: 0 18px 42px var(--pp-shadow-color);
    --ppd-shadow-sm: 0 1px 2px var(--pp-shadow-color);
    /* Console-theme snapshots for system previews (see light :root). */
    --ppd-con-text: var(--pp-text);
    --ppd-con-muted: var(--pp-text-muted);
    --ppd-con-border: var(--pp-border);
    --ppd-con-primary: var(--pp-accent);
    --ppd-con-surface: var(--pp-surface, #1e293b);
    --ppd-con-soft: var(--pp-surface-soft, #26334a);
    color-scheme: dark;
}

/* Three-pane shell. These selectors intentionally stop outside .ppd-canvas. */
html[data-pp-theme="dark"] body.ppd-body .ppd-workspace,
html[data-pp-theme="dark"] body.ppd-body .ppd-panel,
html[data-pp-theme="dark"] body.ppd-body .ppd-panel-head,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar {
    background: var(--ppd-chrome);
    color: var(--ppd-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-main {
    background-color: var(--ppd-bg);
    background-image: radial-gradient(color-mix(in srgb, var(--ppd-border) 72%, transparent) 1px, transparent 1px);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-canvas-wrap { background: var(--ppd-bg); }
html[data-pp-theme="dark"] body.ppd-body .ppd-panel-body,
html[data-pp-theme="dark"] body.ppd-body .ppd-insp,
html[data-pp-theme="dark"] body.ppd-body .ppd-insp-body { background: var(--ppd-chrome); color: var(--ppd-text); }

/* Builder controls and dense left palette. */
html[data-pp-theme="dark"] body.ppd-body .ppd-panel .ppd-icon-btn,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-icon-btn,
html[data-pp-theme="dark"] body.ppd-body .ppd-panel .ppd-btn,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-btn,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-tool-btn,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon button,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-device-switch,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-device-switch button,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-comp-card,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-search,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-login-template,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-back,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-icon-pick,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-iconpick-prev,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-iconpick-browse,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-color-reset,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-eyedrop {
    background: var(--ppd-chrome-raised);
    color: var(--ppd-text);
    border-color: var(--ppd-border);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-tabs,
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-packs,
html[data-pp-theme="dark"] body.ppd-body .ppd-rg { background: var(--ppd-chrome-soft); }
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-packs button.is-active { background: var(--ppd-chrome-raised); }
/* Keep the per-section accent colour-coding in dark too (the vivid --tab-c reads
   well with a white glyph on the dark chrome). */
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-tabs button.active {
    background: var(--tab-c, var(--ppd-primary));
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-tabs button.active i { color: #fff; }
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-tabs button:hover:not(.active) { background: color-mix(in srgb, var(--tab-c) 20%, var(--ppd-chrome-raised)); }

/* Workbar page tabs + device switch — the flat dark override above clobbers the
   `.active` variant, so the selected page/device became invisible in dark mode.
   Re-assert a filled pill with a DARK label (dark primary is a light blue, so a
   white label on it would be low-contrast — mirror the left-tabs treatment). */
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-device-switch { --ppd-tab-on: #0b1220; }
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon button.active,
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-device-switch button.active {
    background: var(--ppd-primary);
    color: var(--ppd-tab-on);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon button.active::after {
    background: color-mix(in srgb, var(--ppd-tab-on) 55%, transparent);
}
/* Active custom-page tab: the pulse dot (its own ::after) must stay dark-on-fill too. */
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon button.active.ppd-pt-custom::after { background: var(--ppd-tab-on); opacity: .8; }
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-ribbon button:hover:not(.active),
html[data-pp-theme="dark"] body.ppd-body .ppd-workbar .ppd-device-switch button:hover:not(.active) {
    background: var(--ppd-chrome-hover);
    color: var(--ppd-primary);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-section-title,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-list-item,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-field-chip,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-comp-card { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-section-title:hover,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-list-item:hover,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-field-chip:hover,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-login-template:hover { background: var(--ppd-chrome-hover); }
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-section-title em,
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-list-item em { background: var(--ppd-soft); color: var(--ppd-muted); }
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-section + .ppd-section { border-color: var(--ppd-border-soft); }
html[data-pp-theme="dark"] body.ppd-body .ppd-left .ppd-search input { color: var(--ppd-text); }

/* Properties inspector, including the nested Lookup Wizard panel. */
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-head { background: linear-gradient(180deg, var(--ppd-chrome-raised), var(--ppd-chrome-soft)); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-head strong { color: color-mix(in srgb, var(--ppd-primary) 62%, var(--ppd-text)); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-head small,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row > span,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-col > span { color: var(--ppd-muted); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-group > summary { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-group > summary:hover { background: var(--ppd-chrome-hover); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row input,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row select,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row textarea,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-fc-settings input,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-fc-settings select {
    background: var(--ppd-chrome-input);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row input[readonly],
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-field-row :disabled { background: var(--ppd-soft); color: var(--ppd-muted); opacity: 1; }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-check { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-insp-actions { background: color-mix(in srgb, var(--ppd-chrome) 96%, transparent); }
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-id,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-fc-settings,
html[data-pp-theme="dark"] body.ppd-body .ppd-right .ppd-note {
    background: var(--ppd-chrome-soft);
    border-color: var(--ppd-border);
    color: var(--ppd-muted);
}

/* Designer-owned modal chrome and icon browser. */
html[data-pp-theme="dark"] body.ppd-body .ppd-icm,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm { background: var(--ppd-chrome); color: var(--ppd-text); border: 1px solid var(--ppd-border); }
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-head strong { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-close,
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-search,
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-ic,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-body input,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-body select,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-prev-bd .pp-input,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-prev-bd select,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-prev-bd input[type="text"],
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-sug {
    background: var(--ppd-chrome-input);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-search input,
html[data-pp-theme="dark"] body.ppd-body .ppd-icm-ic-glyph,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-body .ppd-field-row > span,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-check-half { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-sec,
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-prev { background: var(--ppd-chrome-soft); }
html[data-pp-theme="dark"] body.ppd-body .ppd-fcm-sug-it:hover { background: var(--ppd-primary-soft); }

/* Framework overlays launched by Designer actions. */
html[data-pp-theme="dark"] body.ppd-body .swal2-popup { background: var(--ppd-chrome); color: var(--ppd-text); border: 1px solid var(--ppd-border); }
html[data-pp-theme="dark"] body.ppd-body .swal2-title,
html[data-pp-theme="dark"] body.ppd-body .swal2-html-container { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .swal2-input,
html[data-pp-theme="dark"] body.ppd-body .swal2-select,
html[data-pp-theme="dark"] body.ppd-body .swal2-textarea { background: var(--ppd-chrome-input); border-color: var(--ppd-border); color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .tooltip .tooltip-inner { background: var(--ppd-chrome-raised); color: var(--ppd-text); border: 1px solid var(--ppd-border); box-shadow: var(--ppd-shadow-sm); }
html[data-pp-theme="dark"] body.ppd-body .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--ppd-chrome-raised); }
html[data-pp-theme="dark"] body.ppd-body .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--ppd-chrome-raised); }

html[data-pp-theme="dark"] body.ppd-body .ppd-panel-body::-webkit-scrollbar-thumb,
html[data-pp-theme="dark"] body.ppd-body .ppd-insp-body::-webkit-scrollbar-thumb,
html[data-pp-theme="dark"] body.ppd-body .ppd-canvas-wrap::-webkit-scrollbar-thumb { background-color: var(--ppd-border); }

/* ============================================================
   Designer-only canvas viewing skin

   The application theme is an editor preference, not project data. These
   selectors therefore live entirely below the Designer shell and never
   mutate the selected page theme, Preview-dark state, renderer model, or
   generated application. Print and authentication previews retain their
   purpose-built presentation.
   ============================================================ */
html[data-pp-theme="dark"] body.ppd-body .ppd-main
.ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) {
    --ppd-bg: var(--pp-app-bg, #0c1525);
    --ppd-surface: var(--pp-surface, #111d30);
    --ppd-soft: var(--pp-surface-soft, #17253a);
    --ppd-text: var(--pp-text, #e8eef8);
    --ppd-muted: var(--pp-text-muted, #9cacbf);
    --ppd-border: var(--pp-border, #34455f);
    --ppd-border-soft: var(--pp-border, #293952);
    --ppd-primary: var(--pp-accent, #60a5fa);
    --ppd-primary-soft: var(--pp-accent-soft, #172b4d);
    --ppd-primary-border: color-mix(in srgb, var(--pp-accent, #60a5fa) 42%, var(--pp-border, #34455f));
    --pp-bg: var(--ppd-bg);
    --pp-surface: var(--ppd-surface);
    --pp-surface-soft: var(--ppd-soft);
    --pp-text: var(--ppd-text);
    --pp-muted: var(--ppd-muted);
    --pp-border: var(--ppd-border);
    --pp-grid-panel: var(--ppd-surface);
    --pp-grid-bg: var(--ppd-surface);
    background: var(--ppd-bg);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
    box-shadow: 0 18px 46px var(--pp-shadow-color, rgba(0, 0, 0, .34));
}

/* The runtime Preview is builder chrome, not generated output. It follows the
   selected application palette without writing anything into page settings. */
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-modal {
    background: color-mix(in srgb, var(--pp-app-bg) 76%, transparent) !important;
    border: 0;
    border-radius: 0;
}
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-box {
    --ppd-bg: var(--pp-app-bg);
    --ppd-surface: var(--pp-surface);
    --ppd-soft: var(--pp-surface-soft);
    --ppd-text: var(--pp-text);
    --ppd-muted: var(--pp-text-muted);
    --ppd-border: var(--pp-border);
    --ppd-border-soft: var(--pp-border);
    --ppd-primary: var(--pp-accent);
    --ppd-primary-soft: var(--pp-accent-soft);
    --ppd-primary-border: color-mix(in srgb, var(--pp-accent) 42%, var(--pp-border));
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    color: var(--pp-text);
    box-shadow: 0 30px 80px var(--pp-shadow-color);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-box .ppd-modal-head {
    background: var(--pp-surface-soft);
    border-color: var(--pp-border);
    color: var(--pp-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-content {
    background: var(--pp-app-bg);
    color: var(--pp-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-content :is(
    .ppd-c-section, .ppd-c-section > .b, .ppd-grid, .ppd-grid td,
    .ppd-grid th, .ppd-tabbar, .ppd-mapper-row, .ppd-fieldsel-all
) {
    background-color: var(--pp-surface);
    border-color: var(--pp-border);
    color: var(--pp-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-content :is(
    .ppd-c-section > .h, .ppd-grid caption, .ppd-grid th,
    .ppd-mapper-row.head, .ppd-fieldsel-all
) { background-color: var(--pp-surface-soft); }
html[data-pp-theme="dark"] body.ppd-body .ppd-preview-content :is(
    .ppd-btn:not(.primary), .ppd-chip, .ppd-c-search, .ppd-tb-search,
    .ppd-tb-dd, .ppd-tb-pagesize, .ppd-tb-menu, .ppd-act, .ppd-pg
) {
    background: var(--pp-surface-raised);
    border-color: var(--pp-border);
    color: var(--pp-text);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-page-head,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-c-section > .h,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid caption,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-tabbar,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-mapper-row.head,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-fieldsel-all {
    background: var(--ppd-soft);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-page-body,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-c-section > .b,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-tab.active {
    background: var(--ppd-bg);
    color: var(--ppd-text);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(
    .ppd-c-heading, .ppd-c-text, .ppd-c-field > label, .ppd-c-checkline,
    .ppd-mapper-src, .ppd-fieldsel-item, .ppd-summary-item strong
) { color: var(--ppd-text); }

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(
    .ppd-chip, .ppd-c-search, .ppd-btn:not(.primary), .ppd-node-tools button,
    .ppd-tb-search, .ppd-tb-dd, .ppd-tb-pagesize, .ppd-tb-menu,
    .ppd-tb-placeholder, .ppd-tb-pagesize .box, .ppd-act, .ppd-pg,
    .ppd-format-tile, .ppd-summary-item, .ppd-stat
) {
    /* --ppd-* are not defined in this scope, so bare var() collapsed to
       transparent and these surfaces (notably dropdown panels) rendered
       see-through over the page behind them. Fall back to the --pp-* tokens
       that ARE defined here. */
    background: var(--ppd-surface, var(--pp-surface-raised, #172033));
    border-color: var(--ppd-border, var(--pp-border, #2a3547));
    color: var(--ppd-text, var(--pp-text, #e6edf7));
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(
    .ppd-c-field input, .ppd-c-field select, .ppd-c-field textarea,
    .ppd-filter-row input, .ppd-filter-row select, .ppd-mapper-row select
) {
    background: var(--ppd-soft);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
    color-scheme: dark;
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(input, textarea)::placeholder {
    color: var(--ppd-muted);
    opacity: 1;
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(
    .ppd-c-viewval, .ppd-step, .ppd-c-file, .ppd-upload, .ppd-empty
) {
    background: var(--ppd-soft);
    border-color: var(--ppd-border);
    color: var(--ppd-text);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-step-bar { background: var(--ppd-border); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-step-no { background: var(--ppd-border); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-step.active { background: color-mix(in srgb, var(--ppd-primary) 18%, var(--ppd-surface)); color: color-mix(in srgb, var(--ppd-primary) 70%, var(--ppd-text)); }

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-table-wrap,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-mapper,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-fieldsel {
    background: var(--ppd-surface);
    border-color: var(--ppd-border);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid th,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid td,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-mapper-row {
    border-color: var(--ppd-border);
}

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid thead th {
    background: color-mix(in srgb, var(--ppd-primary) 16%, var(--ppd-surface));
    color: var(--ppd-text);
}
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid tbody td { background: var(--ppd-surface); color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid tfoot td { background: var(--ppd-chrome-raised); color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid.is-striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ppd-soft) 58%, var(--ppd-surface)); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-grid.is-hover tbody tr:hover td { background: var(--ppd-chrome-hover); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-filter-row td,
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-rowlabel { background: var(--ppd-soft); color: var(--ppd-muted); }

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-selbar {
    background: color-mix(in srgb, var(--ppd-primary) 16%, var(--ppd-surface));
    border-color: color-mix(in srgb, var(--ppd-primary) 36%, var(--ppd-border));
}
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-selbar-count { color: color-mix(in srgb, var(--ppd-primary) 68%, var(--ppd-text)); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-selbar-hint { color: var(--ppd-muted); }

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(.ppd-tb-menu-item, .ppd-tb-col) { color: var(--ppd-text); }
html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) :is(.ppd-tb-menu-item, .ppd-tb-col):hover { background: var(--ppd-primary-soft); color: var(--ppd-primary); }

html[data-pp-theme="dark"] body.ppd-body .ppd-main .ppd-canvas:not(.ppd-print-sheet):not(.ppd-page-login):not(.ppd-page-register) .ppd-chart {
    background: linear-gradient(180deg, var(--ppd-surface), var(--ppd-soft));
    border-color: var(--ppd-border);
}

/* Designer-owned dialogs and editor overlays.  These are builder chrome only;
   page output and saved page-style settings remain untouched. */
body.ppd-body :is(.ppd-modal-box, .ppd-icm) {
    background: var(--ppd-chrome-raised);
    color: var(--ppd-text);
    border-color: var(--ppd-border);
    box-shadow: var(--ppd-shadow);
}
body.ppd-body :is(.ppd-modal-head, .ppd-modal-body, .ppd-modal-foot, .ppd-icm-head, .ppd-icm-toolbar, .ppd-icm-body, .ppd-icm-foot) {
    background: var(--ppd-chrome-raised);
    color: var(--ppd-text);
    border-color: var(--ppd-border);
}
body.ppd-body :is(.ppd-modal-head, .ppd-icm-head, .ppd-icm-toolbar, .ppd-icm-foot) {
    background: var(--ppd-chrome-soft);
}
body.ppd-body :is(.ppd-modal-box, .ppd-icm) :is(input, select, textarea) {
    background: var(--ppd-chrome-input);
    color: var(--ppd-text);
    border-color: var(--ppd-border);
}
body.ppd-body :is(.ppd-modal-box, .ppd-icm) :is(input, textarea)::placeholder {
    color: var(--ppd-muted);
    opacity: 1;
}

/* ── Admin Area smart-component preview (Designer canvas) ──
   Theme-aware: derives every tone from the Designer's live --ppd-* tokens
   (soft/strong variants via color-mix), so it follows the console's selected
   theme in both light and dark. Visual only — the built app is unaffected. */
.ppd-aa {
    /* Follow the CONSOLE theme (like login/register previews), not the app
       preview theme: chrome tokens + console snapshots survive the canvas
       app-theme override, so this reads correctly in light and dark. */
    --aa-accent: var(--ppd-aa-accent, var(--ppd-con-primary, #4f46e5));
    --aa-surface: var(--ppd-chrome, #fff);
    --aa-soft: var(--ppd-chrome-soft, #f8fbff);
    --aa-border: var(--ppd-con-border, #e2e8f0);
    --aa-border-strong: color-mix(in srgb, var(--ppd-con-border, #cbd5e1) 55%, var(--ppd-con-muted, #64748b) 45%);
    --aa-text: var(--ppd-con-text, #0f172a);
    --aa-muted: var(--ppd-con-muted, #64748b);
    --aa-danger: var(--ppd-danger, #dc2626);
    display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--aa-border); border-radius: 14px; background: var(--aa-surface); color: var(--aa-text);
}
.ppd-aa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ppd-aa-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--aa-text); }
.ppd-aa-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--aa-muted); max-width: 60ch; }
.ppd-aa-exit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--aa-danger); background: color-mix(in srgb, var(--aa-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--aa-danger) 30%, transparent); }
.ppd-aa-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--aa-border); padding-bottom: 2px; }
.ppd-aa-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 650; color: var(--aa-muted); border-bottom: 2px solid transparent; }
.ppd-aa-tab.is-active { color: var(--aa-accent); border-bottom-color: var(--aa-accent); }
.ppd-aa-muted { color: var(--aa-muted); font-size: 12px; font-style: italic; padding: 6px 2px; }
.ppd-aa-matrix { display: grid; grid-template-columns: 1.4fr repeat(6, 1fr); gap: 1px; background: var(--aa-border); border: 1px solid var(--aa-border); border-radius: 10px; overflow: hidden; }
.ppd-aa-th, .ppd-aa-td { background: var(--aa-soft); padding: 7px 9px; font-size: 10.5px; text-align: center; }
.ppd-aa-th { font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--aa-muted); }
.ppd-aa-td { background: var(--aa-surface); font-weight: 650; color: var(--aa-text); }
.ppd-aa-first { text-align: left; }
.ppd-aa-cell { background: var(--aa-surface); display: flex; align-items: center; justify-content: center; }
.ppd-aa-cell::before { content: ""; width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--aa-border-strong); }
.ppd-aa-cell.on::before { background: var(--aa-accent); border-color: var(--aa-accent); }
.ppd-aa-note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--aa-muted); background: var(--aa-soft); border-radius: 9px; padding: 8px 11px; }

/* ── Two-Factor smart-component preview (Designer canvas) ── */
.ppd-2fa {
    --aa-accent: var(--ppd-2fa-accent, var(--ppd-con-primary, #4f46e5));
    --aa-surface: var(--ppd-chrome, #fff); --aa-soft: var(--ppd-chrome-soft, #f8fbff);
    --aa-border: var(--ppd-con-border, #e2e8f0); --aa-text: var(--ppd-con-text, #0f172a); --aa-muted: var(--ppd-con-muted, #64748b);
    display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--aa-border); border-radius: 16px; background: var(--aa-surface); color: var(--aa-text);
}
.ppd-2fa-head { display: flex; gap: 13px; align-items: flex-start; }
.ppd-2fa-badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--aa-accent); background: color-mix(in srgb, var(--aa-accent) 13%, transparent); }
.ppd-2fa-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--aa-text); }
.ppd-2fa-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--aa-muted); max-width: 62ch; line-height: 1.5; }
.ppd-2fa-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--aa-muted); }
.ppd-2fa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ppd-2fa-m { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--aa-border); border-radius: 13px; background: var(--aa-soft); padding: 14px; }
.ppd-2fa-mi { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: var(--aa-accent); background: color-mix(in srgb, var(--aa-accent) 12%, transparent); }
.ppd-2fa-m strong { display: block; font-size: 13px; font-weight: 750; color: var(--aa-text); }
.ppd-2fa-m span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--aa-muted); line-height: 1.45; }
.ppd-2fa-note { display: flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--aa-muted); background: var(--aa-soft); border-radius: 10px; padding: 9px 12px; }

/* ── Calendar smart-component preview (Designer canvas) ── */
.ppd-cal {
    /* Console theme tokens (like admin-area/2FA) so it reads in light + dark. */
    --cal-accent: var(--ppd-cal-accent, var(--ppd-con-primary, #6366f1));
    --cal-surface: var(--ppd-chrome, #fff);
    --cal-soft: var(--ppd-chrome-soft, #f8fbff);
    --cal-border: var(--ppd-con-border, #e2e8f0);
    --cal-text: var(--ppd-con-text, #0f172a);
    --cal-muted: var(--ppd-con-muted, #64748b);
    --cal-today: var(--ppd-cal-today, var(--cal-accent));
    --cal-line: var(--ppd-cal-line, var(--cal-border));
    display: flex; flex-direction: column; gap: 13px; padding: 16px; border: 1px solid var(--cal-border); border-radius: 14px; background: var(--cal-surface); color: var(--cal-text);
}
.ppd-cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ppd-cal-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.ppd-cal-today { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--cal-muted); background: var(--cal-soft); border: 1px solid var(--cal-border); }
.ppd-cal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--cal-text); }
.ppd-cal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--cal-muted); max-width: 62ch; line-height: 1.5; }
.ppd-cal-new { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #fff; background: var(--cal-accent); }
.ppd-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ppd-cal-navtitle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cal-text); }
.ppd-cal-navtitle b { font-weight: 750; }
.ppd-cal-navtitle .bi { color: var(--cal-muted); }
.ppd-cal-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--cal-soft); border: 1px solid var(--cal-border); }
.ppd-cal-view { padding: 5px 11px; font-size: 11.5px; font-weight: 650; color: var(--cal-muted); border-radius: 6px; }
.ppd-cal-view.is-active { color: #fff; background: var(--cal-accent); }
.ppd-cal-grid { border: 1px solid var(--cal-line); border-radius: 11px; overflow: hidden; }
.ppd-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--cal-soft); border-bottom: 1px solid var(--cal-line); }
.ppd-cal-dow { padding: 6px 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cal-muted); }
.ppd-cal-cells { display: grid; grid-template-columns: repeat(7, 1fr); }
.ppd-cal-cell { position: relative; min-height: 40px; padding: 5px 7px; border-right: 1px solid var(--cal-line); border-top: 1px solid var(--cal-line); background: var(--cal-surface); }
.ppd-cal-cell:nth-child(7n) { border-right: 0; }
.ppd-cal-cell:nth-child(-n+7) { border-top: 0; }
.ppd-cal-cell b { font-size: 11px; font-weight: 600; color: var(--cal-text); }
.ppd-cal-cell.is-out { background: var(--cal-soft); }
.ppd-cal-cell.is-weekend { background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-surface)); }
.ppd-cal-cell.is-out.is-weekend { background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-soft)); }
.ppd-cal-cell.is-today b { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--cal-today); }
.ppd-cal-ev { position: absolute; left: 7px; bottom: 6px; width: 18px; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--cal-accent) 70%, transparent); }
.ppd-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ppd-cal-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--cal-muted); background: var(--cal-soft); border: 1px solid var(--cal-border); border-radius: 999px; }
.ppd-cal-chip .bi { color: var(--cal-accent); }
.ppd-cal-note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--cal-muted); background: var(--cal-soft); border-radius: 9px; padding: 8px 11px; }
.ppd-cal-htext { min-width: 0; }
/* Shell row: sidebar + main column (mirrors the generated app) */
.ppd-cal-shell { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start; }
.ppd-cal-shell.ppd-cal-noside { grid-template-columns: 1fr; }
.ppd-cal-maincol { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.ppd-cal-barr { display: flex; align-items: center; gap: 10px; }
.ppd-cal-tool { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--cal-muted); background: var(--cal-soft); border: 1px solid var(--cal-border); }
.ppd-cal-tool .bi { color: var(--cal-muted); }
/* Sidebar mock */
.ppd-cal-side { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--cal-border); border-radius: 12px; padding: 12px; background: var(--cal-surface); }
.ppd-cal-side-create { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--cal-accent); }
.ppd-cal-mini { border: 1px solid var(--cal-border); border-radius: 10px; padding: 8px; }
.ppd-cal-mini-h { font-size: 11px; font-weight: 700; text-align: center; color: var(--cal-text); margin-bottom: 6px; }
.ppd-cal-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ppd-cal-mini-g span { font-size: 9px; text-align: center; color: var(--cal-muted); padding: 2px 0; border-radius: 4px; }
.ppd-cal-mini-g span.is-today { color: #fff; background: var(--cal-today); font-weight: 700; }
.ppd-cal-sh { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cal-muted); margin-top: 4px; }
.ppd-cal-srow { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cal-text); }
.ppd-cal-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--cal-accent); }
.ppd-cal-smut { font-size: 11.5px; color: var(--cal-muted); font-style: italic; }
.ppd-cal-foot { text-align: center; font-size: 11.5px; color: var(--cal-muted); padding: 9px; border-top: 1px solid var(--cal-border); }
@media (max-width: 720px) { .ppd-cal-shell { grid-template-columns: 1fr; } }

/* ── PHP-expression props + Code Editor modal ────────────────────────────────
   Console chrome (never themed by the canvas app-theme), so it stays legible
   in every project theme. */
.ppd-phpin { display: flex; gap: 6px; align-items: center; min-width: 0; }
.ppd-phpin > input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.ppd-php-open { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--ppd-con-border, #dfe3ec); background: var(--ppd-con-soft, #eef2ff);
  color: var(--ppd-con-primary, #4f46e5); font-size: 12px; }
.ppd-php-open:hover { filter: brightness(.96); }

.ppd-codeedit .ppd-code-box { width: min(760px, 96vw); display: flex; flex-direction: column;
  background: var(--ppd-con-surface, #fff); color: var(--ppd-con-text, #334155); }
.ppd-code-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ppd-code-tpl { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; }
.ppd-code-tpl select { flex: 0 1 300px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--ppd-con-border, #dfe3ec); background: var(--ppd-con-surface, #fff); color: inherit; font: inherit; font-size: 12.5px; }
/* one-line lead above the editor: what this property does, nothing more */
.ppd-code-lead { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ppd-con-muted, #64748b); }
.ppd-code-edit { display: flex; border: 1px solid var(--ppd-con-border, #dfe3ec); border-radius: 10px; overflow: hidden;
  background: var(--ppd-con-surface, #fff); }
.ppd-code-gutter { margin: 0; padding: 10px 8px; min-width: 34px; text-align: right; user-select: none; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55;
  color: var(--ppd-con-muted, #94a3b8); background: var(--ppd-con-soft, #f4f6fb);
  border-right: 1px solid var(--ppd-con-border, #dfe3ec); }
.ppd-code-edit textarea { flex: 1; min-width: 0; min-height: 190px; resize: vertical; border: 0; outline: none;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55;
  background: transparent; color: inherit; }
/* foldable guide: all the reference material, out of the way until wanted */
.ppd-code-guide { border: 1px solid var(--ppd-con-border, #dfe3ec); border-radius: 10px;
  background: var(--ppd-con-soft, #f8fafc); overflow: hidden; }
.ppd-code-guide > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 9px 12px; font-size: 12px; font-weight: 800; color: var(--ppd-con-text, #334155); list-style: none; }
.ppd-code-guide > summary::-webkit-details-marker { display: none; }
.ppd-code-guide > summary:hover { color: var(--ppd-con-primary, #4f46e5); }
.ppd-code-guide > summary .chev { font-size: 11px; transition: transform .15s ease; color: var(--ppd-con-muted, #94a3b8); }
.ppd-code-guide[open] > summary .chev { transform: rotate(90deg); }
.ppd-code-guide > summary .gt { flex: 0 0 auto; }
.ppd-guide-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ppd-con-muted, #64748b); background: var(--ppd-con-surface, #fff);
  border: 1px solid var(--ppd-con-border, #dfe3ec); border-radius: 999px; padding: 2px 9px; }
.ppd-guide-body { padding: 2px 12px 12px; border-top: 1px solid var(--ppd-con-border, #dfe3ec);
  background: var(--ppd-con-surface, #fff); }
.ppd-guide-sec { padding: 10px 0 2px; }
.ppd-guide-sec + .ppd-guide-sec { border-top: 1px dashed var(--ppd-con-border, #e2e8f0); }
.ppd-guide-sec h5 { margin: 0 0 7px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ppd-con-primary, #4f46e5); }
/* label | value — a real grid, so text and <code> never become flex siblings */
.ppd-guide-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px;
  align-items: baseline; padding: 3px 0; }
.ppd-guide-row > span { font-size: 11.5px; font-weight: 700; color: var(--ppd-con-muted, #64748b); }
.ppd-guide-row code { display: inline-block; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--ppd-con-text, #334155) 8%, transparent); padding: 2px 6px; border-radius: 6px; }
.ppd-guide-row em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.5;
  color: var(--ppd-con-muted, #64748b); }
.ppd-guide-warn { margin: 8px 0 2px; font-size: 11.5px; line-height: 1.55; color: var(--ppd-con-text, #334155);
  background: color-mix(in srgb, #f59e0b 12%, transparent); border-radius: 8px; padding: 7px 10px; }
.ppd-guide-warn i { color: #b45309; margin-right: 5px; }
.ppd-guide-warn code, .ppd-guide-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: color-mix(in srgb, var(--ppd-con-text, #334155) 10%, transparent); padding: 1px 5px; border-radius: 5px; }
.ppd-guide-foot { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--ppd-con-border, #e2e8f0);
  font-size: 11.5px; line-height: 1.55; color: var(--ppd-con-muted, #64748b); }
.ppd-codeedit .ppd-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 16px;
  border-top: 1px solid var(--ppd-con-border, #dfe3ec); background: var(--ppd-con-soft, #f8fbff); }
.ppd-codeedit .ppd-btn.primary { background: var(--ppd-con-primary, #4f46e5); border-color: transparent; color: #fff; font-weight: 700; }
.ppd-code-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ppd-code-fields > span { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ppd-con-muted, #64748b); margin-right: 2px; }
.ppd-code-fields button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ppd-con-border, #dfe3ec); background: var(--ppd-con-soft, #f4f6fb); color: var(--ppd-con-text, #334155); }
.ppd-code-fields button:hover { border-color: var(--ppd-con-primary, #4f46e5); color: var(--ppd-con-primary, #4f46e5); }

/* Custom-page ribbon: the "+ Page" button that adds a blank custom page, and a
   subtle marker on custom page tabs so they read apart from the built-in ones. */
#ppdRibbon .ppd-add-page { display:inline-flex; align-items:center; gap:5px; margin-left:6px; border:1px dashed var(--ppd-border,#cbd5e1); border-radius:8px; color:var(--ppd-primary,#2563eb); background:transparent; font-weight:600; }
#ppdRibbon .ppd-add-page:hover { background:color-mix(in srgb, var(--ppd-primary,#2563eb) 10%, transparent); border-style:solid; }
#ppdRibbon .ppd-pt-custom { position:relative; }
#ppdRibbon .ppd-pt-custom::after { content:''; position:absolute; top:5px; right:6px; width:5px; height:5px; border-radius:50%; background:var(--ppd-primary,#2563eb); opacity:.7; }

/* Custom page tab: label + inline delete (×). Double-click the tab to rename. */
#ppdRibbon .ppd-pt-custom { display:inline-flex; align-items:center; gap:6px; padding-right:7px; }
#ppdRibbon .ppd-pt-del { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; font-size:14px; line-height:1; opacity:.5; }
#ppdRibbon .ppd-pt-del:hover { opacity:1; background:color-mix(in srgb, #dc2626 16%, transparent); color:#dc2626; }
