/*
 * Cycle Context brand layer for the internal content operations platform.
 * The existing information architecture and component behavior stay intact;
 * this file owns brand tokens, readability and cross-module visual semantics.
 */

:root {
  --ink: #20384e;
  --muted: #64788b;
  --line: #d7e1e8;
  --paper: #f3f6f8;
  --surface: #ffffff;
  --surface-soft: #edf3f6;
  --accent: #527da3;
  --accent-strong: #416b91;
  --accent-soft: #eaf1f6;
  --dark: #17324d;
  --success: #2f7f78;
  --success-soft: #e8f2f0;
  --warning: #b97838;
  --warning-soft: #fbf2e8;
  --danger: #a65f4f;
  --danger-soft: #f8eeec;
  --radius: 10px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% -8%, rgba(82, 125, 163, 0.11), transparent 26rem),
    linear-gradient(180deg, #edf3f6 0, #f6f8fa 20rem, var(--paper) 100%);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button[aria-pressed] {
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

button[aria-pressed="false"]:hover {
  border-color: #9bb4c8;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Brand header */
.global-header {
  min-height: 72px;
  height: 72px;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) auto;
  gap: 18px;
  background: rgba(23, 50, 77, 0.985);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.14);
}

.brand {
  min-width: 0;
  gap: 11px;
  font-size: inherit;
}

.brand-logo {
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
}

.brand-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-identity > strong {
  overflow: hidden;
  color: #f7f9fb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-identity > strong > span {
  font-weight: 400;
}

.brand-identity > small {
  color: #aebfcd;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
}

.global-header nav {
  min-width: 0;
  align-items: center;
  gap: clamp(3px, 0.42vw, 8px);
}

.nav-link {
  height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  color: #bdcbd6;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
}

