/* System management (sys-*): announcements, banners, contact form settings, theme management.
   Tokens only, logical properties only. The theme preview sets its own CSS variables on .sys-pv, so only the preview changes. */

.sys-stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.sys-p { margin: 0; }
.sys-tabpanel { display: flex; flex-direction: column; gap: 16px; }
.sys-tabpanel-gap { margin-block-start: 16px; }
.sys-head-text { margin-inline-end: auto; min-width: 0; display: grid; gap: 2px; }
.sys-head-text .card-title { margin: 0; }
.sys-eyebrow { margin: 0 0 2px; color: var(--link); font-size: var(--text-body-sm-size); font-weight: 600; }
.sys-sep { margin: 0; border: 0; border-block-start: var(--border-width) solid var(--border); }
.sys-end { display: flex; justify-content: flex-end; }
.sys-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sys-fieldset > legend { padding: 0; margin-block-end: 6px; }
.sys-radios { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sys-radio, .sys-check { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: var(--control-font-size); }
.sys-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.sys-sr-label .switch-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sys-sr-label .switch input:disabled + .switch-track { opacity: var(--opacity-disabled); }

/* Hidden file inputs: show the focus ring on their visible "Choose" button. */
.sys-file:has(input[type="file"]:focus) label.btn { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }

/* ---------- announcement and banner lists ---------- */
.sys-list { list-style: none; margin: 0; padding: 0; }
.sys-row { position: relative; display: flex; align-items: center; gap: 16px; padding-block: 14px; border-block-end: var(--border-width) solid var(--border); }
.sys-row:first-child { padding-block-start: 4px; }
.sys-row:last-child { border-block-end: 0; }
.sys-row.is-dragging { opacity: var(--opacity-disabled); }
.sys-row.drop-before { box-shadow: inset 0 2px 0 var(--primary); }
.sys-row.drop-after { box-shadow: inset 0 -2px 0 var(--primary); }
.sys-thumb { flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); }
.sys-thumb-web { width: 176px; aspect-ratio: 3 / 1; }
.sys-thumb-mobile { width: 120px; aspect-ratio: 2.2 / 1; }
.sys-thumb img, .sys-media-img img, .sys-pv-media img { width: 100%; height: 100%; object-fit: cover; }
.sys-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sys-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sys-row-title { margin: 0; font-size: var(--text-body-md-size); font-weight: 600; line-height: 1.4; }
.sys-row-body {
  margin: 0; max-width: 78ch; color: var(--muted-foreground); font-size: var(--text-body-sm-size);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sys-row-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.sys-row-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.sys-row-meta .icon { width: 14px; height: 14px; }
.sys-meta-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.sys-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.sys-order { flex: none; display: flex; align-items: center; gap: 2px; }
.sys-order-btns { display: flex; flex-direction: column; align-items: center; }
.sys-grip { display: grid; place-items: center; width: 20px; height: 32px; color: var(--muted-foreground); border-radius: var(--radius-sm); }
.sys-grip[draggable="true"] { cursor: grab; }
.sys-grip[draggable="true"]:hover { background: var(--accent); color: var(--accent-foreground); }
.sys-grip:not([draggable]) { opacity: var(--opacity-disabled); }
.sys-pos { min-width: 20px; text-align: center; color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.sys-order-cell { display: inline-flex; align-items: center; gap: 2px; }
.sys-order-cell .sys-pos { margin-inline-end: 4px; }

/* ---------- content panel: licence cards, then news and banners ---------- */
.sys-lic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--gap); margin-block-end: var(--gap); }
.sys-lic-card { flex-wrap: wrap; align-items: flex-start; min-width: 0; }
.sys-lic-card .stat-body { flex: 1 1 130px; }
.sys-lic-card .stat-sub .status { margin-block-start: 2px; }
.sys-lic-btn { flex: none; margin-inline-start: auto; }
.sys-lic-note { align-items: flex-start; margin-block-start: 16px; }
.sys-lic-note > div { display: grid; gap: 2px; }
.sys-lic-note .sys-lic-note-title { font-weight: 600; }
.sys-cp-toolbar .sys-cp-add { margin-inline-start: auto; }

