/* Site OS presentation only. Full-screen editor and public website canvases
   render outside this boundary. Page-specific layouts remain authoritative. */
[data-site-workspace-surface] {
  --siteos-ink: #142b40;
  --siteos-muted: #52677c;
  --siteos-line: #d9e5ed;
  --siteos-surface: #ffffff;
  --siteos-soft: #f3f8fc;
  --siteos-accent: #08758c;
  --siteos-accent-soft: #e0f4f7;
  --siteos-violet-soft: #eeedff;
  --siteos-heading: linear-gradient(115deg, #e0f4f7 0%, #f4f6ff 52%, #ffffff 100%);
  --siteos-shadow: 0 8px 24px #14334d06, 0 1px 2px #14334d04;
}
[data-site-workspace-surface].dark {
  --siteos-ink: #edf6fc;
  --siteos-muted: #adc0d1;
  --siteos-line: #294051;
  --siteos-surface: #0d1b2a;
  --siteos-soft: #122638;
  --siteos-accent: #80e0ef;
  --siteos-accent-soft: #153b48;
  --siteos-violet-soft: #242e50;
  --siteos-heading: linear-gradient(115deg, #123848 0%, #18263f 52%, #0d1b2a 100%);
  --siteos-shadow: 0 8px 24px #01091416, 0 1px 2px #01091412;
}
[data-site-workspace-surface] main.operator-workspace {
  background-color: var(--background);
  background-image: radial-gradient(ellipse 700px 300px at 12% 0%, color-mix(in srgb, var(--siteos-accent-soft) 65%, transparent), transparent 100%);
  scrollbar-gutter: stable;
}
/* Large, readable page introductions without changing their actions or layout. */
[data-site-workspace-surface] main :is(
  .site-settings-header,
  [data-site-billing] > .billing-workspace-heading,
  [data-site-media-library] > .site-media-page-header,
  .site-access-workspace > .sa-app-header,
  [data-forms-inbox] > header,
  [data-site-advanced-analytics] > .sa-heading
) {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid color-mix(in srgb, var(--siteos-accent) 22%, var(--siteos-line));
  border-radius: 22px;
  background: var(--siteos-heading);
  box-shadow: var(--siteos-shadow);
}
[data-site-workspace-surface] main :is(
  .site-settings-heading h2,
  [data-site-billing] .billing-workspace-heading h2,
  .site-media-page-header h2,
  .site-access-workspace .sa-app-identity h1,
  [data-forms-inbox] > header h2,
  [data-site-advanced-analytics] .sa-heading h1
) {
  color: var(--siteos-ink);
  font-size: clamp(25px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
[data-site-workspace-surface] main :is(
  .site-settings-subtitle,
  [data-site-billing] .billing-workspace-heading p,
  .site-media-page-header > div > span,
  .site-access-workspace .sa-app-identity p,
  [data-site-advanced-analytics] .sa-heading p
) {
  color: var(--siteos-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 68ch;
}
[data-site-workspace-surface] main :is(
  .site-settings-heading-icon,
  [data-site-billing] .billing-workspace-heading-icon,
  .site-access-workspace .sa-app-icon
) {
  border-color: color-mix(in srgb, var(--siteos-accent) 24%, var(--siteos-line));
  color: var(--siteos-accent);
  background: var(--siteos-surface);
  box-shadow: 0 3px 12px #0b526c09;
}
/* Cards share a visual rhythm; recent Overview, App Store and Feedback layouts
   keep their established structure and individual colors. */
[data-site-workspace-surface] main :is(
  [data-site-workspace-panel]:not(:where([data-site-beta-feedback] *)),
  .site-os-panel,
  .site-access-workspace .sa-panel,
  [data-site-advanced-analytics] .sa-panel,
  [data-site-billing] > [data-slot="card"],
  [data-forms-inbox] > div > nav,
  [data-forms-inbox] > div > div.rounded-2xl
) {
  border-color: var(--siteos-line);
  border-radius: 18px;
  background-color: var(--siteos-surface);
  box-shadow: var(--siteos-shadow);
}
[data-site-workspace-surface] main :is(
  [data-site-workspace-panel]:not(:where([data-site-beta-feedback] *)) > div:first-child h3,
  .site-access-workspace .sa-panel-heading h3,
  [data-site-advanced-analytics] .sa-panel > header h2,
  [data-site-advanced-analytics] .sa-panel > header h3
) {
  color: var(--siteos-ink);
  font-weight: 650;
  letter-spacing: -.015em;
}
[data-site-workspace-surface] main :is(
  [data-site-workspace-metric],
  .site-access-workspace .sa-metric,
  [data-site-advanced-analytics] .sa-metric
) {
  min-width: 0;
  border-color: var(--siteos-line);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--siteos-surface), var(--siteos-soft));
  box-shadow: 0 2px 8px #14334d04;
}
[data-site-workspace-surface] main :is(
  [data-site-workspace-metric] > div:first-child > svg,
  .site-access-workspace .sa-metric > span > svg,
  [data-site-advanced-analytics] .sa-metric > div > span > svg
) { color: var(--siteos-accent); }
/* Fields and tabbed workspaces keep their own behavior, with a consistent
   visible focus target and comfortable touch targets. Switches and checkboxes
   keep their original dimensions and expanded labels. */
[data-site-workspace-surface] main :is(
  [data-slot="button"],
  [data-slot="tabs-trigger"],
  [data-slot="select-trigger"]
):not(:where([data-published-site], [data-published-site] *, [data-public-site-page], [data-public-site-page] *, [data-history-snapshot], [data-history-snapshot] *, .template-preview-canvas, .template-preview-canvas *, .personal-site-preview-canvas, .personal-site-preview-canvas *, [data-site-editor-root], [data-site-editor-root] *)):not([role="checkbox"]):not([role="switch"]) {
  min-height: 44px;
  touch-action: manipulation;
}
[data-site-workspace-surface] main :is(
  [data-slot="button"],
  [data-slot="tabs-trigger"],
  [data-slot="select-trigger"],
  [data-slot="input"],
  [data-slot="textarea"],
  [data-site-settings] summary,
  [data-forms-inbox] summary,
  .site-media-library summary,
  .site-access-workspace summary,
  [data-site-advanced-analytics] summary
):not(:where([data-published-site], [data-published-site] *, [data-public-site-page], [data-public-site-page] *, [data-history-snapshot], [data-history-snapshot] *, .template-preview-canvas, .template-preview-canvas *, .personal-site-preview-canvas, .personal-site-preview-canvas *, [data-site-editor-root], [data-site-editor-root] *)):focus-visible {
  outline: 2px solid var(--siteos-accent);
  outline-offset: 3px;
}
[data-site-workspace-surface] main :is(
  [data-slot="input"],
  [data-slot="textarea"],
  [data-slot="select-trigger"]
):not(:where([data-published-site], [data-published-site] *, [data-public-site-page], [data-public-site-page] *, [data-history-snapshot], [data-history-snapshot] *, .template-preview-canvas, .template-preview-canvas *, .personal-site-preview-canvas, .personal-site-preview-canvas *, [data-site-editor-root], [data-site-editor-root] *)) { border-radius: 10px; }
[data-site-workspace-surface] main :is(
  .site-settings-nav-item[data-state="active"],
  .site-access-workspace .sa-nav-main.is-active,
  .site-access-workspace .sa-nav-children button[aria-current="page"],
  [data-forms-inbox] [data-slot="tabs-trigger"][data-state="active"]
) {
  color: var(--siteos-ink);
  border-color: color-mix(in srgb, var(--siteos-accent) 36%, var(--siteos-line));
  background: var(--siteos-accent-soft);
}
[data-site-workspace-surface] main [data-site-settings] .site-settings-navigation {
  padding: 16px;
  border: 1px solid var(--siteos-line);
  border-radius: 18px;
  background: var(--siteos-surface);
  box-shadow: var(--siteos-shadow);
}
[data-site-workspace-surface] main [data-site-settings] .site-settings-context {
  padding-inline: 4px;
}
[data-site-workspace-surface] main [data-site-settings] .site-settings-disclosure[open] {
  border-color: color-mix(in srgb, var(--siteos-accent) 32%, var(--siteos-line));
}
[data-site-workspace-surface] main [data-site-settings] .site-settings-disclosure[open] > summary {
  background: var(--siteos-soft);
}
/* Media stays a working library, with the search surface separated from files. */
[data-site-workspace-surface] main .site-media-library { gap: 20px; }
[data-site-workspace-surface] main .site-media-summary {
  padding: 12px 16px;
  border: 1px solid var(--siteos-line);
  border-radius: 14px;
  background: var(--siteos-surface);
  gap: 10px 20px;
}
[data-site-workspace-surface] main .site-media-manager {
  padding: clamp(16px, 2vw, 24px);
  border-color: var(--siteos-line);
  border-radius: 20px;
  box-shadow: var(--siteos-shadow);
}
[data-site-workspace-surface] main .site-media-browser-toolbar { padding-bottom: 6px; }
[data-site-workspace-surface] main .site-media-search input { height: 44px; }
[data-site-workspace-surface] main :is(.site-media-manager select, .site-media-type-filters button, .site-media-view button) {
  min-height: 44px;
}
[data-site-workspace-surface] main .site-media-view button { min-width: 44px; }
[data-site-workspace-surface] main .site-media-empty {
  min-height: 290px;
  padding: 40px 24px;
  border: 1px dashed var(--siteos-line);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--siteos-soft), var(--siteos-surface));
}
[data-site-workspace-surface] main .site-media-empty > svg {
  box-sizing: content-box;
  padding: 15px;
  border: 1px solid var(--siteos-line);
  border-radius: 18px;
  color: var(--siteos-accent);
  background: var(--siteos-surface);
}
[data-site-workspace-surface] main .site-media-empty h3 { font-size: 19px; }
[data-site-workspace-surface] main .site-media-empty p { max-width: 42ch; font-size: 13px; }
[data-site-workspace-surface] main .site-media-results article { background: var(--siteos-surface); }
@media (hover: hover) and (pointer: fine) {
  [data-site-workspace-surface] main .site-media-results article:hover {
    border-color: var(--siteos-accent);
    box-shadow: 0 4px 16px #0b526c0d;
  }
}
/* Installed app workspaces: a clearer rail, roomier data and useful empty states. */
[data-site-workspace-surface] main .site-access-workspace .sa-rail {
  padding: 16px;
  border: 1px solid var(--siteos-line);
  border-radius: 18px;
  background: var(--siteos-surface);
  box-shadow: var(--siteos-shadow);
}
[data-site-workspace-surface] main .site-access-workspace .sa-panel-heading { background: var(--siteos-soft); }
[data-site-workspace-surface] main .site-access-workspace .sa-panel-body { line-height: 1.7; }
[data-site-workspace-surface] main :is(
  .site-access-workspace .sa-setup-row,
  .site-access-workspace .sa-next-actions button,
  .site-access-workspace .sa-nav-group button,
  [data-site-advanced-analytics] .sa-navigation button,
  [data-site-advanced-analytics] .sa-segment button,
  [data-site-advanced-analytics] .sa-icon-button
) { min-height: 44px; }
[data-site-workspace-surface] main :is(
  .site-access-workspace .sa-panel-body > .p-6.text-center,
  [data-site-advanced-analytics] .sa-empty,
  [data-forms-inbox] .border-dashed
) {
  border: 1px dashed var(--siteos-line);
  border-radius: 15px;
  padding: 28px 22px;
  background: linear-gradient(145deg, var(--siteos-soft), var(--siteos-surface));
}
[data-site-workspace-surface] main [data-site-advanced-analytics] .sa-navigation {
  padding: 6px;
  border-radius: 15px;
  background: var(--siteos-soft);
}
[data-site-workspace-surface] main [data-site-advanced-analytics] .sa-navigation [aria-selected="true"] {
  color: var(--siteos-accent);
  background: var(--siteos-surface);
  box-shadow: 0 2px 8px #14334d08;
}
[data-site-workspace-surface] main :is(
  [data-site-advanced-analytics] .sa-table-wrap th,
  [data-site-advanced-analytics] .sa-table-wrap td,
  .site-access-workspace th,
  .site-access-workspace td,
  [data-site-invoice-history] th,
  [data-site-invoice-history] td
) { padding-block: 14px; line-height: 1.6; }
[data-site-workspace-surface] main :is(
  [data-site-invoice-history] thead,
  [data-site-advanced-analytics] .sa-table-wrap thead,
  .site-access-workspace thead
) { background: var(--siteos-soft); }
[data-site-workspace-surface] main [data-forms-inbox] > div > nav { padding: 20px; }
[data-site-workspace-surface] main [data-forms-inbox] details[open] > summary {
  color: var(--siteos-ink);
  background: var(--siteos-accent-soft);
}
@media (max-width: 899px) {
  [data-site-workspace-surface] main [data-site-settings] .site-settings-navigation { padding: 14px; }
  [data-site-workspace-surface] main [data-site-settings] .site-settings-layout { gap: 20px; }
  [data-site-workspace-surface] main .site-access-workspace .sa-workspace-layout { gap: 20px; }
}
@media (max-width: 640px) {
  [data-site-workspace-surface] main :is(
      .site-settings-header,
    [data-site-billing] > .billing-workspace-heading,
    [data-site-media-library] > .site-media-page-header,
    .site-access-workspace > .sa-app-header,
    [data-forms-inbox] > header,
    [data-site-advanced-analytics] > .sa-heading
  ) { padding: 20px; border-radius: 18px; gap: 18px; }
  [data-site-workspace-surface] main :is(.site-settings-header, [data-site-billing] > .billing-workspace-heading) {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  [data-site-workspace-surface] main .site-settings-heading { align-items: flex-start; }
  [data-site-workspace-surface] main .site-settings-header-action { width: 100%; max-width: none; }
  [data-site-workspace-surface] main .site-settings-header-action > button { width: 100%; }
  [data-site-workspace-surface] main .site-media-page-header > div:last-child { width: 100%; }
  [data-site-workspace-surface] main .site-media-summary > button { margin-left: 0; }
  [data-site-workspace-surface] main .site-media-empty { min-height: 250px; padding: 30px 18px; }
  [data-site-workspace-surface] main .site-access-workspace .sa-app-header { grid-template-columns: minmax(0, 1fr); }
  [data-site-workspace-surface] main .site-access-workspace .sa-app-identity h1 { white-space: normal; }
  [data-site-workspace-surface] main .site-access-workspace .sa-app-tools { grid-column: 1; grid-row: auto; }
  [data-site-workspace-surface] main .site-access-workspace .sa-app-context { grid-column: 1; }
  [data-site-workspace-surface] main [data-site-advanced-analytics] .sa-heading { flex-wrap: wrap; }
  [data-site-workspace-surface] main [data-site-advanced-analytics] .sa-heading-actions { width: 100%; }
  [data-site-workspace-surface] main :is(.site-settings-heading h2, [data-site-billing] .billing-workspace-heading h2, .site-media-page-header h2, .site-access-workspace .sa-app-identity h1, [data-forms-inbox] > header h2, [data-site-advanced-analytics] .sa-heading h1) { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-site-workspace-surface] main :is(.site-media-results article, .site-settings-nav-item, .site-access-workspace .sa-nav-group button) { transition: none; }
}