/*
 * Purpose: Kinetic component library. Phase 0 ships the stubs that
 *          the rest of the plan builds on. Phase 2 expands these
 *          rules with the active variants documented in
 *          `docs/domains/shared/KINETIC_STYLE_GUIDE.md`.
 *
 * Recent visual fixes (June 2026):
 *   - §37 API-tokens page readability pass: the
 *     `.k-page-list__heading` wrapper no longer carries a
 *     `font-size` rule (the previous `clamp(1.5rem, 3vw, 2.25rem)`
 *     polluted every descendant — including the
 *     `.k-page-list__sub` subtitle — with a section-heading
 *     scale). `.k-page-list__title` now opts into a deliberate
 *     `clamp(1.5rem, 2.5vw, 2rem)` (the prompt §3 card-title
 *     scale) and `.k-page-list__sub` opts into a 14px
 *     sentence-case muted body subtitle so the page header reads
 *     as a clear title / subtitle hierarchy instead of two
 *     competing section headings. The wrapper also gains a
 *     `.k-page-list__actions` slot so the page-level primary
 *     action button (e.g. `+ New Token`) sits on the right
 *     baseline of the title block — a deliberately designed
 *     page-header action row, not a floating free-standing
 *     button. The `align-items: flex-end` keeps the button
 *     anchored to the baseline of the title block, and the
 *     `flex-wrap` lets the row collapse gracefully on narrow
 *     viewports.
 *   - §37 multi-scope table cells: the `ApiTokenRenderHelpers::renderScopes`
 *     helper now wraps its badges in a `.k-chip-group`
 *     flex container (gap 8px, `flex-wrap: wrap`) so each
 *     scope reads as its own chip rather than as one
 *     undifferentiated blue rectangle. The new
 *     `.k-chip-group` is the canonical cell-level chip
 *     group (smaller gap than `.k-chip-list` to fit dense
 *     table cells) and is available to any other table that
 *     renders multiple chips per cell (DadKit relation
 *     pickers, brand admin permission lists, RBAC matrices,
 *     etc.). Each chip remains a screen-reader-distinct
 *     `<span>` so accessibility is preserved.
 *   - §37 `.k-card--flush` edge-to-edge variant: a card
 *     whose padding is set to 0 so the inner content (a
 *     table, a media grid, etc.) can use the full card
 *     width without inheriting the default `clamp(1.5rem,
 *     3vw, 2.5rem)` card padding. Pairs with the existing
 *     `.k-table-wrap` (which has its own border + overflow
 *     behavior) so the table reads as a single continuous
 *     data list rather than a stack of nested cards inside
 *     a centered container. The wholesale admin
 *     `admin_leads` view is migrated to the same pattern
 *     so the lead table goes edge-to-edge too.
 *   - §26.7 social-queue platform subnav (Global / Instagram /
 *     Facebook / X / TikTok / Bluesky) is reworked into a centered
 *     "pills in a rail" pattern: each child is a separate pill with
 *     2px borders, the active pill flips to acid-yellow background
 *     with dark text, and the hover state uses the acid-yellow
 *     accent. The shared `.k-tabs` strip picks up a `--pills` variant
 *     so any other subnav row (leads status filter, wholesale admin
 *     section switcher, etc.) gets the same well-considered look.
 *   - §26.8 utility card treatment (CLEAR / FILL) replaces the
 *     colored border with a 4px left status accent bar + an uppercase
 *     eyebrow row in the status color, so the destructive and
 *     constructive utility surfaces read as deliberately different
 *     from the settings cards above. The structural 2px border is
 *     kept (per the §5 shape language) but uses the default border
 *     token, not a status color.
 *   - §26.3 settings cards: typography hierarchy on the card header
 *     is bumped to use the kinetic scale (`.k-sq-card__header` is the
 *     section-level heading, `.k-sq-card__title` is the card title,
 *     `.k-label` is the field label, `.k-help` is the helper text),
 *     so the settings page reads as a hierarchy of distinct levels
 *     rather than a wall of similar-sized text.
 *   - §26.3 `.k-sq-tab-content` vertical gap bumped to `--gp-sp-6`
 *     so adjacent cards have visible breathing room and the section
 *     dividers are obvious.
 *   - §19.4 page-title watermark: the shell now removes
 *     `.app-content` top padding on pages that render the title,
 *     so the heading sits directly below the header without a
 *     negative offset. The watermark still bleeds above the
 *     section and is clipped by the section's `overflow: hidden`.
 *     The previous bottom-anchored layout with a tall `min-height`
 *     showed the full watermark and left a black bar between the
 *     topbar and the heading.
 *   - §4 `.k-table tbody td` row separator: bumped from 1px to
 *     2px per the prompt's §7.4 / §15.4 spec. The last row's
 *     bottom border is dropped so the table doesn't double up
 *     against any container border.
 *   - §24.3 `.k-list-row--log`: row separator bumped to 2px for
 *     the same reason (log viewer, system dashboard log list,
 *     cron run lists).
 *   - §30.4 `.k-pa-product-table__row`: added 2px border-top on
 *     every data row (skipped on the first child) so the
 *     product admin dashboard rows are clearly separated.
 *   - §30.4 `.k-pa-hybrid-cell--info .k-pa-hybrid-title`:
 *     title is now a 2.2-3x scale jump over the secondary meta
 *     line with a 4px acid-yellow accent bar so it reads as
 *     the dominant identifier for the row.
 *   - §30.4 `.k-pa-hybrid-control` + inner inputs/toggle: added
 *     a muted-background + 2px border "field slot" frame so the
 *     inline edit fields (slider, social exclude toggle,
 *     shortcode text input, etc.) read as obviously editable,
 *     distinct from the read-only labels and values around them.
 *     The focus state flips the slot to acid-yellow border +
 *     dark background so the active control is unmissable.
 *   - §4 / §15 dashboard rhythm: `.k-sysdash-card` and
 *     `.k-sysdash-page` / `.k-sysdash-grid` padding + gaps
 *     bumped to `--gp-sp-6` / `--gp-sp-8` so the system
 *     dashboard cards and section breaks have the breathing
 *     room the prompt prescribes (was `--gp-sp-4` / 16px
 *     everywhere, which read as cramped).
 *   - §4 / §19 page-title gap: `.kinetic-page-title` flush to the
 *     top of the content division with the shell padding removed
 *     on pages that render it, so the page heading no longer
 *     consumes half the above-the-fold area. The decorative
 *     watermark now bleeds above the section so its top edge is
 *     clipped, restoring the artful "graphic element" look the
 *     original redesign had.
 *   - §7.19 KPI tile three states: `.k-stat-marquee__cell`
 *     and `.k-sysdash-kpi` now expose `--active` (acid-yellow
 *     number, bright label) and `--inactive` (muted gray
 *     number + label) modifiers. The system dashboard
 *     stamps the right modifier per cell based on count>0.
 *   - §7.19 KPI hover: the `.k-stat-marquee` /
 *     `.k-stat-marquee--hero` 24px row padding is moved onto
 *     the cells so the hover background extends to the top
 *     and bottom yellow border lines of the marquee. The
 *     internal cell padding now provides the visual gap
 *     between the green hover fill and the number/label
 *     inside each cell.
 *   - §19.3 footer STATUS row: `.kinetic-footer__marquee`
 *     and the `:empty::before` static "STATUS · ALL CRON
 *     QUIET" copy are removed. The footer partial no longer
 *     emits the strip (see `src/Ui/partials/footer.php`).
 *   - §35 wholesale settings form-improver: introduces the
 *     flat-block form-section family (`.k-form-section`,
 *     `.k-form-section__header` / `__desc`,
 *     `.k-section-title` with the 4px acid-yellow left
 *     border, `.k-subsection-title`, `.k-form-row` /
 *     `.k-form-row--aligned` / `--2col` / `--3col` / `--4col`,
 *     `.k-info-block`, `.k-input--upper` / `--code` /
 *     `--secret`). These are the foundation classes the
 *     wholesale admin settings form restructures on, and
 *     are the canonical reference for any subsequent
 *     settings page form-improver pass. The new JS
 *     `data-kinetic-reveal` /
 *     `data-kinetic-reveal-target` toggle mechanism
 *     (wired in `kinetic/components.js`) is the corresponding
 *     reveal-on-toggle helper.
 *
 * Load order: Loaded AFTER tokens.css, fonts.css, reset.css, and
 *             base.css. Loaded BEFORE motion.css. The `app.css`
 *             file from the AdminLTE era is loaded after this file
 *             and provides the DadKit-specific overrides
 *             (`dadkit-*` rule blocks).
 *
 * Rules in this file MUST be high-specificity enough to win
 * against the Bootstrap component CSS that is still loaded for
 * the grid/utilities subset. We use `.k-*` class names so the
 * migration is opt-in per tool.
 *
 * Component library (Phase 2):
 *   - .k-card (k-card, k-card--bordered, k-card--flat,
 *              k-card--filled, k-card--flush, k-card--hover,
 *              k-card--historical, k-card--group,
 *              k-card__header, k-card__footer)
 *   - .k-btn  (k-btn, k-btn--primary, k-btn--outline,
 *              k-btn--ghost, k-btn--danger, k-btn--success,
 *              k-btn--sm, k-btn--lg, k-btn--block, k-btn--icon,
 *              k-btn--loading)
 *   - .k-input, .k-input--multiline, .k-input--search,
 *     .k-input--error, .k-input--primary, .k-input--compact
 *   - .k-select, .k-toggle, .k-check, .k-radio,
 *     .k-chip-select, .k-chip-input
 *   - .k-label, .k-help, .k-field, .k-fieldset,
 *     .k-form__actions, .k-form__actions--sticky
 *   - .k-slider, .k-file, .k-combobox, .k-rating
 *   - .k-table, .k-table--zebra, .k-table--dense,
 *     .k-table--fixed, .k-table--sticky-header,
 *     .k-table__sort, .k-table__empty
 *   - .k-modal, .k-modal__panel, .k-modal__header,
 *     .k-modal__title, .k-modal__body, .k-modal__footer
 *   - .k-tabs, .k-tab, .k-breadcrumb
 *   - .k-toast, .k-toast--{info,success,warning,danger},
 *     .k-toast-container
 *   - .k-badge, .k-badge--filled, .k-chip, .k-chip--removable
 *   - .k-alert, .k-alert--{info,success,warning,danger}
 *   - .k-pagination
 *   - .k-progress, .k-spinner, .k-spinner--inline
 *   - .k-stat-tile, .k-stat-marquee
 *   - .k-social-tile, .k-social-tile--historical
 *   - .k-list-row, .k-list-row__title, .k-list-row__meta
 *   - .k-segmented, .k-seg
 *   - .k-drawer, .k-drawer--side
 *   - .k-collapse
 *   - .k-fade-in
 *
 * DadKit additions in Phase 3 (DadKit base components):
 *   - .k-top-toolbar (+ --split), .k-input--search-wrapper,
 *     .k-input--search-icon
 *   - .k-action-stack, .k-drawer--inline, .k-drawer__archive-form,
 *     .k-drawer__read-table, .k-drawer__read-label,
 *     .k-table--borderless
 *   - .k-sync-indicator, .k-sync-dot (saving / saved / error states)
 *   - .k-chip__remove, .k-chip-list
 *   - .k-field--inline, .k-field--toggle
 *   - .k-toggle--platform, .k-choice-buttons, .k-preset-buttons
 *   - .k-collapse--advanced
 *   - .k-contact-info, .k-social-account-row, .k-table__load-more
 *
 * Phase 4 (DadKit protected row blocks) added the following new
 *   classes to the block-level surface for the four protected
 *   row templates (media, model, model_leads, photographer):
 *   - .k-media-row, .k-media-block, .k-media-main, .k-media-preview,
 *     .k-media-empty, .k-media-variants, .k-variant-zone,
 *     .k-variant-zone--custom, .k-variant-zone__label,
 *     .k-variant-zone__count, .k-media-variant-thumb,
 *     .k-dropzone--active
 *   - .k-model-row, .k-photo-block, .k-photo-block__img,
 *     .k-photo-block__placeholder, .k-photo-block--poster
 *   - .k-photographer-row
 *   - .k-inline-grid (+ --status), .k-inline-field, .k-inline-label
 *   - .k-bulk-upload (+ __card, __title, __actions, __button,
 *     __drop-note, __status)
 *   - .k-crop-stage, .k-crop-dialog, .k-crop-content,
 *     .k-media-preview-dialog, .k-media-preview-modal-image,
 *     .k-cropper-view-box, .k-cropper-point
 *
 * Chrome added in Phase 1 (Global layout chrome):
 *   - .kinetic-topbar (+ __inner, __primary, __actions, __brand,
 *     __brand-eyebrow, __brand-text, __icon-btn, __icon-label,
 *     __sidebar-toggle)
 *   - .kinetic-sidebar (+ __brand, __brand-link, __brand-mark,
 *     __nav, __section, __section-header, __group, __group-children,
 *     __link, __link-icon, __link-text, __chevron)
 *   - .kinetic-footer (+ __inner, __copyright, __meta, __meta-item,
 *     __marquee)
 *   - .kinetic-page-title (+ __primary, __eyebrow, __heading,
 *     __watermark)
 *   - .kinetic-breadcrumb (+ __item)
 *   - .kinetic-brand-required (+ __title, __choices, __choice,
 *     __empty)
 *
 * Phase 5 (Root system dashboard) added the dashboard-specific
 *   classes (re-skin of the bespoke `.sysdash-*` block in
 *   `src/System/Ui/views/system_dashboard.php`):
 *   - .k-sysdash-page, .k-sysdash-grid, .k-sysdash-span-full,
 *     .k-sysdash-span-half
 *   - .k-sysdash-card (+ --historical, --storage), .k-sysdash-card__header,
 *     .k-sysdash-card__eyebrow, .k-sysdash-card__title,
 *     .k-sysdash-card__action, .k-sysdash-card__secondary-links,
 *     .k-sysdash-card__footer-note
 *   - .k-sysdash-social-grid, .k-sysdash-social-tile (+ --empty,
 *     __image, __scrim, __body, __topline, __chip, __chip-icon,
 *     __chip-label, __chip-handle, __chip-status, __title,
 *     __caption, __time, __video)
 *   - .k-sysdash-social-token-{instagram,facebook,x,twitter,tiktok,
 *     bluesky,youtube,pinterest} (preserves the per-platform icon
 *     background colors)
 *   - .k-sysdash-kpi-grid, .k-sysdash-kpi (+ __value, __label)
 *   - .k-sysdash-list, .k-sysdash-mini-list, .k-sysdash-list__row,
 *     .k-sysdash-list__title, .k-sysdash-list__meta,
 *     .k-sysdash-badges
 *   - .k-sysdash-log-grid, .k-sysdash-log-grid__item,
 *     .k-sysdash-log-grid__bucket
 *   - .k-sysdash-metric-grid, .k-sysdash-metric-row (+ __label,
 *     __caption, __value)
 *   - .k-sysdash-bottom-grid
 *   - .k-sysdash-storage-summary (+ __topline, __value, __meta,
 *     __progress, __footer)
 *   - .k-sysdash-storage-list, .k-sysdash-storage-row (+ --expandable,
 *     __summary, __topline, __label, __path, __value-group, __value,
 *     __share, __progress, __bar, --danger, --warning, --info, --muted)
 *   - .k-sysdash-storage-row__nested (+ __item, __text, __label,
 *     __path, __stats, __value, __share)
 *   - .k-sysdash-storage-drilldowns
 *   - .k-sysdash-storage-details (+ __summary, __body)
 *   - .k-sysdash-storage-detail-row (+ __text, __label, __path,
 *     __stats, __value, __share)
 *   - .k-sysdash-empty
 *   - .k-sysdash-placeholder (+ __eyebrow, __title, __body, __action)
 *   - .k-sysdash-loading
 *   - .k-stat-marquee--hero (acid yellow on black, "Live Stats" hero
 *     strip; Phase 17 wires the JS to fill the cells)
 *
 * Phase 8 (Social queue + Social media tool + DadDev widget) added
 *   the per-tool surface for the social queue timeline / history /
 *   settings panels and the DadDev floating chat widget + page mode.
 *   The social queue uses the existing shared primitives (`.k-input`,
 *   `.k-select`, `.k-btn`, `.k-tabs`, `.k-table`, `.k-card`, etc.) and
 *   adds the bespoke layout containers (`.k-sq-toolbar`,
 *   `.k-sq-network-filter`, `.k-sq-timeline`, `.k-sq-post-box`, etc.).
 *   The DadDev widget preserves its bespoke data contract (every
 *   `data-*` attribute, class, ID, and event name is preserved) and
 *   is re-skinned only via new `.k-daddev-*` selectors that win on
 *   specificity. The PIN entry is the toned-down security variant
 *   (sharp corners + monospace, no acid-yellow color flips).
 *   - .k-sq-toolbar (+ __inner, __filter, __divider, __quicklinks)
 *   - .k-sq-network-filter (+ __pill, __pill--active, __pill--icon)
 *   - .k-sq-network-quicklink (+ __link, --instagram, --facebook,
 *     --x, --twitter, --tiktok, --bluesky, --youtube, --pinterest,
 *     --default) — preserves the per-platform brand colors
 *   - .k-sq-tab-content (+ __card, __section)
 *   - .k-sq-card, .k-sq-card__header, .k-sq-card__title,
 *     .k-sq-card__body, .k-sq-card__footer
 *   - .k-sq-timeline (+ __day-separator, __day-label, __item,
 *     __time, __date, __post-box, __post-main, __content,
 *     __media, __post-thumb, __video-tile)
 *   - .k-sq-post-network (+ __handle, __id, --instagram, --facebook,
 *     --x, --twitter, --tiktok, --bluesky, --youtube, --pinterest,
 *     --default) — preserves the per-platform brand colors
 *   - .k-sq-promo-preview (+ --prepend, --append)
 *   - .k-sq-readiness (+ --ready, --blocked)
 *   - .k-sq-caption-form (+ __input, __save)
 *   - .k-sq-action-bar (+ --spacer, --group)
 *   - .k-sq-history-filter (+ __wrap)
 *   - .k-sq-history-table (+ __id, __net, __net-pill, --instagram,
 *     --facebook, --x, --twitter, --tiktok, --bluesky, --youtube,
 *     --pinterest, --default, __status, __time, __product, __media,
 *     __error, __actions)
 *   - .k-sq-platform-tabs (+ __tab, __tab--active, __tab-content)
 *   - .k-sq-settings-card, .k-sq-settings-card--warning,
 *     .k-sq-settings-card--success
 *   - .k-sq-toggle, .k-sq-toggle--important (+ __input, __label)
 *   - .k-sq-twigs, .k-sq-twigs__item, .k-sq-twigs__snippet,
 *     .k-sq-copy-pill
 *   - .k-sq-modetoggle (+ __pill, __pill--active)
 *   - .k-sq-clear-bar (+ __label, __btn)
 *   - .k-sq-restrictions (+ __row, __label, __value)
 *   - .k-sq-alt-grid, .k-sq-alt-card, .k-sq-alt-card__body,
 *     .k-sq-alt-card__footer, .k-sq-alt-thumb
 *   - .k-daddev-fab (+ --open) — replaces the blue gradient FAB
 *     with a flat acid-yellow 64×64 square (Phase 8.6)
 *   - .k-daddev-backdrop, .k-daddev-panel, .k-daddev-panel-header,
 *     .k-daddev-avatar, .k-daddev-title, .k-daddev-subtitle,
 *     .k-daddev-head-actions, .k-daddev-icon-btn, .k-daddev-menu,
 *     .k-daddev-menu-divider, .k-daddev-menu-heading,
 *     .k-daddev-menu-session, .k-daddev-menu-settings,
 *     .k-daddev-setting-row
 *   - .k-daddev-bridge, .k-daddev-bridge--up
 *   - .k-daddev-stream, .k-daddev-row (+ --user, --assistant,
 *     --system, --step), .k-daddev-bubble, .k-daddev-progress
 *   - .k-daddev-approval (+ __title, __preview, __actions,
 *     __approve, __deny, __resolved)
 *   - .k-daddev-lock-screen, .k-daddev-lock-card,
 *     .k-daddev-lock-kicker, .k-daddev-lock-title,
 *     .k-daddev-lock-subtitle
 *   - .k-daddev-pin-dots, .k-daddev-pin-dot (+ --filled)
 *   - .k-daddev-pin-grid, .k-daddev-pin-key (+ --action,
 *     --submit) — Toned-down variant per §7.27
 *   - .k-daddev-composer (+ __textarea, __actions, __status,
 *     __activity, __activity-char)
 *   - .k-daddev-action-btns (+ __send, __interrupt)
 *   - .k-daddev-page-shell (page mode container)
 *   - .k-daddev-page (page mode body class)
 *
 * Phase 7 (Server monitor + System health watch + Social account
 *   updates) added the live-telemetry and per-platform components:
 *   - .k-metric-card (+ --compact, --danger, --warning, --success,
 *     __eyebrow, __value, __sub, __progress)
 *   - .k-metric-grid (responsive 4-column grid for the
 *     server_monitor KPIs)
 *   - .k-metric-detail-card (+ __heading, __row, __label, __value,
 *     __progress) for the Memory / CPU + Uptime detail cards
 *   - .k-metric-mini-card (+ __label, __value) for the smaller
 *     grid cells (Peak Mem% / Swap% / Load/Core% etc.)
 *   - .k-live-indicator (+ __dot, __label) — acid-yellow dot +
 *     uppercase LIVE/PAUSED label, replaces the legacy
 *     `text-bg-secondary / text-bg-success` badges on the
 *     server monitor top strip. NOTE: this is a separate class
 *     from the Phase 3 `.k-sync-indicator` (DadKit inline-save
 *     indicator) — they share a naming theme but are distinct
 *     components.
 *   - .k-log-stream (+ __row, __line, __time, __level, __body,
 *     --info, --notice, --warning, --error, --critical) — full-bleed
 *     .k-card--flat with monospace rows; used for the server monitor
 *     log tail and (when collapsed) the system health watch JSON
 *     context blocks
 *   - .k-platform-card (+ __header, __name, __rate, __stat, __label,
 *     __value, --danger, --warning, --success) — per-platform health
 *     tile for the social account updates "Per-Platform Health"
 *     section (and reused for the system health watch process
 *     family summaries)
 *   - .k-anomaly-row (+ __cell, __cell--{info,warning,danger,muted},
 *     __tooltip) — 64×64 color-coded squares for the system health
 *     watch anomaly timeline
 *   - .k-process-table (+ __meta, __cmd, __bar) — the server
 *     monitor top-processes table cells
 *   - .k-debug-bootstrap (+ __copy, __textarea) — the AI Debug
 *        Bootstrap card on server monitor
 *
 * Phase 9 (Wholesale admin) added the wholesale-specific surface
 *   (49 new classes, see §27 below for the full list).
 *
 * Phase 11 (Promotions tool) added the per-tool surface for the
 *   Promotions admin tool. The shared primitives are reused
 *   wherever possible. The bespoke classes add:
 *   - .k-promo-calendar (+ __month, __month__header, __month__title)
 *   - .k-promo-calendar-table, .k-promo-cal-cell (+ --empty, --today),
 *     .k-promo-cal-cell--drag-{range,start,end,continues-left,
 *     continues-right}
 *   - .k-promo-cal-day-head, .k-promo-cal-day-num, .k-promo-cal-day-dow,
 *     .k-promo-cal-cell__hint, .k-promo-cal-observances,
 *     .k-promo-cal-observance (+ --more)
 *   - .k-promo-cal-chip (+ --continues-left, --continues-right,
 *     --legend, --draft, --approved, --active, --ended, --canceled,
 *     --failed, --failed_unlaunch, --lightning-type, --lightning-
 *     projected)
 *   - .k-promo-calendar-dragging
 *   - .k-promo-calendar-legend (+ __tz), .k-promo-calendar-load-more
 *   - .k-promo-panel (+ __header, __eyebrow, __title, __body,
 *     __actions)
 *   - .k-promo-field-label, .k-promo-field-label__required,
 *     .k-promo-form-timezone
 *   - .k-promo-input, .k-promo-code-input, .k-promo-theme-editor
 *   - .k-promo-toggle-label, .k-promo-help-toggle, .k-promo-help,
 *     .k-promo-compact-action, .k-promo-preview-frame
 *   - .k-promo-code-tabs (the editor's HTML/CSS/JS sub-tabs)
 *   - .k-promo-form--readonly
 *   - .k-promo-action-tile (+ __icon, __body, __title, __sub,
 *     __chevron)
 *   - .k-promo-autosave-indicator
 *   - .k-promo-agent-shell, .k-promo-agent-topbar (+ __main),
 *     .k-promo-agent-kicker, .k-promo-agent-title, .k-promo-agent-meta,
 *     .k-promo-agent-edit-link
 *   - .k-promo-agent-workspace (2-col on >=992px)
 *   - .k-promo-agent-chat-panel, .k-promo-agent-preview-panel,
 *     .k-promo-agent-chat-head, .k-promo-agent-preview-head
 *   - .k-promo-agent-status, .k-promo-agent-working-file
 *   - .k-promo-agent-chat, .k-promo-agent-composer, .k-promo-agent-input,
 *     .k-promo-agent-send
 *   - .k-promo-agent-preview-frame-wrap, .k-promo-agent-panel
 *     (+ __header, __body), .k-promo-agent-code
 *   - .k-promo-agent-bubble (+ --user, --assistant, --system),
 *     .k-promo-agent-avatar, .k-promo-agent-msg (+ --system)
 *   - .k-promo-design-step (+ --active), .k-promo-design-card
 *     (+ --center)
 *   - .k-promo-design-stepbar, .k-promo-design-section
 *   - .k-promo-design-tag-grid, .k-promo-design-tag
 *   - .k-promo-design-input-block, .k-promo-design-text-input
 *     (+ --grow-textarea)
 *   - .k-promo-design-add-row, .k-promo-design-feature-block
 *   - .k-promo-design-image-section, .k-promo-design-media-target
 *   - .k-promo-design-loading, .k-promo-design-empty
 *   - .k-promo-design-template-head, .k-promo-design-template-grid
 *   - .k-promo-design-template-card (+ __preview, __body, __title,
 *     __meta)
 *   - .k-promo-design-filter-bar, .k-promo-design-filter-btn
 *   - .k-promo-design-media-grid, .k-promo-design-media-option
 *     (+ __frame, __title, __meta)
 *   - .k-promo-design-gif-groups, .k-promo-design-gif-group
 *     (+ __head)
 *   - .k-promo-design-load-more, .k-promo-design-primary
 *   - .k-promo-gifs-shell, .k-promo-gifs-topbar (+ __title, __kicker)
 *   - .k-promo-gifs-panel, .k-promo-gifs-thumb, .k-promo-gifs-url
 *   - .k-promo-gifs-swatches, .k-promo-templates-shell,
 *     .k-promo-templates-topbar, .k-promo-templates-panel
 *   - .k-promo-template-code, .k-promo-template-tab-info
 *   - .k-promo-template-preview-box (+ __head),
 *     .k-promo-template-description
 *   - .k-promo-launch-status--{success,partial,failed}
 *   - .k-promo-launch-count-ok, .k-promo-launch-count-fail,
 *     .k-promo-launch-count-total
 *   - .k-promo-launch-errors, .k-promo-launch-empty
 *   - .k-promo-settings-page, .k-promo-settings-section
 *     (+ __header, __title, __body, __desc)
 *   - .k-promo-settings-meta-row, .k-promo-settings-actions
 *   - .k-promo-settings-meta, .k-promo-settings-meta__count
 *   - .k-promo-settings-row (+ __body, __title, __desc)
 *   - .k-promo-lightning, .k-promo-lightning-exclusions
 *   - .k-promo-lightning-exclusion-chip (+ __remove)
 *   - .k-promo-lightning-exclusions-empty
 *   - .k-promo-lightning-queue (+ __head, __list, __weight, __empty)
 *   - .k-promo-lightning-product-search-results,
 *     .k-promo-lightning-product-search-result
 *   - .k-promo-lightning-product-search-empty
 *   - .k-promo-newsletter-slot (+ __eyebrow, __eyebrow--primary,
 *     __eyebrow--success, __eyebrow--danger, __desc, __hint)
 *   - .k-promo-newsletter-page-header, .k-promo-newsletter-feedback
 *   - .k-promo-price-before, .k-promo-price-after,
 *     .k-promo-price-discount, .k-promo-price-rule
 *   - .k-promo-price-empty, .k-promo-price-warning-row,
 *     .k-promo-price-warning, .k-promo-price-summary
 *   - .k-promo-list (+ __head, __title, __sub, __title-group, __empty,
 *     __link)
 *   - .k-nl-list, .k-nl-list__head, .k-nl-list__title,
 *     .k-nl-list__sub, .k-nl-list__empty, .k-nl-list__link
 *   - .k-nl-cal (+ __head, __month, __nav, __legend,
 *     __legend-item, __legend-swatch)
 *   - .k-nl-cal-grid, .k-nl-cal-cell (+ --today, --blank, --gap)
 *   - .k-nl-cal-day-num (+ --today), .k-nl-cal-chip,
 *     .k-nl-promo-bar, .k-nl-cal-add, .k-nl-cal-gap-hint
 *   - .k-nl-editor (+ __feedback, __form, __col, __col--left,
 *     __col--right), .k-nl-editor-card, .k-nl-editor-actions
 *   - .k-nl-product-slot (+ __head, __title, __actions, __body,
 *     __row, __col, __col--image, __col--fields, __field)
 *   - .k-nl-image-slot (+ __img, __placeholder, __replace)
 *   - .k-nl-status-actions, .k-nl-schedule-row
 *   - .k-nl-preview-frame, .k-nl-preview-wrap
 *   - .k-nl-send-info (+ __row, __label, __value, __meta,
 *     __actions), .k-nl-nearby-promo (+ __list, __item,
 *     __item-name, __item-dates), .k-nl-generate-variants
 *   - .k-nl-audit (+ __head, __status, __counts, __finding,
 *     __finding-row, __finding-icon, __finding-body, __finding-title,
 *     __finding-detail), .k-nl-audit-spamassassin
 *   - .k-nl-settings (+ __field, __form, __row, __actions,
 *     __switch-row, __switch-help, __switch-warning, __planned,
 *     __planned-row)
 *   - .k-nl-subscribers (+ __stats, __stat, __stat-value,
 *     __stat-label, __action-bar, __manual-add, __manual-add-form,
 *     __table-wrap, __empty, __pagination, __count)
 *   - .k-nl-import (+ __upload, __upload-form, __upload-help,
 *     __history, __history-empty, __errors, __errors-list)
 *   - .k-nl-send-log (+ __summary, __row, __status, __count,
 *     __count-failed, __error)
 *   - .k-nl-picker (+ __head, __type-grid, __type-option,
 *     __type-option-name, __type-option-desc, __divider,
 *     __promo-divider, __promo-list, __promo-option,
 *     __promo-option-name, __promo-option-dates, __empty,
 *     __actions, __cancel), .k-nl-modal (+ __backdrop, __panel,
 *     __close, __body, __close-btn)
 *   - .k-nl-variant (+ __intro, __subject, __grid, __col,
 *     __card, __card-head, __card-label, __card-option,
 *     __card-preview, __card-preview-frame, __card-footer,
 *     __card-cta)
 *   - .k-nl-type-button (+ __title, __desc)
 *
 * Phase 13 (Media admin + Media search + Product admin) added the
 *   per-tool surface for the media search shell, the product admin
 *   hybrid row, the product admin features editor, and the new
 *   `k-pa-*` adapter helpers. The shared primitives (`.k-card`,
 *   `.k-btn`, `.k-input`, `.k-table`, `.k-alert`, `.k-empty-state`,
 *   `.k-tabs`, etc.) are reused wherever possible; the bespoke
 *   classes below add the per-tool layout chrome.
 *   - .k-ms-shell (+ __head, __primary, __heading, __advanced-toggle,
 *     __body, __search-field, __advanced, __filter-grid,
 *     __filter-cell, __filter-cell--wide, __switches, __actions,
 *     __exclude, __results, __loading)
 *   - .k-msr-toolbar (+ __count, __per-page)
 *   - .k-msr-grid (1 → 2 → 3 → 4 column responsive)
 *   - .k-msr-card (+ __media, __no-preview, __body, __title, __meta,
 *     __meta-tags, __meta-models)
 *   - .k-msr-modal-details (+ __group, __heading, __row, __models,
 *     __empty)
 *   - .k-pa-record (+ __media, __media-placeholder, __body, __identity,
 *     __heading, __title, __meta, __handle, __fields, __field, __label,
 *     __actions and field modifiers)
 *   - .k-pa-hybrid-slider, .k-pa-hybrid-control,
 *     .k-pa-hybrid-editor-btn
 *   - .k-pa-sync-action, .k-pa-sync-notice, .k-pa-products-list
 *   - .k-pa-product-table (+ __row, __cell)
 *   - .k-pa-modal-loading
 *   - .k-pa-definitions-tabs (+ __content, __pane, __pane--active)
 *   - .k-pa-features-editor (+ __row, __col, __image-card,
 *     __image-toolbar, __image-toolbar-label, __image-wrap, __image-help,
 *     __dot-layer, __dot, __dot--desktop, __dot--mobile,
 *     __feature-list, __feature-card, __feature-title, __feature-grid,
 *     __field, __debug, __actions, __alert, __alert-title, __alert-body)
 *   - .k-pagination__btn (+ is-disabled), .k-pagination__label
 *   - .k-tab__btn (button inside a tab)
 *
 * Phase 15 (Brand admin + Placeholder tools) added the per-tool
 *   surface for the 8 placeholder tools (Order Monitor, Homepage
 *   Updater, Inventory Reorder, Amazon Restock, Product Asset
 *   Generator, Product Description Tool, Employee Ops Dashboard)
 *   and the Brand Admin tool. The placeholder tools all render
 *   through `src/Ui/PlaceholderAppPage.php`; the Brand Admin
 *   renders through the standard DadKit list + drawer + form
 *   pattern (Phase 3) with a single custom list cell that
 *   combines a 48×48 color swatch logo + a 24px bold uppercase
 *   name. The DadKit.php `errorPage()` helper is also re-skinned
 *   to use the kinetic `.k-alert.k-alert--danger` pattern.
 *   - .k-alert--placeholder (full-bleed acid-yellow page alert)
 *   - .k-alert__eyebrow (12px uppercase tracking-widest)
 *   - .k-alert__message + __message--hero (48px bold uppercase
 *     tracking-tighter headline)
 *   - .k-alert__body (16px body copy)
 *   - .k-alert__action (back-to-dashboard action row)
 *   - .k-brand-identity (brand admin first-column cell)
 *   - .k-brand-identity__swatch (48x48 sharp color thumbnail)
 *   - .k-brand-identity__text (flex column wrapper)
 *   - .k-brand-identity__name (24px bold uppercase name)
 *   - .k-brand-identity__slug (12px uppercase tracking-widest)
 *   - .k-dadkit-error-card (+ __title, __body) — the
 *     `DadKit::errorPage()` helper co-class
 *
 * Phase 16 (Public API surfaces) added the public auth +
 *   OAuth callback shells. The login page
 *   (`public/auth/login.php`) and the Meta OAuth callback
 *   (`public/meta_oauth_callback.php`) both render through
 *   `Layout::render` with `show_header/show_sidebar/show_footer
 *   = false` and a body class (`k-login-page` or
 *   `k-callback-page`) that triggers the new §33 surface.
 *   The new class names are listed in §33 at the bottom of
 *   this file. The wholesale portal is unaffected (every
 *   §33 selector is scoped to `body:not(.wholesale-portal-body)`).
 *   The machine endpoints (`import.php`, `mcp.php`,
 *   `thumb.php`, `newsletter/subscribe.php`,
 *   `newsletter/ses_webhook.php`) are JSON- or plain-text-only
 *   and have no human-visible HTML to re-skin, so they are
 *   preserved verbatim.
 *   - body.k-login-page, body.k-callback-page (body class)
 *   - .k-login, .k-callback (full-bleed flex wrapper)
 *   - .k-login__card, .k-callback__card (centered 32rem card)
 *   - .k-login__eyebrow, .k-callback__eyebrow (12px eyebrow)
 *   - .k-login__title, .k-callback__title (clamp 2.5-4rem H1)
 *   - .k-login__form, .k-login__field (form/field rows)
 *   - .k-login__check, .k-login__check-label (remember-me row)
 *   - .k-login__submit (block-width submit)
 *   - .k-login__brand-strip (footer strip with label + link)
 *   - .k-callback__status (flex row for check + eyebrow)
 *   - .k-callback__check (+ --error, --info, __check-glyph)
 *   - .k-callback__pre (monospace connection detail block)
 *   - .k-callback__hint (follow-up hint row)
 *   - .k-callback__back (back link with inline <code>)
 */

/* ---- 1. Cards --------------------------------------------------------- */

.k-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

.k-card--bordered { /* default; explicit alias */ }
.k-card--flat {
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
/* Edge-to-edge card. Drops the default `clamp(1.5rem, 3vw, 2.5rem)`
 * card padding so the inner content (typically a `.k-table-wrap`
 * with its own border, or a media grid) can use the full card
 * width. Used by data-dense list surfaces (api_tokens list,
 * wholesale admin leads) where the card chrome would otherwise
 * waste ~48-80px of horizontal space on both sides of the table.
 * Per the prompt §11 anti-patterns the leaner treatment is
 * preferred for data-dense tables. */
.k-card--flush { padding: 0; }
.k-card--flush > .k-card__body { padding: 0; }
.k-card--flush > .k-table-wrap { border-left: 0; border-right: 0; border-bottom: 0; }
.k-card--flush > .k-toolbar-meta {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
}
.k-card--filled {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.k-card--filled .k-card__eyebrow,
.k-card--filled .k-card__meta {
    color: var(--gp-accent-fg);
}
.k-card--historical {
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
}
.k-card--hover:hover,
.k-card--hover:focus-within {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.k-card--hover:hover .k-card__eyebrow,
.k-card--hover:focus-within .k-card__eyebrow,
.k-card--hover:hover .k-card__meta,
.k-card--hover:focus-within .k-card__meta,
.k-card--hover:hover .k-card__title,
.k-card--hover:focus-within .k-card__title {
    color: var(--gp-accent-fg);
}

/* Group: parent card that auto-inverts child cards on hover/focus-within. */
.k-card--group:hover .k-card,
.k-card--group:focus-within .k-card,
.k-card--group:hover .k-card--hover,
.k-card--group:focus-within .k-card--hover {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.k-card--group:hover .k-card__eyebrow,
.k-card--group:focus-within .k-card__eyebrow,
.k-card--group:hover .k-card__title,
.k-card--group:focus-within .k-card__title,
.k-card--group:hover .k-card__meta,
.k-card--group:focus-within .k-card__meta {
    color: var(--gp-accent-fg);
}

/* Card with internal header / footer slots (used by modals, KPI tiles,
 * the system dashboard, etc.). */
.k-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    padding: 0 0 var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    margin-bottom: var(--gp-sp-4);
}
.k-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4) 0 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
    margin-top: var(--gp-sp-4);
}

.k-card__eyebrow {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    margin-bottom: var(--gp-sp-2);
}

.k-card__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 4vw, 3.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: inherit;
    margin: 0 0 var(--gp-sp-3);
}

.k-card__body { color: inherit; }
.k-card__meta { color: var(--gp-muted-foreground); font-size: 0.875rem; }

.k-card__number {
    display: block;
    font-family: var(--gp-font-display);
    font-size: clamp(6rem, 8vw, 12rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--gp-accent);
    text-align: center;
}

/* ---- 2. Buttons ------------------------------------------------------- */

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-3);
    min-height: 3.5rem;
    padding: 0 2rem;
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: transform var(--gp-dur) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
    line-height: 1.2;
}

.k-btn:hover { transform: scale(1.05); }
.k-btn:active { transform: scale(0.95); }
.k-btn:disabled,
.k-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

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

.k-btn--outline {
    background: transparent;
    color: var(--gp-fg);
    border-color: var(--gp-border);
}
.k-btn--outline:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}

.k-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--gp-fg);
}
.k-btn--ghost:hover { color: var(--gp-accent); }

.k-btn--danger {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
    border-color: var(--gp-danger);
}
.k-btn--danger:hover { filter: brightness(0.85); }

.k-btn--success {
    background: var(--gp-success);
    color: var(--gp-success-fg);
    border-color: var(--gp-success);
}
.k-btn--success:hover { filter: brightness(0.85); }

/* Reusable toggle-button pattern (`k-btn k-btn--toggle`).
 *
 * Use this when a button is acting as a binary on/off toggle
 * (not a static "success" CTA). The button reads as a clear
 * chip with the off-state being a hairline outline and the
 * on-state being a solid `--gp-success` fill. Pair with
 * the `is-on` modifier (or the data-attribute `data-on="1"`
 * for inline Alpine / vanilla JS) to flip to the on state.
 *
 * The legacy `is-true` / `is-false` modifiers set by the
 * `dadkitToggleChip` Alpine component in `app.js` are also
 * honored so the existing DadKit toggle chip picks up the
 * new toggle pattern without any JS change.
 *
 * Designed for DadKit's media-admin "Posting" / "Cleared"
 * toggle chip but reusable anywhere a clear on/off CTA is
 * needed (e.g. social account admin, photographer admin,
 * newsletter composer, etc.). */
.k-btn--toggle {
    background: transparent;
    color: var(--gp-muted-foreground);
    border-color: var(--gp-border);
    font-weight: 700;
}
.k-btn--toggle:hover {
    background: var(--gp-muted);
    color: var(--gp-fg);
    border-color: var(--gp-fg);
    transform: none;
}
.k-btn--toggle.is-on,
.k-btn--toggle.is-true,
.k-btn--toggle[data-on="1"] {
    background: var(--gp-success);
    color: var(--gp-success-fg);
    border-color: var(--gp-success);
}
.k-btn--toggle.is-on:hover,
.k-btn--toggle.is-true:hover,
.k-btn--toggle[data-on="1"]:hover {
    filter: brightness(0.92);
    color: var(--gp-success-fg);
    border-color: var(--gp-success);
    transform: none;
}
.k-btn--toggle.is-on:focus,
.k-btn--toggle.is-true:focus,
.k-btn--toggle[data-on="1"]:focus {
    color: var(--gp-success-fg);
    border-color: var(--gp-success);
}

.k-btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.75rem; }
.k-btn--lg { min-height: 5rem; padding: 0 3rem; font-size: 1rem; }
.k-btn--block { width: 100%; }
.k-btn--icon {
    min-width: 3.5rem;
    min-height: 3.5rem;
    padding: 0;
    width: 3.5rem;
    height: 3.5rem;
}

.k-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.k-btn--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: k-spin 0.6s linear infinite;
    color: var(--gp-bg);
}
.k-btn--loading.k-btn--outline::after { color: var(--gp-fg); }
.k-btn--loading.k-btn--ghost::after { color: var(--gp-fg); }

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

/* ---- 3. Inputs -------------------------------------------------------- */

.k-input,
.k-select,
input.k-input,
textarea.k-input,
select.k-select {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem var(--gp-sp-4);
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    /*
     * Defensive: never uppercase typed text. The kinetic style
     * uppercases all display copy (labels, headers, buttons) but
     * a user-input field must display the author's text exactly
     * as typed — promo prepending/appending, captions, log filter
     * strings, etc. all rely on the user being able to verify
     * case. The override applies to the typed text only; the
     * `::placeholder` is left to inherit if a downstream rule
     * styles it explicitly.
     */
    text-transform: none;
    transition:
        border-color var(--gp-dur) var(--gp-ease),
        background-color var(--gp-dur) var(--gp-ease);
}

/* Global defensive rule: never uppercase user-typed text in any
   input, textarea, or contenteditable region on the kinetic
   admin surface. Applies to native form controls AND to the
   legacy `.form-control` / `.form-select` classes that ship
   alongside `.k-input` on many of our pages. Wholesale portal
   is excluded (it has its own design language). */
body:not(.wholesale-portal-body) input,
body:not(.wholesale-portal-body) input[type="text"],
body:not(.wholesale-portal-body) input[type="email"],
body:not(.wholesale-portal-body) input[type="number"],
body:not(.wholesale-portal-body) input[type="password"],
body:not(.wholesale-portal-body) input[type="url"],
body:not(.wholesale-portal-body) input[type="time"],
body:not(.wholesale-portal-body) input[type="date"],
body:not(.wholesale-portal-body) input[type="datetime-local"],
body:not(.wholesale-portal-body) input[type="search"],
body:not(.wholesale-portal-body) input[type="tel"],
body:not(.wholesale-portal-body) input[type="week"],
body:not(.wholesale-portal-body) input[type="month"],
body:not(.wholesale-portal-body) input:not([type]),
body:not(.wholesale-portal-body) textarea,
body:not(.wholesale-portal-body) [contenteditable="true"] {
    text-transform: none;
}

.k-input::placeholder { color: var(--gp-muted); }

.k-input[readonly],
textarea.k-input[readonly] {
    background: var(--gp-muted);
}

.k-input:focus,
.k-select:focus {
    border-color: var(--gp-accent);
    outline: none;
    box-shadow: none;
}

.k-input--error,
.k-select--error {
    border-color: var(--gp-danger);
}

.k-input--multiline,
textarea.k-input--multiline {
    min-height: 9rem;
    padding: 1.25rem;
    border: var(--gp-border-w) solid var(--gp-border);
    resize: vertical;
    line-height: 1.4;
}

/* Auto-growing textarea. Starts at one line and grows with content up to
 * `data-autogrow-max-lines`, then scrolls. The shared `kineticAutoGrow`
 * helper in `components.js` measures `scrollHeight` on input and adjusts
 * the height. `resize: none` + `overflow-y: hidden` keep the box from
 * showing a scrollbar or drag handle while it is still growing. */
.k-textarea-autogrow {
    min-height: 0;
    resize: none;
    overflow-y: hidden;
    height: auto;
}

.k-input--primary {
    min-height: 6rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.k-input--compact {
    min-height: 2.5rem;
    font-size: 1rem;
    border-bottom-width: var(--gp-border-w-thin);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: 0.25rem 0.5rem;
}

.k-input--search {
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0 3rem 0 1.25rem;
    position: relative;
}

.k-input--mono,
textarea.k-input--mono {
    font-family: var(--gp-font-mono);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    word-break: break-all;
}

.k-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0 2.5rem 0 1.25rem;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--gp-fg) 50%),
                      linear-gradient(135deg, var(--gp-fg) 50%, transparent 50%);
    background-position: right 1.1rem center, right 0.6rem center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
.k-select:hover { border-color: var(--gp-accent); }

.k-label {
    display: block;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    margin-bottom: var(--gp-sp-2);
}
.k-label--required::after {
    content: ' *';
    color: var(--gp-danger);
    margin-left: 0.125rem;
}

.k-help {
    display: block;
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
    font-style: italic;
    line-height: 1.45;
    margin-top: 0.375rem;
}

.k-field-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.375rem;
    color: var(--gp-muted-foreground);
    cursor: help;
    vertical-align: middle;
    transition: color 0.15s ease;
    position: relative;
}

.k-field-info-icon:hover,
.k-field-info-icon:focus-visible {
    color: var(--gp-accent);
}

.k-field-info-icon i {
    font-size: 0.875rem;
}

.k-field-info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gp-bg);
    color: var(--gp-foreground);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: var(--gp-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    max-width: 18rem;
    white-space: normal;
    z-index: 100;
    box-shadow: var(--gp-shadow-md);
    pointer-events: none;
}

.k-field-info-tooltip.is-visible {
    display: block;
}

.k-field { display: block; margin-bottom: var(--gp-sp-8); }
.k-field--error .k-label { color: var(--gp-accent); }
.k-field--error .k-input,
.k-field--error .k-select { border-color: var(--gp-danger); }

.k-fieldset {
    border: 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
    padding-top: var(--gp-sp-6);
    margin: var(--gp-sp-8) 0;
}
.k-fieldset > legend {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-fg);
    padding: 0 var(--gp-sp-2);
}

.k-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-8);
}
.k-form__actions--sticky {
    position: sticky;
    bottom: 0;
    background: var(--gp-bg);
    border-top: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4) 0;
    z-index: 5;
}

.k-check,
.k-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    display: inline-block;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-radio { border-radius: 50% !important; }
.k-check:checked,
.k-radio:checked {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
}
.k-check:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.875rem;
    border-right: 3px solid var(--gp-bg);
    border-bottom: 3px solid var(--gp-bg);
    transform: rotate(45deg) translate(-1px, -2px);
}
.k-radio:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--gp-bg);
    border-radius: 50% !important;
}

/* Toggle (kinetic replacement for `.form-switch`) */
.k-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: 3.5rem;
    height: 2rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-toggle::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--gp-fg);
    transition: transform var(--gp-dur) var(--gp-ease);
}
.k-toggle:checked {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
}
.k-toggle:checked::after {
    background: var(--gp-accent-fg);
    transform: translateX(1.5rem);
}

/* File input (`.k-file`) */
.k-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    width: 100%;
    border: 2px dashed var(--gp-accent);
    background: transparent;
    color: var(--gp-fg);
    padding: var(--gp-sp-6);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}
.k-file:hover,
.k-file.is-dragover {
    background: var(--gp-muted);
}
.k-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Slider (`.k-slider`) */
.k-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    background: var(--gp-muted);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}
.k-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--gp-fg);
    cursor: pointer;
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 50% !important;
}
.k-slider::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--gp-fg);
    cursor: pointer;
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 50% !important;
}

/* Combobox (`.k-combobox`) */
.k-combobox {
    position: relative;
    display: block;
}
.k-combobox__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    max-height: 13.75rem;
    overflow-y: auto;
    display: none;
}
.k-combobox.is-open .k-combobox__results { display: block; }
.k-combobox__result {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0 var(--gp-sp-4);
    background: transparent;
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    text-align: left;
    cursor: pointer;
    font-family: var(--gp-font-body);
    text-transform: none;
    font-size: 0.875rem;
}
.k-combobox__result:hover,
.k-combobox__result.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* Chip-select (`.k-chip-select`) — multi-select rendered as a row of
 * `.k-chip` elements wrapping a hidden `<select multiple>`. The
 * chip-select has a min-height of 56px to match the `.k-input`
 * secondary density, with the chips inside flowing on a single row
 * (wrapping is allowed). */
.k-chip-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
    cursor: text;
}
.k-chip-select:focus-within { border-color: var(--gp-accent); }
.k-chip-select .k-chip-select__chips {
    display: contents;
}
.k-chip-select .k-chip { margin: 0; }
.k-chip-select select[multiple] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* String list chip input (`.k-chip-input`) — a free-form text input
 * paired with an "add" icon button that converts the input to a
 * `.k-chip--removable` element. Used by the DadKit `string_list`
 * inline block renderer. */
.k-chip-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: 0.5rem 0.75rem;
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    min-height: 3.5rem;
}
.k-chip-input:focus-within { border-color: var(--gp-accent); }
.k-chip-input input[type="text"] {
    flex: 1 1 8rem;
    min-width: 8rem;
    background: transparent;
    border: 0;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 0.25rem 0.5rem;
    min-height: 2rem;
    outline: none;
}
.k-chip-input input[type="text"]::placeholder { color: var(--gp-muted-foreground); }

/* Rating widget (`.k-rating`) — row of 56×56 square buttons used by
 * the DadKit `rating` field type and the new model admin row. The
 * active state inverts the square to acid-yellow + black text. */
.k-rating {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
    background: transparent;
}
.k-rating__btn {
    appearance: none;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    min-width: 3.5rem;
    min-height: 3.5rem;
    padding: 0;
    text-align: center;
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.k-rating__btn:last-child { border-right: 0; }
.k-rating__btn:hover,
.k-rating__btn.is-active,
.k-rating__btn[aria-pressed="true"] {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* ---- 4. Tables -------------------------------------------------------- */

.k-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--gp-font-body);
    color: var(--gp-fg);
}
.k-table thead th {
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    text-align: left;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
.k-table tbody td {
    padding: var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    font-size: 0.875rem;
    vertical-align: middle;
}
.k-table tbody tr { transition: background-color var(--gp-dur) var(--gp-ease); }
.k-table tbody tr:hover { background: var(--gp-muted); }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table--zebra tbody tr:nth-child(odd) { background: rgba(39, 39, 42, 0.4); }
.k-table--dense tbody td { padding: 0.5rem var(--gp-sp-3); }
.k-table--fixed { table-layout: fixed; }
.k-table--sticky-header thead th {
    position: sticky;
    top: var(--gp-topbar-h);
    z-index: 4;
}
.k-table__sort {
    display: inline-block;
    margin-left: 0.25rem;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    cursor: pointer;
}
.k-table__empty {
    text-align: center;
    padding: var(--gp-sp-16) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    font-size: 1rem;
}
.k-table td.k-table__cell--actions,
.k-table th.k-table__cell--actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
    padding-right: var(--gp-sp-3);
}
.k-table td.k-table__cell--num,
.k-table th.k-table__cell--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.k-table tr.k-table__row--danger td {
    background: rgba(255, 77, 79, 0.08);
    border-bottom-color: var(--gp-danger);
}

/* Responsive record variant for audit/admin tables where every field and row
 * action must remain visible on narrow screens. Callers provide a data-label on
 * each body cell; data-mobile-span="full" reserves a full-width identity row. */
@media (max-width: 767.98px) {
    .k-table-wrap--mobile-records {
        overflow: visible;
    }

    .k-table--mobile-records,
    .k-table--mobile-records tbody {
        display: block;
        width: 100%;
    }

    .k-table--mobile-records thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .k-table--mobile-records tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gp-sp-4);
        width: 100%;
        padding: var(--gp-sp-4) var(--k-page-gutter);
        border-bottom: var(--gp-border-w) solid var(--gp-border);
    }

    .k-table--dense.k-table--mobile-records tbody tr {
        gap: var(--gp-sp-3);
        padding: var(--gp-sp-3) var(--k-page-gutter);
    }

    .k-table--mobile-records tbody tr:last-child {
        border-bottom: 0;
    }

    .k-table--mobile-records tbody td,
    .k-table--mobile-records tbody td.k-table__cell--actions {
        display: block;
        min-width: 0;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .k-table--mobile-records tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .k-table--mobile-records tbody td[data-mobile-span="full"] {
        grid-column: 1 / -1;
    }

    .k-table--mobile-records .k-chip-group .k-badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .k-table--mobile-records tbody td.k-table__cell--actions .k-btn {
        width: 100%;
        justify-content: center;
    }

    .k-table--mobile-records tbody td.k-table__empty {
        grid-column: 1 / -1;
        padding: var(--gp-sp-8) 0;
        text-align: center;
    }
}

/* Empty / loading / error states (used outside of tables too). */
.k-empty-state {
    text-align: center;
    padding: var(--gp-sp-12) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-body);
    font-size: 0.875rem;
}
.k-empty-state__title {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--gp-fg);
    margin: 0 0 var(--gp-sp-2);
}
.k-empty-state__icon {
    font-size: 2.5rem;
    color: var(--gp-muted-foreground);
    display: block;
    margin-bottom: var(--gp-sp-3);
}

/* Inline data list (used by the wholesale lead detail read view). */
.k-data-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--gp-sp-3) var(--gp-sp-4);
    margin: 0;
    padding: 0;
}
.k-data-list__term {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
}
.k-data-list__desc {
    color: var(--gp-fg);
    font-size: 1rem;
    word-break: break-word;
}
.k-data-list--stack { grid-template-columns: 1fr; }
.k-data-list--stack .k-data-list__term { margin-top: var(--gp-sp-3); }
.k-data-list--stack .k-data-list__term:first-child { margin-top: 0; }

@media (max-width: 575.98px) {
    .k-data-list { grid-template-columns: 1fr; }
}

/* Timeline (used by the wholesale lead outreach history). */
.k-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.k-timeline__item {
    display: flex;
    gap: var(--gp-sp-4);
    padding: var(--gp-sp-4) 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    align-items: flex-start;
}
.k-timeline__item:last-child { border-bottom: 0; }
.k-timeline__body { flex: 1 1 auto; min-width: 0; }
.k-timeline__top {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--gp-sp-1);
}
.k-timeline__subject {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    margin: var(--gp-sp-1) 0 0;
}
.k-timeline__excerpt {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    white-space: pre-wrap;
    margin: var(--gp-sp-1) 0 0;
}
.k-timeline__excerpt--outcome { color: var(--gp-success); font-style: italic; }
.k-timeline__excerpt--followup { color: var(--gp-warning); font-size: 0.75rem; }
.k-timeline__time {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ---- 5. Modals -------------------------------------------------------- */

.k-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1055;
    padding: var(--gp-sp-4);
}
.k-modal.is-open { display: flex; }
.k-modal__dialog {
    width: min(96vw, 60rem);
    max-width: 100%;
    margin: 0 auto;
}
.k-modal__panel {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    width: 100%;
    max-width: min(96vw, 60rem);
    max-height: 92vh;
    overflow: auto;
    padding: var(--gp-sp-12) clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
}
.k-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gp-sp-6);
    padding-bottom: var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
.k-modal__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.04em;
    margin: 0;
}
.k-modal__body { padding: var(--gp-sp-4) 0; }
.k-modal__footer {
    margin-top: var(--gp-sp-6);
    padding-top: var(--gp-sp-4);
    border-top: var(--gp-border-w) solid var(--gp-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--gp-sp-3);
}

/* ---- 6. Tabs + Breadcrumbs ------------------------------------------- */

.k-tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    min-height: 3.5rem;
    align-items: stretch;
    margin: 0 0 var(--gp-sp-6);
}
.k-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gp-sp-6);
    min-height: 3.5rem;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    border-bottom: 4px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-tab:hover { color: var(--gp-fg); text-decoration: none; }
.k-tab.is-active,
.k-tab--active,
.k-tab[aria-selected="true"] {
    color: var(--gp-fg);
    border-bottom-color: var(--gp-accent);
}
.k-tab__btn {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gp-sp-6);
    min-height: 3.5rem;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-tab__btn:hover { color: var(--gp-fg); }
.k-tab.is-active .k-tab__btn,
.k-tab--active .k-tab__btn,
.k-tab__btn[aria-selected="true"] {
    color: var(--gp-fg);
    border-bottom-color: var(--gp-accent);
}

.k-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.k-breadcrumb li { color: var(--gp-muted-foreground); }
.k-breadcrumb li:not(:last-child)::after {
    content: '//';
    margin-left: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
}
.k-breadcrumb li:last-child { color: var(--gp-fg); }
.k-breadcrumb a { color: var(--gp-muted-foreground); }
.k-breadcrumb a:hover { color: var(--gp-fg); text-decoration: none; }

/* ---- 7. Toasts -------------------------------------------------------- */

.k-toast-container {
    z-index: 2000;
    max-width: min(92vw, 26.25rem);
}
.k-toast {
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: 0;
    border-left: 4px solid var(--gp-muted);
    min-height: 3.5rem;
    padding: var(--gp-sp-4) var(--gp-sp-6);
    display: flex;
    flex-direction: column;
    font-family: var(--gp-font-body);
}
.k-toast--info    { border-left-color: var(--gp-info); }
.k-toast--success { border-left-color: var(--gp-success); }
.k-toast--warning { border-left-color: var(--gp-warning); }
.k-toast--danger  { border-left-color: var(--gp-danger); }

/* ---- 8. Badges + Chips ------------------------------------------------ */

.k-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--gp-sp-2);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-fg);
    background: transparent;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    white-space: nowrap;
}
.k-badge--info    { border-color: var(--gp-info);    color: var(--gp-info); }
.k-badge--success { border-color: var(--gp-success); color: var(--gp-success); }
.k-badge--warning { border-color: var(--gp-warning); color: var(--gp-warning); }
.k-badge--danger  { border-color: var(--gp-danger);  color: var(--gp-danger); }
.k-badge--neutral { border-color: var(--gp-border);  color: var(--gp-muted-foreground); }

.k-badge--filled { color: var(--gp-bg); }
.k-badge--filled.k-badge--info    { background: var(--gp-info);    color: var(--gp-info-fg);    border-color: var(--gp-info); }
.k-badge--filled.k-badge--success { background: var(--gp-success); color: var(--gp-success-fg); border-color: var(--gp-success); }
.k-badge--filled.k-badge--warning { background: var(--gp-warning); color: var(--gp-warning-fg); border-color: var(--gp-warning); }
.k-badge--filled.k-badge--danger  { background: var(--gp-danger);  color: var(--gp-danger-fg);  border-color: var(--gp-danger); }
.k-badge--filled.k-badge--neutral { background: var(--gp-muted);   color: var(--gp-fg);         border-color: var(--gp-border); }

.k-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2rem;
    padding: 0 var(--gp-sp-3);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.k-chip--removable .k-chip__remove {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--gp-border-w) solid var(--gp-bg);
    background: transparent;
    color: var(--gp-fg);
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
}
.k-chip--removable .k-chip__remove:hover { background: var(--gp-danger); color: var(--gp-danger-fg); border-color: var(--gp-danger); }

/* ---- 9. Alerts -------------------------------------------------------- */

.k-alert {
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: 0;
    border-left: 4px solid var(--gp-muted);
    padding: var(--gp-sp-4) var(--gp-sp-6);
    margin-bottom: var(--gp-sp-4);
}
.k-alert--structured {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gp-sp-4);
    padding: var(--gp-sp-5) var(--gp-sp-6);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-alert__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-size: 1.25rem;
}
.k-alert--info .k-alert__icon { background: var(--gp-info); color: var(--gp-info-fg); }
.k-alert--success .k-alert__icon { background: var(--gp-success); color: var(--gp-success-fg); }
.k-alert--warning .k-alert__icon { background: var(--gp-warning-fg); color: var(--gp-warning); }
.k-alert--danger .k-alert__icon { background: var(--gp-danger); color: var(--gp-danger-fg); }
.k-alert__content {
    min-width: 0;
}
.k-alert__title {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    margin: 0 0 var(--gp-sp-2);
    font-weight: 700;
}
.k-alert__message {
    margin: 0;
    max-width: 72ch;
    color: inherit;
}
.k-alert__meta {
    align-self: center;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.k-alert--warning .k-alert__meta { color: color-mix(in srgb, var(--gp-warning-fg) 78%, transparent); }
.k-alert--info    { border-left-color: var(--gp-info); }
.k-alert--success { border-left-color: var(--gp-success); }
.k-alert--warning { border-left-color: var(--gp-warning); background: var(--gp-warning); color: var(--gp-warning-fg); }
.k-alert--warning .k-alert__title { color: var(--gp-warning-fg); }
.k-alert--danger  { border-left-color: var(--gp-danger); }
@media (max-width: 575.98px) {
    .k-alert--structured {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: var(--gp-sp-3);
        padding: var(--gp-sp-4);
    }
    .k-alert__icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .k-alert__meta {
        grid-column: 2;
        justify-self: start;
        margin-top: var(--gp-sp-1);
    }
}

/* ---- 10. Pagination --------------------------------------------------- */

.k-pagination {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.k-pagination li button,
.k-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    background: transparent;
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.k-pagination li.is-active button,
.k-pagination li.is-active a {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
.k-pagination li.is-disabled { opacity: 0.4; pointer-events: none; }
.k-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    background: transparent;
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-pagination__btn:hover { background: var(--gp-muted); border-color: var(--gp-accent); color: var(--gp-accent); }
.k-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.k-pagination__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    padding: 0 var(--gp-sp-3);
    border: var(--gp-border-w) solid var(--gp-border);
    border-left-width: 0;
    color: var(--gp-fg);
    background: var(--gp-muted);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* ---- 11. Progress + Spinner ------------------------------------------ */

.k-progress {
    width: 100%;
    height: 0.5rem;
    background: var(--gp-muted);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.k-progress__bar {
    height: 100%;
    background: var(--gp-accent);
    width: 0;
    transition: width var(--gp-dur-slow) var(--gp-ease);
}
.k-progress--danger .k-progress__bar  { background: var(--gp-danger); }
.k-progress--warning .k-progress__bar { background: var(--gp-warning); }
.k-progress--success .k-progress__bar { background: var(--gp-success); }

.k-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--gp-accent);
    border-top-color: transparent;
    border-radius: 50% !important;
    animation: k-spin 0.6s linear infinite;
    vertical-align: middle;
}
.k-spinner--inline { width: 1rem; height: 1rem; border-width: 2px; }

/* ---- 12. Stat tile + marquee ----------------------------------------- */

.k-stat-tile {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-6) var(--gp-sp-8);
    min-height: 12.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
.k-stat-tile:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
a.k-stat-tile:hover,
a.k-stat-tile:focus {
    text-decoration: none;
    color: var(--gp-accent-fg);
}
.k-stat-tile__eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}
.k-stat-tile:hover .k-stat-tile__eyebrow { color: var(--gp-accent-fg); }
.k-stat-tile__value {
    font-family: var(--gp-font-display);
    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.k-stat-tile__value--compact {
    font-size: clamp(1.75rem, 2.75vw, 2.5rem);
}
.k-stat-tile__sub {
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
}
.k-stat-tile:hover .k-stat-tile__sub { color: var(--gp-accent-fg); }

/* Status-tinted stat tiles. The accent fill signals the level without
 * breaking the kinetic hard-color-inversion motif on hover. */
.k-stat-tile--warning { border-color: var(--gp-warning); }
.k-stat-tile--warning .k-stat-tile__value { color: var(--gp-warning); }
.k-stat-tile--success { border-color: var(--gp-success); }
.k-stat-tile--success .k-stat-tile__value { color: var(--gp-success); }
.k-stat-tile--danger { border-color: var(--gp-danger); }
.k-stat-tile--danger .k-stat-tile__value { color: var(--gp-danger); }
.k-stat-tile--info { border-color: var(--gp-info); }
.k-stat-tile--info .k-stat-tile__value { color: var(--gp-info); }
.k-stat-tile--neutral { border-color: var(--gp-border); }
.k-stat-tile--neutral .k-stat-tile__value { color: var(--gp-fg); }

/* Input group (the read-only registration-link / generated-link row). */
.k-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    isolation: isolate;
}
.k-input-group .k-input {
    flex: 1 1 auto;
    min-width: 0;
}
.k-input-group .k-input:not(:last-child) {
    border-right: 0;
}
.k-input-group .k-btn {
    flex-shrink: 0;
    border-width: var(--gp-border-w-thin);
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-input-group--currency .k-input { border-left: 0; }
.k-input-group__prefix,
.k-input-group__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gp-sp-3);
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    min-height: 3.5rem;
}
.k-input-group:focus-within .k-input,
.k-input-group:focus-within .k-btn,
.k-input-group:focus-within .k-input-group__prefix,
.k-input-group:focus-within .k-input-group__suffix {
    border-color: var(--gp-accent);
}
.k-input-group .k-input--compact ~ .k-input-group__prefix,
.k-input-group .k-input--compact ~ .k-input-group__suffix { min-height: 2.5rem; }
.k-input-group .k-input--compact { min-height: 2.5rem; }
.k-input-group .k-btn--sm { min-height: 2.5rem; }

/* The wholesale sub-nav (a single k-tabs strip above the page content). */
.k-tabs--wholesale {
    margin-bottom: var(--gp-sp-6);
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .k-tabs--wholesale .k-tab { padding: 0 var(--gp-sp-4); }
}

/* Filter tabs (denser, used by the lead status / cert status filters). */
.k-tabs--filter {
    margin-bottom: var(--gp-sp-6);
    flex-wrap: wrap;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
.k-tabs--filter .k-tab { font-size: 0.75rem; padding: 0 var(--gp-sp-4); }

/* Responsive stat-tile grid. */
.k-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .k-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .k-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Page-list heading (used by list pages: leads, orders, accounts,
 * api-tokens, etc.). The wrapper is a deliberate header row:
 * title block (eyebrow + title + subtitle) on the left, primary
 * action(s) on the right, baseline-aligned, wraps gracefully on
 * narrow viewports. The wrapper does NOT carry its own `font-size`
 * (the prior `clamp(1.5rem, 3vw, 2.25rem)` polluted every
 * descendant with a section-heading scale; that broke the
 * `.k-page-list__sub` subtitle which then rendered at 24-36px
 * instead of the small 14px eyebrow size the prompt §3 prescribes
 * for a page-level subtitle). Title and subtitle now have their
 * own explicit sizes.
 *
 * NOTE: the flex layout is gated on the wrapper containing a
 * `.k-page-list__primary` child via `:has()`. This lets the same
 * class be applied directly to an `<h1>` (e.g. the wholesale admin
 * leads view) without turning the heading itself into a flex
 * container — the wholesale case uses the heading as a simple
 * inline h1 (text + inline badge), not as a row wrapper. */
.k-page-list__heading:has(> .k-page-list__primary) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gp-sp-4) var(--gp-sp-6);
    flex-wrap: wrap;
    margin: 0 0 var(--gp-sp-6);
    padding: 0;
    color: var(--gp-fg);
}

/* When the wrapper IS the heading (e.g. `<h1 class="k-page-list__heading">`
 * in the wholesale admin leads view) we want a deliberate
 * sub-page-title size that is smaller than the Layout's
 * `kinetic-page-title__heading` (32-56px) at the top of the page
 * and reads as a section / context title. 20-32px strikes the
 * right balance — strong enough to anchor the page, small enough
 * to defer to the Layout page title above. Specificity
 * 0,1,1 (element + class) beats the bare `h1` rule so the size
 * sticks even when the wrapper has no children. */
h1.k-page-list__heading {
    font-family: var(--gp-font-display);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--gp-fg);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* Title block (eyebrow + title + subtitle stack). */
.k-page-list__primary { min-width: 0; flex: 1 1 auto; }

/* Optional eyebrow row above the title (12px uppercase tracking-widest
 * muted). Matches the k-sysdash-card__eyebrow / k-card__eyebrow pattern
 * so every "page header" surface has the same hierarchy. */
.k-page-list__eyebrow {
    display: block;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    margin: 0 0 var(--gp-sp-2);
}

/* Page-list title. Uses the prompt §3 card-title scale
 * (`clamp(1.5rem, 2.5vw, 2rem)`) so the heading reads as a
 * strong but not page-giant header. The h2 element still carries
 * its own h2 font-size rule (28-44px) so this class is needed to
 * opt back DOWN to the card-title scale. */
.k-page-list__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--gp-fg);
    margin: 0 0 var(--gp-sp-2);
}

/* Page-list subtitle. Small, muted, sentence-case body copy. Used
 * for the short description that sits under the page title
 * ("Scoped, rotatable tokens for machine-to-machine endpoints
 * (MCP, import, etc)."). The `max-width: 60ch` keeps the line
 * measure readable. */
.k-page-list__sub {
    font-family: var(--gp-font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gp-muted-foreground);
    text-transform: none;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 60ch;
}

/* Action slot (page-level primary action button, e.g. `+ New Token`,
 * `+ Add Lead`, `+ New Newsletter`). The `align-items: center`
 * keeps the button baseline-aligned with the title block's last
 * line. `flex-shrink: 0` prevents the button from being squished
 * when the title is long. */
.k-page-list__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-shrink: 0;
    margin-bottom: var(--gp-sp-1);
}

/* Inline link used in tables (replaces unstyled <a> tags). */
.k-link {
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-decoration: none;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    transition: color var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease);
}
.k-link:hover,
.k-link:focus {
    color: var(--gp-accent);
    border-bottom-color: var(--gp-accent);
    text-decoration: none;
}

/* Table cell helpers. */
.k-table__muted { color: var(--gp-muted-foreground); }
.k-table__cell--overdue { color: var(--gp-danger); font-weight: 700; }

/* Compact select (used inside the lead detail quick-status form). */
.k-select.k-select--compact {
    min-height: 2.5rem;
    font-size: 1rem;
    background-position: right 0.9rem center, right 0.4rem center;
    background-size: 5px 5px;
    padding: 0 2rem 0 0.75rem;
}

/* Form grid layouts (used by the lead detail quick-status form and the
 * settings page). `.k-form-grid` is a stacked grid; the `--inline` variant
 * lays the fields out as a row at >=768px. */
.k-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}
.k-form-grid--inline {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
}
.k-form-grid--inline .k-field { margin-bottom: 0; }
.k-form-grid--inline .k-field--actions { align-self: end; }
@media (max-width: 767.98px) {
    .k-form-grid--inline { grid-template-columns: 1fr; }
}
/* Binding form grid — two inputs on top, action button on the right. */
.k-form-grid--binding {
    grid-template-columns: 2fr 2fr auto;
    align-items: end;
}
.k-form-grid--binding .k-field--span-2 { grid-column: span 2; }
.k-form-grid--binding .k-field { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .k-form-grid--binding { grid-template-columns: 1fr; }
    .k-form-grid--binding .k-field--span-2 { grid-column: span 1; }
}

/* Certificate review form grid. */
.k-form-grid--review {
    grid-template-columns: 1fr 2fr auto;
    align-items: end;
}
.k-form-grid--review .k-field--span-2 { grid-column: span 2; }
.k-form-grid--review .k-field { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .k-form-grid--review { grid-template-columns: 1fr; }
    .k-form-grid--review .k-field--span-2 { grid-column: span 1; }
}

/* Settings page grid (section + meta columns). */
.k-form-grid--settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-4);
}
.k-form-grid--settings .k-field--full { grid-column: 1 / -1; }
.k-form-grid--settings .k-field { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .k-form-grid--settings { grid-template-columns: 1fr; }
}

/* Settings tier row grid (threshold + percent off). */
.k-form-grid--tier {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-sp-3);
}
.k-form-grid--tier .k-field { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .k-form-grid--tier { grid-template-columns: 1fr; }
}

/* Toggle wrap (center a `.k-toggle` in a table cell or grid cell). */
.k-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding-top: var(--gp-sp-2);
}

/* List row with multiple stacked rows + action column. */
.k-list-row--with-actions {
    align-items: flex-start;
    padding: var(--gp-sp-4) var(--gp-sp-6);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    flex-wrap: wrap;
}
.k-list-row--with-actions:last-child { border-bottom: 0; }
.k-list-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gp-sp-1); }
.k-list-row__actions { padding-top: 0; }

/* Settings form (the wholesale settings page form wrapper). */
.k-settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}
.k-settings-form .k-card { margin: 0; }
.k-settings-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    margin-bottom: var(--gp-sp-4);
}
.k-settings-textarea { min-height: 8.25rem; }

/* The settings form fields do not have the same chunky vertical rhythm as
 * the lead-edit form (per Phase 9.8: "compact input pattern"); we use
 * the `.k-form-grid--settings` layout. The toggle wrap adds a little top
 * padding so the toggle sits at the same baseline as a text input. */
.k-settings-form .k-toggle-wrap { padding-top: var(--gp-sp-2); }

/* Alert with no inner padding (used inside collapses for dense help copy). */
.k-alert.k-alert--empty {
    background: var(--gp-muted);
    color: var(--gp-fg);
    border-left-color: var(--gp-info);
}
.k-alert code.k-code-inline { margin: 0 0.125rem; }

/* Category mapping list (the wholesale settings category reorder block). */
.k-category-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
.k-category-list__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
    gap: var(--gp-sp-3);
    align-items: center;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
}
.k-category-list__row.is-dragging { opacity: 0.55; }
.k-category-list__handle {
    border: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    cursor: grab;
    padding: 0 var(--gp-sp-2);
    font-size: 1.125rem;
}
.k-category-list__handle:active { cursor: grabbing; }
.k-category-list__source { min-width: 0; }
.k-category-list__source .k-table__title { margin-bottom: 0.25rem; }
.k-category-list__visibility {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: var(--gp-sp-2);
}
.k-toggle.k-toggle--sm {
    width: 2.5rem;
    height: 1.5rem;
}
.k-toggle.k-toggle--sm::after {
    width: 1rem;
    height: 1rem;
    top: 0.125rem;
    left: 0.125rem;
}
.k-toggle.k-toggle--sm:checked::after { transform: translateX(1rem); }
@media (max-width: 767.98px) {
    .k-category-list__row {
        grid-template-columns: auto 1fr;
        grid-template-areas: "handle source" "label label" "visibility visibility";
        row-gap: var(--gp-sp-2);
    }
    .k-category-list__handle { grid-area: handle; }
    .k-category-list__source { grid-area: source; }
    .k-category-list__label { grid-area: label; }
    .k-category-list__visibility { grid-area: visibility; justify-self: start; }
}

/* Pricing list (`.k-pricing-list` is a vertical stack of `.k-pricing-row`
 * cards; each row's form is a 6-column CSS grid that collapses to a
 * stacked layout on narrow viewports). */
.k-pricing-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
.k-pricing-row .k-card__body { padding: var(--gp-sp-4) var(--gp-sp-6); }
.k-pricing-row__form {
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.4fr) auto minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gp-sp-4);
    row-gap: var(--gp-sp-2);
    align-items: start;
}
.k-pricing-row__form .k-input-group { width: 100%; }
.k-pricing-row__toggle {
    background: transparent;
    border: 0;
    color: var(--gp-accent);
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition: transform var(--gp-dur) var(--gp-ease);
}
.k-pricing-row__toggle i { transition: transform 0.18s ease; }
.k-pricing-row__toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.k-pricing-row__title { display: flex; flex-direction: column; gap: var(--gp-sp-1); min-width: 0; }
.k-pricing-row__title-main {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    margin: 0;
    line-height: 1.1;
}
.k-pricing-row__title-meta {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.k-pricing-row__field { min-width: 0; }
.k-pricing-row__field--switch { padding-top: var(--gp-sp-2); }
.k-pricing-row__field .k-label { font-size: 0.7rem; margin-bottom: 0.25rem; }
@media (max-width: 991.98px) {
    .k-pricing-row__form {
        grid-template-columns: auto 1fr 1fr;
    }
    .k-pricing-row__form .k-pricing-row__field--switch,
    .k-pricing-row__form .k-pricing-row__field:nth-child(n+5) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .k-pricing-row__form { grid-template-columns: 1fr; }
    .k-pricing-row__form .k-pricing-row__toggle { display: none; }
}

/* Link variant for sub-meta under a table title. */
.k-link--meta {
    font-family: var(--gp-font-body);
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gp-muted-foreground);
    border-bottom-color: var(--gp-border);
}
.k-link--meta:hover { color: var(--gp-fg); border-bottom-color: var(--gp-fg); }

/* Inline meta used in danger-zone / alert secondary copy. */
.k-meta-inline {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
}

/* Card body modifiers. */
.k-card__body--bordered {
    border-top: var(--gp-border-w) solid var(--gp-border);
}
.k-card__body--scroll {
    overflow-y: auto;
}

/* Padded flat card (used by the bound-customer / suggested-customer blocks
 * inside the accounts table). */
.k-card--padded {
    padding: var(--gp-sp-3) var(--gp-sp-4);
}

/* Strong title in a table cell (no full card chrome). */
.k-table__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
}

/* Inline <code> token (bound customer IDs, copyable IDs). */
.k-code-inline {
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    padding: 0.125rem 0.375rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    word-break: break-all;
    display: inline-block;
}

/* Danger-colored text used inside dropdown items. */
.k-text-danger { color: var(--gp-danger); }

/* Compact meta block (used by the address column in the accounts table). */
.k-meta-block { line-height: 1.25; }

.k-stat-marquee {
    background: var(--gp-bg);
    border-top: var(--gp-border-w) solid var(--gp-accent);
    border-bottom: var(--gp-border-w) solid var(--gp-accent);
    padding: 0;
    display: flex;
    gap: var(--gp-sp-12);
    overflow: hidden;
}
.k-stat-marquee__cell {
    flex: 1 1 0;
    min-width: 12rem;
    text-align: center;
    padding: var(--gp-sp-6) var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.k-stat-marquee__cell:hover,
.k-stat-marquee__cell:focus,
.k-stat-marquee__cell:focus-visible {
    text-decoration: none;
    color: inherit;
}
.k-stat-marquee__number {
    font-family: var(--gp-font-display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 0.9;
    color: var(--gp-accent);
    letter-spacing: -0.04em;
    display: block;
}
.k-stat-marquee__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

/* Active cell: bright label so the lit-up KPI reads as "there's
 * something to action." Inactive cell: both number and label
 * dimmed so the eye skips past empty KPIs and lands on the active
 * ones. The number is kept legible (muted-foreground tone) so the
 * cell still reads as data, not as a missing block. */
.k-stat-marquee__cell--active .k-stat-marquee__label { color: var(--gp-fg); font-weight: 700; }
.k-stat-marquee__cell--inactive { opacity: 0.55; }
.k-stat-marquee__cell--inactive .k-stat-marquee__number { color: var(--gp-muted-foreground); }
.k-stat-marquee__cell--inactive .k-stat-marquee__label { color: var(--gp-muted-foreground); font-weight: 500; }
.k-stat-marquee__cell--inactive:hover { opacity: 1; }

/* ---- 13. Social tile ------------------------------------------------- */

.k-social-tile {
    position: relative;
    display: block;
    min-height: 20rem;
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    overflow: hidden;
    color: var(--gp-fg);
    text-decoration: none;
    transition: border-color var(--gp-dur) var(--gp-ease);
}
.k-social-tile:hover { border-color: var(--gp-accent); text-decoration: none; }
.k-social-tile__icon {
    position: absolute;
    top: var(--gp-sp-3);
    left: var(--gp-sp-3);
    width: 3rem;
    height: 3rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.k-social-tile__status {
    position: absolute;
    top: var(--gp-sp-3);
    right: var(--gp-sp-3);
}
.k-social-tile__handle {
    position: absolute;
    bottom: var(--gp-sp-4);
    left: var(--gp-sp-4);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--gp-fg);
}
.k-social-tile__caption {
    position: absolute;
    inset: auto var(--gp-sp-4) 3rem var(--gp-sp-4);
    font-size: 0.875rem;
    color: var(--gp-fg);
    opacity: 0;
    transition: opacity var(--gp-dur) var(--gp-ease);
}
.k-social-tile:hover .k-social-tile__caption { opacity: 1; }
.k-social-tile--historical { filter: saturate(0.4); }
.k-social-tile--historical .k-social-tile__caption { opacity: 0.6; }

/* ---- 14. List row ---------------------------------------------------- */

.k-list-row {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-4);
    min-height: 5rem;
    padding: var(--gp-sp-3) var(--gp-sp-6);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    transition: background-color var(--gp-dur) var(--gp-ease);
    text-decoration: none;
}
.k-list-row:hover { background: var(--gp-muted); }
.k-list-row__title {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.k-list-row__meta {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
}
.k-list-row__actions { display: flex; gap: var(--gp-sp-2); flex-shrink: 0; }

/* ---- 15. Segmented --------------------------------------------------- */

.k-segmented {
    display: inline-flex;
    border: var(--gp-border-w) solid var(--gp-border);
    background: transparent;
}
.k-segmented .k-seg {
    appearance: none;
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 var(--gp-sp-4);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.k-segmented .k-seg:last-child { border-right: 0; }
.k-segmented .k-seg.is-active,
.k-segmented .k-seg[aria-pressed="true"] {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* ---- 16. Drawer ------------------------------------------------------ */

.k-drawer {
    background: #18181B;
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-8);
    margin: var(--gp-sp-6) 0;
}
.k-drawer--side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(95vw, 32rem);
    margin: 0;
    z-index: 1040;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--gp-dur-slow) var(--gp-ease);
}
.k-drawer--side.is-open { transform: translateX(0); }

/* ---- 17. Collapse ---------------------------------------------------- */

.k-collapse__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.5rem;
    padding: 0 var(--gp-sp-4);
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.k-collapse__header::after {
    content: '>';
    color: var(--gp-accent);
    transition: transform var(--gp-dur) var(--gp-ease);
    font-weight: 700;
    margin-left: var(--gp-sp-3);
}
.k-collapse.is-open .k-collapse__header::after { transform: rotate(90deg); }
.k-collapse__body { display: none; padding: var(--gp-sp-6) 0; }
.k-collapse.is-open .k-collapse__body { display: block; }

/* ---- 18. Animation hook --------------------------------------------- */

.k-fade-in {
    animation: k-fade-in var(--gp-dur-slow) var(--gp-ease);
}
@keyframes k-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 19. Chrome: topbar / sidebar / footer / page title (Phase 1) --- */

/*
 * Layout shell: the admin shell uses a fixed sidebar at >=1500px and
 * a sliding drawer below. The CSS variables for the topbar height
 * and sidebar width are defined here so the per-tool views can lean
 * on them when they need to align sticky elements (e.g. table
 * sticky headers reach for `--gp-topbar-h`).
 */
:root {
    --gp-sidebar-w: 17.5rem;        /* 280px on desktop */
    --gp-sidebar-w-collapsed: 4rem; /* 64px icon-rail (Phase 1.2) */
    --gp-footer-h: clamp(3.5rem, 4vw, 4.5rem);
}

/* Brand-required warning banner: full-width acid-yellow banner with
 * bold uppercase copy (per Phase 1.5). */
.kinetic-brand-required {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 0;
    border-left: 4px solid var(--gp-accent-fg);
    padding: var(--gp-sp-4) var(--gp-sp-6);
    margin: 0 0 var(--gp-sp-6);
}
.kinetic-brand-required__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    margin: 0;
}
.kinetic-brand-required__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
.kinetic-brand-required__choice {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-4);
    background: var(--gp-accent-fg);
    color: var(--gp-accent);
    border: 2px solid var(--gp-accent-fg);
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.kinetic-brand-required__choice:hover,
.kinetic-brand-required__choice:focus {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    text-decoration: none;
}
.kinetic-brand-required__empty {
    font-size: 0.875rem;
    font-style: italic;
}

/* 19.1 Topbar -------------------------------------------------------- */

.kinetic-topbar {
    position: relative;
    top: auto;
    z-index: 1035;
    display: flex;
    align-items: stretch;
    min-height: var(--gp-topbar-h);
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
    margin: 0;
    padding: 0;
}
body.k-sticky-header .kinetic-topbar {
    position: sticky;
    top: 0;
}
.kinetic-topbar__inner {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    min-width: 0;
}
.kinetic-topbar__primary,
.kinetic-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-width: 0;
}
.kinetic-topbar__actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kinetic-topbar__brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 var(--gp-sp-3);
    color: var(--gp-fg);
    text-decoration: none;
    font-family: var(--gp-font-display);
    line-height: 1;
    min-width: 0;
    max-width: 24rem;
    overflow: hidden;
}
.kinetic-topbar__brand-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
}
.kinetic-topbar__brand-text {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}
.kinetic-topbar__brand:hover .kinetic-topbar__brand-text,
.kinetic-topbar__brand:focus .kinetic-topbar__brand-text {
    color: var(--gp-accent);
    text-decoration: none;
}

/* Icon-only action button used inside the topbar (sidebar toggle,
 * back, dadkit settings, archive, noise, etc.). 56x56 hit area
 * with a transparent background that turns muted on hover. */
.kinetic-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w) solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
    position: relative;
}
.kinetic-topbar__icon-btn:hover,
.kinetic-topbar__icon-btn:focus {
    background: var(--gp-muted);
    color: var(--gp-accent);
    text-decoration: none;
}
.kinetic-topbar__icon-btn[aria-pressed="true"],
.kinetic-topbar__icon-btn.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.kinetic-topbar__icon-btn .kinetic-topbar__icon-label {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: 0.125rem 0.5rem;
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gp-dur) var(--gp-ease);
    z-index: 1;
}
.kinetic-topbar__icon-btn:hover .kinetic-topbar__icon-label,
.kinetic-topbar__icon-btn:focus-visible .kinetic-topbar__icon-label {
    opacity: 1;
}

/* Sidebar toggle button visible only on small viewports. */
.kinetic-topbar__sidebar-toggle { /* Inherits .kinetic-topbar__icon-btn */ }

/* Sync indicator (was `.dadkit-sync-indicator`). The acid-yellow
 * pulse is wired by `kinetic/motion.css` `prefers-reduced-motion`. */
.kinetic-topbar .dadkit-sync-indicator {
    display: none;
    align-items: center;
    gap: var(--gp-sp-2);
    height: 2.5rem;
    padding: 0 var(--gp-sp-3);
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--gp-dur) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
    pointer-events: none;
}
.kinetic-topbar .dadkit-sync-indicator.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
}
.kinetic-topbar .dadkit-sync-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50% !important;
    background: var(--gp-accent);
    box-shadow: 0 0 0 0 var(--gp-accent);
    animation: kinetic-pulse 2.4s ease-out infinite;
}
.kinetic-topbar .dadkit-sync-text {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-fg);
}
@keyframes kinetic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0.55); }
    70%  { box-shadow: 0 0 0 0.6rem rgba(223, 225, 4, 0); }
    100% { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0); }
}

/* Brand switcher lives in the sidebar footer above Logout and uses
 * Bootstrap's dropdown JS. The menu opens upward so it remains visible
 * from the bottom of the navigation rail. */
.kinetic-sidebar__brand-switcher-item {
    margin-top: auto;
    padding: var(--gp-sp-3);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    list-style: none;
}
.kinetic-sidebar .brand-switcher {
    width: 100%;
}
.kinetic-sidebar .brand-switcher__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    width: 100%;
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
    min-height: 2.75rem;
    padding: 0 var(--gp-sp-3);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.kinetic-sidebar .brand-switcher__button:hover,
.kinetic-sidebar .brand-switcher__button:focus {
    border-color: var(--gp-accent);
    color: var(--gp-accent);
}
.kinetic-sidebar .brand-switcher__button::after {
    border: 0;
    content: '\25BE';
    color: var(--gp-accent);
    margin-left: var(--gp-sp-2);
}
.kinetic-sidebar .brand-switcher__label {
    color: var(--gp-muted-foreground);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    position: static;
    top: auto;
}
.kinetic-sidebar .brand-switcher__value {
    color: var(--gp-fg);
    font-weight: 700;
}
.kinetic-sidebar .brand-switcher__menu {
    width: 100%;
    min-width: 100%;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0 !important;
    padding: 0;
    box-shadow: none;
    color: var(--gp-fg);
}
.kinetic-sidebar .brand-switcher__menu .dropdown-header {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.kinetic-sidebar .brand-switcher__menu .dropdown-item {
    color: var(--gp-fg);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    text-decoration: none;
    background: transparent;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.kinetic-sidebar .brand-switcher__menu .dropdown-item:hover,
.kinetic-sidebar .brand-switcher__menu .dropdown-item:focus {
    background: var(--gp-muted);
    color: var(--gp-accent);
}
.kinetic-sidebar .brand-switcher__menu .dropdown-item.active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.kinetic-sidebar .brand-switcher__menu .dropdown-item small,
.kinetic-sidebar .brand-switcher__menu .dropdown-item .text-body-secondary {
    color: var(--gp-muted-foreground) !important;
}
.kinetic-sidebar .brand-switcher__menu .dropdown-item.active small,
.kinetic-sidebar .brand-switcher__menu .dropdown-item.active .text-body-secondary {
    color: var(--gp-accent-fg) !important;
    opacity: 0.85;
}

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

/*
 * The sidebar is a hand-rolled treeview (Phase 0.4) with three
 * structural pieces: a brand block, a list of section headers, and
 * a nested list of group + leaf items. The `.kinetic-sidebar__group`
 * is the wrapper that `kinetic/sidebar.js` toggles via `is-open`.
 */
.kinetic-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1038;
    display: flex;
    flex-direction: column;
    width: var(--gp-sidebar-w);
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: 0;
    border-right: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0;
}
.kinetic-sidebar__brand {
    display: flex;
    align-items: center;
    min-height: var(--gp-topbar-h);
    padding: 0 var(--gp-sp-6);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}
.kinetic-sidebar__brand a,
.kinetic-sidebar__brand-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gp-sp-2);
    color: var(--gp-fg);
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 1.125rem;
    line-height: 1;
}
.kinetic-sidebar__brand a:hover .kinetic-sidebar__brand-mark,
.kinetic-sidebar__brand-link:hover .kinetic-sidebar__brand-mark {
    color: var(--gp-fg);
}
.kinetic-sidebar__brand-mark {
    color: var(--gp-accent);
}

.kinetic-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}
.kinetic-sidebar__logout {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.kinetic-sidebar__section {
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}
.kinetic-sidebar__section:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}
.kinetic-sidebar__section + .kinetic-sidebar__section {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    padding-top: var(--gp-sp-3);
}
.kinetic-sidebar__section-header {
    display: block;
    padding: var(--gp-sp-3) var(--gp-sp-6) var(--gp-sp-2);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gp-muted-foreground);
    font-weight: 700;
}

.kinetic-sidebar__group,
.kinetic-sidebar__leaf {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kinetic-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 3.5rem;
    padding: 0 var(--gp-sp-6);
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-radius: 0;
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 150ms var(--gp-ease),
                color 150ms var(--gp-ease);
}
.kinetic-sidebar__link:hover,
.kinetic-sidebar__link:focus-visible {
    background: var(--gp-muted);
    color: var(--gp-fg);
    text-decoration: none;
}
.kinetic-sidebar__link:hover .kinetic-sidebar__link-icon,
.kinetic-sidebar__link:focus-visible .kinetic-sidebar__link-icon {
    color: var(--gp-accent);
}
.kinetic-sidebar__link.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.kinetic-sidebar__link.is-active .kinetic-sidebar__link-icon {
    color: var(--gp-accent-fg);
}

.kinetic-sidebar__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gp-muted-foreground);
    font-size: 1rem;
    flex-shrink: 0;
}
.kinetic-sidebar__link-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kinetic-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    min-width: 1.5rem;
    min-height: 1.375rem;
    padding: 0.125rem 0.375rem;
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: var(--gp-radius-sm);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.kinetic-sidebar__badge[data-navigation-badge-key] {
    opacity: 0;
    transition: opacity var(--gp-dur-slow) var(--gp-ease);
}
.kinetic-sidebar__badge[data-navigation-badge-key].is-visible {
    opacity: 1;
}
.kinetic-sidebar__badge--alert {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
    border-color: var(--gp-danger);
}
.kinetic-sidebar__badge-mark {
    font-size: 0.625rem;
    line-height: 1;
}
.kinetic-sidebar__link.is-active .kinetic-sidebar__badge--calm {
    background: var(--gp-accent-fg);
    color: var(--gp-accent);
    border-color: var(--gp-accent-fg);
}
.kinetic-sidebar__chevron {
    margin-left: var(--gp-sp-2);
    width: 0.75rem;
    height: 0.75rem;
    color: var(--gp-accent);
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    transform-origin: center;
}
.kinetic-sidebar__chevron::before {
    content: '\25B6';
    font-size: 0.625rem;
    color: inherit;
}

/* Nested children: indentation + 1px left border that becomes
 * acid-yellow on the active branch. */
.kinetic-sidebar__group-children {
    list-style: none;
    margin: 0;
    padding: var(--gp-sp-1) 0 var(--gp-sp-2) var(--gp-sp-2);
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
    margin-left: var(--gp-sp-6);
    display: none;
}
.kinetic-sidebar__group.is-open > .kinetic-sidebar__group-children {
    display: block;
}
.kinetic-sidebar__group.has-active > .kinetic-sidebar__group-children,
.kinetic-sidebar__group-children:has(.kinetic-sidebar__link.is-active) {
    border-left-color: var(--gp-accent);
    border-left-width: var(--gp-border-w);
}
.kinetic-sidebar__group-children .kinetic-sidebar__link {
    min-height: 2.75rem;
    font-size: 0.75rem;
    padding-left: var(--gp-sp-4);
    color: var(--gp-fg);
}
.kinetic-sidebar__group-children .kinetic-sidebar__group-children {
    margin-left: var(--gp-sp-4);
    border-left-color: rgba(63, 63, 70, 0.6);
}

/* Mobile drawer state: at narrow viewports the sidebar slides off
 * the left edge until `is-open` is toggled by `sidebar.js`. */
@media (max-width: 1499.98px) {
    .kinetic-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform var(--gp-dur) var(--gp-ease);
        z-index: 1040;
        box-shadow: none;
    }
    .kinetic-sidebar.is-open {
        transform: translateX(0);
    }
    .kinetic-topbar__sidebar-toggle { display: inline-flex; }
}
@media (min-width: 1500px) {
    .kinetic-topbar__sidebar-toggle { display: none; }
}

/* 19.3 Footer -------------------------------------------------------- */

.kinetic-footer {
    display: flex;
    flex-direction: column;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 0;
    border-top: var(--gp-border-w) solid var(--gp-accent-fg);
    margin: 0;
    padding: 0;
}
.kinetic-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-6);
    padding: var(--gp-sp-4) clamp(1rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}
.kinetic-footer__copyright {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--gp-accent-fg);
    margin: 0;
}
.kinetic-footer__meta {
    display: flex;
    gap: var(--gp-sp-4);
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gp-accent-fg);
}
.kinetic-footer__meta-item { opacity: 0.85; }
.kinetic-footer__meta-item--strong { font-weight: 700; opacity: 1; }

/* 19.4 Page structure and title block ------------------------------- */

/*
 * Section-owned gutter pilot. Pages opt in through
 * `Layout::render(['page_structure' => 'sections'])`, which adds
 * `.k-page-structure-v2` to `.app-content`. The page shell then stops
 * owning horizontal gutters; each `.k-page-section` chooses padded or
 * flush treatment independently.
 */
:root {
    --k-page-gutter: clamp(0.75rem, 2.5vw, 3rem);
}

body:not(.wholesale-portal-body) .app-content.k-page-structure-v2 {
    padding-right: 0;
    padding-left: 0;
}

body:not(.wholesale-portal-body) .app-content.k-page-structure-v2 > .container-fluid {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body:not(.wholesale-portal-body) .app-content.k-page-structure-v2 .content-wrapper {
    margin-right: 0;
    margin-left: 0;
}

body:not(.wholesale-portal-body) .k-page-section {
    width: 100%;
    padding-right: var(--k-page-gutter);
    padding-left: var(--k-page-gutter);
}

/* Vertical rhythm between sibling page sections under the structured
 *        shell. Without this, consecutive padded and flush sections butt
 *        directly against each other and any HTMX swap that changes the
 *        inner content height (e.g. a loading placeholder replaced by a
 *        flush marquee) causes a visible jump. The gap is a small,
 *        consistent margin-bottom removed on the last in-flow sibling
 *        so the page frame does not gain trailing space. Scoped to
 *        k-page-structure-v2 so legacy pages and the wholesale portal
 *        are unaffected. */
body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section {
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section:last-child {
    margin-bottom: 0;
}

body:not(.wholesale-portal-body) .k-page-section--flush {
    padding-right: 0;
    padding-left: 0;
}

/* Hero marquee section: ~20px breathing room above and below the
 *        flush KPI strip so it doesn't butt against the page title
 *        or the metric cards beneath it. The following padded
 *        section owns no top margin; this section's bottom margin
 *        supplies the gap. Uses padding-top instead of margin-top
 *        because the marquee section is nested inside the HTMX
 *        panel div and .content-wrapper, neither of which has a
 *        border or padding to stop margin collapse — margin-top
 *        would collapse through to the page title and vanish. */
body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section--marquee {
    padding-top: 1.25rem;
    margin-bottom: 1.25rem;
}

body:not(.wholesale-portal-body) .k-page-section[hidden] {
    display: none;
}

.kinetic-page-title {
    /*
     * Flush the block directly under the header so the title
     * sits tight against the top of the content division and the
     * watermark is clipped at the top in a controlled way. The
     * shell now removes `.app-content` top padding on pages that
     * render this block, so no negative offset is needed here.
     * The page-title itself keeps no top padding so the white
     * title stays fully visible while the mirrored watermark is
     * cropped artfully.
     */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    flex-wrap: nowrap;
    padding: var(--gp-sp-4) 0;
    margin: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    overflow: hidden;
    min-height: clamp(6rem, 8vw, 7rem);
}
.kinetic-page-title__primary {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
    top: 0;
}

/* In the section-layout pilot, the title background reaches the frame
 * edges while the readable title copy keeps the same inset as padded
 * content sections. Legacy pages retain their existing shell gutter. */
body:not(.wholesale-portal-body) .k-page-structure-v2 .kinetic-page-title__primary {
    padding-left: var(--k-page-gutter);
}

.kinetic-page-title__action {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-3);
    align-self: center;
    flex: 0 0 auto;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-page-structure-v2 .kinetic-page-title__action {
    padding-right: var(--k-page-gutter);
}

.kinetic-page-title__action > :only-child {
    margin: 0;
}

.kinetic-page-title__action .k-btn,
.kinetic-page-title__action .btn {
    padding: 1rem 2rem;
    white-space: nowrap;
    /* Space an icon from its label so the icon sits between the text
     * and the button's left edge rather than flush against the text. */
    gap: var(--gp-sp-3);
}

.kinetic-page-title__eyebrow {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
}
.kinetic-page-title__heading {
    font-family: var(--gp-font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--gp-fg);
    margin: 0;
}
.kinetic-page-title__watermark {
    /*
     * Bleed the watermark above the section so the top edge is
     * hidden by `overflow: hidden` on `.kinetic-page-title`.
     * The bottom of the watermark still extends past the
     * heading baseline, so the text reads as a clipped
     * graphic element rather than a label.
     */
    position: absolute;
    right: -0.04em;
    top: 50%;
    bottom: auto;
    transform: translateY(-56%);
    font-family: var(--gp-font-display);
    font-size: clamp(8rem, 15vw, 12rem);
    font-weight: 700;
    color: var(--gp-muted);
    opacity: 0.6;
    line-height: 1;
    letter-spacing: -0.06em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

/* 19.5 Breadcrumb ---------------------------------------------------- */

.kinetic-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gp-muted-foreground);
}
.kinetic-breadcrumb__item {
    color: var(--gp-muted-foreground);
}
.kinetic-breadcrumb__item:not(:last-child)::after {
    content: '//';
    margin-left: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
}
.kinetic-breadcrumb__item:last-child {
    color: var(--gp-fg);
    font-weight: 700;
}
.kinetic-breadcrumb__item a {
    color: var(--gp-muted-foreground);
    text-decoration: none;
}
.kinetic-breadcrumb__item a:hover,
.kinetic-breadcrumb__item a:focus {
    color: var(--gp-accent);
    text-decoration: none;
}

/* ---- 20. Utility ----------------------------------------------------- */

.k-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.k-text-muted-fg { color: var(--gp-muted-foreground); }
.k-text-muted     { color: var(--gp-muted-foreground); }
.k-text-warning   { color: var(--gp-warning); }
.k-text-accent   { color: var(--gp-accent); }
.k-bg-muted      { background: var(--gp-muted); }
.k-border-bottom { border-bottom: var(--gp-border-w-thin) solid var(--gp-border); }
.k-uppercase     { text-transform: uppercase; }
.k-tracked       { letter-spacing: 0.1em; }

/* Reusable typography primitives for ordinary content hierarchy. */
.k-type-display,
.k-type-heading,
.k-type-subheading,
.k-type-eyebrow,
.k-type-caption {
    font-family: var(--gp-font-display);
}
.k-type-display {
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}
.k-type-heading {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.k-type-subheading {
    margin: 0;
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.k-type-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-muted-foreground);
}
.k-type-body {
    font-family: var(--gp-font-body);
    font-size: 1rem;
    line-height: 1.6;
}
.k-type-muted {
    color: color-mix(in srgb, var(--gp-muted-foreground) 82%, var(--gp-fg));
    font-size: max(0.875rem, 1em);
}
.k-type-small {
    font-size: 0.875rem;
    line-height: 1.45;
}
.k-type-caption {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--gp-muted-foreground);
}
.k-type-caption--uppercase {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.k-type-mono {
    font-family: var(--gp-font-mono);
    font-size: 0.875rem;
}
.k-type-tabular {
    font-variant-numeric: tabular-nums;
}
.k-type--success { color: var(--gp-success); }
.k-type--warning { color: var(--gp-warning); }
.k-type--danger { color: var(--gp-danger); }
.k-type--info { color: var(--gp-info); }
.k-type-link {
    color: var(--gp-fg);
    text-decoration: none;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-accent);
}
.k-type-link:hover,
.k-type-link:focus-visible {
    color: var(--gp-accent);
    border-bottom-color: currentColor;
}
.k-type-link:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 3px;
}
.k-type-list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--gp-sp-2);
}
.k-type-description-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--gp-sp-2) var(--gp-sp-4);
}
.k-type-description-list dt {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
}
.k-type-description-list dd {
    margin: 0;
    color: var(--gp-muted-foreground);
}

/* Repeated operational facts that need row rhythm and responsive pairing. */
.k-detail-list {
    margin: 0;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-detail-list__item {
    display: grid;
    grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
    gap: var(--gp-sp-4);
    align-items: baseline;
    padding: var(--gp-sp-3) 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-detail-list__term {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gp-muted-foreground);
}
.k-detail-list__value {
    min-width: 0;
    margin: 0;
    color: var(--gp-fg);
    overflow-wrap: anywhere;
}
.k-detail-list__value--muted {
    color: color-mix(in srgb, var(--gp-muted-foreground) 82%, var(--gp-fg));
}
.k-detail-list__value--success { color: var(--gp-success); }
.k-detail-list__value--warning { color: var(--gp-warning); }
.k-detail-list__value--danger { color: var(--gp-danger); }

/* Chronological events with a stable marker rail and compact metadata. */
.k-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.k-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: var(--gp-sp-3);
    padding-bottom: var(--gp-sp-4);
}
.k-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    bottom: 0;
    left: 0.4375rem;
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-timeline__marker {
    position: relative;
    z-index: 1;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.2rem;
    border: var(--gp-border-w-thin) solid var(--gp-fg);
    background: var(--gp-bg);
}
.k-timeline__marker--accent { background: var(--gp-accent); }
.k-timeline__marker--success { background: var(--gp-success); }
.k-timeline__marker--warning { background: var(--gp-warning); }
.k-timeline__content {
    min-width: 0;
    display: grid;
    gap: var(--gp-sp-1);
}
.k-timeline__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}
.k-timeline__meta {
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
}
.k-timeline__body {
    margin: 0;
    color: color-mix(in srgb, var(--gp-muted-foreground) 82%, var(--gp-fg));
}

/* Compact repeated metrics for panels where KPI tiles are excessive. */
.k-stat-list {
    margin: 0;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-stat-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gp-sp-4);
    align-items: baseline;
    padding: var(--gp-sp-3) 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-stat-list__label {
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
}
.k-stat-list__value {
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.k-stat-list__value--success { color: var(--gp-success); }
.k-stat-list__value--warning { color: var(--gp-warning); }
.k-stat-list__value--danger { color: var(--gp-danger); }

@media (max-width: 575.98px) {
    .k-type-description-list {
        grid-template-columns: 1fr;
        gap: var(--gp-sp-1);
    }
    .k-type-description-list dd + dt {
        margin-top: var(--gp-sp-2);
    }
    .k-detail-list__item {
        grid-template-columns: 1fr;
        gap: var(--gp-sp-1);
        align-items: start;
    }
}

/* ---- 21. DadKit (Phase 3) --------------------------------------------
 *
 * The DadKit shared renderer (src/DadKit/DadKitRenderer.php,
 * DadKitFormBuilder.php, DadKitInlineBlockRenderer.php,
 * DadKitRelationRenderer.php, DadKit.php) emits both the legacy
 * `dadkit-*` class names (preserved for JS hooks per
 * behavior compatibility) and the new `k-*` co-classes
 * defined here. The `k-*` rules win when both are present because
 * they are more specific in intent and use sharper Kinetic tokens.
 *
 * The new block uses zero border-radius, 2px solid borders in
 * `var(--gp-border)`, and the acid-yellow accent for the active
 * state on rows / fields / chips.
 */

/* 21.1 Top toolbar (add row + quick search row above the list). */

.k-top-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-6);
    margin: var(--gp-sp-6) 0;
    padding: var(--gp-sp-6) 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
.k-top-toolbar--split {
    justify-content: center;
}
.k-top-toolbar--split .dadkit-bulk-edit-action {
    margin-left: 0;
}
.k-top-toolbar .dadkit-add-row-action,
.k-top-toolbar .dadkit-quick-search {
    display: flex;
    align-items: center;
}
.k-top-toolbar .dadkit-quick-search {
    flex: 1 1 26.25rem;
    max-width: 45rem;
}
.k-top-toolbar .dadkit-add-row-button {
    min-height: 3.5rem;
    padding: 0 2rem;
}
.k-top-toolbar .k-input--search {
    min-height: 3.5rem;
}

/* Section-layout utility bands sit directly between the page title and
 * the flush data region. Center their controls within the band and avoid
 * drawing a second divider immediately above the table. */
body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section > .k-top-toolbar {
    min-height: 7rem;
    margin: 0;
    padding-top: var(--gp-sp-4);
    padding-bottom: var(--gp-sp-4);
    border-bottom: 0;
}

/* 21.2 Search wrapper — magnifier icon + input on a single 56px-tall row.
 *      Used by `.dadkit-quick-search` and the relation picker input. */
.k-input--search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.k-input--search-wrapper .k-input--search-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    color: var(--gp-muted-foreground);
    pointer-events: none;
    font-size: 1.125rem;
    z-index: 1;
}
body:not(.wholesale-portal-body) .k-input--search-wrapper .k-input--search {
    padding-left: 3rem;
    width: 100%;
}
.k-input--search-wrapper--clearable .k-input--search {
    padding-right: calc(var(--gp-sp-12) + 0.25rem);
}
.k-input--search-clear {
    position: absolute;
    right: var(--gp-sp-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    cursor: pointer;
    z-index: 1;
}
.k-input--search-clear:hover,
.k-input--search-clear:focus-visible {
    color: var(--gp-foreground);
}
.k-input--search.is-loading ~ .k-input--search-icon,
.k-input--search-wrapper.is-loading .k-input--search-icon {
    color: var(--gp-accent);
}

/* 21.3 Action stack — the per-row action button column. Aligns the
 *      icon buttons to the right edge of the 42px action column. */
.k-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
}
.k-action-stack form {
    margin: 0;
}
.k-action-stack .k-btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
}

/* 21.4 Inline drawer — the row that lazy-loads the drawer body via
 *      HTMX. Painted as a `.k-drawer` block once the content arrives. */
.k-drawer--inline {
    display: block;
    width: 100%;
    max-width: calc(100vw - var(--gp-sp-4));
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: var(--gp-sp-4) var(--gp-sp-6);
    border-width: 0 0 0 4px;
    border-left-color: var(--gp-accent);
}
.k-drawer--inline .dadkit-drawer-fields {
    gap: 0;
    min-width: 0;
}
.k-drawer__archive-form {
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--gp-sp-6);
    padding-top: var(--gp-sp-4);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-drawer__archive-form .k-input--compact {
    flex: 1 1 18rem;
    min-width: 12rem;
}
.k-drawer__read-table {
    width: 100%;
    margin: 0;
}
.k-drawer__read-label {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    font-weight: 700;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    vertical-align: top;
    width: 220px;
}
.k-table--borderless tbody td,
.k-table--borderless tbody th {
    border-bottom: 0;
}

/* 21.5 Sync indicator (the inline-save dot). Acid-yellow pulse on
 *      success, red flash on error. Used inside the topbar AND
 *      floating (the JS in `app.js` builds the floating copy). */
.k-sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: 0.25rem 0.625rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border-radius: 999px;
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 700;
    transition: opacity var(--gp-dur) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
}
.k-sync-indicator.is-visible { opacity: 1; transform: translateY(0); }
.k-sync-indicator.is-saving { border-color: var(--gp-accent); color: var(--gp-accent); }
.k-sync-indicator.is-saved  { border-color: var(--gp-success); color: var(--gp-success); }
.k-sync-indicator.is-error  { border-color: var(--gp-danger); color: var(--gp-danger); }
.k-sync-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}
.k-sync-indicator.is-saving .k-sync-dot {
    background: var(--gp-accent);
    animation: k-sync-pulse 1.1s ease-in-out infinite;
}
.k-sync-indicator.is-saved .k-sync-dot  { background: var(--gp-success); }
.k-sync-indicator.is-error .k-sync-dot  { background: var(--gp-danger); }
@keyframes k-sync-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* 21.6 Chip (`.k-chip` already defined in §2.2 components; the
 *      chip list + removable bits are new in Phase 3). */
.k-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}

/* Cell-level chip group. The companion to `.k-chip-list` for use
 * inside table cells, dense data lists, or any narrow container
 * where the chip list needs to flow into multiple lines without
 * each chip touching its neighbor. Same flex+wrap recipe as
 * `.k-chip-list` but with the smaller `--gp-sp-2` (8px) gap so
 * the group fits a typical table cell without forcing a horizontal
 * scrollbar. Each chip is still a distinct inline element (the
 * flex children are not visually merged) so screen readers
 * announce each scope / tag as its own token. Per the prompt
 * §7.13 chip recipe the chips carry their own border / background
 * so the visual gap is reinforced by the chip's own shape. */
.k-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
}
.k-chip-group > .k-badge,
.k-chip-group > .k-chip { margin: 0; }

/* Inline cell stack: stacks a primary element (e.g. a status
 * badge) above a muted secondary line (e.g. "12 uses") inside
 * a single table cell, without breaking the table layout.
 * Used by the API-tokens list for the combined
 * STATUS & USES cell. */
.k-table-cell-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-1);
}
.k-table-cell-stack__meta { line-height: 1.2; }
.k-chip__remove {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
.k-chip__remove:hover,
.k-chip__remove:focus {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* 21.7 Inline-field wrapper (`.k-field--inline`). The per-row inline
 *      editor resets the global field margin so its compact padding
 *      and 1px separators own the drawer's vertical rhythm. */
.k-field--inline {
    min-width: 0;
    margin-bottom: 0;
    padding: var(--gp-sp-4) 0;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-field--inline:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.k-field--inline:last-of-type { padding-bottom: 0; }
.k-field--inline .k-label {
    margin-bottom: var(--gp-sp-2);
}
@media (max-width: 767.98px) {
    .k-drawer--inline {
        position: sticky;
        left: 0;
        z-index: 1;
        max-width: calc(100vw - var(--gp-sp-6));
        padding-inline: var(--gp-sp-3);
    }
}

@media (max-width: 575.98px) {
    .k-drawer__archive-form {
        flex-direction: column;
        align-items: stretch;
    }
    .k-drawer__archive-form .k-input--compact {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    .k-drawer__read-table {
        table-layout: fixed;
    }
    .k-drawer__read-label {
        width: 42% !important;
        padding-inline: var(--gp-sp-2);
        overflow-wrap: anywhere;
    }
    .k-drawer__read-table td {
        min-width: 0;
        padding-inline: var(--gp-sp-2);
        overflow-wrap: anywhere;
    }
}

/* 21.8 Toggle (`.k-toggle`) co-class on form-switch. The kinetic
 *      `k-toggle` already defines a pill + handle; the
 *      `.k-field--toggle` wrapper gives the label some breathing
 *      room when the form is stacked vertically. */
.k-field--toggle {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 2.5rem;
}

/* 21.9 Platform toggles (`.k-toggle--platform`). A row of platform
 *      chips with the acid-yellow active state. Used by the
 *      `renderPlatforms` inline block. */
.k-toggle--platform {
    min-width: 7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 700;
}

/* 21.10 Choice buttons (`.k-choice-buttons`). A row of outline
 *       buttons that flips the active one to primary. */
.k-choice-buttons .k-btn[aria-pressed="true"],
.k-choice-buttons .k-btn.is-active,
.k-choice-buttons .k-btn.btn-primary {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

.k-choice-buttons--segmented {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-choice-buttons--segmented .k-btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 2rem;
    padding: 0.125rem 0.75rem;
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.k-choice-buttons--segmented .k-btn:last-child {
    border-right: 0;
}
.k-choice-buttons--segmented .k-btn:hover,
.k-choice-buttons--segmented .k-btn:active {
    transform: none;
}
body:not(.wholesale-portal-body) [class*="col-md-"] .k-choice-buttons--segmented {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
body:not(.wholesale-portal-body) [class*="col-md-"] .k-choice-buttons--segmented .k-btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-inline: 0.35rem;
}

/* 21.11 Preset buttons (`.k-preset-buttons`). A compact, dark
 *       segmented control for quick-select text presets. The direct
 *       child rules intentionally support both DadKit's `.k-btn`
 *       markup and isolated catalog examples that use only the
 *       component-specific classes. The small radius is a deliberate
 *       local exception to the otherwise square Kinetic shape reset. */
.k-preset-buttons {
    display: inline-flex;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    padding: 0.125rem;
    overflow: hidden;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: 0.5rem !important;
    background: color-mix(in srgb, var(--gp-bg) 82%, var(--gp-muted));
}
.k-preset-buttons > .k-preset-buttons__preset,
.k-preset-buttons > .k-preset-buttons__custom,
.k-preset-buttons > .k-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 1.75rem;
    padding: 0 var(--gp-sp-2);
    border: 0;
    border-radius: 0.375rem !important;
    background: transparent;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease);
}
.k-preset-buttons > .k-preset-buttons__preset:hover,
.k-preset-buttons > .k-preset-buttons__custom:hover,
.k-preset-buttons > .k-btn:hover {
    background: color-mix(in srgb, var(--gp-fg) 8%, transparent);
    color: var(--gp-fg);
    transform: none;
}
.k-preset-buttons > .k-preset-buttons__preset:active,
.k-preset-buttons > .k-preset-buttons__custom:active,
.k-preset-buttons > .k-btn:active {
    transform: none;
}
.k-preset-buttons > .k-preset-buttons__preset:focus-visible,
.k-preset-buttons > .k-preset-buttons__custom:focus-visible,
.k-preset-buttons > .k-btn:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: -2px;
}
.k-preset-buttons > [aria-pressed="true"],
.k-preset-buttons > .is-active,
.k-preset-buttons > .active,
.k-preset-buttons > .k-btn--primary,
.k-preset-buttons > .btn-primary {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
.k-preset-buttons > :disabled,
.k-preset-buttons > [aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* 21.12 File input (`.k-file`) is a drop zone. The form builder
 *       wraps the actual `<input type="file">` inside a label
 *       (so the label is the click target). The input itself
 *       stays visually hidden but is fully accessible. */
.k-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-2);
    cursor: pointer;
}
.k-file i {
    font-size: 1.5rem;
    color: var(--gp-accent);
}
.k-file input[type="file"]::file-selector-button {
    margin-right: var(--gp-sp-3);
    padding: 0 var(--gp-sp-4);
    min-height: 2.5rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 0;
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* 21.13 Contact info grid (`.k-contact-info`). */
.k-contact-info .col-md-4 > .k-input,
.k-contact-info .col-md-6 > .k-input {
    width: 100%;
}

/* 21.14 Combobox — see §3.1 components.css; the `dadkit-relation`
 *       root element is rendered with `k-combobox` co-class so the
 *       new rules win. The `k-combobox__selected` row is new. */
.k-combobox__selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
.k-combobox__selected .k-chip {
    margin: 0;
}
.k-combobox .k-input--search {
    border: var(--gp-border-w) solid var(--gp-border);
}

/* 21.15 Empty state table cell (the `.k-table__empty` rule already
 *       exists in §4; the new variant `.k-alert--empty` is a
 *       compact variant the table can use without surrounding
 *       card chrome). */
.k-table__load-more {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-6) var(--gp-sp-4);
}

/* 21.16 Collapse (`.k-collapse` is in §17; the inline-block-mode
 *       advanced options section needs a slightly different
 *       treatment when used inside the DadKit form chrome). */
.k-collapse--advanced {
    margin-top: var(--gp-sp-6);
}
.k-collapse--advanced .k-collapse__body {
    padding: var(--gp-sp-4) 0;
}
.k-collapse--advanced .k-collapse__header {
    width: 100%;
    text-align: left;
}
.k-collapse--advanced .k-collapse__header[aria-expanded="true"] {
    color: var(--gp-accent);
}

/* 21.17 String list chip group (legacy `dadkit-string-list__chip`
 *       is rendered with `k-chip` co-class; the new rule keeps
 *       the visual in line with the rest of the chip system). */
.dadkit-string-list__chip.k-chip {
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
}

/* ---- 22. Phase 4 — DadKit protected row blocks -----------------------
 *
 * The four bespoke row templates under
 * `apps/{media_admin,model_admin,model_leads,photographer_admin}/templates/gruff-pup/row.html`
 * are intentionally small markup surfaces. Keep changes scoped to the
 * template's existing block contract unless a product request explicitly
 * changes the layout.
 * They reference `*_block` context variables that each
 * `DadKit\Adapters\*Adapter::getTemplateContext()` builds. This
 * section re-skins the *containers* the templates use to host
 * the per-cell block content.
 *
 * Class strategy (per Phase 3's "co-class" pattern):
 *  - The legacy `dadkit-*` class names are preserved on every
 *    container so the JS in `public/assets/app.js` (drag-and-drop,
 *    crop, preview, etc.) keeps working unchanged.
 *  - A new `k-*` co-class is added to the same element. The
 *    compound selector (`.dadkit-X.k-X`) gives the kinetic rule
 *    a higher specificity than the legacy `app.css` rule and the
 *    new kinetic visual wins.
 *  - All new rules use `--gp-*` tokens (acid yellow accent, sharp
 *    corners, 2px borders, no shadows) per `KINETIC_STYLE_GUIDE.md`.
 */

/* 22.1 Media row grid (4 cells: media, ratings, status, relations).
 *      The row is a flex layout (rows are stacked, each row is a 4-column
 *      grid) so the rows flow flush against each other and the only
 *      visual delineation between rows is a 1px bottom hairline (no full
 *      border around the entire row, no per-cell border, no muted cell
 *      background). The cells hold the existing content blocks and share
 *      a horizontal grid that rebalances columns based on available
 *      width. Landscape-tablet layouts keep all four cells in one band;
 *      only the narrow breakpoints rearrange the row. Each cell uses
 *      `min-width: 0` and a tight internal gap so its controls can shrink.
 *      Selectors use the `body:not(.wholesale-portal-body)` parent for
 *      higher specificity (0,2,0 vs the legacy `.dadkit-media-row`
 *      rule in `app.css` at 0,1,0) so the kinetic visual wins while
 *      preserving the row template block contract. */
body:not(.wholesale-portal-body) .dadkit-table > tbody > tr:has(> td > .dadkit-media-row):hover {
    --bs-table-bg-state: transparent;
    background: transparent;
}
body:not(.wholesale-portal-body) .dadkit-table > tbody > tr > td:has(> .dadkit-media-row),
body:not(.wholesale-portal-body) td:has(> .dadkit-media-row) {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Brand Admin keeps its compact comparison table on desktop. At phone widths,
 * the same semantic cells become one two-column record so identity, domain,
 * status, and row actions stay directly reachable without horizontal swiping.
 * DadKit drawer/archive hooks and the table markup remain unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-brand_admin > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
}
body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-brand_admin .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--gp-sp-1);
        padding: var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
        grid-column: 1 / -1;
        padding-block: var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(n + 2) {
        border-top: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-border) 55%, transparent);
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "Brand"; }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Slug"; }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Domain"; }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Status"; }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Actions"; }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-actions-col {
        position: static;
        width: 100%;
        align-items: flex-end !important;
        padding-right: var(--gp-sp-3) !important;
        padding-bottom: var(--gp-sp-4) !important;
        padding-left: var(--gp-sp-3) !important;
        border-left: 0;
        background: transparent;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-actions-col .k-action-stack {
        width: 100%;
        gap: var(--gp-sp-1);
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-actions-col .k-action-stack > .k-btn,
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-actions-col .k-action-stack > form > .k-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .k-brand-identity {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .k-brand-identity__swatch {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .k-brand-identity__name {
        max-width: 100%;
        font-size: 1.125rem;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-brand_admin .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

body:not(.wholesale-portal-body) .k-page-section--flush .dadkit-table-wrap,
body:not(.wholesale-portal-body) .k-page-section--flush .k-table-wrap {
    border-left: 0;
    border-right: 0;
}

body:not(.wholesale-portal-body) .k-page-section--flush .dadkit-table,
body:not(.wholesale-portal-body) .k-page-section--flush .k-table,
body:not(.wholesale-portal-body) .k-page-section--flush .dadkit-table > :not(caption) > * > :first-child,
body:not(.wholesale-portal-body) .k-page-section--flush .k-table > :not(caption) > * > :first-child {
    border-left: 0;
}

body:not(.wholesale-portal-body) .k-page-section--flush .dadkit-table > :not(caption) > * > :last-child,
body:not(.wholesale-portal-body) .k-page-section--flush .k-table > :not(caption) > * > :last-child {
    border-right: 0;
}

body:not(.wholesale-portal-body) .dadkit-media-row {
    display: grid;
    /* Media + ratings + status + combined relations. The middle/status
     * column is the narrowest because the cleared/view toggle chips
     * are compact. The relations column is wider because it hosts
     * both product and model chip stacks. minmax(0, ...) keeps each
     * cell from forcing overflow and lets the inner blocks compress
     * on narrow viewports. */
    grid-template-columns: minmax(210px, 1.3fr) minmax(175px, 1fr) minmax(165px, 0.9fr) minmax(235px, 1.2fr);
    gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    background: var(--gp-bg);
    border-top: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    transition: background-color var(--gp-dur-fast) var(--gp-ease);
}
body:not(.wholesale-portal-body) .dadkit-media-row:hover {
    background: rgba(223, 225, 4, 0.02);
}
/* DadKit applies bulk-selection state to the outer table row. Media Admin's
 * opaque custom row sits inside that table cell, so mirror the state onto the
 * visible row surface instead of letting the selected parent paint underneath. */
body:not(.wholesale-portal-body) #dadkit-list-media_admin
.dadkit-table > tbody > tr[data-dadkit-row].is-selected > td:first-child > .dadkit-media-row {
    background: color-mix(in srgb, var(--gp-accent) 8%, var(--gp-bg));
    box-shadow: inset 4px 0 0 var(--gp-accent);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin
.dadkit-table > tbody > tr[data-dadkit-row].is-selected:hover > td:first-child > .dadkit-media-row {
    background: color-mix(in srgb, var(--gp-accent) 12%, var(--gp-bg));
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell {
    padding: var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    min-width: 0;
    background: transparent;
    border: 0;
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell + .dadkit-media-row__cell {
    /* Vertical section dividers stay quieter than the horizontal row
     * separators so the row grouping remains visually dominant. */
    border-left: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-border) 55%, transparent);
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__label {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
    font-weight: 700;
    margin: 0;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    padding: 0;
    overflow: hidden;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: 0 !important;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons .k-btn {
    min-width: 0;
    min-height: 2rem;
    padding: 0.125rem 0.3rem;
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: 0 !important;
    font-size: 0.9375rem;
    line-height: 1;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons .k-btn:last-child {
    border-right: 0;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons__custom {
    overflow: hidden;
    color: var(--gp-muted-foreground) !important;
    text-overflow: ellipsis;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons__custom-input {
    margin-top: var(--gp-sp-2) !important;
}
/* Both View presets and Video Purpose use black text on the yellow selected state. */
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons > .k-btn.btn-primary,
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-preset-buttons > .k-btn.active,
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status .k-choice-buttons .k-btn.btn-primary {
    background: var(--gp-accent);
    color: var(--gp-accent-fg) !important;
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status [data-dadkit-field="video_purpose"].k-choice-buttons--segmented {
    display: flex;
    width: 100%;
}
body:not(.wholesale-portal-body) .dadkit-media-row__cell--status [data-dadkit-field="video_purpose"] .k-btn {
    flex: 1 1 50%;
    font-size: 0.9375rem;
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell--relations {
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__relation-section {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__relation-section--products:not(:has(.dadkit-relation__chip)) {
    margin-bottom: 0;
}
/* Selected matches share one baseline; removal stays inside the line instead
 * of floating over the next field. Keep the preview and row padding unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__selected {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip.k-chip {
    gap: var(--gp-sp-2);
    padding: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
    min-height: 0;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip.k-chip > span {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: 0;
    line-height: 1.25;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip img,
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip .dadkit-product-result__image {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip > span > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip .dadkit-product-result__text {
    display: block;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip .dadkit-product-result__family {
    font-weight: 500;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip .dadkit-product-result__variant {
    color: var(--gp-muted-foreground);
    margin-left: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip-remove.k-chip__remove {
    position: static;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip-remove.k-chip__remove:hover,
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-relation__chip-remove.k-chip__remove:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-actions-col {
    background: var(--gp-bg);
    vertical-align: top;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack {
    align-items: center;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack > .k-btn,
body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack > form > .k-btn {
    border-color: transparent;
    background: transparent;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack .k-btn:hover,
body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack .k-btn:focus-visible {
    border-color: var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-row-id-copy {
    width: 2.5rem;
    padding-inline: 0;
    font-size: 0.625rem;
}
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-row-id-copy__label {
    writing-mode: horizontal-tb;
    transform: none;
}
/* Keep unselected relationship searches legible within Media Admin rows. */
body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-media-row .dadkit-relation input[data-dadkit-relation-input]::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 1;
}
@media (max-width: 1400px) {
    body:not(.wholesale-portal-body) .dadkit-media-row {
        /* Preserve the four-column workflow at landscape-tablet widths.
         * Compact track floors and cell padding leave the relation pickers
         * usable without wrapping them below the rest of the row. */
        grid-template-columns: minmax(180px, 1.2fr) minmax(155px, 1fr) minmax(145px, 0.85fr) minmax(210px, 1.15fr);
    }
    body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell {
        padding: var(--gp-sp-3);
        gap: var(--gp-sp-2);
    }
}
@media (max-width: 900px) {
    /* Once the media record itself drops to two columns, stop reserving a
     * narrow table cell for DadKit actions. Let the custom row use the full
     * viewport and place the unchanged action controls in a compact footer. */
    body:not(.wholesale-portal-body) #dadkit-list-media_admin > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:first-child,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > .dadkit-actions-col {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > .dadkit-actions-col {
        padding: var(--gp-sp-2) var(--gp-sp-3) var(--gp-sp-3);
        border: 0;
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
        background: var(--gp-bg);
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack > .k-btn,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .k-action-stack > form > .k-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-row-id-copy {
        flex-basis: auto;
        width: auto;
        min-width: 3.25rem;
        padding-inline: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-row-id-copy__label {
        transform: none;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-load-more-row,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) .dadkit-media-row {
        grid-template-columns: 1fr 1fr;
    }
    body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell {
        border-left: 0 !important;
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell:nth-child(odd) {
        border-right: var(--gp-border-w-thin) solid var(--gp-border);
    }
}
@media (max-width: 640px) {
    body:not(.wholesale-portal-body) .dadkit-media-row {
        grid-template-columns: 1fr;
    }
    body:not(.wholesale-portal-body) .dadkit-media-row .dadkit-media-row__cell {
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-media-row__cell--ratings .dadkit-rating.k-rating {
        display: grid;
        grid-template-columns: repeat(5, minmax(2.75rem, 1fr));
        width: 100%;
        max-width: none;
        overflow: hidden;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-media-row__cell--ratings .dadkit-rating__btn.k-rating__btn {
        flex: none;
        width: auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: auto;
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-media-row__cell--ratings .dadkit-rating__btn.k-rating__btn:nth-of-type(-n + 5) {
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) #dadkit-list-media_admin .dadkit-media-row__cell--ratings .dadkit-rating__btn.k-rating__btn:nth-of-type(5n) {
        border-right: 0;
    }
    .dadkit-media-variants.k-media-variants .dadkit-variant-zone.k-variant-zone {
        min-width: 2.75rem;
    }
    .dadkit-media-variants.k-media-variants .dadkit-variant-zone.k-variant-zone--custom {
        width: 2.75rem !important;
        min-width: 2.75rem !important;
    }
}

/* 22.2 Media block (the main + variants grid in the first cell).
 *      Per the new media-admin spec, the variants row is stacked
 *      DIRECTLY BENEATH the main media file rather than to the
 *      right of it — the visual reads as a single column with
 *      the main poster on top and the variant dropzones below.
 *      The main preview also collapses from a 240×240 fixed
 *      square to a fluid width with `max-width` so the cell can
 *      flex with the row instead of forcing horizontal scroll. */
.dadkit-media-block.k-media-block {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    align-items: stretch;
    max-width: 100%;
    min-width: 0;
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                border-color var(--gp-dur-fast) var(--gp-ease);
}

/* 22.3 Main media preview container — fluid-width sharp frame.
 *      The plan's "poster" effect: a 2px acid-yellow border on
 *      hover / drag-over. The frame is now fluid (full cell width
 *      with a `max-height` for the stacked layout) instead of a
 *      fixed 240×240 square, so the main media always reads as
 *      the dominant element above the variants strip. */
.dadkit-media-main.k-media-main {
    width: 100%;
    min-width: 0;
    min-height: 180px;
    max-height: 240px;
    aspect-ratio: 4 / 3;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--gp-dur-fast) var(--gp-ease),
                background-color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-media-main.k-media-main:hover,
.dadkit-media-main.k-media-main:focus-visible,
.dadkit-media-main.k-media-main.dadkit-dropzone--active.k-dropzone--active,
.dadkit-media-main.k-media-main.k-dropzone--active {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
}
.dadkit-media-main.k-media-main:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: 2px;
}
.dadkit-media-main.k-media-main:hover img,
.dadkit-media-main.k-media-main.dadkit-dropzone--active.k-dropzone--active img,
.dadkit-media-main.k-media-main.k-dropzone--active img {
    mix-blend-mode: normal;
    opacity: 0.92;
}

/* 22.4 The main media image (and the empty state) sit at full
 *      container size with `object-fit: contain` so the aspect
 *      ratio is preserved inside the 240×240 frame. */
.dadkit-media-main.k-media-main .dadkit-media-preview.k-media-preview,
.dadkit-media-main.k-media-main .dadkit-media-empty.k-media-empty {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--gp-muted);
    cursor: zoom-in;
    display: block;
}
.dadkit-media-main.k-media-main .dadkit-media-empty.k-media-empty {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
}

/* Populated media previews should not inherit the muted drop-zone fill.
 * Keep that fill only for the empty state so an uploaded image remains
 * visually dominant rather than sitting inside a grey panel. */
.dadkit-media-block.k-media-block:has(.dadkit-media-preview) .dadkit-media-main.k-media-main {
    background: transparent;
    border-color: transparent;
}
.dadkit-media-block.k-media-block:has(.dadkit-media-preview) .dadkit-media-preview.k-media-preview {
    background: transparent;
}
.dadkit-media-video-placeholder.k-media-video-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dadkit-media-video-placeholder.k-media-video-placeholder i {
    font-size: 2rem;
}
.dadkit-media-video-status.k-media-video-status {
    position: absolute;
    left: var(--gp-sp-2);
    bottom: var(--gp-sp-2);
    max-width: calc(100% - (2 * var(--gp-sp-2)));
    padding: 0.2rem 0.45rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: color-mix(in srgb, var(--gp-bg) 90%, transparent);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    pointer-events: none;
}

/* 22.5 Variants strip — horizontal flex of 56×56 squares. */
.dadkit-media-variants.k-media-variants {
    display: flex;
    gap: var(--gp-sp-1);
    flex-wrap: nowrap;
    justify-content: safe center;
    max-width: 100%;
    min-width: 0;
    align-content: flex-start;
    align-items: flex-start;
}

/* 22.6 Variant zone button (a single 56×56 drop zone). 2px dashed
 *      border in `var(--gp-border)`, acid-yellow on drag-over. */
.dadkit-variant-zone.k-variant-zone {
    height: 56px;
    min-width: 28px;
    padding: 0;
    border: var(--gp-border-w) dashed var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: copy;
    transition: border-color var(--gp-dur-fast) var(--gp-ease),
                background-color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-variant-zone.k-variant-zone:hover,
.dadkit-variant-zone.k-variant-zone:focus-visible,
.dadkit-variant-zone.k-variant-zone.dadkit-dropzone--active.k-dropzone--active,
.dadkit-variant-zone.k-variant-zone.k-dropzone--active {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.dadkit-variant-zone.k-variant-zone:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: 2px;
}
.dadkit-variant-zone.k-variant-zone--custom {
    width: 36px !important;
    min-width: 36px !important;
}
.dadkit-variant-zone.k-variant-zone .dadkit-media-variant-thumb.k-media-variant-thumb {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}
.dadkit-variant-zone.k-variant-zone.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.dadkit-variant-zone.k-variant-zone__label,
.dadkit-variant-zone .dadkit-variant-zone__label.k-variant-zone__label {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    color: inherit;
    line-height: 1;
    font-weight: 700;
}
.dadkit-variant-zone.k-variant-zone__count,
.dadkit-variant-zone .dadkit-variant-zone__count.k-variant-zone__count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    min-width: 1.25rem;
    height: 1.25rem;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 0;
    border-radius: 0;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
}

/* 22.7 Active dropzone state. The JS in `app.js` adds
 *      `dadkit-dropzone--active` on drag-over; the new
 *      `.k-dropzone--active` co-class is on the same element and
 *      the compound selector wins. */
.dadkit-dropzone--active.k-dropzone--active {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    box-shadow: 0 0 0 2px rgba(223, 225, 4, 0.25);
}

/* 22.8 Model + model_leads row grid (the 4 cells: reference
 *      photo, status/type, names/tags, social). The outer
 *      `.dadkit-model-row` is just a `<div>` wrapper today; the
 *      actual layout is delegated to Bootstrap's `.row .g-3`
 *      inside the template. The new rule layers a sharp border
 *      and a no-shadow grid on top of the Bootstrap grid.
 *      Selectors use the `body:not(.wholesale-portal-body)` parent
 *      for higher specificity (0,2,0) so the kinetic visual wins
 *      without rewriting the four `row.html` templates. */
body:not(.wholesale-portal-body) .dadkit-model-row {
    width: 100%;
    max-width: 100%;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .dadkit-model-row > .row {
    margin: 0;
    --bs-gutter-x: var(--gp-sp-4);
    --bs-gutter-y: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .dadkit-model-row > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    min-width: 0;
}

/* 22.9 Reference photo block — the "poster" effect: 200×280
 *      portrait ratio, sharp 2px border, model name overlaid in
 *      the bottom-left in bold uppercase on hover. */
.dadkit-model-photo.k-photo-block {
    width: 100%;
    aspect-ratio: 200 / 280;
    min-height: 200px;
    max-height: 320px;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--gp-dur-fast) var(--gp-ease),
                background-color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-model-photo.k-photo-block:hover,
.dadkit-model-photo.k-photo-block.dadkit-model-photo--active.k-photo-block--active {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
}
.dadkit-model-photo.k-photo-block .dadkit-model-photo__img.k-photo-block__img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    object-fit: cover;
    object-position: center top;
}
.dadkit-model-photo.k-photo-block .dadkit-model-photo__placeholder.k-photo-block__placeholder {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    text-align: center;
    padding: var(--gp-sp-3);
    font-weight: 700;
}
.dadkit-model-photo.k-photo-block .dadkit-model-photo__input.k-photo-block__input {
    display: none;
}
.dadkit-model-photo.k-photo-block--poster {
    /* The "poster" variant overlays the model's display_name in
     * bold uppercase on the bottom-left on hover. The block
     * builder is responsible for emitting the
     * `<span class="k-photo-block__caption">` element. */
    color: var(--gp-fg);
}
.dadkit-model-photo.k-photo-block--poster .k-photo-block__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--gp-dur) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
    pointer-events: none;
    border-top: var(--gp-border-w-thin) solid var(--gp-accent);
    border-right: var(--gp-border-w-thin) solid var(--gp-accent);
}
.dadkit-model-photo.k-photo-block--poster:hover .k-photo-block__caption,
.dadkit-model-photo.k-photo-block--poster:focus-within .k-photo-block__caption {
    opacity: 1;
    transform: translateY(0);
}

/* 22.10 Photographer row container (3 cells: identity, contact,
 *       social). The row.html wraps in `.row.g-3`; the new rule
 *       layers the sharp border / background. Uses the
 *       `body:not(.wholesale-portal-body)` parent selector for
 *       higher specificity. */
body:not(.wholesale-portal-body) .dadkit-photographer-row {
    width: 100%;
    max-width: 100%;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .dadkit-photographer-row > .row {
    margin: 0;
    --bs-gutter-x: var(--gp-sp-4);
    --bs-gutter-y: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .dadkit-photographer-row > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    min-width: 0;
}

/* 22.11 Inline field grid (the model + photographer + media
 *       inline-edit cells). The `.dadkit-inline-grid` is a
 *       CSS-grid wrapper that the per-field `render*` arms in
 *       `DadKitInlineBlockRenderer` emit. The previous version
 *       wrapped the controls in a muted-background "card" with
 *       a hairline border, which made the rating/status cells
 *       read as nested cards inside the row. The new rule drops
 *       the muted background and the border so the inner
 *       controls sit directly on the row background — the
 *       label below each field already provides enough
 *       visual separation. */
.dadkit-inline-grid.k-inline-grid {
    display: grid;
    gap: var(--gp-sp-3);
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
}
.dadkit-inline-grid--status.k-inline-grid--status {
    gap: var(--gp-sp-3);
    row-gap: var(--gp-sp-3);
}
.dadkit-inline-field.k-inline-field {
    display: grid;
    gap: var(--gp-sp-2);
    min-width: 0;
}
.dadkit-inline-label.k-inline-label {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
    font-weight: 700;
}

/* 22.12 Social account table (`.k-social-accounts`). Compact editable
 *       account rows with a shared header, borderless controls, platform
 *       color markers, and a summary footer. The underlying Alpine
 *       persistence contract remains owned by `dadkitInlineSocialAccounts`. */
.k-social-accounts {
    display: grid;
    gap: 0;
    min-width: 0;
}
.k-social-accounts__table,
.k-social-accounts__summary {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}
.k-social-accounts__table {
    overflow: hidden;
    border-right: 0;
    border-bottom: 0;
}
.k-social-accounts__header,
.k-social-accounts__row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(10rem, 1.45fr) minmax(6.5rem, 0.7fr) 2.75rem;
    align-items: stretch;
    min-width: 0;
}
.k-social-accounts__header {
    display: none;
}
.k-social-accounts__header > span,
.k-social-accounts__cell {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 var(--gp-sp-3);
}
.k-social-accounts__header > span + span,
.k-social-accounts__cell + .k-social-accounts__cell {
    border-left: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-border) 55%, transparent);
}
.k-social-accounts__row {
    min-height: 3rem;
}
.k-social-accounts__row + .k-social-accounts__row {
    border-top: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-border) 70%, transparent);
}
.k-social-accounts__cell--platform {
    gap: var(--gp-sp-2);
}
.k-social-accounts__platform-select {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}
.k-social-accounts__chevron {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: var(--gp-muted-foreground);
    font-size: 0.8rem;
    line-height: 1;
    pointer-events: none;
    transition: color var(--gp-dur-fast) var(--gp-ease),
                transform var(--gp-dur-fast) var(--gp-ease);
}
.k-social-accounts__platform-select:focus-within .k-social-accounts__chevron {
    color: var(--gp-accent);
}
.k-social-accounts__platform-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 0.55rem;
    border-radius: 50%;
    border: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-fg) 35%, transparent);
    background: var(--gp-muted-foreground);
}
.k-social-accounts__platform-dot--instagram {
    background: linear-gradient(135deg, #6b55ff 0%, #ff3b77 52%, #ffd15a 100%);
}
.k-social-accounts__platform-dot--tiktok {
    background: linear-gradient(135deg, #25f4ee 0%, #ffffff 45%, #fe2c55 100%);
}
.k-social-accounts__platform-dot--bluesky {
    background: #168cff;
}
.k-social-accounts__platform-dot--x,
.k-social-accounts__platform-dot--twitter {
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-social-accounts input.form-control.k-social-accounts__control,
body:not(.wholesale-portal-body) .k-social-accounts select.form-select.k-social-accounts__control {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 2.125rem;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-social-accounts select.form-select.k-social-accounts__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.5rem;
}
body:not(.wholesale-portal-body) .k-social-accounts input.form-control.k-social-accounts__control:focus,
body:not(.wholesale-portal-body) .k-social-accounts select.form-select.k-social-accounts__control:focus {
    border: 0 !important;
    outline: var(--gp-border-w-thin) solid var(--gp-accent);
    outline-offset: -1px;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.k-social-accounts__followers {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
}
.k-social-accounts__cell--remove {
    justify-content: center;
    padding: 0;
    background: transparent;
}
.k-social-accounts__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: var(--gp-border-w-thin) solid color-mix(in srgb, var(--gp-border) 75%, transparent);
    background: color-mix(in srgb, var(--gp-bg) 92%, var(--gp-muted));
    color: color-mix(in srgb, var(--gp-muted-foreground) 78%, transparent);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--gp-dur-fast) var(--gp-ease),
                background-color var(--gp-dur-fast) var(--gp-ease),
                border-color var(--gp-dur-fast) var(--gp-ease);
}
.k-social-accounts__remove:hover,
.k-social-accounts__remove:focus-visible {
    border-color: color-mix(in srgb, var(--gp-danger) 55%, var(--gp-border));
    background: color-mix(in srgb, var(--gp-danger) 10%, transparent);
    color: var(--gp-danger);
    outline: 0;
}
.k-social-accounts__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
    align-items: stretch;
}
body:not(.wholesale-portal-body) .k-social-accounts .k-social-accounts__add {
    align-self: stretch;
    justify-self: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: 3.5rem;
    gap: var(--gp-sp-2);
    margin: 0;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border: 0;
    background: transparent;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-social-accounts .k-social-accounts__add:hover,
body:not(.wholesale-portal-body) .k-social-accounts .k-social-accounts__add:focus-visible {
    background: color-mix(in srgb, var(--gp-fg) 5%, transparent);
    color: var(--gp-fg);
    outline: 0;
}
body:not(.wholesale-portal-body) .k-social-accounts .k-social-accounts__add:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: calc(-1 * var(--gp-border-w));
}
.k-social-accounts__total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 12rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-social-accounts__total-label {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.k-social-accounts__total strong {
    font-family: var(--gp-font-display);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1;
}
@media (max-width: 767.98px) {
    .k-social-accounts__header {
        display: none;
    }
    .k-social-accounts__row {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        padding-block: var(--gp-sp-1);
    }
    .k-social-accounts__cell {
        grid-column: 1;
        min-height: 2.125rem;
        border-left: 0 !important;
    }
    .k-social-accounts__cell--remove {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
    .k-social-accounts__remove {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }
    .k-social-accounts__summary {
        grid-template-columns: 1fr;
    }
    .k-social-accounts__total {
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
        border-left: 0;
    }
}

/* 22.13 Bulk upload zone (the `MediaAdminBulkUploadService` card).
 *       The card is a `.k-file` variant — full-width drop zone
 *       with a 2px dashed border, drag-over paints acid-yellow. */
.dadkit-bulk-upload.k-bulk-upload {
    position: relative;
    max-height: 0;
    margin-bottom: 0 !important;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition: max-height var(--gp-dur) var(--gp-ease),
                margin-bottom var(--gp-dur) var(--gp-ease),
                opacity var(--gp-dur-fast) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
}
.dadkit-bulk-upload__card.k-bulk-upload__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gp-sp-4);
    align-items: center;
    padding: var(--gp-sp-6) var(--gp-sp-8);
    border: var(--gp-border-w) dashed var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                border-color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-bulk-upload__copy.k-bulk-upload__copy {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    min-width: 0;
}
.dadkit-bulk-upload__icon.k-bulk-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.dadkit-bulk-upload__title.k-bulk-upload__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin: 0;
}
.dadkit-bulk-upload__actions.k-bulk-upload__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.dadkit-bulk-upload__button.k-bulk-upload__button {
    min-width: 8.25rem;
    min-height: 3.5rem;
    padding: 0 2rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: var(--gp-border-w) solid var(--gp-accent);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--gp-dur) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease);
}
.dadkit-bulk-upload__button.k-bulk-upload__button:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
    transform: scale(1.02);
}
.dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note {
    grid-column: 1 / -1;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 4.25rem;
    border: var(--gp-border-w) dashed var(--gp-accent);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.dadkit-bulk-upload__status.k-bulk-upload__status {
    grid-column: 1 / -1;
    min-height: 1rem;
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
}
.dadkit-bulk-upload.is-dragging-files.k-bulk-upload,
.dadkit-bulk-upload.is-hovered.k-bulk-upload {
    max-height: 16.25rem;
    margin-bottom: 1.5rem !important;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.dadkit-bulk-upload.is-dragging-files .dadkit-bulk-upload__card.k-bulk-upload__card,
.dadkit-bulk-upload.is-hovered .dadkit-bulk-upload__card.k-bulk-upload__card {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.dadkit-bulk-upload.is-dragging-files .dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note,
.dadkit-bulk-upload.is-hovered .dadkit-bulk-upload__drop-note.k-bulk-upload__drop-note {
    display: flex;
}
.dadkit-bulk-upload.is-uploading.k-bulk-upload .dadkit-bulk-upload__card.k-bulk-upload__card {
    opacity: 0.88;
}
@media (max-width: 1200px) {
    .dadkit-bulk-upload__card.k-bulk-upload__card {
        grid-template-columns: 1fr;
    }
    .dadkit-bulk-upload__actions.k-bulk-upload__actions {
        justify-content: flex-start;
    }
}

/* 22.13 Cropper + preview modal chrome. The two modals in
 *       `footer.php` (`#dadkitCropModal` and
 *       `#dadkitMediaPreviewModal`) keep their
 *       `data-bs-toggle="modal"` data-bus. The new rules paint
 *       the panel chrome in the kinetic style. */
.dadkit-crop-dialog.k-crop-dialog,
.dadkit-media-preview-dialog.k-media-preview-dialog {
    width: min(96vw, 1600px);
    max-width: min(96vw, 1600px);
    margin: 0.5rem auto;
}
.dadkit-crop-content.k-crop-content {
    height: calc(100vh - 1rem);
    min-height: calc(100vh - 1rem);
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
}
.dadkit-crop-stage.k-crop-stage {
    flex: 1 1 auto;
    min-height: 320px;
    height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
.dadkit-crop-stage.k-crop-stage img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}
.dadkit-media-preview-stage.k-media-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: min(58vh, 34rem);
    max-height: calc(100vh - 250px);
    overflow: hidden;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
.dadkit-media-preview-stage.k-media-preview-stage [hidden] {
    display: none !important;
}
.dadkit-media-preview-modal-image.k-media-preview-modal-image,
.dadkit-media-preview-modal-video.k-media-preview-modal-video {
    max-width: 100%;
    max-height: calc(100vh - 250px);
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--gp-muted);
}
.dadkit-media-preview-modal-video.k-media-preview-modal-video {
    width: 100%;
}
.dadkit-media-preview-video-empty.k-media-preview-video-empty {
    padding: var(--gp-sp-6);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}
.dadkit-media-preview-downloads.k-media-preview-downloads:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
@media (max-width: 640px) {
    .dadkit-media-preview-stage.k-media-preview-stage {
        min-height: 15rem;
        max-height: 52vh;
    }
    .dadkit-media-preview-modal-image.k-media-preview-modal-image,
    .dadkit-media-preview-modal-video.k-media-preview-modal-video {
        max-height: 52vh;
    }
    .dadkit-media-preview-downloads.k-media-preview-downloads:not([hidden]) > .btn {
        flex: 1 1 100%;
        min-height: 2.75rem;
    }
}

/* 22.14 Cropper.js outline — paint the crop box in acid yellow
 *       instead of the default soft blue. */
.cropper-view-box.k-cropper-view-box,
.k-cropper-view-box {
    outline: 2px solid var(--gp-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cropper-point.k-cropper-point,
.k-cropper-point {
    width: 10px;
    height: 10px;
    background-color: var(--gp-accent);
}
.cropper-line.k-cropper-line,
.k-cropper-line {
    background-color: var(--gp-accent);
}
.cropper-dashed.k-cropper-dashed,
.k-cropper-dashed {
    border: 1px dashed var(--gp-accent);
}

/* 22.15 Relation picker chip (`.dadkit-relation__chip`) — keep
 *       the inline-save behavior intact (the JS in
 *       `DadKitRelationRenderer` / `app.js` rewrites these
 *       chips). The chip is a low-emphasis pill (transparent
 *       background, thin left accent rule) so the products /
 *       models cells don't read as a stack of nested cards. */
.dadkit-relation__chip.k-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: 0.3rem 0.5rem 0.3rem 0.6rem;
    background: transparent;
    border: 0;
    border-left: var(--gp-border-w) solid var(--gp-border);
    min-width: 0;
    max-width: 100%;
    position: relative;
}
.dadkit-relation__chip.k-chip > span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 1.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dadkit-relation__chip-remove.k-chip__remove {
    appearance: none;
    position: absolute;
    top: -1px;
    right: -6px;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease),
                border-color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-relation__chip-remove.k-chip__remove:hover,
.dadkit-relation__chip-remove.k-chip__remove:focus {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
.dadkit-relation__chip-remove.k-chip__remove i {
    font-weight: 700;
}

/* 22.16 Relation picker dropdown — 220px max-height, 2px border,
 *       acid-yellow on active. The dropdown is teleported to
 *       body via `<template x-teleport="body">` so the rule is
 *       scoped to the document. */
.dadkit-relation__results.k-combobox__results {
    /* Alpine x-show adds inline display:none while the result set is empty.
     * This scoped default wins over the generic closed-combobox rule once
     * Alpine removes that inline style for a populated result set. */
    display: block;
    position: absolute;
    z-index: 1200;
    width: 100%;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    margin: 0;
    max-height: 13.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--gp-sp-2);
    box-shadow: 0 0 0 1px var(--gp-border);
}
.dadkit-relation__result.k-combobox__result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--gp-fg);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    cursor: pointer;
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease);
}
.dadkit-relation__result.k-combobox__result:hover,
.dadkit-relation__result.k-combobox__result:focus {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
.dadkit-relation__result.k-combobox__result.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
/* Media DB model search only: edge-to-edge square image and one truncated name line. */
.dadkit-relation__results--media-models .dadkit-relation__result.k-combobox__result {
    padding: 0;
    min-height: 4rem;
    overflow: hidden;
}
.dadkit-relation__results--media-models .dadkit-relation__result.k-combobox__result > span {
    display: flex;
    align-items: stretch;
    height: 4rem;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.dadkit-relation__results--media-models .dadkit-model-result__image.dadkit-thumb {
    display: block;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center top;
}
.dadkit-relation__results--media-models .dadkit-model-result__label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--gp-sp-3);
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 4rem;
}

/* Media DB product search: square edge-to-edge image, two independently truncated label lines. */
.dadkit-relation__results--media-products .dadkit-relation__result.k-combobox__result {
    padding: 0;
    min-height: 4rem;
    overflow: hidden;
}
.dadkit-relation__results--media-products .dadkit-relation__result.k-combobox__result > span {
    display: flex;
    align-items: stretch;
    height: 4rem;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.dadkit-relation__results--media-products .dadkit-product-result__image {
    display: block;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}
.dadkit-relation__results--media-products .dadkit-product-result__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--gp-sp-3);
}
.dadkit-relation__results--media-products .dadkit-product-result__family,
.dadkit-relation__results--media-products .dadkit-product-result__variant {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.25rem;
}
.dadkit-relation__results--media-products .dadkit-product-result__family {
    font-weight: 700;
}
.dadkit-relation__results--media-products .dadkit-product-result__variant {
    font-weight: 400;
}

.dadkit-thumb.k-thumb {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    object-position: center top;
    margin-right: 0.35rem;
    border: 0;
}

@media (max-width: 640px) {
    .dadkit-relation__chip.k-chip {
        min-height: 2.75rem;
        padding-right: 3rem;
    }
    .dadkit-relation__chip.k-chip > span {
        padding-right: 0;
    }
    .dadkit-relation__chip-remove.k-chip__remove {
        top: 50%;
        right: 0;
        width: 2.75rem;
        height: 2.75rem;
        transform: translateY(-50%);
    }
}

/* 22.17 Reduced-motion guard for the new block-level rules.
 *       The global `base.css` rule already strips transitions /
 *       animations under `prefers-reduced-motion: reduce`, but
 *       the new compound selectors benefit from an explicit
 *       no-transition override so the dropzone hover state
 *       snaps cleanly. */
@media (prefers-reduced-motion: reduce) {
    .dadkit-bulk-upload.k-bulk-upload,
    .dadkit-bulk-upload__card.k-bulk-upload__card,
    .dadkit-media-main.k-media-main,
    .dadkit-variant-zone.k-variant-zone,
    .dadkit-model-photo.k-photo-block,
    .dadkit-model-photo.k-photo-block--poster .k-photo-block__caption,
    .dadkit-bulk-upload__button.k-bulk-upload__button,
    .dadkit-relation__chip-remove.k-chip__remove,
    .dadkit-relation__result.k-combobox__result {
        transition: none;
    }
}

/* 22.18 Phase 1 (DadKit main-image keyboard resize) — opt-in scale
 *       contract.
 *
 *       `data-dadkit-main-image-resize` on the row-level image
 *       container opts the element into the shared resize behavior.
 *       The container's `max-height` is multiplied by
 *       `--dadkit-main-image-scale` (default 1) so JS can change
 *       the property to scale all visible images without per-row
 *       listeners.
 *
 *       The scale is bounded so narrow viewports cannot overflow.
 *       On screens ≤900px the scale is ignored for media rows
 *       (they already collapse to a single column and the image
 *       fills the column width naturally). On screens ≤640px the
 *       scale is ignored for model photos too.
 *
 *       Media previews keep `object-fit: contain`; model reference
 *       photos keep `object-fit: cover` / center-top alignment.
 *       Both inherit from the base rules above — these selectors
 *       only adjust container dimensions. */
[data-dadkit-main-image-resize] {
    --dadkit-main-image-scale: 1;
}

[data-dadkit-main-image-resize].dadkit-media-main.k-media-main {
    max-height: calc(240px * var(--dadkit-main-image-scale));
}

[data-dadkit-main-image-resize].dadkit-model-photo.k-photo-block {
    max-height: calc(320px * var(--dadkit-main-image-scale));
}

/* Clamp at narrow breakpoints: grid collapses to single column,
 * image uses full column width, scaling would push content below
 * the fold unnecessarily. */
@media (max-width: 900px) {
    [data-dadkit-main-image-resize].dadkit-media-main.k-media-main {
        max-height: 240px;
    }
}

@media (max-width: 640px) {
    [data-dadkit-main-image-resize].dadkit-model-photo.k-photo-block {
        max-height: 320px;
    }
}
/* The outline uses the same displayed-frame proportions as the original-coordinate controls. */
.k-video-square-stage { position: relative; margin-top: var(--gp-sp-3); }
.k-video-square-stage video { display: block; width: 100%; height: auto; }
.k-video-square-outline { position: absolute; border: var(--gp-border-w) solid var(--gp-accent); pointer-events: none; }
/* Video crop slots use the same compact, single-row geometry as photo variants.
 * The entire slot is a file drop target; populated tiles play in the preview modal. */
.dadkit-media-variants.k-media-variants[data-media-kind="video"] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gp-sp-1);
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    align-items: center;
}
.k-video-square-crop.k-variant-zone {
    position: relative;
    flex: 0 0 auto;
    min-width: 1.7rem;
    max-width: none;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
}
.k-video-square-crop.k-variant-zone:hover,
.k-video-square-crop.k-variant-zone:focus-within,
.k-video-square-crop.k-variant-zone.dadkit-dropzone--active {
    border-color: var(--gp-accent);
}
.k-video-square-play,
.k-video-square-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gp-fg);
    font: 700 .64rem var(--gp-font-display);
    cursor: pointer;
}
.k-video-square-empty:disabled { cursor: not-allowed; opacity: .5; }
.k-video-square-play:focus-visible,
.k-video-square-empty:focus-visible,
.k-video-square-edit:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: -2px;
}
.k-video-square-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    background: var(--gp-muted);
}
.k-video-square-ratio {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    text-align: center;
    color: var(--gp-fg);
    background: var(--gp-bg);
    opacity: .82;
    font-size: .58rem;
    line-height: 1.15;
}
.k-video-square-edit {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    background: var(--gp-bg);
    color: var(--gp-fg);
    cursor: pointer;
}
.k-video-square-crop:hover .k-video-square-edit,
.k-video-square-crop:focus-within .k-video-square-edit { display: block; }
.k-video-square-state {
    position: absolute;
    inset: auto 0 0;
    pointer-events: none;
    background: var(--gp-bg);
    color: var(--gp-fg);
    font: 600 .48rem var(--gp-font-body);
    text-align: center;
    text-transform: uppercase;
}
.dadkit-media-main.k-media-main .k-media-video-thumb {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    background: transparent;
}
.dadkit-media-main.k-media-main .dadkit-media-video-placeholder {
    background: var(--gp-muted);
}
@media (hover: none) {
    .k-video-square-edit { display: block; }
}
@media (max-width: 640px) {
    .k-video-square-crop.k-variant-zone { flex-shrink: 0; }
}

/* Video Studio: one focused preview; internal source/coordinate state is not a sidebar. */
.k-video-studio-modal { --k-video-studio-gap: clamp(.75rem, 2vw, 1.5rem); }
.k-video-studio-dialog { width: min(96vw, 1060px); max-width: none; margin: 1rem auto; }
.k-video-studio-content { max-height: calc(100dvh - 2rem); overflow: hidden; border: var(--gp-border-w) solid var(--gp-border); }
.k-video-studio-header { flex: none; padding: 1rem 1.5rem; }
.k-video-studio-eyebrow, .k-video-studio-preview-heading { font-size: .7rem; letter-spacing: .09em; font-weight: 750; text-transform: uppercase; }
.k-video-studio-eyebrow { color: var(--bs-secondary-color); }
.k-video-studio-body { min-height: 0; overflow: auto; padding: var(--k-video-studio-gap); }
.k-video-studio-preview { min-width: 0; }
.k-video-studio-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.k-video-studio-preview-actions { display: flex; align-items: center; gap: .5rem; }
.k-video-studio-icon-button {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--gp-border); border-radius: var(--gp-radius-sm, 0);
    background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer;
}
.k-video-studio-icon-button:hover { border-color: var(--gp-accent); }
.k-video-studio-icon-button.is-active, .k-video-studio-icon-button[aria-pressed="true"] { background: var(--gp-accent); color: var(--gp-ink, #000); border-color: var(--gp-accent); }
.k-video-studio-icon-button:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.k-video-studio-icon-button i { font-size: 1.2rem; }
.k-video-studio-stage { display: block; background: var(--gp-ink, #0b0e12); overflow: hidden; border: 1px solid var(--bs-border-color); }
.k-video-studio-stage video { width: 100%; height: auto; max-height: min(62dvh, 660px); object-fit: contain; }
.k-video-studio-message { margin: .75rem 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.k-video-studio-message[hidden] { display: none; }
.k-video-studio-footer { flex: none; justify-content: flex-end; padding: 1rem 1.5rem; }
.k-video-studio-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 850px) {
    .k-video-studio-dialog { width: calc(100vw - 1rem); margin: .5rem auto; }
    .k-video-studio-content { max-height: calc(100dvh - 1rem); }
}
@media (max-width: 520px) {
    .k-video-studio-header, .k-video-studio-footer { padding: .75rem; }
    .k-video-studio-actions { width: 100%; }
    .k-video-studio-actions .btn { flex: 1 1 auto; }
}

/* Video selection: bounded panels dim only discarded picture pixels, above the video layer. */
.k-video-crop-mask { position: absolute; z-index: 2; background: rgba(0,0,0,.64); pointer-events: none; }
.k-video-crop-mask[hidden] { display: none; }
.k-video-studio-stage .k-video-square-outline { z-index: 3; cursor: move; touch-action: none; pointer-events: auto; border: 2px solid var(--gp-accent); }
.k-video-studio-stage .k-video-square-outline[hidden] { display: none; }
.k-video-crop-handle { position: absolute; width: 44px; height: 44px; border: 2px solid var(--gp-accent); background: var(--bs-body-bg); touch-action: none; border-radius: 0; }
.k-video-studio-stage .k-video-square-outline:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.k-video-studio-coordinates input:focus-visible, .k-video-studio-playback input:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.k-video-studio-coordinates input[aria-invalid="true"] { border-color: var(--bs-danger); }
.k-video-studio-playback button, .k-video-studio-actions .btn, .k-video-studio-toggle { min-height: 44px; }
@media (max-width: 520px) { .k-video-studio-preview { min-width: 0; } .k-video-studio-playback { flex-wrap: wrap; } .k-video-studio-playback input { min-width: 8rem; } }

.k-video-crop-handle[data-crop-handle="nw"] { top: -22px; left: -22px; cursor: nwse-resize; }
.k-video-crop-handle[data-crop-handle="ne"] { top: -22px; right: -22px; cursor: nesw-resize; }
.k-video-crop-handle[data-crop-handle="sw"] { bottom: -22px; left: -22px; cursor: nesw-resize; }
.k-video-crop-handle[data-crop-handle="se"] { bottom: -22px; right: -22px; cursor: nwse-resize; }

.k-video-studio-playback { display: flex; align-items: center; gap: var(--gp-sp-3); margin-top: var(--gp-sp-3); }
.k-video-studio-playback input { flex: 1; min-width: 0; }
.k-video-studio-playback output { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- 23. Phase 5 — Root system dashboard ------------------------------ */

/*
 * The system dashboard is the highest-traffic page in the admin and
 * had the largest bespoke `<style>` block (550 lines of `.sysdash-*`
 * rules in `src/System/Ui/views/system_dashboard.php`). This section
 * promotes those rules into the shared Kinetic component library,
 * removes the soft gradients and the mid-range grays, and aligns the
 * dashboard chrome with the rest of the admin surface.
 *
 * The structural `.sysdash-page` / `.sysdash-grid` rules are renamed
 * `.k-sysdash-*` to match the rest of the library. Class names
 * retain the same shape (`<role>` / `__<sub>`) so the per-card
 * PHP view markup is a 1:1 class swap with no DOM changes.
 */

/* 23.1 Page + grid shell. */

.k-sysdash-page {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-8);
}

.k-sysdash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gp-sp-6);
}

.k-sysdash-span-full { grid-column: 1 / -1; }
.k-sysdash-span-half { grid-column: span 6; }
.k-sysdash-span-8 { grid-column: span 8; }
.k-sysdash-span-4 { grid-column: span 4; }

@media (max-width: 1199.98px) {
    .k-sysdash-span-half,
    .k-sysdash-span-8,
    .k-sysdash-span-4 { grid-column: span 12; }
}

/* 23.2 Cards (re-skin of the `.sysdash-card` block). */

.k-sysdash-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}

.k-sysdash-card--historical {
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    border-color: var(--gp-border);
}

.k-sysdash-card--storage {
    background: var(--gp-bg);
}

.k-sysdash-card--flush {
    padding: 0;
    gap: 0;
}

.k-sysdash-card--flush > .k-sysdash-card__header {
    padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.k-sysdash-card--flush > .k-table-wrap {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.k-sysdash-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-sp-4);
}

.k-sysdash-card__primary { min-width: 0; }

.k-sysdash-card__eyebrow {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    margin-bottom: var(--gp-sp-2);
}

.k-sysdash-card--historical .k-sysdash-card__eyebrow { color: var(--gp-muted-foreground); }

.k-sysdash-card__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.k-sysdash-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-card__action:hover,
.k-sysdash-card__action:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
    text-decoration: none;
}

.k-sysdash-card__secondary-links {
    display: flex;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--gp-sp-3);
}

.k-sysdash-card__secondary-link {
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-muted-foreground);
    padding-bottom: 2px;
    transition: color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-card__secondary-link:hover,
.k-sysdash-card__secondary-link:focus-visible {
    color: var(--gp-accent);
    border-bottom-color: var(--gp-accent);
    text-decoration: none;
}

.k-sysdash-card__footer-note {
    font-family: var(--gp-font-body);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    line-height: 1.4;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    padding-top: var(--gp-sp-3);
}

/* MCP dashboard discovery and activity panels. Native details/summary keeps
   every domain keyboard-accessible and useful without JavaScript. */
.k-mcp-domain-list {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-mcp-domain {
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-mcp-domain__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4) clamp(1.5rem, 2.5vw, 2.5rem);
    cursor: pointer;
    list-style: none;
    background: var(--gp-bg);
    transition: background-color var(--gp-dur-fast) var(--gp-ease);
}
.k-mcp-domain__summary::-webkit-details-marker { display: none; }
.k-mcp-domain__summary:hover,
.k-mcp-domain__summary:focus-visible { background: var(--gp-muted); }
.k-mcp-domain__name {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.k-mcp-domain__count {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.k-mcp-domain__chevron {
    transition: transform var(--gp-dur-fast) var(--gp-ease);
}
.k-mcp-domain[open] .k-mcp-domain__chevron { transform: rotate(180deg); }
.k-mcp-domain__tools { background: var(--gp-muted); }
.k-mcp-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.45fr);
    gap: var(--gp-sp-5);
    padding: var(--gp-sp-4) clamp(1.5rem, 2.5vw, 2.5rem);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-mcp-tool__body { min-width: 0; }
.k-mcp-tool__name,
.k-mcp-request__method {
    color: var(--gp-fg);
    font-weight: 700;
}
.k-mcp-tool__description {
    margin: var(--gp-sp-2) 0 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.k-mcp-tool__params {
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
.k-mcp-tool__params-label {
    width: 100%;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.k-mcp-request-list {
    max-height: 42rem;
    overflow-y: auto;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
@media (max-width: 1199.98px) {
    .k-mcp-request-list {
        max-height: none;
        overflow-y: visible;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .k-mcp-capability-table { min-width: 60rem; }
}
.k-mcp-request {
    padding: var(--gp-sp-4) clamp(1.25rem, 2vw, 2rem);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-mcp-request:last-child { border-bottom: 0; }
.k-mcp-request__topline,
.k-mcp-request__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
}
.k-mcp-request__method {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.k-mcp-request__meta {
    margin-top: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}
@media (max-width: 767.98px) {
    .k-mcp-domain__summary,
    .k-mcp-tool,
    .k-mcp-request {
        padding-inline: var(--gp-sp-4);
    }
    .k-mcp-tool { grid-template-columns: 1fr; gap: var(--gp-sp-3); }
}
@media (prefers-reduced-motion: reduce) {
    .k-mcp-domain__chevron { transition: none; }
}

/* 23.3 Social tile grid + tiles (re-skin of `.sysdash-social-grid`
 *       and `.sysdash-social-tile`). The `k-social-tile` component
 *       added in Phase 2 is the canonical social tile; the
 *       dashboard-specific re-skin lives in this section so the
 *       existing per-tile DOM (chip icon, status pill, caption
 *       reveal on hover) is preserved. */

.k-sysdash-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--gp-sp-3);
}

.k-sysdash-social-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
}

.k-sysdash-social-tile--empty {
    background: var(--gp-bg);
    border-style: dashed;
}

.k-sysdash-social-tile__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.82;
}

.k-sysdash-social-tile--empty .k-sysdash-social-tile__image { display: none; }

.k-sysdash-social-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                rgba(3, 3, 5, 0.20) 0%,
                                rgba(3, 3, 5, 0.55) 40%,
                                rgba(3, 3, 5, 0.95) 100%);
    opacity: 1;
    transition: opacity var(--gp-dur-fast) var(--gp-ease);
}

.k-sysdash-social-tile--empty .k-sysdash-social-tile__scrim { display: none; }

.k-sysdash-social-tile__body {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gp-sp-3);
    gap: var(--gp-sp-3);
}

.k-sysdash-social-tile__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-3);
}

.k-sysdash-social-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-width: 0;
}

.k-sysdash-social-chip__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-fg);
    background: var(--gp-muted-foreground);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    flex: 0 0 auto;
}

.k-sysdash-social-chip__icon i { font-size: 1rem; }

.k-sysdash-social-chip__label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}

.k-sysdash-social-chip__handle {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    line-height: 1.1;
}

.k-sysdash-social-chip__status {
    align-self: flex-start;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}

.k-sysdash-social-tile__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 var(--gp-sp-2);
}

.k-sysdash-social-tile__caption {
    color: var(--gp-fg);
    font-size: 0.875rem;
    line-height: 1.35;
    margin: 0 0 var(--gp-sp-3);
    opacity: 0;
    transition: opacity var(--gp-dur-fast) var(--gp-ease);
}

.k-sysdash-social-tile__time {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    color: var(--gp-fg);
    font-weight: 600;
}

.k-sysdash-social-tile__video {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}

/* Reveal hover-only state on the live tiles (the empty tiles
 * show their full content immediately because there is no
 * image / caption to reveal). */
.k-sysdash-social-tile:not(.k-sysdash-social-tile--empty) .k-sysdash-social-tile__scrim,
.k-sysdash-social-tile:not(.k-sysdash-social-tile--empty) .k-sysdash-social-chip__label,
.k-sysdash-social-tile:not(.k-sysdash-social-tile--empty) .k-sysdash-social-chip__handle,
.k-sysdash-social-tile:not(.k-sysdash-social-tile--empty) .k-sysdash-social-chip__status,
.k-sysdash-social-tile:not(.k-sysdash-social-tile--empty) .k-sysdash-social-tile__time {
    opacity: 0;
    transition: opacity var(--gp-dur-fast) var(--gp-ease);
}

.k-sysdash-social-tile:hover .k-sysdash-social-tile__caption,
.k-sysdash-social-tile:hover .k-sysdash-social-tile__scrim,
.k-sysdash-social-tile:hover .k-sysdash-social-chip__label,
.k-sysdash-social-tile:hover .k-sysdash-social-chip__handle,
.k-sysdash-social-tile:hover .k-sysdash-social-chip__status,
.k-sysdash-social-tile:hover .k-sysdash-social-tile__time {
    opacity: 1;
}

/* Per-platform icon color (preserved from the previous bespoke
 * stylesheet; lives here so the per-tile markup can keep the
 * `k-sysdash-social-token-<network>` modifier class). */
.k-sysdash-social-token-instagram .k-sysdash-social-chip__icon { background: #E1306C; color: #fff; }
.k-sysdash-social-token-facebook  .k-sysdash-social-chip__icon { background: #1877F2; color: #fff; }
.k-sysdash-social-token-x         .k-sysdash-social-chip__icon,
.k-sysdash-social-token-twitter   .k-sysdash-social-chip__icon { background: #111111; color: #fff; }
.k-sysdash-social-token-tiktok    .k-sysdash-social-chip__icon { background: #111111; color: #fff; }
.k-sysdash-social-token-bluesky   .k-sysdash-social-chip__icon { background: #1185FE; color: #fff; }
.k-sysdash-social-token-youtube   .k-sysdash-social-chip__icon { background: #FF0033; color: #fff; }
.k-sysdash-social-token-pinterest .k-sysdash-social-chip__icon { background: #E60023; color: #fff; }

/* Historical (Last Posted) tiles drop the saturation and dim
 * the caption so the eye is drawn to the live "Next Queued"
 * tiles first. */
.k-sysdash-social-tile--historical .k-sysdash-social-tile__image {
    opacity: 0.58;
    filter: saturate(0.72);
}

.k-sysdash-social-tile--historical .k-sysdash-social-tile__caption { opacity: 0; }
.k-sysdash-social-tile--historical:hover .k-sysdash-social-tile__caption { opacity: 0.65; }

/* 23.4 KPI grid (4-up wholesale summary). */

.k-sysdash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-3);
}

.k-sysdash-kpi {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4) var(--gp-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    min-height: 6.5rem;
    justify-content: space-between;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-kpi:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
    text-decoration: none;
}

.k-sysdash-kpi__value {
    font-family: var(--gp-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.k-sysdash-kpi__label {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
}

.k-sysdash-kpi:hover .k-sysdash-kpi__label { color: var(--gp-accent-fg); }

/* Active state (>0): acid-yellow number, brighter label so the
 * lit-up KPI reads as "there's something to action." */
.k-sysdash-kpi--active .k-sysdash-kpi__value { color: var(--gp-accent); }
.k-sysdash-kpi--active .k-sysdash-kpi__label { color: var(--gp-fg); font-weight: 700; }
.k-sysdash-kpi--active:hover .k-sysdash-kpi__value,
.k-sysdash-kpi--active:hover .k-sysdash-kpi__label { color: var(--gp-accent-fg); }

/* Inactive state (=0): the number and label are both dimmed so the
 * eye skips past empty KPIs and lands on the active ones. The number
 * stays legible (kept at the muted-foreground tone, not the muted
 * background tone) so the cell still reads as data. */
.k-sysdash-kpi--inactive { opacity: 0.55; }
.k-sysdash-kpi--inactive .k-sysdash-kpi__value { color: var(--gp-muted-foreground); }
.k-sysdash-kpi--inactive .k-sysdash-kpi__label { color: var(--gp-muted-foreground); font-weight: 500; }
.k-sysdash-kpi--inactive:hover { opacity: 1; }

/* 23.5 List rows (logs, cron runs, sales syncs, pending items). */

.k-sysdash-list,
.k-sysdash-mini-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

.k-sysdash-list__row,
.k-sysdash-mini-list__row,
.k-sysdash-log-grid__item {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    transition: background-color var(--gp-dur) var(--gp-ease);
    text-decoration: none;
    color: inherit;
}

.k-sysdash-list__row:hover,
.k-sysdash-mini-list__row:hover,
.k-sysdash-log-grid__item:hover {
    background: var(--gp-muted);
    text-decoration: none;
}

.k-sysdash-list__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 0.9375rem;
    margin: 0;
}

.k-sysdash-list__meta,
.k-sysdash-mini-list__meta,
.k-sysdash-empty,
.k-sysdash-card__footer-note {
    font-family: var(--gp-font-body);
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
    line-height: 1.4;
}

.k-sysdash-list__row .d-flex,
.k-sysdash-mini-list__row .d-flex { gap: var(--gp-sp-2); }

.k-sysdash-badges {
    display: flex;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--gp-sp-2);
}

.k-sysdash-empty {
    padding: var(--gp-sp-3) 0 0;
}

/* 23.6 Log grid (2x2 layout for "Latest by severity"). */

.k-sysdash-log-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

.k-sysdash-log-grid__bucket {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--gp-muted-foreground);
    margin-bottom: var(--gp-sp-2);
}

.k-sysdash-log-grid__empty {
    font-family: var(--gp-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--gp-muted);
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    padding: var(--gp-sp-6) 0 0;
    font-weight: 700;
    user-select: none;
}

.k-sysdash-log-grid__empty::before { content: '\2014'; }

/* 23.7 Server metrics (compact, 2x2 inside the bottom fragment). */

.k-sysdash-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

.k-sysdash-metric-row {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    transition: background-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-metric-row:hover { background: var(--gp-muted); }

.k-sysdash-metric-row__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gp-sp-3);
}

.k-sysdash-metric-row__label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}

.k-sysdash-metric-row__caption {
    font-family: var(--gp-font-body);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    margin-top: var(--gp-sp-1);
}

.k-sysdash-metric-row__value {
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.k-sysdash-progress {
    display: block;
    height: 0.5rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    overflow: hidden;
}

.k-sysdash-progress__bar {
    display: block;
    height: 100%;
    background: var(--gp-accent);
    border: 0;
    border-right: 0;
    transition: width var(--gp-dur-slow) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-progress__bar--success { background: var(--gp-success); }
.k-sysdash-progress__bar--warning { background: var(--gp-warning); }
.k-sysdash-progress__bar--danger  { background: var(--gp-danger); }
.k-sysdash-progress__bar--muted   { background: var(--gp-muted-foreground); opacity: 0.4; }

/* 23.8 Bottom grid (storage + server metrics side-by-side). */

.k-sysdash-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-4);
}

@media (max-width: 1199.98px) {
    .k-sysdash-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .k-sysdash-social-grid,
    .k-sysdash-kpi-grid,
    .k-sysdash-log-grid,
    .k-sysdash-metric-grid,
    .k-sysdash-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* 23.9 Storage summary + rows. */

.k-sysdash-storage-summary {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4);
    margin-bottom: var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

.k-sysdash-storage-summary__topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gp-sp-3);
}

.k-sysdash-storage-summary__value {
    font-family: var(--gp-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.k-sysdash-storage-summary__meta {
    font-family: var(--gp-font-body);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}

.k-sysdash-storage-summary__progress { margin-bottom: var(--gp-sp-2); }

.k-sysdash-storage-summary__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    font-family: var(--gp-font-body);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}

.k-sysdash-storage-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-3);
}

.k-sysdash-storage-row {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    transition: background-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-storage-row:hover { background: var(--gp-muted); }

.k-sysdash-storage-row--expandable {
    padding: 0;
    overflow: hidden;
}

.k-sysdash-storage-row__summary {
    display: block;
    cursor: pointer;
    list-style: none;
    padding: var(--gp-sp-3);
}

.k-sysdash-storage-row__summary::-webkit-details-marker { display: none; }

.k-sysdash-storage-row__topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-2);
}

.k-sysdash-storage-row__label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}

.k-sysdash-storage-row__path,
.k-sysdash-storage-row__share,
.k-sysdash-storage-detail-row__path,
.k-sysdash-storage-detail-row__share,
.k-sysdash-storage-details__subtitle,
.k-sysdash-storage-row__nested-path,
.k-sysdash-storage-row__nested-share {
    font-family: var(--gp-font-body);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}

.k-sysdash-storage-row__value-group,
.k-sysdash-storage-detail-row__stats,
.k-sysdash-storage-row__nested-stats {
    text-align: right;
    flex: 0 0 auto;
}

.k-sysdash-storage-row__value,
.k-sysdash-storage-detail-row__value,
.k-sysdash-storage-row__nested-value {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}

.k-sysdash-storage-row__progress { height: 0.375rem; }

.k-sysdash-storage-row__bar {
    display: block;
    height: 100%;
    background: var(--gp-accent);
    transition: width var(--gp-dur-slow) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-storage-row__bar--danger  { background: var(--gp-danger); }
.k-sysdash-storage-row__bar--warning { background: var(--gp-warning); }
.k-sysdash-storage-row__bar--info    { background: var(--gp-info); }
.k-sysdash-storage-row__bar--muted   {
    background: var(--gp-muted-foreground);
    opacity: 0.45;
}

.k-sysdash-storage-row__nested {
    margin: 0 var(--gp-sp-3) var(--gp-sp-3) var(--gp-sp-6);
    padding-left: var(--gp-sp-3);
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}

.k-sysdash-storage-row__nested-item {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    align-items: flex-start;
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2) var(--gp-sp-3);
}

.k-sysdash-storage-row__nested-text { min-width: 0; }

.k-sysdash-storage-row__nested-label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

/* 23.10 Drill-down sections (the `<details>` blocks). */

.k-sysdash-storage-drilldowns {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

.k-sysdash-storage-details {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    overflow: hidden;
}

.k-sysdash-storage-details__summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gp-sp-3);
    cursor: pointer;
    list-style: none;
    padding: var(--gp-sp-3);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

.k-sysdash-storage-details__summary::-webkit-details-marker { display: none; }

.k-sysdash-storage-details__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3);
}

.k-sysdash-storage-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gp-sp-3);
    padding-top: var(--gp-sp-2);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}

.k-sysdash-storage-detail-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.k-sysdash-storage-detail-row__text { min-width: 0; }

.k-sysdash-storage-detail-row__label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .k-sysdash-storage-summary__topline,
    .k-sysdash-storage-row__topline,
    .k-sysdash-storage-details__summary,
    .k-sysdash-storage-detail-row,
    .k-sysdash-storage-row__nested-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .k-sysdash-storage-row__value-group,
    .k-sysdash-storage-detail-row__stats,
    .k-sysdash-storage-row__nested-stats {
        text-align: left;
    }
    .k-sysdash-storage-row__nested {
        margin-left: var(--gp-sp-3);
        padding-left: var(--gp-sp-2);
    }
}

/* 23.11 Placeholder dashboard (super-admin fallback). */

.k-sysdash-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--gp-sp-8);
}

.k-sysdash-placeholder__card {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: var(--gp-border-w) solid var(--gp-accent);
    padding: var(--gp-sp-12);
    max-width: 56rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
    text-align: center;
}

.k-sysdash-placeholder__eyebrow {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.k-sysdash-placeholder__title {
    font-family: var(--gp-font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    margin: 0;
}

.k-sysdash-placeholder__body {
    font-family: var(--gp-font-body);
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--gp-accent-fg);
    margin: 0;
}

.k-sysdash-placeholder__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 3rem;
    padding: 0 var(--gp-sp-6);
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w) solid var(--gp-bg);
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

.k-sysdash-placeholder__action:hover,
.k-sysdash-placeholder__action:focus-visible {
    background: var(--gp-fg);
    color: var(--gp-bg);
    text-decoration: none;
}

/* 23.12 HTMX loading state. */

.k-sysdash-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-8) 0;
    color: var(--gp-muted-foreground);
}

.k-sysdash-loading__spinner { width: 1.5rem; height: 1.5rem; }

.k-sysdash-loading__label {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

/* 23.13 Stat marquee hero variant (acid yellow on black, full bleed).
 *       Lives next to the Phase 2 `.k-stat-marquee` so the
 *       dashboard can opt into the bolder hero look without
 *       affecting the other marquee usages. */

.k-stat-marquee--hero {
    background: var(--gp-bg);
    border-top: var(--gp-border-w) solid var(--gp-accent);
    border-bottom: var(--gp-border-w) solid var(--gp-accent);
    padding: 0;
    display: flex;
    gap: 0;
    overflow: hidden;
}

.k-stat-marquee--hero .k-stat-marquee__cell {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: var(--gp-sp-6) var(--gp-sp-4);
    border-right: var(--gp-border-w-thin) solid var(--gp-accent);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

.k-stat-marquee--hero .k-stat-marquee__cell:last-child { border-right: 0; }

.k-stat-marquee--hero .k-stat-marquee__cell:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

.k-stat-marquee--hero .k-stat-marquee__cell:hover .k-stat-marquee__number,
.k-stat-marquee--hero .k-stat-marquee__cell:hover .k-stat-marquee__label { color: var(--gp-accent-fg); }

.k-stat-marquee--hero .k-stat-marquee__number {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.k-stat-marquee--hero .k-stat-marquee__label {
    color: var(--gp-muted-foreground);
}

/* 23.14b Hero marquee cell pressure states. The server-monitor
 *        hero KPI strip tints the number text per metric severity:
 *        muted-foreground for normal, warning yellow for strained,
 *        danger red for critical. The label stays muted-foreground
 *        so the number remains the dominant signal. The state class
 *        is server-rendered alongside the existing --active /
 *        --inactive class so the inactive-opacity behavior is
 *        preserved for zero-valued cells. Hover still wins via the
 *        acid-yellow accent flip above. */
.k-stat-marquee--hero .k-stat-marquee__cell--ok .k-stat-marquee__number { color: var(--gp-muted-foreground); }
.k-stat-marquee--hero .k-stat-marquee__cell--warn .k-stat-marquee__number { color: var(--gp-warning); }
.k-stat-marquee--hero .k-stat-marquee__cell--critical .k-stat-marquee__number { color: var(--gp-danger); }
.k-stat-marquee--hero .k-stat-marquee__cell--ok .k-stat-marquee__label { color: var(--gp-muted-foreground); }
.k-stat-marquee--hero .k-stat-marquee__cell--warn .k-stat-marquee__label { color: var(--gp-warning); }
.k-stat-marquee--hero .k-stat-marquee__cell--critical .k-stat-marquee__label { color: var(--gp-danger); }

@media (max-width: 767.98px) {
    .kinetic-topbar__inner {
        gap: var(--gp-sp-1);
        padding-inline: var(--gp-sp-2);
    }
    .kinetic-topbar__primary {
        flex: 1 1 0;
        align-items: center;
        min-width: 0;
    }
    .kinetic-topbar__actions {
        flex: 0 0 auto;
        align-items: center;
        flex-wrap: nowrap;
    }
    .kinetic-topbar__icon-btn {
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
    }
    .kinetic-topbar__brand {
        flex: 1 1 0;
        justify-content: center;
        max-width: none;
        min-width: 0;
        padding-inline: var(--gp-sp-1);
    }
    .kinetic-topbar__brand-eyebrow {
        display: none;
    }
    .kinetic-topbar__brand-text {
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.875rem;
        line-height: 1.05;
    }
    .kinetic-page-title {
        align-items: center;
        min-height: 6rem;
        gap: var(--gp-sp-2);
    }
    .kinetic-page-title__primary {
        top: 0;
        align-self: center;
    }
    .kinetic-page-title__action {
        width: auto;
        justify-content: flex-end;
        align-self: center;
    }
    body:not(.wholesale-portal-body) .k-page-structure-v2 .kinetic-page-title__action .dadkit-add-row-button {
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        line-height: 1;
    }
    body:not(.wholesale-portal-body) .k-page-structure-v2 .kinetic-page-title__action {
        padding-right: var(--k-page-gutter);
        padding-left: 0;
    }
    body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section > .k-top-toolbar--split:not(:has(.dadkit-add-row-action)) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 3rem;
        width: calc(100% - 2rem);
        max-width: 32rem;
        gap: var(--gp-sp-2);
        margin-inline: auto;
    }
    .k-top-toolbar--split:not(:has(.dadkit-add-row-action)) .dadkit-quick-search {
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .k-top-toolbar--split:not(:has(.dadkit-add-row-action)) .dadkit-bulk-edit-action {
        width: 3rem;
        min-width: 3rem;
    }
    .kinetic-page-title__watermark {
        right: -0.08em;
        top: 50%;
        bottom: auto;
        left: auto;
        transform: translateY(-56%);
        font-size: clamp(8rem, 36vw, 11rem);
    }
    .k-stat-marquee--hero {
        flex-direction: row;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }
    .k-stat-marquee--hero .k-stat-marquee__cell {
        flex: 0 0 auto;
        min-width: 8.5rem;
        border-right: var(--gp-border-w-thin) solid var(--gp-accent);
        border-bottom: 0;
        padding: var(--gp-sp-4) var(--gp-sp-3);
        scroll-snap-align: start;
    }
    .k-stat-marquee--hero .k-stat-marquee__cell:last-child { border-right: 0; }
    .k-stat-marquee--hero .k-stat-marquee__number { font-size: 1.75rem; }
    .k-stat-marquee--hero .k-stat-marquee__label {
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }
}

/* Keep every MCP dashboard KPI visible instead of clipping a horizontal strip. */
@media (max-width: 767.98px) {
    .k-mcp-dashboard-stats.k-stat-marquee--hero {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .k-mcp-dashboard-stats.k-stat-marquee--hero .k-stat-marquee__cell {
        min-width: 0;
        padding: var(--gp-sp-3) var(--gp-sp-2);
        scroll-snap-align: none;
        border-bottom: var(--gp-border-w-thin) solid var(--gp-accent);
    }
    .k-mcp-dashboard-stats.k-stat-marquee--hero .k-stat-marquee__cell:nth-child(2n) { border-right: 0; }
    .k-mcp-dashboard-stats.k-stat-marquee--hero .k-stat-marquee__cell:nth-last-child(-n + 2) { border-bottom: 0; }
    .k-mcp-dashboard-stats.k-stat-marquee--hero .k-stat-marquee__number,
    .k-mcp-dashboard-stats.k-stat-marquee--hero .k-stat-marquee__label { overflow-wrap: anywhere; }
}

/* 23.14 Reduced-motion guard for the dashboard-only rules. The
 *       global `base.css` rule already strips transitions under
 *       `prefers-reduced-motion: reduce`; the explicit override
 *       below is a safety net for the social tile reveal and the
 *       KPI hover transitions. */
@media (prefers-reduced-motion: reduce) {
    .k-sysdash-card,
    .k-sysdash-kpi,
    .k-sysdash-list__row,
    .k-sysdash-mini-list__row,
    .k-sysdash-log-grid__item,
    .k-sysdash-metric-row,
    .k-sysdash-storage-row,
    .k-sysdash-social-tile__scrim,
    .k-sysdash-social-tile__caption,
    .k-sysdash-social-chip__label,
    .k-sysdash-social-chip__handle,
    .k-sysdash-social-chip__status,
    .k-sysdash-social-tile__time,
    .k-sysdash-card__action,
    .k-sysdash-card__secondary-link,
    .k-sysdash-placeholder__action,
    .k-stat-marquee--hero .k-stat-marquee__cell {
        transition: none;
    }
}

/* ---- 24. Phase 6 — Log viewer + Cron + Migrations --------------------- */

/*
 * The three super-admin observability tools in the "System" sidebar
 * group share the same general "list + filter bar + drawable detail"
 * pattern. This section adds the small surface that the per-tool
 * controllers lean on:
 *
 *   - `.k-filter-bar`            — a 2px-bordered filter row with
 *                                  groups, dividers, and the level
 *                                  segmented toggle.
 *   - `.k-filter-bar .k-seg`     — the level toggle buttons drive a
 *                                  hidden `btn-check` radio so the
 *                                  `level[]=100` form payload still
 *                                  works without renaming attributes.
 *   - `.k-list-row--log`         — a log-row variant of the shared
 *                                  list row (see §14): an acid-yellow
 *                                  left border in the level color and
 *                                  a monospace body.
 *   - `.k-log-level-*`           — per-level color hooks for the left
 *                                  border + meta line + JSON
 *                                  collapse header. The pre-Phase-6
 *                                  `.log-level-*` classes on the same
 *                                  element are kept for JS contract
 *                                  parity.
 *   - `.k-code`                  — monospace code block (used by the
 *                                  log JSON context, the cron
 *                                  stdout/stderr, the migration
 *                                  checksum, and the baseline output).
 *   - `.k-toolbar-meta`          — small uppercase label for the "X
 *                                  runs found" / "Migration Status"
 *                                  section headers.
 *   - `.k-pagination--inline`    — inline list variant of the shared
 *                                  pagination.
 *
 * The per-tool co-classes on the existing Bootstrap markup (e.g.
 * `k-card` on the filter card, `k-table` on the runs table) live in
 * the same file; the per-tool adminlte-overrides bridge is what
 * inherits the kinetic look until the per-tool rewrite is complete.
 */

/* 24.1 Filter bar shell. */

.k-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4) 0;
    margin: 0 0 var(--gp-sp-4);
    border-top: var(--gp-border-w) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

.k-filter-bar__group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}

.k-filter-bar__divider {
    width: 1px;
    align-self: stretch;
    background: var(--gp-border);
    margin: 0 var(--gp-sp-2);
}

.k-filter-bar__spacer {
    flex: 1 1 auto;
    min-width: var(--gp-sp-2);
}

.k-filter-bar__label {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gp-muted-foreground);
    font-weight: 700;
    margin-right: var(--gp-sp-2);
}

.k-filter-bar__submit {
    margin-left: auto;
}

.k-filter-bar__toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: var(--gp-radius-sm);
    cursor: pointer;
    font-size: 1rem;
    transition: color var(--gp-dur) var(--gp-ease), background var(--gp-dur) var(--gp-ease), border-color var(--gp-dur) var(--gp-ease);
}

.k-filter-bar__toggle-btn:hover,
.k-filter-bar__toggle-btn:focus-visible {
    color: var(--gp-accent);
    background: var(--gp-muted);
    outline: none;
}

.k-filter-bar__toggle-btn.is-active {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
    border-color: var(--gp-accent);
}

.k-filter-bar__selects-collapse {
    flex: 1 1 100%;
}

.k-filter-bar__selects-collapse .k-filter-bar__group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--gp-sp-2);
}

.k-select--sm {
    min-height: 2rem;
    font-size: 0.75rem;
    padding: 0 var(--gp-sp-3);
    min-width: 120px;
}

/* 24.2 Level segmented toggle. The `btn-check` radios stay
 *       so the existing `level[]=100` form payload keeps working
 *       and the `app.js` change handler in
 *       `document.addEventListener('change', ...)` (line ~1799)
 *       can still find `.log-filter-levels .btn-check` to flip the
 *       hidden `level_default` field. */

.k-filter-bar__levels {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    border: var(--gp-border-w) solid var(--gp-border);
    background: transparent;
}

.k-filter-bar__levels .k-seg {
    appearance: none;
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    min-height: 3rem;
    padding: 0 var(--gp-sp-4);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    user-select: none;
}

.k-filter-bar__levels .k-seg:last-child { border-right: 0; }

.k-filter-bar__levels .k-seg:hover,
.k-filter-bar__levels .k-seg:focus-visible {
    background: var(--gp-muted);
    color: var(--gp-accent);
    outline: none;
}

/* The hidden `btn-check` radios drive the active state. We also
 * accept `[aria-pressed="true"]` for the manual buttons that the
 * cron segment uses. */
.k-filter-bar__levels .btn-check:checked + .k-seg,
.k-filter-bar__levels .k-seg.is-active,
.k-filter-bar__levels .k-seg[aria-pressed="true"] {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* Hide the radio input entirely. The `for=`/`id=` pairing still
 * works (the radio is in the document, the label is the button). */
.k-filter-bar__levels .btn-check {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* 24.3 List row — log variant. Re-uses the shared `.k-list-row`
 *       from §14 and adds a 4px left border in the level color, a
 *       monospace body, and a tightened title. The legacy
 *       `.dadkit-log-row` is the same element so the new
 *       selectors key off `body:not(.wholesale-portal-body)` to
 *       keep the portal (which never gets this class) untouched. */

.k-list-row--log {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gp-sp-2);
    min-height: 4.5rem;
    padding: var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-3) var(--gp-sp-6);
    border: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    border-left: 4px solid var(--gp-muted);
    background: var(--gp-bg);
    color: var(--gp-fg);
    position: relative;
    transition: background-color var(--gp-dur) var(--gp-ease);
}

.k-list-row--log:hover { background: var(--gp-muted); }

.k-list-row--log .k-list-row__meta,
.k-list-row--log .dadkit-log-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-2);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gp-muted-foreground);
}

.k-list-row--log .k-list-row__title,
.k-list-row--log .dadkit-log-row__message {
    font-family: var(--gp-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    color: var(--gp-fg);
    margin: 0;
    word-break: break-word;
}

/* 24.4 Log level left-border + meta accents. The selectors are
 *       parent-anchored (`.k-list-row--log.k-log-level-*`) so the
 *       level class on the wrapper drives the color. The legacy
 *       `.dadkit-log-row.log-level-*` rules in `app.css` stay
 *       in place for the wholesale-portal-safe fallback until
 *       Phase 19 (final cleanup) removes them. */

.k-list-row--log.k-log-level-debug,
.dadkit-log-row.k-log-level-debug,
.dadkit-log-row.log-level-debug { border-left-color: var(--gp-info); }
.k-list-row--log.k-log-level-debug .k-list-row__meta,
.dadkit-log-row.k-log-level-debug .dadkit-log-row__meta,
.dadkit-log-row.log-level-debug .dadkit-log-row__meta { color: var(--gp-info); }

.k-list-row--log.k-log-level-info,
.dadkit-log-row.k-log-level-info,
.dadkit-log-row.log-level-info { border-left-color: var(--gp-info); }
.k-list-row--log.k-log-level-info .k-list-row__meta,
.dadkit-log-row.k-log-level-info .dadkit-log-row__meta,
.dadkit-log-row.log-level-info .dadkit-log-row__meta { color: var(--gp-info); }

.k-list-row--log.k-log-level-notice,
.dadkit-log-row.k-log-level-notice,
.dadkit-log-row.log-level-notice { border-left-color: var(--gp-info); }
.k-list-row--log.k-log-level-notice .k-list-row__meta,
.dadkit-log-row.k-log-level-notice .dadkit-log-row__meta,
.dadkit-log-row.log-level-notice .dadkit-log-row__meta { color: var(--gp-info); }

.k-list-row--log.k-log-level-warning,
.dadkit-log-row.k-log-level-warning,
.dadkit-log-row.log-level-warning { border-left-color: var(--gp-warning); }
.k-list-row--log.k-log-level-warning .k-list-row__meta,
.dadkit-log-row.k-log-level-warning .dadkit-log-row__meta,
.dadkit-log-row.log-level-warning .dadkit-log-row__meta { color: var(--gp-warning); }

.k-list-row--log.k-log-level-error,
.dadkit-log-row.k-log-level-error,
.dadkit-log-row.log-level-error { border-left-color: var(--gp-danger); }
.k-list-row--log.k-log-level-error .k-list-row__meta,
.dadkit-log-row.k-log-level-error .dadkit-log-row__meta,
.dadkit-log-row.log-level-error .dadkit-log-row__meta { color: var(--gp-danger); }

.k-list-row--log.k-log-level-critical,
.dadkit-log-row.k-log-level-critical,
.dadkit-log-row.log-level-critical {
    border-left-color: var(--gp-danger);
    border-left-width: 6px;
}
.k-list-row--log.k-log-level-critical .k-list-row__meta,
.dadkit-log-row.k-log-level-critical .dadkit-log-row__meta,
.dadkit-log-row.log-level-critical .dadkit-log-row__meta { color: var(--gp-danger); }

/* 24.5 Log meta chips (time + level label). The level is the
 *       filled accent badge; the time is a small uppercase label. */

.k-log-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--gp-sp-2);
    row-gap: var(--gp-sp-1);
    max-width: 100%;
    min-width: 0;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gp-muted-foreground);
}

.k-log-meta__time {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--gp-sp-2);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
}

.k-log-meta__channel,
.k-log-meta__tool,
.k-log-meta__brand {
    min-width: 0;
    max-width: 100%;
    color: var(--gp-fg);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.k-log-meta__channel::before { content: none; }
.k-log-meta__tool::before    { content: '\00b7\00a0'; color: var(--gp-muted); }
.k-log-meta__brand::before   { content: '\00b7\00a0'; color: var(--gp-muted); }

@media (max-width: 767.98px) {
    .k-list-row--log .k-log-meta {
        display: flex;
        width: 100%;
        row-gap: var(--gp-sp-2);
    }

    .k-list-row--log .dadkit-log-context-toggle {
        flex: 0 1 auto;
        min-width: 0;
        min-height: 2.75rem;
    }

    .k-list-row--log .dadkit-log-copy {
        flex: 0 0 auto;
        min-height: 2.75rem;
    }
}

/* 24.6 JSON context collapse (log viewer). The collapse header
 *       is a 56px-tall row, the body is a flat card with a
 *       monospace pre block. The legacy `<details>` element
 *       (`.dadkit-log-context`) is also targeted for the inline
 *       copy event that `app.js` listens to. */

.k-log-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    margin-top: var(--gp-sp-3);
}

.k-log-context__toggle {
    flex: 1 1 12rem;
    min-height: 2.75rem;
    padding: 0 var(--gp-sp-4);
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.k-log-context__toggle:hover,
.k-log-context__toggle:focus-visible {
    background: var(--gp-muted);
    color: var(--gp-accent);
    outline: none;
}

.k-log-context__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 var(--gp-sp-3);
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
}

.k-log-context__copy:hover,
.k-log-context__copy:focus-visible {
    background: var(--gp-muted);
    color: var(--gp-accent);
    outline: none;
}

.k-log-context__body {
    flex: 1 1 100%;
    margin: var(--gp-sp-2) 0 0;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 28rem;
    overflow: auto;
}

.k-log-context__body-wrapper {
    flex: 1 1 100%;
}

.k-log-context__textarea {
    display: block;
    width: 100%;
    min-height: 10rem;
    max-height: 28rem;
    margin: var(--gp-sp-2) 0 0;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    overflow: auto;
    white-space: pre;
    word-break: normal;
}

/* 24.7 Code block (used by the cron stdout/stderr, the migration
 *       checksum, the migration baseline output, and the log JSON
 *       context). Monospace, acid-yellow foreground on the muted
 *       background. */

.k-code {
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gp-fg);
    background: var(--gp-muted);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 36rem;
    overflow: auto;
}

.k-code--inline {
    display: inline;
    padding: 0 var(--gp-sp-1);
    font-size: 0.875em;
    background: var(--gp-muted);
    color: var(--gp-accent);
}

/* 24.8 Toolbar meta (the small "X runs found" / "Migration Status"
 *       labels next to a section title). */

.k-toolbar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4) 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin: 0 0 var(--gp-sp-4);
}

.k-toolbar-meta__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--gp-fg);
}

.k-toolbar-meta__count {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

.k-toolbar-meta__count strong {
    color: var(--gp-fg);
    font-weight: 700;
}

/* 24.9 Cron status pill. Inherits `.k-badge.k-badge--filled` and
 *       maps the cron-specific `running` / `skipped` states to
 *       warning / muted. */

.k-badge.k-badge--filled.k-badge--running {
    background: var(--gp-warning);
    color: var(--gp-warning-fg);
    border-color: var(--gp-warning);
}
.k-badge.k-badge--filled.k-badge--skipped {
    background: var(--gp-muted);
    color: var(--gp-fg);
    border-color: var(--gp-muted);
}
.k-badge.k-badge--filled.k-badge--timeout {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
    border-color: var(--gp-danger);
}

/* 24.10 Migration table cells. The status column uses the
 *        `.k-badge` family; the checksum column shows the short
 *        hash as a `.k-code--inline`; the drift warning sits in
 *        a `.k-alert` above the table. */

.k-migration-cell--file {
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    word-break: break-all;
}

.k-migration-cell--checksum {
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}

.k-migration-cell--drift {
    display: block;
    font-size: 0.75rem;
    color: var(--gp-danger);
    margin-top: var(--gp-sp-1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .k-table--mobile-records td.k-migration-cell--file,
    .k-table--mobile-records td.k-migration-cell--checksum {
        white-space: normal !important; /* Override the desktop text-nowrap utility. */
        overflow-wrap: anywhere;
    }
}

/* 24.11 Cron runs row — a 64px-tall `.k-list-row` (re-uses the
 *        shared component from §14) with a status pill on the
 *        right and a meta line for the duration / exit code. */

.k-cron-row {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-4);
    min-height: 4.5rem;
    padding: var(--gp-sp-3) var(--gp-sp-6);
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    transition: background-color var(--gp-dur) var(--gp-ease);
}

.k-cron-row:hover { background: var(--gp-muted); }

.k-cron-row__job {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.k-cron-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.k-cron-row__meta strong {
    color: var(--gp-fg);
    font-weight: 700;
}

.k-cron-row__time {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    flex-shrink: 0;
}

.k-cron-row__actions { display: flex; gap: var(--gp-sp-2); flex-shrink: 0; }

/* 24.12 Cron detail collapse — full-width block under the row
 *        that holds the stdout/stderr/error/finished panels. */

.k-cron-detail {
    margin: 0;
    padding: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

.k-cron-detail__inner {
    padding: var(--gp-sp-4) var(--gp-sp-6) var(--gp-sp-6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

.k-cron-detail__field {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}

.k-cron-detail__label {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gp-muted-foreground);
    font-weight: 700;
}

.k-cron-detail__body {
    margin: 0;
}

/* 24.13 Pagination inline (the cron "page N of M" footer uses
 *        this as a flex row, not a Bootstrap `<nav>` element). */

.k-pagination--inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.k-pagination--inline li button,
.k-pagination--inline li a,
.k-pagination--inline li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    background: transparent;
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-pagination--inline li button:hover,
.k-pagination--inline li a:hover,
.k-pagination--inline li button:focus-visible,
.k-pagination--inline li a:focus-visible {
    background: var(--gp-muted);
    color: var(--gp-accent);
    text-decoration: none;
    outline: none;
}

.k-pagination--inline li.is-active button,
.k-pagination--inline li.is-active a,
.k-pagination--inline li.is-active span {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

.k-pagination--inline li.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.k-pagination--inline li.is-gap span {
    min-width: 2rem;
    padding: 0 var(--gp-sp-2);
    border-color: transparent;
    color: var(--gp-muted-foreground);
}

.k-cron-summary,
.k-cron-pagination {
    margin-bottom: 0;
}

.k-cron-table {
    border-left: 0;
    border-right: 0;
}

@media (max-width: 767.98px) {
    .k-cron-pagination {
        align-items: flex-start;
    }

    .k-cron-pagination .k-pagination--inline {
        width: 100%;
    }
}

/* 24.14 Migrations summary tiles — a 4-column grid of
 *        `.k-stat-tile` with the eyebrow / value / sub layout.
 *        Reuses the §12 `.k-stat-tile` rules. */

.k-migration-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gp-sp-4);
    margin: 0 0 var(--gp-sp-4);
}

@media (max-width: 767.98px) {
    .k-migration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
    .k-migration-summary { grid-template-columns: 1fr; }
}

.k-migration-summary__tile--drift {
    border-color: var(--gp-danger);
}

.k-migration-summary__tile--drift:hover {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
    border-color: var(--gp-danger);
}

/* 24.15 Filter bar search wrapper. The search input is wrapped
 *        so we can place a small magnifier glyph on the right
 *        without a separate `<label>`. */

.k-filter-bar__search {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 14rem;
    flex: 0 1 18rem;
}

.k-filter-bar__search .k-input--search {
    width: 100%;
    padding-right: 2.5rem;
}

.k-filter-bar__search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gp-muted-foreground);
    font-size: 1rem;
    pointer-events: none;
}

/* 24.16 Cron run filter form (the form on the /apps/cron index
 *        page). The form becomes a `.k-filter-bar` variant that
 *        submits via plain GET (no HTMX). */

.k-filter-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--gp-sp-4);
    padding: var(--gp-sp-4) 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin: 0 0 var(--gp-sp-4);
}

.k-filter-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    min-width: 11rem;
    flex: 1 1 11rem;
}

.k-filter-form__field--wide { min-width: 18rem; flex-basis: 22rem; }

.k-filter-form__field--submit {
    flex: 0 0 auto;
    min-width: 0;
    align-self: flex-end;
}

/* 24.17 Reduced-motion guard for the Phase 6 surface. The global
 *        `base.css` rule already strips transitions under
 *        `prefers-reduced-motion: reduce`; the explicit override
 *        below is a safety net for the row hover and the JSON
 *        context flash animations. */
@media (prefers-reduced-motion: reduce) {
    .k-list-row--log,
    .k-cron-row,
    .k-log-context__toggle,
    .k-log-context__copy,
    .k-pagination--inline li button,
    .k-pagination--inline li a {
        transition: none;
    }
}

/* 24.18 Table wrap. The pre-Phase-6 `.table-responsive` Bootstrap
 *        class had a 1px border-radius + overflow: auto. The
 *        kinetic `.k-table-wrap` keeps the overflow behavior but
 *        drops the border-radius to honor the §5 shape language. */

.k-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

.k-table-wrap .k-table {
    border: 0;
    width: 100%;
}

.k-table-wrap .k-table thead th { background: var(--gp-muted); }

/* 24.19 Cron detail cell wrapper. The detail row sits in its own
 *        `<tr>` with `colspan` so the table layout stays clean. */

.k-cron-detail-row { background: var(--gp-bg); }

.k-cron-detail-cell { padding: 0; }

.k-table__actions-col {
    width: 7.5rem;
    text-align: right;
    white-space: nowrap;
}

/* Cron keeps each run's Bootstrap collapse in a dedicated sibling table row.
 * The shared mobile-record table variant should reflow the run itself, but the
 * detail row must remain one full-width disclosure region underneath it. */
@media (max-width: 767.98px) {
    .k-cron-table.k-table-wrap--mobile-records {
        overflow: visible;
    }

    .k-cron-table .k-table--mobile-records tbody tr.k-cron-detail-row {
        display: block;
        padding: 0;
        border-bottom: 0;
        background: var(--gp-bg);
    }

    .k-cron-table .k-table--mobile-records tbody tr.k-cron-detail-row:hover {
        background: var(--gp-bg);
    }

    .k-cron-table .k-table--mobile-records tbody tr.k-cron-detail-row > .k-cron-detail-cell {
        width: 100%;
    }

    .k-cron-detail__inner {
        padding: var(--gp-sp-4) var(--k-page-gutter) var(--gp-sp-5);
    }
}

/* ---- 25. Phase 7: server monitor + system health watch +
 *         social account updates surface ---------------------- */

/* 25.1 Metric card. 320×200 surface with the value at 64px, the
 *        label at 14px, an optional sub-line, and a 4px-tall
 *        progress bar in acid-yellow at the bottom. The
 *        `--compact` modifier is a 200×140 sibling for the smaller
 *        KPI grid (Peak Mem% / Peak Swap% / Peak Load/Core%). */

.k-metric-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-4) var(--gp-sp-5);
    min-height: 12.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-metric-card--compact {
    min-height: 8.75rem;
    padding: var(--gp-sp-3) var(--gp-sp-4);
}

.k-metric-card--danger { border-color: var(--gp-danger); }
.k-metric-card--warning { border-color: var(--gp-warning); }
.k-metric-card--success { border-color: var(--gp-success); }

.k-metric-card__eyebrow {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    line-height: 1.2;
}

.k-metric-card__value {
    font-family: var(--gp-font-display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: inherit;
}

.k-metric-card--compact .k-metric-card__value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.k-metric-card__sub {
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
    line-height: 1.3;
}

.k-metric-card__progress {
    margin-top: auto;
}

.k-metric-card__progress .k-progress { height: 0.25rem; }

/* 25.2 Metric grid. 4-column responsive grid for the four
 *        server-monitor KPI cards. Collapses to 2 columns on
 *        <1024px and to 1 column on <640px (mirrors the system
 *        dashboard KPI grid from Phase 5). */

.k-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

@media (max-width: 1024px) {
    .k-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .k-metric-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 25.3 Metric detail card. The two side-by-side detail cards
 *        ("Memory" + "CPU + Uptime") on the server monitor. Each
 *        card has a header row with the heading and a 2-column
 *        inner grid of `.k-metric-detail-card__row` cells. */

.k-metric-detail-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.k-metric-detail-card__heading {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    margin: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
}

.k-metric-detail-card__body {
    padding: var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    flex: 1;
}

.k-metric-detail-card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gp-sp-2) var(--gp-sp-3);
}

.k-metric-detail-card__row--stack { grid-template-columns: minmax(0, 1fr); }

.k-metric-detail-card__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    line-height: 1.2;
}

.k-metric-detail-card__value {
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    line-height: 1.1;
}

.k-metric-detail-card__progress {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}

/* The Server Monitor has exactly three headline metrics, so phones can keep
 * the complete pressure summary visible instead of turning the hero into a
 * horizontal swipe. This stays scoped to the live metrics fragment; other
 * hero marquees retain their shared overflow behavior. */
@media (max-width: 767.98px) {
    #sm-metrics-panel .k-stat-marquee--hero {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }

    #sm-metrics-panel .k-stat-marquee--hero .k-stat-marquee__cell {
        min-width: 0;
        padding-inline: var(--gp-sp-2);
        scroll-snap-align: none;
    }
}

/* 25.4 Metric mini card. The smaller 2×1 grid cells (Peak Mem%,
 *        Peak Swap%, Peak Load/Core%, etc.) on the system health
 *        watch. A reduced `.k-metric-card` that fits inside a
 *        6-column grid. */

.k-metric-mini-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    min-height: 7.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-metric-mini-card:hover,
.k-metric-mini-card:focus-within {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

.k-metric-mini-card:hover .k-metric-mini-card__label,
.k-metric-mini-card:focus-within .k-metric-mini-card__label {
    color: var(--gp-accent-fg);
}

.k-metric-mini-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    line-height: 1.2;
}

.k-metric-mini-card__value {
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: inherit;
}

.k-metric-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

@media (max-width: 1280px) {
    .k-metric-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .k-metric-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .k-metric-mini-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 25.5 Live indicator. Acid-yellow dot + uppercase LIVE/PAUSED
 *        label that replaces the legacy `text-bg-secondary /
 *        text-bg-success` Bootstrap badges on the live-data strip
 *        of the server monitor. The dot pulses in the active
 *        state. The wrapper toggles `.is-paused` / `.is-running`
 *        to flip the dot color without changing the label. NOTE:
 *        this is a separate component from the Phase 3
 *        `.k-sync-indicator` (DadKit inline-save indicator) — they
 *        share a naming theme but are distinct components with
 *        distinct visual treatments. */

.k-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: 0 var(--gp-sp-3);
    min-height: 2.5rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 1;
}

.k-live-indicator__dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--gp-accent);
    display: inline-block;
    flex-shrink: 0;
}

.k-live-indicator.is-running .k-live-indicator__dot {
    animation: k-live-pulse 1.5s var(--gp-ease) infinite;
}

.k-live-indicator.is-paused .k-live-indicator__dot {
    background: var(--gp-muted-foreground);
    animation: none;
}

.k-live-indicator.is-error .k-live-indicator__dot {
    background: var(--gp-danger);
    animation: none;
}

.k-live-indicator__label { color: inherit; }

@keyframes k-live-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 var(--gp-accent); }
    50% { transform: scale(1.4); box-shadow: 0 0 0 0.25rem transparent; }
    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* 25.6 Log stream. Full-bleed `.k-card--flat` with monospace
 *        rows, 32px tall, the line color matching the log level.
 *        Used for the server monitor log tail and (as the collapsed
 *        child of `.k-list-row`) the system health watch JSON
 *        context blocks. The wrapper scrolls vertically and
 *        preserves the existing `data-sm-log-output` attribute
 *        (consumed by the Alpine auto-scroll handler). */

.k-log-stream {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0;
    height: 460px;
    max-height: 460px;
    overflow: auto;
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--gp-fg);
}

.k-log-stream__row {
    display: flex;
    gap: var(--gp-sp-3);
    align-items: baseline;
    min-height: 2rem;
    padding: 0 var(--gp-sp-3);
    border-bottom: 1px solid var(--gp-border);
}

.k-log-stream__row:last-child { border-bottom: 0; }

.k-log-stream__time {
    flex-shrink: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    min-width: 8.5rem;
}

.k-log-stream__level {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: 4.5rem;
    color: var(--gp-muted-foreground);
}

.k-log-stream__body {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: inherit;
}

/* The server log tail keeps timestamp + level on one compact metadata row
 * at phone widths, then gives the message body the full available width.
 * Scoping to the live logs panel avoids changing other legacy consumers of
 * the log-stream subelement classes. */
@media (max-width: 767.98px) {
    #sm-logs-panel .k-log-stream__row {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: var(--gp-sp-1) var(--gp-sp-2);
        align-items: baseline;
        padding-block: var(--gp-sp-2);
    }

    #sm-logs-panel .k-log-stream__time,
    #sm-logs-panel .k-log-stream__level {
        min-width: 0;
    }

    #sm-logs-panel .k-log-stream__level {
        justify-self: start;
    }

    #sm-logs-panel .k-log-stream__row > .k-log-stream__level:first-child,
    #sm-logs-panel .k-log-stream__body {
        grid-column: 1 / -1;
    }

    #sm-logs-panel .k-log-stream__body {
        width: 100%;
        overflow-wrap: anywhere;
    }
}

.k-log-stream__row--info .k-log-stream__level,
.k-log-stream__row--info .k-log-stream__body { color: var(--gp-info); }
.k-log-stream__row--notice .k-log-stream__level,
.k-log-stream__row--notice .k-log-stream__body { color: var(--gp-info); }
.k-log-stream__row--warning .k-log-stream__level,
.k-log-stream__row--warning .k-log-stream__body { color: var(--gp-warning); }
.k-log-stream__row--error .k-log-stream__level,
.k-log-stream__row--error .k-log-stream__body { color: var(--gp-danger); }
.k-log-stream__row--critical .k-log-stream__level,
.k-log-stream__row--critical .k-log-stream__body { color: var(--gp-danger); font-weight: 700; }

/* The `data-sm-log-output` legacy attribute from the pre-Phase-7
 *        server monitor log tail is kept on the same element so
 *        the Alpine auto-scroll listener in `controller.php` still
 *        finds it. */
.k-log-stream[data-sm-log-output] { /* marker only */ }

/* 25.7 Platform card. Per-platform health tile used by the social
 *        account updates "Per-Platform Health" section. The card
 *        has a 48px header row with the platform name + a rate
 *        `.k-badge`, then a 4-row inner stat list. Hover triggers
 *        the standard acid-yellow inversion. The `--danger /
 *        --warning / --success` modifiers recolor the rate badge
 *        to match the success-rate bucket. */

.k-platform-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

.k-platform-card:hover,
.k-platform-card:focus-within {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

.k-platform-card:hover .k-platform-card__stat-label,
.k-platform-card:focus-within .k-platform-card__stat-label,
.k-platform-card:hover .k-platform-card__header-name,
.k-platform-card:focus-within .k-platform-card__header-name {
    color: var(--gp-accent-fg);
}

.k-platform-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    padding-bottom: var(--gp-sp-2);
}

.k-platform-card__name {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    line-height: 1.1;
}

.k-platform-card__rate {
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 var(--gp-sp-2);
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    background: var(--gp-bg);
    line-height: 1;
}

.k-platform-card__rate--danger { background: var(--gp-danger); color: var(--gp-danger-fg); border-color: var(--gp-danger); }
.k-platform-card__rate--warning { background: var(--gp-warning); color: var(--gp-warning-fg); border-color: var(--gp-warning); }
.k-platform-card__rate--success { background: var(--gp-success); color: var(--gp-success-fg); border-color: var(--gp-success); }

.k-platform-card:hover .k-platform-card__rate,
.k-platform-card:focus-within .k-platform-card__rate {
    background: var(--gp-accent-fg);
    color: var(--gp-accent);
    border-color: var(--gp-accent-fg);
}

.k-platform-card__stat {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.k-platform-card__stat-label { color: var(--gp-muted-foreground); }
.k-platform-card__stat-value { font-weight: 700; color: inherit; }
.k-platform-card__stat-value--ok { color: var(--gp-success); }
.k-platform-card__stat-value--err { color: var(--gp-danger); }

.k-platform-card:hover .k-platform-card__stat-value--ok,
.k-platform-card:focus-within .k-platform-card__stat-value--ok { color: var(--gp-accent-fg); }
.k-platform-card:hover .k-platform-card__stat-value--err,
.k-platform-card:focus-within .k-platform-card__stat-value--err { color: var(--gp-accent-fg); }

.k-platform-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}

@media (max-width: 1280px) {
    .k-platform-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .k-platform-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 25.8 Anomaly row. A horizontal row of 64×64 squares color-coded
 *        by severity (info / warning / danger / muted) for the
 *        system health watch anomaly timeline. The row scrolls
 *        horizontally on overflow. The `__tooltip` cell is the
 *        full timestamp + summary, rendered into a native HTML
 *        title attribute (the kinetic tooltip is layered on top
 *        by Phase 2.15, but a `title` attribute is the safe
 *        baseline for screen readers). */

.k-anomaly-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gp-sp-1);
    overflow-x: auto;
    padding: var(--gp-sp-1);
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    min-height: 4rem;
}

.k-anomaly-row__cell {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    cursor: help;
    background: var(--gp-muted);
    transition: transform var(--gp-dur) var(--gp-ease);
}

.k-anomaly-row__cell:hover,
.k-anomaly-row__cell:focus {
    transform: scale(1.1);
    z-index: 1;
    outline: 2px solid var(--gp-accent);
    outline-offset: 1px;
}

.k-anomaly-row__cell--info { background: var(--gp-info); }
.k-anomaly-row__cell--warning { background: var(--gp-warning); }
.k-anomaly-row__cell--danger { background: var(--gp-danger); }
.k-anomaly-row__cell--muted { background: var(--gp-muted); }

.k-anomaly-row__cell--empty { background: transparent; border: 1px dashed var(--gp-border); }

/* 25.9 Process table. The server monitor top-processes table uses
 *        the standard `.k-table` from Phase 2 but its body cells
 *        need a few extra hooks for the description / details /
 *        command lines. The legacy `.sm-process-description /
 *        .sm-process-details / .sm-process-command` classes are
 *        preserved as no-op shims so any leftover CSS / JS that
 *        still targets them keeps working until Phase 19. */

.k-process-table__name {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
}

.k-process-table__description,
.k-process-table__details,
.k-process-table__command {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--gp-muted-foreground);
    word-break: break-all;
}

.k-process-table__command {
    color: var(--gp-muted);
    max-width: 32.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-process-table__bar {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    font-size: 0.75rem;
    line-height: 1.2;
}

.k-process-table__bar .k-progress { flex: 1; min-width: 6rem; height: 0.375rem; }

/* Phones keep every process metric and action in view instead of
 * requiring a blind horizontal table swipe. The sortable headers stay
 * available as a compact horizontal rail; each process row becomes a
 * scan-first record with PID + identity first, then age/CPU/memory and
 * the existing action. No behavior hooks or table semantics change. */
@media (max-width: 767.98px) {
    .k-process-table,
    .k-process-table thead,
    .k-process-table tbody {
        display: block;
        width: 100%;
    }

    .k-process-table thead {
        overflow-x: auto;
        padding: var(--gp-sp-2) var(--k-page-gutter);
        background: var(--gp-muted);
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        scrollbar-width: thin;
    }

    .k-process-table thead tr {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: var(--gp-sp-1);
    }

    .k-process-table thead th {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .k-process-table thead .k-table__actions-col {
        display: none;
    }

    .k-process-table thead .k-table__sort {
        min-height: 2.75rem;
        padding: 0.5rem 0.625rem;
        white-space: nowrap;
    }

    .k-process-table tbody tr {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gp-sp-3);
        width: 100%;
        padding: var(--gp-sp-3) var(--k-page-gutter);
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    }

    .k-process-table tbody tr:last-child {
        border-bottom: 0;
    }

    .k-process-table tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .k-process-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .k-process-table tbody td:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1;
    }

    .k-process-table tbody td:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .k-process-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .k-process-table tbody td:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }

    .k-process-table tbody td:nth-child(6) {
        grid-column: 1 / 4;
        grid-row: 3;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }

    .k-process-table tbody td:nth-child(6) .k-btn {
        min-height: 2.75rem;
    }

    .k-process-table tbody td:nth-child(1)::before,
    .k-process-table tbody td:nth-child(3)::before,
    .k-process-table tbody td:nth-child(4)::before,
    .k-process-table tbody td:nth-child(5)::before {
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1;
        text-transform: uppercase;
    }

    .k-process-table tbody td:nth-child(1)::before { content: 'PID'; }
    .k-process-table tbody td:nth-child(3)::before { content: 'Age'; }
    .k-process-table tbody td:nth-child(4)::before { content: 'CPU'; }
    .k-process-table tbody td:nth-child(5)::before { content: 'Memory'; }

    #sm-metrics-panel .k-process-table__command {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .k-process-table__bar {
        align-items: stretch;
        flex-direction: column;
        gap: var(--gp-sp-1);
    }

    .k-process-table__bar .k-progress {
        width: 100%;
        min-width: 0;
    }
}

/* 25.10 Debug bootstrap card. The AI Debug Bootstrap block on the
 *        server monitor. The wrapper is a `.k-card` with a header
 *        row (title + copy button) and a `.k-code` `<textarea>` for
 *        the structured payload. */

.k-debug-bootstrap {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    display: flex;
    flex-direction: column;
}

.k-debug-bootstrap__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

.k-debug-bootstrap__heading {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    margin: 0;
}

.k-debug-bootstrap__copy {
    flex-shrink: 0;
}

.k-debug-bootstrap__body {
    padding: var(--gp-sp-4);
}

.k-debug-bootstrap__intro {
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
    margin: 0 0 var(--gp-sp-3);
    line-height: 1.4;
}

.k-debug-bootstrap__textarea {
    width: 100%;
    min-height: 18rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: var(--gp-sp-3);
    resize: vertical;
}

/* 25.11 Reduced-motion guard for the Phase 7 surface. The global
 *        `base.css` rule already strips transitions under
 *        `prefers-reduced-motion: reduce`; the explicit override
 *        below is a safety net for the metric card hover, the
 *        sync indicator pulse, and the anomaly row cell scale. */

@media (prefers-reduced-motion: reduce) {
    .k-metric-card,
    .k-metric-mini-card,
    .k-platform-card,
    .k-anomaly-row__cell,
    .k-live-indicator.is-running .k-live-indicator__dot {
        transition: none;
        animation: none;
    }
}

/* 25.12 Page-status indicator. Reusable slot occupant for the
 *        `.kinetic-page-title__action` region (and any other
 *        page-level action slot) when a page's primary affordance
 *        is a health/operational status rather than a button. The
 *        indicator is a sharp-bordered inline pill: a colored dot
 *        plus a short uppercase word. The dot does NOT pulse; the
 *        live-indicator pattern (§25.5) is the motion-bearing
 *        counterpart. The semantic level is server-rendered via
 *        one of three modifiers so assistive-tech color dependence
 *        is avoided by the visible word. Markup is trusted and
 *        supplied through `Layout`'s `page_title_action` option.
 *
 *        Required: one root `.k-page-status` with one modifier
 *        (--ok | --warn | --critical), one `.k-page-status__dot`,
 *        and one `.k-page-status__label`.
 *
 *        States: ok / warn / critical only. Pages that need a
 *        "loading" or "unknown" state should render --warn with a
 *        neutral label of their own choosing until they can
 *        classify. */

.k-page-status {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    background: transparent;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

.k-page-status__dot {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    display: inline-block;
    background: var(--gp-muted-foreground);
    animation: k-page-status-pulse 4s var(--gp-ease) infinite;
}

.k-page-status__label {
    color: inherit;
}

/* Server Monitor status copy keeps the shared severity word dominant while
 * naming the single highest-pressure metric on a compact second line. This
 * is page-scoped so other k-page-status consumers retain the base contract. */
.sm-page-status__copy {
    display: grid;
    gap: 0.125rem;
    line-height: 1;
}

.sm-page-status__detail {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.k-page-status--ok .k-page-status__dot { background: var(--gp-success); }
.k-page-status--warn .k-page-status__dot { background: var(--gp-warning); }
.k-page-status--critical .k-page-status__dot { background: var(--gp-danger); }

@keyframes k-page-status-pulse {
    0%, 70%, 100% { opacity: 1; transform: scale(1); }
    80% { opacity: 0.55; transform: scale(1.18); }
    90% { opacity: 1; transform: scale(1); }
}

@media (max-width: 575.98px) {
    .k-page-status {
        font-size: 0.875rem;
        letter-spacing: 0.06em;
    }
    .k-page-status__dot {
        width: 0.625rem;
        height: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-page-status__dot {
        animation: none;
    }
}

/* 25.13 Page-title controls group. A reusable inline button row
 *        for the `.kinetic-page-title__action` slot (or any page-
 *        level action region) when a page needs several small
 *        peer-level toggles rather than one primary action. Each
 *        control is a `.k-btn` with `.k-btn--sm`; the group adds
 *        the sharp-bordered shared container and the inner divider
 *        between controls. The `.is-active` state marks the
 *        currently selected toggle (e.g. the active interval).
 *
 *        Required: one root `.k-page-title-controls` with two or
 *        more `.k-page-title-controls__btn` children (each a
 *        `.k-btn` or `.k-btn--sm`).
 *
 *        States: default and `.is-active` on children. The active
 *        state uses the accent fill so the selected control reads
 *        as the current value without an extra select widget. */

.k-page-title-controls {
    display: inline-flex;
    align-items: stretch;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    overflow: hidden;
}

.k-page-title-controls__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-1);
    padding: 0.625rem 0.875rem;
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

/* The Server Monitor's live cadence controls remain compact but need a
 * reliable touch height when the page title shares space with status. */
.sm-page-title-controls .k-page-title-controls__btn {
    min-height: 2.75rem;
}

.k-page-title-controls__btn:last-child {
    border-right: 0;
}

.k-page-title-controls__btn:hover {
    background: var(--gp-muted);
}

.k-page-title-controls__btn:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: -2px;
}

.k-page-title-controls__btn.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

.k-page-title-controls__icon {
    pointer-events: none;
    font-size: 0.875rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .k-page-title-controls__btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-page-title-controls__btn {
        transition: none;
    }
}

/* The Server Monitor title/action region contains both a live status pill and
 * four cadence controls. Stack those siblings only on narrow screens so the
 * page identity, health detail and touch targets never compete for one row.
 * :has() keeps this layout exception attached to the existing page hook and
 * leaves other Kinetic page titles on the shared desktop/mobile contract. */
@media (max-width: 575.98px) {
    .kinetic-page-title:has(.sm-page-title-controls) {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--gp-sp-3);
    }

    .kinetic-page-title:has(.sm-page-title-controls) .kinetic-page-title__primary {
        flex: 0 1 auto;
        padding-right: var(--k-page-gutter);
    }

    .kinetic-page-title:has(.sm-page-title-controls) .kinetic-page-title__action {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gp-sp-2);
        padding-left: var(--k-page-gutter);
    }
}

/* 25.14 Watchdog dashboard. The signal overview is a scan-first operational
 * list rather than a grid of large cards, while the existing status, action,
 * tuning, and history hooks remain unchanged. Phone refinements keep all four
 * headline metrics visible; the history pass preserves the dense desktop
 * table while compacting each phone row into a complete scan-first record. */
/* Keep zero-valued dashboard metrics legible without changing their inactive state. */
body:not(.wholesale-portal-body) .wd-status-summary .k-stat-marquee__cell--inactive {
    opacity: 1;
}

body:not(.wholesale-portal-body) .wd-dashboard-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .wd-dashboard-toolbar__meta,
body:not(.wholesale-portal-body) .wd-dashboard-toolbar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    min-width: 0;
}

body:not(.wholesale-portal-body) .wd-dashboard-toolbar__actions form {
    margin: 0;
}

body:not(.wholesale-portal-body) .wd-signal-list {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .wd-signal-row.k-list-row {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: var(--gp-sp-4);
    min-height: 0;
    padding: var(--gp-sp-3) 0;
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .wd-signal-row.k-list-row:hover {
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .wd-signal-row__identity,
body:not(.wholesale-portal-body) .wd-signal-row__detail {
    min-width: 0;
}

body:not(.wholesale-portal-body) .wd-signal-row__identity .k-list-row__title {
    margin-top: var(--gp-sp-1);
}

body:not(.wholesale-portal-body) .wd-signal-row__rule,
body:not(.wholesale-portal-body) .wd-signal-row__summary {
    margin: 0;
}

body:not(.wholesale-portal-body) .wd-signal-row__rule {
    margin-bottom: var(--gp-sp-1);
}

body:not(.wholesale-portal-body) .wd-signal-row__summary {
    margin-top: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .wd-signal-row__status {
    justify-self: end;
}

body:not(.wholesale-portal-body) .wd-tuning-group {
    padding: var(--gp-sp-5) 0;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .wd-tuning-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gp-sp-3) var(--gp-sp-4);
    margin-bottom: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .wd-tuning-group__header .k-subsection-title,
body:not(.wholesale-portal-body) .wd-tuning-group__header .k-field {
    margin: 0;
}

body:not(.wholesale-portal-body) .wd-tuning-retention {
    padding: var(--gp-sp-5) 0 var(--gp-sp-3);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .wd-tuning-retention .k-field {
    max-width: 32rem;
}

body:not(.wholesale-portal-body) .wd-tuning-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .wd-tuning-restore {
    margin: 0;
}

body:not(.wholesale-portal-body) #wd-history-filters {
    max-width: 46rem;
}

body:not(.wholesale-portal-body) #wd-history-table {
    max-width: 100%;
}

body:not(.wholesale-portal-body) #wd-history-table .k-table {
    min-width: 52rem;
}

body:not(.wholesale-portal-body) #wd-history-table .k-table th:nth-child(1),
body:not(.wholesale-portal-body) #wd-history-table .k-table th:nth-child(2),
body:not(.wholesale-portal-body) #wd-history-table .k-table th:nth-child(3),
body:not(.wholesale-portal-body) #wd-history-table .k-table th:nth-child(4),
body:not(.wholesale-portal-body) #wd-history-table .k-table th:nth-child(6),
body:not(.wholesale-portal-body) #wd-history-table .k-table td:nth-child(1),
body:not(.wholesale-portal-body) #wd-history-table .k-table td:nth-child(2),
body:not(.wholesale-portal-body) #wd-history-table .k-table td:nth-child(3),
body:not(.wholesale-portal-body) #wd-history-table .k-table td:nth-child(4),
body:not(.wholesale-portal-body) #wd-history-table .k-table td:nth-child(6) {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .wd-status-summary.k-stat-marquee--hero {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        scroll-snap-type: none;
    }

    body:not(.wholesale-portal-body) .wd-status-summary.k-stat-marquee--hero .k-stat-marquee__cell {
        min-width: 0;
        padding: var(--gp-sp-3) var(--gp-sp-2);
        scroll-snap-align: none;
    }

    body:not(.wholesale-portal-body) .wd-status-summary.k-stat-marquee--hero .k-stat-marquee__cell:nth-child(2n) {
        border-right: 0;
    }

    body:not(.wholesale-portal-body) .wd-status-summary.k-stat-marquee--hero .k-stat-marquee__cell:nth-child(-n + 2) {
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    }

    body:not(.wholesale-portal-body) .wd-dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    body:not(.wholesale-portal-body) .wd-dashboard-toolbar__actions {
        width: 100%;
    }

    body:not(.wholesale-portal-body) .wd-dashboard-toolbar__actions form {
        flex: 1 1 10rem;
    }

    body:not(.wholesale-portal-body) .wd-dashboard-toolbar__actions .k-btn {
        width: 100%;
    }

    body:not(.wholesale-portal-body) .wd-signal-row.k-list-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gp-sp-2) var(--gp-sp-3);
        padding: var(--gp-sp-3) 0;
    }

    body:not(.wholesale-portal-body) .wd-signal-row__identity {
        grid-column: 1;
        grid-row: 1;
    }

    body:not(.wholesale-portal-body) .wd-signal-row__status {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    body:not(.wholesale-portal-body) .wd-signal-row__detail {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body:not(.wholesale-portal-body) #wd-tuning .wd-tuning-group .k-form-row--2col,
    body:not(.wholesale-portal-body) #wd-tuning .wd-tuning-group .k-form-row--3col {
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) #wd-tuning .wd-tuning-group .k-form-row > .k-field:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    body:not(.wholesale-portal-body) .wd-tuning-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.wholesale-portal-body) .wd-tuning-restore .k-btn {
        width: 100%;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table,
    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gp-sp-2) var(--gp-sp-3);
        width: 100%;
        padding: var(--gp-sp-3);
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody tr:last-child {
        border-bottom: 0;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        color: var(--gp-muted-foreground);
        font-size: 0.75rem;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        color: var(--gp-muted-foreground);
        font-size: 0.75rem;
        text-align: right;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
        overflow-wrap: anywhere;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        justify-self: end;
    }

    body:not(.wholesale-portal-body) #wd-history-table .k-table tbody td:nth-child(3) .k-code-inline {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .wd-tuning-group__header {
        align-items: flex-start;
    }

    body:not(.wholesale-portal-body) .wd-tuning-group__header .k-field {
        flex-basis: 100%;
    }

    body:not(.wholesale-portal-body) #wd-tuning .wd-tuning-group .k-form-row--2col,
    body:not(.wholesale-portal-body) #wd-tuning .wd-tuning-group .k-form-row--3col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- 26. Phase 8 — Social queue + Social media tool + DadDev widget --
 *
 * Class strategy (per Phase 2/3 "co-class" pattern):
 * - Every existing class name (e.g. `.sq-top-toolbar`, `.sq-post-box`,
 *   `.daddev-fab`, `.daddev-panel`, `.daddev-bubble`, `.daddev-pin-dot`)
 *   is preserved as a no-op / visual co-class so the existing JS
 *   contract keeps working. The new visual is delivered via the
 *   matching `.k-sq-*` / `.k-daddev-*` rules in this section.
 * - The new selectors are scoped to `body:not(.wholesale-portal-body)`
 *   so the wholesale portal (which is excluded from the redesign per
 *   Decision 6) is not affected.
 * - The PIN entry is the toned-down security variant per §7.27 of
 *   the design prompt: sharp corners + uppercase + monospace, but
 *   no acid-yellow color flips and smaller 40×40 cells.
 * - Every motion / animation is wrapped in
 *   `prefers-reduced-motion: no-preference` so the global
 *   `prefers-reduced-motion: reduce` rule from `base.css` strips it
 *   automatically.
 */

/* 26.1 Social queue toolbar + network filter pills.
 *        Replaces the existing `.sq-top-toolbar` pill row with a
 *        Kinetic sharp-bordered row of `.k-btn` outline / primary
 *        pills. The behavior is identical — submitting a pill fires
 *        the surrounding `hx-get` form. */

body:not(.wholesale-portal-body) .k-sq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-4);
    margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
body:not(.wholesale-portal-body) .k-sq-toolbar__inner {
    display: contents;
}
body:not(.wholesale-portal-body) .k-sq-toolbar__divider {
    width: 1px;
    align-self: center;
    height: 1.75rem;
    background: var(--gp-border);
    margin: 0 var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-sq-toolbar__filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    flex: 1 1 auto;
}
body:not(.wholesale-portal-body) .k-sq-toolbar__quicklinks {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    margin-left: auto;
}
body:not(.wholesale-portal-body) .k-sq-toolbar__quicklinks.d-none.d-xl-flex { display: flex; }

body:not(.wholesale-portal-body) .k-sq-network-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sq-network-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    background: transparent;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-network-filter__pill:hover {
    background: var(--gp-muted);
    border-color: var(--gp-accent);
    color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-sq-network-filter__pill--active,
body:not(.wholesale-portal-body) .k-sq-network-filter__pill[aria-pressed="true"] {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-sq-network-filter__pill i {
    font-size: 0.95rem;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    body:not(.wholesale-portal-body) .k-sq-toolbar__quicklinks { display: none; }
}

/* 26.2 Per-platform brand colors for the social queue.
 *        The original `.sq-network-{token}` classes used the
 *        per-platform brand colors. The new co-classes carry the
 *        same colors but in the Kinetic palette (no rounded
 *        corners, sharp 2px borders). */

body:not(.wholesale-portal-body) .k-sq-network-quicklink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    text-decoration: none;
    font-size: 1rem;
    transition: transform var(--gp-dur) var(--gp-ease),
                box-shadow var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-network-quicklink:hover {
    transform: translateY(-1px);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sq-network-quicklink:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: 2px;
}

body:not(.wholesale-portal-body) .k-sq-network-quicklink--instagram,
body:not(.wholesale-portal-body) .k-sq-post-network--instagram { background: #E1306C; color: #fff; border-color: #E1306C; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--facebook,
body:not(.wholesale-portal-body) .k-sq-post-network--facebook { background: #1877F2; color: #fff; border-color: #1877F2; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--x,
body:not(.wholesale-portal-body) .k-sq-post-network--x { background: #111111; color: #fff; border-color: #111111; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--twitter,
body:not(.wholesale-portal-body) .k-sq-post-network--twitter { background: #111111; color: #fff; border-color: #111111; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--tiktok,
body:not(.wholesale-portal-body) .k-sq-post-network--tiktok { background: #111111; color: #fff; border-color: #111111; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--bluesky,
body:not(.wholesale-portal-body) .k-sq-post-network--bluesky { background: #1185FE; color: #fff; border-color: #1185FE; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--youtube,
body:not(.wholesale-portal-body) .k-sq-post-network--youtube { background: #FF0033; color: #fff; border-color: #FF0033; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--pinterest,
body:not(.wholesale-portal-body) .k-sq-post-network--pinterest { background: #E60023; color: #fff; border-color: #E60023; }
body:not(.wholesale-portal-body) .k-sq-network-quicklink--default,
body:not(.wholesale-portal-body) .k-sq-post-network--default { background: var(--gp-muted); color: var(--gp-fg); border-color: var(--gp-muted); }

body:not(.wholesale-portal-body) .k-sq-post-network {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--gp-border-w) solid var(--gp-border);
    color: #fff;
    flex-shrink: 0;
}
body:not(.wholesale-portal-body) .k-sq-post-network i {
    font-size: 1.15rem;
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-sq-post-network__handle {
    font-weight: 600;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sq-post-network__id {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 var(--gp-sp-2);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
}
/* Status pill in the post topline (Draft / Scheduled / Posted
 * etc). Reuses the k-badge--{level} tokens but at a smaller
 * topline-friendly height so it lines up with the network
 * badge, handle, and ID beside it. Sits at the start of the
 * topline (left side) so the DRAFT pill is the "top left"
 * indicator the user asked for, instead of floating in the
 * action bar. */
body:not(.wholesale-portal-body) .k-sq-post-status {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 var(--gp-sp-2);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 26.3 Settings card + tab content shells.
 *        Replaces the existing `.card .card-outline .card-light`
 *        wrappers and the `.sq-platform-tab-content` block with
 *        Kinetic sharp-bordered cards. */

body:not(.wholesale-portal-body) .k-sq-tab-content {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-sq-tab-content .k-card { margin-bottom: 0; }

body:not(.wholesale-portal-body) .k-sq-card {
    display: flex;
    flex-direction: column;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0;
}
body:not(.wholesale-portal-body) .k-sq-card__header {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-5);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sq-card__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sq-card__body {
    padding: var(--gp-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sq-card__footer {
    border-top: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-5);
}

/* 26.4 Social queue timeline (upcoming tab).
 *        Replaces the existing `.sq-timeline` grid with a vertical
 *        stack of `.k-sq-timeline-item` cards. The time column
 *        lives on the left in a 96px-wide strip; the post box
 *        (`.k-sq-post-box`) fills the rest. Day separators are
 *        bold uppercase labels centered between the rows. */

body:not(.wholesale-portal-body) .k-sq-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sq-timeline__day-separator {
    position: relative;
    margin: var(--gp-sp-4) 0;
    text-align: center;
}
body:not(.wholesale-portal-body) .k-sq-timeline__day-separator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    transform: translateY(-50%);
}
body:not(.wholesale-portal-body) .k-sq-timeline__day-label {
    position: relative;
    display: inline-block;
    padding: 0 var(--gp-sp-3);
    background: var(--gp-bg);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-sq-timeline__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--gp-sp-4);
    align-items: start;
}
body:not(.wholesale-portal-body) .k-sq-timeline__time {
    text-align: left;
    color: var(--gp-fg);
    padding: var(--gp-sp-2) var(--gp-sp-2) 0 0;
}
body:not(.wholesale-portal-body) .k-sq-timeline__date {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
body:not(.wholesale-portal-body) .k-sq-timeline__clock {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 400;
    color: var(--gp-muted-foreground);
    margin-top: var(--gp-sp-1);
}

body:not(.wholesale-portal-body) .k-sq-post-box {
    /*
     * Each post box is a stack of three rows (header, content,
     * actions). The optional `--k-sq-post-bg` CSS variable,
     * set inline by the controller, paints a darkened + blurred
     * backdrop of the post's media so each row reads as a
     * distinct card rather than a wall of text. Rows are NOT
     * clickable so the previous hover-invert border was removed
     * to avoid the "this is interactive" affordance.
     */
    position: relative;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-sq-post-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--k-sq-post-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.35);
    transform: scale(1.15);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}
body:not(.wholesale-portal-body) .k-sq-post-box > * { position: relative; z-index: 1; }

body:not(.wholesale-portal-body) .k-sq-post-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--gp-sp-4);
    align-items: start;
    padding: var(--gp-sp-4) var(--gp-sp-5) var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sq-post-content { min-width: 0; }
body:not(.wholesale-portal-body) .k-sq-post-content__topline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sq-post-media {
    text-align: right;
}
body:not(.wholesale-portal-body) .k-sq-post-thumb {
    width: 100%;
    max-width: 220px;
    height: auto;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    object-fit: cover;
}
body:not(.wholesale-portal-body) .k-sq-video-tile {
    width: 100%;
    max-width: 170px;
    min-height: 6rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

body:not(.wholesale-portal-body) .k-sq-promo-preview {
    color: var(--gp-fg);
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-left: 3px solid var(--gp-accent);
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sq-promo-preview::before {
    content: attr(data-promo-tag);
    flex-shrink: 0;
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-accent);
    padding-top: 0.2rem;
    min-width: 4.5rem;
}
body:not(.wholesale-portal-body) .k-sq-promo-preview--prepend { margin: 0 0 var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-sq-promo-preview--append { margin: var(--gp-sp-2) 0 0; }

/* 26.5 Caption form + readiness dot + action bar.
 *        Replaces the existing caption form / readiness dot /
 *        action bar with Kinetic versions. The caption input is a
 *        96px-tall `.k-input` and the save button is a
 *        `.k-btn--primary.k-btn--sm` that is hidden until the
 *        caption has been edited. The readiness dot is an 8px
 *        circle in `--gp-success` (ready) or `--gp-danger` (blocked)
 *        with a 1px outline in the same color. The action bar is
 *        a flex row of `.k-btn--outline` / `.k-btn--danger` /
 *        `.k-btn--primary` buttons separated by a 1px top border. */

body:not(.wholesale-portal-body) .k-sq-caption-form {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    margin: 0;
    padding: 0 0 0 var(--gp-sp-3);
    /*
     * The caption area used to sit flush against the post box
     * border. The indent makes the caption read as the "inner
     * content" of the card, distinct from the header line and
     * the action bar above/below it.
     */
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sq-caption-form__input {
    /*
     * The caption is shown verbatim to the audience — case
     * matters and the social caption is authored in mixed
     * case. Force the input to inherit the page body font and
     * explicitly clear the global form-control uppercase so
     * the placeholder/cursor don't read as ALL CAPS.
     */
    min-height: 96px;
    font-family: var(--gp-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: var(--gp-sp-3);
    resize: vertical;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sq-caption-form__save {
    align-self: flex-start;
}

body:not(.wholesale-portal-body) .k-sq-readiness {
    width: 0.625rem;
    height: 0.625rem;
    display: inline-block;
    vertical-align: middle;
    border: var(--gp-border-w-thin) solid transparent;
}
body:not(.wholesale-portal-body) .k-sq-readiness--ready {
    background: var(--gp-success);
    border-color: var(--gp-success);
}
body:not(.wholesale-portal-body) .k-sq-readiness--blocked {
    background: var(--gp-danger);
    border-color: var(--gp-danger);
}

body:not(.wholesale-portal-body) .k-sq-action-bar {
    /*
     * The action bar carries ten+ controls of mixed prominence
     * (Approve / Cancel / Post / regenerate / alt-media /
     * reschedule / more-info). Force every form child to a
     * single min-height so the row reads as a uniform strip of
     * pills regardless of which button is present.
     */
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
    margin: 0;
    padding: var(--gp-sp-3) var(--gp-sp-5);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    background: rgba(0, 0, 0, 0.4);
}
body:not(.wholesale-portal-body) .k-sq-action-bar form {
    display: inline-flex;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sq-action-bar form .btn,
body:not(.wholesale-portal-body) .k-sq-action-bar > .btn {
    min-height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.75rem;
    line-height: 1.2;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sq-action-bar__spacer { margin-left: auto; }
body:not(.wholesale-portal-body) .k-sq-action-bar__group {
    display: inline-flex;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}

body:not(.wholesale-portal-body) .k-sq-more-info {
    margin: 0;
    padding: var(--gp-sp-3) var(--gp-sp-5);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.8125rem;
    color: var(--gp-fg);
    line-height: 1.45;
}
body:not(.wholesale-portal-body) .k-sq-more-info strong { color: var(--gp-fg); }

/* 26.6 History tab — filter wrap + table.
 *        Replaces the existing `.sq-history-filter-wrap` shell and
 *        the `.table .table-striped` markup with a Kinetic
 *        `.k-sq-history-filter` + `.k-sq-history-table` pair. The
 *        status pill is a `.k-badge.k-badge--filled.k-badge--{level}`
 *        (the existing `sqStatusBadgeClass` strings are remapped
 *        to the new level tokens). The per-platform network pill
 *        uses the same brand-color tokens as the upcoming timeline. */

body:not(.wholesale-portal-body) .k-sq-history-filter {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin-top: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    padding: 0;
}
body:not(.wholesale-portal-body) .k-sq-history-filter__wrap {
    padding: var(--gp-sp-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-sq-history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-sq-history-table thead th {
    text-align: left;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-sq-history-table tbody td {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    vertical-align: top;
}
body:not(.wholesale-portal-body) .k-sq-history-table tbody tr {
    transition: background-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-history-table tbody tr:hover { background: var(--gp-muted); }
body:not(.wholesale-portal-body) .k-sq-history-table__id {
    font-family: var(--gp-font-mono);
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-sq-history-table__net-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--gp-sp-2);
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-sq-history-table__time {
    font-size: 0.8125rem;
    line-height: 1.4;
}
body:not(.wholesale-portal-body) .k-sq-history-table__time strong { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-sq-history-table__error {
    color: var(--gp-danger);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-sq-history-table__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    align-items: flex-start;
}

/* 26.7 Platform settings subnav.
 *        Replaces the legacy `.nav.nav-tabs.sq-platform-tabs`
 *        underline strip with a centered "pills in a rail" subnav
 *        pattern that reads as obviously navigable:
 *        - centered within the content area
 *        - 2px borders, no radius, no shadow (per §5 shape language)
 *        - hover flips the foreground to the acid-yellow accent so
 *          the clickable affordance is unmissable
 *        - active state reverses: acid-yellow background, dark
 *          (--gp-accent-fg) text, and a 2px offset on the bottom
 *          edge so the active pill visually "sits forward"
 *        - shared with the global `.k-tabs--pills` modifier so any
 *          other subnav row (leads status filter, wholesale admin
 *          section switcher, code-editor HTML/CSS/JS split, etc.)
 *          can opt into the same well-considered treatment by
 *          adding the class. The original bottom-border-underline
 *          strip is the default `.k-tabs` rule; pages that want
 *          the pill treatment opt in with `.k-tabs--pills`. */

body:not(.wholesale-portal-body) .k-sq-platform-tabs,
.k-tabs.k-tabs--pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-2);
    border-bottom: 0;
    margin-bottom: var(--gp-sp-6);
    flex-wrap: wrap;
    padding: var(--gp-sp-2) 0;
}
body:not(.wholesale-portal-body) .k-sq-platform-tab,
.k-tabs.k-tabs--pills .k-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.75rem;
    padding: 0 var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    background: transparent;
    font-family: var(--gp-font-display);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-decoration: none;
    border: var(--gp-border-w) solid var(--gp-border);
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-platform-tab:hover,
.k-tabs.k-tabs--pills .k-tab:hover {
    color: var(--gp-accent);
    border-color: var(--gp-accent);
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-sq-platform-tab:focus-visible,
.k-tabs.k-tabs--pills .k-tab:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}
body:not(.wholesale-portal-body) .k-sq-platform-tab--active,
.k-tabs.k-tabs--pills .k-tab.is-active,
.k-tabs.k-tabs--pills .k-tab--active,
.k-tabs.k-tabs--pills .k-tab[aria-selected="true"] {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 0 0 var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-sq-platform-tab-content {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}

/* Reduced motion: kill the lift transform on the active pill so
   the subnav stays static when motion is reduced (per §8 +
   prefers-reduced-motion §12). */
@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-sq-platform-tab--active,
    .k-tabs.k-tabs--pills .k-tab.is-active,
    .k-tabs.k-tabs--pills .k-tab--active,
    .k-tabs.k-tabs--pills .k-tab[aria-selected="true"] {
        transform: none;
        box-shadow: none;
    }
}

/* Pills variant for the inner button (`.k-tab__btn`) — used by the
   code-editor HTML/CSS/JS split tabs and any other surface that
   has a `<button class="k-tab">` instead of an `<a>`. The pills
   variant should look identical to the `<a>` pills (border, hover,
   active flip). */
.k-tabs.k-tabs--pills .k-tab__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.75rem;
    padding: 0 var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    background: transparent;
    border: var(--gp-border-w) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease),
                background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
}
.k-tabs.k-tabs--pills .k-tab__btn:hover {
    color: var(--gp-accent);
    border-color: var(--gp-accent);
}
.k-tabs.k-tabs--pills .k-tab.is-active .k-tab__btn,
.k-tabs.k-tabs--pills .k-tab--active .k-tab__btn,
.k-tabs.k-tabs--pills .k-tab__btn[aria-selected="true"] {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 0 0 var(--gp-accent);
}
@media (prefers-reduced-motion: reduce) {
    .k-tabs.k-tabs--pills .k-tab__btn {
        transition: none;
    }
    .k-tabs.k-tabs--pills .k-tab.is-active .k-tab__btn,
    .k-tabs.k-tabs--pills .k-tab--active .k-tab__btn,
    .k-tabs.k-tabs--pills .k-tab__btn[aria-selected="true"] {
        transform: none;
        box-shadow: none;
    }
}

/* 26.8 Settings cards (warning / success) + important toggle.
 *
 *        Settings cards (the "default" `.k-sq-settings-card` form) use
 *        a flat 2px border + a muted-background header strip. The
 *        typography hierarchy inside the settings panel is:
 *          - card header (`.k-sq-card__header`) = section-level heading
 *            (clamp(1rem, 1.5vw, 1.125rem) bold uppercase, 0.1em
 *            tracking — the biggest text inside a card)
 *          - card title (`.k-sq-card__title`) = subsection label
 *            (0.875rem bold uppercase, 0.04em tracking)
 *          - field label (`.k-label` / `.form-label`) = 0.75rem bold
 *            uppercase 0.1em tracking, muted-foreground color
 *          - helper text (`.k-help` / `.form-text`) = 0.8125rem italic
 *            muted-foreground
 *
 *        Utility cards (`--warning` / `--success`) are a separate
 *        surface — they convey "this is a destructive / constructive
 *        action you can take", not a settings form. The colored
 *        border treatment was too lightweight to read as deliberately
 *        different from the settings cards above, so the utility cards
 *        now use:
 *          - 4px left accent bar in the status color (yellow for
 *            destructive / `--gp-warning`, green for constructive /
 *            `--gp-success`) so the action class is unmissable
 *          - 2px border around the whole card (the structural
 *            shape, per §5 — no radius, no shadow)
 *          - flat header (no muted background) so it reads as a
 *            different surface than the settings cards
 *          - small uppercase eyebrow row at the top in the status
 *            color, calling out the action class ("CLEAR QUEUES" /
 *            "FILL QUEUES" + the semantic eyebrow)
 *          - tighter internal padding (`--gp-sp-3` / `--gp-sp-4`
 *            instead of `--gp-sp-5`) so the action feels compact
 *            and tactical, not editorial.
 *
 *        The "important" switch row remains a left-bordered highlight
 *        cell with the toggle and the label. */

body:not(.wholesale-portal-body) .k-sq-settings-card {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: 0;
}
body:not(.wholesale-portal-body) .k-sq-settings-card__header {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-5);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sq-settings-card__body {
    padding: var(--gp-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sq-settings-card__note {
    margin: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    font-style: italic;
}
body:not(.wholesale-portal-body) .k-sq-settings-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
}
body:not(.wholesale-portal-body) .k-sq-settings-card__row-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 700;
    margin-right: var(--gp-sp-1);
}

/* Utility-card treatment (destructive / constructive actions).
   A flat 2px border, a 4px left accent bar in the status color, a
   flat header (no muted background), a small uppercase eyebrow
   row, and tighter internal padding. The header text and eyebrow
   both pick up the status color so the action class reads at a
   glance, not just from the border. */
body:not(.wholesale-portal-body) .k-sq-settings-card--warning,
body:not(.wholesale-portal-body) .k-sq-settings-card--success {
    border-left: 0;
    position: relative;
}
body:not(.wholesale-portal-body) .k-sq-settings-card--warning::before,
body:not(.wholesale-portal-body) .k-sq-settings-card--success::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sq-settings-card--warning::before { background: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-sq-settings-card--success::before { background: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sq-settings-card--warning .k-sq-settings-card__header,
body:not(.wholesale-portal-body) .k-sq-settings-card--success .k-sq-settings-card__header {
    background: transparent;
    border-bottom: 0;
    padding: var(--gp-sp-4) var(--gp-sp-4) var(--gp-sp-2);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-sq-settings-card--warning .k-sq-settings-card__header::before,
body:not(.wholesale-portal-body) .k-sq-settings-card--success .k-sq-settings-card__header::before {
    content: attr(data-utility-eyebrow);
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: inherit;
    opacity: 1;
}
body:not(.wholesale-portal-body) .k-sq-settings-card--warning .k-sq-settings-card__header { color: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-sq-settings-card--success .k-sq-settings-card__header { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sq-settings-card--warning .k-sq-settings-card__body,
body:not(.wholesale-portal-body) .k-sq-settings-card--success .k-sq-settings-card__body {
    padding: var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-4);
    gap: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-sq-toggle {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 3rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-sq-toggle--important {
    border-left: 4px solid var(--gp-info);
    background: rgba(59, 130, 246, 0.08);
    padding-left: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sq-toggle__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
}

/* 26.9 Twig helper accordions + copy pills.
 *        The Twig Variables / Snippets / Example Data accordions
 *        become a stack of `.k-collapse` blocks. The copy buttons
 *        become `.k-sq-copy-pill` chips. */

body:not(.wholesale-portal-body) .k-sq-twigs {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sq-twigs__item {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-sq-twigs__intro {
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-sq-twigs__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sq-twigs__snippet {
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    margin: 0 0 var(--gp-sp-2);
    white-space: pre-wrap;
}
body:not(.wholesale-portal-body) .k-sq-twigs__row-table {
    width: 100%;
    border-collapse: collapse;
}
body:not(.wholesale-portal-body) .k-sq-twigs__row-table th,
body:not(.wholesale-portal-body) .k-sq-twigs__row-table td {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    text-align: left;
    vertical-align: top;
}
body:not(.wholesale-portal-body) .k-sq-twigs__row-table th {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-weight: 700;
}

body:not(.wholesale-portal-body) .k-sq-copy-pill {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 var(--gp-sp-3);
    background: transparent;
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-copy-pill:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

/* 26.10 Mode dispatch controls (segmented row).
 *        Per Phase 8.8 the simulation / production toggle becomes
 *        a `.k-sq-modetoggle` (`.k-segmented` shared component).
 *        The active mode is painted acid-yellow. */

body:not(.wholesale-portal-body) .k-sq-modetoggle {
    display: inline-flex;
    border: var(--gp-border-w) solid var(--gp-border);
    background: transparent;
}
body:not(.wholesale-portal-body) .k-sq-modetoggle__pill {
    appearance: none;
    background: transparent;
    color: var(--gp-fg);
    border: 0;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    min-height: 3rem;
    padding: 0 var(--gp-sp-4);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
}
body:not(.wholesale-portal-body) .k-sq-modetoggle__pill:last-child { border-right: 0; }
body:not(.wholesale-portal-body) .k-sq-modetoggle__pill--active,
body:not(.wholesale-portal-body) .k-sq-modetoggle__pill[aria-pressed="true"] {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* 26.11 Clear / Fill social queue bar.
 *        The existing `.d-flex.flex-wrap.align-items-center.gap-2`
 *        rows become `.k-sq-clear-bar` with a left label and a row
 *        of `.k-btn` outline / danger pills. */

body:not(.wholesale-portal-body) .k-sq-clear-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2) 0;
}
body:not(.wholesale-portal-body) .k-sq-clear-bar__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--gp-muted-foreground);
    margin-right: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sq-clear-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
}

/* 26.12 Alternatives modal body.
 *        The existing `.card.h-100` alternatives cards become
 *        `.k-sq-alt-card` with a sharp border and a 2px acid-yellow
 *        hover state. The Restrictions <details> block becomes a
 *        `.k-sq-restrictions` block. */

body:not(.wholesale-portal-body) .k-sq-restrictions {
    margin-bottom: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-sq-restrictions__row {
    display: flex;
    gap: var(--gp-sp-2);
    margin-bottom: var(--gp-sp-1);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-sq-restrictions__label { color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-sq-restrictions__value { color: var(--gp-fg); }

body:not(.wholesale-portal-body) .k-sq-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sq-alt-card {
    display: flex;
    flex-direction: column;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    height: 100%;
    transition: border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sq-alt-card:hover { border-color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-sq-alt-card__body {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    flex: 1 1 auto;
}
body:not(.wholesale-portal-body) .k-sq-alt-card__footer {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sq-alt-thumb {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-sq-alt-thumb--empty {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-muted-foreground);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

/* 26.13 DadDev floating widget.
 *        Replaces the bespoke blue-gradient `.daddev-*` block with
 *        a Kinetic sharp-bordered panel. The FAB becomes a flat
 *        acid-yellow 64×64 square with a black chat-dots icon
 *        (replaces the blue gradient). The PIN entry uses the
 *        toned-down variant per §7.27. The bridge dot is
 *        acid-yellow when up, danger red when down. The chat
 *        bubbles, command approval queue, and lock screen follow
 *        the same Kinetic shape language. */

body:not(.wholesale-portal-body) .k-daddev-fab {
    width: 64px;
    height: 64px;
    border: var(--gp-border-w) solid var(--gp-bg);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-fab:hover { transform: translateY(-2px); }
body:not(.wholesale-portal-body) .k-daddev-fab:active { transform: translateY(0); }
body:not(.wholesale-portal-body) .k-daddev-fab i { font-size: 1.45rem; line-height: 1; }

body:not(.wholesale-portal-body) .k-daddev-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 20, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

body:not(.wholesale-portal-body) .k-daddev-panel {
    position: fixed;
    top: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    width: min(430px, calc(100vw - 1.25rem));
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    overflow: hidden;
    z-index: 1046;
    display: grid;
    grid-template-rows: auto 1fr auto;
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gp-dur) var(--gp-ease),
                transform var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
body:not(.wholesale-portal-body) .k-daddev-panel.is-page-mode {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: calc(100vh - 11rem);
    height: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 1;
    display: block;
}

body:not(.wholesale-portal-body) .k-daddev-page-shell {
    min-height: calc(100vh - 11rem);
    display: flex;
    width: 100%;
}

body:not(.wholesale-portal-body) .k-daddev-panel-header {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-daddev-avatar {
    width: 3rem;
    height: 3rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-font-display);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
}
body:not(.wholesale-portal-body) .k-daddev-title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--gp-fg);
    font-size: 1.125rem;
}
body:not(.wholesale-portal-body) .k-daddev-subtitle {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    margin-top: var(--gp-sp-1);
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    position: relative;
}
body:not(.wholesale-portal-body) .k-daddev-icon-btn {
    border: var(--gp-border-w) solid var(--gp-border);
    width: 2.25rem;
    height: 2.25rem;
    background: var(--gp-bg);
    color: var(--gp-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-icon-btn:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-icon-btn.is-page-link { display: inline-flex; }

body:not(.wholesale-portal-body) .k-daddev-menu {
    position: absolute;
    top: 2.6rem;
    right: 0;
    min-width: 12rem;
    width: min(21.25rem, calc(100vw - 1.6rem));
    max-width: calc(100vw - 1.6rem);
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-2);
    box-shadow: 0 12px 35px rgba(2, 6, 23, 0.45);
    display: none;
    overflow-x: hidden;
    z-index: 12;
}
body:not(.wholesale-portal-body) .k-daddev-menu.is-open { display: block; }
body:not(.wholesale-portal-body) .k-daddev-menu button,
body:not(.wholesale-portal-body) .k-daddev-menu .k-daddev-menu-session {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--gp-fg);
    text-align: left;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-menu button:hover,
body:not(.wholesale-portal-body) .k-daddev-menu .k-daddev-menu-session:hover {
    background: var(--gp-muted);
    color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-menu-muted { color: var(--gp-muted-foreground) !important; }
body:not(.wholesale-portal-body) .k-daddev-menu-divider {
    margin: var(--gp-sp-2) var(--gp-sp-1);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-daddev-menu-heading {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-1) var(--gp-sp-3);
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-daddev-menu-session { display: block; }
body:not(.wholesale-portal-body) .k-daddev-menu-session.is-current {
    background: var(--gp-muted);
    border-left: 4px solid var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-menu-session-title {
    display: block;
    font-weight: 600;
    color: var(--gp-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body:not(.wholesale-portal-body) .k-daddev-menu-session-meta {
    display: block;
    margin-top: var(--gp-sp-1);
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body:not(.wholesale-portal-body) .k-daddev-menu-session-empty {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    padding: var(--gp-sp-1) var(--gp-sp-3) var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-menu-settings {
    margin: var(--gp-sp-2) var(--gp-sp-1) var(--gp-sp-2);
    padding: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-setting-row {
    display: block;
    font-size: 0.75rem;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-daddev-setting-row input[type="checkbox"] {
    margin-right: var(--gp-sp-2);
    vertical-align: middle;
}
body:not(.wholesale-portal-body) .k-daddev-setting-row .form-control {
    margin-top: var(--gp-sp-1);
    font-size: 0.75rem;
    background: var(--gp-bg);
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-daddev-bridge {
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    background: var(--gp-danger);
    border: var(--gp-border-w-thin) solid var(--gp-danger);
    flex-shrink: 0;
}
body:not(.wholesale-portal-body) .k-daddev-bridge--up {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    box-shadow: 0 0 0 4px rgba(223, 225, 4, 0.18);
}

body:not(.wholesale-portal-body) .k-daddev-stream {
    overflow-y: auto;
    padding: var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-2);
    background: var(--gp-bg);
    color: var(--gp-fg);
}

/* Phase 17.2 — DadDev agent-status marquee. Lives between the
   panel header and the stream. The strip inherits the panel's
   muted background so the chat pane stays visually anchored. */
body:not(.wholesale-portal-body) .k-daddev-panel .k-marquee,
body:not(.wholesale-portal-body) .daddev-marquee {
    background: var(--gp-muted);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    min-height: 2.25rem;
    padding: 0;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-daddev-panel .k-marquee__cell,
body:not(.wholesale-portal-body) .daddev-marquee .k-marquee__cell {
    font-size: 0.75rem;
    min-width: 8rem;
    color: var(--gp-muted-foreground);
    transition: color 150ms linear, font-weight 150ms linear;
}
body:not(.wholesale-portal-body) .k-daddev-panel.is-page-mode .k-daddev-stream {
    overflow: visible;
    min-height: calc(100vh - 18rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

body:not(.wholesale-portal-body) .k-daddev-row {
    display: flex;
    width: 100%;
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-daddev-row--user { justify-content: flex-end; }
body:not(.wholesale-portal-body) .k-daddev-row--assistant,
body:not(.wholesale-portal-body) .k-daddev-row--system,
body:not(.wholesale-portal-body) .k-daddev-row--step { justify-content: flex-start; }

body:not(.wholesale-portal-body) .k-daddev-bubble {
    max-width: min(100%, 86%);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-size: 0.9375rem;
}
body:not(.wholesale-portal-body) .k-daddev-row--user .k-daddev-bubble {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-row--assistant .k-daddev-bubble {
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
    white-space: normal;
}
body:not(.wholesale-portal-body) .k-daddev-row--system .k-daddev-bubble {
    width: 100%;
    max-width: 100%;
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    font-size: 0.75rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
}
body.daddev-page body:not(.wholesale-portal-body) .k-daddev-row .k-daddev-bubble {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
}
body:not(.wholesale-portal-body) .k-daddev-bubble pre {
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2);
    overflow-x: auto;
    margin: var(--gp-sp-2) 0;
}
body:not(.wholesale-portal-body) .k-daddev-bubble code {
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: 0.08rem 0.3rem;
    font-size: 0.9em;
    color: inherit;
    font-family: var(--gp-font-mono);
}
body:not(.wholesale-portal-body) .k-daddev-bubble pre code {
    background: transparent;
    border: 0;
    padding: 0;
}
body:not(.wholesale-portal-body) .k-daddev-bubble h1,
body:not(.wholesale-portal-body) .k-daddev-bubble h2,
body:not(.wholesale-portal-body) .k-daddev-bubble h3,
body:not(.wholesale-portal-body) .k-daddev-bubble h4,
body:not(.wholesale-portal-body) .k-daddev-bubble h5,
body:not(.wholesale-portal-body) .k-daddev-bubble h6 {
    margin: var(--gp-sp-2) 0 var(--gp-sp-1);
    line-height: 1.2;
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-daddev-bubble p { margin: 0 0 var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-daddev-bubble ul,
body:not(.wholesale-portal-body) .k-daddev-bubble ol {
    margin: var(--gp-sp-1) 0 var(--gp-sp-2) 1.1rem;
    padding: 0;
}
body:not(.wholesale-portal-body) .k-daddev-bubble li { margin: var(--gp-sp-1) 0; }
body:not(.wholesale-portal-body) .k-daddev-bubble blockquote {
    margin: var(--gp-sp-2) 0;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-left: 4px solid var(--gp-accent);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-daddev-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--gp-sp-2) 0;
    font-size: 0.875em;
}
body:not(.wholesale-portal-body) .k-daddev-bubble th,
body:not(.wholesale-portal-body) .k-daddev-bubble td {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2);
    text-align: left;
    vertical-align: top;
}
body:not(.wholesale-portal-body) .k-daddev-bubble th {
    background: var(--gp-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-daddev-bubble a { color: var(--gp-accent); text-decoration: underline; }
body:not(.wholesale-portal-body) .k-daddev-bubble a:hover { color: var(--gp-fg); }

body:not(.wholesale-portal-body) .k-daddev-progress {
    width: 100%;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-daddev-progress summary {
    list-style: none;
    cursor: pointer;
    padding: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-daddev-progress summary::-webkit-details-marker { display: none; }
body:not(.wholesale-portal-body) .k-daddev-progress-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gp-sp-3);
    align-items: start;
}
body:not(.wholesale-portal-body) .k-daddev-progress-title {
    font-size: 0.8125rem;
    color: var(--gp-fg);
    line-height: 1.4;
}
body:not(.wholesale-portal-body) .k-daddev-progress-preview {
    margin-top: var(--gp-sp-1);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    white-space: pre-wrap;
    word-break: break-word;
}
body:not(.wholesale-portal-body) .k-daddev-progress-meta {
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-daddev-progress-body {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-1) var(--gp-sp-3) var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-daddev-progress-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
body:not(.wholesale-portal-body) .k-daddev-progress-item {
    padding-top: var(--gp-sp-2);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gp-muted-foreground);
    white-space: pre-wrap;
    word-break: break-word;
}
body:not(.wholesale-portal-body) .k-daddev-progress-item:first-child { padding-top: var(--gp-sp-2); }

body:not(.wholesale-portal-body) .k-daddev-approval {
    margin: var(--gp-sp-3) 0;
    border: var(--gp-border-w) solid var(--gp-warning);
    background: var(--gp-warning);
    color: var(--gp-warning-fg);
    padding: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-daddev-approval-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--gp-warning-fg);
    margin: 0;
}
body:not(.wholesale-portal-body) .k-daddev-approval-preview {
    margin-top: var(--gp-sp-2);
    font-size: 0.75rem;
    color: var(--gp-warning-fg);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--gp-font-mono);
}
body:not(.wholesale-portal-body) .k-daddev-approval-actions {
    margin-top: var(--gp-sp-3);
    display: flex;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-approval-actions button {
    border: var(--gp-border-w) solid var(--gp-bg);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-approval-actions button:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-approval__approve { background: var(--gp-success); color: var(--gp-success-fg); border-color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-daddev-approval__deny { background: var(--gp-danger); color: var(--gp-danger-fg); border-color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-daddev-approval-resolved {
    margin-top: var(--gp-sp-2);
    font-size: 0.6875rem;
    color: var(--gp-warning-fg);
}

/* 26.14 DadDev lock screen + PIN entry.
 *        The lock screen is a full-panel overlay. The PIN entry
 *        uses the toned-down variant per §7.27 (sharp corners +
 *        uppercase + monospace, no acid-yellow color flips).
 *        The 4-8 digit cells are 40×40, the active digit is
 *        `var(--gp-muted)` with off-white text, the inactive
 *        digits are `var(--gp-muted)` with a 1px border. The
 *        Submit button is `.k-btn--outline.k-btn--sm`. */

body:not(.wholesale-portal-body) .k-daddev-lock-screen {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-items: center;
    padding: var(--gp-sp-4);
    background: var(--gp-bg);
    border: 0;
}
body:not(.wholesale-portal-body) .k-daddev-lock-card {
    width: min(100%, 22rem);
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-5);
    text-align: center;
}
body:not(.wholesale-portal-body) .k-daddev-lock-kicker {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gp-muted-foreground);
    font-weight: 800;
}
body:not(.wholesale-portal-body) .k-daddev-lock-title {
    margin-top: var(--gp-sp-2);
    font-family: var(--gp-font-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-daddev-lock-subtitle {
    margin-top: var(--gp-sp-2);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--gp-muted-foreground);
    min-height: 2.35em;
}

body:not(.wholesale-portal-body) .k-daddev-pin-dots {
    display: flex;
    justify-content: center;
    gap: var(--gp-sp-3);
    margin: var(--gp-sp-4) 0;
}
body:not(.wholesale-portal-body) .k-daddev-pin-dot {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-pin-dot--filled {
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-daddev-pin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-pin-key {
    border: var(--gp-border-w) solid var(--gp-border);
    min-height: 3.875rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-pin-key:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-daddev-pin-key:active { transform: translateY(0); }
body:not(.wholesale-portal-body) .k-daddev-pin-key:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}
body:not(.wholesale-portal-body) .k-daddev-pin-key--action {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-daddev-pin-key--submit {
    background: var(--gp-muted);
    color: var(--gp-fg);
    border-color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-daddev-pin-key--submit:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}

/* 26.15 DadDev composer + action buttons.
 *        The composer is a 1px-top-bordered cell with a 96px-tall
 *        textarea and a row of status + action buttons. The
 *        Send button is acid-yellow (kinetic primary) and the
 *        Interrupt button is the shared outline button. */

body:not(.wholesale-portal-body) .k-daddev-composer {
    padding: var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-3);
    border-top: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-daddev-composer__textarea {
    width: 100%;
    min-height: 4.625rem;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: var(--gp-sp-3);
    resize: vertical;
    font-size: 0.9375rem;
    font-family: inherit;
}
body:not(.wholesale-portal-body) .k-daddev-composer__actions {
    margin-top: var(--gp-sp-3);
    display: flex;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    align-items: center;
}
body:not(.wholesale-portal-body) .k-daddev-status-text {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}
body:not(.wholesale-portal-body) .k-daddev-activity {
    min-height: 1.1rem;
    margin-top: var(--gp-sp-2);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    letter-spacing: 0.02em;
    user-select: none;
}
body:not(.wholesale-portal-body) .k-daddev-activity[hidden] { display: none !important; }
body:not(.wholesale-portal-body) .k-daddev-activity-char {
    display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
    body:not(.wholesale-portal-body) .k-daddev-activity-char {
        animation: k-daddev-activity-wave 1.4s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.06s);
    }
}
@keyframes k-daddev-activity-wave {
    0%, 100% { color: var(--gp-muted-foreground); opacity: 0.72; }
    45% { color: var(--gp-fg); opacity: 1; }
    70% { color: var(--gp-muted-foreground); opacity: 0.9; }
}

body:not(.wholesale-portal-body) .k-daddev-action-btns {
    display: inline-flex;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-daddev-action-btns button {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-daddev-action-btns button:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-action-btns__send {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-daddev-action-btns__send:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}

/* 26.16 DadDev widget root positioning (replaces the bespoke
 *        `.daddev-widget-root` block). */

body:not(.wholesale-portal-body) .k-daddev-widget-root {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1044;
}
@media (max-width: 768px) {
    body:not(.wholesale-portal-body) .k-daddev-widget-root {
        right: 0.8rem;
        bottom: calc(0.8rem + env(safe-area-inset-bottom));
    }
    body:not(.wholesale-portal-body) .k-daddev-fab { width: 62px; height: 62px; }
    body:not(.wholesale-portal-body) .k-daddev-panel {
        top: calc(0.625rem + env(safe-area-inset-top));
        right: 0.625rem;
        left: 0.625rem;
        bottom: calc(0.625rem + env(safe-area-inset-bottom));
        width: auto;
    }
    body:not(.wholesale-portal-body) .k-daddev-panel.is-page-mode {
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        min-height: calc(100vh - 9.5rem);
        height: auto;
    }
    body:not(.wholesale-portal-body) .k-daddev-panel.is-page-mode .k-daddev-stream {
        min-height: calc(100vh - 15rem);
    }
}

/* 26.17 Reduced-motion guard for the Phase 8 surface. The global
 *        `base.css` rule already strips transitions under
 *        `prefers-reduced-motion: reduce`; the explicit override
 *        below is a safety net for the DadDev activity wave, the
 *        panel open/close slide, and the timeline post box hover. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-daddev-fab,
    body:not(.wholesale-portal-body) .k-daddev-panel,
    body:not(.wholesale-portal-body) .k-daddev-pin-dot,
    body:not(.wholesale-portal-body) .k-daddev-pin-key,
    body:not(.wholesale-portal-body) .k-daddev-icon-btn,
    body:not(.wholesale-portal-body) .k-sq-post-box,
    body:not(.wholesale-portal-body) .k-sq-network-filter__pill,
    body:not(.wholesale-portal-body) .k-sq-history-table tbody tr,
    body:not(.wholesale-portal-body) .k-sq-copy-pill,
    body:not(.wholesale-portal-body) .k-sq-alt-card {
        transition: none;
    }
    body:not(.wholesale-portal-body) .k-daddev-activity-char {
        animation: none;
    }
}

/* ---- 28. Phase 11 — Promotions tool --------------------------------
 *
 * Per-tool surface for the promotions tool. The shared `.k-*` primitives
 * (`.k-card`, `.k-btn`, `.k-input`, `.k-table`, `.k-tabs`, `.k-badge`,
 * etc.) are reused wherever possible. The bespoke classes below add the
 * promotions-specific chrome: the calendar month grid, the calendar day
 * cell + observances + event chips, the promotion editor's two-column
 * panel shell + the action tile, the theme-agent chat-style workspace,
 * the template / GIF / settings shells, and the launch log / price
 * preview / lightning deal sub-pages.
 *
 * Every selector is scoped to `body:not(.wholesale-portal-body)` so the
 * wholesale portal is unaffected per Decision 6. Per the prompt's §11
 * anti-patterns: zero `border-radius`, zero `box-shadow`, zero gradient
 * backgrounds, zero mid-range grays.
 */

/* 28.1 — Calendar grid: month block + month header + weekday strip. */

body:not(.wholesale-portal-body) .k-promo-calendar {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-calendar-month {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-calendar-month__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-calendar-month__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.125rem;
}

body:not(.wholesale-portal-body) .k-promo-calendar-append-gap {
    display: block;
    width: 100%;
    height: var(--gp-sp-6);
}

/* 28.2 — Calendar table: full-bleed, no zebra, 7 columns, day cells
 *        are 116px tall and host observances + event chips. */

body:not(.wholesale-portal-body) .k-promo-calendar-table {
    table-layout: fixed;
    margin: 0;
    width: 100%;
    color: var(--gp-fg);
    background: var(--gp-bg);
    border-color: var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-calendar-table tbody tr {
    height: var(--promo-row-height, 116px);
}

body:not(.wholesale-portal-body) .k-promo-calendar-table thead th {
    background: #1b1b1f;
    color: var(--gp-muted-foreground);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    text-align: center;
    font-weight: 700;
    padding: 0.5rem 0.25rem;
}

body:not(.wholesale-portal-body) .k-promo-cal-cell {
    min-width: 126px;
    min-height: 116px;
    padding: 0.25rem 0.375rem;
    position: relative;
    overflow: visible;
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    vertical-align: top;
    cursor: default;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-cal-cell--empty {
    background: #1b1b1f;
    color: var(--gp-muted-foreground);
    pointer-events: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-cell--today {
    background: var(--gp-bg);
    border-color: var(--gp-accent);
    border-width: var(--gp-border-w);
}

body:not(.wholesale-portal-body) .k-promo-cal-cell--today .k-promo-cal-day-num {
    color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-cal-cell:hover {
    background: #111113;
}

body:not(.wholesale-portal-body) .k-promo-cal-cell__hint {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gp-muted-foreground);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-cal-cell:hover .k-promo-cal-cell__hint,
body:not(.wholesale-portal-body) .k-promo-cal-cell:focus-within .k-promo-cal-cell__hint {
    opacity: 0.4;
    color: var(--gp-fg);
}

/* 28.3 — Day head: 64px number + weekday label + observance chips. */

body:not(.wholesale-portal-body) .k-promo-cal-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
    margin-bottom: 0.2rem;
}

body:not(.wholesale-portal-body) .k-promo-cal-day-num {
    flex: 0 0 auto;
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-cal-day-dow {
    flex: 0 0 auto;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-cal-observances {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    overflow: hidden;
    pointer-events: none;
    margin-top: 0.25rem;
}

body:not(.wholesale-portal-body) .k-promo-cal-observance {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    padding: 0.0625rem 0.3rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.wholesale-portal-body) .k-promo-cal-observance--more {
    color: var(--gp-muted-foreground);
}

/* 28.4 — Event chips: small status-colored chips rendered inside
 *        a calendar day cell, absolutely positioned by lane. The
 *        status colors map to the agreed `--gp-{level}` tokens. */

body:not(.wholesale-portal-body) .k-promo-cal-chip {
    --promo-lane: 0;
    display: block;
    position: absolute;
    top: calc(2.5rem + ((100% - 2.5rem - (var(--promo-lanes) * 1.375rem)) / 2) + (var(--promo-lane) * 1.375rem));
    left: calc(var(--promo-start-pct, 0) * 1%);
    right: calc((100 - var(--promo-end-pct, 100)) * 1%);
    z-index: 2;
    min-height: 1.125rem;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    line-height: 1.125rem;
    padding: 0 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: var(--gp-fg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    isolation: isolate;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gp-accent);
    opacity: 0;
    transition: opacity var(--gp-dur-fast) var(--gp-ease);
    z-index: 0;
    pointer-events: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip:hover::before,
body:not(.wholesale-portal-body) .k-promo-cal-chip:focus-visible::before,
body:not(.wholesale-portal-body) .k-promo-cal-chip--group-highlight::before {
    opacity: 0.9;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip__label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--label-host {
    z-index: 3;
    overflow: visible;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--label-host .k-promo-cal-chip__label {
    width: calc((var(--promo-label-span) * (100% + 0.75rem)) - 0.75rem);
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip:hover {
    text-decoration: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--continues-left {
    left: -2px;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--continues-right {
    right: -2px;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--legend {
    position: static;
    min-height: auto;
    line-height: 1.2;
    padding: 0.2rem 0.5rem;
    display: inline-flex;
    align-items: center;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--draft           { background: var(--gp-muted);    color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--approved        { background: var(--gp-info);     color: var(--gp-info-fg); border-color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--active          { background: var(--gp-success);  color: var(--gp-success-fg); border-color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--ended           { background: var(--gp-bg);       color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--canceled        { background: var(--gp-muted);    color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--failed          { background: var(--gp-danger);   color: var(--gp-danger-fg); border-color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-promo-cal-chip--failed_unlaunch { background: var(--gp-warning);  color: var(--gp-warning-fg); border-color: var(--gp-warning); }

body:not(.wholesale-portal-body) .k-promo-cal-chip[data-promo-calendar-id] {
    border: 0;
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--lightning-type {
    background: var(--gp-warning);
    color: var(--gp-warning-fg);
    border: var(--gp-border-w-thin) solid var(--gp-warning-fg);
}

body:not(.wholesale-portal-body) .k-promo-cal-chip--lightning-projected {
    background: transparent;
    color: var(--gp-warning);
    border: var(--gp-border-w-thin) dashed var(--gp-warning);
    font-style: italic;
    cursor: default;
    pointer-events: auto;
}

body:not(.wholesale-portal-body) .k-promo-calendar-dragging,
body:not(.wholesale-portal-body) .k-promo-calendar-dragging * {
    cursor: crosshair !important;
    user-select: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-cell--drag-range::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 0.375rem;
    right: 0.375rem;
    z-index: 5;
    height: 1.125rem;
    background: var(--gp-accent);
    border: var(--gp-border-w-thin) solid var(--gp-fg);
    pointer-events: none;
}

body:not(.wholesale-portal-body) .k-promo-cal-cell--drag-continues-left::after { left: -2px; }
body:not(.wholesale-portal-body) .k-promo-cal-cell--drag-continues-right::after { right: -2px; }

/* 28.5 — Calendar legend: status chips in a single row. */

body:not(.wholesale-portal-body) .k-promo-calendar-legend {
    display: flex;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0 var(--gp-sp-3);
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: transparent;
    margin-bottom: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-calendar-legend__tz {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    margin-right: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-calendar-load-more {
    padding: var(--gp-sp-3) 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-promo-calendar {
        gap: var(--gp-sp-4);
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-legend {
        gap: var(--gp-sp-1);
        align-items: flex-start;
        margin-bottom: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-legend__tz {
        flex: 1 0 100%;
        margin-right: 0;
        font-size: 0.6875rem;
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-legend .k-promo-cal-chip--legend {
        padding: 0.15rem 0.35rem;
        font-size: 0.625rem;
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-month__header {
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-month__title {
        font-size: 1rem;
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-table {
        min-width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-table tbody tr {
        height: var(--promo-row-height-mobile, 72px);
    }

    body:not(.wholesale-portal-body) .k-promo-calendar-table thead th {
        padding: 0.4rem 0.1rem;
        font-size: 0.5625rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-cell {
        min-width: 0;
        padding: 0.2rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-day-head {
        display: block;
        margin-bottom: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-day-num {
        font-size: 1.125rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-observances {
        gap: 0.1rem;
        margin-top: 0.15rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-observance {
        padding: 0 0.15rem;
        font-size: 0.5rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-chip {
        top: calc(2rem + ((100% - 2rem - (var(--promo-lanes) * 1.375rem)) / 2) + (var(--promo-lane) * 1.375rem));
        min-height: 1.25rem;
        padding: 0 0.2rem;
        font-size: 0.5625rem;
        line-height: 1.25rem;
    }

    body:not(.wholesale-portal-body) .k-promo-cal-cell__hint {
        display: none;
    }
}

/* 28.6 — Promotion editor panel: `.k-card` shell with eyebrow + title
 *        + the right-side status actions row. Used by `editor.php`. */

body:not(.wholesale-portal-body) .k-promo-panel {
    display: flex;
    flex-direction: column;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-panel__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 0.9375rem;
}

body:not(.wholesale-portal-body) .k-promo-panel__eyebrow {
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    margin-bottom: 0.2rem;
}

body:not(.wholesale-portal-body) .k-promo-panel__body {
    padding: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}

body:not(.wholesale-portal-body) .k-promo-field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-field-label__required {
    color: var(--gp-danger);
    margin-left: 0.125rem;
}

body:not(.wholesale-portal-body) .k-promo-form-timezone {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.25rem;
    text-transform: none;
}

body:not(.wholesale-portal-body) .k-promo-input::placeholder { color: var(--gp-muted); }

body:not(.wholesale-portal-body) .k-promo-code-input {
    background: var(--gp-bg);
    color: var(--gp-fg);
    border-color: var(--gp-border);
    font-family: var(--gp-font-mono);
    font-size: 0.875rem;
    resize: vertical;
    min-height: 9rem;
}

body:not(.wholesale-portal-body) .k-promo-theme-editor { min-height: 19rem; }

body:not(.wholesale-portal-body) .k-promo-toggle-label {
    color: var(--gp-fg);
    font-weight: 600;
    margin-left: 0.5rem;
}

body:not(.wholesale-portal-body) .k-promo-help-toggle {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: transparent;
    color: var(--gp-muted-foreground);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-help-toggle:hover {
    color: var(--gp-accent);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-help {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    padding-top: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-help code {
    display: inline-block;
    margin: 0.2rem 0.25rem 0.2rem 0;
    padding: 0.18rem 0.42rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-promo-compact-action {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-preview-frame {
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    min-height: 80px;
    overflow: hidden;
}

body:not(.wholesale-portal-body) .k-promo-code-tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    margin-bottom: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-code-tabs .k-tab {
    min-height: 2.5rem;
    font-size: 0.75rem;
    padding: 0 var(--gp-sp-3);
    border-bottom-width: 2px;
    border-bottom-color: transparent;
    margin-bottom: -2px;
}

body:not(.wholesale-portal-body) .k-promo-form--readonly fieldset,
body:not(.wholesale-portal-body) .k-promo-form--readonly input,
body:not(.wholesale-portal-body) .k-promo-form--readonly textarea,
body:not(.wholesale-portal-body) .k-promo-form--readonly select {
    pointer-events: none;
}

/* 28.7 — Promotion action tile (the "Open Visual Style Agent" /
 *        "Create Variants" link cards on the editor right rail). */

body:not(.wholesale-portal-body) .k-promo-action-tile {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    text-decoration: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--gp-font-display);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-action-tile:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
    text-decoration: none;
}

body:not(.wholesale-portal-body) .k-promo-action-tile__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--gp-muted);
    color: var(--gp-accent);
    font-size: 1.125rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-action-tile:hover .k-promo-action-tile__icon {
    background: var(--gp-accent-fg);
    color: var(--gp-accent);
    border-color: var(--gp-accent-fg);
}

body:not(.wholesale-portal-body) .k-promo-action-tile__body { flex: 1 1 auto; min-width: 0; }

body:not(.wholesale-portal-body) .k-promo-action-tile__title {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    color: inherit;
}

body:not(.wholesale-portal-body) .k-promo-action-tile__sub {
    display: block;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    line-height: 1.2;
}

body:not(.wholesale-portal-body) .k-promo-action-tile:hover .k-promo-action-tile__sub { color: inherit; }

body:not(.wholesale-portal-body) .k-promo-action-tile__chevron {
    flex: 0 0 auto;
    color: var(--gp-muted-foreground);
    margin-left: auto;
}

body:not(.wholesale-portal-body) .k-promo-action-tile:hover .k-promo-action-tile__chevron { color: inherit; }

/* 28.8 — Editor autosave indicator (the "Saved / Saving / Ready" pill
 *        rendered next to the close button in the drawer mode). */

body:not(.wholesale-portal-body) .k-promo-autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    margin-left: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-autosave-indicator .bi { font-size: 0.875rem; }

/* 28.9 — Theme agent workspace: a chat-style shell with the chat
 *        panel on the left, the live preview panel on the right. */

body:not(.wholesale-portal-body) .k-promo-agent-shell {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-agent-topbar {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    padding: var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-agent-topbar__main { flex: 1 1 auto; min-width: 0; }

body:not(.wholesale-portal-body) .k-promo-agent-kicker {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-agent-title {
    margin: 0.2rem 0 0.4rem;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--gp-fg);
    font-size: 1.5rem;
    line-height: 1.05;
    word-break: break-word;
}

body:not(.wholesale-portal-body) .k-promo-agent-meta {
    display: flex;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-agent-meta i { margin-right: 0.25rem; }

body:not(.wholesale-portal-body) .k-promo-agent-edit-link {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}

@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-promo-agent-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

body:not(.wholesale-portal-body) .k-promo-agent-chat-panel,
body:not(.wholesale-portal-body) .k-promo-agent-preview-panel {
    display: flex;
    flex-direction: column;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    min-height: 540px;
}

body:not(.wholesale-portal-body) .k-promo-agent-chat-head,
body:not(.wholesale-portal-body) .k-promo-agent-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-agent-chat-head h2,
body:not(.wholesale-portal-body) .k-promo-agent-preview-head h2 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-status {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-agent-working-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-working-file code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--gp-font-mono);
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-agent-working-file button {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: transparent;
    color: var(--gp-fg);
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body:not(.wholesale-portal-body) .k-promo-agent-working-file button:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-agent-chat {
    flex: 1 1 auto;
    min-height: 16rem;
    overflow-y: auto;
    padding: var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-agent-composer {
    border-top: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-agent-input {
    width: 100%;
    min-height: 5rem;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: var(--gp-sp-3);
    resize: vertical;
    font-family: inherit;
    font-size: 0.9375rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-send {
    align-self: flex-end;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--gp-border-w) solid var(--gp-accent);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-agent-send:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-agent-preview-frame-wrap {
    flex: 1 1 auto;
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    min-height: 16rem;
}

body:not(.wholesale-portal-body) #promo-agent-preview-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 16rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-panel {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin: var(--gp-sp-3) var(--gp-sp-4) var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-agent-panel__header {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    font-weight: 700;
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-agent-panel__body { padding: var(--gp-sp-3) var(--gp-sp-4); }

body:not(.wholesale-portal-body) .k-promo-agent-code {
    width: 100%;
    min-height: 14rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    padding: var(--gp-sp-2);
    resize: vertical;
}

/* 28.10 — Theme agent message bubbles (per §7.23 of the prompt).
 *         The user bubble is acid yellow on black; the assistant
 *         bubble is `var(--gp-muted)` on black. Both are 320px max. */

body:not(.wholesale-portal-body) .k-promo-agent-bubble {
    display: flex;
    gap: var(--gp-sp-2);
    align-items: flex-start;
    max-width: 32rem;
}

body:not(.wholesale-portal-body) .k-promo-agent-bubble--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

body:not(.wholesale-portal-body) .k-promo-agent-avatar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-agent-bubble--user .k-promo-agent-avatar {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-agent-msg {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.02em;
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    word-break: break-word;
    white-space: pre-wrap;
}

body:not(.wholesale-portal-body) .k-promo-agent-bubble--user .k-promo-agent-msg {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-agent-msg--system {
    background: transparent;
    color: var(--gp-muted-foreground);
    border: 0;
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

/* 28.11 — Theme agent step section (the multi-step "Direction /
 *         Features / Template / Agent" UI). */

body:not(.wholesale-portal-body) .k-promo-design-step {
    display: none;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-design-step--active { display: block; }

body:not(.wholesale-portal-body) .k-promo-design-card {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
    padding: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-design-card--center {
    align-items: stretch;
}

body:not(.wholesale-portal-body) .k-promo-design-stepbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    padding-bottom: var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-design-section {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-design-section h2 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.125rem;
}

body:not(.wholesale-portal-body) .k-promo-design-section h3 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
    font-size: 0.875rem;
}

body:not(.wholesale-portal-body) .k-promo-design-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-design-tag {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: 0.5rem 0.75rem;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-design-tag:hover,
body:not(.wholesale-portal-body) .k-promo-design-tag.is-selected {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-design-tag:disabled {
    opacity: 0.55;
    cursor: default;
}

body:not(.wholesale-portal-body) .k-promo-design-input-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-design-input-block label {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-design-text-input {
    width: 100%;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    font-family: inherit;
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 2.5rem;
}

body:not(.wholesale-portal-body) .k-promo-design-text-input:focus {
    border-color: var(--gp-accent);
    outline: none;
}

body:not(.wholesale-portal-body) .k-promo-design-grow-textarea { overflow: hidden; }

body:not(.wholesale-portal-body) .k-promo-design-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    margin-top: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-design-feature-block {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-design-image-section {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    padding: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-design-media-target {
    display: block;
    min-height: 6rem;
    width: 100%;
}

body:not(.wholesale-portal-body) .k-promo-design-loading,
body:not(.wholesale-portal-body) .k-promo-design-empty {
    padding: var(--gp-sp-3);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    text-align: center;
    border: var(--gp-border-w-thin) dashed var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-design-template-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}

body:not(.wholesale-portal-body) .k-promo-design-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-design-template-card {
    display: flex;
    flex-direction: column;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    overflow: hidden;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-design-template-card:hover,
body:not(.wholesale-portal-body) .k-promo-design-template-card.is-selected {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-design-template-card__preview {
    aspect-ratio: 4 / 3;
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-design-template-card__body {
    padding: var(--gp-sp-2) var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-design-template-card__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
    color: inherit;
}

body:not(.wholesale-portal-body) .k-promo-design-template-card__meta {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    margin-top: 0.2rem;
}

body:not(.wholesale-portal-body) .k-promo-design-template-card:hover .k-promo-design-template-card__meta,
body:not(.wholesale-portal-body) .k-promo-design-template-card.is-selected .k-promo-design-template-card__meta { color: inherit; }

body:not(.wholesale-portal-body) .k-promo-design-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-design-filter-btn {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: 0.3rem 0.6rem;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    cursor: pointer;
}

body:not(.wholesale-portal-body) .k-promo-design-filter-btn:hover,
body:not(.wholesale-portal-body) .k-promo-design-filter-btn.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-design-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--gp-sp-2);
    width: 100%;
}

body:not(.wholesale-portal-body) .k-promo-design-media-option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: var(--gp-sp-2);
    cursor: pointer;
    text-align: left;
    font-family: var(--gp-font-display);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-design-media-option:hover,
body:not(.wholesale-portal-body) .k-promo-design-media-option.is-selected {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-design-media-frame {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--gp-muted);
    overflow: hidden;
}

body:not(.wholesale-portal-body) .k-promo-design-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body:not(.wholesale-portal-body) .k-promo-design-media-title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-design-media-meta {
    font-size: 0.625rem;
    color: var(--gp-muted-foreground);
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-design-media-option:hover .k-promo-design-media-meta,
body:not(.wholesale-portal-body) .k-promo-design-media-option.is-selected .k-promo-design-media-meta { color: inherit; }

body:not(.wholesale-portal-body) .k-promo-design-load-more {
    margin: var(--gp-sp-3) auto 0;
    display: block;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-design-gif-groups {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-design-gif-group {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-design-gif-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding-bottom: var(--gp-sp-2);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-design-gif-group-head h4 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
    font-size: 0.875rem;
}

body:not(.wholesale-portal-body) .k-promo-design-gif-group-head span {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-design-primary {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 28.12 — GIFs library + templates topbar + main shells. */

body:not(.wholesale-portal-body) .k-promo-gifs-shell,
body:not(.wholesale-portal-body) .k-promo-templates-shell {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-gifs-topbar,
body:not(.wholesale-portal-body) .k-promo-templates-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    padding: var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-gifs-topbar h1,
body:not(.wholesale-portal-body) .k-promo-templates-topbar h1 {
    margin: 0.2rem 0 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.5rem;
    line-height: 1.05;
}

body:not(.wholesale-portal-body) .k-promo-gifs-kicker,
body:not(.wholesale-portal-body) .k-promo-templates-kicker {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

body:not(.wholesale-portal-body) .k-promo-gifs-panel,
body:not(.wholesale-portal-body) .k-promo-templates-panel {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-gifs-panel .k-card__header,
body:not(.wholesale-portal-body) .k-promo-templates-panel .k-card__header {
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-gifs-panel .k-card__body,
body:not(.wholesale-portal-body) .k-promo-templates-panel .k-card__body { padding: var(--gp-sp-4); }

body:not(.wholesale-portal-body) .k-promo-gifs-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 58px;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    overflow: hidden;
}

body:not(.wholesale-portal-body) .k-promo-gifs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body:not(.wholesale-portal-body) .k-promo-gifs-url {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-gifs-swatches {
    display: inline-flex;
    gap: 0.35rem;
}

body:not(.wholesale-portal-body) .k-promo-gifs-swatches span {
    width: 1.1rem;
    height: 1.1rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    display: inline-block;
}

body:not(.wholesale-portal-body) .k-promo-template-code {
    font-size: 0.8125rem;
    min-height: 260px;
}

body:not(.wholesale-portal-body) .k-promo-template-tab-info {
    padding: 0.55rem 0.65rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-bottom: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-template-tab-info code {
    background: var(--gp-bg);
    color: var(--gp-fg);
    padding: 0.05rem 0.3rem;
    font-family: var(--gp-font-mono);
}

body:not(.wholesale-portal-body) .k-promo-template-preview-box {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    overflow: hidden;
}

body:not(.wholesale-portal-body) .k-promo-template-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-template-preview-head h2 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
    font-size: 0.875rem;
}

body:not(.wholesale-portal-body) #promo-template-preview-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 160px;
}

body:not(.wholesale-portal-body) .k-promo-template-description {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.wholesale-portal-body) .k-promo-templates-panel .btn-group,
body:not(.wholesale-portal-body) .k-promo-gifs-panel .btn-group { display: inline-flex; }

body:not(.wholesale-portal-body) .k-promo-templates-panel .btn-group form,
body:not(.wholesale-portal-body) .k-promo-gifs-panel .btn-group form { display: inline-flex; }

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-promo-gifs-topbar,
    body:not(.wholesale-portal-body) .k-promo-templates-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 28.13 — Launch log hierarchy + narrow-screen record layout. */

body:not(.wholesale-portal-body) .k-promo-launch-table {
    table-layout: fixed;
}

body:not(.wholesale-portal-body) .k-promo-launch-table th:nth-child(1) { width: 8rem; }
body:not(.wholesale-portal-body) .k-promo-launch-table th:nth-child(2) { width: 9rem; }
body:not(.wholesale-portal-body) .k-promo-launch-table th:nth-child(3) { width: 5.5rem; }
body:not(.wholesale-portal-body) .k-promo-launch-table th:nth-child(4) { width: 8rem; }
body:not(.wholesale-portal-body) .k-promo-launch-table th:nth-child(5) { width: 11rem; }

body:not(.wholesale-portal-body) .k-promo-launch-time {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-launch-action {
    color: var(--gp-fg);
    font-weight: 700;
}

body:not(.wholesale-portal-body) .k-promo-launch-status-cell {
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-launch-status-cell i {
    margin-right: 0.3rem;
}

body:not(.wholesale-portal-body) .k-promo-launch-status--success { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-promo-launch-status--partial { color: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-promo-launch-status--failed  { color: var(--gp-danger); }

body:not(.wholesale-portal-body) .k-promo-launch-counts {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gp-sp-1) var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-launch-count-ok    { color: var(--gp-success); font-weight: 700; }
body:not(.wholesale-portal-body) .k-promo-launch-count-fail  { color: var(--gp-danger); font-weight: 700; }
body:not(.wholesale-portal-body) .k-promo-launch-count-total { color: var(--gp-muted-foreground); }

body:not(.wholesale-portal-body) .k-promo-launch-errors {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    color: var(--gp-danger);
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: help;
}

body:not(.wholesale-portal-body) .k-promo-launch-errors i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

body:not(.wholesale-portal-body) .k-promo-launch-errors span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-launch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gp-sp-1);
    text-align: center;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-6) var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-launch-empty i {
    color: var(--gp-fg);
    font-size: 1.5rem;
}

body:not(.wholesale-portal-body) .k-promo-launch-empty strong {
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body:not(.wholesale-portal-body) .k-promo-launch-empty small {
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-promo-launch-wrap {
        overflow: visible;
        border: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table,
    body:not(.wholesale-portal-body) .k-promo-launch-table tbody {
        display: block;
        width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table thead {
        display: none;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody {
        display: grid;
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gp-sp-3) var(--gp-sp-4);
        padding: var(--gp-sp-4);
        border: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody .k-promo-launch-row--success { border-left-color: var(--gp-success); }
    body:not(.wholesale-portal-body) .k-promo-launch-table tbody .k-promo-launch-row--partial { border-left-color: var(--gp-warning); }
    body:not(.wholesale-portal-body) .k-promo-launch-table tbody .k-promo-launch-row--failed  { border-left-color: var(--gp-danger); }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        white-space: normal;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-action {
        grid-column: 1;
        grid-row: 1;
        font-size: 1rem;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-status-cell {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-time {
        grid-column: 1;
        grid-row: 2;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-by {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-variants,
    body:not(.wholesale-portal-body) .k-promo-launch-error-cell {
        grid-column: 1 / -1;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-variants {
        grid-row: 3;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-error-cell {
        grid-row: 4;
        padding-top: var(--gp-sp-3);
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
    }

    body:not(.wholesale-portal-body) .k-promo-launch-table tbody .k-promo-launch-error-cell--empty {
        display: none;
    }

    body:not(.wholesale-portal-body) .k-promo-launch-errors {
        max-width: none;
    }
}

/* 28.14 — Settings page sections. The page is a vertical stack of
 *         `k-card` panels with a sticky save button at the bottom. */

body:not(.wholesale-portal-body) .k-promo-settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-settings-section {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-settings-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-settings-section__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 0.9375rem;
}

body:not(.wholesale-portal-body) .k-promo-settings-section__body {
    padding: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-settings-section__desc {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    margin-top: 0.2rem;
}

body:not(.wholesale-portal-body) .k-promo-settings-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
}

body:not(.wholesale-portal-body) .k-promo-settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-promo-settings-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-settings-meta__count {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    text-align: right;
}

body:not(.wholesale-portal-body) .k-promo-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    padding: var(--gp-sp-3) 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-settings-row:last-child { border-bottom: 0; }

body:not(.wholesale-portal-body) .k-promo-settings-row__body { flex: 1 1 auto; min-width: 0; }
body:not(.wholesale-portal-body) .k-promo-settings-row__title { font-weight: 700; }
body:not(.wholesale-portal-body) .k-promo-settings-row__desc  { color: var(--gp-muted-foreground); font-size: 0.8125rem; margin-top: 0.2rem; }

/* 28.15 — Lightning deal queue / exclusions / search. */

body:not(.wholesale-portal-body) .k-promo-lightning {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
    margin-top: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin-left: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove:hover {
    color: var(--gp-danger);
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove:focus-visible {
    color: var(--gp-danger);
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove:disabled {
    cursor: wait;
    opacity: 0.55;
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove {
        width: 2.75rem;
        height: 2.75rem;
    }
}

body:not(.wholesale-portal-body) .k-promo-lightning-exclusions-empty {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue {
    display: flex;
    flex-direction: column;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    padding: var(--gp-sp-4);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__summary {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--gp-sp-3);
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__metric-label {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__metric-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__metric-value strong {
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1.5rem;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__state {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    padding: 0.25rem 0.5rem;
    border: var(--gp-border-w-thin) solid currentColor;
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__state--ready { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-promo-lightning-queue__state--partial { color: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-promo-lightning-queue__state--empty { color: var(--gp-muted-foreground); }

body:not(.wholesale-portal-body) .k-promo-lightning-queue__track {
    height: 0.375rem;
    overflow: hidden;
    background: var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__track-fill {
    display: block;
    height: 100%;
    background: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue--ready .k-promo-lightning-queue__track-fill {
    background: var(--gp-success);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue--partial .k-promo-lightning-queue__track-fill {
    background: var(--gp-warning);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__list {
    counter-reset: promo-lightning-queue;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__list li {
    counter-increment: promo-lightning-queue;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gp-sp-3);
    min-width: 0;
    min-height: 3.5rem;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__list li::before {
    content: counter(promo-lightning-queue, decimal-leading-zero);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__list li:last-child { border-bottom: 0; }

body:not(.wholesale-portal-body) .k-promo-lightning-queue__title {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__list .k-promo-lightning-queue__weight {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__weight-label {
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__weight-value {
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-variant-numeric: tabular-nums;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-5) var(--gp-sp-4);
    background: #111113;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__empty > i {
    flex: 0 0 auto;
    color: var(--gp-muted-foreground);
    font-size: 1.125rem;
    line-height: 1.2;
}

body:not(.wholesale-portal-body) .k-promo-lightning-queue__empty strong {
    display: block;
    margin-bottom: var(--gp-sp-1);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-promo-lightning-queue__head {
        align-items: stretch;
        flex-direction: column;
        gap: var(--gp-sp-3);
        padding: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-queue__summary {
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gp-sp-2) var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-queue__head .k-btn {
        justify-content: center;
        width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-queue__list li {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: var(--gp-sp-2) var(--gp-sp-3);
        min-height: 0;
        padding: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-queue__weight {
        grid-column: 2;
        justify-self: start;
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-queue__empty {
        padding: var(--gp-sp-4) var(--gp-sp-3);
    }
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    margin-top: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gp-sp-3);
    min-width: 0;
    min-height: 3.5rem;
    padding: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__identity {
    display: grid;
    flex: 1 1 auto;
    gap: 0.15rem;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__title {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__handle {
    min-width: 0;
    overflow: hidden;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--gp-sp-1);
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Only the Promotion List title needs a second row for its action on phones. */
@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .kinetic-page-title:has(.k-promo-list-title-action) {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .kinetic-page-title:has(.k-promo-list-title-action) .kinetic-page-title__action {
        align-self: flex-start;
        padding-left: var(--k-page-gutter);
    }
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:hover,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--gp-accent);
    outline-offset: -2px;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:hover .k-promo-lightning-product-search-result__title,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:hover .k-promo-lightning-product-search-result__handle,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:hover .k-promo-lightning-product-search-result__action,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:focus-visible .k-promo-lightning-product-search-result__title,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:focus-visible .k-promo-lightning-product-search-result__handle,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result:focus-visible .k-promo-lightning-product-search-result__action {
    color: var(--gp-accent-fg);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    padding: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty strong,
body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty small {
    display: block;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty strong {
    margin-bottom: 0.15rem;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-lightning-product-search-empty small {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-promo-lightning-product-search-results {
        gap: var(--gp-sp-1);
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result {
        align-items: center;
        gap: var(--gp-sp-2);
        min-height: 3.25rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__handle {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result__action {
        align-self: center;
    }
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions,
body:not(.wholesale-portal-body) .k-promo-variant-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--gp-success);
    font-size: 1rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty strong,
body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty small {
    display: block;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty strong {
    margin-bottom: 0.15rem;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusions-empty small {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    min-height: 3.5rem;
    padding: 0.55rem 0.75rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion__identity {
    display: grid;
    flex: 1 1 auto;
    gap: 0.1rem;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion__title {
    color: var(--gp-fg);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 3.25rem;
    padding: 0.6rem 0.75rem;
    list-style: none;
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    cursor: pointer;
    transition: background-color var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__title::-webkit-details-marker {
    display: none;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__title:hover {
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__title:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--gp-accent);
    outline-offset: -2px;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__identity {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__identity strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__meta {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__chevron {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    transform: rotate(0deg);
    transition: transform var(--gp-dur-fast) var(--gp-ease),
                color var(--gp-dur-fast) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group[open] > .k-promo-variant-exclusion-group__title .k-promo-variant-exclusion-group__chevron {
    color: var(--gp-accent);
    transform: rotate(180deg);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group .k-promo-variant-exclusion {
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    padding-left: calc(0.75rem + var(--gp-sp-3));
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group .k-promo-variant-exclusion:last-child {
    border-bottom: 0;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion small,
body:not(.wholesale-portal-body) .k-promo-variant-family small {
    display: block;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion small {
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion .k-promo-variant-exclusion__remove {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 1.125rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion .k-promo-variant-exclusion__remove:hover {
    border-color: var(--gp-danger);
}

body:not(.wholesale-portal-body) .k-promo-variant-exclusion .k-promo-variant-exclusion__remove:focus-visible {
    color: var(--gp-danger);
    border-color: var(--gp-accent);
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}

body:not(.wholesale-portal-body) #promo-variant-exclusion-search-input::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 0.78;
}

body:not(.wholesale-portal-body) .k-promo-variant-search-results {
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-promo-variant-search-results__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: 0.55rem 0.7rem;
    border-left: var(--gp-border-w) solid var(--gp-accent);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-search-results__summary strong {
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-family {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gp-sp-3);
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-fg);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product {
    min-height: 3.75rem;
    border-bottom: 0;
    background: var(--gp-muted);
    font-family: var(--gp-font-display);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__identity {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product strong,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant-title {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product strong {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__meta {
    min-width: 0;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-1);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants {
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    list-style: none;
    background: var(--gp-bg);
    color: var(--gp-muted-foreground);
    cursor: pointer;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants-summary::-webkit-details-marker {
    display: none;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants[open] > .k-promo-variant-family__variants-summary {
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants-label,
body:not(.wholesale-portal-body) .k-promo-variant-family__variants-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants-meta {
    font-family: var(--gp-font-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__chevron {
    transform: rotate(0deg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants[open] .k-promo-variant-family__chevron {
    transform: rotate(180deg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variant {
    padding-left: calc(0.75rem + var(--gp-sp-3));
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variant:last-child {
    border-bottom: 0;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product:not(:disabled):hover,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant:not(:disabled):hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product:not(:disabled):hover .k-promo-variant-family__meta,
body:not(.wholesale-portal-body) .k-promo-variant-family__product:not(:disabled):hover .k-promo-variant-family__action,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant:not(:disabled):hover .k-promo-variant-family__meta,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant:not(:disabled):hover .k-promo-variant-family__action {
    color: var(--gp-accent-fg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__variants-summary:hover {
    background: #111113;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product:focus-visible,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant:focus-visible,
body:not(.wholesale-portal-body) .k-promo-variant-family__variants-summary:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--gp-accent);
    outline-offset: -2px;
}

body:not(.wholesale-portal-body) .k-promo-variant-family__product:disabled,
body:not(.wholesale-portal-body) .k-promo-variant-family__variant:disabled {
    cursor: default;
    opacity: 0.55;
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-variant-search-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-promo-variant-search-empty > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--gp-fg);
}

body:not(.wholesale-portal-body) .k-promo-variant-search-empty strong,
body:not(.wholesale-portal-body) .k-promo-variant-search-empty small {
    display: block;
}

body:not(.wholesale-portal-body) .k-promo-variant-search-empty strong {
    margin-bottom: 0.15rem;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-variant-search-empty small {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group__title {
        min-height: 3.5rem;
        padding: 0.65rem 0.75rem;
    }

    body:not(.wholesale-portal-body) .k-promo-variant-exclusion-group .k-promo-variant-exclusion {
        padding-left: 0.75rem;
    }

    body:not(.wholesale-portal-body) .k-promo-variant-exclusion .k-promo-variant-exclusion__remove {
        width: 2.75rem;
        height: 2.75rem;
    }

    body:not(.wholesale-portal-body) .k-promo-variant-search-results__summary {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--gp-sp-1);
    }

    body:not(.wholesale-portal-body) .k-promo-variant-family__product,
    body:not(.wholesale-portal-body) .k-promo-variant-family__variant {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gp-sp-2);
    }

    body:not(.wholesale-portal-body) .k-promo-variant-family__variant {
        padding-left: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-variant-family__variants-meta {
        white-space: normal;
    }
}

/* 28.16 — Newsletter slot cards (create_newsletter.php).
 * Flex-wrap is intentional: this fragment also renders inside the Promotions
 * drawer, where viewport-based columns can become too narrow. */

body:not(.wholesale-portal-body) .k-promo-newsletter-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-newsletter-slot {
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gp-sp-3);
    min-width: 0;
    max-width: 28rem;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    height: auto;
    padding: var(--gp-sp-5);
    text-align: left;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-slot__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.8rem;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    line-height: 1.1;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-slot__eyebrow--primary  { color: var(--gp-info);     border-color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-promo-newsletter-slot__eyebrow--success  { color: var(--gp-success);  border-color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-promo-newsletter-slot__eyebrow--danger   { color: var(--gp-danger);   border-color: var(--gp-danger); }

body:not(.wholesale-portal-body) .k-promo-newsletter-slot__desc {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
    flex: 1 1 auto;
}

/* The slot's flex gap owns vertical rhythm; avoid stacking the global
 * `.k-field` form-section margin on top of it. */
body:not(.wholesale-portal-body) .k-promo-newsletter-slot > .k-field {
    margin-bottom: 0;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-slot__hint {
    width: 100%;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    padding-top: var(--gp-sp-3);
    border-top: 1px solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-promo-newsletter-slot__hint em {
    display: block;
    margin-top: 0.2rem;
    color: var(--gp-fg);
    font-style: normal;
    font-family: var(--gp-font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--gp-sp-4);
}

body:not(.wholesale-portal-body) .k-promo-newsletter-page-header h2 {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-page-header p {
    margin: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
}

body:not(.wholesale-portal-body) .k-promo-newsletter-feedback { margin-top: var(--gp-sp-4); }

@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-promo-newsletter-slot {
        flex-basis: 100%;
        max-width: 44rem;
    }
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-promo-newsletter-slots {
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-newsletter-slot {
        flex-basis: 100%;
        max-width: none;
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-newsletter-slot__hint {
        padding-top: var(--gp-sp-2);
    }

    body:not(.wholesale-portal-body) .k-promo-newsletter-page-header {
        margin-bottom: var(--gp-sp-3);
    }
}

/* 28.17 — Price preview table hierarchy + narrow-screen record layout. */

body:not(.wholesale-portal-body) .k-promo-price-issues ul {
    margin: var(--gp-sp-2) 0 0;
    padding-left: var(--gp-sp-5);
}

body:not(.wholesale-portal-body) .k-promo-price-table .k-promo-price-product {
    min-width: 12rem;
}

body:not(.wholesale-portal-body) .k-promo-price-variant {
    display: block;
    color: var(--gp-fg);
    font-size: 0.8125rem;
    line-height: 1.35;
}

body:not(.wholesale-portal-body) .k-promo-price-sku {
    display: block;
    margin-top: 0.15rem;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-price-before,
body:not(.wholesale-portal-body) .k-promo-price-after,
body:not(.wholesale-portal-body) .k-promo-price-discount {
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

body:not(.wholesale-portal-body) .k-promo-price-before {
    color: var(--gp-muted-foreground);
    text-decoration: line-through;
}
body:not(.wholesale-portal-body) .k-promo-price-after  { color: var(--gp-success); font-weight: 700; }
body:not(.wholesale-portal-body) .k-promo-price-discount { color: var(--gp-fg); }

body:not(.wholesale-portal-body) .k-promo-price-discount-value {
    display: block;
    font-weight: 700;
}

body:not(.wholesale-portal-body) .k-promo-price-discount-pct {
    display: block;
    margin-top: 0.15rem;
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
}

body:not(.wholesale-portal-body) .k-promo-price-rule {
    max-width: 20rem;
    color: var(--gp-muted-foreground);
    vertical-align: top;
}

body:not(.wholesale-portal-body) .k-promo-price-rule-text {
    display: inline;
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body:not(.wholesale-portal-body) .k-promo-price-empty {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    padding: var(--gp-sp-2) 0;
}

body:not(.wholesale-portal-body) .k-promo-price-warning-row td { background: var(--gp-muted); }
body:not(.wholesale-portal-body) .k-promo-price-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-1);
    margin-top: var(--gp-sp-2);
    color: var(--gp-danger);
    font-size: 0.75rem;
    line-height: 1.35;
}

body:not(.wholesale-portal-body) .k-promo-price-warning .k-badge {
    flex: 0 0 auto;
    margin-top: 0.05rem;
}

body:not(.wholesale-portal-body) .k-promo-price-warning strong {
    color: inherit;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.wholesale-portal-body) .k-promo-price-summary {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-promo-price-wrap {
        overflow: visible;
        border: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table,
    body:not(.wholesale-portal-body) .k-promo-price-table tbody,
    body:not(.wholesale-portal-body) .k-promo-price-table tfoot {
        display: block;
        width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table thead {
        display: none;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tbody {
        display: grid;
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gp-sp-2) var(--gp-sp-3);
        padding: var(--gp-sp-3);
        border: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tbody tr.k-promo-price-warning-row {
        background: var(--gp-muted);
        border-color: var(--gp-danger);
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        white-space: normal;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    body:not(.wholesale-portal-body) .k-promo-price-product::before {
        display: none;
    }

    body:not(.wholesale-portal-body) .k-promo-price-product,
    body:not(.wholesale-portal-body) .k-promo-price-variant-cell,
    body:not(.wholesale-portal-body) .k-promo-price-discount,
    body:not(.wholesale-portal-body) .k-promo-price-rule {
        grid-column: 1 / -1;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table .k-promo-price-product {
        min-width: 0;
        font-size: 1rem;
    }

    body:not(.wholesale-portal-body) .k-promo-price-after {
        font-size: 1rem;
    }

    body:not(.wholesale-portal-body) .k-promo-price-rule {
        max-width: none;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tfoot {
        margin-top: var(--gp-sp-3);
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tfoot tr,
    body:not(.wholesale-portal-body) .k-promo-price-table tfoot td {
        display: block;
        width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-price-table tfoot td {
        padding: var(--gp-sp-3) 0 0;
        border: 0;
    }
}

@media (max-width: 420px) {
    body:not(.wholesale-portal-body) .k-promo-price-table tbody tr {
        column-gap: var(--gp-sp-2);
    }
}

/* 28.18 — List view (apps/promotions/views/list.php) helper
 *         classes — the list table reuses `.k-table` + `.k-table--zebra`
 *         but a few utility classes round out the chrome. */

body:not(.wholesale-portal-body) .k-promo-list {
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-promo-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}

body:not(.wholesale-portal-body) .k-promo-list__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.125rem;
}

body:not(.wholesale-portal-body) .k-promo-list__sub {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    margin-top: 0.2rem;
}

body:not(.wholesale-portal-body) .k-promo-list__title-group { min-width: 0; }

body:not(.wholesale-portal-body) .k-promo-list__empty {
    padding: var(--gp-sp-6) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    text-align: center;
    font-size: 0.875rem;
}

body:not(.wholesale-portal-body) .k-promo-list__link {
    color: var(--gp-fg);
    font-weight: 600;
    text-decoration: none;
}

body:not(.wholesale-portal-body) .k-promo-list__link:hover {
    color: var(--gp-accent);
    text-decoration: none;
}

/* Switch to the scan-friendly record layout before six desktop columns become cramped. */
@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-promo-list .k-table-wrap {
        overflow: visible;
        border: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-list__table,
    body:not(.wholesale-portal-body) .k-promo-list__table tbody {
        display: block;
        width: 100%;
    }

    body:not(.wholesale-portal-body) .k-promo-list__table thead {
        display: none;
    }

    body:not(.wholesale-portal-body) .k-promo-list__table tbody {
        display: grid;
        gap: var(--gp-sp-3);
    }

    body:not(.wholesale-portal-body) .k-promo-list__table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gp-sp-3) var(--gp-sp-4);
        padding: var(--gp-sp-4);
        border: var(--gp-border-w) solid var(--gp-border);
    }

    body:not(.wholesale-portal-body) .k-promo-list__table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-list__status,
    body:not(.wholesale-portal-body) .k-promo-list__actions {
        justify-self: end;
    }

    body:not(.wholesale-portal-body) .k-promo-list__table td.k-promo-list__actions {
        width: auto;
        padding-right: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-list__status {
        margin-left: var(--gp-sp-2);
    }

    body:not(.wholesale-portal-body) .k-promo-list__meta,
    body:not(.wholesale-portal-body) .k-promo-list__rules {
        margin-top: 0;
    }

    body:not(.wholesale-portal-body) .k-promo-list__meta::before,
    body:not(.wholesale-portal-body) .k-promo-list__rules::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-fg);
        font-family: var(--gp-font-display);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    body:not(.wholesale-portal-body) .k-promo-list__rules {
        align-self: end;
    }

    body:not(.wholesale-portal-body) .k-promo-list__actions {
        align-self: end;
    }
}

/* 28.19 — Reduced-motion guard for the Phase 11 surface. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-promo-cal-cell,
    body:not(.wholesale-portal-body) .k-promo-cal-chip,
    body:not(.wholesale-portal-body) .k-promo-action-tile,
    body:not(.wholesale-portal-body) .k-promo-design-tag,
    body:not(.wholesale-portal-body) .k-promo-design-filter-btn,
    body:not(.wholesale-portal-body) .k-promo-design-media-option,
    body:not(.wholesale-portal-body) .k-promo-design-template-card,
    body:not(.wholesale-portal-body) .k-promo-help-toggle,
    body:not(.wholesale-portal-body) .k-promo-agent-send,
    body:not(.wholesale-portal-body) .k-promo-lightning-product-search-result,
    body:not(.wholesale-portal-body) .k-promo-lightning-exclusion-chip__remove,
    body:not(.wholesale-portal-body) .k-promo-agent-working-file button {
        transition: none;
    }
}

/* ---- 29. Newsletter creator (Phase 12) ------------------------------- */

/* Newsletter list view shell. */

body:not(.wholesale-portal-body) .k-nl-list {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-nl-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-list__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1.125rem;
}
body:not(.wholesale-portal-body) .k-nl-list__sub {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    margin-top: 0.2rem;
}
body:not(.wholesale-portal-body) .k-nl-list__empty {
    padding: var(--gp-sp-6) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    text-align: center;
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-nl-list__link {
    color: var(--gp-fg);
    font-weight: 600;
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-list__link:hover {
    color: var(--gp-accent);
    text-decoration: none;
}

/* Newsletter dashboard nav (Calendar / All / Subscribers / Settings). */

body:not(.wholesale-portal-body) .k-nl-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-page-structure-v2 .k-page-section > .k-nl-nav {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-nl-nav__group {
    display: inline-flex;
    border: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.75rem;
    padding: 0 var(--gp-sp-4);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-right: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-nav__link:last-child { border-right: 0; }
body:not(.wholesale-portal-body) .k-nl-nav__link:hover {
    background: var(--gp-muted);
    color: var(--gp-fg);
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-nav__link.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

/* Calendar grid. */

body:not(.wholesale-portal-body) .k-nl-cal {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-nl-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-cal__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-nl-cal__month {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--gp-fg);
    font-size: 1rem;
    margin: 0 var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-cal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
body:not(.wholesale-portal-body) .k-nl-cal__legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--gp-border-w-thin) solid currentColor;
}
body:not(.wholesale-portal-body) .k-nl-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-cal-cell {
    background: var(--gp-bg);
    min-height: 7rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    vertical-align: top;
    border-right: var(--gp-border-w-thin) solid var(--gp-border);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    position: relative;
    transition: background-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-cal-cell:nth-child(7n) { border-right: 0; }
body:not(.wholesale-portal-body) .k-nl-cal-cell--today {
    background: var(--gp-muted);
    border-left: 4px solid var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-nl-cal-cell--blank {
    background: var(--gp-muted);
    opacity: 0.4;
}
body:not(.wholesale-portal-body) .k-nl-cal-cell--gap {
    outline: 2px dashed var(--gp-info);
    outline-offset: -2px;
}
body:not(.wholesale-portal-body) .k-nl-cal-cell:hover {
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-cal-cell--today:hover { background: var(--gp-muted); }
body:not(.wholesale-portal-body) .k-nl-cal-day-num {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    margin-bottom: 0.25rem;
    font-family: var(--gp-font-display);
    font-weight: 500;
}
body:not(.wholesale-portal-body) .k-nl-cal-day-num--today {
    font-weight: 700;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-cal-chip {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    background: var(--gp-bg);
    transition: background-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-cal-chip:hover {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-promo-bar {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--gp-warning);
    color: var(--gp-warning-fg);
    border-left: 3px solid var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-nl-cal-add {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-cal-add:hover {
    color: var(--gp-fg);
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-cal-gap-hint {
    display: block;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    color: var(--gp-info);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Calendar modal (type picker). */

body:not(.wholesale-portal-body) .k-nl-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-modal.is-open { display: flex; }
body:not(.wholesale-portal-body) .k-nl-modal__panel {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    width: 100%;
    max-width: min(95vw, 32rem);
    padding: var(--gp-sp-8) clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
}
body:not(.wholesale-portal-body) .k-nl-modal__close {
    position: absolute;
    top: var(--gp-sp-3);
    right: var(--gp-sp-3);
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-modal__close:hover {
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-modal__body { padding-top: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-modal__panel--wide {
    max-width: min(95vw, 40rem);
    padding: var(--gp-sp-10) clamp(1.5rem, 3vw, 2.5rem) var(--gp-sp-8);
}

/* Select Item modal — live product search picker. */

body:not(.wholesale-portal-body) .k-nl-select-item__head {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.125rem;
    margin: 0 0 var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-select-item__sub {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    margin: 0 0 var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-select-item__form { margin: 0; }
body:not(.wholesale-portal-body) .k-nl-select-item__search-row {
    position: relative;
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-select-item__search-row .k-input--search {
    width: 100%;
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    padding-left: 3rem;
}
body:not(.wholesale-portal-body) .k-nl-select-item__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gp-muted-foreground);
    pointer-events: none;
    font-size: 1rem;
}
body:not(.wholesale-portal-body) .k-nl-select-item__search-row .k-input--search:focus {
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-nl-select-item__results {
    max-height: 22rem;
    overflow-y: auto;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-select-item__hint,
body:not(.wholesale-portal-body) .k-nl-select-item__empty {
    padding: var(--gp-sp-3);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-nl-select-item__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    width: 100%;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-bg);
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-select-item__result:last-child { border-bottom: 0; }
body:not(.wholesale-portal-body) .k-nl-select-item__result:hover,
body:not(.wholesale-portal-body) .k-nl-select-item__result:focus,
body:not(.wholesale-portal-body) .k-nl-select-item__result:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    outline: none;
}
body:not(.wholesale-portal-body) .k-nl-select-item__result-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-nl-select-item__result-handle {
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    flex: 0 0 auto;
    text-transform: none;
}
body:not(.wholesale-portal-body) .k-nl-select-item__result:hover .k-nl-select-item__result-handle,
body:not(.wholesale-portal-body) .k-nl-select-item__result:focus .k-nl-select-item__result-handle {
    color: var(--gp-accent-fg);
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-nl-select-item__result-title {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.25;
    }

    body:not(.wholesale-portal-body) .k-nl-select-item__result-handle {
        max-width: 100%;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }
}

/* Type picker content (Normal vs Promo). */

body:not(.wholesale-portal-body) .k-nl-picker__intro {
    margin-bottom: var(--gp-sp-4);
    padding-right: var(--gp-sp-8);
}
body:not(.wholesale-portal-body) .k-nl-picker__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-1);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-nl-picker__eyebrow-separator {
    color: var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-picker__head {
    margin: var(--gp-sp-1) 0 0;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-nl-picker__type-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option {
    display: block;
    position: relative;
    text-align: left;
    width: 100%;
    min-height: 5rem;
    padding: var(--gp-sp-4) calc(var(--gp-sp-4) + 2rem) var(--gp-sp-4) var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    color: var(--gp-fg);
    background: var(--gp-bg);
    text-decoration: none;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option:hover,
body:not(.wholesale-portal-body) .k-nl-picker__type-option:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-color: var(--gp-accent);
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option-name {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    display: block;
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option:hover .k-nl-picker__type-option-desc,
body:not(.wholesale-portal-body) .k-nl-picker__type-option:focus-visible .k-nl-picker__type-option-desc {
    color: var(--gp-accent-fg);
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option-arrow {
    position: absolute;
    top: 50%;
    right: var(--gp-sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--gp-muted-foreground);
    font-size: 1rem;
    transform: translateY(-50%);
}
body:not(.wholesale-portal-body) .k-nl-picker__type-option:hover .k-nl-picker__type-option-arrow,
body:not(.wholesale-portal-body) .k-nl-picker__type-option:focus-visible .k-nl-picker__type-option-arrow {
    color: var(--gp-accent-fg);
}
body:not(.wholesale-portal-body) .k-nl-picker__divider {
    border: 0;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    margin: var(--gp-sp-3) 0;
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-divider {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 700;
    margin-bottom: var(--gp-sp-2);
    font-family: var(--gp-font-display);
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-option {
    border-color: var(--gp-warning);
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:hover,
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:focus-visible {
    background: var(--gp-warning);
    color: var(--gp-warning-fg);
    border-color: var(--gp-warning);
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-option-name {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    display: block;
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-option-dates {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:hover .k-nl-picker__promo-option-dates,
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:focus-visible .k-nl-picker__promo-option-dates,
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:hover .k-nl-picker__type-option-arrow,
body:not(.wholesale-portal-body) .k-nl-picker__promo-option:focus-visible .k-nl-picker__type-option-arrow {
    color: var(--gp-warning-fg);
}
body:not(.wholesale-portal-body) .k-nl-picker__empty { color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-nl-picker__actions {
    margin-top: var(--gp-sp-4);
    text-align: right;
}

@media (max-width: 600px) {
    body:not(.wholesale-portal-body) #nl-type-picker-modal .k-nl-modal__panel {
        max-height: calc(100vh - (2 * var(--gp-sp-2)));
        max-height: calc(100dvh - (2 * var(--gp-sp-2)));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--gp-sp-6) var(--gp-sp-4) var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) #nl-type-picker-modal .k-nl-modal__close {
        width: 2.75rem;
        height: 2.75rem;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__intro {
        margin-bottom: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-nl-picker__eyebrow {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__eyebrow-separator {
        display: none;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__head {
        margin-top: var(--gp-sp-2);
        font-size: 1.125rem;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__type-option {
        min-height: 5.25rem;
        padding: var(--gp-sp-3) calc(var(--gp-sp-3) + 2rem) var(--gp-sp-3) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-nl-picker__type-option-name,
    body:not(.wholesale-portal-body) .k-nl-picker__promo-option-name {
        font-size: 0.9375rem;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__type-option-desc,
    body:not(.wholesale-portal-body) .k-nl-picker__promo-option-dates {
        font-size: 0.8125rem;
    }
    body:not(.wholesale-portal-body) .k-nl-picker__type-option-arrow {
        right: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-nl-picker__actions {
        margin-top: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-nl-picker__actions .k-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Editor. */

body:not(.wholesale-portal-body) .k-nl-editor { display: block; }
body:not(.wholesale-portal-body) .k-nl-editor__feedback { margin-bottom: var(--gp-sp-3); }
body:not(.wholesale-portal-body) .k-nl-editor__form { display: block; }
body:not(.wholesale-portal-body) .k-nl-editor__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-nl-editor__row {
        grid-template-columns: 7fr 5fr;
    }
}
body:not(.wholesale-portal-body) .k-nl-editor__col { display: flex; flex-direction: column; }
body:not(.wholesale-portal-body) .k-nl-editor-card {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-editor-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-editor-card__head-title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 0.875rem;
    color: var(--gp-fg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body:not(.wholesale-portal-body) .k-nl-editor-card__body { padding: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-nl-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}

/* Status actions cluster (approve / schedule / cancel). */

body:not(.wholesale-portal-body) .k-nl-status-actions {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-nl-schedule-row {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}

/* Email preview frame. */

body:not(.wholesale-portal-body) .k-nl-preview-wrap {
    display: none;
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-preview-wrap.is-open { display: block; }
body:not(.wholesale-portal-body) .k-nl-preview-frame {
    width: 100%;
    border: 0;
    min-height: 25rem;
    background: var(--gp-bg);
}

/* Send info + nearby promos. */

body:not(.wholesale-portal-body) .k-nl-send-info {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-send-info__row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gp-sp-2) var(--gp-sp-3);
    margin: 0;
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-nl-send-info__label {
    color: var(--gp-muted-foreground);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    font-family: var(--gp-font-display);
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-nl-send-info__value { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-nl-send-info__value--ok    { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-nl-send-info__value--fail  { color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-nl-send-info__meta {
    margin-top: var(--gp-sp-3);
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-send-info__actions { margin-top: var(--gp-sp-2); }

body:not(.wholesale-portal-body) .k-nl-nearby-promo__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-nl-nearby-promo__item {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-nearby-promo__item:last-child { border-bottom: 0; }
body:not(.wholesale-portal-body) .k-nl-nearby-promo__item-name {
    font-weight: 700;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-nl-nearby-promo__item-dates {
    color: var(--gp-muted-foreground);
    margin-top: 0.125rem;
}

/* Generate variants (promo). */

body:not(.wholesale-portal-body) .k-nl-generate-variants {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-generate-variants__head {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-generate-variants__body { padding: var(--gp-sp-4); }

/* Product slot (in editor and as HTMX swap target). */

body:not(.wholesale-portal-body) .k-nl-product-slot {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-product-slot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-product-slot__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--gp-fg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-nl-product-slot__actions { display: flex; gap: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-product-slot__body { padding: var(--gp-sp-3) var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-nl-product-slot__row {
    display: flex;
    gap: var(--gp-sp-3);
    align-items: flex-start;
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-nl-product-slot__col--image { flex: 0 0 auto; }
body:not(.wholesale-portal-body) .k-nl-product-slot__col--fields { flex: 1 1 18rem; }
body:not(.wholesale-portal-body) .k-nl-product-slot__field { margin-bottom: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-product-slot__field:last-child { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-nl-product-slot__empty {
    padding: var(--gp-sp-3) 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}

/* Image slot inside product slot. */

body:not(.wholesale-portal-body) .k-nl-image-slot {
    width: 7rem;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    text-align: center;
}
body:not(.wholesale-portal-body) .k-nl-image-slot__img {
    display: block;
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-nl-image-slot__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
    font-size: 1.5rem;
}
body:not(.wholesale-portal-body) .k-nl-image-slot__replace {
    margin: 0;
    width: 100%;
    justify-content: center;
    gap: var(--gp-sp-1);
    padding-inline: var(--gp-sp-2);
    white-space: nowrap;
}

/* Audit (deliverability) panel. */

body:not(.wholesale-portal-body) .k-nl-audit__head {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-audit__counts {
    display: inline-flex;
    gap: var(--gp-sp-2);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-nl-audit__status-msg {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-audit__group { margin-bottom: var(--gp-sp-3); }
body:not(.wholesale-portal-body) .k-nl-audit__group-head {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    margin-bottom: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-audit__group-title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-audit__finding {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: var(--gp-muted);
    border-left: 3px solid var(--gp-border);
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-audit__finding--error   { border-left-color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-nl-audit__finding--warning { border-left-color: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-nl-audit__finding--info    { border-left-color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-nl-audit__finding-icon { flex: 0 0 auto; margin-top: 0.125rem; }
body:not(.wholesale-portal-body) .k-nl-audit__finding-icon--error   { color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-nl-audit__finding-icon--warning { color: var(--gp-warning); }
body:not(.wholesale-portal-body) .k-nl-audit__finding-icon--info    { color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-nl-audit__finding-title {
    font-weight: 700;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-audit__finding-detail {
    color: var(--gp-muted-foreground);
    margin-top: 0.125rem;
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-nl-audit__spacer { flex: 1 1 auto; }
body:not(.wholesale-portal-body) .k-nl-audit__ok {
    margin-bottom: var(--gp-sp-3);
    color: var(--gp-success);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body:not(.wholesale-portal-body) .k-nl-audit-spamassassin {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    margin-top: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-audit-spamassassin__head {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--gp-font-display);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-audit-spamassassin__body {
    padding: var(--gp-sp-3);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-audit-spamassassin__rules {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-nl-audit-spamassassin__rules th,
body:not(.wholesale-portal-body) .k-nl-audit-spamassassin__rules td {
    padding: 0.25rem 0.5rem;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    text-align: left;
}

/* Settings page. */

body:not(.wholesale-portal-body) .k-nl-settings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-nl-settings { grid-template-columns: 1fr 1fr; }
}
body:not(.wholesale-portal-body) .k-nl-settings__row { display: contents; }
body:not(.wholesale-portal-body) .k-nl-settings__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-nl-settings__form-row { grid-template-columns: 1fr 1fr; }
}
body:not(.wholesale-portal-body) .k-nl-settings__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-settings__switch-row {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    margin-bottom: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-settings__switch-help {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-settings__switch-warning {
    padding: var(--gp-sp-3);
    border-left: 3px solid var(--gp-warning);
    background: var(--gp-muted);
    font-size: 0.8125rem;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-settings__planned {
    border: var(--gp-border-w) dashed var(--gp-border);
    background: var(--gp-muted);
    margin-top: var(--gp-sp-4);
    padding: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-settings__planned-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-nl-settings__planned-row { grid-template-columns: repeat(3, 1fr); }
}
body:not(.wholesale-portal-body) .k-nl-settings__planned-cell {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
    padding: var(--gp-sp-3);
    text-align: center;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-settings__planned-cell-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--gp-muted-foreground);
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-nl-settings__actions .k-btn {
        width: 100%;
    }
    body:not(.wholesale-portal-body) .k-nl-settings__planned-cell {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--gp-sp-1) var(--gp-sp-3);
        text-align: left;
    }
    body:not(.wholesale-portal-body) .k-nl-settings__planned-cell-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}

/* Subscribers page. */

body:not(.wholesale-portal-body) .k-nl-subscribers__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-4);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-nl-subscribers__stats { grid-template-columns: repeat(4, 1fr); }
}
body:not(.wholesale-portal-body) .k-nl-subscribers__stat {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    padding: var(--gp-sp-4);
    text-align: center;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__stat:hover {
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__stat-value {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__stat-label {
    margin-top: 0.25rem;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--gp-font-display);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__action-bar .k-input--search-wrapper { flex: 1 1 18rem; }
body:not(.wholesale-portal-body) .k-nl-subscribers__manual-add {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    margin-bottom: var(--gp-sp-4);
    padding: var(--gp-sp-3) var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__manual-add-form {
    display: flex;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    align-items: flex-end;
}
body:not(.wholesale-portal-body) .k-nl-subscribers__manual-add-form .k-field { margin-bottom: 0; min-width: 12rem; }
body:not(.wholesale-portal-body) .k-nl-subscribers__table-wrap { overflow-x: auto; }
body:not(.wholesale-portal-body) .k-nl-subscribers__empty {
    text-align: center;
    padding: var(--gp-sp-12) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-subscribers__count {
    text-align: center;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    margin-top: var(--gp-sp-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--gp-font-display);
}

/* Subscriber import page. */

body:not(.wholesale-portal-body) .k-nl-import__upload {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-import__upload-head {
    padding: var(--gp-sp-2) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-import__upload-body { padding: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-nl-import__upload-help {
    max-width: 64rem;
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-nl-import__workspace {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--gp-sp-8);
    margin-bottom: var(--gp-sp-8);
    align-items: start;
}
body:not(.wholesale-portal-body) .k-nl-import__setup h2,
body:not(.wholesale-portal-body) .k-nl-import__guide h2 { font-family: var(--gp-font-display); font-size: 1.25rem; margin: 0 0 var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-import__upload-form { display: grid; gap: var(--gp-sp-6); }
body:not(.wholesale-portal-body) .k-nl-import__upload-form .k-field { min-width: 0; margin: 0; }
body:not(.wholesale-portal-body) .k-nl-import__upload-form .k-input,
body:not(.wholesale-portal-body) .k-nl-import__upload-form .k-select { width: 100%; min-width: 0; }
body:not(.wholesale-portal-body) .k-nl-import__field-help { color: var(--gp-muted-foreground); font-size: .8125rem; line-height: 1.5; margin: var(--gp-sp-2) 0 0; }
body:not(.wholesale-portal-body) .k-nl-import__guide { padding-left: var(--gp-sp-8); border-left: var(--gp-border-w-thin) solid var(--gp-border); min-width: 0; }
body:not(.wholesale-portal-body) .k-nl-import__columns { margin: var(--gp-sp-4) 0; }
body:not(.wholesale-portal-body) .k-nl-import__columns > div { padding: var(--gp-sp-3) 0; border-bottom: var(--gp-border-w-thin) solid var(--gp-border); }
body:not(.wholesale-portal-body) .k-nl-import__columns dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-sp-2); font-size: .875rem; }
body:not(.wholesale-portal-body) .k-nl-import__columns dd { color: var(--gp-muted-foreground); margin: var(--gp-sp-2) 0 0; font-size: .8125rem; line-height: 1.6; }
body:not(.wholesale-portal-body) .k-nl-import__example { display: block; overflow-wrap: anywhere; margin-top: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-import__assurance { display: flex; gap: var(--gp-sp-3); margin-top: var(--gp-sp-6); padding: var(--gp-sp-4); background: var(--gp-muted); border-left: var(--gp-border-w) solid var(--gp-success); font-size: .875rem; }
body:not(.wholesale-portal-body) .k-nl-import__assurance > i { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-nl-import__assurance p { margin: var(--gp-sp-1) 0 0; color: var(--gp-muted-foreground); font-size: .8125rem; line-height: 1.5; }
body:not(.wholesale-portal-body) .k-nl-import__sample summary { cursor: pointer; font-weight: 600; font-size: .875rem; }
body:not(.wholesale-portal-body) .k-nl-import__sample pre { overflow-x: auto; padding: var(--gp-sp-3); margin-top: var(--gp-sp-3); background: var(--gp-muted); font-size: .75rem; }
body:not(.wholesale-portal-body) .k-nl-import__notes { margin-top: var(--gp-sp-6); font-size: .8125rem; }
body:not(.wholesale-portal-body) .k-nl-import__notes h3 { font-size: .875rem; }
body:not(.wholesale-portal-body) .k-nl-import__notes ul { padding-left: var(--gp-sp-4); color: var(--gp-muted-foreground); line-height: 1.7; }
body:not(.wholesale-portal-body) .k-nl-import__history-head { border-top: var(--gp-border-w-thin) solid var(--gp-border); padding-top: var(--gp-sp-6); margin-bottom: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-nl-import__history-empty { display: grid; gap: var(--gp-sp-2); border: var(--gp-border-w-thin) dashed var(--gp-border); }
body:not(.wholesale-portal-body) .k-nl-import__history-empty > i { font-size: 1.5rem; }
@media (max-width: 900px) {
    body:not(.wholesale-portal-body) .k-nl-import__workspace { grid-template-columns: minmax(0, 1fr); gap: var(--gp-sp-6); }
    body:not(.wholesale-portal-body) .k-nl-import__guide { border-left: 0; border-top: var(--gp-border-w-thin) solid var(--gp-border); padding: var(--gp-sp-6) 0 0; }
}
body:not(.wholesale-portal-body) .k-nl-import__history-title {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    margin-bottom: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-nl-import__history-empty {
    text-align: center;
    padding: var(--gp-sp-8) var(--gp-sp-4);
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-import__errors {
    background: var(--gp-muted);
    border-left: 3px solid var(--gp-danger);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    font-size: 0.75rem;
    color: var(--gp-fg);
    margin-top: 0.25rem;
}
body:not(.wholesale-portal-body) .k-nl-import__errors-list { margin: 0; padding-left: 1.25rem; }

/* Native disclosures keep import details available without extra routes or scripts. */
body:not(.wholesale-portal-body) .k-nl-import__report { border: var(--gp-border-w-thin) solid var(--gp-border); margin-bottom: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-import__report > summary { display: grid; grid-template-columns: minmax(0, 2fr) auto repeat(4, minmax(0, 1fr)); gap: var(--gp-sp-4); align-items: center; padding: var(--gp-sp-4); cursor: pointer; list-style: none; }
body:not(.wholesale-portal-body) .k-nl-import__report > summary::-webkit-details-marker { display: none; }
body:not(.wholesale-portal-body) .k-nl-import__report > summary:hover { background: var(--gp-muted); }
body:not(.wholesale-portal-body) .k-nl-import__report > summary small { display: block; color: var(--gp-muted-foreground); font-size: .75rem; }
body:not(.wholesale-portal-body) .k-nl-import__report-file { overflow-wrap: anywhere; font-size: .875rem; }
body:not(.wholesale-portal-body) .k-nl-import__report-file i { display: inline-block; margin-right: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-nl-import__report[open] .k-nl-import__report-file i { transform: rotate(90deg); }
body:not(.wholesale-portal-body) .k-nl-import__report-body { border-top: var(--gp-border-w-thin) solid var(--gp-border); padding: var(--gp-sp-4); font-size: .875rem; overflow-wrap: anywhere; }
body:not(.wholesale-portal-body) .k-nl-import__report-body h3 { margin-top: var(--gp-sp-4); font-size: 1rem; }
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-nl-import__report > summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gp-sp-3); }
    body:not(.wholesale-portal-body) .k-nl-import__report-file { grid-column: span 3; }
}

/* Send log fragment. */

body:not(.wholesale-portal-body) .k-nl-send-log__summary {
    display: flex;
    gap: var(--gp-sp-4);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--gp-fg);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-nl-send-log__summary strong { font-weight: 700; }
body:not(.wholesale-portal-body) .k-nl-send-log__summary .k-nl-send-log__count--ok   { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-nl-send-log__summary .k-nl-send-log__count--fail { color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-nl-send-log__row { transition: background-color var(--gp-dur) var(--gp-ease); }
body:not(.wholesale-portal-body) .k-nl-send-log__row:hover { background: var(--gp-muted); }
body:not(.wholesale-portal-body) .k-nl-send-log__empty {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-send-log__error {
    color: var(--gp-danger);
    font-size: 0.75rem;
    padding-left: var(--gp-sp-3);
}

/* Variant picker page. */

body:not(.wholesale-portal-body) .k-nl-variant__intro { margin-bottom: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-nl-variant__intro p { color: var(--gp-muted-foreground); margin-bottom: var(--gp-sp-1); }
body:not(.wholesale-portal-body) .k-nl-variant__subject {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-nl-variant__subject strong { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-nl-variant__feedback { margin-bottom: var(--gp-sp-3); }
body:not(.wholesale-portal-body) .k-nl-variant__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-nl-variant__grid { grid-template-columns: repeat(3, 1fr); }
}
body:not(.wholesale-portal-body) .k-nl-variant__card {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
}
body:not(.wholesale-portal-body) .k-nl-variant__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gp-sp-2) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-nl-variant__card-label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-nl-variant__card-option {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-nl-variant__card-preview {
    height: 26rem;
    overflow: hidden;
    background: var(--gp-muted);
    position: relative;
}
body:not(.wholesale-portal-body) .k-nl-variant__card-preview-frame {
    width: 37.5rem;
    height: 56.25rem;
    border: 0;
    transform: scale(0.55);
    transform-origin: top left;
    pointer-events: none;
}
body:not(.wholesale-portal-body) .k-nl-variant__card-footer {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-top: var(--gp-border-w) solid var(--gp-border);
    margin-top: auto;
}

/* Reduced-motion guard. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-nl-cal-cell,
    body:not(.wholesale-portal-body) .k-nl-cal-chip,
    body:not(.wholesale-portal-body) .k-nl-subscribers__stat,
    body:not(.wholesale-portal-body) .k-nl-product-slot,
    body:not(.wholesale-portal-body) .k-nl-modal__close,
    body:not(.wholesale-portal-body) .k-nl-picker__type-option,
    body:not(.wholesale-portal-body) .k-nl-nav__link {
        transition: none;
    }
}

/* Inline radio/checkbox row (used in settings). */
.k-check-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 3.5rem;
    padding: 0 var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease);
}
.k-check-row:hover { background: var(--gp-muted); }
.k-check-row input.k-radio,
.k-check-row input.k-check { margin: 0; }


/* ---- 30. Phase 13 — Media admin + Media search + Product admin ----
 *
 * Per-tool surface for the media search shell, the product admin
 * hybrid row, the product admin features editor, and the new
 * `k-pa-*` adapter helpers. The shared primitives (`.k-card`,
 * `.k-btn`, `.k-input`, `.k-table`, `.k-alert`, `.k-empty-state`,
 * `.k-tabs`, etc.) are reused wherever possible; the bespoke
 * classes below add the per-tool layout chrome.
 *
 * Every selector is scoped to `body:not(.wholesale-portal-body)` so
 * the wholesale portal (which is excluded from the redesign per
 * Decision 6) is unaffected.
 */

/* 30.1 Media search shell — the page-level `.k-card` that wraps
 *       the search field, the advanced filter panel, and the
 *       result grid + pagination footer. The header row stacks
 *       the eyebrow + heading on the left and the
 *       "Show Advanced / Hide Advanced" toggle on the right. */

body:not(.wholesale-portal-body) .k-ms-shell {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-ms-shell__controls {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-ms-shell__results-section {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-ms-shell__results-section > .k-ms-shell__results {
    padding-right: var(--k-page-gutter);
    padding-left: var(--k-page-gutter);
}
body:not(.wholesale-portal-body) .k-ms-shell__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-ms-shell__primary { min-width: 0; }
body:not(.wholesale-portal-body) .k-ms-shell__heading {
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: var(--gp-sp-1) 0 0 0;
}
body:not(.wholesale-portal-body) .k-ms-shell__advanced-toggle { flex-shrink: 0; }
body:not(.wholesale-portal-body) .k-ms-shell__body { display: flex; flex-direction: column; gap: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-ms-shell__search-field { margin-bottom: 0; }

/* Barcode and inventory signage: product families share one top-aligned identity
 * cell while every Shopify size remains a direct print-template action. */
body:not(.wholesale-portal-body) .k-signage-shell {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-signage-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gp-sp-3);
    width: min(960px, 100%);
    margin: var(--gp-sp-6) auto 0;
}
body:not(.wholesale-portal-body) .k-signage-search {
    width: 100%;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-signage-search__field .k-input {
    min-height: 3.75rem;
    font-size: 1.125rem;
    border-width: 2px;
}
body:not(.wholesale-portal-body) .k-signage-search__field .k-input::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 1;
}
body:not(.wholesale-portal-body) .k-signage-sort .k-seg {
    min-height: 3.75rem;
}
body:not(.wholesale-portal-body) .k-signage-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-signage-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
body:not(.wholesale-portal-body) .k-signage-table th,
body:not(.wholesale-portal-body) .k-signage-table td {
    padding: var(--gp-sp-3);
    border-right: var(--gp-border-w) solid var(--gp-border);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    text-align: center;
}
body:not(.wholesale-portal-body) .k-signage-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-signage-table thead th:first-child {
    min-width: 260px;
    text-align: left;
}
body:not(.wholesale-portal-body) .k-signage-product {
    width: 30%;
    min-width: 260px;
    vertical-align: top;
    text-align: left !important;
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-signage-product__image {
    display: block;
    width: 100%;
    height: 180px;
    margin-bottom: var(--gp-sp-3);
    object-fit: contain;
    object-position: center;
}
body:not(.wholesale-portal-body) .k-signage-product__title,
body:not(.wholesale-portal-body) .k-signage-product__variant,
body:not(.wholesale-portal-body) .k-signage-product__sku-prefix {
    display: block;
}
body:not(.wholesale-portal-body) .k-signage-product__title {
    font-family: var(--gp-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-signage-product__variant {
    margin-top: var(--gp-sp-1);
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-signage-product__sku-prefix {
    margin-top: var(--gp-sp-2);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-signage-size {
    width: 72px;
    font-family: var(--gp-font-display);
    font-size: 1.15rem;
    font-weight: 800;
}
body:not(.wholesale-portal-body) .k-signage-template-cell {
    width: 118px;
    vertical-align: middle;
}
body:not(.wholesale-portal-body) .k-signage-size-row th,
body:not(.wholesale-portal-body) .k-signage-size-row td {
    padding-block: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-signage-size-row .k-signage-size {
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-signage-family-bulk-row > * {
    background: var(--gp-muted);
}
body:not(.wholesale-portal-body) .k-signage-family-bulk-row .k-signage-size {
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-signage-family-bulk-row .k-signage-size::after {
    content: 'All';
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-signage-family-bulk-row:not(:first-child) > * {
        border-top: var(--gp-sp-1) solid var(--gp-bg);
    }
    body:not(.wholesale-portal-body) .k-signage-family-bulk-row:not(:first-child) .k-signage-template-cell::before {
        content: attr(data-template-label);
        display: block;
        margin-bottom: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
    }
}
body:not(.wholesale-portal-body) .k-signage-bulk-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-1);
    min-width: 92px;
    min-height: 34px;
    padding: var(--gp-sp-1) var(--gp-sp-2);
    border: 2px solid var(--gp-info);
    background: var(--gp-info);
    color: var(--gp-info-fg);
    font-family: var(--gp-font-display);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--gp-dur-fast) var(--gp-ease), border-color var(--gp-dur-fast) var(--gp-ease), color var(--gp-dur-fast) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-signage-bulk-download:hover,
body:not(.wholesale-portal-body) .k-signage-bulk-download:focus-visible {
    border-color: var(--gp-fg);
    background: var(--gp-fg);
    color: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-signage-bulk-download.is-disabled {
    border-color: var(--gp-border);
    background: var(--gp-bg);
    color: var(--gp-muted-foreground);
    cursor: not-allowed;
    opacity: 0.55;
}
body:not(.wholesale-portal-body) .k-signage-template {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color var(--gp-dur-fast) var(--gp-ease), color var(--gp-dur-fast) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-signage-template:hover,
body:not(.wholesale-portal-body) .k-signage-template:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}
body:not(.wholesale-portal-body) .k-signage-template--bc {
    width: 68px;
    height: 38px;
}
body:not(.wholesale-portal-body) .k-signage-template--wc,
body:not(.wholesale-portal-body) .k-signage-template--bs {
    width: 68px;
    height: 53px;
}
body:not(.wholesale-portal-body) .k-signage-template--sc {
    width: 41px;
    height: 53px;
    position: relative;
}
body:not(.wholesale-portal-body) .k-signage-template--sc > span {
    position: relative;
    z-index: 1;
    padding-inline: var(--gp-sp-1);
    background: inherit;
}
body:not(.wholesale-portal-body) .k-signage-template--sc::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-signage-template.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-signage-shell {
        gap: var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) .k-signage-toolbar {
        grid-template-columns: 1fr;
        margin-top: var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) .k-signage-search__field .k-input {
        min-height: 3.25rem;
        font-size: 1rem;
    }
    body:not(.wholesale-portal-body) .k-signage-sort {
        width: 100%;
    }
    body:not(.wholesale-portal-body) .k-signage-sort .k-seg {
        flex: 1 1 0;
        justify-content: center;
        min-height: 3.25rem;
    }
    body:not(.wholesale-portal-body) .k-signage-table-wrap {
        overflow-x: clip;
        border-right: 0;
        border-left: 0;
    }
    body:not(.wholesale-portal-body) .k-signage-table,
    body:not(.wholesale-portal-body) .k-signage-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    body:not(.wholesale-portal-body) .k-signage-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) .k-signage-table tr {
        display: grid;
        grid-template-columns: 3rem repeat(4, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-signage-table th,
    body:not(.wholesale-portal-body) .k-signage-table td {
        min-width: 0;
        padding: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-signage-table tr > :last-child {
        border-right: 0;
    }
    body:not(.wholesale-portal-body) .k-signage-family-bulk-row:not(:first-child) {
        margin-top: var(--gp-sp-4);
        border-top: var(--gp-border-w) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) .k-signage-product {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: var(--gp-sp-3);
        width: auto;
        min-width: 0;
        padding: var(--gp-sp-3) !important;
        border-right: 0 !important;
    }
    body:not(.wholesale-portal-body) .k-signage-product__image {
        grid-column: 1;
        grid-row: 1 / 4;
        width: 4.5rem;
        height: 4.5rem;
        margin: 0;
    }
    body:not(.wholesale-portal-body) .k-signage-product__title,
    body:not(.wholesale-portal-body) .k-signage-product__variant,
    body:not(.wholesale-portal-body) .k-signage-product__sku-prefix {
        grid-column: 2;
    }
    body:not(.wholesale-portal-body) .k-signage-product__title {
        align-self: end;
        font-size: 1rem;
    }
    body:not(.wholesale-portal-body) .k-signage-product:not(:has(.k-signage-product__image)) {
        grid-template-columns: minmax(0, 1fr);
    }
    body:not(.wholesale-portal-body) .k-signage-product:not(:has(.k-signage-product__image)) .k-signage-product__title,
    body:not(.wholesale-portal-body) .k-signage-product:not(:has(.k-signage-product__image)) .k-signage-product__variant,
    body:not(.wholesale-portal-body) .k-signage-product:not(:has(.k-signage-product__image)) .k-signage-product__sku-prefix {
        grid-column: 1;
    }
    body:not(.wholesale-portal-body) .k-signage-size,
    body:not(.wholesale-portal-body) .k-signage-template-cell {
        width: auto;
    }
    body:not(.wholesale-portal-body) .k-signage-size {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }
    body:not(.wholesale-portal-body) .k-signage-family-bulk-row .k-signage-template-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gp-sp-1);
        padding-inline: var(--gp-sp-1);
    }
    body:not(.wholesale-portal-body) .k-signage-family-bulk-row .k-signage-template-cell::before {
        content: attr(data-template-label);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-height: 2.2em;
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) .k-signage-bulk-download {
        width: 100%;
        min-width: 0;
        min-height: 2.75rem;
        padding-inline: var(--gp-sp-1);
        font-size: 0.5625rem;
    }
    body:not(.wholesale-portal-body) .k-signage-template-cell {
        padding-inline: var(--gp-sp-1);
    }
    body:not(.wholesale-portal-body) .k-signage-template {
        max-width: 100%;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    body:not(.wholesale-portal-body) .k-signage-size-row th,
    body:not(.wholesale-portal-body) .k-signage-size-row td {
        padding-block: var(--gp-sp-1);
    }
    body:not(.wholesale-portal-body) .k-signage-template--bc {
        width: 3.25rem;
        height: 2.75rem;
    }
    body:not(.wholesale-portal-body) .k-signage-template--wc,
    body:not(.wholesale-portal-body) .k-signage-template--bs {
        width: 3rem;
        height: 3rem;
    }
    body:not(.wholesale-portal-body) .k-signage-template--sc {
        width: 2.75rem;
        height: 3rem;
    }
}

/* Signage configuration: a focused title-ending editor with server-sorted chips
 * and restrained motion that never becomes required for the CRUD workflow. */
body:not(.wholesale-portal-body) .k-signage-settings {
    width: min(920px, 100%);
    margin-inline: auto;
}
body:not(.wholesale-portal-body) .k-signage-settings__section {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-signage-settings__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-signage-settings__eyebrow {
    margin: 0 0 var(--gp-sp-1);
    color: var(--gp-accent);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-signage-settings__status {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    flex: 0 0 auto;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-signage-mapping-form {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-signage-mapping-form__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
body:not(.wholesale-portal-body) .k-signage-mapping-form__control .k-input {
    min-height: 3.25rem;
    border-right-width: 0;
}
body:not(.wholesale-portal-body) .k-signage-mapping-form__control .k-btn {
    min-width: 10rem;
    min-height: 3.25rem;
    justify-content: center;
}
body:not(.wholesale-portal-body) .k-signage-mapping-form__hint {
    margin: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-signage-mappings {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    min-height: 6rem;
    padding-top: var(--gp-sp-4);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-signage-mappings__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-signage-mappings__label,
body:not(.wholesale-portal-body) .k-signage-mappings__count {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-signage-mappings__count {
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-signage-mapping-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-2) 0 var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    border-radius: var(--gp-radius-sm);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    transform-origin: center;
    transition:
        transform var(--gp-dur) var(--gp-ease),
        opacity var(--gp-dur-fast) var(--gp-ease),
        border-color var(--gp-dur-fast) var(--gp-ease),
        background-color var(--gp-dur-fast) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip:hover {
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip.is-entering {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.96);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip.is-leaving {
    opacity: 0;
    transform: translateY(-0.2rem) scale(0.94);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    cursor: pointer;
    transition: color var(--gp-dur-fast) var(--gp-ease), background-color var(--gp-dur-fast) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-signage-mapping-chip__remove:hover,
body:not(.wholesale-portal-body) .k-signage-mapping-chip__remove:focus-visible {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
    outline: none;
}
body:not(.wholesale-portal-body) .k-signage-mappings__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-2);
    min-height: 6rem;
    border: var(--gp-border-w-thin) dashed var(--gp-border);
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-signage-settings__header {
        flex-direction: column;
    }
    body:not(.wholesale-portal-body) .k-signage-mapping-form__control {
        grid-template-columns: 1fr;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-signage-mapping-form__control .k-input {
        border-right-width: var(--gp-border-w);
    }
    body:not(.wholesale-portal-body) .k-signage-mapping-form__control .k-btn {
        width: 100%;
    }
}

body:not(.wholesale-portal-body) .k-ms-shell__advanced { display: flex; flex-direction: column; gap: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-ms-shell__filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-ms-shell__filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-ms-shell__filter-cell--wide { grid-column: span 1; }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-ms-shell__filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-ms-shell__filter-cell { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-ms-shell__switches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-ms-shell__actions {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    padding-top: var(--gp-sp-3);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-ms-shell__exclude {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-ms-shell__results { min-height: 4rem; }
body:not(.wholesale-portal-body) .k-ms-shell__loading {
    text-align: center;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-6);
}

/* 30.2 Media search results — toolbar, grid, per-card layout. */

body:not(.wholesale-portal-body) .k-msr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-msr-toolbar__count,
body:not(.wholesale-portal-body) .k-msr-toolbar__per-page {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-msr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-4);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-msr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-msr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1500px) {
    body:not(.wholesale-portal-body) .k-msr-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-msr-card {
    display: flex;
    flex-direction: column;
    padding: 0 var(--gp-sp-3) var(--gp-sp-3);
    gap: var(--gp-sp-2);
    transition: border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-msr-card:hover { border-color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-msr-card__media {
    display: block;
    margin-inline: calc(0px - var(--gp-sp-3));
}
body:not(.wholesale-portal-body) .k-msr-card__no-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-msr-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    padding-top: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-msr-card__title {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
body:not(.wholesale-portal-body) .k-msr-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-msr-card__meta-tags,
body:not(.wholesale-portal-body) .k-msr-card__meta-models {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-msr-card__meta-models { text-align: right; }
body:not(.wholesale-portal-body) .k-msr-empty { padding: var(--gp-sp-8) var(--gp-sp-4); }

/* 30.3 Media search preview modal details column. */

body:not(.wholesale-portal-body) .k-msr-modal-details {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-msr-modal-details__group {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-msr-modal-details__heading {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    margin-bottom: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-msr-modal-details__row { font-size: 0.8125rem; }
body:not(.wholesale-portal-body) .k-msr-modal-details__models {
    margin: 0;
    padding-left: 1.25rem;
}
body:not(.wholesale-portal-body) .k-msr-modal-details__empty {
    color: var(--gp-muted-foreground);
}

/* 30.4 Product admin compact record row — one scannable record with
 *       product identity at left, a dense editable field band in the
 *       center, and record actions at right. Field labels live with the
 *       controls, so no separate table header or variant column is needed. */

body:not(.wholesale-portal-body) .k-pa-record {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    gap: var(--gp-sp-3);
    align-items: stretch;
    padding: var(--gp-sp-3) var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-pa-record__media,
body:not(.wholesale-portal-body) .k-pa-record__body,
body:not(.wholesale-portal-body) .k-pa-record__identity,
body:not(.wholesale-portal-body) .k-pa-record__fields,
body:not(.wholesale-portal-body) .k-pa-record__actions { min-width: 0; }
body:not(.wholesale-portal-body) .k-pa-record__media {
    width: 5rem;
    height: 5rem;
    align-self: center;
    overflow: hidden;
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-pa-record__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body:not(.wholesale-portal-body) .k-pa-record__media-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--gp-muted-foreground);
    font-size: 1.25rem;
}
body:not(.wholesale-portal-body) .k-pa-record__body {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-record__identity {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-pa-record__heading {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-pa-record__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-pa-record__meta {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-width: 0;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-pa-record__meta > span + span::before {
    content: '·';
    margin-right: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-record__handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-pa-record__fields {
    display: grid;
    grid-template-columns: minmax(9rem, 0.8fr) minmax(16rem, 2.4fr) minmax(12rem, 1.8fr) minmax(6rem, 0.7fr) minmax(4.5rem, auto);
    grid-template-areas:
        'importance flavor flavor shortcode exclude'
        'caption caption caption shortcode exclude';
    gap: var(--gp-sp-2);
    align-items: end;
}
body:not(.wholesale-portal-body) .k-pa-record__field {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    min-width: 0;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-pa-record__field--importance { grid-area: importance; }
body:not(.wholesale-portal-body) .k-pa-record__field--flavor { grid-area: flavor; }
body:not(.wholesale-portal-body) .k-pa-record__field--caption { grid-area: caption; }
body:not(.wholesale-portal-body) .k-pa-record__field--shortcode { grid-area: shortcode; }
body:not(.wholesale-portal-body) .k-pa-record__field--exclude { grid-area: exclude; }
body:not(.wholesale-portal-body) .k-pa-record__label {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-pa-record__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-record__actions form { margin: 0; }
body:not(.wholesale-portal-body) .k-pa-record__actions .k-pa-hybrid-editor-btn {
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    body:not(.wholesale-portal-body) .k-pa-record__fields {
        grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 2fr) minmax(10rem, 1.5fr) minmax(6rem, 0.7fr) minmax(4rem, auto);
    }
}
@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-pa-record {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }
    body:not(.wholesale-portal-body) .k-pa-record__media {
        width: 4.5rem;
        height: 4.5rem;
    }
    body:not(.wholesale-portal-body) .k-pa-record__fields {
        grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 2fr) minmax(6rem, 0.7fr) minmax(4rem, auto);
        grid-template-areas:
            'importance flavor shortcode exclude'
            'caption caption shortcode exclude';
    }
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-pa-record {
        grid-template-columns: 4rem minmax(0, 1fr) auto;
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-pa-record__media {
        width: 4rem;
        height: 4rem;
        align-self: start;
    }
    body:not(.wholesale-portal-body) .k-pa-record__body {
        grid-column: 2 / -1;
    }
    body:not(.wholesale-portal-body) .k-pa-record__actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-start;
    }
    body:not(.wholesale-portal-body) .k-pa-record__title { white-space: normal; }
    body:not(.wholesale-portal-body) .k-pa-record__meta { flex-wrap: wrap; }
    body:not(.wholesale-portal-body) .k-pa-record__fields {
        grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 0.35fr);
        grid-template-areas:
            'importance exclude'
            'flavor flavor'
            'caption caption'
            'shortcode shortcode';
    }
}

/* 30.5 Product admin features editor — the image preview wrap,
 *       the per-feature field card, the action row, and the dot
 *       layer overlay. The `.k-pa-features-editor` wraps the
 *       whole form. The image wrap is a 480×320 sharp `.k-card`
 *       that paints an acid-yellow border on hover. */

body:not(.wholesale-portal-body) .k-pa-features-editor {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-pa-features-editor__row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}
body:not(.wholesale-portal-body) .k-pa-features-editor__col { display: flex; flex-direction: column; gap: var(--gp-sp-3); }
body:not(.wholesale-portal-body) .k-pa-features-editor__image-card {
    padding: var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__image-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__image-toolbar-label {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__image-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    overflow: hidden;
    transition: border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__image-wrap:hover { border-color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-pa-features-editor__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body:not(.wholesale-portal-body) .k-pa-features-editor__dot-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
body:not(.wholesale-portal-body) .k-pa-features-editor__dot {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__dot--desktop { background: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-pa-features-editor__dot--mobile { background: var(--gp-success); }
body:not(.wholesale-portal-body) .k-pa-features-editor__image-help {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
    margin-top: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__feature-card {
    padding: var(--gp-sp-2) var(--gp-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__feature-title {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin: 0;
    padding-bottom: var(--gp-sp-1);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__field { margin: 0; }
body:not(.wholesale-portal-body) .k-pa-features-editor__debug {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2) var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__debug summary {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    cursor: pointer;
}
body:not(.wholesale-portal-body) .k-pa-features-editor__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding-top: var(--gp-sp-3);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-pa-features-editor__actions .k-form__actions { padding: 0; border: 0; }
body:not(.wholesale-portal-body) .k-pa-features-editor__alert {
    border: var(--gp-border-w) solid var(--gp-warning);
    border-left-width: 0.5rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: var(--gp-muted);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__alert-title {
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--gp-warning);
}
body:not(.wholesale-portal-body) .k-pa-features-editor__alert-body {
    font-size: 0.8125rem;
    color: var(--gp-fg);
}

/* 30.6 Product admin dashboard — structured page sections. The sync
 *       form belongs to the shared page-title action slot. The dynamic
 *       product count lives in the page-title eyebrow, and the editable
 *       product table remains flush with deliberate spacing below the title. */

body:not(.wholesale-portal-body) .k-pa-sync-action { margin: 0; }
body:not(.wholesale-portal-body) .k-pa-sync-notice {
    padding-top: var(--gp-sp-3);
    padding-bottom: 0;
}
body:not(.wholesale-portal-body) .k-pa-sync-notice > :last-child { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-pa-products-list {
    padding-top: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-pa-product-table {
    width: 100%;
    border-collapse: collapse;
}
body:not(.wholesale-portal-body) .k-pa-product-table__row {
    /* One deliberate separator between records; the compact record owns its padding. */
    border-top: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-pa-product-table__row:first-child { border-top: 0; }
body:not(.wholesale-portal-body) .k-pa-product-table__cell {
    padding: 0;
    border: 0;
}
body:not(.wholesale-portal-body) .k-pa-modal-loading {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
    text-align: center;
    padding: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .pa-field-form,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-field {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-input--compact,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-select--compact,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-input--multiline {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--gp-sp-2);
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-input--multiline {
    min-height: 2.5rem;
    height: 2.5rem;
    resize: vertical;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-input--compact:focus,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-select--compact:focus,
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-input--multiline:focus {
    border-color: var(--gp-accent);
    outline: none;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-slider {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-2);
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-pa-hybrid-slider .k-slider { min-width: 0; }
body:not(.wholesale-portal-body) .k-pa-hybrid-slider .pa-slider-value {
    min-width: 1.5rem !important;
    margin: 0;
    color: var(--gp-fg);
    text-align: right;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-field--toggle {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-toggle {
    width: 3rem;
    height: 1.75rem;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-toggle::after {
    width: 1.25rem;
    height: 1.25rem;
}
body:not(.wholesale-portal-body) .k-pa-hybrid-control .k-toggle:checked::after {
    transform: translateX(1.25rem);
}
body:not(.wholesale-portal-body) .k-pa-definitions-tabs { display: flex; flex-direction: column; gap: var(--gp-sp-3); }
body:not(.wholesale-portal-body) .k-pa-definitions-tabs__content {
    border: var(--gp-border-w) solid var(--gp-border);
    padding: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-pa-definitions-tabs__pane { display: none; }
body:not(.wholesale-portal-body) .k-pa-definitions-tabs__pane--active { display: block; }

body:not(.wholesale-portal-body) #pa-custom-editors-panel .k-pa-custom-editor-add__form .k-input::placeholder,
body:not(.wholesale-portal-body) #pa-definitions-panel .k-pa-definition-add__form .k-input::placeholder,
body:not(.wholesale-portal-body) #pa-definitions-panel .k-pa-definition-list__editor .k-input::placeholder {
    color: var(--gp-muted-foreground);
}

/* Reduced-motion guard. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-msr-card,
    body:not(.wholesale-portal-body) .k-pa-features-editor__image-wrap,
    body:not(.wholesale-portal-body) .k-signage-mapping-chip,
    body:not(.wholesale-portal-body) .k-signage-mapping-chip__remove {
        transition: none;
    }
}

/* ---- 31. Phase 14 — Sales cache + Inventory ops + Metrics + ASD ----
 *
 * Per-tool surface for the four utility/data tools that round out the
 * Operations and System sidebar groups. The shared primitives
 * (`.k-card`, `.k-btn`, `.k-input`, `.k-select`, `.k-table`,
 * `.k-badge`, `.k-alert`, `.k-tabs`, `.k-collapse`, `.k-modal`,
 * `.k-progress`, `.k-spinner`, `.k-empty-state`, etc.) are reused
 * wherever possible; the bespoke classes below add the per-tool
 * layout chrome and the data-explorer / iframe shell surfaces.
 *
 * Every selector is scoped to `body:not(.wholesale-portal-body)` so
 * the wholesale portal (excluded from the redesign per Decision 6) is
 * unaffected.
 */

/* 31.1 Sales cache — top-level dashboard grid (one `.k-card` per
 *       screen with title + description + "Open" button). The grid
 *       is the same Bootstrap `row g-3` shell the rest of the admin
 *       uses; the `k-sc-card` block re-skins the inner `.card`. */

body:not(.wholesale-portal-body) .k-sc-grid {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-card {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-6);
    min-height: 12rem;
}
body:not(.wholesale-portal-body) .k-sc-card__title {
    font-family: var(--gp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-card__desc {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    flex: 1 1 auto;
    min-height: 0;
}
body:not(.wholesale-portal-body) .k-sc-card__action { align-self: flex-start; }

/* 31.2 Sales cache — filter bar (the per-screen filter form inside
 *       each DadKit-backed subpath). Reuses `.k-form-grid` semantics
 *       for the 6-column responsive layout. */

body:not(.wholesale-portal-body) .k-sc-filter {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sc-filter__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-sc-filter__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-filter__cell { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-sc-filter__actions {
    display: flex;
    gap: var(--gp-sp-2);
    align-items: center;
}

/* Orders is the highest-frequency cache list. Keep its filter controls in the
 * padded page section instead of adding a second card boundary, and compact
 * the phone layout without changing the GET-form contract. */
body:not(.wholesale-portal-body) .k-sc-filter--orders {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--orders .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (min-width: 360px) and (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--orders .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--orders .k-sc-filter__cell:nth-child(-n + 2) {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--orders .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--orders .k-sc-filter__actions {
        justify-content: flex-end;
    }
}

/* Order lines is a dense read-only explorer. Let the padded page section own
 * containment, fill the desktop row with its five filters, and keep the two
 * numeric thresholds paired on phones without changing field names or form behavior. */
body:not(.wholesale-portal-body) .k-sc-filter--order-lines {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (min-width: 360px) and (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__cell:nth-child(1),
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__cell:nth-child(2),
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__cell:nth-child(5) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__actions {
        justify-content: flex-end;
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter--order-lines .k-sc-filter__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Customers is a read-only identity explorer. Let the padded page section own
 * containment, let its three peer filters use the full desktop row, and keep
 * email prominent while pairing the shorter state/search filters on phones. */
body:not(.wholesale-portal-body) .k-sc-filter--customers {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (min-width: 360px) and (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__cell:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__actions {
        justify-content: flex-end;
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter--customers .k-sc-filter__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Products is a read-only catalog explorer. Let the padded page section own
 * containment, give its two peer filters the full desktop row, and keep the
 * phone actions balanced without changing field names or GET behavior. */
body:not(.wholesale-portal-body) .k-sc-filter--products {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--products .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--products .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--products .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--products .k-sc-filter__actions {
        justify-content: flex-end;
    }
}

/* Variants is an inventory-facing explorer with five complementary filters.
 * Let the page section own containment, keep the update window and primary
 * search comfortably sized through tablet widths, and balance phone actions. */
body:not(.wholesale-portal-body) .k-sc-filter--variants {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__cell:nth-child(5) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__actions {
        justify-content: flex-end;
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--variants .k-sc-filter__cell:nth-child(5) {
        grid-column: auto;
    }
}

/* Events is a read-only activity explorer with seven complementary filters.
 * Let the padded page section own containment, pair the shorter categorical
 * controls on phones, and keep date/search fields comfortably readable. */
body:not(.wholesale-portal-body) .k-sc-filter--events {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (min-width: 360px) and (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__cell:nth-child(5),
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__cell:nth-child(6),
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__cell:nth-child(7) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__actions {
        justify-content: flex-end;
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__body {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
    body:not(.wholesale-portal-body) .k-sc-filter--events .k-sc-filter__cell:nth-child(7) {
        grid-column: span 2;
    }
}

/* Sync runs is a read-only telemetry explorer with six compact filters. Let
 * the padded page section own containment, keep date/search controls readable
 * on phones, and move the action pair onto the desktop filter rail. */
body:not(.wholesale-portal-body) .k-sc-filter--sync-runs {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__body {
    display: grid;
    gap: var(--gp-sp-3);
}
@media (min-width: 360px) and (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__cell:nth-child(n + 3) {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__actions > .k-btn {
        flex: 1 1 0;
        justify-content: center;
    }
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__actions {
        justify-content: flex-end;
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-filter--sync-runs .k-sc-filter__body {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

/* 31.2a Sales cache orders — high-frequency order rows. Keep the desktop
 * comparison table dense by putting the built-in ID + drawer controls on one
 * rail, then turn the same semantic cells into a labeled two-column record on
 * phones. DadKit IDs, buttons, collapse hooks, and partial-row markup stay
 * unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:first-child {
    font-weight: 700;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > thead {
        display: none;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "Order"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Created"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Processed"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Financial"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Fulfillment"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Total"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Discount"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before { content: "Refunded"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9)::before { content: "Currency"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(10) {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        justify-self: stretch;
        align-items: flex-end;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(10)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(10) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_orders .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2b Sales cache order lines — dense product/variant records. Keep the
 * desktop comparison table compact by placing the built-in ID + drawer
 * controls on one rail, then turn those same semantic cells into labeled
 * two-column records on phones. DadKit IDs, drawer collapse hooks, and HTMX
 * partial-row markup remain unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:first-child {
    font-weight: 700;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "SKU"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Line title"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Variant"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Qty"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Discounted total"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Total discount"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Tax"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before { content: "Updated"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        justify-self: stretch;
        align-items: flex-end;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_order_lines .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2c Sales cache customers — compact identity records. Preserve the dense
 * desktop comparison table while putting the built-in ID + drawer controls on
 * one rail. On phones, restack the same semantic cells into labeled two-column
 * records so identity, account state, commercial totals, recency, and record
 * actions remain reachable without horizontal scrolling. DadKit IDs, drawer
 * collapse hooks, and HTMX partial-row markup remain unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2) {
    font-weight: 700;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "First name"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Last name"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Email"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "State"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Orders"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Amount spent"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Updated"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
        grid-column: 1 / -1;
        width: 100%;
        align-items: flex-end;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_customers .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2d Sales cache products — catalog and inventory records. Preserve the
 * desktop comparison table while consolidating the built-in ID + drawer
 * controls onto one compact rail. On phones, restack the same semantic cells
 * into labeled two-column records so product identity, merchandising type,
 * inventory, variants, recency, and record actions remain reachable without
 * horizontal scrolling. DadKit IDs, drawer collapse hooks, and HTMX partial-row
 * markup remain unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:first-child {
    font-weight: 700;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
        grid-column: 1 / -1;
        padding-top: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "Product"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Status"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Vendor"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Type"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Inventory"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Variants"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Updated"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
        grid-column: 1 / -1;
        width: 100%;
        align-items: flex-end;
        padding-bottom: var(--gp-sp-3);
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_products .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2e Sales cache variants — SKU, inventory, price, and recency records.
 * Preserve the wide comparison table on desktop while consolidating DadKit's
 * record controls onto one rail. On phones, restack the same cells into a
 * labeled two-column record so the page no longer requires horizontal swipes. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:first-child {
    font-weight: 700;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > thead > tr > th:nth-child(4),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > thead > tr > th:nth-child(5),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > thead > tr > th:nth-child(6),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > thead > tr > th:nth-child(7),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7) {
    text-align: right;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.15rem;
        padding: var(--gp-sp-1) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) {
        grid-column: 1 / -1;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
        padding-top: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before {
        flex: 0 0 6.5rem;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "SKU"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Title"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Display name"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Inventory"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Sellable online"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Price"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Compare at"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before { content: "Updated"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gp-sp-2);
        padding-top: var(--gp-sp-2);
        padding-bottom: var(--gp-sp-3);
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_variants .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2f Sales cache events — chronological audit records. Keep the desktop
 * table scan-friendly by protecting timestamps, event linkage, message copy,
 * and one compact record-action rail. On phones, restack the same semantic
 * cells into a labeled two-column record so every event remains readable
 * without horizontal scrolling. DadKit IDs, drawer collapse hooks, and HTMX
 * partial-row markup remain unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > thead > tr > th:nth-child(1),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > thead > tr > th:nth-child(4),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4) {
    min-width: 15rem;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > thead > tr > th:nth-child(5),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5) {
    min-width: 26rem;
    line-height: 1.45;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > thead > tr > th:nth-child(6),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6) {
    text-align: center;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        padding-top: var(--gp-sp-3);
        font-weight: 700;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "Created"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Source"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Owner type"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4),
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5) {
        grid-column: 1 / -1;
        min-width: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Owner ID"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Message"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6) {
        align-items: flex-start;
        text-align: left;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Critical alert"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7) {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gp-sp-2);
        padding-top: var(--gp-sp-3);
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_events .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.2g Sales cache sync runs — compact operational telemetry. Keep the
 * desktop comparison table dense by consolidating DadKit's record controls
 * onto one rail. On phones, restack the same semantic cells into a labeled
 * two-column run record so source, status, timing, counts, diff stats, and
 * record actions remain usable without horizontal scrolling. DadKit IDs,
 * drawer collapse hooks, diff links, and HTMX partial-row markup remain
 * unchanged. */
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs > .dadkit-table-scroll.k-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > thead > tr > th:nth-child(4),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > thead > tr > th:nth-child(5),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5) {
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > thead > tr > th:nth-child(6),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > thead > tr > th:nth-child(7),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6),
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7) {
    text-align: center;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-actions-col {
    width: 1%;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .k-action-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-row-id-copy {
    flex-basis: auto;
    width: auto;
    min-width: 3.25rem;
    padding-inline: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-row-id-copy__label {
    transform: none;
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs > .dadkit-table-scroll.k-table-scroll {
        overflow: visible;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-bottom: var(--gp-border-w) solid var(--gp-border);
        background: var(--gp-bg);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row):hover {
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.2rem;
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border: 0;
        background: transparent;
        overflow-wrap: anywhere;
        white-space: normal;
        text-align: left;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td::before {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(1)::before { content: "Source"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(2)::before { content: "Object"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(3)::before { content: "Status"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(4)::before { content: "Started"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(5)::before { content: "Finished"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6) {
        grid-column: 1;
        grid-row: 4;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(6)::before { content: "Processed"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7) {
        grid-column: 2;
        grid-row: 4;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(7)::before { content: "Failed"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8) {
        grid-column: 1 / -1;
        grid-row: 5;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(8)::before { content: "Diff stats"; }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        justify-self: stretch;
        align-items: flex-end;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9)::before {
        content: "Record";
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-table > tbody > tr:not(.dadkit-drawer-lazy-row):not(.dadkit-load-more-row) > td:nth-child(9) .k-action-stack {
        justify-content: flex-end;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-drawer-lazy-row.show,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-load-more-row {
        display: block;
        width: 100%;
    }
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-drawer-lazy-row > td,
    body:not(.wholesale-portal-body) #dadkit-list-sales_cache_sync_runs .dadkit-load-more-row > td {
        display: block;
        width: 100%;
    }
}

/* 31.3 Sales cache integrity — the integrity summary metrics row
 *       (six stat tiles) and the issue tally table. The 6-column
 *       responsive grid mirrors the wholesale admin `.k-stats-grid`
 *       pattern from §27. */

body:not(.wholesale-portal-body) .k-sc-integrity-stats {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-integrity-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-integrity-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-integrity-issue {
    border: var(--gp-border-w) solid var(--gp-warning);
    background: var(--gp-muted);
    color: var(--gp-fg);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    margin-bottom: var(--gp-sp-2);
    border-left: 0.25rem solid var(--gp-warning);
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-sc-integrity-issue strong { color: var(--gp-warning); margin-right: var(--gp-sp-1); }

/* Six totals remain a single compact strip on wide desktop, but their display
 * numerals must leave enough breathing room for five-digit cache counts. */
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) #sc-integrity-metrics .k-stat-marquee__number {
        font-size: clamp(2.5rem, 3vw, 3.5rem);
    }
}

/* 31.4 Sales cache integrity — backfill runner panels (Shopify +
 *       Amazon). The two cards share the same shell; the runner
 *       buttons share a `k-sc-runner-actions` cluster. */

body:not(.wholesale-portal-body) .k-sc-runner-grid {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: 1fr;
    margin-bottom: var(--gp-sp-3);
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-runner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-runner { padding: 0; }
body:not(.wholesale-portal-body) .k-sc-runner__head {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-runner__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-runner__icon { color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-sc-runner__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sc-runner__inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-2);
    margin: 0 auto;
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-runner__inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 32rem;
    }
}
body:not(.wholesale-portal-body) .k-sc-runner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sc-runner__status {
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
    text-align: center;
    min-height: 1.25rem;
}

/* 31.5 Sales cache integrity — progress panels (Shopify / Amazon).
 *       The two cards use the existing `.k-progress` track from §12
 *       with the `--success` / `--warning` / `--danger` modifiers
 *       already defined; the new `.k-sc-progress-card` adds the
 *       head row + the recent-success / persistent-issue twin log
 *       block. */

body:not(.wholesale-portal-body) .k-sc-progress-grid {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: 1fr;
    margin-bottom: var(--gp-sp-3);
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-progress-card { padding: 0; }
body:not(.wholesale-portal-body) .k-sc-progress-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-sc-progress-card__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-progress-card__run {
    font-size: 0.75rem;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
}
body:not(.wholesale-portal-body) .k-sc-progress-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sc-progress-card__logs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-3);
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-sc-progress-card__logs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-log {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    padding: var(--gp-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    min-height: 12rem;
}
body:not(.wholesale-portal-body) .k-sc-log__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-sc-log__label--success { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sc-log__label--danger { color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-sc-log__pre {
    margin: 0;
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gp-fg);
    height: 11.25rem;
    overflow: auto;
    white-space: pre-wrap;
    background: var(--gp-bg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sc-log--success .k-sc-log__pre { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sc-log--danger .k-sc-log__pre { color: var(--gp-danger); }

/* 31.6 Sales cache integrity — Shopify product diagnostic. The
 *       diagnostic shell uses the existing `.k-input` + `.k-btn`
 *       primitives; the new `k-sc-diagnostic` block provides the
 *       result textarea + status text + the search-result popover. */

body:not(.wholesale-portal-body) .k-sc-diagnostic {
    padding: 0;
    overflow: visible;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__head {
    display: flex;
    align-items: flex-start;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__head .k-sc-runner__icon { margin-top: 0.125rem; }
body:not(.wholesale-portal-body) .k-sc-diagnostic__head-copy { min-width: 0; }
body:not(.wholesale-portal-body) .k-sc-diagnostic__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__subtitle {
    margin: var(--gp-sp-1) 0 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.4;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gp-sp-3);
    align-items: end;
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-sc-diagnostic__row {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
    }
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__field { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-sc-diagnostic__product-field {
    position: relative;
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__product-field #sc-shopify-product-gid::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 1;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__selection:not([hidden]) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gp-sp-1) var(--gp-sp-2);
    min-width: 0;
    margin-top: var(--gp-sp-2);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-left: var(--gp-border-w) solid var(--gp-accent);
    background: var(--gp-muted);
    overflow-wrap: anywhere;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__selection-label {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__selection-title {
    min-width: 0;
    color: var(--gp-fg);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__selection-handle {
    min-width: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__actions .k-btn { min-height: 3.5rem; }
body:not(.wholesale-portal-body) .k-sc-diagnostic__guidance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-sp-2) var(--gp-sp-4);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-left: 0.25rem solid var(--gp-accent);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.45;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__guidance strong { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-sc-diagnostic__status {
    min-height: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--gp-muted-foreground);
    overflow-wrap: anywhere;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__result-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding-top: var(--gp-sp-2);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__result-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__result-meta {
    margin-top: 0.125rem;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-sc-diagnostic__output {
    height: 14rem;
    min-height: 14rem;
    resize: vertical;
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-sc-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--gp-sp-1));
    right: 0;
    left: 0;
    display: none;
    max-height: min(21rem, 45vh);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    box-shadow: var(--gp-shadow-md);
}
body:not(.wholesale-portal-body) .k-sc-search-results.is-open { display: block; }
body:not(.wholesale-portal-body) .k-sc-search-results__summary {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-search-results__summary span:first-child { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-sc-search-results__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    color: var(--gp-fg);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.3;
    transition:
        background-color var(--gp-dur) var(--gp-ease),
        box-shadow var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-sc-search-results__item:last-child { border-bottom: 0; }
body:not(.wholesale-portal-body) .k-sc-search-results__item:hover,
body:not(.wholesale-portal-body) .k-sc-search-results__item:focus {
    background: var(--gp-muted);
    color: var(--gp-fg);
    box-shadow: inset 0.25rem 0 0 var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-sc-search-results__item:hover .k-sc-search-results__title,
body:not(.wholesale-portal-body) .k-sc-search-results__item:focus .k-sc-search-results__title {
    color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-sc-search-results__item:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0.125rem solid var(--gp-accent);
    outline-offset: -0.125rem;
}
body:not(.wholesale-portal-body) .k-sc-search-results__title {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-sc-search-results__details {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    min-width: 0;
    margin-top: 0.125rem;
}
body:not(.wholesale-portal-body) .k-sc-search-results__meta,
body:not(.wholesale-portal-body) .k-sc-search-results__gid {
    min-width: 0;
    overflow: hidden;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-sc-search-results__meta { flex: 1 1 auto; }
body:not(.wholesale-portal-body) .k-sc-search-results__gid {
    flex: 0 1 auto;
    font-family: var(--gp-font-mono);
    text-align: right;
}
@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-sc-search-results {
        position: static;
        margin-top: var(--gp-sp-1);
        box-shadow: none;
    }
}
@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-sc-diagnostic__head,
    body:not(.wholesale-portal-body) .k-sc-diagnostic__body {
        padding-right: var(--gp-sp-3);
        padding-left: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-sc-diagnostic__actions {
        grid-template-columns: minmax(0, 1fr);
    }
    body:not(.wholesale-portal-body) .k-sc-diagnostic__guidance {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-sc-diagnostic__result-meta { display: none; }
    body:not(.wholesale-portal-body) .k-sc-diagnostic__output {
        height: 12rem;
        min-height: 12rem;
    }
    body:not(.wholesale-portal-body) .k-sc-search-results { max-height: min(18rem, 42vh); }
    body:not(.wholesale-portal-body) .k-sc-search-results__summary {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--gp-sp-1) var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-sc-search-results__title {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    body:not(.wholesale-portal-body) .k-sc-search-results__details {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }
    body:not(.wholesale-portal-body) .k-sc-search-results__gid {
        overflow: visible;
        overflow-wrap: anywhere;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
    }
}

/* 31.7 Sales cache integrity — raw live tail panels (Shopify +
 *       Amazon output). The two cards share the same shell; the
 *       content `<pre>` uses the kinetic mono font + the
 *       acid-yellow on black "raw terminal" color. */

body:not(.wholesale-portal-body) .k-sc-tail-grid {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: 1fr;
    margin-bottom: var(--gp-sp-3);
}
@media (min-width: 1200px) {
    body:not(.wholesale-portal-body) .k-sc-tail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body:not(.wholesale-portal-body) .k-sc-tail { padding: 0; }
body:not(.wholesale-portal-body) .k-sc-tail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-sc-tail__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-tail__actions { display: flex; gap: var(--gp-sp-2); }
body:not(.wholesale-portal-body) .k-sc-tail__body { padding: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-sc-tail__pre {
    margin: 0;
    background: var(--gp-bg);
    color: var(--gp-fg);
    border: var(--gp-border-w) solid var(--gp-border);
    font-family: var(--gp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.4;
    height: 22.5rem;
    overflow: auto;
    white-space: pre-wrap;
    padding: var(--gp-sp-3);
}

/* 31.8 Sales cache integrity — recent sync runs badge strip +
 *       table. The strip is a row of `.k-stat-tile` shells; the
 *       table reuses the existing `.k-table` from §7.4. */

body:not(.wholesale-portal-body) .k-sc-runs-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    margin-bottom: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sc-runs-strip__tile {
    flex: 1 1 auto;
    min-width: 8rem;
}
body:not(.wholesale-portal-body) .k-sc-runs-strip__tile .k-stat-tile { min-height: 6rem; }
body:not(.wholesale-portal-body) .k-sc-runs-strip__tile .k-stat-tile__value { font-size: clamp(2rem, 3vw, 2.75rem); }
body:not(.wholesale-portal-body) .k-sc-recent-runs-card { padding: 0; }
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__limit {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__limit .k-select { min-height: 2.5rem; padding: 0 2rem 0 0.75rem; font-size: 0.875rem; }
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__limit .k-label { margin: 0; }
body:not(.wholesale-portal-body) .k-sc-recent-runs-card__body { padding: 0; }
body:not(.wholesale-portal-body) .k-sc-run-mobile { display: none; }

/* The wide table remains the fastest comparison surface, while phones get a
 * scan-first record layout so status, counts, diff actions, and errors do not
 * sit several horizontal swipes away from each run's identity. */
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #sc-recent-runs > .k-table-wrap { display: none; }
    body:not(.wholesale-portal-body) #sc-recent-runs .k-sc-run-mobile { display: block; }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__item {
        padding: var(--gp-sp-3) var(--gp-sp-4);
        border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__item:last-child { border-bottom: 0; }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__identity,
    body:not(.wholesale-portal-body) .k-sc-run-mobile__context,
    body:not(.wholesale-portal-body) .k-sc-run-mobile__footer {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__id {
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-mono);
        font-size: 0.75rem;
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__time { font-size: 0.875rem; }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__context { margin-top: var(--gp-sp-2); }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__object { font-size: 0.9375rem; }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__mode {
        color: var(--gp-muted-foreground);
        font-size: 0.8125rem;
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gp-sp-2);
        margin-top: var(--gp-sp-3);
        padding-top: var(--gp-sp-2);
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__metric {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-variant-numeric: tabular-nums;
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__metric-label {
        color: var(--gp-muted-foreground);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__footer {
        justify-content: space-between;
        margin-top: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__duration {
        display: inline-flex;
        gap: var(--gp-sp-2);
        color: var(--gp-muted-foreground);
        font-size: 0.8125rem;
    }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__duration strong { color: var(--gp-fg); }
    body:not(.wholesale-portal-body) .k-sc-run-mobile__error {
        margin-top: var(--gp-sp-3);
        padding: var(--gp-sp-2) var(--gp-sp-3);
        border-left: 0.25rem solid var(--gp-danger);
        background: var(--gp-muted);
        color: var(--gp-danger);
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-sc-run-mobile__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep all six integrity totals visible without a horizontal swipe through
 * tablet widths. Three columns preserve readable numerals and two clear rows. */
@media (max-width: 1199.98px) {
    body:not(.wholesale-portal-body) #sc-integrity-metrics .k-stat-marquee--hero {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }
    body:not(.wholesale-portal-body) #sc-integrity-metrics .k-stat-marquee--hero .k-stat-marquee__cell {
        min-width: 0;
        padding: var(--gp-sp-3) var(--gp-sp-2);
        border-right: var(--gp-border-w-thin) solid var(--gp-accent);
        border-bottom: var(--gp-border-w-thin) solid var(--gp-accent);
        scroll-snap-align: none;
    }
    body:not(.wholesale-portal-body) #sc-integrity-metrics .k-stat-marquee--hero .k-stat-marquee__cell:nth-child(3n) {
        border-right: 0;
    }
    body:not(.wholesale-portal-body) #sc-integrity-metrics .k-stat-marquee--hero .k-stat-marquee__cell:nth-last-child(-n + 3) {
        border-bottom: 0;
    }
}

/* Recent-run summaries keep the existing compact 3-by-2 phone treatment. */
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) #sc-recent-runs .k-stat-marquee--hero {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }
    body:not(.wholesale-portal-body) #sc-recent-runs .k-stat-marquee--hero .k-stat-marquee__cell {
        min-width: 0;
        padding: var(--gp-sp-3) var(--gp-sp-2);
        border-right: var(--gp-border-w-thin) solid var(--gp-accent);
        border-bottom: var(--gp-border-w-thin) solid var(--gp-accent);
        scroll-snap-align: none;
    }
    body:not(.wholesale-portal-body) #sc-recent-runs .k-stat-marquee--hero .k-stat-marquee__cell:nth-child(3n) {
        border-right: 0;
    }
    body:not(.wholesale-portal-body) #sc-recent-runs .k-stat-marquee--hero .k-stat-marquee__cell:nth-last-child(-n + 3) {
        border-bottom: 0;
    }
}

/* 31.9 Sales cache — run comparison modal. The shared `.k-modal` shell
 *       remains authoritative; these classes only organize comparison data. */

body:not(.wholesale-portal-body) .k-sc-diff-heading { min-width: 0; }
body:not(.wholesale-portal-body) .k-sc-diff-heading__eyebrow {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-diff-heading__copy {
    margin: var(--gp-sp-1) 0 0;
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}
body:not(.wholesale-portal-body) .k-sc-diff-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: var(--gp-sp-4);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__identity {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: var(--gp-sp-1);
    min-width: 0;
    padding: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__metric {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__metric + .k-sc-diff-summary__metric {
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__label {
    color: var(--gp-muted-foreground);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-diff-summary__value {
    margin-top: 0.1rem;
    font-family: var(--gp-font-display);
    font-size: 1.5rem;
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-sc-diff-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gp-sp-3);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-sc-diff-content {
        grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    }
}
body:not(.wholesale-portal-body) .k-sc-diff-panel {
    min-width: 0;
    overflow: hidden;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-sc-diff-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    min-height: 4.25rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-sc-diff-panel__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-sc-diff-panel__copy {
    margin: var(--gp-sp-1) 0 0;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}
body:not(.wholesale-portal-body) .k-sc-diff-breakdown {
    max-height: 18rem;
    overflow: auto;
}
body:not(.wholesale-portal-body) .k-sc-diff-breakdown .k-table { margin-bottom: 0; }
body:not(.wholesale-portal-body) .k-sc-diff-empty {
    min-height: 10rem;
    padding: var(--gp-sp-4);
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
}
body:not(.wholesale-portal-body) .k-sc-diff-json {
    display: block;
    width: 100%;
    height: 18rem;
    min-height: 12rem;
    margin: 0;
    padding: var(--gp-sp-3);
    resize: vertical;
    border: 0;
    background: var(--gp-bg);
    color: var(--gp-fg);
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    line-height: 1.45;
}
body:not(.wholesale-portal-body) .k-sc-diff-json:focus-visible {
    outline: 0.125rem solid var(--gp-accent);
    outline-offset: -0.125rem;
}
@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-sc-diff-heading__copy { display: none; }
    body:not(.wholesale-portal-body) .k-sc-diff-summary {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-sc-diff-summary__identity {
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-sc-diff-summary__metrics {
        border-top: var(--gp-border-w-thin) solid var(--gp-border);
        border-left: 0;
    }
    body:not(.wholesale-portal-body) .k-sc-diff-content { gap: var(--gp-sp-2); }
    body:not(.wholesale-portal-body) .k-sc-diff-panel__head {
        align-items: flex-start;
        min-height: 0;
        flex-wrap: wrap;
    }
    body:not(.wholesale-portal-body) .k-sc-diff-empty {
        min-height: 0;
        padding: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-sc-diff-json { height: 12rem; }
}

/* 31.10 Inventory ops — top-level dashboard page. The
 *        `.k-invops-dashboard` wrapper is the per-brand context
 *        that hosts the restock window controls + the per-product
 *        product cards. */

body:not(.wholesale-portal-body) .k-invops-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}

/* Amazon resupply draft creation turns the square topbar icon into a compact
 * staged progress capsule, then locks into an unmistakable success state. */
body:not(.wholesale-portal-body) .k-invops-draft-action {
    --k-invops-draft-progress: 0%;
    gap: 0;
    overflow: hidden;
    transition:
        width var(--gp-dur-slow) var(--gp-ease),
        flex-basis var(--gp-dur-slow) var(--gp-ease),
        padding var(--gp-dur) var(--gp-ease),
        gap var(--gp-dur) var(--gp-ease),
        background var(--gp-dur) var(--gp-ease),
        border-color var(--gp-dur) var(--gp-ease),
        color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-invops-draft-action__visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
}

body:not(.wholesale-portal-body) .k-invops-draft-action__idle-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action__spinner,
body:not(.wholesale-portal-body) .k-invops-draft-action__success-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action__error-icon {
    grid-area: 1 / 1;
}

body:not(.wholesale-portal-body) .k-invops-draft-action__spinner,
body:not(.wholesale-portal-body) .k-invops-draft-action__success-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action__error-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action__status {
    display: none;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-success,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-error {
    width: 12.5rem;
    flex: 0 0 12.5rem;
    justify-content: flex-start;
    gap: var(--gp-sp-2);
    padding-inline: var(--gp-sp-3);
    background: var(--gp-muted);
    opacity: 1;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading {
    border-color: var(--gp-accent);
    color: var(--gp-accent);
    cursor: progress;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-success {
    border-color: var(--gp-success);
    color: var(--gp-success);
    cursor: default;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-error {
    border-color: var(--gp-danger);
    color: var(--gp-danger);
    cursor: wait;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading .k-invops-draft-action__idle-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__idle-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-error .k-invops-draft-action__idle-icon {
    display: none;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading .k-invops-draft-action__spinner,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__success-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-error .k-invops-draft-action__error-icon,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading .k-invops-draft-action__status,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__status,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-error .k-invops-draft-action__status {
    display: block;
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading .kinetic-topbar__icon-label,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .kinetic-topbar__icon-label,
body:not(.wholesale-portal-body) .k-invops-draft-action.is-error .kinetic-topbar__icon-label {
    display: none;
}

body:not(.wholesale-portal-body) .k-invops-draft-action__status {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--gp-fg);
    text-align: left;
}

body:not(.wholesale-portal-body) .k-invops-draft-action__status-copy {
    display: block;
    overflow: hidden;
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-draft-action__progress {
    display: block;
    height: 0.1875rem;
    margin-top: var(--gp-sp-1);
    overflow: hidden;
    background: var(--gp-border);
}

body:not(.wholesale-portal-body) .k-invops-draft-action__progress-bar {
    display: block;
    width: var(--k-invops-draft-progress);
    height: 100%;
    background: var(--gp-accent);
    transition: width var(--gp-dur-slow) var(--gp-ease), background var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__progress-bar {
    background: var(--gp-success);
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-error .k-invops-draft-action__progress-bar {
    background: var(--gp-danger);
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__success-icon {
    animation: k-invops-draft-success-pop 360ms var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-invops-draft-action.is-success .k-invops-draft-action__visual::after {
    content: "";
    position: absolute;
    inset: -0.45rem;
    border: var(--gp-border-w-thin) solid var(--gp-success);
    opacity: 0;
    pointer-events: none;
    animation: k-invops-draft-success-ring 620ms var(--gp-ease);
}

@keyframes k-invops-draft-success-pop {
    0% { transform: scale(0.45); opacity: 0; }
    65% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes k-invops-draft-success-ring {
    0% { transform: scale(0.55); opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-invops-draft-action.is-loading,
    body:not(.wholesale-portal-body) .k-invops-draft-action.is-success,
    body:not(.wholesale-portal-body) .k-invops-draft-action.is-error {
        width: 2.5rem;
        flex: 0 0 2.5rem;
        justify-content: center;
        gap: 0;
        padding-inline: 0;
    }

    body:not(.wholesale-portal-body) .k-invops-draft-action__status {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-invops-draft-action,
    body:not(.wholesale-portal-body) .k-invops-draft-action__progress-bar {
        transition: none;
    }

    body:not(.wholesale-portal-body) .k-invops-draft-action__spinner,
    body:not(.wholesale-portal-body) .k-invops-draft-action__success-icon,
    body:not(.wholesale-portal-body) .k-invops-draft-action__visual::after {
        animation: none;
    }
}

/* 31.10.1 Inventory ops — utility bar (replaces the old controls section). */

body:not(.wholesale-portal-body) .k-invops-utility-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
}

body:not(.wholesale-portal-body) .k-invops-utility-bar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--gp-sp-3);
    flex: 1 1 auto;
}

body:not(.wholesale-portal-body) .k-invops-utility-bar__label {
    margin-bottom: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-utility-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
    margin-left: auto;
}

body:not(.wholesale-portal-body) .k-invops-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-invops-controls__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-invops-controls__field { margin-bottom: 0; min-width: 12rem; }
body:not(.wholesale-portal-body) .k-invops-controls__input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}
body:not(.wholesale-portal-body) .k-invops-controls__input-group .k-input { flex: 1 1 auto; min-width: 0; }
body:not(.wholesale-portal-body) .k-invops-controls__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gp-sp-3);
    background: var(--gp-muted);
    border: var(--gp-border-w) solid var(--gp-border);
    border-left: 0;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 3.5rem;
}
body:not(.wholesale-portal-body) .k-invops-controls__hint {
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    flex: 1 1 16rem;
}
body:not(.wholesale-portal-body) .k-invops-controls__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-invops-controls__notice {
    border: var(--gp-border-w) solid var(--gp-warning);
    background: var(--gp-muted);
    color: var(--gp-fg);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    font-size: 0.875rem;
    border-left: 0.25rem solid var(--gp-warning);
}

/* 31.10.2 Inventory ops settings — keep help affordances attached to their
 * field labels and give consecutive settings rows a deliberate rhythm. */
body:not(.wholesale-portal-body) .k-invops-settings .k-form-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-invops-settings__field-heading {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-width: 0;
    margin-bottom: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-invops-settings__field-heading .k-label {
    min-width: 0;
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-invops-settings__field-heading .k-field-info-icon {
    flex: 0 0 auto;
    margin-left: 0;
}

/* 31.11 Inventory ops — per-product card (one product = one
 *        `.k-invops-product` block). The card is a 2-column CSS
 *        grid on >=992px: media aside + body. The family / row
 *        internals are the same shape as the pre-Phase-14
 *        markup, but with the bespoke class names replaced by
 *        the kinetic surface. */

body:not(.wholesale-portal-body) .k-invops-products {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-invops-product {
    padding: 0;
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-invops-product__grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-invops-product__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }
}
body:not(.wholesale-portal-body) .k-invops-product__media {
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
@media (min-width: 992px) {
    body:not(.wholesale-portal-body) .k-invops-product__media {
        border-bottom: 0;
        border-right: var(--gp-border-w-thin) solid var(--gp-border);
    }
}
body:not(.wholesale-portal-body) .k-invops-product__image {
    display: block;
    width: 100%;
    height: 13.75rem;
    object-fit: contain;
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-invops-product__image--missing {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-invops-product__head {
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-product__title {
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 var(--gp-sp-1) 0;
}
body:not(.wholesale-portal-body) .k-invops-product__type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
}
@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-invops-product__media {
        display: grid;
        grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
        align-items: stretch;
    }
    body:not(.wholesale-portal-body) .k-invops-product__image {
        height: 8.5rem;
    }
    body:not(.wholesale-portal-body) .k-invops-product__head {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--gp-sp-3);
        border-bottom: 0;
        border-left: var(--gp-border-w-thin) solid var(--gp-border);
    }
}

/* Reorder has long supplier-planning families, so keep its compact product
 * identity header above full-width recommendation rows at every width. */
body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__grid {
    grid-template-columns: 1fr;
}
body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__media {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
    align-items: stretch;
    border-right: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__image {
    height: 8.5rem;
}
body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gp-sp-3);
    border-bottom: 0;
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-product__body { display: flex; flex-direction: column; }
body:not(.wholesale-portal-body) .k-invops-family { border-top: var(--gp-border-w-thin) solid var(--gp-border); }
body:not(.wholesale-portal-body) .k-invops-family:first-of-type { border-top: 0; }
body:not(.wholesale-portal-body) .k-invops-family__head {
    padding: var(--gp-sp-2) var(--gp-sp-4);
    background: var(--gp-muted);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-family__trace-toggle {
    min-height: 2rem;
    padding-inline: var(--gp-sp-2);
    margin-block: calc(var(--gp-sp-1) * -1);
    margin-right: calc(var(--gp-sp-2) * -1);
    opacity: 1;
}
body:not(.wholesale-portal-body) .k-invops-family__title {
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.0625rem;
    color: var(--gp-fg);
    margin: 0;
}
body:not(.wholesale-portal-body) .k-invops-family__rows { display: flex; flex-direction: column; }

/* 31.12 Inventory ops — variant row. The pre-Phase-14 layout
 *        used a 5- or 7-column CSS grid with hard-coded
 *        `1.25rem` numeric values. The kinetic replacement is
 *        a 6-column reorder / 7-column Amazon grid with acid-yellow hero numbers
 *        (no Bootstrap blue, no `0d6efd`). The new
 *        `.k-invops-row__hero-value` is the visual anchor. */

body:not(.wholesale-portal-body) .k-invops-row {
    display: grid;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    grid-template-columns: minmax(7.5rem, 1.2fr) repeat(3, minmax(6.25rem, 1fr)) minmax(8.75rem, 1.4fr);
}
body:not(.wholesale-portal-body) .k-invops-row:last-child { border-bottom: 0; }
body:not(.wholesale-portal-body) .k-invops-row--reorder {
    grid-template-columns: minmax(7.5rem, 1.2fr) repeat(4, minmax(6.25rem, 1fr)) minmax(8.75rem, 1.4fr);
}
body:not(.wholesale-portal-body) .k-invops-row--amazon {
    grid-template-columns: minmax(7.5rem, 1.2fr) repeat(4, minmax(5.5rem, 1fr)) minmax(8.5rem, 1.15fr) minmax(6.75rem, 0.85fr);
}
body:not(.wholesale-portal-body) .k-invops-row__size { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body:not(.wholesale-portal-body) .k-invops-row__size-label {
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
body:not(.wholesale-portal-body) .k-invops-row__sku {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    font-family: var(--gp-font-mono);
}
body:not(.wholesale-portal-body) .k-invops-row__cell {
    display: grid;
    grid-template-rows: 2.25rem auto;
    align-items: end;
    justify-items: end;
    text-align: right;
    line-height: 1.1;
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-invops-row--amazon .k-invops-row__cell {
    justify-items: center;
    text-align: center;
}
body:not(.wholesale-portal-body) .k-invops-row__cell-value {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    min-height: 2.25rem;
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-invops-row__cell-value--danger {
    color: var(--gp-danger);
}
body:not(.wholesale-portal-body) .k-invops-row--amazon .k-invops-row__cell-value {
    justify-content: center;
}
body:not(.wholesale-portal-body) .k-invops-row__cell-label {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-invops-row__hero-value {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    min-height: 2.25rem;
    font-variant-numeric: tabular-nums;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gp-accent);
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-invops-row--amazon .k-invops-row__hero-value {
    justify-content: center;
}
body:not(.wholesale-portal-body) .k-invops-row--reorder .k-invops-row__hero-value { color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-invops-row--reorder[data-order-qty]:not([data-order-qty="0"]) .k-invops-row__hero-value { color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-invops-row--amazon .k-invops-row__hero-value { color: var(--gp-muted-foreground); }
body:not(.wholesale-portal-body) .k-invops-row--amazon[data-amazon-send-positive="1"] .k-invops-row__hero-value { color: var(--gp-accent); }
body:not(.wholesale-portal-body) .k-invops-row__quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-invops-row__quantity .k-input {
    width: 100%;
    max-width: 6.75rem;
    min-height: 2.75rem;
}
body:not(.wholesale-portal-body) .k-invops-row__override {
    appearance: textfield;
    padding: 0.5rem 0.75rem;
    background: var(--gp-muted);
    color: var(--gp-fg);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body:not(.wholesale-portal-body) .k-invops-row__override::-webkit-inner-spin-button,
body:not(.wholesale-portal-body) .k-invops-row__override::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}
body:not(.wholesale-portal-body) .k-invops-row__override::placeholder {
    color: var(--gp-muted-foreground);
    font-weight: 600;
    opacity: 1;
}
body:not(.wholesale-portal-body) .k-invops-row__override:hover {
    border-color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-invops-row__override:focus {
    background: var(--gp-bg);
    border-color: var(--gp-accent);
}

body:not(.wholesale-portal-body) .k-invops-row--hidden {
    display: none;
}

@media (max-width: 991.98px) {
    body:not(.wholesale-portal-body) .k-invops-row,
    body:not(.wholesale-portal-body) .k-invops-row--amazon {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gp-sp-2) var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) .k-invops-row__hero-value { font-size: 1.875rem; }
    body:not(.wholesale-portal-body) .k-invops-row__size,
    body:not(.wholesale-portal-body) .k-invops-row__quantity { grid-column: 1 / -1; }
}

/* Reorder is an exceptionally long planning surface. On phones, keep the
 * identity strip compact and fit its five metrics into two deliberate rows. */
@media (max-width: 575.98px) {
    /* Amazon Restock is primarily a scanning + quantity-entry surface. Keep
     * product identity compact and fit each variant into two metric rows so
     * operators can compare/send stock without excessive vertical travel. */
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-product__media {
        grid-template-columns: 7rem minmax(0, 1fr);
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-product__image {
        height: 7rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-product__head {
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-family__head {
        padding-inline: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon > .k-invops-row__size {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--gp-sp-1) var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__size-label {
        font-size: 1.0625rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__sku {
        font-size: 0.6875rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon > .k-invops-row__cell {
        grid-template-rows: 1.875rem auto;
        justify-items: center;
        text-align: center;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__cell-value,
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__hero-value {
        min-height: 1.875rem;
        justify-content: center;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__hero-value {
        font-size: 1.75rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon > .k-invops-row__quantity {
        grid-column: auto;
        align-self: end;
    }
    body:not(.wholesale-portal-body) .k-invops-products--amazon .k-invops-row--amazon .k-invops-row__quantity .k-input {
        max-width: none;
        min-height: 2.5rem;
    }

    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__media {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__image {
        height: 5.5rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-product__head {
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-family__head {
        padding-inline: var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-family__trace-toggle {
        flex: 0 0 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        justify-content: center;
        padding-inline: 0;
        margin-block: calc(var(--gp-sp-2) * -1);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-family__trace-toggle > span {
        display: none;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder > .k-invops-row__size {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--gp-sp-1) var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder .k-invops-row__size-label {
        font-size: 1.0625rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder .k-invops-row__sku {
        font-size: 0.6875rem;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder > .k-invops-row__cell {
        grid-template-rows: 1.875rem auto;
        justify-items: center;
        text-align: center;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder .k-invops-row__cell-value,
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder .k-invops-row__hero-value {
        min-height: 1.875rem;
        justify-content: center;
    }
    body:not(.wholesale-portal-body) .k-invops-products--reorder .k-invops-row--reorder > .k-invops-row__cell:last-of-type {
        grid-column: 2 / -1;
    }
}

/* 31.12.1 Inventory Ops — realtime low-inventory assessment. Keep product
 * identity compact and make the current on-hand quantity the scanning anchor. */
body:not(.wholesale-portal-body) .k-invops-products--low-inventory .k-invops-product__grid {
    grid-template-columns: 1fr;
}
body:not(.wholesale-portal-body) .k-invops-products--low-inventory .k-invops-product__media {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
    align-items: stretch;
    border-right: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-products--low-inventory .k-invops-product__image {
    height: 6.5rem;
}
body:not(.wholesale-portal-body) .k-invops-products--low-inventory .k-invops-product__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gp-sp-3);
    border-bottom: 0;
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-invops-row--low-inventory {
    grid-template-columns: minmax(9rem, 1.5fr) minmax(7rem, 0.6fr) minmax(7rem, 0.7fr);
    padding-block: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-invops-row--low-inventory .k-invops-row__cell {
    justify-items: end;
    text-align: right;
}
body:not(.wholesale-portal-body) .k-invops-row--low-inventory .k-invops-row__hero-value {
    color: var(--gp-muted-foreground);
    font-size: 1.75rem;
}
body:not(.wholesale-portal-body) .k-invops-row--low-inventory[data-low-inventory-match] .k-invops-row__hero-value,
body:not(.wholesale-portal-body) .k-invops-row--low-inventory[data-low-inventory-match] .k-invops-low-inventory__state {
    color: var(--gp-danger);
}
body:not(.wholesale-portal-body) .k-invops-low-inventory__state {
    justify-content: flex-end;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-invops-row--low-inventory {
        grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.8fr));
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-invops-row--low-inventory .k-invops-row__size-label {
        font-size: 1rem;
    }
    body:not(.wholesale-portal-body) .k-invops-row--low-inventory .k-invops-row__hero-value {
        font-size: 1.5rem;
    }
}

/* 31.13 Metrics — dark filter bar. A single horizontal dark panel
 *        positioned directly below the KPI cards. It spans nearly the
 *        full content width and is visually separated from the page
 *        with a thin gray border, subtle charcoal gradient, and
 *        slightly rounded corners. The bar houses three controls,
 *        left to right: time-frame dropdown, channel segmented
 *        control, and product-type dropdown. See
 *        KINETIC_PAGE_STRUCTURE_GUIDE.md for the section shell. */

/* Filter bar shell */
body:not(.wholesale-portal-body) .k-metrics-filterbar-section {
    padding-top: 0;
    margin-bottom: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-filterbar {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    flex-wrap: wrap;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 0.375rem;
    background: linear-gradient(180deg, #1f1f23 0%, #18181b 100%);
    color: #e4e4e7;
    position: relative;
    z-index: 5;
}
body:not(.wholesale-portal-body) .k-filterbar__control {
    position: relative;
    display: flex;
    align-items: center;
}
body:not(.wholesale-portal-body) .k-filterbar__control.is-disabled {
    opacity: 0.5;
}
body:not(.wholesale-portal-body) .k-filterbar__control--channel {
    margin: 0 auto;
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-filterbar {
        gap: var(--gp-sp-2);
        padding: var(--gp-sp-2) var(--gp-sp-3);
    }
    body:not(.wholesale-portal-body) .k-filterbar__control--channel {
        order: 3;
        width: 100%;
        margin: 0;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__control--channel {
        min-width: 0;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__segment {
        min-width: 0;
        padding: 0 var(--gp-sp-2);
        white-space: nowrap;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__segment:nth-child(even) {
        border-right: 0;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__segment:nth-child(-n+2) {
        border-bottom: 1px solid #3f3f46;
    }
    body:not(.wholesale-portal-body) .k-metrics-filterbar-section .k-filterbar__segment:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }
}

/* Dropdown trigger button */
body:not(.wholesale-portal-body) .k-filterbar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-3);
    background: #0d0d0f;
    color: #e4e4e7;
    border: 1px solid #3f3f46;
    border-radius: 0.25rem;
    font-family: var(--gp-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
    white-space: nowrap;
}
body:not(.wholesale-portal-body) .k-filterbar__btn:hover,
body:not(.wholesale-portal-body) .k-filterbar__btn:focus-visible {
    border-color: #71717a;
    color: #fff;
    outline: 0;
}
body:not(.wholesale-portal-body) .k-filterbar__control.is-open .k-filterbar__btn {
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-filterbar__btn[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}
body:not(.wholesale-portal-body) .k-filterbar__btn-icon {
    font-size: 0.875rem;
    color: #a1a1aa;
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-filterbar__btn:hover .k-filterbar__btn-icon,
body:not(.wholesale-portal-body) .k-filterbar__btn:focus-visible .k-filterbar__btn-icon {
    color: #fff;
}
body:not(.wholesale-portal-body) .k-filterbar__btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body:not(.wholesale-portal-body) .k-filterbar__btn-chevron {
    font-size: 0.75rem;
    color: #a1a1aa;
    transition: transform var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-filterbar__btn-chevron.is-rotated {
    transform: rotate(180deg);
    color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-filterbar__control--time .k-filterbar__btn {
    min-width: 11rem;
}
body:not(.wholesale-portal-body) .k-filterbar__control--product .k-filterbar__btn {
    min-width: 10rem;
}

/* Channel segmented control */
body:not(.wholesale-portal-body) .k-filterbar__segmented {
    display: inline-flex;
    border: 1px solid #3f3f46;
    border-radius: 0.25rem;
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-filterbar__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 var(--gp-sp-4);
    background: #0d0d0f;
    color: #e4e4e7;
    border: 0;
    border-right: 1px solid #3f3f46;
    font-family: var(--gp-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__segment:last-child {
    border-right: 0;
}
body:not(.wholesale-portal-body) .k-filterbar__segment:hover {
    background: #18181b;
    color: #fff;
}
body:not(.wholesale-portal-body) .k-filterbar__segment.is-active {
    background: var(--gp-accent);
    color: #000;
}
body:not(.wholesale-portal-body) .k-filterbar__segment.is-active:hover {
    background: var(--gp-accent);
    color: #000;
}

/* Anchored dropdown panels (shared) */
body:not(.wholesale-portal-body) .k-filterbar__panel {
    position: absolute;
    top: calc(100% + var(--gp-sp-2));
    left: 0;
    z-index: 50;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 0.375rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    padding: var(--gp-sp-4);
    color: #e4e4e7;
}
body:not(.wholesale-portal-body) .k-filterbar__panel[x-cloak] {
    display: none;
}
body:not(.wholesale-portal-body) .k-filterbar__panel-head {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a1a1aa;
    margin-bottom: var(--gp-sp-3);
}

/* Time-frame panel: two-area layout (presets + custom range) */
body:not(.wholesale-portal-body) .k-filterbar__panel--time {
    width: min(620px, calc(100vw - 2rem));
}
body:not(.wholesale-portal-body) .k-filterbar__panel-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gp-sp-4);
    align-items: start;
}
body:not(.wholesale-portal-body) .k-filterbar__presets {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
    padding-right: var(--gp-sp-3);
    border-right: 1px solid #3f3f46;
}
body:not(.wholesale-portal-body) .k-filterbar__preset-group-label {
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #71717a;
    margin-bottom: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-filterbar__preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-filterbar__preset {
    display: inline-flex;
    align-items: center;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: #0d0d0f;
    color: #d4d4d8;
    border: 1px solid #3f3f46;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__preset:hover {
    background: #27272a;
    color: #fff;
    border-color: #52525b;
}
body:not(.wholesale-portal-body) .k-filterbar__preset.is-active {
    background: var(--gp-accent);
    color: #000;
    border-color: var(--gp-accent);
    font-weight: 700;
}

/* Custom range area */
body:not(.wholesale-portal-body) .k-filterbar__custom {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-filterbar__custom-label {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a1a1aa;
}
body:not(.wholesale-portal-body) .k-filterbar__custom-form {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-filterbar__date-field {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-filterbar__date-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a1a1aa;
}
body:not(.wholesale-portal-body) .k-filterbar__date-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: #0d0d0f;
    border: 1px solid #3f3f46;
    border-radius: 0.25rem;
    transition: border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__date-input-wrap:focus-within {
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-filterbar__date-icon {
    font-size: 0.875rem;
    color: #71717a;
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-filterbar__date-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 0.8125rem;
    font-family: var(--gp-font-body);
    outline: 0;
    color-scheme: dark;
}
body:not(.wholesale-portal-body) .k-filterbar__custom-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-3);
    margin-top: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-filterbar__cancel {
    background: transparent;
    border: 0;
    color: #a1a1aa;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    cursor: pointer;
    padding: var(--gp-sp-2);
    transition: color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__cancel:hover {
    color: #fff;
}
body:not(.wholesale-portal-body) .k-filterbar__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--gp-sp-2) var(--gp-sp-4);
    background: var(--gp-accent);
    color: #000;
    border: 0;
    border-radius: 0.25rem;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__apply:hover:not(:disabled) {
    filter: brightness(1.1);
}
body:not(.wholesale-portal-body) .k-filterbar__apply:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Product-type panel */
body:not(.wholesale-portal-body) .k-filterbar__panel--product {
    width: min(320px, calc(100vw - 2rem));
    max-height: 26rem;
    overflow-y: auto;
}
body:not(.wholesale-portal-body) .k-filterbar__options {
    display: flex;
    flex-direction: column;
    gap: 0;
}
body:not(.wholesale-portal-body) .k-filterbar__option {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    background: transparent;
    color: #d4d4d8;
    border: 0;
    border-bottom: 1px solid #27272a;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__option:last-child {
    border-bottom: 0;
}
body:not(.wholesale-portal-body) .k-filterbar__option:hover {
    background: #27272a;
    color: #fff;
}
body:not(.wholesale-portal-body) .k-filterbar__option.is-active {
    color: #fff;
    background: #1f1f23;
}
body:not(.wholesale-portal-body) .k-filterbar__option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    background: #0d0d0f;
    border: 1px solid #3f3f46;
    border-radius: 0.1875rem;
    transition: background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-filterbar__option.is-active .k-filterbar__option-check {
    background: var(--gp-accent);
    border-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-filterbar__option.is-active .k-filterbar__option-check::after {
    content: '';
    width: 0.375rem;
    height: 0.5625rem;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
body:not(.wholesale-portal-body) .k-filterbar__option-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile: panels go near-full-width */
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-filterbar__panel {
        left: 0;
        right: 0;
        width: auto;
    }
    body:not(.wholesale-portal-body) .k-filterbar__panel--time {
        width: auto;
    }
    body:not(.wholesale-portal-body) .k-filterbar__panel-body {
        grid-template-columns: 1fr;
        gap: var(--gp-sp-4);
    }
    body:not(.wholesale-portal-body) .k-filterbar__presets {
        border-right: 0;
        border-bottom: 1px solid #3f3f46;
        padding-right: 0;
        padding-bottom: var(--gp-sp-3);
    }
}

/* 31.14 Metrics — KPI row. The reusable `.k-kpi-row` module is a
 *        3-col CSS grid of centered stat tiles with a large display
 *        value, small uppercase eyebrow, and muted sub label. The
 *        tiles stay side-by-side at every width; fonts scale down on
 *        narrow screens so three KPIs always fit on one row.
 *        `.k-metrics-kpi-section` is the page-specific wrapper that
 *        adds the top padding below the page title and the bottom
 *        margin separating the hero strip from the Filters section. */

body:not(.wholesale-portal-body) .k-metrics-kpi-section {
    padding-top: 1.5rem;
    margin-bottom: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-kpi-row,
body:not(.wholesale-portal-body) .k-metrics-kpi-row {
    display: grid;
    gap: var(--gp-sp-3);
    /* Keep the KPIs side-by-side at every width; the value and label
     * fonts scale down on narrow screens so they all fit on one row. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-kpi,
body:not(.wholesale-portal-body) .k-metrics-kpi {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-kpi__eyebrow,
body:not(.wholesale-portal-body) .k-metrics-kpi__eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-kpi__value,
body:not(.wholesale-portal-body) .k-metrics-kpi__value {
    font-family: var(--gp-font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
body:not(.wholesale-portal-body) .k-kpi__sub,
body:not(.wholesale-portal-body) .k-metrics-kpi__sub {
    font-size: 0.875rem;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-kpi__sub strong,
body:not(.wholesale-portal-body) .k-metrics-kpi__sub strong { color: var(--gp-fg); font-weight: 700; }

/* Narrow screens: shrink the value, eyebrow, and sub copy so the
 *        KPIs stay on one row without truncation or overflow. */
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-kpi-row,
    body:not(.wholesale-portal-body) .k-metrics-kpi-row {
        gap: var(--gp-sp-2);
    }
    body:not(.wholesale-portal-body) .k-kpi,
    body:not(.wholesale-portal-body) .k-metrics-kpi {
        gap: var(--gp-sp-1);
    }
    body:not(.wholesale-portal-body) .k-kpi__eyebrow,
    body:not(.wholesale-portal-body) .k-metrics-kpi__eyebrow {
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }
    body:not(.wholesale-portal-body) .k-kpi__value,
    body:not(.wholesale-portal-body) .k-metrics-kpi__value {
        font-size: clamp(1.25rem, 7vw, 2rem);
        line-height: 0.95;
        letter-spacing: -0.03em;
    }
    body:not(.wholesale-portal-body) .k-kpi__sub,
    body:not(.wholesale-portal-body) .k-metrics-kpi__sub {
        font-size: 0.6875rem;
        line-height: 1.2;
    }
}

/* 31.15 Metrics — section card. The pre-Phase-14 `<div
 *        class="card mb-4">` + `<h5 class="card-title">` +
 *        `<div class="card-body">` shells become a flat
 *        `.k-metrics-section` + `.k-metrics-section__head` +
 *        `.k-metrics-section__body` trio. The filter input on
 *        the table sections keeps its ID contract
 *        (`#family-filter-input`, `#variant-filter-input`). */

body:not(.wholesale-portal-body) .k-metrics-section { padding: 0; margin-bottom: var(--gp-sp-4); }
/* Under the structured page shell, .k-page-section owns vertical rhythm;
 * neutralize the inner .k-metrics-section margin so spacing isn't doubled. */
body:not(.wholesale-portal-body) .k-page-section > .k-metrics-section { margin-bottom: 0; }
/* Drop trailing inner-block margins inside a page section so the
 * section's own rhythm isn't doubled by its last child. */
body:not(.wholesale-portal-body) .k-page-section > .k-kpi-row:last-child,
body:not(.wholesale-portal-body) .k-page-section > .k-metrics-pair:last-child {
    margin-bottom: 0;
}
body:not(.wholesale-portal-body) .k-metrics-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    flex-wrap: wrap;
}
body:not(.wholesale-portal-body) .k-metrics-section__title {
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
body:not(.wholesale-portal-body) .k-metrics-section__filter {
    max-width: 11.25rem;
    min-height: 2.5rem;
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-metrics-section__filter::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 0.78;
}
body:not(.wholesale-portal-body) .k-metrics-section__table-hint {
    display: none;
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-metrics-section__head--table {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    body:not(.wholesale-portal-body) .k-metrics-section__head--table .k-metrics-section__filter {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }
    body:not(.wholesale-portal-body) .k-metrics-section__table-hint {
        display: inline-flex;
        align-items: center;
        gap: var(--gp-sp-1);
        color: var(--gp-muted-foreground);
        font-family: var(--gp-font-display);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }
}
body:not(.wholesale-portal-body) .k-metrics-section__body { padding: 0; }
body:not(.wholesale-portal-body) .k-metrics-section__body--padded { padding: var(--gp-sp-4); }
body:not(.wholesale-portal-body) .k-metrics-section__empty {
    text-align: center;
    color: var(--gp-muted-foreground);
    padding: var(--gp-sp-6);
}

/* 31.16a Metrics — lowest-revenue pair grid. Retained for the
 *        Lowest Revenue Products / Variants paired sections. */
body:not(.wholesale-portal-body) .k-metrics-pair {
    display: grid;
    gap: var(--gp-sp-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    body:not(.wholesale-portal-body) .k-metrics-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 31.16 Metrics — channel performance proportional split bar.
 *        Replaces the two separate Shopify/Amazon cards with one thin
 *        full-width horizontal bar divided proportionally by revenue
 *        share, plus a compact label row beneath. See
 *        KINETIC_MODULES_ACTIONS_AND_UTILITIES.md for the .k-segmented-bar module. */

:root {
    --gp-channel-shopify: #22c55e;
    --gp-channel-wholesale: #a855f7;
    --gp-channel-amazon: #2563eb;
}

body:not(.wholesale-portal-body) .k-metrics-splitbar-section {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--gp-sp-6);
}
body:not(.wholesale-portal-body) .k-segmented-bar {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-segmented-bar__bar {
    display: flex;
    width: 100%;
    height: 20px;
    border-radius: 0.1875rem;
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-segmented-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    transition: filter var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-segmented-bar__segment:hover {
    filter: brightness(1.1);
}
body:not(.wholesale-portal-body) .k-segmented-bar__percent {
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
@media (max-width: 520px) {
    body:not(.wholesale-portal-body) .k-segmented-bar__percent {
        display: none;
    }
}
body:not(.wholesale-portal-body) .k-segmented-bar__labels {
    display: flex;
    width: 100%;
    gap: var(--gp-sp-2);
    /* Prevent label overflow from escaping the row and pushing into
     * adjacent labels. Each label is capped to its inline width:N%
     * and clips its content with ellipsis. */
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-segmented-bar__label {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
    /* No grow, no shrink: the inline width:N% from the server sets a
     * hard cap matching the segment share so narrow-segment labels
     * truncate instead of overlapping their neighbors. */
    flex: 0 0 auto;
}
body:not(.wholesale-portal-body) .k-segmented-bar__name {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    font-family: var(--gp-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-segmented-bar__dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
body:not(.wholesale-portal-body) .k-segmented-bar__meta {
    font-size: 0.6875rem;
    color: var(--gp-muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 520px) {
    body:not(.wholesale-portal-body) .k-segmented-bar__labels {
        flex-direction: column;
        gap: var(--gp-sp-2);
        overflow: visible;
    }
    body:not(.wholesale-portal-body) .k-segmented-bar__label {
        width: auto !important;
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* Optional one-shot fill motion. The component remains completely
 * static unless both the modifier and the generic reveal-once hook
 * are present. JavaScript only adds lifecycle classes; CSS owns the
 * clip and label transitions. */
body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill {
    --k-segmented-bar-fill-duration: 720ms;
    --k-segmented-bar-label-duration: 240ms;
    --k-segmented-bar-label-delay: 460ms;
    --k-segmented-bar-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill .k-segmented-bar__bar {
    contain: paint;
}
@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill.is-motion-ready .k-segmented-bar__bar {
        clip-path: inset(0 100% 0 0);
        transition: clip-path var(--k-segmented-bar-fill-duration) var(--k-segmented-bar-motion-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill.is-motion-ready .k-segmented-bar__label {
        opacity: 0;
        transform: translate3d(-0.35rem, 0, 0);
        transition: opacity var(--k-segmented-bar-label-duration) var(--gp-ease),
                    transform var(--k-segmented-bar-label-duration) var(--gp-ease);
        transition-delay: var(--k-segmented-bar-label-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill.is-motion-ready.is-motion-visible .k-segmented-bar__bar {
        clip-path: inset(0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-segmented-bar--motion-fill.is-motion-ready.is-motion-visible .k-segmented-bar__label {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 31.17 Metrics — platform selector + category nav. The
 *        pre-Phase-14 `btn-group` of three pills becomes the
 *        shared `.k-tabs` strip with `.k-tab` + `--active`
 *        modifiers. The category nav stays as a 12px uppercase
 *        link row (existing pattern from §6). */

body:not(.wholesale-portal-body) .k-metrics-platform-selector {
    display: flex;
    justify-content: center;
    margin-bottom: var(--gp-sp-4);
}
body:not(.wholesale-portal-body) .k-metrics-platform-selector .k-tabs {
    margin: 0;
}
body:not(.wholesale-portal-body) .k-metrics-platform-selector .k-tab {
    background: var(--gp-bg);
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-metrics-platform-selector .k-tab.is-active {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border-bottom-color: var(--gp-accent);
}
body:not(.wholesale-portal-body) .k-metrics-category-nav {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--gp-sp-3);
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-metrics-category-nav a {
    color: var(--gp-muted-foreground);
    text-decoration: none;
    margin: 0 var(--gp-sp-1);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
body:not(.wholesale-portal-body) .k-metrics-category-nav a:hover { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-metrics-category-nav a.is-active {
    color: var(--gp-fg);
    border-bottom-color: var(--gp-accent);
    font-weight: 700;
}

/* 31.18 Metrics — expand chevron / collapse trigger. The
 *        `.metrics-parent-row` class is preserved as a
 *        co-class for the existing JS contract; the new
 *        `.k-metrics-toggle` provides the kinetic visual
 *        (acid-yellow chevron that rotates 90° on open). The
 *        `.k-metrics-children-row` / `.k-metrics-nested-table`
 *        / `.k-metrics-style-row` / `.k-metrics-size-row` /
 *        `.k-metrics-expand-cell` classes preserve the JS
 *        contract from app.css:1262-1313. */

body:not(.wholesale-portal-body) .k-metrics-table-wrap:focus-visible {
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: calc(-1 * var(--gp-border-w));
}
body:not(.wholesale-portal-body) .k-metrics-table {
    margin: 0;
    width: 100%;
}
body:not(.wholesale-portal-body) .k-metrics-table .k-table__cell--num {
    font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-metrics-table-wrap {
        overscroll-behavior-x: contain;
    }
    body:not(.wholesale-portal-body) #variant-totals-table {
        min-width: 52rem;
    }
    body:not(.wholesale-portal-body) .k-metrics-table > thead > tr > th:first-child,
    body:not(.wholesale-portal-body) .k-metrics-table > tbody > tr:not(.k-metrics-children-row) > td:first-child {
        position: sticky;
        left: 0;
    }
    body:not(.wholesale-portal-body) .k-metrics-table > thead > tr > th:first-child {
        z-index: 2;
        background: var(--gp-muted);
    }
    body:not(.wholesale-portal-body) .k-metrics-table > tbody > tr:not(.k-metrics-children-row) > td:first-child {
        z-index: 1;
        background: var(--gp-bg);
    }
}
body:not(.wholesale-portal-body) .k-metrics-table thead th {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
    border-top: 0;
}
body:not(.wholesale-portal-body) .k-metrics-table tbody td {
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}
body:not(.wholesale-portal-body) .k-metrics-parent-row > .k-metrics-expand-cell { user-select: none; }
body:not(.wholesale-portal-body) .k-metrics-toggle {
    background: transparent;
    border: 0;
    color: var(--gp-accent);
    cursor: pointer;
    min-width: var(--gp-sp-6);
    min-height: var(--gp-sp-6);
    padding: 0 var(--gp-sp-1);
    line-height: 1;
    font-family: var(--gp-font-display);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    transition: color var(--gp-dur) var(--gp-ease);
}
body:not(.wholesale-portal-body) .k-metrics-toggle:hover { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-metrics-toggle:focus-visible {
    color: var(--gp-fg);
    outline: var(--gp-border-w) solid var(--gp-accent);
    outline-offset: 1px;
}
body:not(.wholesale-portal-body) .k-metrics-toggle__icon {
    display: inline-block;
    transition: transform var(--gp-dur) var(--gp-ease);
    font-size: 0.875rem;
    line-height: 1;
}
body:not(.wholesale-portal-body) .k-metrics-toggle[aria-expanded="true"] .k-metrics-toggle__icon { transform: rotate(90deg); }
body:not(.wholesale-portal-body) .k-metrics-toggle__label {
    color: var(--gp-fg);
    text-transform: none;
    font-size: 0.9375rem;
}
body:not(.wholesale-portal-body) .k-metrics-child-row .k-metrics-expand-cell { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-metrics-children-row > td { background: var(--gp-muted); border-top: 0; padding: 0; }
body:not(.wholesale-portal-body) .k-metrics-children-row .k-table { background: transparent; margin: 0; }
body:not(.wholesale-portal-body) .k-metrics-nested-table {
    margin: 0;
    width: 100%;
    background: transparent;
}
body:not(.wholesale-portal-body) .k-metrics-nested-table thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    background: transparent;
    border-bottom-width: var(--gp-border-w-thin);
    padding: var(--gp-sp-2) var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-metrics-nested-table tbody tr.k-metrics-style-row > td:first-child,
body:not(.wholesale-portal-body) .k-metrics-nested-table tbody tr.k-metrics-size-row > td:first-child {
    font-weight: 500;
}
body:not(.wholesale-portal-body) .k-metrics-nested-table tbody tr.k-metrics-size-row > td {
    background: var(--gp-bg);
}
body:not(.wholesale-portal-body) .k-metrics-nested-table tbody td {
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
}

/* 31.19 Metrics — markdown export footer block removed. The
 *        Export Report action now lives in the shared
 *        .kinetic-page-title__action slot (see §31.13 header
 *        comment), so the duplicate in-content footer CTA and its
 *        caption are no longer rendered. */

/* 31.20 ASD dashboard tunnel — iframe shell. The top-level
 *        `/apps/asd/dashboard` route renders a compact navigation
 *        bar and a full-bleed `<iframe>` whose `src` points at the
 *        internal `/apps/asd/dashboard/embed` proxy route. The shell
 *        hides the standard admin chrome and keeps one return path,
 *        the local dashboard identity, and one refresh action. */

.k-asd-tunnel-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    background: var(--gp-bg);
    color: var(--gp-fg);
}
@supports (height: 100dvh) {
    .k-asd-tunnel-shell { height: 100dvh; }
}
.k-asd-tunnel-topbar {
    flex: 0 0 auto;
    min-height: 4rem;
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    padding: 0 var(--gp-sp-4);
    background: var(--gp-bg);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}
.k-asd-tunnel-topbar__home {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.k-asd-tunnel-topbar__home:hover,
.k-asd-tunnel-topbar__home:focus-visible { color: var(--gp-fg); }
.k-asd-tunnel-topbar__brand-mark {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    font-weight: 700;
}
.k-asd-tunnel-topbar__home-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    font-size: 0.875rem;
    white-space: nowrap;
}
.k-asd-tunnel-topbar__identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-left: var(--gp-sp-3);
    border-left: var(--gp-border-w-thin) solid var(--gp-border);
}
.k-asd-tunnel-topbar__eyebrow {
    color: var(--gp-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
.k-asd-tunnel-topbar__title {
    overflow: hidden;
    margin: 0;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.k-asd-tunnel-topbar__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    margin-left: auto;
}
.k-asd-tunnel-topbar__refresh { white-space: nowrap; }
.k-asd-tunnel-topbar__refresh-label { margin-left: var(--gp-sp-1); }
.k-asd-tunnel-frame {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--gp-bg);
}

@media (max-width: 39.99rem) {
    .k-asd-tunnel-topbar {
        min-height: 3.5rem;
        gap: var(--gp-sp-2);
        padding: 0 var(--gp-sp-2);
        padding-right: calc(var(--gp-sp-2) + env(safe-area-inset-right));
        padding-left: calc(var(--gp-sp-2) + env(safe-area-inset-left));
    }
    .k-asd-tunnel-topbar__home {
        min-width: 2.75rem;
        min-height: 2.75rem;
        justify-content: center;
    }
    .k-asd-tunnel-topbar__home-label,
    .k-asd-tunnel-topbar__eyebrow,
    .k-asd-tunnel-topbar__refresh-label { display: none; }
    .k-asd-tunnel-topbar__identity {
        padding-left: var(--gp-sp-2);
    }
    .k-asd-tunnel-topbar__title { font-size: 0.8125rem; }
    .k-asd-tunnel-topbar__refresh {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding-right: 0;
        padding-left: 0;
        justify-content: center;
    }
}
.k-asd-tunnel-error {
    margin: var(--gp-sp-6) auto;
    max-width: 32rem;
}
.k-asd-tunnel-error__panel {
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-danger);
    border-left-width: 0.5rem;
    padding: var(--gp-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-3);
}
.k-asd-tunnel-error__title {
    font-family: var(--gp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gp-danger);
    margin: 0;
}
.k-asd-tunnel-error__message { color: var(--gp-fg); margin: 0; }
.k-asd-tunnel-error__back { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-metrics-toggle__icon,
    body:not(.wholesale-portal-body) .k-metrics-toggle,
    body:not(.wholesale-portal-body) .k-invops-row {
        transition: none;
    }
}

/* 31.21 Phase 14 — utility co-classes shared across the four tools.
 *        These wrap the existing `--gp-*` tokens in a status-tinted
 *        text / background color the inline JS swaps via className
 *        updates. */

body:not(.wholesale-portal-body) .k-table__muted { color: var(--gp-muted-foreground); font-size: 0.875rem; }
body:not(.wholesale-portal-body) .k-text-danger { color: var(--gp-danger); }

body:not(.wholesale-portal-body) .k-sc-runner__status--info { color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-sc-runner__status--success { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sc-runner__status--danger { color: var(--gp-danger); }
body:not(.wholesale-portal-body) .k-sc-diagnostic__status--info { color: var(--gp-info); }
body:not(.wholesale-portal-body) .k-sc-diagnostic__status--success { color: var(--gp-success); }
body:not(.wholesale-portal-body) .k-sc-diagnostic__status--danger { color: var(--gp-danger); }

/* 31.22 Inventory ops — tab switcher. The pre-Phase-14
 *        `.inventory-ops-tabs .inventory-ops-tab` Bootstrap
 *        pill row is replaced by the shared `.k-tabs` strip
 *        with the new `.k-invops-tabs__tab` co-class for the
 *        custom icon + label pattern. */

body:not(.wholesale-portal-body) .k-invops-tabs {
    margin-bottom: var(--gp-sp-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
body:not(.wholesale-portal-body) .k-invops-tabs__tab {
    flex: 0 0 auto;
    text-decoration: none;
    border-bottom-width: 4px;
}

body:not(.wholesale-portal-body) .k-invops-supplier-filter {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: var(--gp-sp-1);
    scrollbar-width: thin;
}
body:not(.wholesale-portal-body) .k-invops-supplier-filter__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-invops-supplier-filter__button {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0 var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: transparent;
    color: var(--gp-muted-foreground);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
}
body:not(.wholesale-portal-body) .k-invops-supplier-filter__button:hover {
    border-color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-invops-supplier-filter__button.is-active {
    border-color: var(--gp-fg);
    background: var(--gp-muted);
    color: var(--gp-fg);
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-invops-supplier-filter__button:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}
/* 31.23 Inventory ops — empty state (replaces the
 *        `.text-center .text-muted` empty block). */

body:not(.wholesale-portal-body) .k-empty-state {
    text-align: center;
    padding: var(--gp-sp-8) var(--gp-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    align-items: center;
    color: var(--gp-muted-foreground);
}
body:not(.wholesale-portal-body) .k-empty-state__title {
    font-family: var(--gp-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gp-fg);
    margin: 0;
}
body:not(.wholesale-portal-body) .k-empty-state__body {
    font-size: 0.875rem;
    margin: 0;
}

/* 31.24 Metrics — date range panel helpers + nested table inner +
 *        indent modifiers. The pre-Phase-14 panel used a stacked
 *        list of inline anchors; the new panel uses a per-group
 *        row + the shared `.k-form-grid` for the custom-range
 *        form. */

body:not(.wholesale-portal-body) .k-metrics-range-group {
    margin-bottom: var(--gp-sp-2);
    font-size: 0.875rem;
}
body:not(.wholesale-portal-body) .k-metrics-range-group strong {
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    margin-right: var(--gp-sp-1);
}
body:not(.wholesale-portal-body) .k-metrics-category-nav__link {
    color: var(--gp-muted-foreground);
    text-decoration: none;
    margin: 0 var(--gp-sp-1);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
body:not(.wholesale-portal-body) .k-metrics-category-nav__link:hover { color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-metrics-category-nav__link.is-active {
    color: var(--gp-fg);
    border-bottom-color: var(--gp-accent);
    font-weight: 700;
}
body:not(.wholesale-portal-body) .k-metrics-range-custom { margin-top: var(--gp-sp-3); }

body:not(.wholesale-portal-body) .k-form-grid--inline {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--gp-sp-3);
}
body:not(.wholesale-portal-body) .k-form-grid--inline .k-field { margin-bottom: 0; }

body:not(.wholesale-portal-body) .k-metrics-children-row__inner { padding: 0; }
body:not(.wholesale-portal-body) .k-metrics-indent--1 { padding-left: var(--gp-sp-6) !important; }
body:not(.wholesale-portal-body) .k-metrics-indent--2 { padding-left: var(--gp-sp-8) !important; }

/* 31.25 ASD dashboard tunnel — body + app-content resets. The
 *        shell page passes `body_class="k-asd-tunnel-body"` and
 *        `app_content_class="k-asd-tunnel-app-content"` so the
 *        default `<main><div class="app-content">` chrome drops
 *        its padding / sidebar offset and the iframe shell can
 *        fill the viewport. The wholesale portal is unaffected. */

body.k-asd-tunnel-body .app-wrapper { display: block; }
body.k-asd-tunnel-body .app-main { padding: 0; margin: 0; min-height: 100vh; }
body.k-asd-tunnel-body .app-content.k-asd-tunnel-app-content,
body.k-asd-tunnel-body .app-content.k-asd-tunnel-app-content > .container-fluid,
body.k-asd-tunnel-body .app-content.k-asd-tunnel-app-content .content-wrapper {
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
}

/* ---- 32. Phase 15 — Brand admin + Placeholder tools ---------------
 *
 * The §32 surface covers the per-tool re-skin for the eight
 * placeholder tools (Order Monitor, Homepage Updater, Inventory
 * Reorder, Amazon Restock, Product Asset Generator, Product
 * Description Tool, Employee Ops Dashboard) and the Brand Admin
 * tool. The placeholder tools all render through
 * `src/Ui/PlaceholderAppPage.php`; the Brand Admin renders
 * through the standard DadKit list + drawer + form pattern
 * (Phase 3) with a single custom list cell that combines a
 * 48×48 color swatch logo + a 24px bold uppercase name.
 *
 *   - .k-alert--placeholder (full-bleed acid-yellow page alert)
 *   - .k-alert__eyebrow (12px uppercase tracking-widest)
 *   - .k-alert__message + __message--hero (48px bold uppercase)
 *   - .k-alert__body (16px body copy)
 *   - .k-alert__action (back-to-dashboard action row)
 *   - .k-brand-identity (the brand admin first-column cell)
 *   - .k-brand-identity__swatch (48x48 sharp color thumbnail)
 *   - .k-brand-identity__name (24px bold uppercase name)
 *   - .k-brand-identity__slug (12px uppercase tracking-widest)
 *   - .k-dadkit-error-card (DadKit.php errorPage co-class)
 *
 * Wholesale portal is excluded per Decision 6 — every selector in
 * this section is scoped to `body:not(.wholesale-portal-body)`
 * (with the exception of the placeholder alert, which inherits
 * the body-level alert co-classes and is itself portal-safe
 * because the wholesale portal does not render any
 * `PlaceholderAppPage`).
 */

/* 32.1 Placeholder alert — full-bleed acid-yellow page alert.
 *      Carries the `k-card--filled` co-class from the previous
 *      Phase 2 re-skin so any external consumer of that class
 *      continues to receive the visual baseline. */

body:not(.wholesale-portal-body) .k-alert--placeholder {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 0;
    border-left: 0;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
    min-height: 320px;
    justify-content: center;
}
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__eyebrow {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--gp-accent-fg);
    opacity: 0.85;
}
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__message {
    font-family: var(--gp-font-display);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--gp-accent-fg);
    margin: 0;
}
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__message--hero { font-size: clamp(2.5rem, 6vw, 4.5rem); }
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__body {
    font-family: var(--gp-font-body, var(--gp-font-display));
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--gp-accent-fg);
    margin: 0;
    max-width: 56ch;
}
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__action {
    align-self: flex-start;
    margin-top: var(--gp-sp-3);
    background: var(--gp-accent-fg);
    color: var(--gp-accent);
    border-color: var(--gp-accent-fg);
}
body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__action:hover {
    background: var(--gp-bg);
    color: var(--gp-fg);
    border-color: var(--gp-bg);
}
@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-alert--placeholder .k-alert__action { transition: none; }
}

/* 32.2 Brand identity cell — first column of the brand admin
 *      list. 48×48 sharp swatch (the brand's primary color from
 *      `brand_colors[0]`, falling back to `logo_variants[0].url`
 *      if a logo URL is available, then to a `var(--gp-muted)`
 *      placeholder) + 24px bold uppercase name + 12px muted
 *      uppercase slug. The cell is a flex row that aligns the
 *      swatch and text vertically. */

body:not(.wholesale-portal-body) .k-brand-identity {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 48px;
    padding: var(--gp-sp-1) 0;
}
body:not(.wholesale-portal-body) .k-brand-identity__swatch {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-muted);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
}
body:not(.wholesale-portal-body) .k-brand-identity__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body:not(.wholesale-portal-body) .k-brand-identity__text {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-brand-identity__name {
    font-family: var(--gp-font-display);
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--gp-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24ch;
}
body:not(.wholesale-portal-body) .k-brand-identity__slug {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24ch;
}
body:not(.wholesale-portal-body) .k-brand-identity__name a {
    color: inherit;
    text-decoration: none;
}
body:not(.wholesale-portal-body) .k-brand-identity__name a:hover {
    color: var(--gp-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-brand-identity__name a { transition: none; }
}

/* 32.3 DadKit error card — the errorPage() method in DadKit.php
 *      used to emit `card card-outline card-danger` Bootstrap
 *      markup. Phase 15 swaps it for the kinetic `.k-card` +
 *      `.k-alert.k-alert--danger` pattern with the bold
 *      uppercase title and body copy. The legacy Bootstrap
 *      classes are kept as co-classes so any external
 *      consumer (none in the codebase) continues to work. */

body:not(.wholesale-portal-body) .k-dadkit-error-card {
    border-left: 4px solid var(--gp-danger);
}
body:not(.wholesale-portal-body) .k-dadkit-error-card .k-dadkit-error-card__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--gp-fg);
    margin: 0 0 var(--gp-sp-2);
}
body:not(.wholesale-portal-body) .k-dadkit-error-card .k-dadkit-error-card__body {
    color: var(--gp-fg);
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}
body:not(.wholesale-portal-body) .k-dadkit-error-card .k-dadkit-error-card__body + .k-dadkit-error-card__body {
    margin-top: var(--gp-sp-2);
}

/* Reduced-motion guard for the §32 surface. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-alert--placeholder,
    body:not(.wholesale-portal-body) .k-brand-identity,
    body:not(.wholesale-portal-body) .k-brand-identity__swatch,
    body:not(.wholesale-portal-body) .k-dadkit-error-card { transition: none; }
}

/* ---- 33. Public auth / callback shells (Phase 16) --------------------- */

body.k-login-page,
body.k-callback-page,
body.k-error-page {
    background: var(--gp-bg);
    min-height: 100vh;
}

.k-login,
.k-callback,
.k-error {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-8);
    padding: clamp(2rem, 5vw, 4rem) var(--gp-sp-4);
    background: var(--gp-bg);
    position: relative;
}

/* Phase 16 — public auth/callback/error shells hide the admin
   topbar/sidebar/footer (`show_* => false` in `auth/login.php`),
   but the default `.app-wrapper` still becomes a 2-column grid
   at >=1500px to reserve the sidebar column. The reserved column
   shifts the centered card to the right. Reset the wrapper to a
   single block on these shells so the card sits in the visual
   center of the viewport at every breakpoint. */
body.k-login-page .app-wrapper,
body.k-callback-page .app-wrapper,
body.k-error-page .app-wrapper {
    display: block;
    grid-template-columns: none;
}

/* Phase 17.2 — generic 403 / 404 / 500 error page shell. The
   body class `k-error-page` switches the page background and
   the `.k-error` block is the centered card. The optional
   `.k-error__marquee` is a thin strip of playful copy
   ("PAGES THAT DON'T EXIST YET" / "YOU SHOULDN'T BE HERE")
   that scrolls continuously. The text is `aria-hidden`; the
   page's actual copy is in the title + body. */
.k-error__card {
    width: 100%;
    max-width: 36rem;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

.k-error__code {
    font-family: var(--gp-font-display);
    font-size: clamp(5rem, 16vw, 10rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--gp-accent);
    margin: 0;
}

.k-error__code--danger { color: var(--gp-danger); }
.k-error__code--warning { color: var(--gp-warning); }
.k-error__code--info { color: var(--gp-info); }

.k-error__title {
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--gp-fg);
    margin: var(--gp-sp-6) 0 var(--gp-sp-3);
}

.k-error__body {
    font-family: var(--gp-font-body);
    color: var(--gp-muted-foreground);
    margin: 0 0 var(--gp-sp-6);
    line-height: 1.5;
}

.k-error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-3);
    justify-content: center;
}

.k-error__marquee {
    width: min(96vw, 64rem);
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    padding: var(--gp-sp-2) 0;
}

.k-error__marquee .k-marquee__cell {
    color: var(--gp-accent-fg);
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 14rem;
}

.k-error__marquee .k-marquee__cell--muted {
    color: var(--gp-accent-fg);
    opacity: 0.7;
}

.k-login__card,
.k-callback__card {
    width: 100%;
    max-width: 32rem;
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

.k-login__eyebrow,
.k-callback__eyebrow {
    display: block;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    font-weight: 500;
    margin-bottom: var(--gp-sp-3);
}

.k-login__title,
.k-callback__title {
    font-family: var(--gp-font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--gp-fg);
    margin: 0 0 var(--gp-sp-8);
}

.k-login__form {
    display: block;
    width: 100%;
}

.k-login__field {
    display: block;
    margin-bottom: var(--gp-sp-6);
}

.k-login__check {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-6);
    min-height: 3.5rem;
}

.k-login__check .k-check {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

.k-login__check .k-login__check-label {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-fg);
    cursor: pointer;
    user-select: none;
}

.k-login__submit {
    display: block;
    width: 100%;
}

.k-login__brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    padding: var(--gp-sp-3) 0;
    border-top: var(--gp-border-w) solid var(--gp-border);
    margin-top: var(--gp-sp-8);
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
}

.k-login__brand-strip a {
    color: var(--gp-muted-foreground);
    text-decoration: none;
}

.k-login__brand-strip a:hover,
.k-login__brand-strip a:focus {
    color: var(--gp-accent);
    text-decoration: none;
}

.k-callback__status {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-3);
    margin-bottom: var(--gp-sp-6);
}

.k-callback__check {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-success);
    color: var(--gp-success-fg);
    border: 0;
    flex: 0 0 auto;
}

.k-callback__check--error {
    background: var(--gp-danger);
    color: var(--gp-danger-fg);
}

.k-callback__check--info {
    background: var(--gp-muted);
    color: var(--gp-fg);
}

.k-callback__check-glyph {
    font-family: var(--gp-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.k-callback__pre {
    background: var(--gp-muted);
    color: var(--gp-fg);
    padding: var(--gp-sp-4);
    margin: 0 0 var(--gp-sp-6);
    overflow-x: auto;
    font-family: var(--gp-font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    border: var(--gp-border-w-thin) solid var(--gp-border);
}

.k-callback__hint {
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-muted-foreground);
    margin: 0 0 var(--gp-sp-4);
}

.k-callback__back {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-2);
    margin-top: var(--gp-sp-4);
}

.k-callback__back code {
    font-family: var(--gp-font-mono);
    background: var(--gp-muted);
    color: var(--gp-fg);
    padding: 0.125rem 0.375rem;
    font-size: 0.875rem;
}

/* Reduced-motion guard for the §33 public shells. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-login,
    body:not(.wholesale-portal-body) .k-callback,
    body:not(.wholesale-portal-body) .k-login__card,
    body:not(.wholesale-portal-body) .k-callback__card { transition: none; }
}

/* =========================================================================
 * §34. Skip-to-main-content link (Phase 18.1)
 *
 * Purpose: Provide a single, high-visibility, keyboard-only escape
 *          hatch at the top of every admin page. The link is the
 *          first focusable element on the page (rendered before
 *          the topbar in `src/Ui/partials/header.php`); when a
 *          keyboard user tabs once, they reach the link. Activating
 *          the link moves focus to the shared `<main id="app-main">`
 *          landmark and scrolls it into view. The link is visually
 *          hidden until focused — when it gains focus, it becomes a
 *          high-contrast acid-yellow pill at the top-left of the
 *          viewport (2px off-white border, 4px black offset for
 *          visibility on the acid-yellow active button state).
 *
 * Scope: The selector is `body:not(.wholesale-portal-body)` so the
 *        wholesale portal keeps its own skip link styled in
 *        `wholesale_portal.css` (per Decision 6).
 *
 * Accessibility notes:
 *   - The target `<main>` element has `tabindex="-1"` so the
 *     browser can programmatically move focus to it (otherwise
 *     `<main>` is not focusable by default).
 *   - The visible-on-focus pattern uses the `:focus-visible`
 *     pseudo-class so mouse-clicking the link (which moves
 *     focus but is not "keyboard navigation") does not show
 *     the pill; tabbing to it does. The plain `:focus` is also
 *     included as a fallback for older browsers.
 *   - `prefers-reduced-motion: reduce` users get the same
 *     instant on-focus transition; the rule is added inside the
 *     existing `base.css` global guard.
 *   - The `<main>` target intentionally does not show its
 *     `:focus-visible` outline (the rule below strips it) so the
 *     user sees a clean page after activating the link instead
 *     of a giant yellow box around the main content area. The
 *     inner elements still keep their focus rings per `base.css`.
 * ========================================================================= */

body:not(.wholesale-portal-body) .k-skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;            /* above .kinetic-topbar (z 1020) and modals (z 1055) */
    padding: 1rem 1.5rem;
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
    border: 2px solid var(--gp-fg);
    border-radius: 0;
    font-family: var(--gp-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* Visually hidden until focused. The standard "clip + clip-path"
       pattern is preferred over `display: none` so screen readers
       can still announce the link. */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    transition: none;
}

body:not(.wholesale-portal-body) .k-skip-link:focus,
body:not(.wholesale-portal-body) .k-skip-link:focus-visible {
    /* Reveal at the top-left of the viewport when focused. */
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    /* 2px off-white outline + 4px black offset for visibility on
       the acid-yellow active button state. The global
       `:focus-visible` rule in `base.css` provides the matching
       ring via `outline` + `box-shadow`. */
    outline: 2px solid var(--gp-fg);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-skip-link:hover {
    background: var(--gp-fg);
    color: var(--gp-bg);
    border-color: var(--gp-fg);
}

/* Suppress the `<main>` focus ring when it receives focus via
   the skip link. The skip link itself keeps its ring (above);
   the main element would otherwise paint a giant yellow box
   around the entire content area. */
body:not(.wholesale-portal-body) .app-main:focus,
body:not(.wholesale-portal-body) .app-main:focus-visible {
    outline: none;
    box-shadow: none;
}

/* =========================================================================
 * §35. Form Settings Layout (Phase 18.5 / wholesale settings form-improver)
 *
 * Purpose: Foundation classes for the post-card form-section layout
 *          described in `docs/domains/shared/FORMS_SETTINGS_STYLE_GUIDE.md`
 *          §3–§6. The wholesale admin settings form is the first
 *          surface to consume these (see
 *          `apps/wholesale_dashboard/views/admin_settings.php`); any
 *          subsequent settings-page form-improver pass should reuse
 *          the same skeleton.
 *
 * §35.1 — `.k-form-section`: a flat block that replaces the
 *          `.k-card.k-card--bordered.k-card--padded` section chrome.
 *          No border, no padded card, no box. The section title (left
 *          accent bar) and the body cells (`space-y-8`) are the only
 *          visual structure (per the style guide §4.1, "no more
 *          box-in-box"). The section stacks vertically with the next
 *          section via the parent's gap (the wholesale settings form
 *          uses `.k-settings-form`'s `display: flex; flex-direction:
 *          column; gap: var(--gp-sp-6)`).
 *
 * §35.2 — `.k-form-section__header` / `.k-form-section__desc`:
 *          optional header cluster with the title and the muted
 *          description line.
 *
 * §35.3 — `.k-section-title`: the h2 section title. 4px acid-yellow
 *          left border, large uppercase, bold. The accent bar is the
 *          primary anchor; the title text is the secondary anchor.
 *          The margin-bottom on the title gives the body cells room
 *          to breathe.
 *
 * §35.4 — `.k-subsection-title`: the h3 sub-section title. Smaller
 *          (clamp 1.125rem..1.5rem), bold uppercase, no accent bar.
 *          Used for second-level grouping (e.g. "Current Brand
 *          Categories" inside the "Category Label Mapping" section).
 *
 * §35.5 — `.k-form-row` (+ `--aligned`, `--2col`, `--3col`, `--4col`):
 *          a horizontal row of `.k-field` cells. The base rule is a
 *          CSS grid with auto-fit single column on narrow viewports
 *          and explicit `--Ncol` variants for known column counts on
 *          desktop. `.k-form-row--aligned` enforces strict column
 *          alignment: label-tops and input-bottoms line up across
 *          the row (achieved via a `subgrid` for `.k-field`'s
 *          label/input/help slots, with a fallback to a manual
 *          baseline alignment when `subgrid` is not supported).
 *          Children use `grid-template-rows: auto auto auto` so
 *          the label, input, and help line up across cells.
 *
 * §35.6 — `.k-info-block`: a flat non-card block for short
 *          read-only paragraphs. No border, no padded card; just
 *          a small left accent bar (info) and the body copy in
 *          muted foreground. Used to consolidate the per-section
 *          "click ⓘ for help" collapse blocks into a single
 *          explainer at the top of the form.
 *
 * §35.7 — `.k-input--upper` / `.k-input--code` / `.k-input--secret`:
 *          per-field modifiers. The kinetic input base rule is
 *          `text-transform: none` (line 865) so the user types
 *          mixed-case data and the stored value matches what they
 *          typed. These modifiers are opt-in:
 *            - `.k-input--upper` forces uppercase (for a button-label
 *              or tab-title that the user types and is later rendered
 *              uppercase).
 *            - `.k-input--code` switches to monospace and keeps
 *              `text-transform: none` (for code identifiers,
 *              JSON payloads, hex colors).
 *            - `.k-input--secret` is the same as `--code` plus a
 *              letter-spacing tweak so a typed password's character
 *              count is easier to verify visually.
 *
 * Scope: Every selector below is `body:not(.wholesale-portal-body)`
 *        so the wholesale portal (Decision 6) is unaffected.
 * Tokens: Only `--gp-*` tokens are used.
 * ========================================================================= */

/* §35.1 Form section (flat block; no border, no padded card). */
body:not(.wholesale-portal-body) .k-form-section {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body:not(.wholesale-portal-body) .k-form-section + .k-form-section {
    /* No extra margin-top; the parent `.k-settings-form` provides the
       gap. The selector exists so future per-section separators (e.g.
       a top border) can be added without affecting the first child. */
}

/* §35.2 Section header + description. */
body:not(.wholesale-portal-body) .k-form-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-1);
    margin-bottom: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-form-section__desc {
    margin: 0;
    color: var(--gp-muted-foreground);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 60rem;
}

/* §35.3 Section title (h2 with 4px acid-yellow left border). */
body:not(.wholesale-portal-body) .k-section-title {
    display: block;
    margin: 0 0 var(--gp-sp-3);
    padding: 0 0 0 var(--gp-sp-4);
    border-left: 4px solid var(--gp-accent);
    font-family: var(--gp-font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--gp-fg);
}

/* §35.4 Subsection title (h3, smaller, no accent bar). */
body:not(.wholesale-portal-body) .k-subsection-title {
    display: block;
    margin: 0 0 var(--gp-sp-3);
    font-family: var(--gp-font-display);
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--gp-fg);
}

/* §35.5 Form row (horizontal flex/grid of `.k-field` cells). */
body:not(.wholesale-portal-body) .k-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gp-sp-6);
}

body:not(.wholesale-portal-body) .k-form-row--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.wholesale-portal-body) .k-form-row--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:not(.wholesale-portal-body) .k-form-row--4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:not(.wholesale-portal-body) .k-form-row > .k-field--full {
    grid-column: 1 / -1;
}

/* When a `.k-field` is wrapped inside a `.k-form-row`, the global
   field margin-bottom (var(--gp-sp-8)) would double-space the row;
   reset it so the row's own `gap` controls the rhythm. */
body:not(.wholesale-portal-body) .k-form-row .k-field { margin-bottom: 0; }

.k-range-field { width: 100%; }
.k-range {
    display: block;
    width: 100%;
    accent-color: var(--gp-accent);
    cursor: pointer;
}
.k-range-field__scale {
    display: flex;
    justify-content: space-between;
    gap: var(--gp-sp-4);
    margin-top: var(--gp-sp-2);
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    font-weight: 700;
}
.k-range-field__scale span:last-child { text-align: right; }

/* When the row has a single cell on the narrow viewport, the
   `space-y-8` rhythm (gap var(--gp-sp-8)) reads as too generous;
   use a tighter --gp-sp-4 gap on the mobile stack. The desktop
   variants keep their explicit column counts. */
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-form-row--2col,
    body:not(.wholesale-portal-body) .k-form-row--3col,
    body:not(.wholesale-portal-body) .k-form-row--4col {
        grid-template-columns: 1fr;
        gap: var(--gp-sp-4);
    }
}

/* §35.5.1 Aligned row (strict column alignment: label-tops and
   input-bottoms line up across the row). When `subgrid` is
   supported, the row adopts the inner field's label/input/help
   three-row structure so all labels and all inputs line up.
   Older browsers fall back to a baseline-aligned flex row. */
body:not(.wholesale-portal-body) .k-form-row--aligned {
    align-items: start;
}

@supports (grid-template-rows: subgrid) {
    body:not(.wholesale-portal-body) .k-form-row--aligned {
        grid-template-rows: auto auto auto;
    }
    body:not(.wholesale-portal-body) .k-form-row--aligned > .k-field {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0;
    }
}

/* The tier row needs each cell to contain two stacked sub-fields
   (Threshold + % Off). The `__cell` wrapper is a flex column with
   the field's own rhythm restored inside it. */
body:not(.wholesale-portal-body) .k-form-row__cell {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-form-row__cell .k-field { margin-bottom: 0; }

/* §35.6 Info block (flat non-card block for read-only paragraphs). */
body:not(.wholesale-portal-body) .k-info-block {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-4) var(--gp-sp-4);
    margin: 0 0 var(--gp-sp-6);
    background: var(--gp-muted);
    border-left: 4px solid var(--gp-info);
    color: var(--gp-fg);
    font-size: 0.875rem;
    line-height: 1.5;
}
body:not(.wholesale-portal-body) .k-info-block__title {
    margin: 0;
    font-family: var(--gp-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-fg);
}
body:not(.wholesale-portal-body) .k-info-block__body { margin: 0; color: var(--gp-fg); }
body:not(.wholesale-portal-body) .k-info-block code.k-code-inline {
    margin: 0 0.125rem;
}

/* §35.7 Input modifiers (per-field text-transform / font-family overrides). */
body:not(.wholesale-portal-body) .k-input.k-input--upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body:not(.wholesale-portal-body) .k-input.k-input--code,
body:not(.wholesale-portal-body) .k-input.k-input--secret {
    font-family: var(--gp-font-mono);
    text-transform: none;
}
body:not(.wholesale-portal-body) .k-input.k-input--secret {
    letter-spacing: 0.05em;
}

/* §35.8 Category row restyle for the new flat 3-up grid
   (source / custom label / show in nav). The existing
   `.k-category-list__row` 4-column rule is preserved
   as a co-class so the drag-to-reorder JS keeps working;
   the 3-up grid is layered on top. The handle stays as a
   small element on the left of the row, outside the 3-up
   grid (so the 3 visible cells are flush with each other
   and the handle does not eat into the source column's
   width budget). The hidden `product_type` field is
   preserved inside the source cell. */
body:not(.wholesale-portal-body) .k-category-list__row--3col {
    grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1.5fr) auto;
    align-items: center;
}
body:not(.wholesale-portal-body) .k-category-list__row--3col .k-category-list__source {
    min-width: 0;
}
body:not(.wholesale-portal-body) .k-category-list__row--3col .k-category-list__label {
    min-width: 0;
}
@media (max-width: 767.98px) {
    body:not(.wholesale-portal-body) .k-category-list__row--3col {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "handle source"
            "label label"
            "visibility visibility";
        row-gap: var(--gp-sp-2);
    }
}

/* §35.8.1 Scope qualifier inside a section title (the social-queue
 * network name in parens, the "(Destructive Utility)" / "(Constructive
 * Utility)" tag, etc.). The base `.k-section-title` rule forces
 * `text-transform: uppercase`; this modifier preserves the
 * qualifier's natural case (a network slug like `instagram` stays
 * lowercase) and reduces the visual weight so the title is the
 * primary anchor. */
body:not(.wholesale-portal-body) .k-form-section__scope {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.55em;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-left: var(--gp-sp-2);
}

/* §35.9 Reduced-motion guard for the §35 form-section rules. */
@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-form-section,
    body:not(.wholesale-portal-body) .k-form-section__header,
    body:not(.wholesale-portal-body) .k-section-title,
    body:not(.wholesale-portal-body) .k-subsection-title,
    body:not(.wholesale-portal-body) .k-form-row,
    body:not(.wholesale-portal-body) .k-info-block {
        transition: none;
    }
}

/* ---- 36. Inventory Ops (Phase 13) ------------------------------------ */

/* §36.1 Product exclusion chip list. */

body:not(.wholesale-portal-body) .k-invops-exclusions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-invops-exclusions-empty {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip__thumb {
    width: 28px;
    height: 28px;
    border-radius: var(--gp-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip__title {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip__meta {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gp-muted-foreground);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-invops-exclusion-chip__remove:hover {
    color: var(--gp-danger);
}

/* §36.2 Product search results dropdown. */

body:not(.wholesale-portal-body) .k-invops-product-search-results {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(56vh, 22rem);
    margin-top: var(--gp-sp-2);
    overscroll-behavior: contain;
}

body:not(.wholesale-portal-body) .k-invops-product-search-results--active {
    border: var(--gp-border-w-thin) solid var(--gp-border);
    background: var(--gp-bg);
}

body:not(.wholesale-portal-body) .k-invops-product-search-result {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: 0.55rem 0.65rem;
    border: 0;
    border-bottom: var(--gp-border-w-thin) solid var(--gp-border);
    background: transparent;
    color: var(--gp-fg);
    font-family: var(--gp-font-display);
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
}

body:not(.wholesale-portal-body) .k-invops-product-search-result:last-child {
    border-bottom: 0;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result:hover,
body:not(.wholesale-portal-body) .k-invops-product-search-result:focus-visible {
    background: var(--gp-accent);
    color: var(--gp-accent-fg);
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--gp-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__meta {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result:hover .k-invops-product-search-result__meta,
body:not(.wholesale-portal-body) .k-invops-product-search-result:focus-visible .k-invops-product-search-result__meta {
    color: var(--gp-accent-fg);
    opacity: 0.8;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__add {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result__add .bi {
    font-size: 1.1rem;
    line-height: 1;
}

body:not(.wholesale-portal-body) .k-invops-product-search-result:hover .k-invops-product-search-result__add,
body:not(.wholesale-portal-body) .k-invops-product-search-result:focus-visible .k-invops-product-search-result__add {
    opacity: 1;
}

body:not(.wholesale-portal-body) .k-invops-product-search-empty {
    color: var(--gp-muted-foreground);
    font-size: 0.8125rem;
    padding: 0.55rem 0.65rem;
    background: var(--gp-muted);
}

@media (max-width: 575.98px) {
    body:not(.wholesale-portal-body) .k-invops-exclusion-chip {
        width: 100%;
        gap: var(--gp-sp-2);
        padding: 0.4rem 0.45rem;
    }

    body:not(.wholesale-portal-body) .k-invops-exclusion-chip__title {
        flex: 1 1 auto;
        max-width: none;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    body:not(.wholesale-portal-body) .k-invops-exclusion-chip__meta,
    body:not(.wholesale-portal-body) .k-invops-exclusion-chip > .k-btn {
        flex: 0 0 auto;
    }

    body:not(.wholesale-portal-body) .k-invops-exclusion-chip > .k-btn {
        margin-inline-start: auto;
    }

    body:not(.wholesale-portal-body) .k-invops-product-search-results {
        max-height: min(52vh, 20rem);
    }

    body:not(.wholesale-portal-body) .k-invops-product-search-result__title {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.25;
    }
}

/* §36.3 Reduced-motion guard. */

@media (prefers-reduced-motion: reduce) {
    body:not(.wholesale-portal-body) .k-invops-product-search-result,
    body:not(.wholesale-portal-body) .k-invops-exclusion-chip__remove {
        transition: none;
    }
}

/* ---- 37. G-Commands key-command chips (Shopify-style) -------------------
 *
 * When the user presses G, subtle key chips slide in from the right edge
 * of each sidebar nav item. The nav link text gets text-overflow ellipsis
 * as the chip takes space. Sub-item chips appear after pressing a parent
 * group key.
 */

.k-g-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-family: var(--gp-font-display);
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.12s ease, transform 0.12s ease,
                background-color var(--gp-dur) var(--gp-ease),
                border-color var(--gp-dur) var(--gp-ease),
                color var(--gp-dur) var(--gp-ease);
    pointer-events: none;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.k-g-chip.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.k-g-chip.is-active {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
    border-color: var(--gp-accent);
}

@media (prefers-reduced-motion: reduce) {
    .k-g-chip {
        transition: none;
    }
    .k-g-chip.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* §36.4 Style-level recommendation trace disclosure. */
body:not(.wholesale-portal-body) .k-invops-family__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gp-sp-3);
}

body:not(.wholesale-portal-body) .k-invops-family__trace-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gp-muted-foreground);
    font: inherit;
    font-size: 0.6875rem;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.72;
}

body:not(.wholesale-portal-body) .k-invops-family__trace-toggle:hover,
body:not(.wholesale-portal-body) .k-invops-family__trace-toggle:focus-visible,
body:not(.wholesale-portal-body) .k-invops-family__trace-toggle[aria-expanded="true"] {
    color: var(--gp-fg);
    opacity: 1;
}

body:not(.wholesale-portal-body) .k-invops-row__trace {
    grid-column: 1 / -1;
    border: 0;
    border-left: 0;
    padding: 0;
    overflow: hidden;
}

body:not(.wholesale-portal-body) .k-invops-row__trace > summary {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-2);
    padding: var(--gp-sp-2);
    list-style: none;
    cursor: pointer;
}

body:not(.wholesale-portal-body) .k-invops-row__trace > summary::-webkit-details-marker {
    display: none;
}

body:not(.wholesale-portal-body) .k-invops-row__trace > summary::before {
    content: '›';
    flex: 0 0 auto;
    line-height: 1;
    transform: rotate(90deg);
}

body:not(.wholesale-portal-body) .k-invops-row__trace:not([open]) > summary::before {
    transform: rotate(0deg);
}

body:not(.wholesale-portal-body) .k-invops-row__trace > div {
    padding-inline: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-invops-row__trace > div:last-child {
    padding-bottom: var(--gp-sp-2);
}

body:not(.wholesale-portal-body) .k-invops-header-restock-window {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-3);
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-header-restock-window__field {
    display: inline-flex;
    align-items: stretch;
}

body:not(.wholesale-portal-body) .k-invops-header-restock-window__input {
    width: calc((var(--k-invops-restock-value-ch, 1) * 1ch) + 3.75rem);
    min-width: 5.25rem;
    max-width: 10rem;
    min-height: 2.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body:not(.wholesale-portal-body) .k-invops-header-restock-window .k-invops-controls__suffix {
    min-height: 2.25rem;
    padding-inline: var(--gp-sp-2);
    font-size: 0.6875rem;
}

body:not(.wholesale-portal-body) .k-invops-header-unit-count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gp-sp-1);
    padding: 0;
    border: 0;
    background: transparent;
    white-space: nowrap;
}

body:not(.wholesale-portal-body) .k-invops-header-unit-count__value {
    color: var(--gp-accent);
    font-family: var(--gp-font-display);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

body:not(.wholesale-portal-body) .k-invops-header-unit-count__label {
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* ---- 38. Command palette ----------------------------------------------
 *
 * The Cmd/Ctrl+K quick-navigation shell is created only on first use. Its
 * arrival uses opacity and transform only so opening does not animate layout.
 */

.k-command-palette[hidden] {
    display: none;
}

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

.k-command-palette {
    --k-command-palette-duration: 90ms;
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: min(12vh, 7rem) var(--gp-sp-4) var(--gp-sp-4);
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: opacity var(--k-command-palette-duration) linear;
}

.k-command-palette.is-open {
    opacity: 1;
    pointer-events: auto;
}

.k-command-palette__panel {
    display: flex;
    flex-direction: column;
    width: min(44rem, 100%);
    max-height: min(76vh, 44rem);
    overflow: hidden;
    color: var(--gp-fg);
    background: var(--gp-bg);
    border: var(--gp-border-w) solid var(--gp-border);
    border-radius: 4px;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0) scale(0.99);
    transform-origin: 50% 0;
    will-change: transform, opacity;
    contain: layout paint style;
    transition:
        opacity var(--k-command-palette-duration) linear,
        transform var(--k-command-palette-duration) var(--gp-ease);
}

.k-command-palette.is-open .k-command-palette__panel {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.k-command-palette__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gp-sp-3);
    min-height: 4.25rem;
    padding: 0 var(--gp-sp-4);
    border-bottom: var(--gp-border-w) solid var(--gp-border);
}

.k-command-palette__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gp-muted-foreground);
    font-size: 1.125rem;
}

.k-command-palette__input {
    width: 100%;
    min-width: 0;
    padding: var(--gp-sp-4) 0;
    border: 0;
    outline: 0;
    color: var(--gp-fg);
    background: transparent;
    box-shadow: none;
    font-family: var(--gp-font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.25;
    appearance: none;
}

.k-command-palette__input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.k-command-palette__input::-webkit-search-cancel-button {
    display: none;
}

.k-command-palette__input::placeholder {
    color: var(--gp-muted-foreground);
    opacity: 1;
}

.k-command-palette__close {
    min-width: 2.75rem;
    padding: var(--gp-sp-2) var(--gp-sp-3);
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    font-family: var(--gp-font-mono);
    font-size: 0.6875rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.k-command-palette__close:hover,
.k-command-palette__close:focus-visible {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
    border-color: var(--gp-accent);
    outline: 0;
}

.k-command-palette__body {
    min-height: 0;
    overflow: hidden;
}

.k-command-palette__results {
    max-height: min(56vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: var(--gp-sp-2);
}

.k-command-palette__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--gp-sp-3);
    width: 100%;
    min-height: 3.75rem;
    padding: var(--gp-sp-3) var(--gp-sp-4);
    border: 0;
    color: var(--gp-fg);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.k-command-palette__result.is-selected {
    color: var(--gp-accent-fg);
    background: var(--gp-accent);
}

.k-command-palette__result-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.125rem;
}

.k-command-palette__result-label {
    overflow: hidden;
    font-family: var(--gp-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-command-palette__result-context {
    overflow: hidden;
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-command-palette__result.is-selected .k-command-palette__result-context {
    color: currentColor;
    opacity: 0.72;
}

.k-command-palette__result-tags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gp-sp-1);
}

.k-command-palette__tag {
    max-width: 7rem;
    overflow: hidden;
    padding: 0.2rem 0.4rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    font-family: var(--gp-font-mono);
    font-size: 0.625rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-command-palette__result.is-selected .k-command-palette__tag {
    color: currentColor;
    background: rgba(0, 0, 0, 0.12);
    border-color: currentColor;
}

.k-command-palette__result-arrow {
    min-width: 1rem;
    color: var(--gp-muted-foreground);
    font-family: var(--gp-font-mono);
    font-size: 0.75rem;
    text-align: center;
    opacity: 0;
}

.k-command-palette__result.is-selected .k-command-palette__result-arrow {
    color: currentColor;
    opacity: 1;
}

.k-command-palette__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gp-sp-2);
    min-height: 10rem;
    padding: var(--gp-sp-8);
    text-align: center;
}

.k-command-palette__empty-title {
    font-family: var(--gp-font-display);
    font-weight: 700;
}

.k-command-palette__empty-copy,
.k-command-palette__status {
    color: var(--gp-muted-foreground);
    font-size: 0.75rem;
}

.k-command-palette__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.k-command-palette__footer {
    display: flex;
    align-items: center;
    gap: var(--gp-sp-4);
    min-height: 2.75rem;
    padding: var(--gp-sp-2) var(--gp-sp-4);
    border-top: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-muted-foreground);
    background: var(--gp-muted);
    font-size: 0.6875rem;
}

.k-command-palette__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--gp-sp-1);
}

.k-command-palette__hint--end {
    margin-left: auto;
}

.k-command-palette__hint kbd {
    min-width: 1.25rem;
    padding: 0.15rem 0.3rem;
    border: var(--gp-border-w-thin) solid var(--gp-border);
    color: var(--gp-fg);
    background: var(--gp-bg);
    box-shadow: none;
    font-family: var(--gp-font-mono);
    font-size: 0.625rem;
    line-height: 1;
    text-align: center;
}

body.k-command-palette-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .k-command-palette {
        padding: var(--gp-sp-4) var(--gp-sp-2);
    }

    .k-command-palette__panel {
        max-height: calc(100vh - 2rem);
    }

    .k-command-palette__result {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .k-command-palette__result-tags {
        display: none;
    }

    .k-command-palette__footer {
        gap: var(--gp-sp-3);
    }

    .k-command-palette__hint--end {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-command-palette,
    .k-command-palette__panel {
        transition: none;
    }

    .k-command-palette__panel,
    .k-command-palette.is-open .k-command-palette__panel {
        transform: none;
    }
}