/* Generated covers when no image is attached: decoration from the chart and brand scales. */
.sys-art {
  --art: var(--chart-1);
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--primary-foreground);
  background:
    radial-gradient(circle at 85% 20%, color-mix(in oklab, var(--primary-foreground) 22%, transparent) 0 18%, transparent 19%),
    radial-gradient(circle at 10% 110%, color-mix(in oklab, var(--primary-foreground) 16%, transparent) 0 35%, transparent 36%),
    linear-gradient(135deg, var(--art), color-mix(in oklab, var(--art) 55%, var(--brand-950)));
}
.sys-art .icon { width: 40%; max-width: 28px; height: auto; aspect-ratio: 1; opacity: .9; }
.sys-art-2 { --art: var(--chart-2); }
.sys-art-3 { --art: var(--chart-3); }
.sys-art-4 { --art: var(--chart-4); }
.sys-art-5 { --art: var(--chart-5); }

/* Row actions menu */
.sys-menu-wrap { position: relative; }
.sys-menu {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: var(--z-dropdown);
  min-width: 200px; margin: 0; padding: 4px; list-style: none;
  background: var(--popover); color: var(--popover-foreground);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-3);
}
.sys-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding-inline: 10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: inherit;
  font: inherit; font-size: var(--control-font-size); text-align: start; cursor: pointer;
}
.sys-menu-item .icon { width: 18px; height: 18px; color: var(--muted-foreground); }
.sys-menu-item:hover, .sys-menu-item:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.sys-menu-item.danger, .sys-menu-item.danger .icon { color: var(--destructive); }
:is(.dark) .sys-menu-item.danger, :is(.dark) .sys-menu-item.danger .icon { color: color-mix(in oklab, var(--destructive) 70%, white); }

/* ---------- editor dialog ---------- */
.sys-editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sys-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sys-status-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sys-preview-pane {
  position: sticky; inset-block-start: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--radius-xl); background: var(--muted);
}
.sys-pv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sys-pv-controls .badge .icon { width: 14px; height: 14px; }
.sys-pv-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sys-pv-details { display: grid; gap: 12px; }
.sys-pv-details .kv { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .sys-editor, .sys-pv-layout { grid-template-columns: minmax(0, 1fr); }
  .sys-preview-pane { position: static; }
}

/* Segmented control on native radios */
.sys-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-full); background: var(--card); border: var(--border-width) solid var(--border); }
.sys-seg-opt { position: relative; display: inline-flex; }
.sys-seg-opt span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding-inline: 12px;
  border-radius: var(--radius-full); color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; cursor: pointer;
}
.sys-seg-opt span:hover { color: var(--foreground); }
.sys-seg-opt input:checked + span { background: var(--primary); color: var(--primary-foreground); }
.sys-seg-opt input:focus-visible + span { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }

