/* rattib-sheet-run
 * GENERATED by tools/build-rattib.mjs from tools/rattib-sheets.json. Do not edit: change the member sheets or the list, then run npm run build:app.
 * Members in cascade order (file, bytes, first line):
 * Reversible members: format 2
 *   color-polish.css 12933 11
 *   cloud-account-ui.css 48039 289
 *   workspace-sync.css 10582 686
 *   access-profiles-ui.css 889 965
 *   glass-materials.css 100737 976
 */
/* Sarab's work palette: mint delivery, lavender planning, apricot time.
   Labels and existing status text retain meaning without relying on color. */
:root, html[data-theme="dark"] {
  --polish-mint: #a9d2b4;
  --polish-mint-surface: #213027;
  --polish-violet: #c8b7dc;
  --polish-violet-surface: #2a2532;
  --polish-amber: #e1bc8d;
  --polish-amber-surface: #32291d;
  --polish-line: #494034;
  --polish-shadow: rgb(0 0 0 / 18%);
  --polish-card-crown: #242018;
  --polish-edge: rgb(246 240 229 / 8%);
  --polish-panel-shadow: inset 0 1px 0 var(--polish-edge), 0 6px 18px var(--polish-shadow);
  --polish-control-shadow: inset 0 1px 0 var(--polish-edge);
  --polish-raised-shadow: inset 0 1px 0 rgb(246 240 229 / 16%), 0 0 0 1px var(--polish-line), 0 24px 64px rgb(0 0 0 / 38%);
  --polish-dialog-surface: var(--card);
  --polish-dialog-sheen: linear-gradient(180deg, var(--polish-card-crown), var(--card) 96px);
}
html[data-theme="light"] {
  --polish-mint: #315c43;
  --polish-mint-surface: #e4efe3;
  --polish-violet: #695682;
  --polish-violet-surface: #eee8f4;
  --polish-amber: #78572c;
  --polish-amber-surface: #f4eadb;
  --polish-line: #d9d8cd;
  --polish-shadow: rgb(28 62 44 / 6%);
  --polish-card-crown: #fffefa;
  --polish-edge: rgb(255 255 255 / 90%);
  --polish-raised-shadow: inset 0 1px 0 var(--polish-edge), 0 0 0 1px var(--polish-line), 0 24px 64px rgb(28 62 44 / 16%);
}


html[data-theme="dark"] .project-suite {
  --suite-bg: var(--card);
  --suite-soft: var(--row);
  --suite-line: var(--border);
  --suite-text: var(--text);
  --suite-muted: var(--muted);
  --suite-action: var(--green);
}


.tabs .tab { --polish-tone: var(--polish-mint); --polish-surface: var(--polish-mint-surface); }
.tabs .tab:is([data-tab="knowledge"], [data-tab="projects"], [data-tab="contracts"], [data-tab="proposal"], [data-tab="documents"]) {
  --polish-tone: var(--polish-violet); --polish-surface: var(--polish-violet-surface);
}
.tabs .tab:is([data-tab="week"], [data-tab="calendar"], [data-tab="timesheet"]) {
  --polish-tone: var(--polish-amber); --polish-surface: var(--polish-amber-surface);
}
.tabs .tab .tab-icon {
  border-radius: 7px;
  background: var(--polish-surface);
  color: var(--polish-tone);
  box-shadow: 0 0 0 4px var(--polish-surface);
}
.tabs .tab.active, .tabs .tab.active:hover {
  background: var(--polish-surface);
  box-shadow: inset 0 0 0 1px var(--polish-line);
}
.tabs .tab.active .tab-icon { background: transparent; box-shadow: none; }
.workspace-framed .tabs .tab.active {
  border-inline-start-color: var(--polish-tone);
}
.workspace-framed .tabs, .workspace-utilities {
  box-shadow: 0 8px 28px var(--polish-shadow);
}
.workspace-framed .workspace > main {
  box-shadow: 0 8px 28px var(--polish-shadow);
}
.workspace-create {
  box-shadow: 0 3px 12px var(--polish-shadow);
}
.workspace-utility[data-workspace-write] {
  color: var(--polish-mint);
  background: var(--polish-mint-surface);
  box-shadow: inset 0 0 0 1px var(--polish-line);
}


.dashboard-suite .suite-header {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.project-suite .home-metric {
  --polish-tone: var(--polish-mint);
  --polish-surface: var(--polish-mint-surface);
  background: var(--suite-bg);
  border: 1px solid var(--suite-line);
  border-block-start: 3px solid var(--polish-tone);
  border-radius: 10px;
  box-shadow: 0 3px 10px var(--polish-shadow);
}
.home-metric[data-home-metric="open"] {
  --polish-tone: var(--polish-violet); --polish-surface: var(--polish-violet-surface);
}
.home-metric[data-home-metric="today"] {
  --polish-tone: var(--polish-amber); --polish-surface: var(--polish-amber-surface);
}
.home-metric[data-home-metric="overdue"] {
  --polish-tone: var(--danger); --polish-surface: var(--danger-surface);
}
.home-metric[data-home-metric="projects"] {
  --polish-tone: var(--polish-mint); --polish-surface: var(--polish-mint-surface);
}
.home-metric strong { color: var(--polish-tone); }
.home-metric span { color: var(--suite-text); }
.project-suite .home-metric:hover {
  background: var(--suite-bg);
  border-color: var(--polish-tone);
}
.home-widget { --polish-tone: var(--polish-mint); }
.home-widget[data-home-widget="tasks"], .home-widget[data-home-widget="cash"] {
  --polish-tone: var(--polish-mint);
}
.home-widget[data-home-widget="projects"], .home-widget[data-home-widget="status"] {
  --polish-tone: var(--polish-violet);
}
.home-widget[data-home-widget="followups"], .home-widget[data-home-widget="week"] {
  --polish-tone: var(--polish-amber);
}
.home-widget-head h2 {
  border-inline-start: 3px solid var(--polish-tone);
  padding-inline-start: 10px;
}
.home-widget progress { accent-color: var(--polish-tone); }
.project-suite .home-project-row:hover, .project-suite .home-work-row:hover {
  background: var(--suite-soft);
}
.project-suite .home-metric:focus-visible {
  outline: 3px solid var(--polish-tone);
  outline-offset: 3px;
}

.dashboard-suite .home-metric,
.dashboard-suite .home-metric:hover {
  background-color: var(--suite-bg);
  background-image: linear-gradient(180deg, var(--polish-card-crown), var(--suite-bg) 70%);
  box-shadow: inset 0 1px 0 var(--polish-edge), 0 3px 10px var(--polish-shadow);
}
.dashboard-suite .home-widget {
  background: var(--suite-bg);
  box-shadow: inset 0 1px 0 var(--polish-edge), 0 4px 14px var(--polish-shadow);
}

/* Shared material layer: existing surfaces gain a rim and depth, never new geometry.
   Preserve their own backgrounds and semantic/status borders. Reading sheets,
   calendar cells, ledger rows and the chosen Focus atmosphere remain untouched. */
.workspace-framed .workspace > main {
  box-shadow: var(--polish-panel-shadow);
}

.workspace-framed #panel-week .week-glance-card {
  box-shadow: var(--polish-panel-shadow);
}
.workspace-framed :is(
  .suite-project-detail, .suite-task-row, .suite-board-column,
  .documents-list, .documents-detail, .invoice-essentials,
  .finance-report, .finance-results, .finance-detail, .contracts-detail,
  .calendar-board, .calendar-inspector, .knowledge-library, .knowledge-detail,
  .scheduling-editor, .scheduling-booking-form, .scheduling-booking,
  .files-usage, .files-editor, .focus-card,
  .client-portal-preview, .portal-delivery-editor, .portal-approval-receipt,
  .operations-section, .collaboration-comment,
  .week-glance-card, .proposal-core, .proposal-detail
) {
  box-shadow: var(--polish-panel-shadow);
}
.workspace-framed :is(
  .suite-toolbar, .calendar-toolbar, .calendar-filters,
  .knowledge-filters, .finance-filter-bar, .finance-filters,
  .forms-library button, .forms-settings > summary
) {
  box-shadow: var(--polish-control-shadow);
}

/* Raised controls share an opaque lit crown; native modal focus/scroll stays owned
   by the existing component. Full-screen Focus keeps its selected atmosphere. */
.workspace-framed dialog:not(.focus-clear-dialog),
.workspace-framed :is(.crm-sheet-panel, .workspace-tools-body, .account-session-panel, .workspace-utility-label) {
  background-color: var(--polish-dialog-surface);
  background-image: var(--polish-dialog-sheen);
  box-shadow: var(--polish-raised-shadow);
}
.workspace-framed dialog:not(.focus-clear-dialog)::backdrop {
  background: rgb(12 10 7 / .64);
}
.workspace-framed #panel-files :is(button, a, input, select):focus-visible,
.workspace-framed .access-profiles :is(button, input, select):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .workspace-framed {
    --polish-panel-shadow: inset 0 1px 0 var(--polish-edge), 0 2px 7px var(--polish-shadow);
    --polish-raised-shadow: inset 0 1px 0 var(--polish-edge), 0 0 0 1px var(--polish-line), 0 12px 32px var(--polish-shadow);
  }
}


