.governance-topbar { gap: 24px; }
.governance-topbar .brand { flex: 0 0 auto; }
.governance-topbar .brand-logo-plate { width: 104px; }
.primary-nav { align-self: stretch; display: flex; align-items: center; gap: 4px; margin-right: auto; }
.primary-nav a { height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 720; text-decoration: none; white-space: nowrap; }
.primary-nav a:hover { color: var(--ink); background: var(--muted-surface); }
.primary-nav a.active { color: var(--jade-dark); background: var(--jade-soft); }
.primary-nav a > span { font-size: 15px; }
.header-search { height: 38px; min-width: 245px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: var(--surface); }
.header-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; }
.inline-role-form .select-input { min-width: 105px; padding-block: 7px; }
.nav-count { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--coral); color: #fff; font-size: 9px; }
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary strong, .user-menu summary small { display: block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu summary strong { font-size: 10px; }
.user-menu summary small { color: var(--ink-soft); font-size: 9px; text-transform: capitalize; }
.user-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--segment-active); color: var(--segment-active-text); font-size: 12px; font-weight: 800; }
.user-popover { position: absolute; top: calc(100% + 15px); right: 0; z-index: 21; min-width: 220px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.user-popover > span { display: block; margin-bottom: 10px; color: var(--ink-soft); font-size: 11px; }
.user-popover button { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted-surface); cursor: pointer; font-weight: 700; }
.flash-stack { position: fixed; top: 84px; right: 22px; z-index: 30; width: min(390px, calc(100vw - 32px)); }
.flash { margin-bottom: 8px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: 12px; }
.flash.error { border-color: rgba(164,63,55,.35); background: var(--error-surface); color: var(--danger); }
.flash.success { border-color: rgba(13,112,92,.28); background: var(--jade-soft); color: var(--jade-dark); }