/* Image slot */
.sys-media { margin: 0; display: grid; gap: 8px; }
.sys-media-img { overflow: hidden; border-radius: var(--radius-lg); border: var(--border-width) solid var(--border); background: var(--muted); }
.sys-ratio-ann { aspect-ratio: 1200 / 630; }
.sys-ratio-web { aspect-ratio: 1440 / 320; }
.sys-ratio-mobile { aspect-ratio: 750 / 340; }
.sys-media-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sys-media-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.sys-media-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- preview stage: web portal and phone ---------- */
.sys-pv-stage { display: grid; justify-items: center; font-size: var(--text-body-xs-size); line-height: 1.45; }
.sys-pv-stage p { margin: 0; }
.sys-ph { color: var(--muted-foreground); font-style: italic; }
.sys-pv-logo { height: 14px; width: auto; max-width: 96px; object-fit: contain; }
.sys-logo-dark { display: none; }
.dark .sys-logo-light { display: none; }
.dark .sys-logo-dark { display: block; }
.sys-pv-media { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--muted); }
.sys-pv-media .sys-art .icon { max-width: 22px; }
.sys-pv-section { font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .03em; }
:lang(ar) .sys-pv-section { text-transform: none; letter-spacing: 0; }
.sys-pv-title { font-weight: 700; font-size: var(--text-body-sm-size); line-height: 1.35; color: var(--foreground); }
.sys-pv-body { color: var(--muted-foreground); }
.sys-pv-date { color: var(--muted-foreground); }
.sys-pv-cap { color: var(--muted-foreground); }
.sys-pv-cap b { color: var(--foreground); }
.sys-pv-link { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-weight: 600; }
.sys-pv-link .icon { width: 12px; height: 12px; }
/* The preview follows its own language, not the page's: an English preview on an Arabic page keeps arrows unmirrored. */
.sys-pv-stage[dir="ltr"] [data-directional] { transform: none; }
[dir="ltr"] .sys-pv-stage[dir="rtl"] [data-directional] { transform: scaleX(-1); }
.sys-clamp-2, .sys-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sys-clamp-2 { -webkit-line-clamp: 2; }
.sys-clamp-3 { -webkit-line-clamp: 3; }
.sys-skel { display: grid; gap: 4px; }
.sys-skel span { height: 6px; border-radius: var(--radius-full); background: var(--muted); }
.sys-skel span + span { width: 60%; }

.sys-web { width: 100%; overflow: hidden; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); box-shadow: var(--elevation-1); }
.sys-web-bar { display: flex; gap: 4px; padding: 6px 8px; background: var(--muted); }
.sys-web-bar span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--input); }
.sys-web-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--card); border-block-end: var(--border-width) solid var(--border); }
.sys-web-dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--brand-accent); }
.sys-web-body { display: grid; gap: 8px; padding: 10px; }
.sys-web-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; padding: 8px; border: var(--border-width) solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.sys-web-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sys-web-card .sys-pv-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.sys-phone {
  width: min(232px, 100%); display: grid; align-content: start; gap: 8px;
  padding: 8px 8px 14px; min-height: 360px;
  border: calc(var(--border-width) * 6) solid var(--foreground); border-radius: calc(var(--radius-2xl) * 2);
  background: var(--background); color: var(--foreground); box-shadow: var(--elevation-2);
}
.sys-phone-status { display: flex; align-items: center; justify-content: space-between; padding-inline: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sys-phone-notch { width: 56px; height: 14px; border-radius: var(--radius-full); background: var(--foreground); }
.sys-phone-bars { width: 18px; height: 8px; border-radius: var(--radius-xs); border: var(--border-width) solid var(--foreground); }
.sys-notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: var(--radius-lg); background: var(--popover); border: var(--border-width) solid var(--border); box-shadow: var(--elevation-2); }
.sys-notif img { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.sys-notif-head { display: flex; justify-content: space-between; gap: 6px; color: var(--muted-foreground); }
.sys-notif-head b { color: var(--foreground); }
.sys-app-head { display: flex; align-items: center; padding: 4px 4px 0; }
.sys-app-body { display: grid; gap: 8px; padding-inline: 4px; }
.sys-app-card { display: grid; gap: 6px; padding: 6px; border-radius: var(--radius-md); border: var(--border-width) solid var(--border); background: var(--card); }
.sys-app-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sys-dots { display: flex; justify-content: center; gap: 4px; }
.sys-dots span { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--input); }
.sys-dots span.on { width: 14px; background: var(--primary); }

/* ---------- contact form settings ---------- */
.sys-email-list, .sys-sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sys-email-list .chip, .sys-sub-list .chip { height: auto; min-height: 32px; padding-block: 2px; gap: 6px; }
.sys-email-list .chip > .icon { width: 14px; height: 14px; color: var(--muted-foreground); }
.sys-sub-list bdi { color: var(--muted-foreground); }
.sys-add-row { display: flex; gap: 8px; align-items: flex-start; max-width: 560px; }
.sys-add-row .input-group { flex: 1; }
.sys-type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-type {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 10px 14px;
  border: var(--border-width) solid var(--input); border-radius: var(--radius-full); background: var(--card);
  font-size: var(--text-body-sm-size); font-weight: 600; cursor: pointer;
}
.sys-type:has(input:checked) { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }
.sys-type:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }
.sys-type input:focus-visible { outline: none; }
.sys-att { align-items: start; }
.sys-sub-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 340px; }
.sys-table-subjects td { vertical-align: middle; }

