/* Calendly-inspired visual system for the ListingFlow operations workspace.
   Product behavior stays unchanged; this layer only unifies surface, type and
   interaction styling around a cool blue SaaS language. */

body.client-ui {
  --lf-bg:#f4f8ff;
  --lf-surface:#ffffff;
  --lf-surface-2:#f7faff;
  --lf-sidebar:#ffffff;
  --lf-sidebar-2:#f0f5fc;
  --lf-text:#11385e;
  --lf-muted:#506e8a;
  --lf-line:#d8e6f7;
  --lf-line-strong:#b8cde6;
  --lf-accent:#0444fc;
  --lf-accent-hover:#0038d1;
  --lf-blue:#446bfc;
  --lf-blue-bg:#edf4ff;
  --lf-green:#178a59;
  --lf-green-bg:#e7f8ef;
  --lf-amber:#9b6200;
  --lf-amber-bg:#fff5d8;
  --lf-red:#c73445;
  --lf-red-bg:#fff0f2;
  --lf-radius:10px;
  --lf-radius-sm:8px;
  --lf-shadow:0 8px 24px rgba(17,56,94,.06);
  --lf-font:"Circe","SF Pro Text","Segoe UI",Arial,sans-serif;
  background:var(--lf-bg)!important;
  color:var(--lf-text)!important;
  font-size:15px!important;
  line-height:1.5!important;
  border-top:0!important;
}

body.client-ui .app,
body.client-ui .app.feeds-mode,
body.client-ui .app.layouts-mode,
body.client-ui .app.validator-mode,
body.client-ui .app.project-list-mode {
  background:var(--lf-bg)!important;
  /* The legacy theme adds a dark frame to .app. Keep the client shell flush
     with the viewport so no obsolete strip appears above the workspace. */
  border:0!important;
}