html[data-theme="light"] .workspace-framed .workspace > main { background: transparent; box-shadow: none; }
html[data-theme="light"] .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav) { background: var(--rail); box-shadow: 0 2px 8px rgb(28 62 44 / 5%); }
html[data-theme="light"] #panel-home .suite-header { background: transparent; box-shadow: none; }
html[data-theme="light"] #panel-home :is(.home-metric,.home-metric:hover,.home-widget) { background: var(--suite-bg); border-color: var(--suite-line); box-shadow: 0 2px 8px rgb(28 62 44 / 5%); }
html[data-theme="light"] #panel-home.dashboard-suite .home-next-step { --suite-text: #fffdf7; --suite-muted: #e4efe3; background: #315c43; color: #fffdf7; border-color: #315c43; box-shadow: 0 4px 12px rgb(28 62 44 / 10%); }
html[data-theme="light"] #panel-home .home-next-step :is(.home-next-label,#home-next-title,#home-next-detail) { color: var(--suite-text); }
html[data-theme="light"] #panel-home .home-next-step :is(.home-next-label,#home-next-detail) { color: var(--suite-muted); }
html[data-theme="light"] #panel-home #home-next-action { background: #fffdf7; border-color: #fffdf7; color: #315c43; }
html[data-theme="light"] #panel-home #home-next-action:hover { background: #e4efe3; border-color: #e4efe3; color: #25392f; }
html[data-theme="light"] #panel-home #home-next-action:focus-visible { outline: 3px solid #fffdf7; outline-offset: 4px; }
html[data-theme="light"] :is(#panel-tasks,#panel-projects) :is(.suite-task-row,.suite-project-detail,.suite-project-item,.suite-toolbar) { box-shadow: 0 2px 8px rgb(28 62 44 / 5%); }
html[data-theme="light"] #panel-tasks .suite-board-column:not(.is-drop-target) { background: var(--suite-soft); box-shadow: none; }
html[data-theme="light"] #panel-tasks .suite-board-column .suite-task-row { background: var(--suite-bg); }


@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .dashboard-suite .home-metric,
  .dashboard-suite .home-metric:hover,
  .dashboard-suite .home-widget {
    background: var(--suite-bg);
    box-shadow: none;
  }
  .workspace-framed {
    --polish-panel-shadow: none;
    --polish-control-shadow: none;
    --polish-raised-shadow: none;
    --polish-dialog-sheen: none;
  }

  /**/
  html[data-theme="light"] .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav),
  html[data-theme="light"] #panel-home :is(.home-metric,.home-metric:hover,.home-widget),
  html[data-theme="light"] #panel-home.dashboard-suite .home-next-step,
  html[data-theme="light"] :is(#panel-tasks,#panel-projects) :is(.suite-task-row,.suite-project-detail,.suite-project-item,.suite-toolbar) { box-shadow: none; }
}
@media (forced-colors: active) {
  .project-suite .home-metric, .tabs .tab.active { border: 1px solid ButtonText; }
  .home-metric strong, .tabs .tab .tab-icon { color: ButtonText; }
  .home-widget-head h2 { border-inline-start-color: CanvasText; }
  .dashboard-suite .home-metric,
  .dashboard-suite .home-metric:hover,
  .dashboard-suite .home-widget {
    background: Canvas;
    box-shadow: none;
  }
  .workspace-framed .tabs .tab:not(.active) .tab-icon { color: ButtonText; }
  .workspace-framed .tabs .tab.active { border-inline-start-color: Highlight; }
  .project-suite .home-metric:focus-visible { outline-color: Highlight; }
  .workspace-framed {
    --polish-panel-shadow: none;
    --polish-control-shadow: none;
    --polish-raised-shadow: none;
    --polish-dialog-sheen: none;
    --polish-dialog-surface: Canvas;
  }
  .workspace-framed dialog:not(.focus-clear-dialog),
  .workspace-framed :is(.crm-sheet-panel, .workspace-tools-body, .account-session-panel, .workspace-utility-label) {
    border-color: CanvasText;
  }
  .workspace-framed #panel-files :is(button, a, input, select):focus-visible,
  .workspace-framed .access-profiles :is(button, input, select):focus-visible {
    outline-color: Highlight;
  }

  /**/
  html[data-theme="light"] .workspace-framed .workspace > main { background: Canvas; color: CanvasText; }
  html[data-theme="light"] .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav),
  html[data-theme="light"] #panel-home :is(.home-metric,.home-metric:hover,.home-widget),
  html[data-theme="light"] :is(#panel-tasks,#panel-projects) :is(.suite-task-row,.suite-project-detail,.suite-project-item,.suite-toolbar,.suite-board-column) { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  html[data-theme="light"] #panel-home.dashboard-suite .home-next-step { --suite-text: CanvasText; --suite-muted: CanvasText; background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  html[data-theme="light"] #panel-home #home-next-action,
  html[data-theme="light"] #panel-home #home-next-action:hover { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  html[data-theme="light"] #panel-home #home-next-action:focus-visible { outline-color: Highlight; }
  html[data-theme="light"] #panel-tasks .suite-board-column.is-drop-target { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Account surfaces · "Oasis threshold" (2026-10-30).
   One focused card for signing in, a staged path for new accounts and a sectioned personal workspace once signed in.
   Colour comes only from the brand: Night, Ink, Sand, Dust, Oasis (light-surface greens) and Signal. */
.rattib-account-entrypoints, html body:not(#_):not(#__) :is(.cloud-account-dialog, .cloud-account-signout-choice, .cloud-account-delete-choice, .cloud-account-panel) {
  /**/
  --account-ink: var(--at-ink, #f3f0e9); --account-muted: var(--at-ink-3, #a1998b); --account-surface: var(--at-glass-strong, #15120d);
  --account-field: color-mix(in srgb, var(--account-ink) 4%, var(--account-surface)); --account-raised: var(--at-pane, color-mix(in srgb, var(--account-ink) 6%, var(--account-surface)));
  --account-line: color-mix(in srgb, var(--account-ink) 13%, transparent); --account-line-strong: color-mix(in srgb, var(--account-ink) 38%, transparent);
  --account-accent: var(--at-green, #00d492); --account-on-accent: var(--at-green-ink, #0c0a07); --account-accent-text: var(--at-green-text, #00d492);
  --account-soft: var(--at-green-soft, color-mix(in srgb, #00d492 13%, transparent)); --account-glow: transparent;
  --account-danger: var(--at-rose, #f05751); --account-danger-text: var(--at-rose, #f05751); --account-danger-soft: color-mix(in srgb, var(--account-danger) 12%, transparent);
  --account-warn-soft: color-mix(in srgb, var(--account-muted) 16%, transparent);
  --account-shadow: 0 40px 120px rgb(0 0 0 / .55);
  --account-serif: var(--at-serif, "Instrument Serif", Georgia, serif); --account-sans: var(--at-sans, "Instrument Sans", "IBM Plex Sans Arabic", sans-serif);
  --account-ease: cubic-bezier(.2, .7, .2, 1); --account-pill: var(--sb-pill, 999px);
  --text: var(--account-ink); --muted: var(--account-muted); --border: var(--account-line); --green: var(--account-accent-text);
  color: var(--account-ink); font-family: var(--account-sans); color-scheme: dark;
}
html[data-theme="light"] .rattib-account-entrypoints, html[data-theme="light"] body:not(#_):not(#__) :is(.cloud-account-dialog, .cloud-account-signout-choice, .cloud-account-delete-choice, .cloud-account-panel) {
  --account-surface: var(--at-glass-strong, #fff); --account-field: color-mix(in srgb, var(--account-ink) 3%, var(--account-surface));
  --account-shadow: 0 40px 120px rgb(0 0 0 / .2);
  color-scheme: light;
}


html body:not(#_):not(#__) .cloud-account-dialog {
  box-sizing: border-box; inline-size: min(480px, calc(100% - 32px)); max-inline-size: none; max-block-size: calc(100dvh - 40px);
  padding: 0; border: 1px solid var(--account-line); border-radius: 28px; background: var(--account-surface); color: var(--account-ink);
  box-shadow: var(--account-shadow); overflow: auto; overscroll-behavior: contain; transition: inline-size .3s var(--account-ease);
}
html body:not(#_):not(#__) .cloud-account-dialog[data-account-view="profile"] { inline-size: min(1000px, calc(100% - 32px)); }
html body:not(#_):not(#__) .cloud-account-dialog::backdrop { background: color-mix(in srgb, var(--account-surface) 35%, rgb(0 0 0 / .62)); }
html body:not(#_):not(#__) .cloud-account-dialog #cloud-account-root { display: block; }
html body:not(#_):not(#__) .cloud-account-dialog #cloud-account-root[hidden] { display: none; }
html body:not(#_):not(#__) .cloud-account-dialog[open] { animation: account-arrive .32s var(--account-ease) both; }


html body:not(#_):not(#__) .cloud-account-panel {
  position: relative; display: block; min-inline-size: 0; max-inline-size: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: var(--account-surface);
  color: var(--account-ink); text-align: start; line-height: 1.55; overflow-wrap: anywhere;
}
html body:not(#_):not(#__) .cloud-account-panel [hidden] { display: none !important; }
html body:not(#_):not(#__) .cloud-account-panel :is(h3, h4, h5, p) { margin: 0; }
html body:not(#_):not(#__) .cloud-account-header {
  position: sticky; inset-block-start: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 14px 24px; padding-inline: 24px 14px; background: color-mix(in srgb, var(--account-surface) 88%, transparent);
  backdrop-filter: blur(10px); border-block-end: 1px solid transparent;
}
html body:not(#_):not(#__) .cloud-account-title { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
html body:not(#_):not(#__) .cloud-account-orb {
  inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none;
  background: var(--account-accent);
}
html body:not(#_):not(#__) .cloud-account-header h3 { padding-inline-start: 12px; border-inline-start: 1px solid var(--account-line); color: var(--account-muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-close {
  position: relative; inline-size: 44px; block-size: 44px; min-inline-size: 44px; padding: 0; border-radius: 50% !important; border-color: transparent;
  font-size: 0; color: var(--account-muted);
}

html body:not(#_):not(#__) #cloud-account-root .cloud-account-panel .cloud-account-close { font-size: 0 !important; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-close::before { content: "\00d7" / ""; font-size: 24px; line-height: 1; }
html body:not(#_):not(#__) .cloud-account-content { display: grid; align-content: start; gap: 18px; min-inline-size: 0; padding: 6px 32px 26px; }


html body:not(#_):not(#__) .cloud-account-panel button {
  min-block-size: 44px; min-inline-size: 44px; max-inline-size: 100%; padding: 10px 16px; border: 1px solid var(--account-line); border-radius: 14px !important;
  background: transparent; color: var(--account-ink); font: 500 14px/1.4 var(--account-sans); white-space: normal; overflow-wrap: anywhere; box-shadow: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
html body:not(#_):not(#__) .cloud-account-panel button:hover:not(:disabled) { background: var(--account-soft); border-color: var(--account-line-strong); }
html body:not(#_):not(#__) .cloud-account-panel button:active:not(:disabled) { transform: translateY(1px); }
html body:not(#_):not(#__) .cloud-account-panel button.primary {
  min-block-size: 52px; border-color: var(--account-accent); background: var(--account-accent); color: var(--account-on-accent); font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 28px -12px var(--account-glow);
}
html body:not(#_):not(#__) .cloud-account-panel button.primary:hover:not(:disabled) { background: var(--account-accent); filter: brightness(1.06); }
html body:not(#_):not(#__) .cloud-account-panel button:disabled { opacity: .55; cursor: not-allowed; }
html body:not(#_):not(#__) .cloud-account-panel[aria-busy="true"] button:disabled { cursor: progress; }
html body:not(#_):not(#__) .cloud-account-panel[aria-busy="true"] button.primary:disabled { opacity: .85; }
html body:not(#_):not(#__) .cloud-account-panel button.danger { border-color: color-mix(in srgb, var(--account-danger) 60%, transparent); color: var(--account-danger-text); }
html body:not(#_):not(#__) .cloud-account-panel button.danger:hover:not(:disabled) { background: var(--account-danger-soft); }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-link {
  justify-self: start; inline-size: auto; padding-inline: 4px; border-color: transparent; background: transparent; color: var(--account-accent-text);
  font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--account-accent-text) 35%, transparent); text-underline-offset: 4px;
}
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-link:hover:not(:disabled) { background: var(--account-soft); text-decoration-color: currentColor; }
html body:not(#_):not(#__) .cloud-account-panel :is(button, input, select, a, summary):focus-visible { outline: 3px solid var(--account-accent-text); outline-offset: 2px; }
html body:not(#_):not(#__) .cloud-account-form { display: grid; gap: 14px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-field { display: grid; gap: 6px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-field > span { font-size: 13px; font-weight: 600; color: var(--account-ink); }
html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select) {
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 52px; padding: 12px 14px; border: 1px solid var(--account-line-strong); border-radius: 14px;
  background: var(--account-field); color: var(--account-ink); font: 16px/1.4 var(--account-sans); box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease;
}
html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select):hover { border-color: var(--account-ink); }
html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select):focus-visible { border-color: var(--account-accent); box-shadow: 0 0 0 4px var(--account-soft); }
html body:not(#_):not(#__) .cloud-account-panel input[readonly] { background: transparent; border-style: dashed; }
html body:not(#_):not(#__) .cloud-account-panel [aria-invalid="true"] { border-color: var(--account-danger) !important; }
html body:not(#_):not(#__) .cloud-account-field-error { grid-column: 1 / -1; display: flex; gap: 6px; color: var(--account-danger-text); font-size: 13px; font-weight: 500; }
html body:not(#_):not(#__) .cloud-account-field-error::before { content: "!" / ""; display: inline-grid; place-items: center; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; border-radius: 50%; background: var(--account-danger); color: #0c0a07; font-size: 12px; font-weight: 700; }
html body:not(#_):not(#__) .cloud-account-password { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; }
html body:not(#_):not(#__) .cloud-account-password > button { min-block-size: 52px; padding-inline: 14px; font-size: 13px; color: var(--account-muted); }
html body:not(#_):not(#__) .cloud-account-help { color: var(--account-muted); font-size: 13px; line-height: 1.6; }
html body:not(#_):not(#__) .cloud-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html body:not(#_):not(#__) .cloud-account-actions > button { flex: 1 1 10rem; }
html body:not(#_):not(#__) .cloud-account-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


html body:not(#_):not(#__) .cloud-account-status {
  position: relative; min-block-size: 1.4em; margin: 0; padding: 12px 14px 12px 40px; padding-inline: 40px 14px; border: 1px solid var(--account-line); border-radius: 14px;
  background: var(--account-raised); color: var(--account-ink); font-size: 14px; line-height: 1.55; animation: account-rise .24s var(--account-ease) both;
}
html body:not(#_):not(#__) .cloud-account-status:empty { display: none; }
html body:not(#_):not(#__) .cloud-account-status::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block-start: 17px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--account-muted); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="success"] { border-color: color-mix(in srgb, var(--account-accent) 45%, transparent); background: var(--account-soft); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="success"]::before { background: var(--account-accent); box-shadow: 0 0 0 4px var(--account-soft); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="error"] { border-color: color-mix(in srgb, var(--account-danger) 55%, transparent); background: var(--account-danger-soft); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="error"]::before { background: var(--account-danger); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="warn"] { background: var(--account-warn-soft); border-color: var(--account-line-strong); }
html body:not(#_):not(#__) .cloud-account-status[data-tone="warn"]::before { background: transparent; border: 2px solid var(--account-ink); inline-size: 8px; block-size: 8px; }
html body:not(#_):not(#__) .cloud-account-status[data-tone="info"]::before { background: transparent; border: 2px solid var(--account-accent-text); inline-size: 8px; block-size: 8px; }
html body:not(#_):not(#__) .cloud-account-panel[aria-busy="true"] .cloud-account-status::before { background: transparent; border: 2px solid var(--account-line-strong); border-block-start-color: var(--account-accent); inline-size: 8px; block-size: 8px; animation: account-spin .8s linear infinite; }
html body:not(#_):not(#__) .cloud-account-unconfigured { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--account-line); border-radius: 18px; background: var(--account-raised); }
html body:not(#_):not(#__) .cloud-account-unconfigured h4 { font-size: 18px; }


html body:not(#_):not(#__) .cloud-account-auth { display: grid; gap: 16px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--account-line); border-radius: 999px; background: var(--account-field); }
html body:not(#_):not(#__) .cloud-account-switch > button { min-block-size: 44px; border: 0; border-radius: 999px !important; color: var(--account-muted); font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-switch > button[aria-pressed="true"] { background: var(--account-raised); color: var(--account-ink); box-shadow: 0 1px 0 var(--account-line), 0 6px 16px -10px rgb(0 0 0 / .35); }
html body:not(#_):not(#__) .cloud-account-switch > button[aria-pressed="true"]::after { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-start: 8px; border-radius: 50%; background: var(--account-accent); vertical-align: middle; }
html body:not(#_):not(#__) .cloud-account-auth > h4 { margin-block-start: 6px; font: 400 40px/1.08 var(--account-serif); letter-spacing: -.02em; }
html body:not(#_):not(#__) .cloud-account-auth > .cloud-account-help { margin-block-start: -8px; font-size: 14px; }
html body:not(#_):not(#__) .cloud-account-google { display: grid; gap: 12px; }
html body:not(#_):not(#__) a.cloud-account-google-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  inline-size: 100%; min-block-size: 52px; padding-inline: 16px; border: 1px solid var(--account-line-strong);
  border-radius: var(--account-pill); background: var(--account-raised); color: var(--account-ink);
  font: 600 15px/1.2 var(--account-sans); text-decoration: none;
}
html body:not(#_):not(#__) a.cloud-account-google-button:hover { background: var(--account-soft); }
html body:not(#_):not(#__) a.cloud-account-google-button[aria-disabled="true"] { opacity: .55; pointer-events: none; }
html body:not(#_):not(#__) .cloud-account-google-mark {
  display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem;
  border: 1px solid var(--account-line-strong); border-radius: 50%; font-weight: 700; font-size: 13px;
}
html body:not(#_):not(#__) .cloud-account-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 0; color: var(--account-muted); font-size: 13px; line-height: 1.4;
}
html body:not(#_):not(#__) .cloud-account-or::before, html body:not(#_):not(#__) .cloud-account-or::after { content: ""; block-size: 1px; background: var(--account-line); }
html body:not(#_):not(#__) .cloud-account-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
html body:not(#_):not(#__) .cloud-account-steps li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-inline-size: 0; padding-block-start: 14px; color: var(--account-muted); font-size: 12px; font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-steps li::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; border-radius: 3px; background: var(--account-line); transition: background-color .3s var(--account-ease); }
html body:not(#_):not(#__) .cloud-account-steps li[data-state="done"]::before { background: color-mix(in srgb, var(--account-accent) 55%, transparent); }
html body:not(#_):not(#__) .cloud-account-steps li[data-state="current"]::before { background: var(--account-accent); box-shadow: 0 0 12px var(--account-glow); }
html body:not(#_):not(#__) .cloud-account-steps li[data-state="current"] { color: var(--account-ink); }
html body:not(#_):not(#__) .cloud-account-step-number { font-variant-numeric: tabular-nums; }
html body:not(#_):not(#__) .cloud-account-steps li[data-state="done"] .cloud-account-step-number { display: none; }
html body:not(#_):not(#__) .cloud-account-steps li[data-state="done"] .cloud-account-step-label::before { content: "\2713" / ""; margin-inline-end: 4px; color: var(--account-accent-text); }
html body:not(#_):not(#__) .cloud-account-step { display: grid; gap: 14px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-identity-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-inline-size: 0; padding: 8px 8px 8px 14px; padding-inline: 14px 8px;
  border: 1px solid var(--account-line); border-radius: 16px; background: var(--account-field);
}
html body:not(#_):not(#__) .cloud-account-chip-copy { display: grid; min-inline-size: 0; line-height: 1.35; }
html body:not(#_):not(#__) .cloud-account-chip-name { font-weight: 600; font-size: 14px; }
html body:not(#_):not(#__) .cloud-account-chip-email { color: var(--account-muted); font-size: 13px; overflow-wrap: anywhere; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-forgot { justify-self: end; margin-block: -6px -2px; font-size: 13px; }
html body:not(#_):not(#__) #cloud-account-signin > button.primary, html body:not(#_):not(#__) #cloud-account-signup > button.primary, html body:not(#_):not(#__) .cloud-account-auth form > button.primary { inline-size: 100%; margin-block-start: 4px; }
html body:not(#_):not(#__) .cloud-account-auth > .cloud-account-actions { justify-content: center; }
html body:not(#_):not(#__) .cloud-account-auth > .cloud-account-actions > button { flex: 0 1 auto; font-size: 13px; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-back { justify-self: center; font-size: 13px; color: var(--account-muted); text-decoration: none; }

html body:not(#_):not(#__) .cloud-account-panel[data-account-view="verification"] .cloud-account-auth > h4::before {
  content: ""; display: block; inline-size: 56px; block-size: 56px; margin-block-end: 18px; border-radius: 50%;
  background: var(--account-soft); box-shadow: inset 0 0 0 2px var(--account-accent);
}


html body:not(#_):not(#__) .cloud-account-assure { display: grid; gap: 10px; padding-block-start: 16px; border-block-start: 1px solid var(--account-line); }
html body:not(#_):not(#__) .cloud-account-assure-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-assure-title::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--account-accent); box-shadow: 0 0 0 4px var(--account-soft); }
html body:not(#_):not(#__) .cloud-account-how { border-radius: 14px; }
html body:not(#_):not(#__) .cloud-account-how > summary {
  display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 4px; border-radius: 12px; color: var(--account-accent-text);
  font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
html body:not(#_):not(#__) .cloud-account-how > summary::-webkit-details-marker { display: none; }
html body:not(#_):not(#__) .cloud-account-how > summary::after { content: ""; inline-size: 7px; block-size: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--account-ease); }
html body:not(#_):not(#__) .cloud-account-how[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
html body:not(#_):not(#__) .cloud-account-facts { display: grid; gap: 12px; margin: 4px 0 6px; padding: 16px; list-style: none; border: 1px solid var(--account-line); border-radius: 16px; background: var(--account-field); animation: account-rise .24s var(--account-ease) both; }
html body:not(#_):not(#__) .cloud-account-facts li { display: grid; gap: 2px; padding-inline-start: 18px; position: relative; }
html body:not(#_):not(#__) .cloud-account-facts li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 8px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--account-accent); }
html body:not(#_):not(#__) .cloud-account-facts strong { font-size: 13px; }
html body:not(#_):not(#__) .cloud-account-facts span { color: var(--account-muted); font-size: 13px; }
html body:not(#_):not(#__) .cloud-account-assure > [data-account-action="local"] { inline-size: 100%; }
html body:not(#_):not(#__) .cloud-account-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0; font-size: 12px; }
html body:not(#_):not(#__) .cloud-account-legal a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--account-muted); text-underline-offset: 4px; }
html body:not(#_):not(#__) .cloud-account-legal a:hover { color: var(--account-ink); }


html body:not(#_):not(#__) .cloud-account-hero {
  position: relative; display: flex; align-items: center; gap: 20px; min-inline-size: 0; padding: 24px; border: 1px solid var(--account-line); border-radius: 24px;
  background: var(--account-raised); overflow: hidden;
}
html body:not(#_):not(#__) .cloud-account-hero::after { content: ""; position: absolute; inset-inline: 24px; inset-block-end: 0; block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--account-accent), transparent); opacity: .7; }
html body:not(#_):not(#__) .cloud-account-profile-identity { display: flex; align-items: center; gap: 20px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-avatar {
  display: grid; place-items: center; flex: 0 0 80px; inline-size: 80px; block-size: 80px; border-radius: 50%; overflow: hidden;
  background: var(--account-surface); color: var(--account-accent-text); border: 2px solid var(--account-surface);
  box-shadow: 0 0 0 2px var(--account-accent), 0 0 28px var(--account-glow); font: 400 32px/1 var(--account-serif);
}
html body:not(#_):not(#__) .cloud-account-avatar > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
html body:not(#_):not(#__) .cloud-account-hero-copy { display: grid; gap: 2px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-hero-name { font: 400 34px/1.1 var(--account-serif); letter-spacing: -.015em; }
html body:not(#_):not(#__) .cloud-account-identity { color: var(--account-muted); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
html body:not(#_):not(#__) .cloud-account-verify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block-start: 6px; }
html body:not(#_):not(#__) .cloud-account-verified { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--account-field); border: 1px solid var(--account-line); font-size: 12px; font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-verified::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--account-muted); }
html body:not(#_):not(#__) .cloud-account-verified[data-state="verified"] { color: var(--account-accent-text); border-color: color-mix(in srgb, var(--account-accent) 40%, transparent); }
html body:not(#_):not(#__) .cloud-account-verified[data-state="verified"]::before { background: var(--account-accent); }
html body:not(#_):not(#__) .cloud-account-verified[data-state="unverified"] { color: var(--account-danger-text); }
html body:not(#_):not(#__) .cloud-account-verified[data-state="unverified"]::before { background: var(--account-danger); }
html body:not(#_):not(#__) .cloud-account-verify-row .cloud-account-link { min-block-size: 36px; padding-block: 4px; font-size: 13px; }
html body:not(#_):not(#__) .cloud-account-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 4px 4px 2px; }
html body:not(#_):not(#__) .cloud-account-details > p { flex: 1 1 18rem; }
html body:not(#_):not(#__) .cloud-account-details > button { flex: none; }
html body:not(#_):not(#__) .cloud-account-tabs { display: flex; gap: 6px; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
html body:not(#_):not(#__) .cloud-account-tabs::-webkit-scrollbar { display: none; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-tab {
  position: relative; flex: none; min-block-size: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px !important; color: var(--account-muted); font-weight: 600; text-align: start;
}
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-tab[aria-selected="true"] { background: var(--account-soft); color: var(--account-ink); border-color: color-mix(in srgb, var(--account-accent) 30%, transparent); }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-tab[aria-selected="true"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 10px; inline-size: 3px; border-radius: 3px; background: var(--account-accent); }
html body:not(#_):not(#__) .cloud-account-pane { display: none; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-pane[data-active] { display: grid; align-content: start; gap: 16px; animation: account-rise .26s var(--account-ease) both; }
html body:not(#_):not(#__) .cloud-account-pane :is(.cloud-account-profile, .cloud-account-workspaces, .cloud-account-team) { display: grid; gap: 14px; min-inline-size: 0; }
html body:not(#_):not(#__) .cloud-account-pane :is(.cloud-account-block, .cloud-account-preferences, .cloud-account-work, .cloud-account-workspaces, .cloud-account-team, .cloud-account-security, .cloud-account-danger, .account-access, .account-owner) {
  display: grid; gap: 12px; min-inline-size: 0; margin: 0; padding: 22px; border: 1px solid var(--account-line); border-radius: 20px; background: var(--account-raised);
}
html body:not(#_):not(#__) .cloud-account-pane :is(h4, h5) { font-size: 16px; font-weight: 600; line-height: 1.4; }
html body:not(#_):not(#__) .cloud-account-pane .cloud-account-danger { border-color: color-mix(in srgb, var(--account-danger) 40%, var(--account-line)); background: linear-gradient(var(--account-danger-soft), var(--account-danger-soft)), var(--account-raised); }
html body:not(#_):not(#__) .cloud-account-pane .cloud-account-danger h4 { color: var(--account-danger-text); }
html body:not(#_):not(#__) .cloud-account-pane .cloud-account-form > button.primary { justify-self: start; min-inline-size: 12rem; }
html body:not(#_):not(#__) .cloud-account-photo .cloud-account-actions > button { flex: 0 1 auto; }
html body:not(#_):not(#__) .cloud-account-setting { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-segment { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--account-line); border-radius: 16px; background: var(--account-field); }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-segment > button { flex: 1 1 8rem; border-color: transparent; border-radius: 12px !important; color: var(--account-muted); font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-segment > button[aria-pressed="true"] { background: var(--account-raised); color: var(--account-ink); border-color: color-mix(in srgb, var(--account-accent) 45%, transparent); box-shadow: inset 0 -2px 0 var(--account-accent); }
html body:not(#_):not(#__) .cloud-account-pane .account-paths { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
html body:not(#_):not(#__) .cloud-account-pane .account-path-option { display: flex; align-items: center; gap: 10px; flex: 1 1 10rem; min-block-size: 52px; padding: 10px 14px; border: 1px solid var(--account-line-strong); border-radius: 14px; background: var(--account-field); cursor: pointer; }
html body:not(#_):not(#__) .cloud-account-pane .account-path-option:has(:checked) { border-color: var(--account-accent); background: var(--account-soft); }
html body:not(#_):not(#__) .cloud-account-pane .account-path-option input { inline-size: 20px; block-size: 20px; min-block-size: 20px; accent-color: var(--account-accent); }
html body:not(#_):not(#__) .cloud-account-pane .account-access { background: var(--account-raised); }
html body:not(#_):not(#__) .cloud-account-pane .account-plan-summary { font: 400 36px/1.15 var(--account-serif); color: var(--account-ink); }
html body:not(#_):not(#__) .cloud-account-pane :is(.account-plan-actions, .cloud-account-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
html body:not(#_):not(#__) .cloud-account-pane :is(.account-plan-actions, .cloud-account-actions) > :is(button, a) { flex: 0 1 auto; }
html body:not(#_):not(#__) .cloud-account-pane .account-plan-actions a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding: 10px 16px; border: 1px solid var(--account-line-strong); border-radius: 14px; color: var(--account-ink); text-decoration: none; }
html body:not(#_):not(#__) .cloud-account-pane .account-owner-counts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; }
html body:not(#_):not(#__) .cloud-account-pane .account-owner-counts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
html body:not(#_):not(#__) .cloud-account-workspaces > select { min-block-size: 52px; }
html body:not(#_):not(#__) .cloud-account-transfer { display: grid; gap: 10px; padding: 16px; border: 1px dashed var(--account-line-strong); border-radius: 16px; background: var(--account-field); }
html body:not(#_):not(#__) .cloud-account-transfer-preview { display: grid; gap: 8px; }
html body:not(#_):not(#__) .cloud-account-transfer-preview p { color: var(--account-muted); font-size: 13px; }
html body:not(#_):not(#__) .cloud-account-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body:not(#_):not(#__) .cloud-account-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--account-line); border-radius: 14px; background: var(--account-field); }
html body:not(#_):not(#__) .cloud-account-pane :is(.cloud-account-security, .cloud-account-danger, .cloud-account-workspaces, .cloud-account-transfer, .account-access, .account-owner) > button { justify-self: start; }


html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"], html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] button, html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] :is(input.rt-field, select) { font-family: "IBM Plex Sans Arabic", sans-serif; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] :is(.cloud-account-auth > h4, .cloud-account-hero-name, .account-plan-summary) { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-auth > h4 { font-size: 30px; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-hero-name { font-size: 26px; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .account-plan-summary { font-size: 26px; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-avatar { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 28px; font-weight: 600; }


@media (min-width: 860px) {
  html body:not(#_):not(#__) .cloud-account-panel[data-account-view="profile"] .cloud-account-content { grid-template-columns: 212px minmax(0, 1fr); column-gap: 28px; padding-block-end: 30px; }
  html body:not(#_):not(#__) .cloud-account-panel[data-account-view="profile"] .cloud-account-content > * { grid-column: 1 / -1; }
  html body:not(#_):not(#__) .cloud-account-panel[data-account-view="profile"] .cloud-account-content > .cloud-account-tabs { grid-column: 1; align-self: start; position: sticky; inset-block-start: 76px; flex-direction: column; overflow: visible; }
  html body:not(#_):not(#__) .cloud-account-panel[data-account-view="profile"] .cloud-account-content > .cloud-account-pane { grid-column: 2; }
  html body:not(#_):not(#__) .cloud-account-panel[data-account-view="profile"] .cloud-account-tab { inline-size: 100%; }
}
@media (max-width: 859px) {
  html body:not(#_):not(#__) .cloud-account-panel .cloud-account-tab[aria-selected="true"]::before { inset-inline: 14px; inset-block: auto 4px; inline-size: auto; block-size: 2px; }
  html body:not(#_):not(#__) .cloud-account-tabs { position: sticky; inset-block-start: 72px; z-index: 2; margin-inline: -4px; padding: 6px 4px; background: var(--account-surface); }
}
@media (max-width: 560px) {
  html body:not(#_):not(#__) .cloud-account-dialog, html body:not(#_):not(#__) .cloud-account-dialog[data-account-view="profile"] { inline-size: calc(100% - 16px); max-block-size: calc(100dvh - 16px); border-radius: 22px; }
  html body:not(#_):not(#__) .cloud-account-header { padding-inline: 18px 8px; padding-block: 10px; }
  html body:not(#_):not(#__) .cloud-account-header h3 { display: none; }
  html body:not(#_):not(#__) .cloud-account-content { padding: 4px 18px 20px; gap: 16px; }
  html body:not(#_):not(#__) .cloud-account-auth > h4 { font-size: 32px; }
  html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-auth > h4 { font-size: 26px; }
  html body:not(#_):not(#__) .cloud-account-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  html body:not(#_):not(#__) .cloud-account-profile-identity { gap: 14px; }
  html body:not(#_):not(#__) .cloud-account-avatar { flex-basis: 64px; inline-size: 64px; block-size: 64px; font-size: 26px; }
  html body:not(#_):not(#__) .cloud-account-hero-name { font-size: 28px; }
  html body:not(#_):not(#__) .cloud-account-pane :is(.cloud-account-block, .cloud-account-preferences, .cloud-account-work, .cloud-account-workspaces, .cloud-account-team, .cloud-account-security, .cloud-account-danger, .account-access, .account-owner) { padding: 18px; border-radius: 18px; }
  html body:not(#_):not(#__) .cloud-account-pane .cloud-account-form > button.primary, html body:not(#_):not(#__) .cloud-account-pane :is(.account-plan-actions, .cloud-account-actions) > :is(button, a) { inline-size: 100%; flex-basis: 100%; }
  html body:not(#_):not(#__) .cloud-account-tabs { inset-block-start: 64px; }
  html body:not(#_):not(#__) .cloud-account-steps li { font-size: 11px; }
}


html body:not(#_):not(#__) .cloud-account-signout-choice, html body:not(#_):not(#__) .cloud-account-delete-choice {
  box-sizing: border-box; inline-size: min(500px, calc(100% - 32px)); padding: 26px; border: 1px solid var(--account-line); border-radius: 24px;
  background: var(--account-surface); color: var(--account-ink); box-shadow: var(--account-shadow); text-align: start;
}
html body:not(#_):not(#__) .cloud-account-signout-choice[open], html body:not(#_):not(#__) .cloud-account-delete-choice[open] { animation: account-arrive .26s var(--account-ease) both; }
html body:not(#_):not(#__) .cloud-account-signout-choice::backdrop, html body:not(#_):not(#__) .cloud-account-delete-choice::backdrop { background: color-mix(in srgb, var(--account-surface) 35%, rgb(0 0 0 / .62)); }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) h3 { margin: 0 0 10px; font: 400 28px/1.15 var(--account-serif); }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice)[dir="rtl"] h3 { font: 600 22px/1.4 "IBM Plex Sans Arabic", sans-serif; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) .cloud-account-help { color: var(--account-muted); font-size: 14px; line-height: 1.6; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) .cloud-account-actions { display: grid; gap: 8px; margin-top: 22px; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button { min-block-size: 48px; padding: 10px 16px; border: 1px solid var(--account-line); border-radius: 14px !important; background: transparent; color: var(--account-ink); font: 500 14px/1.4 var(--account-sans); cursor: pointer; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice)[dir="rtl"] button { font-family: "IBM Plex Sans Arabic", sans-serif; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button.primary { background: var(--account-accent); border-color: var(--account-accent); color: var(--account-on-accent); font-weight: 600; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button.danger { border-color: color-mix(in srgb, var(--account-danger) 60%, transparent); color: var(--account-danger-text); }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button:disabled { opacity: .55; cursor: not-allowed; }
html body:not(#_):not(#__) :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button:focus-visible, html body:not(#_):not(#__) .cloud-account-delete-choice input:focus-visible { outline: 3px solid var(--account-accent-text); outline-offset: 2px; }
html body:not(#_):not(#__) .cloud-account-delete-choice .cloud-account-field { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 600; }
html body:not(#_):not(#__) .cloud-account-delete-choice input { box-sizing: border-box; inline-size: 100%; min-block-size: 48px; padding: 10px 12px; border: 1px solid var(--account-line-strong); border-radius: 14px; background: var(--account-field); color: var(--account-ink); font: 16px/1.4 ui-monospace, monospace; }


.rattib-account-entrypoints { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: end; background: transparent; }
html[lang="ar"] .rattib-account-entrypoints { font-family: "IBM Plex Sans Arabic", "Instrument Sans", sans-serif; }
.rattib-account-entrypoints button { min-height: 44px; border-radius: 999px; padding: 10px 16px; border: 1px solid var(--account-line); color: var(--account-ink); background: var(--account-surface); font: inherit; font-size: 13px; cursor: pointer; }
.rattib-account-entrypoints [data-account-entry="signup"] { background: var(--account-accent); color: var(--account-on-accent); border-color: var(--account-accent); }
.rattib-account-entrypoints button:focus-visible { outline: 3px solid var(--account-accent-text); outline-offset: 3px; }
.rattib-account-entrypoints [hidden] { display: none; }
html body:not(#_):not(#__) .rattib-account-entry-status { flex-basis: 100%; max-inline-size: 260px; font-size: 12px; }
html body:not(#_):not(#__) .rattib-account-entry-status:empty { display: none; }
@media (max-width: 720px) { .rattib-account-entrypoints { gap: 6px; grid-column: 1 / -1; justify-content: start; } .rattib-account-entrypoints button { padding-inline: 12px; } }


.account-resume-notice { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; margin-top: 16px; border: 1px solid var(--border); border-inline-start: 3px solid var(--danger, #f05751); border-radius: 10px; background: var(--card, var(--bg)); color: var(--text); text-align: start; overflow-wrap: anywhere; }
.account-resume-notice p { flex-basis: 100%; margin: 0 0 4px; line-height: 1.6; }
.account-resume-notice button { min-height: 44px; min-width: 44px; max-width: 100%; white-space: normal; font: inherit; }
.account-resume-notice button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }


html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select) { border: 1px solid var(--account-line-strong) !important; background: var(--account-field) !important; color: var(--account-ink) !important; }
html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select):hover { border-color: var(--account-ink) !important; }
html body:not(#_):not(#__) .cloud-account-panel :is(input.rt-field, select):focus-visible { border-color: var(--account-accent) !important; }
html body:not(#_):not(#__) .cloud-account-panel input.rt-field[aria-invalid="true"] { border-color: var(--account-danger) !important; box-shadow: 0 0 0 4px var(--account-danger-soft); }
html body:not(#_):not(#__) .cloud-account-panel button.primary { background-color: var(--account-accent) !important; border-color: var(--account-accent) !important; color: var(--account-on-accent) !important; }
html body:not(#_):not(#__) .cloud-account-header h3 { font: 500 13px/1.4 var(--account-sans) !important; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-header h3 { font-family: "IBM Plex Sans Arabic", sans-serif !important; }
html body:not(#_):not(#__) .cloud-account-switch > button { background: transparent !important; color: var(--account-muted) !important; font: 600 14px/1.2 var(--account-sans) !important; }
html body:not(#_):not(#__) .cloud-account-panel[dir="rtl"] .cloud-account-switch > button { font-family: "IBM Plex Sans Arabic", sans-serif !important; }
html body:not(#_):not(#__) .cloud-account-switch > button[aria-pressed="true"] { background: var(--account-raised) !important; color: var(--account-ink) !important; }
html body:not(#_):not(#__) .cloud-account-panel .cloud-account-segment > button[aria-pressed="true"] { background: var(--account-raised) !important; border-color: color-mix(in srgb, var(--account-accent) 45%, transparent) !important; color: var(--account-ink) !important; }
@keyframes account-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes account-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes account-spin { to { transform: rotate(360deg); } }
html body:not(#_):not(#__) .cloud-account-auth form:not([hidden]), html body:not(#_):not(#__) .cloud-account-step:not([hidden]) { animation: account-rise .26s var(--account-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .cloud-account-dialog, .cloud-account-dialog *, .cloud-account-signout-choice, .cloud-account-delete-choice, .rattib-account-entrypoints * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  html body:not(#_):not(#__) .cloud-account-dialog, html body:not(#_):not(#__) .cloud-account-signout-choice, html body:not(#_):not(#__) .cloud-account-delete-choice, html body:not(#_):not(#__) .cloud-account-panel, html body:not(#_):not(#__) .cloud-account-hero, html body:not(#_):not(#__) .cloud-account-status, html body:not(#_):not(#__) .cloud-account-pane > * { background: Canvas; color: CanvasText; border-color: CanvasText; forced-color-adjust: auto; }
  .cloud-account-panel :is(button, input, select), .rattib-account-entrypoints button, :is(.cloud-account-signout-choice, .cloud-account-delete-choice) button { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .cloud-account-panel :is(button, input, select, a, summary):focus-visible, .rattib-account-entrypoints button:focus-visible { outline-color: Highlight; }
  html body:not(#_):not(#__) .cloud-account-panel .cloud-account-tab[aria-selected="true"], html body:not(#_):not(#__) .cloud-account-switch > button[aria-pressed="true"], html body:not(#_):not(#__) .cloud-account-segment > button[aria-pressed="true"] { border: 2px solid Highlight; }
  html body:not(#_):not(#__) .cloud-account-legal a { color: LinkText; }
  .account-resume-notice { background: Canvas; color: CanvasText; border-color: CanvasText; }
}


html body:not(#_):not(#__):not(#___) .cloud-account-switch > button[aria-pressed="true"]::after, html body:not(#_):not(#__):not(#___) .cloud-account-hero::after { content: none; }
html body:not(#_):not(#__):not(#___) .cloud-account-panel .cloud-account-tab:hover:not(:disabled):not([aria-selected="true"]) { background: color-mix(in srgb, var(--account-ink) 5%, transparent); border-color: transparent; }
html body:not(#_):not(#__):not(#___) .cloud-account-panel button:disabled { opacity: .5 !important; box-shadow: none !important; filter: none; }
html body:not(#_):not(#__):not(#___) :is(.cloud-account-panel, .cloud-account-signout-choice, .cloud-account-delete-choice) button { box-shadow: none !important; }
html body:not(#_):not(#__):not(#___) .cloud-account-work:not(:has(form:not([hidden]))) { display: none; }


html body:not(#_):not(#__):not(#___) :is(.cloud-account-panel, .cloud-account-signout-choice, .cloud-account-delete-choice) button:not(.cloud-account-link), html body:not(#_):not(#__):not(#___) .cloud-account-pane .account-plan-actions a, html body:not(#_):not(#__):not(#___) a.cloud-account-google-button, .rattib-account-entrypoints button { border-radius: var(--account-pill) !important; }
html body:not(#_):not(#__):not(#___) :is(.cloud-account-panel, .cloud-account-delete-choice) :is(input.rt-field, input, select) { border-radius: 16px !important; }
html body:not(#_):not(#__):not(#___) .cloud-account-segment, html body:not(#_):not(#__):not(#___) .cloud-account-pane .account-path-option { border-radius: var(--account-pill); }
html body:not(#_):not(#__):not(#___) .cloud-account-panel .cloud-account-tab[aria-selected="true"]::before { content: none; }
html body:not(#_):not(#__):not(#___) .cloud-account-password { position: relative; grid-template-columns: minmax(0, 1fr); }
html body:not(#_):not(#__):not(#___) .cloud-account-password input.rt-field { padding-inline-end: 84px; }
html body:not(#_):not(#__):not(#___) .cloud-account-panel .cloud-account-password > button { position: absolute; inset-inline-end: 4px; inset-block-end: 4px; min-block-size: 44px; padding-inline: 14px; border-color: transparent; background: transparent; color: var(--account-accent-text); font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
html body:not(#_):not(#__):not(#___) .cloud-account-panel .cloud-account-password > button:hover:not(:disabled) { background: var(--account-soft); }
html body:not(#_):not(#__):not(#___) .cloud-account-panel[data-account-view="signup"] .cloud-account-back { display: none; }
@media (max-width: 859px) {
  html body:not(#_):not(#__):not(#___) .cloud-account-tabs { flex-wrap: wrap; overflow: visible; }
  html body:not(#_):not(#__):not(#___) .cloud-account-panel .cloud-account-tab:not([aria-selected="true"]) { border-color: var(--account-line); background: var(--account-field); }
}

html body:not(#_):not(#__):not(#___) .cloud-account-switch::before, html body:not(#_):not(#__):not(#___) .cloud-account-panel button.primary::before, html body:not(#_):not(#__):not(#___) .cloud-account-story::before, html body:not(#_):not(#__):not(#___) .cloud-account-story::after { content: none; }
html body:not(#_):not(#__):not(#___) .cloud-account-panel :is(input.rt-field, select):focus-visible, html body:not(#_):not(#__):not(#___) .cloud-account-delete-choice input:focus-visible { outline: none; border-color: var(--account-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-accent) 35%, transparent) !important; }
/* Sarab glass for the workspace sync chip and choice dialog.
   Fonts already shipped with the homepage. Oasis is the merge action only.
   Dark mode is the app default: opaque card, rail, and green-dim surfaces.
   Sand glass is light theme only, so a top-layer dialog cannot fall back to a light slab. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/_next/static/media/f06bf9da926bae75-s.p.2874ccu1_u7jf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0020-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0308, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/_next/static/media/e41d5df559864f9e-s.p.1g73gv09-xcb6.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/_next/static/media/99e609270109b47d-s.p.40sczeszzbjw1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/_next/static/media/effe91970fc4db64-s.p.0oace-s_gkfks.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.workspace-sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 8px 14px;
  border: 1px solid var(--green, #9bc8a7);
  border-radius: 999px;
  background-color: var(--rail, #17140f);
  color: var(--text, #f6f0e5);
  color-scheme: dark;
  font: 500 14px/1.2 "Instrument Sans", "IBM Plex Sans Arabic", sans-serif;
  box-shadow: 0 8px 24px #0c0a0759;
  cursor: pointer;
}
.workspace-sync-chip[hidden] { display: none !important; }
.workspace-sync-chip[data-phase="error"] .workspace-sync-label,
.workspace-sync-chip[data-phase="conflict"] .workspace-sync-label { color: #f05751; }
.workspace-sync-chip[data-phase="offline"] { border-color: #d7ac78; }
.workspace-sync-chip:focus-visible {
  outline: 3px solid #176347;
  outline-offset: 3px;
}

.workspace-sync-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(860px, calc(100dvh - 32px));
  margin: auto;
  padding: 28px;
  border: 1px solid var(--border, #40392e);
  border-radius: 26px;
  color: var(--text, #f6f0e5);
  color-scheme: dark;
  background-color: var(--card, #1b1812);
  background-image: radial-gradient(ellipse at 8% 0%, #9bc8a729, transparent 48%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 #ffffff14, 0 16px 40px #0c0a0759, 0 0 28px #9bc8a729;
  font: 400 16px/1.5 "Instrument Sans", "IBM Plex Sans Arabic", sans-serif;
  overflow: auto;
}
.workspace-sync-dialog::backdrop { background-color: #0c0a0780; }
.workspace-sync-dialog .workspace-sync-kicker {
  margin: 0 0 10px;
  color: var(--green, #9bc8a7);
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .14em;
}
.workspace-sync-dialog h2 {
  margin: 0 0 12px;
  font: 400 clamp(32px, 4vw, 44px)/1.08 "Instrument Serif", Georgia, serif;
  letter-spacing: -.03em;
}
.workspace-sync-dialog p { margin: 0; }
.workspace-sync-body { max-width: 62ch; color: var(--muted, #b8afa0); }
.workspace-sync-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.workspace-sync-count {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  background-color: var(--green-dim, #244633);
  color: var(--text, #f6f0e5);
}
.workspace-sync-count:last-child { background-color: var(--elevated, #2d2a20); }
.workspace-sync-count span {
  display: block;
  margin-bottom: 6px;
  color: var(--green, #9bc8a7);
  font: 500 11px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workspace-sync-count strong {
  font: 500 15px/1.35 "Instrument Sans", "IBM Plex Sans Arabic", sans-serif;
}
.workspace-sync-actions, .workspace-sync-footer {
  display: grid;
  gap: 10px;
}
.workspace-sync-choice, .workspace-sync-later, .workspace-sync-download {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border, #40392e);
  border-radius: 18px;
  background-color: transparent;
  color: var(--text, #f6f0e5);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.workspace-sync-choice small, .workspace-sync-later small {
  display: block;
  color: var(--muted, #b8afa0);
  font-size: 13px;
  line-height: 1.4;
}
.workspace-sync-choice-merge {
  border: 0;
  border-radius: 999px;
  background-color: #00d492;
  color: #0c0a07;
  font-weight: 600;
}
.workspace-sync-choice-merge small { color: #0c0a07; }
.workspace-sync-download { color: var(--green, #9bc8a7); text-decoration: underline; text-underline-offset: 4px; }
.workspace-sync-recovery, .workspace-sync-error { margin-top: 8px; font-size: 14px; }
.workspace-sync-error { color: #f05751; }
.workspace-sync-choice:focus-visible,
.workspace-sync-later:focus-visible,
.workspace-sync-download:focus-visible {
  outline: 3px solid #176347;
  outline-offset: 3px;
}
.workspace-sync-dialog:lang(ar),
.workspace-sync-dialog:lang(ar) h2,
.workspace-sync-dialog:lang(ar) .workspace-sync-choice,
.workspace-sync-chip:lang(ar) {
  font-family: "IBM Plex Sans Arabic", "Instrument Sans", sans-serif;
}

html[data-theme="light"] .workspace-sync-chip {
  background-color: #deead2;
  color: #0c0a07;
  color-scheme: light;
  border-color: #9bc8a7;
  box-shadow: 0 8px 24px #183d2514;
}
html[data-theme="light"] .workspace-sync-dialog {
  color: #0c0a07;
  color-scheme: light;
  border-color: #ffffffb8;
  background-color: #f7f5ee;
  background-image:
    radial-gradient(ellipse at 8% 0%, #9bc8a752, transparent 46%),
    linear-gradient(120deg, #ffffffb8, #f7f5ee8c);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 12px 34px #183d2517, 0 0 32px #9bc8a733;
}
html[data-theme="light"] .workspace-sync-body,
html[data-theme="light"] .workspace-sync-choice small,
html[data-theme="light"] .workspace-sync-later small { color: #5c5449; }
html[data-theme="light"] .workspace-sync-count { background-color: #deead2; color: #0c0a07; }
html[data-theme="light"] .workspace-sync-count:last-child { background-color: #e5d9ed; }
html[data-theme="light"] .workspace-sync-count span,
html[data-theme="light"] .workspace-sync-dialog .workspace-sync-kicker,
html[data-theme="light"] .workspace-sync-download { color: #176347; }
html[data-theme="light"] .workspace-sync-choice,
html[data-theme="light"] .workspace-sync-later { color: #0c0a07; border-color: #0c0a0729; }

html[data-theme="dark"] .workspace-sync-chip {
  background-color: var(--rail, #17140f);
  color: var(--text, #f6f0e5);
  color-scheme: dark;
  border-color: var(--green, #9bc8a7);
}
html[data-theme="dark"] .workspace-sync-dialog {
  color: var(--text, #f6f0e5);
  color-scheme: dark;
  border-color: var(--border, #40392e);
  background-color: var(--card, #1b1812);
  background-image: radial-gradient(ellipse at 8% 0%, #9bc8a729, transparent 48%);
}
html[data-theme="dark"] .workspace-sync-body,
html[data-theme="dark"] .workspace-sync-choice small,
html[data-theme="dark"] .workspace-sync-later small { color: var(--muted, #b8afa0); }
html[data-theme="dark"] .workspace-sync-count { background-color: var(--green-dim, #244633); color: var(--text, #f6f0e5); }
html[data-theme="dark"] .workspace-sync-count:last-child { background-color: var(--elevated, #2d2a20); }
html[data-theme="dark"] .workspace-sync-count span,
html[data-theme="dark"] .workspace-sync-dialog .workspace-sync-kicker,
html[data-theme="dark"] .workspace-sync-download { color: var(--green, #9bc8a7); }
html[data-theme="dark"] .workspace-sync-choice:not(.workspace-sync-choice-merge),
html[data-theme="dark"] .workspace-sync-later { border-color: var(--border, #40392e); background-color: transparent; }
html[data-theme="dark"] .workspace-sync-choice-merge,
html[data-theme="dark"] .workspace-sync-choice-merge small { color: #0c0a07; }

@media (max-width: 560px) {
  .workspace-sync-dialog {
    width: min(640px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    padding: 16px;
    border-radius: 22px;
  }
  .workspace-sync-dialog h2 { margin-bottom: 8px; font-size: 28px; }
  .workspace-sync-counts { grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
  .workspace-sync-count { padding: 10px 12px; }
  .workspace-sync-actions, .workspace-sync-footer { gap: 8px; }
  .workspace-sync-choice, .workspace-sync-later, .workspace-sync-download { padding: 8px 12px; }
  .workspace-sync-chip { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-sync-chip,
  .workspace-sync-dialog,
  .workspace-sync-dialog * {
    transition: none;
    animation: none;
    scroll-behavior: auto;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .workspace-sync-dialog, .workspace-sync-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: none;
  }
  .workspace-sync-dialog { background-color: var(--card, #1b1812); }
  /**/
  html[data-theme="light"] .workspace-sync-dialog { background-color: #f7f5ee; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-theme="dark"] .workspace-sync-dialog { background-color: var(--card, #1b1812); background-image: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workspace-sync-dialog, .workspace-sync-chip { background-image: none; }
  .workspace-sync-dialog { background-color: var(--card, #1b1812); }
  html[data-theme="light"] .workspace-sync-dialog { background-color: #f7f5ee; background-image: none; }
  html[data-theme="dark"] .workspace-sync-dialog { background-color: var(--card, #1b1812); background-image: none; }
}
@media (forced-colors: active) {
  .workspace-sync-chip,
  .workspace-sync-dialog,
  .workspace-sync-count,
  .workspace-sync-choice,
  .workspace-sync-choice-merge,
  .workspace-sync-later,
  .workspace-sync-download {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  .workspace-sync-choice-merge { background: ButtonFace; color: ButtonText; }
  .workspace-sync-error { color: CanvasText; }
  .workspace-sync-chip:focus-visible,
  .workspace-sync-choice:focus-visible,
  .workspace-sync-later:focus-visible,
  .workspace-sync-download:focus-visible { outline-color: Highlight; }
}
.access-profiles { display: grid; gap: 12px; min-width: 0; }
.access-profiles form, .access-profiles-picker { display: grid; gap: 12px; }
.access-profiles input:not([type=checkbox]), .access-profiles select { min-height: 44px; max-width: 100%; }
.access-profiles button { min-height: 44px; }
.access-profiles label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.access-profiles input[type=checkbox] { width: 24px; height: 24px; }
.access-profiles-permission-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.access-profiles-permission-row > span { flex-basis: 100%; }
.access-profiles fieldset { min-width: 0; border: 1px solid var(--border); }
.access-profiles li { overflow-wrap: anywhere; margin-block: 8px; }
.access-profiles :is(button,input,select):focus-visible { outline: 3px solid var(--accent, #245cba); outline-offset: 3px; }
/* Reviewed refinement: neutral glass shell, quiet controls and coherent tool layouts.
   Only navigation samples the canvas. Reading surfaces and fields stay stable. */

html[data-rattib-material="glass"] {
  --bg: #11171d;
  --card: #1c252e;
  --row: #25313b;
  --input: #172129;
  --rail: #19232c;
  --elevated: #243d34;
  --text: #f2f5f7;
  --muted: #b4c1cd;
  --border: #3d4c5a;
  --green: #81d5b5;
  --green-dim: #203b33;
  --glass-canvas: var(--bg);
  --glass-panel: #18212a;
  --glass-card: #1c252e;
  --glass-control: #172129;
  --glass-raised: #222e39;
  --glass-nav: #1b2731;
  --glass-border: #3d4c5a;
  --glass-input-border: #8093a4;
  --glass-rim: rgb(229 241 255 / .12);
  --glass-sheen: linear-gradient(140deg, rgb(229 241 255 / .045), transparent 65%);
  --glass-control-sheen: none;
  --glass-shadow: inset 0 1px 0 var(--glass-rim), 0 4px 16px rgb(0 0 0 / .12);
  --glass-control-shadow: none;
  --glass-raised-shadow: inset 0 1px 0 var(--glass-rim), 0 24px 80px rgb(0 0 0 / .35);
  --glass-backdrop: none;
  --glass-backdrop-mobile: none;
  --glass-focus: #81d5b5;
  --glass-error: #ff8d86;
  --glass-active: #203b33;
  --glass-on-active: #f2f5f7;
  --glass-action: #81d5b5;
  --glass-action-text: #12382d;
  --glass-option-bg: #1c252e;
  --glass-option-text: #f2f5f7;
  --glass-disabled: #26313b;
  --glass-disabled-text: #b4c1cd;
  --glass-ambient: radial-gradient(ellipse at 8% 0%, rgb(78 147 127 / .12), transparent 52%), radial-gradient(ellipse at 100% 8%, rgb(122 110 184 / .09), transparent 48%);
  --glass-space: clamp(20px, 2.4vw, 40px);
  --polish-line: var(--border);
  --chrome-muted: var(--muted);
  --radius: 14px;
  --fs-body: .9375rem;
  --lh-body: 1.55;
}
html[data-rattib-material="glass"][data-theme="light"] {
  --bg: #f3f4f5;
  --card: #fffefa;
  --row: #edf1f4;
  --input: #fffefa;
  --rail: #f5f7f8;
  --elevated: #ddefe7;
  --text: #263647;
  --muted: #556372;
  --border: #cdd5dc;
  --green: #116e55;
  --green-dim: #ddefe7;
  --glass-panel: #f8fafb;
  --glass-card: #fffefa;
  --glass-control: #fffefa;
  --glass-raised: #fffefa;
  --glass-nav: #f8fafb;
  --glass-border: #cdd5dc;
  --glass-input-border: #788897;
  --glass-rim: rgb(255 255 255 / .94);
  --glass-sheen: linear-gradient(140deg, rgb(255 255 255 / .6), transparent 65%);
  --glass-shadow: inset 0 1px 0 var(--glass-rim), 0 4px 16px rgb(35 57 28 / .035);
  --glass-control-shadow: none;
  --glass-raised-shadow: inset 0 1px 0 white, 0 24px 80px rgb(35 57 28 / .15);
  --glass-focus: #116e55;
  --glass-error: #a42f2f;
  --glass-active: #ddefe7;
  --glass-on-active: #263647;
  --glass-action: #116e55;
  --glass-action-text: #ffffff;
  --glass-option-bg: #fffefa;
  --glass-option-text: #263647;
  --glass-disabled: #e8edf1;
  --glass-disabled-text: #556372;
  --glass-ambient: radial-gradient(ellipse at 0% 0%, rgb(127 197 178 / .14), transparent 55%), radial-gradient(ellipse at 100% 8%, rgb(187 175 224 / .14), transparent 50%);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  html[data-rattib-material="glass"] {
    --glass-panel: rgb(24 33 42 / .88);
    --glass-nav: rgb(27 39 49 / .8);
    --glass-backdrop: blur(20px) saturate(115%);
    --glass-backdrop-mobile: blur(12px) saturate(110%);
  }
  html[data-rattib-material="glass"][data-theme="light"] {
    --glass-panel: rgb(248 250 251 / .8);
    --glass-nav: rgb(248 250 251 / .8);
  }
}
/* Coverage: every actual tool and its existing cards, editors and grouped
   results. Do not add blur here: many cards contain other controls/cards. */
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-home,#panel-projects,#panel-tasks,#panel-timesheet,#panel-finance,
  #panel-contracts,#panel-calendar,#panel-knowledge,#panel-forms,#panel-scheduling,
  #panel-files,#panel-portal,#panel-collaboration,#panel-focus,#panel-automations,
  #panel-pricing,#panel-proposal,#panel-crm,#panel-week
) :is(
  .home-next-step,.home-widget,.home-metric,.suite-project-detail,.suite-project-item,
  .suite-task-row,.suite-board-column,.suite-toolbar,
  .documents-list,.documents-detail,.documents-toolbar,.documents-editor-bar,.documents-current,.documents-secondary,
  .invoice-essentials,.invoice-summary,.invoice-editor,.invoice-items,.invoice-business,
  .invoice-line,.invoice-payments,.invoice-preview-wrap,
  .finance-report,.finance-results,.finance-detail,.finance-filter-bar,.finance-filters,
  .contracts-library,.contracts-detail,.contracts-templates,.contracts-filters,
  .calendar-board,.calendar-inspector,.calendar-toolbar,.calendar-filters,
  .knowledge-library,.knowledge-detail,.knowledge-filters,.knowledge-block,
  .knowledge-linked-tasks,.knowledge-content-code,.knowledge-content-action,.knowledge-local-preview,
  .forms-library,.forms-editor,.forms-field,.forms-settings,
  .scheduling-editor,.scheduling-booking-form,.scheduling-booking,.scheduling-weekly,.scheduling-confirm,
  .files-usage,.files-editor,.client-portal-preview,.portal-delivery-editor,.portal-approval-receipt,
  .operations-section,.operations-editor-row,.collaboration-comment,
  .focus-card,.focus-options,.time-filters,.time-list,.time-totals,.time-details,
  .week-glance-card,.week-focus,.week-money,.proposal-core,.proposal-detail,
  .pricing-floor,.pricing-floor-stat,.fx-block,.buffer-block,.follow-card
):not(:where(.invoice-paper *,.contracts-paper *,.print-root *,#print-root *)):not(:where(.follow-card.overdue,.follow-card.is-overdue,.follow-card.due-today,.follow-card.is-soon,.follow-card.is-ok,.follow-card.is-done,.follow-card.is-chase-d7)) {
  background-color: var(--glass-card);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-rattib-material="glass"] .workspace-framed #toast.toast { background-image: none; }

html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card:is(.overdue,.is-overdue,.due-today,.is-soon,.is-ok,.is-done,.is-chase-d7) {
  background-image: var(--glass-control-sheen);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-files .files-list > li,
  #panel-automations article,
  #panel-collaboration > form,
  #panel-collaboration > section,
  #panel-crm .crm-board-card,
  #panel-pricing .pricing-studio-tools > *,
  #panel-forms .forms-local-preview,
  #panel-portal #portal-approvals-host,
  #panel-portal #portal-approvals-host > form,
  #panel-automations #operations-studio-host:not(.operations-cloud-ui) section,
  #panel-scheduling .scheduling-slot-days fieldset
) {
  background-color: var(--glass-card);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-shadow);
}

html[data-rattib-material="glass"] .workspace-framed :is(.table-wrap,.week-board-wrap,.time-allocation) {
  background-color: var(--glass-panel);
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Top-level overlays alone sample the underlying app. Nested popovers remain
   a more opaque lit fill, so dialog → editor → input never chains blur. */
html[data-rattib-material="glass"] .workspace-framed :is(dialog:not(.focus-clear-dialog),.crm-sheet-panel,.workspace-tools-body,.account-session-panel) {
  background-color: var(--glass-raised);
  color: var(--text);
  background-image: var(--glass-sheen);
  border-color: var(--glass-border);
  box-shadow: var(--glass-raised-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-rattib-material="glass"] .workspace-framed :is(.cloud-account-panel,.create-draft-actions) {
  background-color: var(--glass-card);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-control-shadow);
}

html[data-rattib-material="glass"] .workspace-framed :is(dialog,#client-profile-dialog,#project-work-dialog,.crm-sheet-panel) :is(
  .client-profile-work-section,.client-profile-more,.suite-recurrence-editor,
  .contracts-editor,.contracts-form > .contracts-actions
):not(:where(.invoice-paper *,.contracts-paper *,.print-root *,#print-root *)) {
  background-color: var(--glass-card);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-control-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-rattib-material="glass"] .workspace-framed :is(.client-profile-confirm,.suite-task-blockers) {
  background-image: var(--glass-control-sheen);
  box-shadow: var(--glass-control-shadow);
}
/* The embedded public-form sheet is a content preview, like invoice paper.
   Keep its authored light appearance paired correctly inside a dark app. */
html[data-rattib-material="glass"] .workspace-framed .public-questionnaire {
  --text: #14221b;
  --muted: #536057;
  --glass-control: #ffffff;
  --glass-input-border: #6e7b6d;
  --glass-option-bg: #ffffff;
  --glass-option-text: #14221b;
  --glass-focus: #245539;
  --glass-error: #a42f2f;
  --glass-control-sheen: none;
}
/* Focus already owns a scene material. Do not blur its outer page/desktop or
   replace the chosen atmosphere. Bound the two existing sibling blur surfaces. */
html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os { --focus-os-blur: var(--glass-backdrop); }
html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os:is([data-focus-scene="forest"],[data-focus-scene="dunes"],[data-focus-scene="night"],[data-focus-scene="room"]) {
  --glass-card: #211e18;
  --glass-control: #29261f;
  --glass-raised: #25221c;
  --glass-input-border: #8f8778;
  --glass-focus: #b1dfbf;
  --glass-border: #514b3f;
  --glass-option-bg: #211e18;
  --glass-option-text: #f6f0e5;
  --glass-sheen: linear-gradient(155deg, rgb(246 240 229 / .075), transparent 48%);
  --glass-control-sheen: linear-gradient(180deg, rgb(246 240 229 / .085), transparent 80%);
}
html[data-rattib-material="glass"] .workspace-framed .focus-os :is(.focus-stage,.focus-tools) { box-shadow: var(--glass-shadow); }
html[data-rattib-material="glass"] body.workspace-framed {
  background-color: var(--glass-canvas);
  background-image: var(--glass-ambient);
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.55;
}
html[data-rattib-material="glass"] .workspace-framed .app-shell { background: transparent; }
html[data-rattib-material="glass"] .workspace-framed .workspace > main {
  padding: var(--glass-space);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  min-width: 0;
}
html[data-rattib-material="glass"] .workspace-framed .panel { min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed :is(.project-suite,.dashboard-suite) {
  --suite-bg: var(--glass-card);
  --suite-soft: var(--row);
  --suite-line: var(--border);
  --suite-text: var(--text);
  --suite-muted: var(--muted);
  --suite-action: var(--green);
}

html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-header,.panel-head,.documents-head,.finance-header,.contracts-header,
  .calendar-head,.time-head,.knowledge-header
) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 22px;
  margin: 0 0 24px;
  border-block-end: 1px solid var(--border);
  gap: 16px 24px;
  align-items: center;
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-header h1,.panel-head h1,.documents-head h1,.finance-header h1,
  .contracts-header h1,.calendar-head h1,.time-head h1,.knowledge-header h1,
  #panel-files > h2,#panel-scheduling > h2,.forms-builder > h2,
  #client-portal-host > h2,#panel-collaboration > h2,#automations-reminders-host > h2
) {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--text);
}
html[data-rattib-material="glass"][lang="en"] .workspace-framed :is(
  .suite-header h1,.panel-head h1,.documents-head h1,.finance-header h1,
  .contracts-header h1,.calendar-head h1,.time-head h1,.knowledge-header h1,
  #panel-files > h2,#panel-scheduling > h2,.forms-builder > h2,
  #client-portal-host > h2,#panel-collaboration > h2,#automations-reminders-host > h2
) { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
html[data-rattib-material="glass"][dir="rtl"] .workspace-framed :is(h1,h2,h3) { letter-spacing: 0; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-lead,.panel-head p,.documents-head p,.finance-header p,.contracts-header p,.calendar-head p,.time-head p,.knowledge-header p) {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-block: 6px 0;
  max-width: 58ch;
}
html[data-rattib-material="glass"] body.workspace-framed :is(button,summary):not(:disabled) {
  background-image: none;
  box-shadow: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
html[data-rattib-material="glass"] body.workspace-framed button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  color: var(--text);
  background-color: var(--glass-control);
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
}
html[data-rattib-material="glass"] body.workspace-framed :is(button,summary):not(:disabled):hover {
  box-shadow: none;
  border-color: var(--glass-input-border);
  background-color: var(--row);
}
html[data-rattib-material="glass"] body.workspace-framed :is(
  button[class*="primary"],.suite-primary,.workspace-create,.create-draft-save,
  #home-next-action,#scheduling-save,#scheduling-book,
  .collaboration-shell > form > button[type="submit"]
):not(:disabled) {
  color: var(--glass-action-text);
  background-color: var(--glass-action);
  border-color: var(--glass-action);
  font-weight: 600;
}
html[data-rattib-material="glass"] body.workspace-framed :is(
  button[class*="primary"],.suite-primary,.workspace-create,.create-draft-save,
  #home-next-action,#scheduling-save,#scheduling-book,
  .collaboration-shell > form > button[type="submit"]
):not(:disabled):hover { filter: brightness(.96); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
html[data-rattib-material="glass"] body.workspace-framed :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea
):not(:disabled) {
  background-color: var(--glass-control);
  background-image: none;
  box-shadow: none;
  color: var(--text);
  border: 1px solid var(--glass-input-border);
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  min-width: 0;
  max-width: 100%;
}
html[data-rattib-material="glass"] body.workspace-framed textarea { resize: vertical; }
html[data-rattib-material="glass"] .workspace-framed [hidden] { display: none !important; }
html[data-rattib-material="glass"] body.workspace-framed :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--green); }
html[data-rattib-material="glass"] body.workspace-framed input[type="file"] { width: 100%; padding: 8px; }
html[data-rattib-material="glass"] body.workspace-framed input[type="file"]::file-selector-button {
  padding: 8px 12px;
  margin-inline-end: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  background: var(--row);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-field,.forms-control,.operations-field,.scheduling-workspace label) {
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .home-widget,.suite-project-detail,.suite-toolbar,.documents-list,.documents-detail,
  .finance-report,.finance-results,.finance-detail,.finance-filter-bar,
  .contracts-library,.contracts-detail,.calendar-board,.calendar-inspector,
  .knowledge-library,.knowledge-detail,.forms-library,.forms-editor,
  .files-usage,.files-editor,.scheduling-editor,.pricing-floor,.fx-block,.buffer-block,
  .proposal-core,.proposal-detail,.time-list,.time-filters,.time-totals,.time-details
) { border-radius: 16px; border-color: var(--border); }
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-toolbar,.contracts-filters,.calendar-filters,.knowledge-filters,
  .finance-filter-bar,.time-filters
) { background-image: none; box-shadow: none; padding: 16px; gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed :is(
  .home-empty,.suite-empty,.empty-hint,.contracts-empty,.finance-empty,
  .knowledge-empty,.forms-editor > p:only-child
) { background: var(--row); border: 1px dashed var(--border); border-radius: 12px; box-shadow: none; padding: 20px; color: var(--muted); line-height: 1.65; }
html[data-rattib-material="glass"] .workspace-framed :is(
  .home-overview > summary,.home-customization > summary,
  .documents-secondary > summary,.contracts-templates > summary,
  .time-more-filters > summary
) { border-radius: 10px; background: transparent; color: var(--muted); min-height: 44px; padding: 10px 12px; }

html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header { align-items: center; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header-actions { margin-inline-start: auto; flex: 0 0 auto; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step {
  --suite-text: var(--text);
  --suite-muted: var(--muted);
  color: var(--text);
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--green);
  background-color: var(--glass-card);
  background-image: linear-gradient(110deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 70%);
  margin-block-end: 20px;
  gap: 24px;
}
html[data-rattib-material="glass"] .workspace-framed #home-next-title { font-size: clamp(22px, 2.2vw, 28px); margin-block: 8px; line-height: 1.3; }
html[data-rattib-material="glass"] .workspace-framed #home-next-action { min-width: 112px; padding-inline: 22px; border-radius: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home #home-next-action {
  background: var(--glass-action);
  color: var(--glass-action-text);
  border-color: var(--glass-action);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home #home-next-action:focus-visible { outline-color: var(--glass-focus); }
html[data-rattib-material="glass"] .workspace-framed .home-next-label { font-size: 12px; color: var(--muted); letter-spacing: .015em; }
html[data-rattib-material="glass"] .workspace-framed .home-overview { margin-block: 8px 20px; }
html[data-rattib-material="glass"] .workspace-framed .home-widgets { gap: 20px; align-items: start; }
html[data-rattib-material="glass"] .workspace-framed .home-widget { padding: 22px; }
html[data-rattib-material="glass"] .workspace-framed .home-widget-head h2 { font-size: 15px; line-height: 1.5; }
html[data-rattib-material="glass"] body.workspace-framed .home-widget-head button {
  border: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
html[data-rattib-material="glass"] .workspace-framed .home-empty { padding: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .6fr);
  align-items: center;
  gap: 24px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

html[data-rattib-material="glass"] .workspace-framed :is(#panel-files,#panel-portal,#panel-automations) { max-width: none; }
html[data-rattib-material="glass"] .workspace-framed :is(
  .forms-local-note,.scheduling-local-note,.finance-caption,.suite-save-status,
  #panel-files > p,#client-portal-host > p,#panel-collaboration > p,
  #automations-reminders-host > p,#operations-studio-host > p
) { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 76ch; margin-block: 10px 20px; }
html[data-rattib-material="glass"] .workspace-framed .forms-local-note { margin-block: 0 16px; padding: 10px 14px; border-inline-start: 2px solid var(--green); border-radius: 0 8px 8px 0; background: var(--row); }
html[data-rattib-material="glass"][dir="rtl"] .workspace-framed .forms-local-note { border-radius: 8px 0 0 8px; }
html[data-rattib-material="glass"] .workspace-framed :is(.forms-layout,.knowledge-layout,.suite-project-layout) { gap: 20px; }
html[data-rattib-material="glass"] .workspace-framed .forms-library { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed .forms-editor { padding: 22px; border: 1px solid var(--border); border-radius: 16px; max-width: none; min-height: 200px; }
html[data-rattib-material="glass"] .workspace-framed .forms-library p { font-size: 13px; line-height: 1.65; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed .forms-field { padding: 20px 16px; margin-block: 12px; border: 1px solid var(--border); border-radius: 12px; background-image: none; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed .forms-settings { padding: 16px; border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-usage { padding: 22px; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-toolbar { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-local-note { padding: 14px 18px; border-inline-start-width: 2px; border-radius: 10px; background: var(--row); }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling :is(.scheduling-editor,.scheduling-booking-form) { padding: 24px; gap: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekly { padding: 16px; background-image: none; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host { padding: 24px; border-radius: 18px; margin-block-start: 24px; max-width: 860px; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host > h2 { margin: 0 0 12px; font-size: 22px; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host > p { color: var(--muted); font-size: 13px; line-height: 1.65; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host > form { display: grid; gap: 14px; background: transparent; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host :is(input:not([type="checkbox"]),textarea,select) { width: 100%; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host label { display: flex; gap: 12px; align-items: start; font-size: 13px; line-height: 1.6; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration > form { padding: 20px; border: 1px solid var(--border); border-radius: 16px; gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration > section { padding: 22px; border: 1px solid var(--border); border-radius: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration > p { border-inline-start: 2px solid var(--green); background: var(--row); }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host { margin-block-start: 36px; padding-block-start: 28px; border-color: var(--border); }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > h2 { margin: 0 0 12px; font-size: 26px; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > section { padding: 24px; border-color: var(--border); border-radius: 18px; margin-block: 24px; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > section > h3 { margin-block: 0 12px; font-size: 18px; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > section > p { font-size: 13px; color: var(--muted); line-height: 1.65; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > section > form { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }

html[data-rattib-material="glass"] .workspace-framed .pricing-studio-tools { gap: 16px; padding: 16px; background: var(--row); border-color: var(--border); border-radius: 18px; }
html[data-rattib-material="glass"] .workspace-framed .pricing-studio-tools > * { padding: 20px; }
html[data-rattib-material="glass"] .workspace-framed .pricing-studio-tools :is(input,select) { width: 100%; }
html[data-rattib-material="glass"] .workspace-framed .proposal-core { padding: 24px; }
html[data-rattib-material="glass"] .workspace-framed .proposal-core .proposal-details-grid { background: transparent; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed .crm-board-actions button:not(.action-main) { background: transparent; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed .calendar-date { background-image: none; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed .calendar-date:hover { background-color: var(--row); }

html[data-rattib-material="glass"] .workspace-framed :is(.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav) {
  background-color: var(--glass-nav);
  background-image: var(--glass-sheen);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
}
html[data-rattib-material="glass"] .workspace-framed .workspace-nav-destinations { display: flex; flex-direction: column; gap: 2px; }
html[data-rattib-material="glass"] .workspace-framed :is(.tabs .tab.active,.workspace-navigation-destination.active,.workspace-pinned-destination.active) {
  color: var(--glass-on-active);
  background: var(--glass-active);
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}
html[data-rattib-material="glass"][dir="rtl"] .workspace-framed :is(.tabs .tab.active,.workspace-navigation-destination.active,.workspace-pinned-destination.active) { box-shadow: inset -3px 0 0 var(--green); }
html[data-rattib-material="glass"] .workspace-framed .tabs .tab .tab-icon { background: transparent; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-sidebar { border-radius: 24px; }
html[data-rattib-material="glass"] .workspace-framed .tabs .tab:not(.active) { background: transparent; border: 1px solid transparent; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed .tabs .tab:not(.active):hover { background: var(--row); border-color: transparent; }
html[data-rattib-material="glass"] .workspace-framed .tabs .tab { font-size: 14px; padding: 10px 12px; border-radius: 12px; gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-nav-group:is([data-workspace-group="work"],[data-workspace-group="sales"]) .tab { padding-inline-start: 16px; font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-group-label { background: transparent; box-shadow: none; font-size: 11px; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed :is(.workspace-all-tools,.workspace-tools > summary,.workspace-pin) { background: transparent; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 12px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-all-tools { background: var(--glass-control); font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-utilities .workspace-utility { background: transparent; border: 1px solid transparent; padding: 0; border-radius: 12px; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed .workspace-utilities .workspace-utility:hover { background: var(--row); color: var(--text); }
html[data-rattib-material="glass"] .workspace-framed .workspace-utility[data-workspace-write] { background: var(--glass-active); color: var(--green); font-size: 26px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-context { color: var(--muted); font-size: 13px; font-weight: 500; }
html[data-rattib-material="glass"] .workspace-framed .workspace-contextual-actions { border: 0; }
html[data-rattib-material="glass"] .workspace-framed .brand .mark { width: 34px; height: 34px; border-radius: 10px; }
html[data-rattib-material="glass"] .workspace-framed .brand strong { font-size: 17px; letter-spacing: -.02em; }
html[data-rattib-material="glass"] .workspace-framed .foot { color: var(--muted); border-color: var(--border); padding-block: 18px; }
html[data-rattib-material="glass"] .workspace-framed :is(dialog,.crm-sheet-panel,.workspace-tools-body) { border-radius: 22px; }
html[data-rattib-material="glass"] .workspace-framed dialog::backdrop { background: rgb(7 12 7 / .6); }
html[data-rattib-material="glass"] .workspace-framed .workspace-tools-body { padding: 22px; }
html[data-rattib-material="glass"] .workspace-framed .first-run-guide[data-collapsed="true"] { background: transparent; background-image: none; box-shadow: none; inline-size: fit-content; }
html[data-rattib-material="glass"] .workspace-framed .first-run-guide[data-collapsed="true"] #first-run-resume { background: transparent; background-image: none; box-shadow: none; border-color: transparent; color: var(--muted); font-size: 12px; }
html[data-rattib-material="glass"] .workspace-framed .first-run-guide[data-collapsed="true"] #first-run-resume:hover { color: var(--text); }

html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-os :is(.focus-stage,.focus-tools) { border-radius: 22px; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-os :is(button,input,select,textarea) { background-image: none; }
@media (min-width: 701px) and (max-height: 850px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-desktop.focus-os:not(.focus-os-v4) { block-size: auto; min-block-size: 640px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-os:not(.focus-os-v4) .focus-desktop-layout { flex: 0 0 auto; overflow: visible; }
}

@media (min-width: 1001px) {
  html[data-rattib-material="glass"] { --glass-frame-inset: max(16px, calc((100vw - 1840px) / 2)); --glass-content-start: calc(var(--glass-frame-inset) + 236px); --glass-content-end: calc(var(--glass-frame-inset) + 72px); }
  html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-sidebar { inset-inline-start: var(--glass-frame-inset); inset-block: 16px; width: 216px; height: calc(100dvh - 32px); padding: 70px 12px 16px; }
  html[data-rattib-material="glass"] .workspace-framed .brand { inset-inline-start: calc(var(--glass-frame-inset) + 18px); top: 34px; width: 178px; align-items: center; }
  html[data-rattib-material="glass"] .workspace-framed .top { margin-inline: var(--glass-content-start) var(--glass-content-end); padding: 16px 0; min-height: 80px; align-items: center; }
  html[data-rattib-material="glass"] .workspace-framed .app-shell { margin-inline: var(--glass-content-start) var(--glass-content-end); }
  html[data-rattib-material="glass"] .workspace-framed .workspace { padding: 0; }
  html[data-rattib-material="glass"] .workspace-framed .workspace > main { min-height: calc(100dvh - 150px); }
  html[data-rattib-material="glass"] .workspace-framed .workspace-utilities { inset-inline-end: var(--glass-frame-inset); inset-block: 16px; width: 52px; padding: 8px 3px; border-radius: 20px; }
  html[data-rattib-material="glass"] .workspace-framed :is(.foot,#import-preview,#timer-root,#day1-tutorial,#empty-workspace,#backup-nudge,#workspace-coordination,#workspace-recovery,.workspace-chrome-feedback) { margin-inline: var(--glass-content-start) var(--glass-content-end); }
}
@media (max-width: 1000px) {
  html[data-rattib-material="glass"] { --glass-space: 24px; }
  html[data-rattib-material="glass"] .workspace-framed .top { margin: 12px 16px 0; padding: 12px 8px 14px; border: 0; background: transparent; }
  html[data-rattib-material="glass"] .workspace-framed .workspace { padding: 0 16px 12px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace > main { border-radius: 22px; min-height: calc(100dvh - 240px); }
  html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-nav { inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom)); border: 1px solid var(--border); border-radius: 20px; padding: 6px; gap: 4px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-item { background: transparent; border: 0; min-height: 56px; border-radius: 14px; padding: 6px 3px; font-size: 11px; color: var(--muted); }
  html[data-rattib-material="glass"] .workspace-framed .workspace-mobile-item.active { background: var(--glass-active); color: var(--glass-on-active); box-shadow: none; }
  html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os { --focus-os-blur: none; }
  html[data-rattib-material="glass"] .workspace-framed .foot { margin-inline: 24px; padding-block: 12px; }
}
@media (max-width: 700px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html[data-rattib-material="glass"] { --glass-space: 18px; }
  html[data-rattib-material="glass"] .workspace-framed :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { font-size: 16px !important; }
  html[data-rattib-material="glass"] .workspace-framed .top { margin-inline: 12px; grid-template-columns: minmax(0,1fr) auto auto; column-gap: 8px; row-gap: 4px; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-tools { grid-column: 3; grid-row: 1; }
  html[data-rattib-material="glass"] .workspace-framed .top > .workspace-context { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace { padding-inline: 12px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace-create { border-radius: 11px; min-height: 44px; padding-inline: 12px; font-size: 12px; }
  html[data-rattib-material="glass"] .workspace-framed .workspace-tools > summary { width: 44px; padding-inline: 0; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .suite-header-actions { margin: 0; width: auto; }
  html[data-rattib-material="glass"] .workspace-framed :is(.suite-header,.panel-head,.documents-head,.finance-header,.contracts-header,.calendar-head,.time-head,.knowledge-header) { margin-block-end: 20px; padding-block-end: 18px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step { padding: 22px 18px; gap: 18px; }
  html[data-rattib-material="glass"] .workspace-framed .home-widget { padding: 18px; }
  html[data-rattib-material="glass"] .workspace-framed .home-widgets { gap: 16px; }
  html[data-rattib-material="glass"] .workspace-framed :is(.forms-editor,.forms-library,.scheduling-editor,.scheduling-weekly,#portal-approvals-host,.proposal-core) { padding: 18px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling :is(.scheduling-editor,.scheduling-booking-form) { padding: 18px; gap: 16px; }
  html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > section { padding: 18px; }
  html[data-rattib-material="glass"] .workspace-framed .forms-editor { min-height: 160px; }
  html[data-rattib-material="glass"] .workspace-framed .pricing-studio-tools { padding: 12px; }
  html[data-rattib-material="glass"] .workspace-framed .pricing-studio-tools > * { padding: 18px; }
}
html[data-rattib-material="glass"] .workspace-framed > dialog:not(.focus-clear-dialog),
html[data-rattib-material="glass"] .workspace-framed > .crm-sheet > .crm-sheet-panel,
html[data-rattib-material="glass"] .workspace-framed .workspace-tools > .workspace-tools-body {
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
}
html[data-rattib-material="glass"] .workspace-framed dialog:not(.focus-clear-dialog)::backdrop { background: rgb(12 10 7 / .64); }

html[data-rattib-material="glass"] .workspace-framed :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--glass-focus) !important;
  outline-offset: 3px;
}
html[data-rattib-material="glass"] .workspace-framed :is(input,select,textarea)[aria-invalid="true"] {
  border-color: var(--glass-error) !important;
  box-shadow: inset 0 0 0 1px var(--glass-error);
}
html[data-rattib-material="glass"] .workspace-framed :is(button,input,select,textarea):disabled {
  opacity: 1 !important;
  color: var(--glass-disabled-text) !important;
  background: var(--glass-disabled) !important;
  border: 1px dashed var(--glass-border) !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed;
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-project-item[aria-pressed="true"],.knowledge-page-row[aria-current="page"],
  .finance-row[aria-pressed="true"],.contracts-row[aria-pressed="true"],
  .documents-row[aria-pressed="true"],.calendar-date[aria-pressed="true"]
) {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column.is-drop-target {
  border-color: var(--green);
  outline: 2px solid var(--glass-focus);
  outline-offset: 2px;
}
/* Tab interiors: the canvas is open; cards group records and authored work.
   All selectors are confined to the optional glass material. */
html[data-rattib-material="glass"] .workspace-framed .workspace > main {
  padding: clamp(20px, 2vw, 32px);
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-rattib-material="glass"] .workspace-framed .first-run-guide:has(#first-run-resume[aria-expanded="false"]) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-block-end: 14px;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-kicker,.suite-save-status,.knowledge-kicker,.calendar-eyebrow) { font-size: 12px; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-save-status,.finance-feedback,.calendar-feedback,#knowledge-notice):empty { display: none; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-header,.panel-head,.documents-head,.finance-header,.contracts-header,.calendar-head,.time-head,.knowledge-header) { margin-block-end: 20px; padding-block-end: 20px; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-header,.panel-head) > :is(button,.panel-actions) { align-self: center; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-header,.panel-head,.time-head,.contracts-header,.finance-header) :is(.suite-primary,.action-main,.time-primary,.contracts-primary,.finance-primary) { background: var(--glass-action); color: var(--glass-action-text); border-color: var(--glass-action); }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-toolbar,.contracts-filters,.calendar-filters,.time-filters,.finance-filter-bar) {
  border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); padding: 16px;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-empty,.contracts-empty,.finance-empty,.knowledge-empty,.files-empty) { min-block-size: 160px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-empty,.contracts-empty,.finance-empty,.knowledge-empty) h2 { font-size: 21px; margin: 0; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-empty,.contracts-empty,.finance-empty,.knowledge-empty) p { max-width: 56ch; margin-block: 0 6px; }

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widgets { gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget { padding: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head { padding-block-end: 12px; border-block-end: 1px solid var(--border); margin-block-end: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head h2 { font-size: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head button { background: transparent; padding-inline: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-contact-row,.home-task-row,.home-project-row) { padding-block: 12px; line-height: 1.6; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metrics { gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric { padding: 16px; border-radius: 12px; }

html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-layout { grid-template-columns: minmax(240px, .32fr) minmax(0, .68fr); align-items: start; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item { padding: 18px; border-radius: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item strong { font-size: 15px; margin-block-end: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-detail { padding: 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-detail-head { padding-block-end: 16px; border-block-end: 1px solid var(--border); }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-progress { padding: 16px; background: var(--row); border-radius: 10px; margin-block: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-toolbar { display: grid; grid-template-columns: minmax(160px, 1.5fr) repeat(3, minmax(110px, 1fr)) auto; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-views { min-height: 44px; background: var(--input); border-radius: 11px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-views button[aria-pressed="true"] { background: var(--glass-action); color: var(--glass-action-text); }
html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks,#panel-projects) .suite-task-row { padding: 16px; border-radius: 12px; margin-block-end: 10px; align-items: center; }
html[data-rattib-material="glass"] .workspace-framed :is(#panel-tasks,#panel-projects) .suite-task-name { font-size: 15px; min-height: 32px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column { padding: 16px; background: var(--row); border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-heading { font-size: 15px; border-block-end: 1px solid var(--border); padding-block-end: 14px; }

html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-pipeline { margin-block: 12px 0; line-height: 1.8; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm :is(.crm-view,.crm-filters) { gap: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-view { display: inline-flex; padding: 4px; background: var(--row); border: 1px solid var(--border); border-radius: 12px; margin-block-end: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-view .chip { border-radius: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-search { margin-block: 16px 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card { padding: 20px; margin: 0; min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-name { font-size: 21px; line-height: 1.35; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-bucket-title { margin-block: 24px 12px; font-size: 13px; letter-spacing: .015em; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-primary-actions { gap: 8px; flex-wrap: wrap; }

html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-studio-tools { padding: 0; border: 0; background: transparent; gap: 12px; align-items: start; margin-block: 16px 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor { padding: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-package-card { border-radius: 14px; padding: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-cell-label { font-size: 12px; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-totals-row { background: var(--row); font-variant-numeric: tabular-nums; }

html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-bento { gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-bento-card { padding: 24px; border-radius: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.proposal-payment-instructions,.proposal-bento > .week-rest-label) { grid-column: 1 / -1; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-payment-instructions { padding: 0; margin: 0; border: 1px solid var(--border); background: var(--glass-card); border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-payment-instructions > summary { padding: 16px 20px; min-height: 52px; cursor: pointer; font-size: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-pay-rails { padding: 20px; margin: 0; border-block-start: 1px solid var(--border); gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-action-card { padding: 18px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-action-card-actions { gap: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-workspace { gap: 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-paper { padding: 28px; line-height: 1.65; }

html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-workspace { grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr); gap: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts :is(.contracts-library,.contracts-detail) { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row { padding: 16px; border-radius: 10px; margin-block-end: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-paper { line-height: 1.8; padding: 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-workspace { grid-template-columns: minmax(0, 1fr) minmax(280px, .4fr); gap: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance :is(.finance-results,.finance-detail) { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-results-head { padding-block-end: 12px; border-block-end: 1px solid var(--border); }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row { padding: 16px 8px; background: transparent; border-radius: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-report:not(:empty) { padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); }

html[data-rattib-material="glass"] .workspace-framed #panel-week .week-glance { padding: 0; border: 0; background: transparent; margin-block: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-glance-card { padding: 16px; border-radius: 14px; align-items: center; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-main-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-block: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week :is(.week-focus,.week-money) { margin: 0; padding: 20px; border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-focus-field textarea { min-height: 130px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-money-row { padding-block: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-rest-label { margin-block: 28px 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-content { min-height: 520px; border-radius: 14px; grid-template-columns: minmax(0, 1fr) minmax(250px, .35fr); background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-toolbar { margin-block: 16px; padding: 0; border: 0; background: transparent; gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-inspector { padding: 20px; background: var(--row); }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date { padding: 10px; min-height: 82px; border-radius: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date-number { font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-totals { padding: 20px; margin-block: 18px; border: 1px solid var(--border); border-inline-start: 3px solid var(--green); border-radius: 12px; background: var(--glass-card); font-size: 15px; font-weight: 600; line-height: 1.8; }
html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-allocation { padding: 12px 16px; border-radius: 12px; background: var(--row); gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-list { border-radius: 14px; overflow: hidden; }

html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-layout { grid-template-columns: minmax(240px, .28fr) minmax(0, .72fr); gap: 20px; background: transparent; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge :is(.knowledge-library,.knowledge-detail) { padding: 20px; border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-filters { padding: 0; border: 0; background: transparent; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-block { padding: 16px; border-radius: 12px; line-height: 1.7; }
html[data-rattib-material="glass"] .workspace-framed .knowledge-sharing { margin-block-start: 20px; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); }
html[data-rattib-material="glass"] .workspace-framed .knowledge-sharing > summary { padding: 16px 20px; min-height: 52px; font-size: 14px; cursor: pointer; }
html[data-rattib-material="glass"] .workspace-framed .knowledge-sharing > :not(summary) { margin-inline: 20px; margin-block: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-usage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .4fr); align-items: center; gap: 8px 24px; padding: 16px 20px; border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-toolbar { padding: 16px; border-radius: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-empty { padding: 24px; background: var(--row); border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-layout { grid-template-columns: minmax(220px, .28fr) minmax(0, .72fr); gap: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-builder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-editor { padding: 24px; min-height: 240px; border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-control { gap: 8px; font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-actions { border-block-start: 1px solid var(--border); padding-block-start: 16px; margin-block: 20px 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-field { background: var(--row); padding: 20px; }

html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-editor { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 20px; gap: 20px 24px; align-items: start; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details > label:nth-child(-n+2) { grid-column: 1 / -1; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekly { grid-column: 2; grid-row: 1 / 3; padding: 16px; margin: 0; width: 100%; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday { display: grid; grid-template-columns: minmax(90px, .8fr) repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 10px; border-block-end: 1px solid var(--border); align-items: center; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday:last-child { border: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday label { min-width: 0; font-size: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday label:has(input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-wide { grid-column: 1; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-actions { grid-column: 1 / -1; border-block-start: 1px solid var(--border); padding-block-start: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-actions > button:first-child { background: var(--glass-action); color: var(--glass-action-text); border-color: var(--glass-action); }

html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-desktop-utilities { gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus :is(.focus-card,.focus-options) { border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-os-hero { max-width: 54ch; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-notes textarea { line-height: 1.7; }

html[data-rattib-material="glass"] .workspace-framed #panel-portal.active { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host { margin: 0; padding: 24px; max-width: none; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host .portal-decision-field { display: grid; gap: 8px; }
html[data-rattib-material="glass"] .workspace-framed #portal-approvals-host .portal-decision-confirm { display: flex; gap: 12px; align-items: start; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-layout { display: grid; grid-template-columns: minmax(240px, .32fr) minmax(0, .68fr); gap: 20px; margin-block: 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration :is(.collaboration-library,.collaboration-thread) { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-card); min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-create { display: grid; gap: 12px; margin-block: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-compose { display: grid; gap: 14px; padding-block-end: 20px; border-block-end: 1px solid var(--border); }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-comment { margin-block: 14px; padding: 16px; background: var(--row); border: 1px solid var(--border); border-radius: 12px; line-height: 1.7; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host { margin: 0; padding: 0; border: 0; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host > h2 { font-size: 26px; margin-block: 0 12px; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host .operations-secondary { border: 1px solid var(--border); border-radius: 12px; background: var(--glass-card); margin-block: 16px; padding: 0; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host .operations-secondary > summary { padding: 16px; min-height: 52px; font-size: 14px; cursor: pointer; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host .operations-secondary > :not(summary) { margin: 16px; }
html[data-rattib-material="glass"] .workspace-framed #operations-studio-host .operations-secondary > form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

@media (min-width: 1900px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-toolbar > label:first-child { grid-column: span 2; }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-views { justify-self: start; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-editor { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details > label:nth-child(-n+2) { grid-column: auto; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekly { grid-column: 1; grid-row: auto; }
}
@media (max-width: 1100px) {
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-projects .suite-project-layout,#panel-contracts .contracts-workspace,#panel-finance .finance-workspace,#panel-knowledge .knowledge-layout,#panel-forms .forms-layout,#panel-portal,#panel-collaboration .collaboration-layout) { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-list { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-content { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-inspector { border-inline-start: 0; border-block-start: 1px solid var(--border); }
  html[data-rattib-material="glass"] .workspace-framed #panel-week .week-main-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  html[data-rattib-material="glass"] .workspace-framed .workspace > main { padding: 18px 14px 24px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-toolbar > label:first-child { grid-column: 1 / -1; }
  html[data-rattib-material="glass"] .workspace-framed :is(#panel-home .home-widget,#panel-projects .suite-project-detail,#panel-contracts .contracts-library,#panel-contracts .contracts-detail,#panel-finance .finance-results,#panel-finance .finance-detail,#panel-knowledge .knowledge-library,#panel-knowledge .knowledge-detail,#panel-forms .forms-editor,#portal-approvals-host,#panel-collaboration .collaboration-library,#panel-collaboration .collaboration-thread) { padding: 18px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-bento-card { padding: 18px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-proposal .proposal-pay-rails { padding: 16px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date { padding: 4px; min-width: 0; min-height: 58px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-files .files-usage { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-editor { padding: 16px; gap: 20px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-details > label:nth-child(-n+2) { grid-column: 1 / -1; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekly { padding: 12px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday label:has(input[type="checkbox"]) { grid-column: 1 / -1; justify-content: flex-end; }
  html[data-rattib-material="glass"] .workspace-framed #operations-studio-host .operations-secondary > form { grid-template-columns: minmax(0, 1fr); }
}

html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-board-wrap { overflow: visible; border: 0; background: transparent; }

html[data-rattib-material="glass"] .workspace-framed .knowledge-sharing form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
html[data-rattib-material="glass"] .workspace-framed .knowledge-sharing form label { display: grid; gap: 8px; flex: 1 1 180px; min-width: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
 html[data-rattib-material="glass"] .workspace-framed :is(.panel-actions,.time-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
 html[data-rattib-material="glass"] .workspace-framed :is(.panel-actions,.time-actions) > button { width: auto; flex: 1 1 110px; margin: 0; }
 html[data-rattib-material="glass"] .workspace-framed :is(.panel-actions,.time-actions) > :is(.action-main,.time-primary) { flex-basis: 100%; }
}
@media (max-width: 359px) {
 html[data-rattib-material="glass"] .workspace-framed #workspace-create { max-inline-size: 128px; font-size: 12px; line-height: 1.3; white-space: normal; padding-inline: 10px; }
}
/* Working surfaces: selected records and authored content have distinct weight.
   Keep titles light to scan, and reserve filled controls for the next action. */
html[data-rattib-material="glass"] .workspace-framed .workspace-context { font-size: 13px; line-height: 1.6; }
html[data-rattib-material="glass"] .workspace-framed .workspace-pin { background: transparent; border-color: transparent; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed .workspace-pin[aria-pressed="true"] { background: var(--glass-active); color: var(--text); border-color: var(--green); }
html[data-rattib-material="glass"] .workspace-framed .workspace-all-tools { background: transparent; border-color: var(--glass-input-border); font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-tool-search-label { gap: 8px; font-size: 13px; }
html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-group > h3 { color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed .first-run-guide:has(#first-run-resume[aria-expanded="false"]) #first-run-resume { padding-inline: 12px; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; }
.backup-nudge-label { display: none; }
html[lang="en"] .backup-nudge-label[lang="en"], html[lang="ar"] .backup-nudge-label[lang="ar"], html[lang="pt-BR"] .backup-nudge-label[lang="pt-BR"] { display: inline; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge { padding: 0 12px; background: transparent; border-color: var(--border); }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-details { width: 100%; min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-details > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 0; font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-details > summary::after { content: '+'; margin-inline-start: auto; font-size: 18px; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-details[open] > summary::after { content: '−'; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-details > summary svg { flex: 0 0 18px; }
html[data-rattib-material="glass"] .workspace-framed .backup-nudge-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block: 4px 16px; }
html[data-rattib-material="glass"] .workspace-framed .suite-kicker { display: none; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-project-detail,.contracts-detail,.finance-detail,.knowledge-detail,.forms-editor) {
  border-radius: 18px;
  background-image: var(--glass-sheen);
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-detail-head h2,.finance-detail h2,.knowledge-detail > h2,.contracts-detail h2) {
  font-size: clamp(21px, 1.65vw, 26px); line-height: 1.3; margin-block: 4px 10px; overflow-wrap: anywhere;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-project-item,.contracts-row,.finance-row,.knowledge-page-row,.forms-record) {
  text-align: start; transition: background-color 140ms ease, border-color 140ms ease;
  overflow-wrap: anywhere;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-project-item[aria-pressed="true"],.contracts-row[aria-pressed="true"],.finance-row[aria-pressed="true"],.knowledge-page-row[aria-current="page"],.forms-record[aria-current="true"]) {
  background-color: var(--glass-active); background-image: none; border-color: var(--green);
  border-inline-start-width: 3px; box-shadow: none; color: var(--text);
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-status,.suite-deadline,.pkg-scan-item,.forms-state) {
  font-size: 12px; line-height: 1.6; font-weight: 500; border-radius: 6px;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-task-name,.home-widget-head button,.files-row-identity button) {
  background: transparent; background-image: none; border-color: transparent; box-shadow: none;
  text-align: start; min-height: 44px; padding: 6px 0; color: var(--text);
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-task-name,.files-row-identity button) { font-weight: 600; font-size: 16px; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-task-name,.home-widget-head button,.files-row-identity button):hover {
  color: var(--green); background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 4px;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-description,.home-task-meta,.suite-task-meta,.follow-card-meta,.files-row-identity > span) {
  line-height: 1.7; overflow-wrap: anywhere;
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-detail-actions,.contracts-detail > .contracts-actions,.knowledge-actions,.invoice-actions,.scheduling-actions) { gap: 10px; }
html[data-rattib-material="glass"] .workspace-framed :is(.suite-toolbar,.contracts-filters,.finance-filter-bar,.time-filters,.calendar-filters) { box-shadow: none; background-image: none; }

html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step { padding: 24px; min-block-size: 140px; border-radius: 18px; border-inline-start: 3px solid var(--green); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-copy h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; margin-block: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head button { font-size: 12px; color: var(--green); }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget { border-radius: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-metric strong { font-size: 26px; font-variant-numeric: tabular-nums; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-layout { grid-template-columns: minmax(240px, .29fr) minmax(0, .71fr); gap: 24px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-list { gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item { padding: 18px; background-image: none; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-item strong { font-size: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-detail-tasks .suite-task-row { background: transparent; box-shadow: none; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; padding: 16px 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-task-name { font-size: 16px; min-height: 44px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-name { width: 100%; text-align: start; font-size: 16px; min-height: 44px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column { background: var(--glass-panel); box-shadow: none; border-color: var(--border); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-count { display: inline-grid; place-items: center; min-inline-size: 28px; min-block-size: 28px; border: 0; border-radius: 8px; background: var(--row); color: var(--muted); font-size: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-row { background-image: none; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-task-body { min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-column-empty { border-style: dashed; color: var(--muted); padding: 20px 12px; text-align: center; line-height: 1.6; }

html[data-rattib-material="glass"] .workspace-framed #panel-crm .crm-filters { border: 0; padding: 4px 0; background: transparent; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .chip.active { background: var(--glass-active); border-color: var(--green); color: var(--text); }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .chip-count { background: transparent; border: 0; color: inherit; font-variant-numeric: tabular-nums; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-top { padding-block-end: 14px; border-block-end: 1px solid var(--border); margin-block-end: 16px; gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-crm .follow-card-more { min-height: 44px; display: flex; align-items: center; color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed #panel-pricing .pricing-floor-stat { border: 0; box-shadow: none; background: var(--row); min-inline-size: 110px; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.invoice-editor,.invoice-line,.invoice-parties,.proposal-identity) { min-width: 0; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-editor { background: transparent; border: 0; padding: 0; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-output { border-radius: 12px; padding: 16px; box-shadow: none; background: var(--row); }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.invoice-essentials,.invoice-business,.invoice-items,.invoice-payments) { padding: 20px; border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .invoice-line { background: var(--row); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-proposal .documents-secondary > summary { padding: 14px 16px; min-height: 48px; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row { display: flex; gap: 12px; align-items: start; padding: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row > span { min-width: 0; flex: 1; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row strong { font-size: 15px; line-height: 1.5; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-row time { flex: 0 1 90px; font-size: 11px; color: var(--muted); line-height: 1.6; }
html[data-rattib-material="glass"] .workspace-framed #panel-contracts .contracts-detail .contracts-caption { line-height: 1.7; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row { border: 1px solid transparent; border-block-end-color: var(--border); padding: 16px 12px; margin-block: 4px; border-radius: 10px; gap: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row[aria-pressed="true"] { border-color: var(--green); background: var(--glass-active); border-inline-start-width: 3px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-row strong { font-size: 15px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-detail dl { display: grid; grid-template-columns: minmax(90px, .45fr) minmax(0, 1fr); gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-finance .finance-detail :is(dt,dd) { margin: 0; overflow-wrap: anywhere; line-height: 1.7; }

html[data-rattib-material="glass"] .workspace-framed #panel-week .week-glance-card { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-glance-cta { flex: 1 1 100%; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-focus-top { border-block-end: 1px solid var(--border); padding-block-end: 14px; margin-block-end: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-week .week-money-name { font-size: 15px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views { display: flex; gap: 4px; padding: 4px; background: var(--row); border: 1px solid var(--border); border-radius: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views button { border-color: transparent; background: transparent; border-radius: 8px; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views .is-current { background: var(--glass-active); color: var(--text); border-color: var(--green); }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-date[aria-pressed="true"] { background: var(--glass-active); box-shadow: inset 0 0 0 2px var(--green); border-color: var(--green); }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-selected-day { font-size: 18px; line-height: 1.5; }
html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-inspector { box-shadow: none; background-image: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-timesheet .time-allocation { background: var(--row); border: 1px solid var(--border); box-shadow: none; border-radius: 12px; }

html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-detail { line-height: 1.8; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-page-row { padding: 14px 16px; line-height: 1.6; font-size: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-block { box-shadow: none; background: var(--row); border: 1px solid var(--border); padding: 20px; border-radius: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-linked-tasks { box-shadow: none; background: transparent; border: 1px solid var(--border); padding: 16px; }
html[data-rattib-material="glass"] .workspace-framed #panel-files .files-upload { background: var(--glass-panel); padding: 24px; border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-library-heading { font-size: 12px; margin-block: 16px 4px; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-record { padding: 16px; background: transparent; border-color: transparent; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-state { display: inline-block; margin-block: 0 8px; padding: 6px 10px; background: var(--row); color: var(--muted); }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-settings { padding: 0; background: transparent; }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-field { box-shadow: none; background: var(--row); }
html[data-rattib-material="glass"] .workspace-framed #panel-forms .forms-add-field { padding: 16px; border: 1px dashed var(--border); border-radius: 12px; background: transparent; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekly { background: var(--row); box-shadow: none; border: 1px solid var(--border); border-radius: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday { padding-block: 12px; gap: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-weekday:has(input[type="checkbox"]:checked) { border-inline-start: 2px solid var(--green); padding-inline-start: 10px; }
html[data-rattib-material="glass"] .workspace-framed #panel-scheduling .scheduling-actions { border-block-start: 1px solid var(--border); padding-block-start: 16px; }

html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-card { border-radius: 16px; line-height: 1.7; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-card > h2 { margin-block-end: 16px; padding-block-end: 12px; border-block-end: 1px solid var(--border); font-size: 17px; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-history-list > li { padding-block: 14px; }
html[data-rattib-material="glass"] .workspace-framed #panel-focus .focus-notes-foot { line-height: 1.7; font-size: 12px; margin-block-start: 12px; }
html[data-rattib-material="glass"] .workspace-framed #panel-portal .portal-approval-receipt { border-inline-start: 3px solid var(--green); background: var(--row); box-shadow: none; padding: 20px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration :is(.collaboration-library,.collaboration-thread,.collaboration-inbox) { border-radius: 18px; }
html[data-rattib-material="glass"] .workspace-framed #panel-collaboration .collaboration-comment { background: transparent; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; padding-inline: 0; box-shadow: none; }
html[data-rattib-material="glass"] .workspace-framed #panel-automations .operations-editor-row { box-shadow: none; background: var(--row); padding: 16px; }

@media (max-width: 1100px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-layout { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-list { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(230px, 48%); overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: thin; }
  html[data-rattib-material="glass"] .workspace-framed #panel-projects .suite-project-list:has(.suite-empty) { grid-auto-flow: row; grid-auto-columns: auto; }
  html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-rattib-material="glass"] .workspace-framed #panel-knowledge #knowledge-list { max-block-size: 240px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
}
@media (max-width: 700px) {
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-next-step { padding: 20px; min-block-size: 0; }
  html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head { gap: 8px; align-items: center; }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-calendar .calendar-views button { padding-inline: 4px; font-size: 12px; }
  html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-rattib-material="glass"] .workspace-framed #panel-knowledge .knowledge-filters > label:first-child { grid-column: 1 / -1; }
  html[data-rattib-material="glass"] .workspace-framed #panel-proposal :is(.invoice-essentials,.invoice-business,.invoice-items,.invoice-payments) { padding: 16px; }
}
/* Color identifies destinations and authored work; urgency and document paper
   retain their own semantics. Every tint is paired with both theme foregrounds. */
html[data-rattib-material="glass"] {
  --accent-work: #81d5b5; --accent-work-ink: #12382d; --accent-work-soft: #203b33;
  --accent-planning: #94bdff; --accent-planning-ink: #162d4d; --accent-planning-soft: #24364f;
  --accent-resources: #c5b1f7; --accent-resources-ink: #312149; --accent-resources-soft: #342e48;
  --accent-business: #f0bc83; --accent-business-ink: #43270f; --accent-business-soft: #403326;
  --accent-sharing: #8cdbd6; --accent-sharing-ink: #12383a; --accent-sharing-soft: #1f3c40;
  --tool-accent: var(--accent-work);
  --tool-ink: var(--accent-work-ink);
  --tool-surface: var(--accent-work-soft);
  --tool-tint: 9%;
}
html[data-rattib-material="glass"][data-theme="light"] {
  --accent-work: #116e55; --accent-work-ink: #ffffff; --accent-work-soft: #ddefe7;
  --accent-planning: #285ba5; --accent-planning-ink: #ffffff; --accent-planning-soft: #e2ecfb;
  --accent-resources: #6846a6; --accent-resources-ink: #ffffff; --accent-resources-soft: #eee7f8;
  --accent-business: #925116; --accent-business-ink: #ffffff; --accent-business-soft: #faebd9;
  --accent-sharing: #18656b; --accent-sharing-ink: #ffffff; --accent-sharing-soft: #dff0ef;
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-home,[data-tab="home"],[data-workspace-destination="home"],[data-workspace-pin-destination="home"],#panel-projects,[data-tab="projects"],[data-workspace-destination="projects"],[data-workspace-pin-destination="projects"],#panel-tasks,[data-tab="tasks"],[data-workspace-destination="tasks"],[data-workspace-pin-destination="tasks"],#panel-focus,[data-tab="focus"],[data-workspace-destination="focus"],[data-workspace-pin-destination="focus"],.workspace-mobile-item,[data-home-widget="tasks"],[data-home-widget="projects"],[data-home-widget="status"],[data-task-drop-status="done"]
) {
  --tool-accent: var(--accent-work);
  --tool-ink: var(--accent-work-ink);
  --tool-surface: var(--accent-work-soft);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-week,[data-tab="week"],[data-workspace-destination="week"],[data-workspace-pin-destination="week"],#panel-calendar,[data-tab="calendar"],[data-workspace-destination="calendar"],[data-workspace-pin-destination="calendar"],#panel-timesheet,[data-tab="timesheet"],[data-workspace-destination="timesheet"],[data-workspace-pin-destination="timesheet"],#panel-scheduling,[data-tab="scheduling"],[data-workspace-destination="scheduling"],[data-workspace-pin-destination="scheduling"],[data-home-widget="week"],[data-task-drop-status="doing"]
) {
  --tool-accent: var(--accent-planning);
  --tool-ink: var(--accent-planning-ink);
  --tool-surface: var(--accent-planning-soft);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-knowledge,[data-tab="knowledge"],[data-workspace-destination="knowledge"],[data-workspace-pin-destination="knowledge"],#panel-files,[data-tab="files"],[data-workspace-destination="files"],[data-workspace-pin-destination="files"],#panel-forms,[data-tab="forms"],[data-workspace-destination="forms"],[data-workspace-pin-destination="forms"]
) {
  --tool-accent: var(--accent-resources);
  --tool-ink: var(--accent-resources-ink);
  --tool-surface: var(--accent-resources-soft);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-crm,[data-tab="crm"],[data-workspace-destination="crm"],[data-workspace-pin-destination="crm"],#panel-pricing,[data-tab="pricing"],[data-workspace-destination="pricing"],[data-workspace-pin-destination="pricing"],#panel-proposal,[data-tab="proposal"],[data-workspace-destination="proposal"],[data-workspace-pin-destination="proposal"],#panel-contracts,[data-tab="contracts"],[data-workspace-destination="contracts"],[data-workspace-pin-destination="contracts"],#panel-finance,[data-tab="finance"],[data-workspace-destination="finance"],[data-workspace-pin-destination="finance"],[data-home-widget="followups"],[data-home-widget="cash"],[data-task-drop-status="todo"]
) {
  --tool-accent: var(--accent-business);
  --tool-ink: var(--accent-business-ink);
  --tool-surface: var(--accent-business-soft);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-portal,[data-tab="portal"],[data-workspace-destination="portal"],[data-workspace-pin-destination="portal"],#panel-collaboration,[data-tab="collaboration"],[data-workspace-destination="collaboration"],[data-workspace-pin-destination="collaboration"],#panel-automations,[data-tab="automations"],[data-workspace-destination="automations"],[data-workspace-pin-destination="automations"]
) {
  --tool-accent: var(--accent-sharing);
  --tool-ink: var(--accent-sharing-ink);
  --tool-surface: var(--accent-sharing-soft);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .panel,[data-tab],[data-workspace-destination],[data-workspace-pin-destination],
  .workspace-mobile-item,.home-widget,.suite-board-column
) {
  --green: var(--tool-accent);
  --green-dim: var(--tool-surface);
  --elevated: var(--tool-surface);
  --glass-active: var(--tool-surface);
  --glass-on-active: var(--text);
  --glass-action: var(--tool-accent);
  --glass-action-text: var(--tool-ink);
  --glass-focus: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .tab,.workspace-navigation-destination,.workspace-pinned-destination,.workspace-mobile-item
) .tab-icon { color: var(--tool-accent); }
html[data-rattib-material="glass"] .workspace-framed :is(
  .tabs .tab,.workspace-navigation-destination,.workspace-pinned-destination
) .tab-icon {
  inline-size: 24px; block-size: 24px; flex: 0 0 24px;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--tool-surface); color: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-group {
  display: flex; flex-direction: column; gap: 6px; align-self: start;
}
html[data-rattib-material="glass"] .workspace-framed .workspace-navigation-group > h3 { margin-block-end: 2px; }
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-header,.panel-head,.documents-head,.finance-header,.contracts-header,
  .calendar-head,.time-head,.knowledge-header
) { position: relative; }
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-header,.panel-head,.documents-head,.finance-header,.contracts-header,
  .calendar-head,.time-head,.knowledge-header
)::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -1px;
  inline-size: 56px; block-size: 3px; border-radius: 3px; background: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-files > h2,#panel-scheduling > h2,.forms-builder > h2,
  #client-portal-host > h2,#panel-collaboration > h2,#automations-reminders-host > h2,
  #operations-studio-host > h2
) { border-inline-start: 3px solid var(--tool-accent); padding-inline-start: 12px; }

html[data-rattib-material="glass"] .workspace-framed :is(
  #panel-home .home-next-step,.suite-project-detail,.pricing-floor,
  .documents-current,.contracts-detail,.finance-report,.knowledge-detail,
  .forms-editor,.files-usage,.scheduling-editor,.time-totals,.week-focus,
  .calendar-inspector,.client-portal-preview,.collaboration-thread,.operations-section
) {
  background-image: linear-gradient(125deg, color-mix(in srgb, var(--tool-accent) var(--tool-tint), transparent), transparent 65%), var(--glass-sheen);
  border-block-start-color: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget {
  background-image: linear-gradient(125deg, color-mix(in srgb, var(--tool-accent) var(--tool-tint), transparent), transparent 70%), var(--glass-sheen);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home .home-widget-head h2 {
  border-inline-start-color: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed #panel-home :is(.home-task-ring,.home-week-chart) {
  --green: var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed :is(.suite-progress progress,.files-usage progress) { accent-color: var(--tool-accent); }
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-column {
  border-block-start: 3px solid var(--tool-accent);
}
html[data-rattib-material="glass"] .workspace-framed #panel-tasks .suite-board-count {
  background: var(--tool-surface); color: var(--tool-accent); font-weight: 700;
}
html[data-rattib-material="glass"] .workspace-framed :is(.pricing-floor-stat,.pricing-numcell .cell-val,.home-metric-value,.time-totals strong) {
  color: var(--tool-accent); font-variant-numeric: tabular-nums;
}
/* Selection and hover share the destination color, with a border and label
   so navigation never depends on color alone. */
html[data-rattib-material="glass"] .workspace-framed :is(
  .suite-project-item[aria-pressed="true"],.contracts-row[aria-pressed="true"],
  .finance-row[aria-pressed="true"],.knowledge-page-row[aria-current="page"],
  .forms-record[aria-current="true"],.collaboration-channel[aria-current="true"]
) { background-color: var(--tool-surface); border-color: var(--tool-accent); }
html[data-rattib-material="glass"] body.workspace-framed :is(
  .suite-primary,.action-main,.time-primary,.contracts-primary,.finance-primary,
  .documents-primary,.knowledge-primary,button[class*="primary"]
):not(:disabled):hover { background-color: var(--glass-action); border-color: var(--glass-action); }
html[data-rattib-material="glass"]:is([data-route-surface="crm"],[data-route-surface="pricing"],[data-route-surface="proposal"],[data-route-surface="contracts"],[data-route-surface="finance"]):not(#_) body.workspace-framed .workspace-create {
  --glass-action: var(--accent-business); --glass-action-text: var(--accent-business-ink);
}
html[data-rattib-material="glass"][data-route-surface="calendar"]:not(#_) body.workspace-framed .workspace-create {
  --glass-action: var(--accent-planning); --glass-action-text: var(--accent-planning-ink);
}
html[data-rattib-material="glass"]:is([data-route-surface="week"],[data-route-surface="calendar"],[data-route-surface="timesheet"],[data-route-surface="scheduling"]):not(#_) body.workspace-framed .workspace-mobile-item[data-workspace-mobile="more"] {
  --tool-accent: var(--accent-planning); --tool-surface: var(--accent-planning-soft);
}
html[data-rattib-material="glass"]:is([data-route-surface="knowledge"],[data-route-surface="files"],[data-route-surface="forms"]):not(#_) body.workspace-framed .workspace-mobile-item[data-workspace-mobile="more"] {
  --tool-accent: var(--accent-resources); --tool-surface: var(--accent-resources-soft);
}
html[data-rattib-material="glass"]:is([data-route-surface="crm"],[data-route-surface="pricing"],[data-route-surface="proposal"],[data-route-surface="contracts"],[data-route-surface="finance"]):not(#_) body.workspace-framed .workspace-mobile-item[data-workspace-mobile="more"] {
  --tool-accent: var(--accent-business); --tool-surface: var(--accent-business-soft);
}
html[data-rattib-material="glass"]:is([data-route-surface="portal"],[data-route-surface="collaboration"],[data-route-surface="automations"]):not(#_) body.workspace-framed .workspace-mobile-item[data-workspace-mobile="more"] {
  --tool-accent: var(--accent-sharing); --tool-surface: var(--accent-sharing-soft);
}
/* Preference-based opacity is also available as a nonpersistent root override
   for hosts without the media query: data-transparency="reduce". */
html[data-rattib-material="glass"][data-transparency="reduce"] {
  --glass-ambient: none; --tool-tint: 0%;
  --glass-panel: var(--card); --glass-card: var(--card); --glass-control: var(--input);
  --glass-raised: var(--card); --glass-nav: var(--rail);
  --glass-backdrop: none; --glass-backdrop-mobile: none;
  --glass-sheen: none; --glass-control-sheen: none;
  --glass-shadow: none; --glass-control-shadow: none; --glass-raised-shadow: none;
}
html[data-rattib-material="glass"][data-transparency="reduce"] .workspace-framed .focus-desktop.focus-os {
  --focus-os-blur: none;
  --focus-os-surface: var(--card);
  --glass-sheen: none !important;
  --glass-control-sheen: none !important;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-rattib-material="glass"], html[data-rattib-material="glass"][data-theme="light"] {
    --glass-ambient: none; --tool-tint: 0%;
    --glass-panel: var(--card); --glass-card: var(--card); --glass-control: var(--input);
    --glass-raised: var(--card); --glass-nav: var(--rail);
    --glass-border: var(--muted); --glass-input-border: var(--muted); --glass-backdrop: none; --glass-backdrop-mobile: none;
    --glass-sheen: none; --glass-control-sheen: none;
    --glass-shadow: none; --glass-control-shadow: none; --glass-raised-shadow: none;
  }
  html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os {
    --focus-os-blur: none; --focus-os-surface: var(--card);
    --glass-sheen: none !important; --glass-control-sheen: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rattib-material="glass"] .workspace-framed,
  html[data-rattib-material="glass"] .workspace-framed *,
  html[data-rattib-material="glass"] .workspace-framed *::before,
  html[data-rattib-material="glass"] .workspace-framed *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  html[data-rattib-material="glass"], html[data-rattib-material="glass"][data-theme="light"] {
    --accent-work: Highlight; --accent-work-ink: HighlightText; --accent-work-soft: Canvas;
    --accent-planning: Highlight; --accent-planning-ink: HighlightText; --accent-planning-soft: Canvas;
    --accent-resources: Highlight; --accent-resources-ink: HighlightText; --accent-resources-soft: Canvas;
    --accent-business: Highlight; --accent-business-ink: HighlightText; --accent-business-soft: Canvas;
    --accent-sharing: Highlight; --accent-sharing-ink: HighlightText; --accent-sharing-soft: Canvas;
    --glass-ambient: none; --tool-tint: 0%;
    --glass-canvas: Canvas; --glass-panel: Canvas; --glass-card: Canvas;
    --glass-nav: Canvas; --glass-raised: Canvas; --glass-control: ButtonFace;
    --glass-active: Highlight; --glass-on-active: HighlightText;
    --glass-disabled: ButtonFace; --glass-disabled-text: GrayText;
    --glass-border: ButtonText; --glass-input-border: ButtonText; --glass-focus: Highlight; --glass-error: Mark;
    --glass-option-bg: Canvas; --glass-option-text: CanvasText;
    --glass-backdrop: none; --glass-backdrop-mobile: none;
    --glass-sheen: none; --glass-control-sheen: none;
    --glass-shadow: none; --glass-control-shadow: none; --glass-raised-shadow: none;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(.panel,.panel *) { background-image: none !important; }
  html[data-rattib-material="glass"] .workspace-framed :is(.panel,[data-tab],[data-workspace-destination],[data-workspace-pin-destination],.workspace-mobile-item,.home-widget,.suite-board-column) {
    --glass-active: Highlight; --glass-on-active: HighlightText;
    --glass-action: ButtonFace; --glass-action-text: ButtonText;
  }
  html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os {
    --focus-os-blur: none; --focus-os-surface: Canvas;
    --glass-card: Canvas !important; --glass-control: ButtonFace !important;
    --glass-raised: Canvas !important; --glass-border: ButtonText !important;
    --glass-input-border: ButtonText !important; --glass-focus: Highlight !important;
    --glass-option-bg: Canvas !important; --glass-option-text: CanvasText !important;
    --glass-sheen: none !important; --glass-control-sheen: none !important;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(.workspace-create,#home-next-action) { background: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText; }
  html[data-rattib-material="glass"] .workspace-framed .public-questionnaire {
    --text: CanvasText; --muted: CanvasText; --glass-control: Canvas;
    --glass-input-border: ButtonText; --glass-option-bg: Canvas;
    --glass-option-text: CanvasText; --glass-focus: Highlight; --glass-error: Mark;
  }
  html[data-rattib-material="glass"] .workspace-framed :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: Highlight !important; }
}
@media print {
  html[data-rattib-material="glass"] {
    --glass-backdrop: none; --glass-backdrop-mobile: none;
    --glass-sheen: none; --glass-control-sheen: none;
    --glass-shadow: none; --glass-control-shadow: none; --glass-raised-shadow: none;
  }
  html[data-rattib-material="glass"] .workspace-framed,
  html[data-rattib-material="glass"] .workspace-framed * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html[data-rattib-material="glass"] .workspace-framed .focus-desktop.focus-os {
    --focus-os-blur: none;
    --glass-sheen: none !important;
    --glass-control-sheen: none !important;
  }
}

html[data-rattib-material="glass"] .workspace-framed .top {
  padding-block-start: max(9px, env(safe-area-inset-top, 0px));
}
html[data-rattib-material="glass"] .workspace-framed :is(input, textarea, select) {
  scroll-margin-block: 12px calc(88px + env(safe-area-inset-bottom, 0px));
}
html[data-rattib-material="glass"] .workspace-framed .finance-filters:not([open]) > :not(summary) {
  display: none !important;
}
html[data-rattib-material="glass"] .workspace-framed :is(
  .calendar-field,
  .proposal-discovery-item,
  .finance-checkbox,
  .rattib-reminders__switch
) :is(input[type="checkbox"], input[type="radio"]) {
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  flex: 0 0 44px;
}