/* Save bar: sticks to the bottom of the screen while there are unsaved changes. */
.sys-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px;
  margin-block-start: var(--gap); padding: 12px var(--card-padding);
  background: var(--card); border: var(--card-border-width) solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--card-shadow);
}
.sys-actionbar .note { margin-inline-end: auto; }
.sys-actionbar.is-dirty { position: sticky; inset-block-end: 12px; z-index: var(--z-sticky); box-shadow: var(--elevation-3); border-color: var(--primary); }

/* ---------- theme management ---------- */
.sys-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px var(--card-padding); margin-block-end: var(--gap); }
.sys-summary p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sys-summary-sched { margin-inline-start: auto !important; }
.sys-summary-by { flex: 1 1 auto; }
.sys-summary-open { margin-inline-start: auto; }
.sys-theme-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--gap); align-items: start; }
.sys-theme-side { position: sticky; inset-block-start: 88px; }
@media (max-width: 1100px) {
  .sys-theme-layout { grid-template-columns: minmax(0, 1fr); }
  .sys-theme-side { position: static; }
}
.sys-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.sys-theme-card {
  display: grid; align-content: start; gap: 10px; padding: 10px; cursor: pointer;
  border: calc(var(--border-width) * 2) solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.sys-theme-card:hover { border-color: var(--input); }
.sys-theme-card:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--accent) 60%, var(--card)); }
.sys-theme-card:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }
.sys-theme-card:has(input[aria-invalid="true"]:checked) { border-color: var(--destructive); }
.sys-theme-card.is-off { cursor: not-allowed; opacity: var(--opacity-disabled); }
.sys-theme-foot { display: flex; align-items: flex-start; gap: 10px; }
.sys-theme-foot .radio { margin-block-start: 2px; }
.sys-theme-text { display: grid; gap: 2px; min-width: 0; }
.sys-theme-text b { font-weight: 600; font-size: var(--control-font-size); }
.sys-theme-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.sys-theme-meta .icon { width: 14px; height: 14px; }
.sys-dot { width: 12px; height: 12px; flex: none; border-radius: var(--radius-full); background: var(--pv-primary); }
.sys-mode-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.sys-mode-card {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 14px 18px; cursor: pointer;
  border: calc(var(--border-width) * 2) solid var(--border); border-radius: var(--radius-xl); background: var(--card); font-weight: 600;
}
.sys-mode-card:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--accent) 60%, var(--card)); }
.sys-mode-card:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--ring); outline-offset: var(--focus-ring-offset); }
.sys-callout-info {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--info) 10%, var(--card)); color: var(--foreground);
  border: var(--border-width) solid color-mix(in oklab, var(--info) 35%, transparent);
}
.sys-callout-info p { margin: 0; font-size: var(--text-body-sm-size); }
.sys-callout-info .icon { flex: none; color: color-mix(in oklab, var(--info) 80%, var(--foreground)); }
.sys-logo-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.sys-logo-tile { display: grid; place-items: center; height: 72px; padding: 12px; border-radius: var(--radius-lg); border: var(--border-width) solid var(--border); }
.sys-logo-tile img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
.sys-logo-tile-light { background: var(--surface-card); }
.sys-logo-tile-dark { background: var(--surface-card-dark); }