body.client-ui .sidebar {
  width:auto!important;
  padding:24px 16px!important;
  border-right:1px solid var(--lf-line)!important;
  background:var(--lf-sidebar)!important;
  color:var(--lf-text)!important;
  box-shadow:none!important;
}
body.client-ui .sidebar .brand {
  display:grid!important;
  justify-items:start!important;
  align-content:start!important;
  gap:8px!important;
  margin:0 8px 28px!important;
}
body.client-ui .sidebar .brand small {
  display:block!important;
  margin:0!important;
  color:var(--lf-muted)!important;
  font-size:11px!important;
  line-height:16px!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
body.client-ui .lf-brand-name {
  color:var(--lf-text)!important;
  font-size:21px!important;
  letter-spacing:-.3px!important;
}
body.client-ui .lf-brand-name span { color:var(--lf-accent)!important; }
body.client-ui .lf-brand-mark {
  background:var(--lf-accent)!important;
  color:#fff!important;
}
body.client-ui .lf-brand-mark img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
body.client-ui .workspace-switcher {
  display:grid!important;
  gap:12px!important;
  margin:0 0 28px!important;
  padding:13px 14px!important;
  border:1px solid var(--lf-line)!important;
  border-radius:var(--lf-radius)!important;
  background:var(--lf-surface-2)!important;
  color:var(--lf-text)!important;
}
body.client-ui .workspace-switcher-head {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
}
body.client-ui .workspace-switcher-label {
  min-width:0!important;
  overflow:hidden!important;
  color:var(--lf-muted)!important;
  font-size:10px!important;
  line-height:14px!important;
  letter-spacing:.08em!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body.client-ui .workspace-switcher-back {
  display:inline-flex!important;
  align-items:center!important;
  justify-self:start!important;
  gap:4px!important;
  flex:0 0 auto!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--lf-blue)!important;
  font-size:10px!important;
  line-height:14px!important;
  font-weight:700!important;
  text-decoration:none!important;
}
body.client-ui .workspace-switcher-back:hover { color:var(--lf-text)!important; }
body.client-ui .workspace-switcher-back svg { width:14px!important; height:14px!important; }
body.client-ui .workspace-switcher-back span {
  display:inline!important;
  min-height:0!important;
  margin:0!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  letter-spacing:normal!important;
  text-transform:none!important;
}
body.client-ui .workspace-switcher-control {
  display:grid!important;
  gap:5px!important;
  min-width:0!important;
}
body.client-ui .workspace-switcher-control>span {
  color:var(--lf-muted)!important;
  font-size:10px!important;
  line-height:14px!important;
}
body.client-ui .workspace-switcher-control select {
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 30px 0 10px!important;
  border:1px solid var(--lf-line-strong)!important;
  border-radius:8px!important;
  background:var(--lf-surface)!important;
  color:var(--lf-text)!important;
  font-family:var(--lf-font)!important;
  font-size:13px!important;
  line-height:18px!important;
}
body.client-ui .workspace-switcher-control select:focus-visible,
body.client-ui .workspace-switcher-back:focus-visible {
  outline:3px solid rgba(68,107,252,.22)!important;
  outline-offset:2px!important;
}
body.client-ui .workspace-switcher-back[hidden] { display:none!important; }
@media (min-width:761px) and (max-width:1100px) {
  body.client-ui .workspace-switcher { display:none!important; }
}
body.client-ui .nav-label {
  margin:0 12px 8px!important;
  color:var(--lf-muted)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
}
body.client-ui .sidebar .nav-item,
body.client-ui .logout-btn {
  min-height:44px!important;
  margin:3px 0!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--lf-text)!important;
  font-size:14px!important;
  font-weight:600!important;
}
body.client-ui .sidebar .nav-item:hover,
body.client-ui .logout-btn:hover {
  background:var(--lf-surface-2)!important;
  border-color:var(--lf-line)!important;
  color:var(--lf-accent)!important;
}
body.client-ui .sidebar .nav-item.active {
  background:var(--lf-blue-bg)!important;
  border-color:#b8cfff!important;
  color:var(--lf-accent)!important;
  box-shadow:none!important;
}
body.client-ui .sidebar .nav-item.active .nav-optional { color:#3e64b5!important; }
body.client-ui .sidebar .nav-workflow-toggle { color:var(--lf-text)!important; }
body.client-ui .sidebar .nav-workflow-items .nav-item { color:var(--lf-text)!important; }
body.client-ui .nav-step {
  border-color:var(--lf-line-strong)!important;
  color:var(--lf-muted)!important;
  background:var(--lf-surface)!important;
}
body.client-ui .nav-step.done,
body.client-ui .nav-workflow-items .nav-item.active .nav-step {
  border-color:var(--lf-accent)!important;
  background:var(--lf-accent)!important;
  color:#fff!important;
}
body.client-ui .sidebar-help {
  border-color:var(--lf-line)!important;
  background:var(--lf-surface-2)!important;
  color:var(--lf-text)!important;
}

body.client-ui .topbar {
  background:var(--lf-surface)!important;
  border-bottom:1px solid var(--lf-line)!important;
  color:var(--lf-text)!important;
  box-shadow:0 2px 12px rgba(17,56,94,.04)!important;
  backdrop-filter:none;
}
body.client-ui .topbar h1 {
  color:var(--lf-text)!important;
  font-size:17px!important;
  line-height:24px!important;
  font-weight:700!important;
}
body.client-ui .topbar .subtitle { color:var(--lf-muted)!important; font-size:13px!important; }
body.client-ui .topbar .subtitle a { color:var(--lf-accent)!important; }
body.client-ui .topbar-project-picker,
body.client-ui .theme-toggle,
body.client-ui .topbar-icon-action {
  border-color:var(--lf-line)!important;
  background:var(--lf-surface)!important;
  color:var(--lf-text)!important;
}
body.client-ui .topbar-icon-action:hover,
body.client-ui .theme-toggle:hover { background:var(--lf-blue-bg)!important; color:var(--lf-accent)!important; }
body.client-ui .account-avatar { background:var(--lf-blue-bg)!important; border-color:#c6d8f1!important; color:var(--lf-text)!important; }
body.client-ui .account-copy strong { color:var(--lf-text)!important; }
body.client-ui .account-copy small { color:var(--lf-muted)!important; }

body.client-ui .main {
  background:var(--lf-bg)!important;
  color:var(--lf-text)!important;
}
body.client-ui .main :is(.projects-page,.source-panel,.feeds-panel,.validator-panel,.complexes-panel,.layouts-panel,.publish-panel,.monitor-card,.quality-panel,.billing-card,.support-form,.table-wrap,.bulk-panel,.change-log-panel,.editor) {
  border-color:var(--lf-line)!important;
  background:var(--lf-surface)!important;
  box-shadow:var(--lf-shadow)!important;
}
body.client-ui .projects-heading h1,
body.client-ui .projects-heading h2,
body.client-ui .main :is(.panel-title,.section-title,.catalog-head .panel-title,.table-headline>.panel-title) {
  color:var(--lf-text)!important;
  font-weight:700!important;
  letter-spacing:-.35px!important;
}
body.client-ui .projects-heading h1 { font-size:34px!important; line-height:41px!important; }
body.client-ui .projects-heading p,
body.client-ui .panel-caption { color:var(--lf-muted)!important; font-size:15px!important; line-height:23px!important; }

body.client-ui .project-metric {
  border-color:var(--lf-line)!important;
  background:var(--lf-surface)!important;
  box-shadow:var(--lf-shadow)!important;
}
body.client-ui .project-metric .metric-copy>span,
body.client-ui .project-metric small { color:var(--lf-muted)!important; }
body.client-ui .project-metric .metric-copy strong { color:var(--lf-text)!important; }
body.client-ui .project-metric .metric-icon { background:var(--lf-blue-bg)!important; color:var(--lf-accent)!important; }

body.client-ui :is(input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea) {
  border-color:var(--lf-line-strong)!important;
  border-radius:8px!important;
  background:var(--lf-surface)!important;
  color:var(--lf-text)!important;
}
body.client-ui :is(input,textarea)::placeholder { color:#7892ad!important; }
body.client-ui :is(input,select,textarea):focus {
  border-color:var(--lf-accent)!important;
  box-shadow:0 0 0 3px rgba(4,68,252,.13)!important;
}
body.client-ui .field label,
body.client-ui .object-filter-panel .field>label { color:var(--lf-text)!important; font-size:13px!important; font-weight:700!important; }
body.client-ui :is(button.primary,#newProjectBtn,#loadUrlBtn,#generateLinkBtn,#applyBulkBtn) {
  min-height:42px!important;
  border:1px solid var(--lf-accent)!important;
  border-radius:8px!important;
  background:var(--lf-accent)!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(4,68,252,.16)!important;
}
body.client-ui :is(button.primary,#newProjectBtn,#loadUrlBtn,#generateLinkBtn,#applyBulkBtn):hover:not(:disabled) {
  background:var(--lf-accent-hover)!important;
  border-color:var(--lf-accent-hover)!important;
  transform:translateY(-1px);
}
body.client-ui :is(button:not(.primary),.button,.secondary):not(:where(.nav-item,.logout-btn,.text-button,.auth-forgot-link,.auth-tab,.le-layer,.project-row-action,.theme-toggle)) {
  border-color:var(--lf-line-strong)!important;
  border-radius:8px!important;
  background:var(--lf-surface)!important;
  color:var(--lf-text)!important;
}
body.client-ui :is(button:not(.primary),.button,.secondary):hover:not(:disabled) { border-color:#8eafe0!important; background:var(--lf-blue-bg)!important; color:var(--lf-accent)!important; }

body.client-ui .project-table-wrap,
body.client-ui .table-wrap { overflow:auto!important; border-radius:10px!important; }
body.client-ui .project-list-mode .project-table tbody tr { animation:none!important; transform:none!important; }
body.client-ui .project-table th,
body.client-ui th { background:var(--lf-surface-2)!important; color:var(--lf-muted)!important; }
body.client-ui .project-table td,
body.client-ui td { background:var(--lf-surface)!important; color:var(--lf-text)!important; border-color:var(--lf-line)!important; }
body.client-ui .project-table tbody tr:hover td,
body.client-ui tbody tr:hover td { background:var(--lf-blue-bg)!important; }
body.client-ui .project-status { border:1px solid transparent!important; }
body.client-ui .project-status.pending,
body.client-ui .status.pending { background:var(--lf-blue-bg)!important; color:var(--lf-accent)!important; }
body.client-ui .project-status.success,
body.client-ui .status.success { background:var(--lf-green-bg)!important; color:var(--lf-green)!important; }
body.client-ui .project-status.error,
body.client-ui .status.error { background:var(--lf-red-bg)!important; color:var(--lf-red)!important; }

body.client-ui .editor-head,
body.client-ui .editor-section-nav,
body.client-ui .source-grid,
body.client-ui .object-filter-panel,
body.client-ui .publish-row,
body.client-ui .feeds-toolbar,
body.client-ui .validator-toolbar,
body.client-ui .layout-branding { background:var(--lf-surface-2)!important; border-color:var(--lf-line)!important; }
body.client-ui .editor-section-nav button.active { color:var(--lf-accent)!important; border-color:var(--lf-accent)!important; }
body.client-ui #layoutsPanel .le-toolbar button,
body.client-ui #layoutsPanel .le-layer-icon,
body.client-ui #layoutsPanel .le-field input:not([type=color]):not([type=range]),
body.client-ui #layoutsPanel .le-field textarea { background:var(--lf-surface)!important; border-color:var(--lf-line-strong)!important; color:var(--lf-text)!important; }

body.client-ui .feed-error-body,
body.client-ui .feed-error-actions,
body.client-ui .feed-error-item { background:var(--lf-surface)!important; border-color:var(--lf-line)!important; color:var(--lf-text)!important; }
body.client-ui .feed-error-summary { border-color:var(--lf-line)!important; }
body.client-ui .feed-error-summary div { border-color:var(--lf-line)!important; }
body.client-ui .feed-error-hint { color:var(--lf-muted)!important; }
body.client-ui #bootScreen { background:var(--lf-bg)!important; color:var(--lf-muted)!important; }
body.client-ui #bootScreen .boot-status::before { border-color:var(--lf-line-strong); border-top-color:var(--lf-accent); }
body.client-ui button[aria-busy="true"] { color:transparent!important; }
body.client-ui button[aria-busy="true"]::after { border-color:#fff; border-right-color:transparent; }

body.client-ui[data-theme="dark"] {
  --lf-bg:#0e2438;
  --lf-surface:#12314f;
  --lf-surface-2:#174369;
  --lf-sidebar:#0b1e30;
  --lf-sidebar-2:#102b44;
  --lf-text:#edf6ff;
  --lf-muted:#a9c2da;
  --lf-line:#2d5273;
  --lf-line-strong:#477395;
  --lf-accent:#4f83ff;
  --lf-accent-hover:#6b99ff;
  --lf-blue:#8eb2ff;
  --lf-blue-bg:#1a4470;
  --lf-green-bg:#143f36;
  --lf-red-bg:#512a39;
  --lf-shadow:0 10px 28px rgba(0,0,0,.2);
}
body.client-ui[data-theme="dark"] .topbar { background:rgba(14,36,56,.96)!important; }
body.client-ui[data-theme="dark"] .sidebar,
body.client-ui[data-theme="dark"] .main :is(.projects-page,.source-panel,.feeds-panel,.validator-panel,.complexes-panel,.layouts-panel,.publish-panel,.monitor-card,.quality-panel,.billing-card,.support-form,.table-wrap,.bulk-panel,.change-log-panel,.editor),
body.client-ui[data-theme="dark"] :is(input,select,textarea),
body.client-ui[data-theme="dark"] td { background:var(--lf-surface)!important; }
body.client-ui[data-theme="dark"] .sidebar .nav-item,
body.client-ui[data-theme="dark"] .logout-btn { color:var(--lf-text)!important; }
body.client-ui[data-theme="dark"] .sidebar .nav-item.active { background:var(--lf-blue-bg)!important; color:#fff!important; border-color:#4f83ff!important; }
body.client-ui[data-theme="dark"] .workspace-switcher,
body.client-ui[data-theme="dark"] .editor-head,
body.client-ui[data-theme="dark"] .editor-section-nav,
body.client-ui[data-theme="dark"] .source-grid,
body.client-ui[data-theme="dark"] .object-filter-panel,
body.client-ui[data-theme="dark"] .publish-row,
body.client-ui[data-theme="dark"] th { background:var(--lf-surface-2)!important; }
body.client-ui[data-theme="dark"] .project-table tbody tr:hover td,
body.client-ui[data-theme="dark"] tbody tr:hover td { background:var(--lf-blue-bg)!important; }

/* Product flow: keep one source of truth for navigation. The sidebar is the
   persistent workflow; the old duplicate horizontal stepper only added noise. */
body.client-ui .workflow-nav { display:none!important; }
body.client-ui .usage-hint { margin:0 0 22px!important; border-color:var(--lf-line)!important; background:var(--lf-surface)!important; box-shadow:var(--lf-shadow)!important; }
body.client-ui .page-breadcrumb { margin-top:3px!important; color:var(--lf-muted)!important; }
body.client-ui .page-breadcrumb a { color:var(--lf-accent)!important; font-weight:700!important; }
body.client-ui .nav-label { letter-spacing:.08em!important; font-size:11px!important; font-weight:800!important; text-transform:uppercase!important; }
body.client-ui .nav-label-project { margin-top:24px!important; }
body.client-ui .nav-label-secondary { margin-top:22px!important; }
body.client-ui #projectControlLabel { margin-bottom:18px!important; }
body.client-ui .sidebar .nav-item { font-weight:600!important; }
body.client-ui .sidebar .nav-workflow-items .nav-item { min-height:42px!important; }
body.client-ui .sidebar .nav-workflow-items .nav-item.active { background:var(--lf-blue-bg)!important; color:var(--lf-accent)!important; border-color:#b8cfff!important; }

body.client-ui .project-overview,
body.client-ui .projects-page,
body.client-ui .source-panel,
body.client-ui .complexes-panel,
body.client-ui .layouts-panel,
body.client-ui .publish-panel,
body.client-ui .feeds-panel,
body.client-ui .validator-panel,
body.client-ui .strategy-panel,
body.client-ui .support-page,
body.client-ui .billing-page { max-width:1240px!important; margin-inline:auto!important; }
body.client-ui .projects-page { border-radius:24px!important; overflow:hidden!important; }
/* One type scale for operational screens: title → section → supporting copy. */
body.client-ui :is(.overview-heading,.projects-heading,.support-page-heading,.strategy-heading,.change-log-head,.bulk-head) { align-items:center!important; gap:24px!important; }
body.client-ui :is(.overview-heading h1,.projects-heading h1) { margin:0!important; font-size:32px!important; line-height:38px!important; font-weight:700!important; letter-spacing:-.65px!important; }
body.client-ui :is(.overview-heading p,.projects-heading p) { max-width:64ch!important; margin:8px 0 0!important; }
body.client-ui .overview-heading { margin-bottom:20px!important; }
body.client-ui .overview-card-head h2 { margin:0!important; color:var(--lf-text)!important; font-size:20px!important; line-height:26px!important; font-weight:700!important; letter-spacing:-.25px!important; }
body.client-ui .overview-card,
body.client-ui .overview-metric { border-color:var(--lf-line)!important; background:var(--lf-surface)!important; box-shadow:var(--lf-shadow)!important; }
body.client-ui .overview-published-list { display:grid!important; gap:10px!important; }
body.client-ui .overview-published-row { min-height:78px!important; padding:16px 18px!important; border:1px solid var(--lf-line)!important; border-radius:10px!important; background:var(--lf-surface-2)!important; }
body.client-ui .overview-published-row:hover { border-color:#9ab8e3!important; background:var(--lf-blue-bg)!important; }
body.client-ui .overview-published-row strong { color:var(--lf-text)!important; font-size:15px!important; }
body.client-ui .overview-published-row span,
body.client-ui .overview-published-row small { color:var(--lf-muted)!important; }
body.client-ui .overview-published-row .text-button { color:var(--lf-accent)!important; font-weight:700!important; }
body.client-ui .overview-published-row { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(260px,auto)!important; gap:16px!important; }
body.client-ui .overview-feed-main { display:grid!important; gap:3px!important; min-width:0!important; }
body.client-ui .overview-feed-platform { display:flex!important; align-items:center!important; gap:8px!important; }
body.client-ui .overview-feed-platform > span:last-child { min-width:0; }
body.client-ui .overview-feed-actions { display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-end!important; gap:6px!important; }
body.client-ui .overview-feed-health.has-error { color:var(--lf-red)!important; }
body.client-ui .overview-feed-health.is-ok { color:var(--lf-green)!important; }
body.client-ui .overview-feed-actions .danger { color:var(--lf-red)!important; }
/* The overview is a feed switcher, not a second stepper. Keep the workflow
   in the project navigation and reserve this surface for feed actions. */
body.client-ui .project-overview :is(.overview-grid,.overview-metrics) { display:none!important; }
body.client-ui .overview-published .overview-card-head { align-items:center!important; }
body.client-ui .overview-published .overview-card-head > div { min-width:0; }
body.client-ui .overview-published-row { align-items:center!important; }
body.client-ui .overview-published-row > div:first-child { min-width:0; }
body.client-ui .overview-published-row .overview-feed-status { display:inline-flex; margin-left:8px; padding:3px 8px; border:1px solid transparent; border-radius:999px; background:var(--lf-surface-2); color:var(--lf-muted); font-size:11px; font-weight:700; line-height:1.2; }
body.client-ui .overview-published-row .overview-feed-status.is-published { background:var(--lf-green-bg); border-color:#b9e8cd; color:var(--lf-green); }
body.client-ui .overview-published-row .overview-feed-status.is-draft { background:var(--lf-surface-2); color:var(--lf-muted); }
body.client-ui .overview-published-row .text-button { min-height:36px; padding:8px 12px; border:1px solid var(--lf-line); border-radius:7px; background:var(--lf-surface); white-space:nowrap; }
body.client-ui .overview-published-row .text-button:hover { border-color:var(--lf-accent); background:var(--lf-blue-bg); }
@media (max-width:760px) {
  body.client-ui .overview-published .overview-card-head { display:grid!important; gap:12px!important; }
  body.client-ui .overview-published-row { align-items:flex-start!important; grid-template-columns:1fr!important; gap:12px!important; }
  body.client-ui .overview-feed-actions { justify-content:flex-start!important; }
  body.client-ui .overview-feed-actions .text-button,
  body.client-ui .overview-feed-actions .primary { flex:1 1 auto; }
}

/* Overview hierarchy: one obvious entry point per feed and no competing
   low-contrast inline actions. */
body.client-ui .overview-published { margin-top:14px!important; }
body.client-ui .overview-published .overview-card-head { padding-bottom:4px!important; }
body.client-ui .overview-published .overview-card-head h2 { margin-top:0!important; }
body.client-ui .overview-published .overview-card-head .panel-caption { margin:8px 0 0!important; }
body.client-ui .overview-published-row { min-height:84px!important; }
body.client-ui .overview-published-row > div:first-child strong { display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:4px!important; line-height:1.35!important; }
body.client-ui .overview-published-row .text-button { color:var(--lf-accent)!important; font-size:13px!important; font-weight:700!important; }
body.client-ui .overview-published-row .overview-feed-actions .text-button.danger { color:var(--lf-red)!important; }
body.client-ui .overview-published-row .text-button:focus-visible,
body.client-ui .overview-published .primary:focus-visible { outline:3px solid rgba(4,68,252,.25)!important; outline-offset:3px!important; }
body.client-ui .traffic-policy-toolbar { display:grid!important; grid-template-columns:minmax(240px,.85fr) minmax(360px,1.5fr) auto!important; align-items:start!important; gap:16px!important; }
body.client-ui .traffic-policy-toolbar .field { min-width:0!important; display:grid!important; align-content:start!important; gap:6px!important; }
body.client-ui .traffic-policy-toolbar .field>label { min-height:20px!important; line-height:20px!important; margin:0!important; }
body.client-ui .traffic-policy-toolbar .field select { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:48px!important; min-height:48px!important; padding:0 14px!important; line-height:1.2!important; }
body.client-ui .traffic-policy-toolbar .field-hint { display:block!important; min-height:18px!important; margin-top:7px!important; }
body.client-ui .traffic-policy-save { align-self:start!important; margin-top:26px!important; min-width:192px!important; min-height:48px!important; height:48px!important; white-space:nowrap!important; }
@media (max-width:980px) {
  body.client-ui .traffic-policy-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; }
  body.client-ui .traffic-policy-toolbar .traffic-policy-save { grid-column:1/-1!important; justify-self:start!important; }
}
@media (max-width:620px) {
  body.client-ui .traffic-policy-toolbar { grid-template-columns:1fr!important; gap:12px!important; }
  body.client-ui .traffic-policy-toolbar .traffic-policy-save { grid-column:auto!important; width:100%!important; }
}
body.client-ui .workflow-save-bar { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:16px!important; margin:0 auto 18px!important; max-width:1240px!important; padding:12px 16px!important; border:1px solid #cfe0f8!important; border-radius:10px!important; background:var(--lf-blue-bg)!important; }
body.client-ui .workflow-save-bar[hidden] { display:none!important; }
body.client-ui .workflow-save-copy { display:grid; gap:2px; min-width:0; }
body.client-ui .workflow-save-copy strong { color:var(--lf-text)!important; font-size:13px!important; font-weight:750!important; }
body.client-ui .workflow-save-copy span { color:var(--lf-muted)!important; font-size:12px!important; line-height:1.35!important; }
body.client-ui .workflow-save-bar .primary { min-height:38px!important; padding:8px 14px!important; white-space:nowrap!important; }
body.client-ui[data-theme="dark"] .workflow-save-bar { border-color:#285486!important; background:var(--lf-blue-bg)!important; }
@media (max-width:760px) {
  body.client-ui .workflow-save-bar { align-items:stretch!important; flex-direction:column!important; margin-bottom:14px!important; }
  body.client-ui .workflow-save-bar .primary { width:100%!important; }
}
body.client-ui .overview-published-empty { display:grid!important; gap:6px!important; align-items:start!important; color:var(--lf-muted)!important; }
body.client-ui .overview-published-empty strong { color:var(--lf-text)!important; font-size:15px!important; }

body.client-ui .source-panel .panel-caption,
body.client-ui .strategy-panel .panel-caption,
body.client-ui .feeds-panel .panel-caption,
body.client-ui .validator-panel .panel-caption,
body.client-ui .layouts-panel>.panel-caption,
body.client-ui .publish-panel>.panel-caption { max-width:78ch!important; }
body.client-ui .source-grid,
body.client-ui .object-filter-panel,
body.client-ui .publish-row,
body.client-ui .feeds-toolbar,
body.client-ui .validator-toolbar,
body.client-ui .strategy-controls { border-radius:10px!important; }
body.client-ui .source-grid { gap:14px!important; }
body.client-ui .source-grid .field label,
body.client-ui .publish-row .field label { margin-bottom:7px!important; }
body.client-ui .publish-row { grid-template-columns:minmax(0,1.25fr) minmax(220px,.85fr) auto auto auto!important; align-items:end!important; }
body.client-ui .publish-row button { min-height:42px!important; white-space:nowrap!important; }
body.client-ui .generated-field { margin-top:18px!important; }
body.client-ui .generated-link { border:1px solid var(--lf-line)!important; background:var(--lf-surface-2)!important; color:var(--lf-muted)!important; border-radius:10px!important; }

body.client-ui .project-toolbar { grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(145px,.7fr))!important; }
body.client-ui .project-toolbar :is(input,select) { min-height:42px!important; }
body.client-ui .project-table th { height:46px!important; font-size:11px!important; letter-spacing:.06em!important; text-transform:uppercase!important; }
body.client-ui .project-table td { height:68px!important; }
body.client-ui .bulk-panel #applyBulkBtn { align-self:start!important; margin-top:26px!important; min-height:48px!important; height:48px!important; }
body.client-ui .project-name-link strong { font-size:14px!important; }
body.client-ui .project-name-link small { color:var(--lf-muted)!important; }

body.client-ui .editor { background:var(--lf-surface)!important; border-left:1px solid var(--lf-line)!important; }
body.client-ui .editor-head { padding:18px 22px!important; border-bottom:1px solid var(--lf-line)!important; background:var(--lf-surface-2)!important; }
body.client-ui .editor-section-nav { padding:10px 18px!important; gap:6px!important; border-bottom:1px solid var(--lf-line)!important; background:var(--lf-surface)!important; }
body.client-ui .editor-section-nav button { border-radius:7px!important; font-size:12px!important; font-weight:700!important; }
body.client-ui .editor-section-nav button.active { background:var(--lf-blue-bg)!important; }
body.client-ui .editor-empty { margin:22px!important; border:1px dashed var(--lf-line-strong)!important; border-radius:10px!important; background:var(--lf-surface-2)!important; color:var(--lf-muted)!important; }

body.client-ui .auth-screen { background:var(--lf-bg)!important; }
body.client-ui .auth-card { border:1px solid var(--lf-line)!important; border-radius:18px!important; background:var(--lf-surface)!important; box-shadow:0 20px 54px rgba(17,56,94,.1)!important; }
body.client-ui .auth-card h1 { color:var(--lf-text)!important; font-size:36px!important; letter-spacing:-.8px!important; }
body.client-ui .auth-description { color:var(--lf-muted)!important; }
body.client-ui .auth-switch { border-color:var(--lf-line)!important; background:var(--lf-surface-2)!important; }
body.client-ui .auth-switch button.active { background:var(--lf-accent)!important; color:#fff!important; }
body.client-ui .auth-submit { min-height:48px!important; font-size:15px!important; }

@media(max-width:980px) {
  body.client-ui .project-toolbar { grid-template-columns:1fr 1fr!important; }
  body.client-ui .publish-row { grid-template-columns:1fr 1fr!important; }
  body.client-ui .publish-row .field { min-width:0!important; }
  body.client-ui .publish-row button { width:100%!important; }
}

@media(max-width:760px) {
  body.client-ui .projects-heading h1 { font-size:28px!important; line-height:34px!important; }
  body.client-ui .projects-heading p { max-width:none!important; font-size:14px!important; }
  body.client-ui .project-table { min-width:0!important; table-layout:fixed!important; width:100%!important; }
  body.client-ui .project-table th:nth-child(3),
  body.client-ui .project-table td:nth-child(3),
  body.client-ui .project-table th:nth-child(4),
  body.client-ui .project-table td:nth-child(4),
  body.client-ui .project-table th:nth-child(6),
  body.client-ui .project-table td:nth-child(6) { display:none!important; }
  body.client-ui .project-table th:nth-child(2), body.client-ui .project-table td:nth-child(2) { width:52%; }
  body.client-ui .project-table th:nth-child(5), body.client-ui .project-table td:nth-child(5) { width:30%; }
  body.client-ui .project-table th:nth-child(7), body.client-ui .project-table td:nth-child(7) { width:18%; }
  body.client-ui .project-table td { white-space:normal!important; overflow-wrap:anywhere!important; }
  body.client-ui :is(.overview-heading,.projects-heading,.support-page-heading,.strategy-heading) { align-items:flex-start!important; flex-direction:column!important; }
  body.client-ui :is(.overview-heading h1,.projects-heading h1) { font-size:28px!important; line-height:34px!important; }
  body.client-ui .project-toolbar { grid-template-columns:1fr!important; }
  body.client-ui .publish-row { grid-template-columns:1fr!important; }
  body.client-ui .auth-card { width:min(100% - 24px,460px)!important; padding:26px!important; }
}

/* The project dashboard has a more specific desktop table rule in the
   dashboard theme. Repeat the mobile override at the same specificity so the
   responsive table can actually collapse after desktop columns are hidden. */
@media(max-width:760px) {
  body.client-ui .project-list-mode .project-table-wrap { overflow:visible!important; }
  body.client-ui .project-list-mode .project-table {
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  body.client-ui .project-list-mode .project-table :is(th,td) {
    /* A zero max-width collapses table cells to their padding on narrow
       viewports, making headings and statuses unreadable. Let the explicit
       responsive column widths control the layout instead. */
    max-width:none!important;
    overflow:hidden!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
  body.client-ui .project-list-mode .project-table th:nth-child(1),
  body.client-ui .project-list-mode .project-table td:nth-child(1) { width:38px!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(2),
  body.client-ui .project-list-mode .project-table td:nth-child(2) { width:38%!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(5),
  body.client-ui .project-list-mode .project-table td:nth-child(5) { width:34%!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(7),
  body.client-ui .project-list-mode .project-table td:nth-child(7) { width:28%!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(5),
  body.client-ui .project-list-mode .project-table th:nth-child(7) { font-size:0!important; line-height:14px!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(5)::after { content:"Статус"; font-size:10px; }
  body.client-ui .project-list-mode .project-table th:nth-child(7)::after { content:"Действия"; font-size:10px; }
  body.client-ui .project-list-mode .project-status {
    max-width:100%!important;
    padding:4px 6px!important;
    gap:4px!important;
    font-size:10px!important;
    line-height:14px!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.client-ui .project-list-mode .project-table th:nth-child(1),
  body.client-ui .project-list-mode .project-table td:nth-child(1) { width:30px!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(2),
  body.client-ui .project-list-mode .project-table td:nth-child(2) { width:33%!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(5),
  body.client-ui .project-list-mode .project-table td:nth-child(5) { width:40%!important; }
  body.client-ui .project-list-mode .project-table th:nth-child(7),
  body.client-ui .project-list-mode .project-table td:nth-child(7) { width:27%!important; }
  body.client-ui .project-list-mode .project-actions-cell { width:auto!important; white-space:normal!important; }
  body.client-ui .project-list-mode .project-row-action { width:30px!important; height:30px!important; margin-right:2px!important; }
  body.client-ui .project-list-mode .project-row-action svg { width:15px!important; height:15px!important; }
  body.client-ui .project-list-mode .project-row-menu summary { width:30px!important; height:30px!important; }
}

@media(prefers-reduced-motion:reduce) {
  body.client-ui *, body.client-ui *::before, body.client-ui *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* Fixed desktop workspace
   -----------------------
   The client console is an operating workspace, not a mobile-first content
   page. Keep its navigation, work area and editor panels in one stable frame
   at every viewport width. Narrow windows can scroll the workspace as a whole
   instead of silently reordering controls into a different interface. */
body.client-ui {
  min-width:1000px!important;
  overflow-x:auto!important;
}
body.client-ui .app,
body.client-ui .app.project-list-mode,
body.client-ui .app.feeds-mode,
body.client-ui .app.layouts-mode,
body.client-ui .app.validator-mode {
  display:grid!important;
  width:100%!important;
  min-width:1000px!important;
  min-height:100dvh!important;
  height:100dvh!important;
  overflow:hidden!important;
}
body.client-ui .app {
  grid-template-columns:278px minmax(0,1fr) 390px!important;
}
body.client-ui .app.feeds-mode,
body.client-ui .app.layouts-mode,
body.client-ui .app.validator-mode,
body.client-ui .app.project-list-mode {
  grid-template-columns:278px minmax(0,1fr)!important;
}
body.client-ui .sidebar {
  position:relative!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:0!important;
  padding:24px 16px!important;
  transform:none!important;
  transition:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-shadow:none!important;
}
body.client-ui .app.nav-open .sidebar,
body.client-ui .sidebar.open { transform:none!important; }
body.client-ui .topbar {
  left:278px!important;
  right:0!important;
  min-width:722px!important;
  width:auto!important;
}
body.client-ui .mobile-menu-toggle { display:none!important; }
body.client-ui .main {
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  min-height:100dvh!important;
  height:100dvh!important;
  overflow:auto!important;
}

/* The layout editor keeps its preview and inspector side by side as well. */
body.client-ui #layoutsPanel .layout-branding {
  grid-template-columns:minmax(0,1fr) 280px!important;
}
body.client-ui #layoutsPanel .brand-preview {
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:440px!important;
}
body.client-ui #layoutsPanel .le-properties {
  grid-column:2!important;
  grid-row:2/4!important;
  min-width:0!important;
}

/* The save action follows the active page in normal document flow, so it
   cannot cover form controls or the plan canvas at shorter screen heights. */
body.client-ui .main:has(#workflowSaveBar:not([hidden])) {
  padding-bottom:24px!important;
}
body.client-ui .workflow-save-bar {
  position:relative!important;
  z-index:1!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:1240px!important;
  margin:24px auto 0!important;
  padding:12px 24px!important;
  border:1px solid #cfe0f8!important;
  border-radius:10px!important;
  background:var(--lf-blue-bg)!important;
  box-shadow:none!important;
}
body.client-ui .workflow-save-bar .primary {
  min-height:42px!important;
  padding:9px 16px!important;
}

/* The projects index already represents the global project scope. A second
   "Все проекты" selector in the topbar only repeats that context. */
body.client-ui .app.project-list-mode .topbar-project-picker,
body.client-ui .app.project-list-mode #workspaceSwitcher {
  display:none!important;
}

/* Keep form/tool rows stable too; the legacy mobile rules must not turn the
   fixed workspace into a second, stacked interface on narrow windows. */
body.client-ui .monitor-add {
  grid-template-columns:minmax(220px,1fr) auto!important;
}
body.client-ui .monitor-notification-settings {
  grid-template-columns:auto minmax(180px,.7fr) auto minmax(220px,1fr)!important;
}
body.client-ui .monitor-notification-settings :is(h3,p,#saveMonitorNotifications) {
  grid-column:1/-1!important;
}
body.client-ui .project-toolbar {
  grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(145px,.7fr))!important;
}
body.client-ui .project-list-mode .project-toolbar {
  grid-template-columns:minmax(220px,1fr) minmax(145px,.32fr) minmax(145px,.34fr) minmax(145px,.32fr)!important;
}
body.client-ui .publish-row {
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto auto auto!important;
}
body.client-ui .source-grid {
  grid-template-columns:minmax(260px,1fr) auto auto auto!important;
}
body.client-ui .traffic-policy-toolbar {
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr) auto!important;
}

/* Release hardening: auth/landing are mutually exclusive with the workspace,
   and the mobile shell must not inherit the fixed desktop frame above. */
body.client-ui.auth-active #appShell,
body.client-ui.landing-active #appShell { display:none!important; }
/* `.app` has an !important display rule for the workspace frame, so the
   native [hidden] attribute needs an explicit override in public/auth modes. */
body.client-ui.auth-active #appShell[hidden],
body.client-ui.landing-active #appShell[hidden] { display:none!important; }
body.client-ui.auth-active .topbar,
body.client-ui.landing-active .topbar { display:none!important; }
body.client-ui #themeToggle { display:none!important; }
@media (max-width:760px) {
  body.client-ui { min-width:0!important; overflow-x:hidden!important; }
  body.client-ui .app,
  body.client-ui .app.project-list-mode,
  body.client-ui .app.feeds-mode,
  body.client-ui .app.layouts-mode,
  body.client-ui .app.validator-mode { display:block!important; width:100%!important; min-width:0!important; height:auto!important; min-height:100dvh!important; overflow:visible!important; }
  body.client-ui .sidebar { position:fixed!important; z-index:100!important; top:0!important; left:0!important; width:278px!important; height:100dvh!important; transform:translateX(-102%)!important; overflow-y:auto!important; box-shadow:20px 0 50px rgba(17,56,94,.2)!important; }
  body.client-ui .app.nav-open .sidebar,
  body.client-ui .sidebar.open { transform:none!important; }
  body.client-ui .topbar { position:sticky!important; z-index:30!important; top:0!important; left:0!important; right:0!important; width:100%!important; min-width:0!important; height:60px!important; min-height:60px!important; padding:0 14px!important; }
  body.client-ui .mobile-menu-toggle { display:grid!important; place-items:center!important; }
  body.client-ui .main { display:block!important; width:100%!important; min-width:0!important; min-height:calc(100dvh - 60px)!important; height:auto!important; padding:76px 14px 28px!important; overflow:visible!important; }
  body.client-ui .workflow-save-bar { left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; padding:10px!important; }
  body.client-ui .workflow-save-bar .primary { width:100%!important; }
  body.client-ui #layoutsPanel .layout-branding { display:block!important; }
  body.client-ui #layoutsPanel .brand-preview,
  body.client-ui #layoutsPanel .brand-source-panel,
  body.client-ui #layoutsPanel .le-properties { width:100%!important; min-width:0!important; max-width:100%!important; margin:0 0 14px!important; }
}

/* Keep the plan workspace inside the available editor column. The source
   image can be much larger than the viewport; its intrinsic size must never
   push it underneath the inspector or create a second horizontal page. */
body.client-ui #layoutsPanel,
body.client-ui #layoutsPanel .layout-branding,
body.client-ui #layoutsPanel .brand-preview,
body.client-ui #layoutsPanel .le-stage {
  min-width:0!important;
  max-width:100%!important;
}
body.client-ui #layoutsPanel .brand-preview {
  overflow:hidden!important;
}
body.client-ui #layoutsPanel .le-stage {
  overflow:auto!important;
  min-height:280px!important;
  max-height:calc(100dvh - 250px)!important;
}
body.client-ui #layoutsPanel #brandPreviewCanvas {
  display:block!important;
  height:auto!important;
}
body.client-ui #layoutsPanel #brandPreviewCanvas.le-fit-mode {
  max-width:100%!important;
  max-height:100%!important;
}

/* On compact desktop windows give the canvas the full work-column width and
   place the inspector below it instead of squeezing the plan into a sliver. */
@media (max-width:1280px) {
  body.client-ui #layoutsPanel .layout-branding {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.client-ui #layoutsPanel .brand-preview,
  body.client-ui #layoutsPanel .brand-source-panel,
  body.client-ui #layoutsPanel .le-properties {
    grid-column:1!important;
  }
  body.client-ui #layoutsPanel .brand-preview { grid-row:2!important; }
  body.client-ui #layoutsPanel .le-properties { grid-row:3!important; }
  body.client-ui #layoutsPanel .brand-source-panel { grid-row:4!important; }
}

/* Empty workflow states are the only content shown until a feed is selected.
   Keep this rule after the shared `.field` alignment rules: otherwise the
   generated-link field on the publication screen can become visible again
   while the page is still in its empty state. */
body.client-ui .requires-feed-selection > :not(.workflow-feed-empty) {
  display:none!important;
}
body.client-ui .main .requires-feed-selection > :not(.workflow-feed-empty) {
  display:none!important;
}
body.client-ui .requires-feed-selection > .workflow-feed-empty {
  display:grid!important;
}

/* Use the actual work-column width, not the browser viewport, when the
   persistent editor occupies the right side of the workspace. At 1280–1550
   px the main column is narrower than the viewport and a four-column filter
   grid would otherwise render underneath the editor. */
body.client-ui .main {
  container-type:inline-size;
  container-name:lf-main;
}
@container lf-main (max-width:900px) {
  body.client-ui .object-filter-panel {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:"search search" "status rooms" "issue issue" "price price" "area area"!important;
    gap:16px!important;
  }
  body.client-ui .object-filter-panel .field:nth-child(1){grid-area:search!important}
  body.client-ui .object-filter-panel .field:nth-child(2){grid-area:status!important}
  body.client-ui .object-filter-panel .field:nth-child(3){grid-area:rooms!important}
  body.client-ui .object-filter-panel .field:nth-child(4){grid-area:price!important}
  body.client-ui .object-filter-panel .field:nth-child(5){grid-area:area!important}
  body.client-ui .object-filter-panel .field:nth-child(6){grid-area:issue!important}
}
@container lf-main (max-width:520px) {
  body.client-ui .object-filter-panel {
    grid-template-columns:1fr!important;
    grid-template-areas:"search" "status" "rooms" "issue" "price" "area"!important;
    gap:14px!important;
  }
  body.client-ui .object-filter-panel .range-filter-row {
    grid-template-columns:34px minmax(0,1fr) 118px!important;
    gap:8px!important;
  }
}

/* The same available-width rule applies to secondary toolbars below the
   apartments table. Their legacy minimum columns were wider than the editor
   work column and pushed the last control underneath the inspector. */
@container lf-main (max-width:900px) {
  body.client-ui .bulk-panel {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.client-ui .bulk-panel .bulk-head,
  body.client-ui .bulk-panel .bulk-value-field,
  body.client-ui .bulk-panel #applyBulkBtn {
    grid-column:1/-1!important;
  }
  body.client-ui .bulk-panel #applyBulkBtn {
    width:100%!important;
    margin-top:0!important;
  }
  body.client-ui .source-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.client-ui .source-grid .field:first-child,
  body.client-ui .source-grid .field:nth-child(2) {
    grid-column:1/-1!important;
  }
  body.client-ui .source-grid > button { width:100%!important; }
  body.client-ui .publish-row {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;
  }
  body.client-ui .publish-row .field,
  body.client-ui .publish-row button { min-width:0!important; width:100%!important; }
  body.client-ui .monitor-add,
  body.client-ui .validator-toolbar { grid-template-columns:1fr!important; }
  body.client-ui .monitor-add button,
  body.client-ui .validator-toolbar button { width:100%!important; }
  body.client-ui .monitor-notification-settings {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.client-ui .monitor-notification-settings :is(h3,p,#saveMonitorNotifications) { grid-column:1/-1!important; }
  body.client-ui #saveMonitorNotifications { width:100%!important; }
  body.client-ui .traffic-policy-toolbar { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body.client-ui .traffic-policy-toolbar .traffic-policy-save { grid-column:1/-1!important; width:100%!important; }
}
@container lf-main (max-width:520px) {
  body.client-ui .bulk-panel,
  body.client-ui .source-grid,
  body.client-ui .publish-row,
  body.client-ui .monitor-notification-settings,
  body.client-ui .traffic-policy-toolbar { grid-template-columns:1fr!important; }
  body.client-ui .source-grid > .field,
  body.client-ui .publish-row > .field,
  body.client-ui .publish-row > button { grid-column:auto!important; }
}

/* Mobile keeps the save action in the document flow and bounds the compact
   error summary to the viewport. */
@media (max-width:760px) {
  body.client-ui .app:not(.feeds-mode):not(.layouts-mode):not(.validator-mode):not(.project-list-mode) .workflow-save-bar {
    left:auto!important;
    right:auto!important;
    width:100%!important;
  }
  body.client-ui .feed-error-popover {
    right:14px!important;
    bottom:14px!important;
    width:min(360px,calc(100vw - 28px))!important;
  }
}

/* Canonical interaction layer
   ---------------------------
   Keep these small, explicit rules last in the cascade. Older product
   themes are still loaded for compatibility, but all client-facing actions
   and form rhythm should resolve to one predictable visual language. */
:root { --lf-ease-out:cubic-bezier(.23,1,.32,1); }

body.client-ui :is(
  button.primary,
  .button.primary,
  #newProjectBtn,
  .project-pagination button.active,
  #loadUrlBtn,
  #generateLinkBtn,
  #applyBulkBtn
) {
  color:#fff!important;
}

body.client-ui .auth-card h1 {
  margin:0 0 12px!important;
}
body.client-ui .auth-card .auth-description {
  margin:0 0 30px!important;
  line-height:22px!important;
}
body.client-ui .auth-card .lf-brand-lockup {
  margin:0 0 26px!important;
}
body.client-ui .auth-fields {
  display:grid!important;
  gap:18px!important;
}
body.client-ui .auth-fields > .field:not([hidden]) {
  display:grid!important;
  align-content:start!important;
  gap:8px!important;
}
body.client-ui.auth-active .auth-fields > .field[hidden],
body.client-ui.auth-active #legalConsentField[hidden],
body.client-ui.auth-active #authSwitch[hidden],
body.client-ui.auth-active #forgotPasswordLink[hidden] {
  display:none!important;
}
body.client-ui .auth-fields > .field > label {
  margin:0!important;
  line-height:20px!important;
}
body.client-ui .auth-fields > .field > :is(input,select,textarea) {
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  line-height:22px!important;
}
body.client-ui .auth-forgot-link {
  margin:0!important;
  min-height:24px!important;
  line-height:20px!important;
}
body.client-ui #legalConsentField {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px!important;
  margin-top:2px!important;
}
body.client-ui #legalConsentField > label {
  min-width:0!important;
  line-height:18px!important;
}
body.client-ui #legalConsentField input[type="checkbox"] {
  width:18px!important;
  height:18px!important;
  min-height:18px!important;
  margin-top:1px!important;
  flex:0 0 18px!important;
  accent-color:var(--lf-accent)!important;
}

body.client-ui .main .field,
body.client-ui .main .auth-fields .field {
  align-content:start!important;
}
body.client-ui .main .field > label,
body.client-ui .object-filter-panel .field > label {
  margin:0 0 2px!important;
  line-height:20px!important;
}
body.client-ui .main .field :is(input,select,textarea) {
  margin:0!important;
}
body.client-ui button[aria-busy="true"]::after {
  border-color:#fff!important;
  border-right-color:transparent!important;
}

@keyframes lf-surface-in {
  from { opacity:.01; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
body.client-ui.auth-active .auth-card,
body.client-ui .projects-page,
body.client-ui .source-panel,
body.client-ui .feeds-panel,
body.client-ui .validator-panel,
body.client-ui .complexes-panel,
body.client-ui .layouts-panel,
body.client-ui .publish-panel,
body.client-ui .support-page,
body.client-ui .billing-page,
body.client-ui .change-log-panel {
  animation:lf-surface-in 220ms var(--lf-ease-out) both;
}

@media (hover:hover) and (pointer:fine) {
  body.client-ui :is(
    button.primary,
    .button.primary,
    #newProjectBtn,
    #loadUrlBtn,
    #generateLinkBtn,
    #applyBulkBtn
  ):not(:disabled) {
    transition:transform 160ms var(--lf-ease-out),background-color 160ms ease,
      border-color 160ms ease,color 160ms ease,box-shadow 160ms ease!important;
  }
  body.client-ui :is(
    button.primary,
    .button.primary,
    #newProjectBtn,
    #loadUrlBtn,
    #generateLinkBtn,
    #applyBulkBtn
  ):not(:disabled):hover {
    transform:translateY(-1px);
  }
  body.client-ui :is(
    button.primary,
    .button.primary,
    #newProjectBtn,
    #loadUrlBtn,
    #generateLinkBtn,
    #applyBulkBtn
  ):not(:disabled):active {
    transform:translateY(0);
  }
}

@media (max-width:560px) {
  body.client-ui #legalConsentField { grid-template-columns:1fr!important; }
  body.client-ui .auth-card { padding:24px!important; }
  body.client-ui .auth-card h1 { font-size:30px!important; }
}

/* The project filters are intentionally stacked on phones. The older
   project-list selector has higher specificity than the base mobile rule,
   so repeat it here to prevent clipped selects at narrow widths. */
@media (max-width:760px) {
  body.client-ui .project-list-mode .project-toolbar {
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.client-ui .project-list-mode .project-toolbar .project-search {
    grid-column:auto!important;
  }
  body.client-ui .project-list-mode .project-toolbar :is(.project-search,select) {
    width:100%!important;
    min-width:0!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.client-ui.auth-active .auth-card,
  body.client-ui .projects-page,
  body.client-ui .source-panel,
  body.client-ui .feeds-panel,
  body.client-ui .validator-panel,
  body.client-ui .complexes-panel,
  body.client-ui .layouts-panel,
  body.client-ui .publish-panel,
  body.client-ui .support-page,
  body.client-ui .billing-page,
  body.client-ui .change-log-panel,
  body.client-ui :is(button.primary,.button.primary,#newProjectBtn,#loadUrlBtn,#generateLinkBtn,#applyBulkBtn) {
    animation:none!important;
    transform:none!important;
  }
}