.nav-link:hover {
  color: #ffffff;
  border-color: rgba(143, 176, 204, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.nav-link.active {
  color: #ffffff;
  border-color: rgba(143, 176, 204, 0.14);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: none;
}

.command {
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.08);
  color: #c4d0da;
  font-size: 11px;
}

.command kbd {
  background: rgba(255, 255, 255, 0.12);
  color: #edf3f7;
}

.notice {
  background: var(--warning);
  font-size: 11px;
}

.user {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

/* Core surfaces and controls */
.panel {
  border-color: var(--line);
  box-shadow: 0 8px 26px rgba(23, 50, 77, 0.045);
}

.primary {
  border-color: var(--accent-strong);
  background: var(--accent);
  box-shadow: 0 2px 0 #365d80;
}

.primary:hover {
  background: var(--accent-strong);
}

.ghost {
  border-color: var(--line);
  color: #35536d;
}

.text-btn,
.module-heading button,
.draft-pane header button,
.asset-section button,
.version-section button {
  color: var(--accent-strong);
}

input,
select,
textarea {
  color: var(--ink);
  border-color: var(--line);
  background: #fbfcfd;
}

input::placeholder,
textarea::placeholder {
  color: #7a8d9e;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.pipeline-search:focus-within,
.approval-search:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(82, 125, 163, 0.17) !important;
}

/* Unified form controls */
body .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .page-view select,
body .page-view textarea,
body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body dialog select,
body dialog textarea {
  box-sizing: border-box;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #c8d5de;
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(23, 50, 77, 0.035);
  font-size: 12px;
  line-height: 1.4;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

body .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .page-view select,
body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body dialog select {
  height: 38px;
  padding: 0 12px;
}

body .page-view select,
body dialog select {
  padding-right: 32px;
  cursor: pointer;
  color-scheme: light;
}

body .page-view textarea,
body dialog textarea {
  padding: 10px 12px;
}

body .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
body .page-view select:hover,
body .page-view textarea:hover,
body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
body dialog select:hover,
body dialog textarea:hover {
  border-color: #9eb3c3;
}

body .page-view input::placeholder,
body .page-view textarea::placeholder,
body dialog input::placeholder,
body dialog textarea::placeholder {
  color: #607588;
}

body .page-view input:disabled,
body .page-view select:disabled,
body .page-view textarea:disabled,
body dialog input:disabled,
body dialog select:disabled,
body dialog textarea:disabled {
  cursor: not-allowed;
  border-color: #d9e2e8;
  background: #eef3f6;
  color: #788b9a;
}

body .page-view input[type="checkbox"],
body dialog input[type="checkbox"] {
  display: inline-grid;
  flex: 0 0 17px;
  place-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #9eb0bd;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

body .page-view input[type="checkbox"]::after,
body dialog input[type="checkbox"]::after {
  width: 8px;
  height: 4px;
  content: "";
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.7);
}

body .page-view input[type="checkbox"]:checked,
body dialog input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}

body .page-view input[type="checkbox"]:checked::after,
body dialog input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

body .page-view input[type="checkbox"]:focus-visible,
body dialog input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(82, 125, 163, 0.2);
}

body .page-view input[type="checkbox"]:disabled,
body dialog input[type="checkbox"]:disabled {
  border-color: #cbd6dd;
  background: #e8eef2;
  cursor: not-allowed;
}

/* Keep search fields embedded in their own control shell. */
body .page-view .pipeline-search input,
body .page-view .approval-search input {
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  padding: 0;
}

.pipeline-search,
.approval-search {
  min-height: 40px;
  border-color: #c8d5de !important;
  border-radius: 8px;
  background: #ffffff !important;
}

/* The content title remains an editorial field, not a boxed control. */
body .workshop-page .editor-fields input {
  height: auto;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 0 10px;
  font-size: 20px;
}

body .workshop-page .editor-fields input:focus {
  border-bottom-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Search is always one control: the label stays accessible, the hint lives in placeholder. */
.pipeline-search,
.approval-search,
.finance-search,
.draft-search,
.global-search-field {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.pipeline-search:focus-within,
.approval-search:focus-within,
.finance-search:focus-within,
.draft-search:focus-within,
.global-search-field:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pipeline-search > span,
.approval-search > span,
.finance-search > span,
.draft-search > span,
.global-search-field > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body .page-view .pipeline-search input[type="search"],
body .page-view .approval-search input[type="search"],
body .page-view .finance-search input[type="search"],
body .page-view .draft-search input[type="search"],
body dialog .global-search-field input[type="search"] {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  border: 1px solid #c8d5de !important;
  border-radius: 8px;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(23, 50, 77, 0.035) !important;
  padding: 0 12px;
  color: var(--ink);
  font-size: 12px !important;
}

body .page-view .pipeline-search input[type="search"]:focus,
body .page-view .approval-search input[type="search"]:focus,
body .page-view .finance-search input[type="search"]:focus,
body .page-view .draft-search input[type="search"]:focus,
body dialog .global-search-field input[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(82, 125, 163, 0.17) !important;
}

/* Readability: dense workspace, not miniature typography */
.page-intro h1,
.system-intro h1,
.workshop-intro h1,
.module-intro h1,
.access-intro h1,
.intel-intro h1,
.automation-intro h1 {
  color: var(--ink);
  font-size: 27px;
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.page-intro p,
.system-intro p,
.workshop-intro p,
.module-intro p,
.access-intro p,
.intel-intro p,
.automation-intro p {
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.5;
}

.page-intro h1 span,
.system-intro > div > span,
.workshop-intro > div > span,
.module-intro > div > span,
.access-intro > div > span,
.intel-intro > div > span,
.automation-intro > div > span {
  color: #587084 !important;
  font-size: 13px !important;
  line-height: 1.6;
}

/* One page-header system shared by every first-level workspace */
.app-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  margin-bottom: 16px;
}

.app-page-intro .page-intro-copy {
  min-width: 0;
}

.app-page-intro .page-intro-copy > p {
  margin: 0 0 4px;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.35;
}

.app-page-intro .page-intro-copy > h1 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.app-page-intro .page-intro-summary {
  display: block;
  margin-top: 3px;
  color: #587084 !important;
  font-size: 12px !important;
  line-height: 1.45;
}

.app-page-intro .page-intro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  margin: 0;
}

.app-page-intro .page-intro-actions button {
  min-height: 38px;
}

.app-page-intro .page-intro-actions button span {
  margin-left: 8px;
}

/* Desktop module headers read as one continuous toolbar, not two distant islands */
.app-page-intro:not(.dashboard-intro) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 42px;
}

.app-page-intro:not(.dashboard-intro) .page-intro-copy {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-page-intro:not(.dashboard-intro) .page-intro-copy > p {
  flex: 0 0 auto;
  margin: 0;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.app-page-intro:not(.dashboard-intro) .page-intro-copy > h1 {
  flex: 0 0 auto;
  font-size: 18px;
  white-space: nowrap;
}

.app-page-intro:not(.dashboard-intro) .page-intro-summary {
  flex: 0 1 auto;
  max-width: min(38vw, 520px);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-page-intro:not(.dashboard-intro) .page-intro-actions {
  flex: 0 0 auto;
  justify-self: end;
  margin-left: 0;
}

/* Dashboard: compact context toolbar instead of a billboard-style greeting */
.dashboard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  margin-bottom: 16px;
}

.dashboard-intro-copy {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
}

.dashboard-intro #dashboardDate {
  flex: 0 0 auto;
  margin: 0;
  padding-right: 16px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

.dashboard-intro-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 12px;
}

.dashboard-intro #dashboardGreeting {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.dashboard-intro #dashboardWorkSummary {
  color: #587084;
  font-size: 12px !important;
  line-height: 1.5;
  white-space: nowrap;
}

.dashboard-intro .intro-actions {
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
}

.dashboard-intro .intro-actions button {
  min-height: 38px;
}

.panel h2,
.panel-head h2,
.system-section-head h2,
.finance-section-head h2,
.access-section-head h2,
.module-heading h2,
.publish-grid h2,
.draft-pane h2,
.preview-pane h2 {
  color: var(--ink);
  font-size: 15.5px !important;
  line-height: 1.35;
}

.panel h3,
.content-card h3,
.signal-card h3,
.channel-preview h3,
.conversion-form h3,
.lead-directory h3 {
  color: var(--ink);
  font-size: 13.5px !important;
  line-height: 1.5;
}

.panel p,
.panel-head p,
.system-section-head p,
.finance-section-head p,
.access-section-head p,
.signal-card p,
.content-card > p,
.timeline-item p {
  color: #5f7487 !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}

.panel small,
.panel time,
.panel em,
.panel label,
.panel legend,
.panel code,
.panel output,
.panel .signal-meta,
.panel .signal-data,
.panel .card-footer,
.panel .preview-meta,
.panel .preview-disclosure {
  font-size: 11px !important;
  line-height: 1.45;
}

.panel button,
.panel input,
.panel select,
.panel textarea,
.system-dialog button,
.system-dialog input,
.system-dialog select,
.system-dialog textarea {
  font-size: 12px !important;
  line-height: 1.4;
}

.page-view small,
.page-view time,
.page-view em {
  font-size: 11.5px !important;
  line-height: 1.45;
}

.flow-summary small,
.flow-summary span,
.flow-stage i,
.flow-stage span small,
.flow-stage em,
.signal-data span,
.pipeline-search span,
.kanban-head span,
.reviewer b,
.pipeline-scroll-note,
.channel-grid b,
.channel-grid small,
.performance-title small,
.performance-title span,
.performance-stat small,
.performance-stat span,
.sync-state,
.legend,
.table-head,
.table-footer {
  font-size: 11.5px !important;
  line-height: 1.45;
}

.pipeline-scroll-note {
  color: var(--muted) !important;
}

.provenance-badge {
  font-size: 11px !important;
  line-height: 1.3;
}

.video-preview > span {
  font-size: 11px !important;
}

.system-empty,
.draft-empty,
.approval-empty,
.plan-empty,
.intel-no-data {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.6;
}

/* Content workshop readability */
.workshop-page .draft-item span,
.workshop-page .editor-statusbar small,
.workshop-page .editor-fields label > span,
.workshop-page .body-editor > span,
.workshop-page .editor-toolbar span,
.workshop-page .editor-footer,
.workshop-page .editor-footer > span,
.workshop-page .workshop-mobile-tabs button,
.workshop-page .asset-empty,
.workshop-page .version-item,
.workshop-page .version-item b,
.workshop-page .version-item span,
.publish-page .publish-builder label > span,
.publish-page .publish-builder legend,
.publish-page .execute-option,
.publish-page .approval-search > span,
.publish-page .approval-item small,
.publish-page .approval-version,
.publish-page .approval-actions button,
.publish-page .plan-item small,
.publish-page .plan-item span,
.publish-page .plan-status,
.publish-page .plan-item footer button {
  font-size: 11.5px !important;
  line-height: 1.5;
}

.workshop-page .draft-item strong,
.workshop-page .editor-statusbar strong,
.workshop-page .preview-brand b,
.workshop-page .asset-section h3,
.workshop-page .version-section h3 {
  font-size: 11px !important;
}

.workshop-page .preview-body {
  color: #344d63;
  font-size: 11.5px !important;
  line-height: 1.85;
}

.publish-page .publish-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.publish-page .publish-channel-option {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 60px;
  margin: 0;
  padding: 10px;
  border: 1px solid #ccd8e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.publish-page .publish-channel-option:hover {
  border-color: #94aec1;
  background: #f8fbfd;
}

.publish-page .publish-channel-option:active {
  transform: translateY(1px);
}

.publish-page .publish-channel-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.publish-page .publish-channel-option:has(input:focus-visible) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(82, 125, 163, 0.17);
}

.publish-page .publish-channel-option > .platform {
  grid-column: 1;
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.publish-page .publish-channel-option > input {
  grid-column: 3;
  grid-row: 1;
}

.publish-page .publish-channel-copy {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
}

.publish-page .publish-channel-copy b,
.publish-page .publish-channel-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-page .publish-channel-copy b {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}

.publish-page .publish-channel-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.publish-page .publish-channel-option.is-unavailable {
  border-style: dashed;
  background: #f5f8fa;
  cursor: not-allowed;
}

.publish-page .publish-channel-option.is-unavailable:hover,
.publish-page .publish-channel-option.is-unavailable:active {
  border-color: #ccd8e1;
  background: #f5f8fa;
  transform: none;
}

.publish-page .publish-channel-option.is-unavailable > .platform {
  filter: saturate(0.25);
  opacity: 0.62;
}

.publish-page .execute-option {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.publish-page .execute-option input {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px;
  padding: 0;
  margin-top: 2px;
}

.publish-page .execute-option span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Channel intelligence readability and brand calibration */
.intelligence-page .intel-kpis span,
.intelligence-page .intel-section-head p,
.intelligence-page .account-row,
.intelligence-page .account-name small,
.intelligence-page .radar-feature div,
.intelligence-page .topic-list small,
.intelligence-page .topic-list em,
.intelligence-page .owned-heading p,
.intelligence-page .owned-tabs button,
.intelligence-page .matrix-head,
.intelligence-page .matrix-row,
.intelligence-page .inbox-summary span,
.intelligence-page .comment-row b,
.intelligence-page .comment-row small,
.intelligence-page .comment-row time,
.intelligence-page .intel-subnav small,
.intelligence-page .account-manager-head p,
.intelligence-page .account-manager-head > div > span,
.intelligence-page .account-search-form label,
.intelligence-page .account-search-note,
.intelligence-page .account-search-result > span,
.intelligence-page .account-channel-tabs button,
.intelligence-page .monitoring-target-main small,
.intelligence-page .monitoring-target-main em,
.intelligence-page .monitoring-target-metrics small,
.intelligence-page .monitoring-target-controls,
.intelligence-page .account-detail-status,
.intelligence-page .account-work-head span,
.intelligence-page .account-work small,
.intelligence-page .account-work span,
.intelligence-page .account-work em {
  font-size: 11.5px !important;
  line-height: 1.45;
}

.intelligence-page .account-name b,
.intelligence-page .topic-list b,
.intelligence-page .monitoring-target-main b,
.intelligence-page .account-work strong {
  font-size: 11px !important;
}

.intelligence-page .rank-kpi strong,
.intelligence-page .radar-feature small {
  color: #9fc0da !important;
}

.intelligence-page .radar-feature::after {
  border-color: rgba(82, 125, 163, 0.38) !important;
}

.intelligence-page .account-row.own-account,
.automation-page .execution-row:hover,
.automation-page .execution-row.active {
  border-color: #c4d5e2 !important;
  background: #f2f7fa !important;
}

.intelligence-page .legend span::before {
  background: #8fb0cc !important;
}

.intelligence-page .legend span:last-child::before {
  background: #d7e1e8 !important;
}

/* Browser automation readability and status semantics */
.automation-page .runtime-strip small,
.automation-page .runtime-strip span,
.automation-page .automation-section-head p,
.automation-page .flow-health,
.automation-page .browser-chain span,
.automation-page .execution-head,
.automation-page .execution-row,
.automation-page .execution-row .account-name small,
.automation-page .execution-row > span:nth-child(4) small,
.automation-page .mode,
.automation-page .session,
.automation-page .run-id,
.automation-page .evidence-shot > span,
.automation-page .evidence-meta small,
.automation-page .evidence-meta strong,
.automation-page .evidence-log span,
.automation-page .evidence-action,
.automation-page .run-filters button,
.automation-page .run-table-head,
.automation-page .run-table-row,
.automation-page .run-table-row button {
  font-size: 11.5px !important;
  line-height: 1.45;
}

.automation-page .browser-chain b,
.automation-page .execution-row .account-name b {
  font-size: 11px !important;
}

.automation-page .runtime-strip > div:first-child small,
.automation-page .runtime-strip > div:first-child span {
  color: #dce9f2 !important;
}

.automation-page .runtime-strip .runtime-alert strong {
  color: #e0b27c !important;
}

.automation-page .mode.browser {
  color: #355f82 !important;
  background: var(--accent-soft) !important;
}

.automation-page .session.warning {
  color: #88511f !important;
  background: var(--warning-soft) !important;
}

.panel strong,
.panel b {
  text-rendering: geometricPrecision;
}

.type-line small,
.type-line time,
.reviewer small,
.channel-grid small,
.timeline-item div small,
.performance-stat small,
.performance-stat span {
  color: #64798b !important;
}

.content-card h3,
.timeline-item div strong,
.account-name b,
.execution-row b,
.monitoring-target-card h3,
.performance-row b {
  font-size: 12.5px !important;
}

.panel-head p,
.draft-pane header small,
.preview-pane header small,
.publish-grid header small {
  margin-top: 5px;
}

/* Brand color semantics */
.flow-strip,
.module-side-summary,
.radar-feature,
.topic-kpis > div:first-child,
.review-kpis > div:first-child,
.access-kpis > div:first-child,
.intel-kpis .rank-kpi,
.module-kpis > div:first-child {
  background: var(--dark) !important;
}

.flow-summary {
  background: var(--accent) !important;
}

.flow-summary span {
  color: #dce9f2 !important;
}

.flow-stage {
  border-color: rgba(255, 255, 255, 0.12);
}

.flow-stage:hover,
.flow-stage.active {
  background: rgba(82, 125, 163, 0.22);
}

.flow-stage i {
  color: #b8cad8;
  border-color: rgba(255, 255, 255, 0.22);
}

.flow-stage span small,
.flow-stage em {
  color: #aebfcd;
}

.signal-card.selected,
.draft-item:hover,
.draft-item.active,
.role-row.active,
.monitoring-target-card:hover,
.monitoring-target-card.active,
.performance-row:hover,
.dashboard-hotspot:hover {
  border-color: #bfd1df !important;
  background: #f3f8fb !important;
}

.signal-card.selected::before,
.rendering span,
.owned-tabs button.active,
.access-tabs button.active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.signal-meta .priority,
.session.warning,
.plan-status.partial,
.plan-status.ready,
.timeline-task .plan-status.partial,
.timeline-task .plan-status.ready {
  color: #88511f !important;
  background: var(--warning-soft) !important;
}

.signal-data .rise,
.metric-up,
.session.healthy,
.plan-status.succeeded,
.member-status,
.log-outcome.succeeded,
.official-auth-head em.active,
.performance-title b {
  color: #246b65 !important;
}

.session.healthy,
.plan-status.succeeded,
.member-status,
.log-outcome.succeeded,
.official-auth-head em.active {
  background: var(--success-soft) !important;
}

.danger,
.danger-action,
.login-error,
.log-outcome.denied,
.official-auth-head em.error {
  color: var(--danger) !important;
}

.danger-action {
  color: #ffffff !important;
  border-color: #8d4b40 !important;
  background: var(--danger) !important;
  box-shadow: none;
}

.review-card {
  border-color: #b9cddd !important;
}

.confirmPublish,
.approval-queue .approval-actions .approve {
  color: #355f82 !important;
  border-color: #b8cddd !important;
  background: var(--accent-soft) !important;
}

.timeline-item.next > span {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(82, 125, 163, 0.17) !important;
}

.timeline-item.done > span {
  border-color: var(--success) !important;
  background: var(--success) !important;
}

.timeline-item.next div small,
.text-btn,
.draft-pane header button,
.account-detail-header > a,
.topic-list em,
.signal-action,
.task-item em,
.search-result em {
  color: var(--accent-strong) !important;
}

.video-preview {
  background: var(--dark);
}

.video-preview::after {
  border-color: rgba(82, 125, 163, 0.76) !important;
}

.video-preview i,
.insight-btn span {
  color: #9fc0da !important;
}

.sparkline i:nth-last-child(-n + 2) {
  background: #7d9fbb !important;
}

.preview-body h2 {
  border-left-color: var(--accent);
}

.preview-brand-mark {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.dialog-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.dialog-brand img {
  display: block;
  flex: 0 0 auto;
}

.dialog-brand small,
.dialog-brand h2 {
  display: block;
}

.dialog-brand small {
  color: var(--accent-strong) !important;
  font-size: 11px !important;
}

.dialog-brand h2 {
  margin: 3px 0 0;
}

dialog {
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(23, 50, 77, 0.28);
}

dialog header small,
dialog footer > span,
dialog label,
dialog p,
dialog time,
dialog em {
  font-size: 11px !important;
  line-height: 1.55;
}

dialog button,
dialog input,
dialog select,
dialog textarea {
  font-size: 12px !important;
}

.login-dialog {
  border-top-color: var(--accent);
}

.login-dialog form > p {
  color: var(--muted);
  font-size: 12px !important;
}

.login-hint {
  color: var(--muted);
  font-size: 11px !important;
}

.toast {
  background: var(--dark);
  border-left-color: var(--accent);
  font-size: 12px;
}

@media (max-width: 1240px) {
  .global-header {
    grid-template-columns: minmax(210px, 245px) minmax(0, 1fr) auto;
    padding-inline: 18px;
  }

  .global-header nav {
    gap: 8px;
  }

  .nav-link {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .brand-identity > small {
    display: none;
  }

  .dashboard-intro-title {
    display: block;
  }

  .dashboard-intro #dashboardWorkSummary {
    display: block;
    margin-top: 3px;
  }
}

@media (min-width: 801px) and (max-width: 1150px) {
  .app-page-intro:not(.dashboard-intro) .page-intro-summary {
    display: none;
  }
}

@media (max-width: 800px) {
  .global-header {
    min-height: 62px;
    height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 15px;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .brand-identity > strong {
    font-size: 13px;
  }

  .brand-identity > small {
    display: block;
    font-size: 11px;
  }

  main {
    padding: 20px 14px 92px;
  }

  .dashboard-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    margin-bottom: 14px;
  }

  .dashboard-intro-copy {
    display: block;
  }

  .dashboard-intro #dashboardDate {
    display: block;
    margin-bottom: 5px;
    padding-right: 0;
    border-right: 0;
  }

  .dashboard-intro #dashboardGreeting {
    font-size: 18px;
  }

  .dashboard-intro #dashboardWorkSummary {
    margin-top: 3px;
    font-size: 11.5px !important;
    white-space: normal;
  }

  .dashboard-intro .intro-actions {
    margin-top: 0;
  }

  body .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body .page-view select,
  body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body dialog select {
    min-height: 42px;
    height: 42px;
    font-size: 12px !important;
  }

  body .workshop-page .editor-fields input {
    height: auto;
    min-height: 44px;
    font-size: 18px !important;
  }

  .publish-page .publish-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publish-page .publish-channel-option {
    min-height: 64px;
    padding: 10px 9px;
  }

  .page-intro h1,
  .system-intro h1,
  .workshop-intro h1,
  .module-intro h1,
  .access-intro h1,
  .intel-intro h1,
  .automation-intro h1 {
    font-size: 22px;
  }

  .app-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    margin-bottom: 14px;
  }

  .app-page-intro:not(.dashboard-intro) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .app-page-intro:not(.dashboard-intro) .page-intro-copy {
    display: block;
  }

  .app-page-intro:not(.dashboard-intro) .page-intro-copy > p {
    margin-bottom: 4px;
    padding-right: 0;
    border-right: 0;
    white-space: normal;
  }

  .app-page-intro:not(.dashboard-intro) .page-intro-copy > h1 {
    white-space: normal;
  }

  .app-page-intro .page-intro-copy > p {
    margin-bottom: 4px;
    font-size: 10.5px !important;
  }

  .app-page-intro .page-intro-copy > h1 {
    font-size: 18px;
    line-height: 1.3;
  }

  .app-page-intro:not(.dashboard-intro) .page-intro-summary {
    display: none;
  }

  .app-page-intro .page-intro-actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }

  .app-page-intro .page-intro-actions > button:not(:last-child) {
    display: none;
  }

  .app-page-intro .page-intro-actions button {
    width: auto;
    min-height: 36px;
    padding: 8px 11px;
    font-size: 11px !important;
  }

  .app-page-intro .page-intro-actions button span {
    margin-left: 5px;
  }

  .panel p,
  .panel small,
  .panel time,
  .panel em,
  .panel label,
  .panel button,
  .panel input,
  .panel select,
  .panel textarea {
    font-size: 11.5px !important;
  }

  .mobile-bottom-nav button span,
  .mobile-menu-grid small {
    font-size: 11px !important;
  }

  .mobile-bottom-nav button b,
  .mobile-menu-grid > button > b {
    background: var(--accent-soft);
    color: var(--accent-strong);
  }

  .mobile-bottom-nav button.active b {
    color: #ffffff;
    background: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}