/* Preview scope: colors come from the preset swatch and the chosen appearance, on this element only. */
:is(.sys-pv, .sys-dot, .sys-mini) {
  --pv-primary: var(--brand-primary); --pv-on-primary: var(--brand-primary-foreground);
  --pv-link: var(--brand-link); --pv-link-dark: var(--brand-link-dark);
  --pv-tint: var(--brand-50); --pv-tint-fg: var(--brand-800); --pv-tint-dark: var(--brand-900); --pv-tint-fg-dark: var(--brand-100);
}
:is(.sys-pv, .sys-dot, .sys-mini)[data-swatch="green"] {
  --pv-primary: var(--it-green-700); --pv-on-primary: var(--it-white); --pv-link: var(--it-green-700); --pv-link-dark: var(--it-green-400);
  --pv-tint: var(--it-green-50); --pv-tint-fg: var(--it-green-800); --pv-tint-dark: var(--it-green-900); --pv-tint-fg-dark: var(--it-green-100);
}
:is(.sys-pv, .sys-dot, .sys-mini)[data-swatch="indigo"] {
  --pv-primary: var(--it-indigo-600); --pv-on-primary: var(--it-white); --pv-link: var(--it-indigo-600); --pv-link-dark: var(--it-indigo-300);
  --pv-tint: var(--it-indigo-25); --pv-tint-fg: var(--it-indigo-800); --pv-tint-dark: var(--it-indigo-900); --pv-tint-fg-dark: var(--it-indigo-50);
}
:is(.sys-pv, .sys-dot, .sys-mini)[data-swatch="amber"] {
  --pv-primary: var(--it-amber-700); --pv-on-primary: var(--it-white); --pv-link: var(--it-amber-700); --pv-link-dark: var(--it-amber-400);
  --pv-tint: var(--it-amber-25); --pv-tint-fg: var(--it-amber-800); --pv-tint-dark: var(--it-amber-900); --pv-tint-fg-dark: var(--it-amber-100);
}
:is(.sys-pv, .sys-dot, .sys-mini)[data-swatch="slate"] {
  --pv-primary: var(--it-slate-700); --pv-on-primary: var(--it-white); --pv-link: var(--it-slate-700); --pv-link-dark: var(--it-slate-300);
  --pv-tint: var(--it-slate-50); --pv-tint-fg: var(--it-slate-800); --pv-tint-dark: var(--it-slate-800); --pv-tint-fg-dark: var(--it-slate-100);
}
:is(.sys-pv, .sys-mini), :is(.sys-pv, .sys-mini)[data-mode="light"] {
  --pv-bg: var(--surface-background); --pv-fg: var(--surface-foreground); --pv-card: var(--surface-card); --pv-side: var(--surface-sidebar);
  --pv-muted: var(--surface-muted); --pv-muted-fg: var(--surface-muted-foreground); --pv-border: var(--surface-border);
  --pv-a: var(--pv-link); --pv-t: var(--pv-tint); --pv-tfg: var(--pv-tint-fg);
}
:is(.sys-pv, .sys-mini)[data-mode="dark"] {
  --pv-bg: var(--surface-background-dark); --pv-fg: var(--surface-foreground-dark); --pv-card: var(--surface-card-dark); --pv-side: var(--surface-sidebar-dark);
  --pv-muted: var(--surface-muted-dark); --pv-muted-fg: var(--surface-muted-foreground-dark); --pv-border: var(--surface-border-dark);
  --pv-a: var(--pv-link-dark); --pv-t: var(--pv-tint-dark); --pv-tfg: var(--pv-tint-fg-dark);
}