.governance-page { max-width: 1680px; min-height: calc(100vh - 74px); margin: 0 auto; padding: 32px clamp(22px, 3vw, 48px) 60px; }
.module-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.module-heading h1 { margin: 4px 0 4px; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.module-heading p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.module-heading-actions { display: flex; align-items: center; gap: 10px; }
.scope-switch { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; cursor: pointer; }
.data-card, .selector-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 32px rgba(19,43,45,.06); }
.email-board { display: grid; grid-template-columns: 235px 270px minmax(560px, 1fr); gap: 14px; align-items: start; }
.selector-card { min-height: 650px; padding: 14px; overflow: hidden; }
.selector-card > header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.selector-card > header strong, .selector-card > header small { display: block; }
.selector-card > header strong { font-size: 13px; }
.selector-card > header small { margin-top: 1px; color: var(--ink-soft); font-size: 9px; }
.step-number { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--jade-soft); color: var(--jade-dark); font-size: 10px; font-weight: 800; }
.selector-card > .text-input { height: 36px; margin-bottom: 10px; font-size: 11px; }
.selector-list { max-height: 562px; overflow: auto; scrollbar-width: thin; }
.selector-item { width: 100%; min-height: 54px; padding: 9px 8px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--row-line); background: transparent; text-align: left; cursor: pointer; }
.selector-item:hover { background: var(--muted-surface); }
.selector-item.active { border-radius: 9px; background: var(--jade-soft); box-shadow: inset 3px 0 var(--jade); }
.selector-item strong, .selector-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-item strong { font-size: 11px; }
.selector-item small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.selector-item > span:last-child { color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.selector-empty, .table-empty { padding: 34px 12px; color: var(--ink-soft); font-size: 11px; text-align: center; }
.template-content { min-height: 650px; overflow: hidden; }
.template-toolbar, .list-toolbar { min-height: 74px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.template-toolbar h2, .list-toolbar h2 { margin: 2px 0 0; font-size: 18px; }
.breadcrumb { color: var(--ink-soft); font-size: 9px; }
.table-search { width: min(330px, 42%); height: 36px; font-size: 11px; }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--muted-surface-2); }
.metric-strip > div { padding: 13px 16px; border-right: 1px solid var(--line); }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span, .metric-strip strong { display: block; }
.metric-strip span { color: var(--ink-soft); font-size: 9px; }
.metric-strip strong { margin-top: 3px; font-size: 18px; }
.unresolved-alert { margin: 12px 14px 0; padding: 10px 12px; border: 1px solid rgba(229,111,81,.35); border-radius: 9px; background: var(--amber-soft); color: var(--notice-ink); font-size: 10px; }
.table-wrap { width: 100%; overflow: auto; }
.governance-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.governance-table th { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: var(--muted-surface-2); font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.governance-table td { padding: 11px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
.governance-table tbody tr { transition: background .12s; }
.governance-table tbody tr:hover { background: var(--muted-surface-2); }
.governance-table td strong, .governance-table td small { display: block; }
.governance-table td strong { font-size: 10px; }
.governance-table td small { margin-top: 2px; color: var(--ink-soft); font-size: 8px; }
.status-pill, .role-pill, .priority-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 99px; background: var(--pill-surface); font-size: 8px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status-pill.good { background: var(--jade-soft); color: var(--jade-dark); }
.status-pill.open { background: var(--amber-soft); color: var(--notice-ink); }
.status-pill.done { background: var(--jade-soft); color: var(--jade-dark); }
.status-pill.no_changes_required { background: var(--pill-surface); color: var(--ink-soft); }
.status-pill.muted { color: var(--ink-soft); }
.priority-pill.critical, .priority-pill.high { background: var(--error-surface); color: var(--danger); }
.priority-pill.medium { background: var(--amber-soft); color: var(--notice-ink); }
.table-action { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--jade-dark); font-size: 8px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.table-action:hover { border-color: var(--jade); background: var(--jade-soft); }
.action-cluster { display: flex; gap: 4px; }
.muted-copy { color: var(--ink-soft); font-size: 9px; }
.match-field.with-action { grid-template-columns: minmax(180px,.9fr) minmax(220px,1.3fr) auto; align-items: center; }

.modal-dialog { width: min(1160px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 17px; background: transparent; color: var(--ink); box-shadow: 0 35px 100px rgba(0,0,0,.32); }
.modal-dialog::backdrop { background: rgba(13,20,28,.66); backdrop-filter: blur(3px); }
.dialog-card { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); overflow: hidden; }
.dialog-card > header { min-height: 74px; padding: 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.dialog-card > header h2 { margin: 3px 0 0; font-size: 18px; }
.dialog-card > header p { margin: 3px 0 0; color: var(--ink-soft); font-size: 10px; }
.dialog-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font-size: 22px; cursor: pointer; }
.dialog-close:hover { background: var(--muted-surface); color: var(--ink); }
.dialog-card > footer { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.preview-layout { min-height: 610px; display: grid; grid-template-columns: 235px minmax(0,1fr); }
.preview-meta { padding: 18px; border-right: 1px solid var(--line); background: var(--muted-surface-2); }
.meta-group { margin-bottom: 18px; }
.meta-group > strong { display: block; margin-bottom: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.meta-row { margin-bottom: 9px; }
.meta-row span, .meta-row b { display: block; }
.meta-row span { color: var(--ink-soft); font-size: 8px; }
.meta-row b { margin-top: 2px; font-size: 10px; overflow-wrap: anywhere; }
.variable-chip { display: inline-flex; margin: 2px 2px 2px 0; padding: 4px 6px; border-radius: 6px; background: var(--pill-surface); color: var(--ink-soft); font-family: monospace; font-size: 8px; }
.preview-stage { min-width: 0; padding: 14px; background: var(--muted-surface); }
.preview-controls { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-controls > div { display: flex; align-items: center; gap: 6px; }
.email-frame-shell { min-height: 526px; padding: 18px; display: flex; justify-content: center; overflow: auto; border-radius: 10px; background: #edf0f3; transition: padding .2s; }
.email-frame-shell iframe { width: 100%; min-height: 490px; border: 1px solid #dce1e7; background: #fff; box-shadow: 0 8px 30px rgba(20,31,45,.08); }
.email-frame-shell.mobile iframe { width: 390px; }
.email-frame-shell pre { width: 100%; margin: 0; padding: 18px; overflow: auto; background: #10161d; color: #d5e0ec; font: 11px/1.55 ui-monospace, monospace; white-space: pre-wrap; }
.usage-panel { max-height: 526px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.usage-panel > header { padding: 13px; border-bottom: 1px solid var(--line); }
.usage-row { padding: 11px 13px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; border-bottom: 1px solid var(--row-line); font-size: 10px; }
.usage-row span { color: var(--ink-soft); }
.test-email-form { max-width: 480px; margin: 80px auto; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.test-email-form label, .test-email-form small { display: block; }
.test-email-form .text-input { margin: 6px 0 12px; }
.test-email-form small { margin-top: 10px; color: var(--ink-soft); }
.compact-dialog { width: min(680px, calc(100vw - 32px)); }
.qc-form { padding-bottom: 0; }
.form-grid { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid label { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.form-grid .text-input, .form-grid .select-input { margin-top: 5px; }
.form-grid textarea { resize: vertical; }
.span-2 { grid-column: 1 / -1; }

.qc-metrics { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qc-metrics button { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; }
.qc-metrics button:hover, .qc-metrics button.active { border-color: var(--jade); background: var(--jade-soft); }
.qc-metrics span { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.qc-metrics strong { font-size: 22px; }
.qc-list-card { overflow: hidden; }
.list-toolbar > div { display: flex; align-items: center; gap: 9px; }
.list-toolbar h2 { margin: 0; }
.list-toolbar span { color: var(--ink-soft); font-size: 9px; }
.list-toolbar .select-input { width: 170px; height: 36px; font-size: 10px; }
.qc-title-button { padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.qc-title-button:hover strong { color: var(--jade); text-decoration: underline; }
.detail-drawer { position: fixed; inset: 0; z-index: 40; visibility: hidden; pointer-events: none; }
.detail-drawer.open { visibility: visible; pointer-events: auto; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(13,20,28,.48); opacity: 0; transition: opacity .2s; }
.detail-drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; width: min(620px, 100vw); height: 100%; display: flex; flex-direction: column; background: var(--surface); box-shadow: -20px 0 70px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .24s ease; }
.detail-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel > header { min-height: 82px; padding: 17px 20px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.drawer-panel > header h2 { margin: 4px 0 0; font-size: 19px; }
.drawer-scroll { padding: 18px 20px 40px; overflow: auto; }
.query-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.summary-tile { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--muted-surface-2); }
.summary-tile span, .summary-tile strong { display: block; }
.summary-tile span { color: var(--ink-soft); font-size: 8px; }
.summary-tile strong { margin-top: 3px; font-size: 10px; overflow-wrap: anywhere; }
.drawer-section { margin-top: 22px; }
.drawer-section h3 { margin: 0 0 9px; font-size: 12px; }
.drawer-section > p { margin: 0; color: var(--ink-soft); font-size: 11px; white-space: pre-wrap; }
.comment-stream, .history-stream { display: grid; gap: 8px; }
.comment { padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--muted-surface-2); }
.comment header { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 8px; }
.comment header strong { color: var(--ink); font-size: 9px; }
.comment p { margin: 6px 0 0; font-size: 10px; white-space: pre-wrap; }
.comment-form { margin-top: 9px; display: grid; justify-items: end; gap: 7px; }
.comment-form textarea { width: 100%; resize: vertical; }
.resolution-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 7px; }
.history-stream { margin-top: 12px; }
.history-item { padding-left: 12px; border-left: 2px solid var(--line-strong); color: var(--ink-soft); font-size: 9px; }
.history-item strong { color: var(--ink); }

.users-page { max-width: 1250px; }
.users-page .data-card { overflow: hidden; }
.user-dialog { width: min(760px, calc(100vw - 32px)); }
.user-add-form { gap: 0; }
.user-add-form > header { padding: 22px 26px; }
.user-add-form > footer { padding: 18px 26px; }
.hrms-user-picker { margin: 0; padding: 22px 26px; display: grid; gap: 14px; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--muted-surface-2) 78%, var(--surface)); }
.hrms-user-picker label { font-size: 12px; color: var(--ink); }
.hrms-user-picker .text-input { margin-top: 8px; height: 46px; padding-inline: 14px; border-radius: 13px; font-size: 13px; }
.hrms-dropdown { max-height: 340px; overflow: auto; display: grid; gap: 8px; padding: 4px; }
.hrms-option { width: 100%; padding: 11px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.hrms-option:hover, .hrms-option.selected { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 7%, var(--surface)); }
.hrms-option strong { display: block; font-size: 13px; color: var(--ink); }
.hrms-option small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.hrms-loading { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-soft); font-size: 12px; text-align: center; }
.hrms-loading.error { color: var(--coral); }
.hrms-user-card { min-height: 78px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); }
.hrms-user-card strong { display: block; font-size: 13px; color: var(--ink); }
.hrms-user-card small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.hrms-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--jade)); color: #fff; font-weight: 800; font-size: 12px; object-fit: cover; }
.auth-page { min-height: 100vh; background: #eef2f8; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(350px, .75fr) minmax(500px, 1.25fr); }
.auth-brand-panel { padding: clamp(34px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: radial-gradient(circle at 15% 85%, rgba(88,80,236,.35), transparent 23rem), linear-gradient(145deg,#09172c,#132a52); color: #fff; }
.auth-brand-panel > img { width: 145px; padding: 7px 10px; border-radius: 10px; background: #fff; }
.auth-product-mark { display: inline-flex; margin-bottom: 25px; color: #afaaff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-brand-panel h1 { margin: 0; font-family: Georgia,serif; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.auth-brand-panel p { max-width: 500px; margin: 24px 0 0; color: #bfcae0; font-size: 14px; }
.auth-brand-panel > small { color: #8e9cb8; }
.auth-form-panel { padding: 30px; display: grid; place-items: center; background: #fff; }
.auth-form-card { width: min(430px, 100%); color: #172033; }
.auth-form-card h2 { margin: 6px 0 5px; font-family: Georgia,serif; font-size: 34px; letter-spacing: -.03em; }
.auth-form-card > p { margin: 0 0 25px; color: #697386; font-size: 12px; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { color: #445067; font-size: 10px; font-weight: 700; }
.auth-form label .text-input, .auth-form label .select-input { width: 100%; margin-top: 6px; }
.auth-form label small { display: block; margin-top: 3px; color: #7d8798; font-weight: 400; }
.auth-form > .button { width: 100%; height: 43px; margin-top: 4px; }
.google-login-button { width: 100%; height: 44px; margin: 18px 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #d8deea; border-radius: 12px; background: #fff; color: #172033; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(23,32,51,.07); }
.google-login-button[hidden] { display: none !important; }
.google-login-button:hover { border-color: #b7c1d4; background: #f8fafc; }
.google-mark { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 999px; background: conic-gradient(from -45deg,#4285f4,#34a853,#fbbc05,#ea4335,#4285f4); color: #fff; font-size: 13px; font-weight: 950; }
.google-only-note { margin: 8px 0 0; color: #697386; font-size: 12px; line-height: 1.55; }
.google-only-note.error { color: var(--coral); }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; color: #7d8798; font-size: 11px; font-weight: 800; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e4e9f2; }
.simple-state { min-height: calc(100vh - 74px); display: grid; place-items: center; text-align: center; }
.error-code { color: var(--coral); font-size: 70px; font-weight: 900; }

html[data-design="aurora"] .data-card, html[data-design="aurora"] .selector-card { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(18px); }
html[data-design="aurora"] .email-board { grid-template-columns: 260px 300px minmax(540px, 1fr); gap: 18px; }
html[data-design="aurora"] .selector-card, html[data-design="aurora"] .template-content { border-radius: 24px; }
html[data-design="editorial"] .email-board { grid-template-columns: minmax(270px, .8fr) minmax(330px, 1fr); }
html[data-design="editorial"] .template-content { grid-column: 1 / -1; min-height: 480px; }
html[data-design="editorial"] .selector-card { min-height: 300px; }
html[data-design="editorial"] .selector-list { max-height: 220px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
html[data-design="inspector"] .email-board { grid-template-columns: minmax(560px, 1fr) 330px; grid-template-areas: "templates company" "templates workflow"; }
html[data-design="inspector"] .company-selector { grid-area: company; }
html[data-design="inspector"] .workflow-selector { grid-area: workflow; }
html[data-design="inspector"] .template-content { grid-area: templates; min-height: 720px; }
html[data-design="inspector"] .selector-card { min-height: 350px; }
html[data-design="inspector"] .selector-list { max-height: 270px; }
html[data-design="inspector"] .qc-page { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 14px; }
html[data-design="inspector"] .qc-page .module-heading, html[data-design="inspector"] .qc-list-card { grid-column: 1; }
html[data-design="inspector"] .qc-metrics { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; align-content: start; padding-top: 96px; }

@media (max-width: 1280px) {
    .governance-topbar .product-name, .index-control #index-status { display: none; }
    .email-board, html[data-design="aurora"] .email-board { grid-template-columns: 215px 235px minmax(500px,1fr); }
    .primary-nav a { padding-inline: 9px; }
}
@media (max-width: 1050px) {
    .governance-topbar { height: auto; min-height: 74px; flex-wrap: wrap; padding-block: 8px; }
    .primary-nav { order: 3; width: 100%; height: 38px; overflow-x: auto; }
    .header-search { display: none; }
    .governance-page { min-height: calc(100vh - 120px); }
    .email-board, html[data-design="aurora"] .email-board, html[data-design="inspector"] .email-board { grid-template-columns: 1fr 1fr; grid-template-areas: "company workflow" "templates templates"; }
    .company-selector { grid-area: company !important; }
    .workflow-selector { grid-area: workflow !important; }
    .template-content { grid-area: templates !important; }
    .selector-card { min-height: 330px !important; }
    .selector-list { max-height: 245px !important; }
    .preview-layout { grid-template-columns: 200px minmax(0,1fr); }
    html[data-design="inspector"] .qc-page { display: block; }
    html[data-design="inspector"] .qc-metrics { padding-top: 0; grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 760px) {
    .governance-topbar .brand-logo-plate { width: 92px; }
    .governance-topbar .appearance-control, .governance-topbar .theme-button { display: none; }
    .user-menu summary > span:last-child { display: none; }
    .governance-page { padding: 24px 14px 50px; }
    .module-heading { align-items: flex-start; flex-direction: column; }
    .email-board, html[data-design="editorial"] .email-board, html[data-design="aurora"] .email-board, html[data-design="inspector"] .email-board { display: block; }
    .selector-card, .template-content { margin-bottom: 12px; }
    html[data-design="editorial"] .selector-list { display: block; }
    .metric-strip { grid-template-columns: repeat(2,1fr); }
    .metric-strip > div:nth-child(2) { border-right: 0; }
    .template-toolbar, .list-toolbar { align-items: stretch; flex-direction: column; }
    .table-search { width: 100%; }
    .preview-layout { display: block; }
    .preview-meta { max-height: 200px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .preview-controls { align-items: stretch; flex-direction: column; }
    .preview-controls > div { flex-wrap: wrap; }
    .email-frame-shell.mobile iframe { width: 100%; }
    .qc-metrics { grid-template-columns: repeat(2,1fr); }
    .list-toolbar > div { align-items: stretch; flex-direction: column; }
    .list-toolbar .select-input { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .resolution-form { grid-template-columns: 1fr; }
    .auth-shell { display: block; }
    .auth-brand-panel { min-height: 260px; padding: 28px; }
    .auth-brand-panel h1 { font-size: 34px; }
    .auth-brand-panel > small { display: none; }
    .auth-form-panel { padding: 35px 20px; }
}

/* Reading comfort system --------------------------------------------------
   The dashboard is used for long review sessions, so text and controls use
   a relaxed baseline instead of the previous 8–11px dense presentation. */
:root {
    --comfort-body: 15px;
    --comfort-ui: 13px;
    --comfort-small: 11.5px;
    --comfort-label: 12px;
    --comfort-table: 12.5px;
    --comfort-leading: 1.55;
}
html[data-text-size="large"] {
    --comfort-body: 17px;
    --comfort-ui: 14.5px;
    --comfort-small: 13px;
    --comfort-label: 13.5px;
    --comfort-table: 14px;
    --comfort-leading: 1.62;
}
body { font-size: var(--comfort-body); line-height: var(--comfort-leading); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Calmer Focus colors for the default, all-day workspace. */
html[data-design="focus"] {
    --ink: #202938;
    --ink-soft: #5f6b7a;
    --paper: #f4f6fa;
    --surface: #fbfcfe;
    --line: #dce2eb;
    --line-strong: #c3ccd9;
    --jade: #5868d9;
    --jade-dark: #4655bf;
    --jade-soft: #e9ecff;
    --muted-surface: #f1f3f7;
    --muted-surface-2: #f6f7fa;
    --row-line: #e4e8ef;
    --pill-surface: #e9edf3;
    --topbar-bg: rgba(244,246,250,.94);
    --segment-active: #38445a;
    --results-bg: #293447;
}
html[data-theme="dark"][data-design="focus"] {
    --ink: #e7ebf2;
    --ink-soft: #aab3c2;
    --paper: #121722;
    --surface: #1a2130;
    --line: #313a4a;
    --line-strong: #485469;
    --jade: #8290f5;
    --jade-dark: #9aa5ff;
    --jade-soft: #293154;
    --muted-surface: #202838;
    --muted-surface-2: #1d2534;
    --row-line: #2c3545;
    --pill-surface: #273143;
    --topbar-bg: rgba(18,23,34,.94);
    --results-bg: #111722;
}

html[data-design="focus"] .topbar { height: 72px; }
.governance-topbar { padding-inline: clamp(18px,2.2vw,34px); }
.primary-nav a { min-height: 42px; padding-inline: 14px; font-size: var(--comfort-ui); letter-spacing: -.01em; }
.primary-nav a > span { font-size: 17px; }
.product-name strong { font-size: 14px; }.product-name small { font-size: var(--comfort-small); }
.icon-button { min-height: 40px; padding-inline: 12px; font-size: var(--comfort-label); }
.user-menu summary strong { font-size: var(--comfort-label); }.user-menu summary small,.user-popover > span { font-size: var(--comfort-small); }
.user-avatar { width: 36px; height: 36px; font-size: 13px; }

.appearance-menu { width: 350px; max-height: min(720px,calc(100vh - 100px)); overflow-y: auto; }
.menu-heading strong { font-size: 14px; }.menu-heading small { font-size: var(--comfort-small); line-height: 1.45; }
.design-option { min-height: 64px; padding: 10px; }.design-option > span:nth-child(2) strong { font-size: var(--comfort-ui); }.design-option > span:nth-child(2) small { font-size: var(--comfort-small); }
.reading-settings { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.reading-options { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reading-options button { min-height: 58px; padding: 9px 10px; display: grid; grid-template-columns: 1fr 16px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.reading-options button:hover { border-color: var(--jade); background: var(--muted-surface); }.reading-options button.active { border-color: var(--jade); background: var(--jade-soft); box-shadow: inset 0 0 0 1px var(--jade); }
.reading-options strong,.reading-options small { display: block; }.reading-options strong { font-size: var(--comfort-ui); }.reading-options small { margin-top: 2px; color: var(--ink-soft); font-size: var(--comfort-small); }.reading-options b { color: var(--jade); opacity: 0; }.reading-options button.active b { opacity: 1; }

.governance-page { padding-top: 38px; }
.module-heading { margin-bottom: 26px; }.module-heading h1 { font-family: Inter,ui-sans-serif,system-ui,sans-serif; font-size: clamp(32px,3vw,44px); font-weight: 760; line-height: 1.12; letter-spacing: -.035em; }.module-heading p { max-width: 72ch; color: var(--ink-soft); font-size: var(--comfort-ui); line-height: 1.6; }
.eyebrow { font-size: var(--comfort-small); letter-spacing: .1em; }
.data-card,.selector-card { box-shadow: 0 8px 28px rgba(32,41,56,.055); }
.button { min-height: 40px; padding-inline: 14px; font-size: var(--comfort-label); }.button-small { min-height: 36px; font-size: var(--comfort-small); }
.text-input,.select-input { min-height: 42px; font-size: var(--comfort-ui); line-height: 1.4; }
.scope-switch { font-size: var(--comfort-label); }.notice,.flash { font-size: var(--comfort-ui); line-height: 1.5; }

.selector-card > header strong { font-size: var(--comfort-ui); }.selector-card > header small,.selector-item small,.selector-item > span:last-child { font-size: var(--comfort-small); }.selector-item { min-height: 64px; padding: 11px 10px; }.selector-item strong { font-size: var(--comfort-ui); }.selector-card > .text-input { height: 42px; font-size: var(--comfort-ui); }
.template-toolbar h2,.list-toolbar h2,.dialog-card > header h2 { font-size: 21px; }.breadcrumb,.metric-strip span,.dialog-card > header p { font-size: var(--comfort-small); }.metric-strip strong { font-size: 21px; }
.governance-table { font-size: var(--comfort-table); line-height: 1.5; }.governance-table th { padding: 13px 14px; font-size: var(--comfort-small); letter-spacing: .04em; }.governance-table td { padding: 13px 14px; }.governance-table td strong { font-size: var(--comfort-table); }.governance-table td small { margin-top: 4px; font-size: var(--comfort-small); }.table-action { min-height: 34px; padding: 6px 10px; font-size: var(--comfort-small); }
.status-pill,.role-pill,.priority-pill { padding: 4px 8px; font-size: var(--comfort-small); }

.qc-metrics span,.list-toolbar span { font-size: var(--comfort-label); }.qc-metrics strong { font-size: 25px; }.summary-tile span { font-size: var(--comfort-small); }.summary-tile strong { font-size: var(--comfort-ui); }.drawer-section h3 { font-size: 15px; }.drawer-section > p,.comment p { font-size: var(--comfort-ui); line-height: 1.6; }.comment header,.history-item { font-size: var(--comfort-small); }.comment header strong { font-size: var(--comfort-label); }
.form-grid label { font-size: var(--comfort-label); }.variable-chip { font-size: var(--comfort-small); }.meta-row span { font-size: var(--comfort-small); }.meta-row b { font-size: var(--comfort-ui); }.preview-meta .meta-group > strong { font-size: var(--comfort-label); }

.result-table { font-size: var(--comfort-table); line-height: 1.5; }.result-table th { padding: 11px 12px; font-size: var(--comfort-small); }.result-table td { padding: 13px 12px; }.json-paths { font-size: var(--comfort-small); line-height: 1.55; }.match-field { padding-block: 12px; font-size: var(--comfort-ui); }.result-company summary span { font-size: var(--comfort-small); }.loading-row { font-size: var(--comfort-ui); }

/* Config Compare controls */
.step-label,.mode-card strong,.company-header strong { font-size: var(--comfort-ui); }.hint,.company-count,.mode-card small,.summary-chips span,.action-row p,.workflow-search-grid label,.quick-values-header span { font-size: var(--comfort-small); line-height: 1.55; }.select-input { font-size: var(--comfort-ui); }.mode-card { min-height: 98px; padding: 14px; }.compact-field,.compact-search { min-height: 42px; font-size: var(--comfort-ui); }.field-row { min-height: 52px; }.field-path,.field-value { font-size: var(--comfort-small); line-height: 1.55; }.type-pill,.lock-mark { font-size: var(--comfort-small); }.quick-value { min-height: 62px; }.quick-value strong { font-size: var(--comfort-label); line-height: 1.5; }.quick-value small,.speed-badge small { font-size: var(--comfort-small); line-height: 1.5; }

html[data-text-size="large"] .governance-page { max-width: 1760px; }
html[data-text-size="large"] .primary-nav a { padding-inline: 12px; }
html[data-text-size="large"] .governance-table td,html[data-text-size="large"] .governance-table th { padding-block: 15px; }
.native-nav-link { display: none; }
.overview-sort-control { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.overview-sort-control { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.overview-sort-arrow { color: var(--jade); font-size: 10px; line-height: 1.25; }

@media (max-width: 760px) {
    .governance-page { padding-top: 26px; }.module-heading h1 { font-size: 30px; }.primary-nav a { font-size: 12.5px; }.appearance-menu { width: min(350px,calc(100vw - 24px)); }
}

/* Installed apps use the same data screens with a denser, mobile-first shell. */
html.native-shell body { min-width: 0; }
html.native-shell #browser-google-login { display: none !important; }
html.native-shell .governance-topbar { height: 56px; min-height: 56px; padding: max(6px,env(safe-area-inset-top)) 12px 6px; gap: 8px; flex-wrap: nowrap; overflow: visible; }
html.native-shell .governance-topbar .brand { display: flex; min-width: 0; }
html.native-shell .brand-logo-plate { width: 92px; height: 34px; padding: 4px 7px; }
html.native-shell .product-name { display: none; }
html.native-shell .primary-nav { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; order: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; height: calc(58px + env(safe-area-inset-bottom)); margin: 0; padding: 5px 12px env(safe-area-inset-bottom); gap: 8px; overflow: hidden; border-top: 1px solid var(--line); background: color-mix(in srgb,var(--surface) 96%,transparent); box-shadow: 0 -5px 18px rgba(18,31,50,.08); backdrop-filter: blur(18px); }
html.native-shell .primary-nav a { display: none; }
html.native-shell .primary-nav .native-primary-nav { height: 48px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; font-size: 10px; }
html.native-shell .primary-nav .native-primary-nav > span:first-child { font-size: 18px; line-height: 1; }
html.native-shell .primary-nav .native-primary-nav .nav-label { font-size: 10px; line-height: 1.2; }
html.native-shell .primary-nav .native-primary-nav.active { color: var(--jade-dark); background: var(--jade-soft); }
html.native-shell .primary-nav .nav-count { position: absolute; margin: -24px 0 0 24px; }
html.native-shell .topbar-actions { flex: 0 0 auto; gap: 0; }
html.native-shell .header-search,html.native-shell .appearance-control,html.native-shell .theme-button,html.native-shell .index-control { display: none !important; }
html.native-shell .user-menu summary { padding: 0; border: 0; background: transparent; }
html.native-shell .user-menu summary > span:last-child { display: none; }
html.native-shell .user-avatar { width: 32px; height: 32px; font-size: 12px; }
html.native-shell .user-popover { top: 38px; right: 0; min-width: 210px; padding: 12px; }
html.native-shell .user-popover > strong,html.native-shell .user-popover > small { display: block; margin-bottom: 5px; }
html.native-shell .governance-page { width: 100%; max-width: none; min-height: calc(100vh - 56px); padding: 12px 9px calc(76px + env(safe-area-inset-bottom)); }
html.native-shell .module-heading { min-height: 0; margin-bottom: 10px; }
html.native-shell .module-heading .eyebrow,html.native-shell .module-heading h1,html.native-shell .module-heading > p { display: none; }
html.native-shell .module-heading-actions { width: 100%; justify-content: flex-end; }
html.native-shell .data-card,html.native-shell .selector-card { border-radius: 7px; box-shadow: none; }
html.native-shell .button { min-height: 31px; padding: 5px 8px; border-radius: 6px; font-size: 11px; }
html.native-shell .button-small,html.native-shell .table-action { min-height: 28px; padding: 4px 7px; font-size: 10px; }
html.native-shell .text-input,html.native-shell .select-input { min-height: 34px; font-size: 12px; }
html.native-shell .governance-table { font-size: 11px; }
html.native-shell .governance-table th,html.native-shell .governance-table td { padding: 8px 9px; }
html.native-shell .governance-table th { font-size: 9px; }
html.native-shell .overview-table-controls { width: 100%; justify-content: stretch; }
html.native-shell .overview-table-controls .select-input { display: none; }
html.native-shell .overview-search-field { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
html.native-shell .overview-search-field .text-input { width: 100%; min-width: 0; border: 0; background: transparent; outline: 0; }
html.native-shell .overview-sort-control,html.native-shell .native-table-sort { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
html.native-shell .overview-sort-control,html.native-shell .native-table-sort { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
html.native-shell .overview-sort-arrow,html.native-shell .native-table-sort b { color: var(--jade); font-size: 9px; line-height: 1.25; }
html.native-shell .native-table-search { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; color: var(--ink-soft); font-size: 11px; }
html.native-shell .native-table-search input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; }
html.native-shell .native-table-shell { overflow-x: auto; }
html.native-shell .native-table-pagination,html.native-shell .overview-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 0 0; color: var(--ink-soft); font-size: 10px; }
html.native-shell .native-table-pagination button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; }
html.native-shell .native-table-pagination button:disabled { opacity: .45; }
html.native-shell .auth-shell { display: block; min-height: 100vh; }
html.native-shell .auth-brand-panel { display: none; }
html.native-shell .auth-form-panel { min-height: 100vh; padding: 24px 16px; }
html.native-shell .auth-form-card { width: 100%; max-width: 440px; padding: 0; box-shadow: none; }