.sys-pv { overflow: hidden; border: var(--border-width) solid var(--pv-border); border-radius: var(--radius-lg); background: var(--pv-bg); color: var(--pv-fg); font-size: var(--text-body-xs-size); line-height: 1.45; }
.sys-pv p { margin: 0; }
.sys-pv-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--pv-card); border-block-end: var(--border-width) solid var(--pv-border); }
.sys-pv-top img { height: 18px; width: auto; max-width: 110px; object-fit: contain; }
.sys-pv-spacer { flex: 1; }
.sys-pv-bell { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); border: var(--border-width) solid var(--pv-border); color: var(--pv-muted-fg); }
.sys-pv-bell .icon { width: 12px; height: 12px; }
.sys-pv-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--pv-primary); color: var(--pv-on-primary); font-weight: 700; }
.sys-pv-frame { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); min-height: 230px; }
.sys-pv-side { display: grid; align-content: start; gap: 4px; padding: 10px 8px; background: var(--pv-side); border-inline-end: var(--border-width) solid var(--pv-border); }
.sys-pv-nav { padding: 5px 8px; border-radius: var(--radius-full); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-pv-nav.on { background: var(--pv-primary); color: var(--pv-on-primary); font-weight: 700; }
.sys-pv-main { display: grid; align-content: start; gap: 8px; padding: 12px; min-width: 0; }
.sys-pv-hello { font-size: var(--text-body-sm-size); font-weight: 700; }
.sys-pv-muted { color: var(--pv-muted-fg); }
.sys-pv-strong { font-weight: 700; }
.sys-pv-card { display: grid; justify-items: start; gap: 4px; padding: 8px 10px; border: var(--border-width) solid var(--pv-border); border-radius: var(--radius-md); background: var(--pv-card); }
.sys-pv-chip { padding: 1px 8px; border-radius: var(--radius-full); background: var(--pv-t); color: var(--pv-tfg); font-weight: 700; }
.sys-pv-a { color: var(--pv-a); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sys-pv-btn { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--control-radius); background: var(--pv-primary); color: var(--pv-on-primary); font-weight: 700; }
.sys-pv-btn .icon { width: 12px; height: 12px; }

/* Mini app picture on theme cards */
.sys-mini { display: grid; grid-template-rows: 18px 1fr; height: 96px; overflow: hidden; border-radius: var(--radius-md); border: var(--border-width) solid var(--pv-border); background: var(--pv-bg); }
.sys-mini-top { display: flex; align-items: center; gap: 6px; padding-inline: 8px; background: var(--pv-primary); }
.sys-mini-top span:first-child { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--pv-on-primary); }
.sys-mini-top span:last-child { flex: 1; height: 4px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--pv-on-primary) 55%, transparent); }
.sys-mini-body { display: grid; grid-template-columns: 30% 1fr; }
.sys-mini-side { display: grid; align-content: start; gap: 6px; padding: 8px 6px; background: color-mix(in oklab, var(--pv-primary) 85%, var(--pv-bg)); }
.sys-mini-side span, .sys-mini-main span { height: 3px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--pv-on-primary) 60%, transparent); }
.sys-mini-main { display: grid; align-content: start; gap: 6px; padding: 10px 8px; }
.sys-mini-main span { background: var(--pv-border); }
.sys-mini-main span:first-child { width: 70%; height: 5px; background: var(--pv-tint); }
.sys-mini-main span:last-child { width: 50%; }

/* Fields stay clear of the sticky save bar when focused. */
.sys-stack :is(input, select, textarea), .sys-theme-layout :is(input, select, textarea) { scroll-margin-block-end: 120px; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .sys-dialog .dialog-foot { flex-wrap: wrap; }
  .sys-dialog .dialog-foot .btn { flex: 1 1 auto; }
  .sys-media-actions .btn-sm { height: 44px; }
  .sys-row { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
  .sys-row-main { order: 3; flex: 1 1 100%; }
  .sys-row-actions { order: 2; margin-inline-start: auto; }
  .sys-thumb { width: 96px; }
  .sys-thumb-web { width: 132px; }
  .sys-order-btns { flex-direction: row; }
  .sys-grip { display: none; }
  .sys-row .btn-sm, .sys-order-cell .btn-sm, .row-actions .btn-sm { height: 44px; min-width: 44px; }
  .sys-row .btn-icon.btn-sm, .sys-order-cell .btn-icon.btn-sm, .row-actions .btn-icon.btn-sm { width: 44px; }
  .sys-email-list .chip button, .sys-sub-list .chip button { width: 44px; height: 44px; }
  .sys-checks { grid-template-columns: minmax(0, 1fr); }
  .sys-radio, .sys-check { min-height: 44px; }
  .sys-add-row { max-width: none; }
  .sys-seg-opt span { min-height: 40px; }
  .sys-summary-sched { margin-inline-start: 0 !important; }
  .sys-actionbar .note { flex-basis: 100%; }
  .sys-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-mode-card { flex: 1 1 140px; min-height: 48px; }
  .sys-cp-toolbar .sys-cp-add { flex: 1 1 100%; }
  .sys-lic-btn { height: 44px; }
}