:root {
  --ink: #172330;
  --text: #253340;
  --muted: #697a8d;
  --quiet: #95a2b0;
  --line: #dce5ec;
  --line-strong: #cbd9e2;
  --canvas: #f6f8fb;
  --card: #ffffff;
  --teal: #197d79;
  --teal-dark: #126a67;
  --teal-pale: #e7f3f1;
  --blue: #3764a9;
  --orange: #c87900;
  --purple: #7753ae;
  --green: #31835d;
  --red: #bd4b4e;
  --amber-pale: #fff6df;
  --shadow: 0 1px 3px rgba(32, 51, 65, .035);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-size-caption: 10px;
  --font-size-small: 11px;
  --font-size-body: 12px;
  --font-size-label: 13px;
  --font-size-section: 16px;
  --font-size-page: 26px;
  --control-height: 36px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  background: #fff;
  color: var(--text);
  font: 14px/1.42 var(--font-sans);
}
button, select, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid rgba(25,125,121,.34); outline-offset: 1px; }

.app-frame { min-height: 100vh; background: #fff; }
.topbar { padding: 18px 28px 17px; border-bottom: 1px solid var(--line); }
.site-identity { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 3px; }
.page-title { color: var(--ink); font-size: 25px; line-height: 1.15; letter-spacing: -.6px; margin: 0; font-weight: 800; }
.page-subtitle { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.topbar-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.header-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-top: 14px; }
.site-project-control { align-items: flex-end; display: flex; gap: 7px; }
.site-switcher { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 3px; letter-spacing: .01em; min-width: 205px; }
.site-switcher > span { line-height: 1; }
.site-switcher .select-control { font-size: 12px; font-weight: 700; height: 36px; min-width: 205px; padding-left: 9px; padding-right: 28px; }
.site-create-trigger { font-size: 11px; min-height: 36px; padding: 0 10px; white-space: nowrap; }
.site-project-control.compact { align-items: flex-end; margin-top: 10px; }
.site-project-control.compact .site-switcher { min-width: 0; width: 100%; }
.site-project-control.compact .site-switcher .select-control { min-width: 0; width: 100%; }
.site-switch-loading { align-items: center; background: linear-gradient(145deg, #f5fbfb 0%, #fff 60%, #f4f8fa 100%); color: var(--text); display: grid; min-height: 100vh; padding: 32px; place-items: center; text-align: center; }
.site-switch-loading > section { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 42px rgba(27, 49, 62, .08); max-width: 500px; padding: 26px 30px; }
.site-switch-loading h1 { color: var(--ink); font-size: 22px; margin: 4px 0 8px; }
.site-switch-loading p:last-child { color: var(--muted); line-height: 1.65; margin: 0; }
.control-button, .outline-button, .dark-button, .teal-button, .icon-button {
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); font-weight: 700; min-height: 36px; padding: 0 13px;
}
.outline-button { border-color: var(--teal); color: var(--text); }
.export-link { align-items: center; display: inline-flex; justify-content: center; text-decoration: none; white-space: nowrap; }
.disabled-control { background: #f3f5f6; border-color: #d8e0e3; color: #73808a; cursor: not-allowed; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.outline-button:hover, .control-button:hover { background: #f8fbfc; border-color: #a9c4c4; }
.disabled-control:hover { background: #f3f5f6; border-color: #d8e0e3; }
.dark-button { background: #1e2d39; border-color: #1e2d39; color: #fff; }
.dark-button:hover { background: #13222c; }
.teal-button { background: var(--teal); border-color: var(--teal); color: #fff; }
.teal-button:hover { background: var(--teal-dark); }
.icon-button { min-width: 34px; padding: 0 9px; }

.select-control, .search-control, .date-control {
  width: 100%; height: 38px; color: #354453; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px;
}
.date-control { border-color: #a9c6de; font-weight: 700; }
.keyword-header-controls { background: linear-gradient(115deg, #f3faf9, #fbfdfe 64%, #fff); border: 1px solid #d5e5e6; border-radius: 9px; display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; }
.keyword-snapshot-toolbar { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(380px, 1.15fr) minmax(440px, 1fr); }
.keyword-period-pair { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keyword-filter-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.keyword-period-control { background: #fff; border: 1px solid #b8d3d3; border-radius: 8px; color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 6px; min-width: 0; padding: 8px 9px 9px; }
.keyword-period-control.current { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.keyword-period-control.comparison { border-color: #7d9bc2; box-shadow: inset 3px 0 0 var(--blue); }
.keyword-period-heading { align-items: center; display: flex; gap: 7px; }
.keyword-period-heading > i { align-items: center; background: var(--teal); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 20px; font-size: 10px; font-style: normal; height: 20px; justify-content: center; }
.keyword-period-control.comparison .keyword-period-heading > i { background: var(--blue); }
.keyword-period-heading > span { display: grid; line-height: 1.15; }
.keyword-period-heading strong { color: #263944; font-size: 11px; }
.keyword-period-heading small { color: #7a8c98; font-size: 9px; font-weight: 700; margin-top: 2px; }
.keyword-period-control .date-control { min-width: 0; width: 100%; }
.keyword-compact-filter, .keyword-sort-control { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.keyword-compact-filter .select-control { min-width: 0; }
.keyword-data-project { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.keyword-data-project .select-control { min-width: 0; }
.gsc-data-project { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.gsc-data-project .select-control { min-width: 0; }
.ga4-data-project { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.ga4-data-project .select-control { min-width: 0; }
.keyword-project-scope-row { align-items: center; border-top: 1px solid #dfebec; display: flex; gap: 12px; justify-content: space-between; padding-top: 9px; }
.keyword-project-scope-row .keyword-data-project { width: min(320px, 100%); }
.keyword-snapshot-history-note { color: #667984; font-size: 10px; font-weight: 700; line-height: 1.4; }
.keyword-drill-data-scope { align-items: end; display: flex; justify-content: flex-end; margin: 0 0 10px; }
.keyword-drill-data-scope .keyword-data-project { width: min(320px, 100%); }
.keyword-filter-bottom { align-items: end; display: grid; gap: 9px; grid-template-columns: minmax(140px, 160px) minmax(220px, 1fr) repeat(3, max-content); justify-content: stretch; width: 100%; }
.keyword-filter-bottom .select-control { width: 100%; }
.keyword-filter-bottom .search-control { min-width: 0; width: 100%; }
.keyword-snapshot-delete { background: #fff7f7; border: 1px solid #d9a4aa; border-radius: 6px; color: #a5303a; cursor: pointer; font-size: 10px; font-weight: 800; min-height: 36px; padding: 0 11px; white-space: nowrap; }
.keyword-snapshot-delete:hover { background: #fff0f0; border-color: #bd6d76; }
.upload-label { align-items: center; display: inline-flex; white-space: nowrap; }

.dashboard-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 15px; max-width: 1227px; }
.dashboard-tab {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--text); min-height: 57px; padding: 9px 11px; text-align: left;
}
.dashboard-tab:hover { border-color: #a6bfc9; }
.dashboard-tab.active { background: #eef7f5; border: 2px solid var(--teal); padding: 8px 10px; }
.dashboard-tab strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.25; }
.dashboard-tab span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.board-canvas { background: var(--canvas); border-top: 1px solid var(--line); padding: 13px 28px 38px; }
.keyword-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 18px; align-items: start; }
.keyword-nav, .shopify-nav { background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); overflow: hidden; }
.keyword-nav { position: sticky; top: 12px; }
.side-nav-heading { color: var(--muted); font-size: 12px; font-weight: 800; padding: 13px 13px 9px; }
.side-nav-button { width: 100%; padding: 10px 14px; border: 0; background: #fff; color: #2d3b4b; text-align: left; font-weight: 700; }
.side-nav-button:hover { background: #f2f7f7; color: var(--teal-dark); }
.side-nav-button.active { background: var(--teal-pale); color: var(--teal); border-left: 3px solid var(--teal); padding-left: 11px; }

.kpi-grid { display: grid; grid-template-columns: repeat(9, minmax(96px, 1fr)); gap: 12px; overflow: hidden; }
.kpi-card { min-height: 91px; background: var(--card); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); padding: 13px 12px 10px; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.kpi-value { color: var(--ink); font-size: 25px; line-height: 1.1; letter-spacing: -.6px; font-weight: 800; margin-top: 7px; }
.kpi-note { color: var(--muted); font-size: 11px; font-weight: 700; margin-top: 8px; }
.kpi-note .positive,
.kpi-note.trend-positive { color: #157448; font-weight: 850; }
.kpi-note .negative,
.kpi-note.trend-negative { color: #b34549; font-weight: 850; }
.trend-arrow { display: inline-block; font-weight: 900; line-height: 1; margin-right: 4px; }

.section { scroll-margin-top: 14px; margin-top: 17px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin: 0 0 9px; }
.section-title { color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.section-desc { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 15px 10px; border-bottom: 1px solid var(--line); }
.card-title { color: var(--ink); font-size: 15px; font-weight: 800; margin: 0; }
.card-subtitle { color: var(--muted); font-size: 11px; margin: 2px 0 0; }

.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.donut-content { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: center; min-height: 232px; padding: 12px 16px 15px; }
.donut { width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--donut-gradient)); position: relative; }
.donut::after { position: absolute; content: ""; width: 102px; height: 102px; background: #fff; border-radius: 50%; left: 49px; top: 49px; box-shadow: inset 0 0 0 1px #eef2f5; }
.donut-center { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.donut-center b { color: var(--ink); font-size: 21px; line-height: 1; letter-spacing: -.5px; }
.donut-center span { color: var(--muted); font-size: 11px; margin-top: 5px; }
.legend-list { display: grid; gap: 7px; }
.legend-row { display: grid; grid-template-columns: minmax(100px, 1fr) 52px 40px; gap: 7px; color: #3e4d5c; font-size: 12px; align-items: center; }
.legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.legend-number, .legend-pct { text-align: right; color: var(--muted); }
.legend-pct { font-weight: 700; }

.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stage-card { padding: 12px; min-height: 151px; }
.stage-card h4 { margin: 0; color: var(--ink); font-size: 14px; }
.stage-card p { margin: 3px 0 10px; color: var(--muted); font-size: 11px; }
.mini-stack { height: 16px; background: #eef2f3; border-radius: 3px; overflow: hidden; display: flex; }
.mini-stack span { min-width: 2px; }
.mini-legend { display: grid; gap: 4px; margin-top: 9px; }
.mini-legend-row { font-size: 10px; display: flex; justify-content: space-between; color: #526171; }
.mini-legend-row > span { align-items: center; display: flex; min-width: 0; }
.mini-legend-row i { border-radius: 50%; display: inline-block; flex: 0 0 7px; height: 7px; margin-right: 6px; width: 7px; }
.mini-legend-row b { font-weight: 700; }
.keyword-stage-comparison .count-pill { background: #e9f3ff; border-radius: 14px; color: #2d6699; font-size: 11px; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.stage-card-combined { display: grid; gap: 13px; min-height: 250px; }
.stage-card-heading { align-items: baseline; border-bottom: 1px solid #edf1f3; display: flex; justify-content: space-between; padding-bottom: 9px; }
.stage-card-heading strong { color: var(--muted); font-size: 11px; }
.stage-dimension { min-width: 0; }
.stage-dimension-heading { color: #314554; font-size: 11px; font-weight: 800; margin-bottom: 7px; }
.stage-dimension-empty { color: #93a1ac; font-size: 10px; padding-top: 5px; }

.new-keyword-banner { display: flex; align-items: center; gap: 11px; margin: 20px 0 10px; }
.new-keyword-banner .count-pill { padding: 5px 9px; border-radius: 14px; background: #e9f3ff; color: #2d6699; font-size: 11px; font-weight: 800; white-space: nowrap; }
.keyword-new-stage-empty .section-head { align-items: center; }
.keyword-new-stage-empty .count-pill { background: #f0f4f6; border-radius: 14px; color: #657787; font-size: 11px; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.keyword-feature-state { align-items: center; border-style: dashed; display: flex; gap: 13px; min-height: 92px; padding: 16px; }
.keyword-feature-state-icon { align-items: center; background: var(--teal-pale); border-radius: 50%; color: var(--teal); display: flex; flex: 0 0 38px; font-size: 19px; font-weight: 900; height: 38px; justify-content: center; }
.keyword-feature-state h3 { color: var(--ink); font-size: 13px; margin: 0 0 4px; }
.keyword-feature-state p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; }
.line { height: 1px; flex: 1; background: var(--line); }

.product-summary { display: grid; grid-template-columns: 1.12fr .88fr; gap: 17px; }
.line-list { padding: 5px 15px 11px; }
.line-list-row { display: grid; grid-template-columns: minmax(140px,1fr) 62px 1fr; gap: 9px; align-items: center; padding: 6px 0; }
.line-list-name { font-size: 12px; font-weight: 700; color: #334250; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-list-value { color: var(--ink); font-size: 12px; text-align: right; font-weight: 800; }
.line-bar { height: 7px; overflow: hidden; background: #edf1f4; border-radius: 5px; }
.line-bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.line-summary-sort { flex: 0 0 142px; height: 31px; margin-top: -1px; }
.weekly-brief { padding: 13px 15px 15px; }
.weekly-brief-hint { color: var(--muted); font-size: 11px; font-weight: 700; margin-left: 5px; }
.weekly-brief p { color: #3c4a59; font-size: 13px; line-height: 1.7; margin: 6px 0 12px; }
.brief-box { min-height: 107px; resize: vertical; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 9px; color: #425264; font-size: 12px; line-height: 1.55; }

.table-card { overflow: hidden; }
.table-toolbar { align-items: center; display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.formal-table-enhancement { align-items: flex-start; background: #f7fafb; border-top: 1px solid #e7eef0; color: #647786; justify-content: flex-start; line-height: 1.5; }
.formal-table-enhancement .toolbar-label { max-width: 980px; }
.export-summary-toolbar { color: var(--muted); font-size: 11px; margin-top: 13px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.toolbar-label { color: var(--muted); font-size: 11px; }
.table-wrap { overflow: auto; max-height: 520px; }
.wide-table { min-width: 1130px; width: 100%; border-collapse: collapse; }
.wide-table th { background: #f7f9fb; color: #5e7082; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; padding: 10px 11px; text-align: left; white-space: nowrap; }
.wide-table td { border-bottom: 1px solid #eaf0f3; color: #354554; font-feature-settings: "tnum" 1; font-size: 12px; font-variant-numeric: tabular-nums; padding: 10px 11px; vertical-align: top; }
.wide-table td.table-trend-positive { background: #f1faf5; color: #157448; font-weight: 850; }
.wide-table td.table-trend-negative { background: #fff6f6; color: #b34549; font-weight: 800; }
.wide-table .numeric-cell, .wide-table .numeric-column { text-align: right; }
.wide-table .numeric-column .table-sort-button { justify-content: flex-end; text-align: right; }
.wide-table tbody tr:hover { background: #f9fcfc; }
.wide-table tbody tr:last-child td { border-bottom: 0; }
.sort-head::after { content: "↕"; color: #8b99a7; font-size: 11px; margin-left: 4px; }
.risk-pill, .type-pill, .status-pill, .intention-pill, .channel-pill { display: inline-block; font-weight: 800; border-radius: 4px; font-size: 10px; line-height: 1; padding: 5px 6px; white-space: nowrap; }
.risk-pill.severe { color: #a5303a; background: #fff0f1; }
.risk-pill.watch { color: #9a6500; background: #fff6df; }
.risk-pill.ok { color: #3b6f5d; background: #ecf7f0; }
.status-pill { color: #3c7195; background: #ebf5fb; }
.type-pill { color: #50697a; background: #eef3f6; }
.intention-pill { color: #6558a9; background: #f0edfb; }
.rank-positive { color: #157448; font-weight: 850; }
.rank-positive::before { content: "↑"; font-weight: 950; margin-right: 3px; }
.rank-negative { color: #b34549; font-weight: 850; }
.rank-negative::before { content: "↓"; font-weight: 950; margin-right: 3px; }
.strong { color: var(--ink); font-weight: 800; }
.url-link { color: #36749a; max-width: 228px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.action-copy { max-width: 270px; color: #65778a; line-height: 1.35; }
.table-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.inline-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.table-sort-button, .table-controls-sort { align-items: center; background: transparent; border: 0; color: inherit; display: inline-flex; font: inherit; font-weight: 800; gap: 4px; margin: -10px -11px; min-height: 39px; padding: 10px 11px; text-align: left; white-space: nowrap; }
.table-sort-button:hover, .table-controls-sort:hover { color: var(--teal); }
.table-controls-shell { width: 100%; }
.evil-table-controls { width: 100%; }
.table-controls-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; padding: 9px 14px; }
.table-controls-range { color: var(--muted); font-size: 11px; font-weight: 700; margin: 0; }
.table-controls-settings-button { min-height: 30px; font-size: 11px; padding: 0 9px; }
.table-controls-settings { background: #f7fafb; border: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 0; padding: 10px 14px 11px; }
.table-controls-settings[hidden] { display: none; }
.table-controls-settings legend { color: var(--muted); float: left; font-size: 10px; font-weight: 800; margin: 0 10px 0 0; padding: 0; }
.table-controls-identity-note { color: var(--muted); flex-basis: 100%; font-size: 10px; margin: 0; }
.table-controls-column-option { align-items: center; display: inline-flex; gap: 4px; }
.table-controls-settings label { align-items: center; color: #526171; display: inline-flex; font-size: 11px; gap: 4px; }
.table-controls-column-move { display: inline-flex; gap: 2px; }
.table-controls-column-move button { background: #fff; border: 1px solid #cfdce2; border-radius: 3px; color: #526171; cursor: pointer; font-size: 11px; height: 22px; line-height: 1; padding: 0 5px; }
.table-controls-column-move button:disabled { cursor: default; opacity: .38; }
.table-controls-column-move button:not(:disabled):hover { border-color: var(--teal); color: var(--teal); }
.table-controls-pagination { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 9px 14px; font-size: 11px; }
.table-controls-pagination .outline-button { min-height: 30px; font-size: 11px; padding: 0 9px; }
.table-controls-pagination label { align-items: center; display: inline-flex; gap: 4px; }
.table-controls-pagination .select-control { height: 30px; min-width: 68px; padding: 0 6px; width: auto; }
.table-controls-align-right { text-align: right; }

.detail-filters { padding: 13px 14px 0; }
.detail-filter-grid { display: grid; grid-template-columns: 1.45fr repeat(6, minmax(105px, 1fr)) 116px; gap: 8px; }
.field-label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.field-label .select-control, .field-label .search-control { height: 34px; font-size: 12px; }
.detail-filter-actions { display: flex; gap: 7px; justify-content: flex-end; margin: 10px 0 11px; }

.risk-board { display: grid; grid-template-columns: 1.2fr .8fr; gap: 17px; }
.keyword-risk-section { display: grid; gap: 17px; }
.keyword-risk-dashboard { display: grid; gap: 17px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.keyword-risk-cards { display: grid; gap: 9px; padding: 0 14px 14px; }
.keyword-risk-card { border: 1px solid #dfe8eb; border-radius: 7px; padding: 11px 12px; }
.keyword-risk-card-title { align-items: center; display: flex; gap: 8px; }
.keyword-risk-card-title strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.keyword-risk-card p { color: #435361; font-size: 12px; line-height: 1.55; margin: 7px 0 8px; }
.keyword-risk-card-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 10px; gap: 5px 12px; }
.keyword-risk-card-meta span { white-space: nowrap; }
.keyword-risk-distribution { display: grid; gap: 11px; padding: 8px 14px 16px; }
.keyword-risk-bar-row { align-items: center; display: grid; gap: 9px; grid-template-columns: minmax(100px, 1fr) minmax(90px, 1.1fr) 34px; }
.keyword-risk-bar-row > span:first-child { color: #3a4a58; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-risk-bar-row strong { color: #5b6b78; font-size: 11px; text-align: right; }
.keyword-risk-bar { background: #edf2f3; border-radius: 5px; height: 8px; overflow: hidden; }
.keyword-risk-bar i { background: linear-gradient(90deg, #ca3f2d, #d69a00); border-radius: inherit; display: block; height: 100%; }
.keyword-risk-empty { color: var(--muted); padding: 18px 12px; text-align: center; }
.keyword-risk-empty strong { color: var(--ink); display: block; font-size: 13px; }
.keyword-risk-empty p { font-size: 11px; line-height: 1.55; margin: 5px auto 0; max-width: 560px; }
.keyword-risk-empty.compact { padding: 24px 8px; }
.keyword-risk-detail { overflow: hidden; }
.keyword-risk-detail > .card-head { border-bottom: 1px solid var(--line); }
.priority-list { padding: 4px 15px 13px; }
.priority-row { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e9eff2; }
.priority-row:last-child { border-bottom: 0; }
.priority-index { color: var(--teal); background: var(--teal-pale); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.priority-row b { display: block; font-size: 12px; }
.priority-row span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.priority-score { color: #9e4a21; background: #fff1e8; border-radius: 4px; font-weight: 800; padding: 5px 7px; font-size: 11px; }

/* Shopify dashboard */
.shopify-hero { background: #fff; border: 1px solid var(--line); border-radius: 7px; margin-top: 8px; padding: 9px 12px; }
.shopify-title-block { min-width: 0; }
.shopify-title-block .site-identity { margin-bottom: 2px; }
.shopify-title-block h2 { color: var(--ink); font-size: 16px; line-height: 1.2; letter-spacing: -.2px; margin: 0; }
.shopify-title-block p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 3px 0 0; }
.shopify-control-grid { display: grid; grid-template-columns: 165px 135px 135px 88px 135px minmax(190px, 1fr); gap: 8px; align-items: end; }
.shopify-control-grid .field-label { font-size: 10px; }
.shopify-control-grid .select-control, .shopify-control-grid .date-control { height: 35px; font-size: 12px; }
.shopify-control-grid .ga4-data-project .select-control { height: 35px; font-size: 12px; }
.shopify-control-grid [data-apply-range="shopify"] { justify-content: center; min-width: 88px; white-space: nowrap; }
.shopify-hero-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 7px; }
.shopify-hero-action-group, .shopify-hero-statuses { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.shopify-hero-statuses { justify-content: flex-end; }
.shopify-draft-note { color: #99620b; display: block; font-size: 11px; font-weight: 700; line-height: 1.4; margin-top: 8px; }
.shopify-range-error { color: #a5303a; font-size: 11px; font-weight: 800; line-height: 1.4; margin: 8px 0 0; }
.shopify-source-pill { align-self: center; border: 1px solid transparent; line-height: 1.25; white-space: normal; }
.shopify-source-pill.ready { background: #e7f4f1; border-color: #b9ddd7; color: #197d79; }
.shopify-source-pill.limited { background: #fff7e5; border-color: #eed69e; color: #87661f; }
.shopify-source-pill.unavailable { background: #f1f4f5; border-color: #d7e0e4; color: #657681; }
.shopify-canvas { background: var(--canvas); border-top: 1px solid var(--line); padding: 0 20px 32px; }
.shopify-layout { display: block; margin: 0; min-width: 0; }
.shopify-board-content { min-width: 0; }
.shopify-nav {
  align-items: center;
  display: flex;
  gap: 3px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 6px;
  position: sticky;
  top: 0;
  z-index: 7;
}
.shopify-nav .side-nav-heading { flex: 0 0 auto; padding: 0 10px 0 7px; text-transform: uppercase; font-size: 10px; }
.shopify-nav .side-nav-button { border: 1px solid transparent; border-radius: 5px; flex: 0 0 auto; min-height: 34px; padding: 7px 10px; white-space: nowrap; }
.shopify-nav .side-nav-button.active { border: 1px solid #a7d0cb; border-bottom: 3px solid var(--teal); padding: 7px 10px 5px; }
.shopify-board-content { margin-top: 12px; }
.connection-banner { color: #816015; background: #fff7e7; border: 1px solid #ead29a; border-radius: 6px; display: flex; gap: 12px; align-items: center; padding: 10px 12px; font-size: 12px; margin-bottom: 13px; }
.connection-banner b { color: #8f5b00; }
.connection-banner .source-note { color: #80765e; margin-left: auto; font-size: 11px; }
.source-status-stack .connection-banner:not(:last-child) { margin-bottom: 8px; }
.shopify-data-diagnostics { background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); margin-bottom: 13px; overflow: hidden; }
.shopify-data-diagnostics > summary { align-items: center; cursor: pointer; display: flex; gap: 12px; list-style: none; min-height: 48px; padding: 10px 14px; }
.shopify-data-diagnostics > summary::-webkit-details-marker { display: none; }
.shopify-data-diagnostics > summary:hover { background: #f8fbfb; }
.shopify-data-diagnostics-title { color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.shopify-data-diagnostics-statuses { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.source-diagnostic-chip { border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.3; padding: 4px 7px; }
.source-diagnostic-chip.ready { background: #e7f4f1; border-color: #b9ddd7; color: #197d79; }
.source-diagnostic-chip.limited { background: #fff7e5; border-color: #eed69e; color: #87661f; }
.source-diagnostic-chip.unavailable { background: #f1f4f5; border-color: #d7e0e4; color: #657681; }
.shopify-data-diagnostics-chevron { color: #71818d; font-size: 18px; line-height: 1; margin-left: auto; transition: transform .16s ease; }
.shopify-data-diagnostics[open] .shopify-data-diagnostics-chevron { transform: rotate(180deg); }
.shopify-data-diagnostics-body { background: #f7f9fa; border-top: 1px solid var(--line); display: grid; gap: 13px; padding: 13px; }
.shopify-data-diagnostics-body > .card { margin-bottom: 0; }
.shopify-source-contract-matrix { margin-bottom: 13px; overflow: hidden; }
.shopify-source-contract-matrix .card-head { align-items: flex-start; padding: 14px 15px 11px; }
.source-contract-table-wrap { overflow: auto; border-top: 1px solid var(--line); }
.source-contract-table { border-collapse: collapse; min-width: 1080px; table-layout: fixed; width: 100%; }
.source-contract-table th { background: #f7fafb; color: #617484; font-size: 10px; font-weight: 800; letter-spacing: .01em; padding: 9px 10px; text-align: left; }
.source-contract-table th:nth-child(1) { width: 15%; }
.source-contract-table th:nth-child(2) { width: 23%; }
.source-contract-table th:nth-child(3) { width: 15%; }
.source-contract-table th:nth-child(4) { width: 14%; }
.source-contract-table th:nth-child(5) { width: 25%; }
.source-contract-table th:nth-child(6) { width: 8%; }
.source-contract-table td { border-top: 1px solid #e6edef; color: #526575; font-size: 11px; line-height: 1.5; padding: 10px; vertical-align: top; overflow-wrap: anywhere; }
.source-contract-table td > b { color: var(--ink); display: block; font-size: 12px; line-height: 1.4; }
.source-contract-table td > small { color: var(--muted); display: block; font-size: 10px; line-height: 1.35; margin-top: 3px; }
.source-contract-status { border: 1px solid transparent; border-radius: 999px; display: inline-block; font-size: 10px; font-weight: 800; line-height: 1.3; padding: 4px 7px; }
.source-contract-status.ready { background: #e7f4f1; border-color: #b9ddd7; color: #197d79; }
.source-contract-status.limited { background: #fff7e5; border-color: #eed69e; color: #87661f; }
.source-contract-status.unavailable { background: #f1f4f5; border-color: #d7e0e4; color: #657681; }
.source-contract-action { min-height: 29px; padding: 4px 7px; white-space: nowrap; }
.source-contract-footer { background: #f8fbfb; border-top: 1px solid var(--line); color: #687a88; font-size: 11px; line-height: 1.55; padding: 10px 13px; }
.shopify-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.shopify-kpi { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 11px; }
.shopify-kpi span { color: var(--muted); font-size: 11px; display: block; font-weight: 700; }
.shopify-kpi b { display: block; font-size: 19px; color: var(--ink); letter-spacing: -.4px; margin-top: 4px; }
.shopify-kpi small { font-size: 10px; font-weight: 700; color: var(--red); }
.shopify-overview-canvas { display: grid; gap: 18px; margin-top: 13px; min-width: 0; }
.shopify-overview-section, .shopify-overview-kpi-section { min-width: 0; }
.shopify-overview-kpi-section { display: grid; gap: 9px; }
.kpi-grid.shopify-overview-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; overflow: visible; padding-bottom: 2px; }
.shopify-overview-kpis .kpi-card { flex: 1 1 calc(20% - 8px); min-height: 108px; min-width: 150px; padding: 13px 12px 11px; }
.shopify-overview-kpis .kpi-card:nth-child(n+6) { flex-basis: calc(25% - 8px); }
.shopify-overview-kpis .kpi-card:nth-child(-n+3) { border-top: 3px solid #197d79; }
.shopify-overview-kpis .kpi-card:nth-child(4),
.shopify-overview-kpis .kpi-card:nth-child(5) { border-top: 3px solid #3764a9; }
.shopify-overview-kpis .kpi-card:nth-child(n+6) { background: #f6fbfa; border-color: #cfe4e1; }
.shopify-overview-kpis .kpi-label { font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.shopify-overview-kpis .kpi-value { font-size: 22px; letter-spacing: -.45px; }
.shopify-overview-kpis .kpi-note { font-size: 10px; line-height: 1.4; min-height: 28px; }
.shopify-drilldown-kpi { color: inherit; cursor: pointer; font: inherit; text-align: left; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.shopify-drilldown-kpi:hover, .shopify-drilldown-kpi:focus-visible { border-color: #74b6b0; box-shadow: 0 0 0 3px rgba(25, 125, 121, .1); transform: translateY(-1px); }
.shopify-drilldown-kpi.active { background: #edf8f6; border-color: #197d79; box-shadow: inset 0 -3px #197d79; }
.shopify-drilldown-kpi:disabled { cursor: default; opacity: .7; transform: none; }
.shopify-traffic-drilldown { overflow: hidden; scroll-margin-top: 56px; }
.shopify-traffic-drilldown .card-head { align-items: center; }
.shopify-traffic-drilldown-table { min-width: 920px; }
.shopify-period-comparison { display: grid; gap: 12px; min-width: 0; }
.shopify-period-comparison-heading { align-items: center; display: flex; justify-content: space-between; }
.shopify-period-comparison-heading .workspace-eyebrow { margin: 0 0 3px; }
.shopify-period-comparison-charts { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shopify-period-comparison-charts .chart-area { min-height: 212px; }
.shopify-period-comparison-table { overflow: hidden; }
.shopify-comparison-table { min-width: 620px; }
.comparison-delta { border-radius: 999px; display: inline-block; font-size: 10px; font-weight: 850; padding: 4px 7px; white-space: nowrap; }
.comparison-delta.positive { background: #e7f5ed; color: #21734e; }
.comparison-delta.negative { background: #f4f1f1; color: #856f71; font-weight: 750; }
.comparison-delta.neutral { background: #eef3f5; color: #647681; }
.shopify-line-traffic-help { display: grid; gap: 8px; line-height: 1.5; }
.shopify-line-traffic-help > span, .shopify-line-traffic-help > small { display: block; }
.shopify-line-traffic-help ol { margin: 0; padding-left: 20px; }
.shopify-line-traffic-help .outline-button { justify-self: start; }
.shopify-overview-section .shopify-workspace { margin-top: 0; }
.shopify-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; margin-top: 16px; }
.chart-area { padding: 13px 15px 17px; min-height: 235px; }
.chart-legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; margin-top: 7px; }
.chart-legend i { display: inline-block; height: 8px; width: 8px; border-radius: 50%; margin-right: 5px; }
.revenue-chart { position: relative; height: 163px; margin-top: 15px; border-bottom: 1px solid #dbe5ea; background: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, #edf2f4 40px); }
.revenue-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shopify-axis-chart { background: transparent; border-bottom: 0; }
.shopify-y-axis-tick line { stroke: #e4ecef; stroke-width: 1; }
.shopify-y-axis-tick text { fill: #70828f; font-size: 10px; font-weight: 650; }
.shopify-y-axis-line { stroke: #cbd8de; stroke-width: 1; }
.shopify-axis-days { padding-left: 10.5%; }
.chart-days { display: flex; justify-content: space-between; color: var(--quiet); font-size: 10px; padding-top: 6px; }
.ga4-seo-traffic-trend { overflow: hidden; }
.ga4-traffic-visuals { display: grid; gap: 17px; grid-template-columns: 1.08fr .92fr; min-width: 0; }
.ga4-traffic-visuals.single { grid-template-columns: minmax(0, 1fr); }
.ga4-traffic-chart { padding: 11px 15px 5px; }
.ga4-traffic-chart .chart-legend { margin: 0 0 4px; }
.ga4-traffic-chart svg { display: block; height: auto; max-height: 260px; width: 100%; }
.ga4-chart-axis-label { fill: #738391; font-size: 10px; }
.ga4-chart-value { font-size: 9px; font-weight: 800; }
.ga4-seo-traffic-trend-details { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.ga4-seo-traffic-trend-details > summary { cursor: pointer; font-weight: 700; padding: 11px 15px; }
.ga4-seo-traffic-trend-details[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.ga4-seo-traffic-trend-details .table-wrap { max-height: 360px; overflow: auto; }
.ga4-traffic-type-card { min-width: 0; overflow: hidden; }
.ga4-traffic-type-list { display: grid; gap: 13px; padding: 15px 17px 19px; }
.ga4-traffic-type-row { display: grid; gap: 6px; }
.ga4-traffic-type-meta { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.ga4-traffic-type-meta b { color: var(--ink); font-size: 13px; }
.ga4-traffic-type-meta span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ga4-traffic-type-track { background: #e9eef0; height: 10px; overflow: hidden; }
.ga4-traffic-type-track i { background: var(--bar-color); display: block; height: 100%; width: var(--bar-width); }
.channel-list { padding: 5px 15px 12px; }
.channel-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #ebf0f2; font-size: 12px; }
.channel-row:last-child { border-bottom: 0; }
.channel-row b { color: var(--ink); }
.shopify-table .wide-table { min-width: 990px; }
.attribution-table .wide-table { min-width: 1100px; }
.manual-metric-notice { background: #edf8f6; border: 1px solid #b8dcd7; border-left: 4px solid var(--teal); border-radius: 7px; color: #48606b; font-size: 12px; line-height: 1.6; margin-top: 13px; padding: 10px 12px; }
.manual-metric-notice strong { color: var(--teal-dark); }
.ai-data-entry-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: 16px; }
.ai-visibility-entry, .ai-prompt-import-card, .ai-prompt-compare-controls, .ai-prompt-detail { overflow: hidden; }
.ai-visibility-entry { margin-top: 16px; }
.ai-prompt-import-card { margin-top: 14px; }
.ai-data-tabs { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; padding: 6px; }
.ai-data-tab { background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; min-height: 38px; padding: 8px 10px; }
.ai-data-tab:hover { background: #f4f8f8; color: var(--ink); }
.ai-data-tab.active { background: #e7f5f3; box-shadow: inset 0 -2px 0 var(--teal); color: var(--teal-dark); }
.ai-simple-form, .ai-prompt-import-form { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: 14px; }
.ai-prompt-import-form { grid-template-columns: minmax(150px, .65fr) minmax(260px, 1.35fr) auto; }
.ai-simple-form label, .ai-prompt-import-form label, .ai-compare-fields label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 5px; min-width: 0; }
.ai-prompt-file input { border: 1px dashed #b8cbd1; border-radius: 6px; color: var(--muted); font-size: 10px; min-height: 34px; padding: 6px; width: 100%; }
.ai-prompt-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-import-preview { background: #f7fbfb; border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 13px 14px; }
.ai-import-preview > div { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 9px; }
.ai-import-preview span { color: var(--muted); display: block; font-size: 10px; font-weight: 700; }
.ai-import-preview b { color: var(--ink); display: block; font-size: 15px; margin-top: 3px; }
.ai-import-preview p { color: var(--muted); font-size: 10px; grid-column: 1 / -1; margin: 0; }
.ai-import-replace { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 6px; grid-column: 1 / span 3; }
.ai-import-preview .dark-button { justify-self: end; }
.ai-prompt-compare-controls { margin-top: 16px; }
.ai-compare-fields { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px 14px; }
.ai-prompt-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ai-prompt-detail { margin-top: 14px; }
.ai-prompt-table { min-width: 1100px; }
.ai-prompt-table td:first-child { max-width: 360px; white-space: normal; }
.ai-prompt-table a { color: var(--teal); font-weight: 800; }
.ai-citation-page-table { min-width: 900px; }
.ai-citation-page-table td:first-child { max-width: 520px; white-space: normal; word-break: break-word; }
.ai-citation-page-table a { color: var(--teal-dark); font-weight: 800; }
.ai-prompt-ranking-filter { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.4fr); margin-top: 14px; padding: 13px 14px; }
.ai-prompt-ranking-filter label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 5px; }
.ai-prompt-ranking-filter p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 8px; }
.ai-prompt-ranking-table { min-width: 1120px; }
.ai-prompt-ranking-table td:first-child { max-width: 430px; white-space: normal; }
.ai-visibility-table { min-width: 560px; }
@media (max-width: 1050px) {
  .ai-data-entry-grid { grid-template-columns: 1fr; }
  .ai-simple-form, .ai-prompt-import-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-prompt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-data-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-simple-form, .ai-prompt-import-form, .ai-compare-fields, .ai-import-preview { grid-template-columns: 1fr; }
  .ai-prompt-ranking-filter { grid-template-columns: 1fr; }
  .ai-import-replace, .ai-import-preview p { grid-column: 1; }
  .ai-prompt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.manual-entry-card { margin-top: 16px; overflow: hidden; }
.manual-metric-form { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; }
.manual-metric-form label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; }
.manual-metric-form .span-two { grid-column: span 2; }
.manual-metric-form textarea { border: 1px solid var(--line); border-radius: 6px; color: #394959; font: inherit; min-height: 76px; padding: 9px; resize: vertical; width: 100%; }
.manual-replace { align-items: center; align-self: end; color: #526373 !important; display: flex !important; font-size: 11px !important; font-weight: 700 !important; gap: 7px; min-height: 36px; }
.manual-replace input { width: auto; }
.manual-metric-form .dark-button { align-self: end; justify-self: start; }
.ai-ingestion-guide { margin-top: 16px; overflow: hidden; }
.ai-ingestion-steps { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-ingestion-steps article { align-items: flex-start; display: flex; gap: 10px; min-width: 0; padding: 15px 17px; }
.ai-ingestion-steps article + article { border-left: 1px solid var(--line); }
.ai-ingestion-steps i { align-items: center; background: var(--teal); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 24px; font-size: 11px; font-style: normal; font-weight: 850; height: 24px; justify-content: center; }
.ai-ingestion-steps div { display: grid; gap: 4px; min-width: 0; }
.ai-ingestion-steps b { color: var(--ink); font-size: 12px; }
.ai-ingestion-steps span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.ai-ingestion-contract { background: #f6fafb; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 9px 17px; }
.ai-ingestion-contract span { color: var(--muted); font-size: 10px; }
.ai-ingestion-contract b { color: var(--text); margin-right: 5px; }
.manual-status { border-radius: 4px; display: inline-block; font-size: 10px; font-weight: 800; line-height: 1; padding: 5px 6px; white-space: nowrap; }
.manual-status.draft { background: #fff6df; color: #946300; }
.manual-status.verified { background: #e9f7f0; color: #2d7956; }
.manual-status.rejected { background: #fff0f1; color: #a5303a; }
.manual-status.superseded { background: #edf2f5; color: #60717f; }
.manual-review-form { align-items: center; display: grid; gap: 5px; grid-template-columns: 96px minmax(150px, 1fr) auto; min-width: 350px; }
.manual-review-form .select-control, .manual-review-form .search-control { height: 31px; font-size: 11px; }
.manual-review-form .outline-button { min-height: 31px; font-size: 11px; padding: 0 8px; }

/* Generic dashboard pages */
.generic-panel { max-width: 100%; }
.gsc-kpis { grid-template-columns: repeat(5, minmax(0,1fr)); }
.empty-state { padding: 45px 22px; text-align: center; color: var(--muted); font-size: 13px; }
.shopify-workspace { display: grid; gap: 13px; margin-top: 13px; }
.shopify-workspace-heading { align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 16px; justify-content: space-between; padding: 15px 17px; }
.shopify-workspace-heading .section-title { font-size: 19px; margin: 2px 0 3px; }
.shopify-workspace-heading .section-desc { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; }
.workspace-eyebrow { color: var(--teal); font-size: 10px; font-weight: 900; letter-spacing: .04em; margin: 0; }
.shopify-workspace-heading .source-chip { flex: 0 0 auto; margin: 1px 0 0; }
.shopify-workspace-heading-actions, .shopify-table-head-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }
.shopify-workspace-heading-actions .source-chip, .shopify-table-head-actions .source-chip { margin: 0; }
.shopify-workspace-controls, .shopify-traffic-controls { align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 9px; padding: 11px; }
.shopify-workspace-controls .field-label, .shopify-traffic-controls .field-label { min-width: 130px; }
.shopify-workspace-controls .select-control, .shopify-workspace-controls .date-control, .shopify-traffic-controls .select-control, .shopify-traffic-controls .search-control { height: 34px; font-size: 12px; }
.shopify-workspace-controls .control-button, .shopify-workspace-controls .outline-button, .shopify-traffic-controls .control-button, .shopify-traffic-controls .outline-button { min-height: 34px; white-space: nowrap; }
.shopify-workspace-controls [disabled] { cursor: not-allowed; opacity: .7; }
.shopify-workspace-kpis { margin-top: 0; }
.shopify-fact-contract { border-left: 4px solid var(--teal); }
.fact-contract-copy { color: #566876; font-size: 12px; line-height: 1.6; padding: 13px 15px 15px; }
.fact-contract-copy b { color: var(--ink); font-size: 12px; }
.fact-contract-copy p { margin: 4px 0 0; }
.fact-contract-copy .fact-contract-boundary { border-top: 1px solid #e7eeef; color: #68798a; margin-top: 10px; padding-top: 9px; }
.shopify-workspace-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shopify-workspace-chart { min-height: 223px; overflow: hidden; }
.workspace-chart-empty { align-items: center; background: repeating-linear-gradient(to bottom, #fff 0, #fff 38px, #f2f6f7 39px, #f2f6f7 40px); color: var(--muted); display: flex; font-size: 12px; justify-content: center; line-height: 1.6; min-height: 164px; padding: 18px; text-align: center; }
.workspace-empty-cell { min-width: 760px; }
.workspace-empty-cell b { color: var(--ink); display: block; font-size: 13px; }
.workspace-empty-cell p { margin: 5px auto 0; max-width: 550px; }
.shopify-workspace-table .card-head { align-items: start; }
.shopify-traffic-controls { align-items: stretch; display: block; overflow: hidden; padding: 0; }
.shopify-traffic-filter-grid { align-items: end; background: #f8fafb; display: grid; gap: 14px; grid-template-columns: 145px 145px minmax(420px, 1fr) 190px; padding: 14px 16px; }
.shopify-traffic-fixed-filter { display: grid; gap: 6px; }
.shopify-traffic-fixed-filter span, .shopify-traffic-page-types legend { color: var(--muted); font-size: 10px; font-weight: 800; }
.shopify-traffic-fixed-filter b { align-items: center; background: #edf7f5; border: 1px solid #b9ddd7; border-radius: 7px; color: var(--teal); display: flex; font-size: 14px; height: 42px; padding: 0 12px; }
.shopify-traffic-page-types { border: 0; margin: 0; min-width: 0; padding: 0; }
.shopify-traffic-page-types legend { margin-bottom: 6px; }
.shopify-traffic-type-options { display: flex; flex-wrap: wrap; gap: 7px; }
.shopify-traffic-type-options label { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); cursor: pointer; display: flex; font-size: 12px; font-weight: 700; gap: 6px; min-height: 42px; padding: 0 11px; }
.shopify-traffic-type-options label:has(input:checked) { background: #edf7f5; border-color: #8bc8c0; color: var(--teal); }
.shopify-traffic-type-options input { accent-color: var(--teal); height: 15px; margin: 0; width: 15px; }
.shopify-traffic-visitor { min-width: 0 !important; }
.shopify-traffic-visitor .select-control { height: 42px !important; }
.shopify-traffic-actions { align-items: center; background: #f8fafb; border-top: 1px solid var(--line); display: flex; gap: 9px; min-height: 58px; padding: 10px 16px; }
.shopify-traffic-actions .dark-button { min-height: 38px; }
.shopify-traffic-status { color: var(--muted); font-size: 11px; margin-left: auto; }
.shopify-traffic-advanced { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 0 16px; }
.shopify-traffic-advanced > summary { cursor: pointer; font-weight: 800; padding: 10px 0; }
.shopify-traffic-advanced[open] { padding-bottom: 13px; }
.shopify-traffic-advanced .focus-url-control { max-width: 520px; }
.shopify-traffic-controls > .shopify-draft-note { display: block; margin: 0; padding: 9px 16px; }
.shopify-seo-traffic-workspace .shopify-workspace-kpis { gap: 0; overflow: hidden; }
.shopify-seo-traffic-workspace .shopify-workspace-kpis .shopify-kpi { border-radius: 0; border-right: 0; }
.shopify-seo-traffic-workspace .shopify-workspace-kpis .shopify-kpi:first-child { border-radius: 8px 0 0 8px; }
.shopify-seo-traffic-workspace .shopify-workspace-kpis .shopify-kpi:last-child { border-radius: 0 8px 8px 0; border-right: 1px solid var(--line); }

@media (max-width: 1180px) {
  .shopify-traffic-filter-grid { grid-template-columns: 135px 135px minmax(360px, 1fr); }
  .shopify-traffic-visitor { grid-column: 1 / -1; max-width: 220px; }
}

@media (max-width: 820px) {
  .shopify-canvas { padding-left: 12px; padding-right: 12px; }
  .shopify-layout { grid-template-columns: minmax(0, 1fr); margin: 13px 0 0; width: 100%; }
  .shopify-nav {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding: 8px;
    position: static;
  }
  .shopify-nav .side-nav-heading { grid-column: 1 / -1; padding: 4px 5px 2px; }
  .shopify-nav .side-nav-button { border: 1px solid var(--line); border-radius: 5px; min-height: 40px; padding: 8px 10px; }
  .shopify-nav .side-nav-button.active { border: 1px solid var(--teal); border-left-width: 3px; padding-left: 8px; }
  .shopify-data-diagnostics > summary { align-items: flex-start; flex-wrap: wrap; }
  .shopify-data-diagnostics-statuses { order: 3; width: 100%; }
  .ga4-traffic-visuals { grid-template-columns: 1fr; }
  .shopify-traffic-filter-grid { grid-template-columns: 1fr 1fr; }
  .shopify-traffic-page-types, .shopify-traffic-visitor { grid-column: 1 / -1; }
  .shopify-traffic-actions { align-items: flex-start; flex-wrap: wrap; }
  .shopify-traffic-status { flex-basis: 100%; margin-left: 0; }
  .shopify-traffic-heading, .shopify-workspace-heading-actions, .shopify-table-head-actions { align-items: flex-start; flex-direction: column; }
}
.focus-landing-controls { justify-content: flex-start; }
.workspace-toggle { align-items: center; display: flex; gap: 5px; min-height: 34px; }
.focus-landing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.focus-landing-empty-card { align-items: flex-start; border-style: dashed; color: var(--muted); display: grid; gap: 7px; min-height: 165px; padding: 15px; }
.focus-landing-empty-card .source-chip { margin: 0; }
.focus-landing-empty-card h3 { color: var(--ink); font-size: 14px; margin: 1px 0 0; }
.focus-landing-empty-card p { font-size: 12px; line-height: 1.6; margin: 0; }
.focus-landing-filter-form { align-items: end; display: flex; flex: 1 1 620px; flex-wrap: wrap; gap: 9px; }
.focus-landing-filter-form .field-label { min-width: 130px; }
.focus-landing-filter-form .focus-url-control { flex: 1 1 220px; min-width: 180px; }
.focus-landing-count { align-self: center; white-space: nowrap; }
.focus-landing-page-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 15px; }
.focus-landing-page-card > header { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.focus-landing-date { color: var(--muted); font-size: 11px; font-weight: 700; }
.focus-landing-page-card h3 { font-size: 13px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.focus-landing-url { color: var(--teal); text-decoration: none; }
.focus-landing-url:hover { text-decoration: underline; }
.focus-landing-metrics { background: #f6faf9; border: 1px solid #dfedea; border-radius: 7px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 8px; }
.focus-landing-metrics span { display: grid; gap: 2px; min-width: 0; }
.focus-landing-metrics b { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.focus-landing-metrics strong { color: var(--ink); font-size: 15px; }
.focus-landing-copy { display: grid; gap: 9px; margin: 0; }
.focus-landing-copy div { display: grid; gap: 3px; }
.focus-landing-copy dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.focus-landing-copy dd { color: #40515f; font-size: 12px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.focus-landing-page-card footer { border-top: 1px solid #e7eeef; margin-top: auto; padding-top: 10px; }
.focus-landing-actions, .focus-landing-editor-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.focus-landing-actions .outline-button, .focus-landing-actions .danger-button { min-height: 30px; padding: 5px 8px; }
.focus-landing-actions .danger-button { background: #fff; border: 1px solid #c86c73; border-radius: 5px; color: #a23d45; cursor: pointer; font-weight: 800; }
.focus-landing-editor { padding: 15px; }
.focus-landing-editor .card-head { align-items: start; margin-bottom: 13px; }
.focus-landing-form { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.focus-landing-form label { color: #566876; display: grid; font-size: 11px; font-weight: 800; gap: 5px; }
.focus-landing-form .span-two { grid-column: span 2; }
.focus-landing-form textarea { border: 1px solid var(--line); border-radius: 6px; color: #394959; font: inherit; min-height: 76px; padding: 9px; resize: vertical; width: 100%; }
.focus-landing-editor-actions .source-note { margin-left: auto; }
.focus-landing-table td { vertical-align: top; }
.annual-trend-controls { justify-content: flex-start; }
.annual-year-picker { align-items: center; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 8px; min-height: 34px; padding: 0 9px; }
.annual-year-picker > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.annual-year-picker .toggle-label { font-size: 11px; }
.annual-trend-chart { overflow: hidden; }
.annual-trend-empty { align-items: center; background: repeating-linear-gradient(to bottom, #fff 0, #fff 39px, #eff4f5 40px); color: var(--muted); display: grid; min-height: 214px; padding: 16px; place-content: center; text-align: center; }
.annual-trend-empty p { font-size: 12px; margin: 10px 0 0; }
.annual-trend-legend { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.annual-trend-legend span { color: #536475; font-size: 11px; font-weight: 700; }
.annual-trend-legend i { border-radius: 50%; display: inline-block; height: 8px; margin-right: 5px; vertical-align: -1px; width: 8px; }
.annual-trend-chart-canvas { display: grid; gap: 8px; min-height: 246px; padding: 14px 15px 9px; }
.annual-trend-svg { display: block; height: auto; max-height: 262px; width: 100%; }
.annual-trend-quality { display: grid; gap: 8px; margin: 0 0 12px; }
.annual-trend-quality dl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.annual-trend-quality dl div { align-items: baseline; display: flex; gap: 5px; }
.annual-trend-quality dt { color: #6d7d87; font-size: 10px; font-weight: 800; }
.annual-trend-quality dd { color: #334752; font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.annual-trend-import-fields { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
.annual-trend-import-fields .competitor-import-file { grid-column: span 2; }
.annual-trend-review-form { align-items: end; background: #f6fbfa; border: 1px solid #cfe2df; border-radius: 6px; display: grid; gap: 8px; grid-template-columns: minmax(170px, .7fr) minmax(240px, 1.3fr) auto; padding: 10px; }
.annual-trend-review-note { min-width: 0; }
.annual-trend-review-form .dark-button { min-height: 33px; white-space: nowrap; }

.modal-backdrop { align-items: center; background: rgba(27,43,54,.35); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 10; }
.modal { background: #fff; border-radius: 9px; box-shadow: 0 20px 65px rgba(11,30,41,.24); max-width: 560px; width: 100%; padding: 20px; }
.modal h3 { margin: 0; color: var(--ink); font-size: 18px; }
.modal p { color: var(--muted); line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.confirmation-modal { max-width: 510px; }
.confirmation-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.confirmation-head h2 { margin: 2px 0 0; }
.confirmation-modal p { margin: 15px 0 0; }
.confirmation-verification { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 6px; margin-top: 15px; }
.confirmation-verification strong { color: var(--ink); overflow-wrap: anywhere; }
.confirmation-verification .search-control { height: 38px; }
.site-create-modal { max-width: 590px; overflow: hidden; padding: 0; }
.site-create-form { display: grid; gap: 12px; padding: 18px 23px 23px; }
.site-create-form > label { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 5px; }
.site-create-note { background: #f5faf9; border: 1px solid #d5e6e2; border-radius: 7px; color: #526772; font-size: 11px; line-height: 1.6; margin: 0; padding: 10px 12px; }
.gsc-csv-import-modal { max-width: 860px; overflow: hidden; padding: 0; }
.gsc-csv-import-body { display: grid; gap: 14px; }
.gsc-csv-import-form { display: grid; gap: 14px; }
.gsc-csv-import-range { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsc-csv-import-range label, .gsc-csv-import-inputs label { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 5px; }
.gsc-csv-import-help { background: #f7fafb; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; margin: 0; padding: 10px 12px; }
.gsc-csv-import-inputs { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsc-csv-import-inputs label { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-height: 76px; padding: 10px; }
.gsc-csv-import-inputs label span { display: grid; gap: 3px; }
.gsc-csv-import-inputs label b { color: var(--ink); font-size: 12px; }
.gsc-csv-import-inputs label small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
.gsc-csv-import-inputs input[type="file"] { color: var(--muted); font-size: 11px; max-width: 100%; }
.gsc-csv-import-kpis { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gsc-csv-import-kpis > div { background: #f7fafb; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 4px; min-height: 68px; padding: 10px; }
.gsc-csv-import-kpis span { color: var(--muted); font-size: 10px; font-weight: 800; }
.gsc-csv-import-kpis b { color: var(--ink); font-size: 13px; line-height: 1.35; }
.gsc-csv-import-files { display: grid; gap: 7px; }
.gsc-csv-import-file { align-items: center; border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 16px; justify-content: space-between; padding: 9px 11px; }
.gsc-csv-import-file > div { display: grid; gap: 2px; min-width: 0; }
.gsc-csv-import-file b { color: var(--ink); font-size: 12px; }
.gsc-csv-import-file span, .gsc-csv-import-file small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-csv-import-file small { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gsc-csv-import-manifest { background: #f7fafb; border-left: 3px solid var(--teal); font-size: 11px; margin: 0; padding: 9px 11px; word-break: break-all; }
.gsc-csv-import-manifest code { color: #425669; font-size: 10px; }
.gsc-csv-import-reconciliation { background: #fff8e7; border: 1px solid #ecd6a2; border-radius: 7px; color: #765312; font-size: 11px; line-height: 1.55; margin: 0; padding: 9px 11px; }
.gsc-csv-import-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; gap: 14px; justify-content: space-between; line-height: 1.5; padding: 13px 23px; }
.gsc-csv-import-footer > div { display: flex; flex: 0 0 auto; gap: 8px; }
.gsc-csv-import-attestation { align-items: flex-start; display: flex; gap: 8px; max-width: 550px; }
.gsc-csv-import-attestation input { margin-top: 3px; }
.hidden { display: none !important; }
.toast { position: fixed; z-index: 20; right: 20px; bottom: 20px; padding: 10px 13px; border-radius: 6px; background: #1d2d38; color: #fff; font-size: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.17); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
  .keyword-snapshot-toolbar { grid-template-columns: 1fr; }
  .keyword-filter-top { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .gsc-comparison-grid, .gsc-rank-distribution > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(5, minmax(105px,1fr)); }
  .detail-filter-grid { grid-template-columns: 1.3fr repeat(4, minmax(110px,1fr)); }
  .keyword-risk-dashboard { grid-template-columns: 1fr; }
  .shopify-control-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .shopify-period-comparison-charts { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .keyword-filter-bottom { grid-template-columns: minmax(140px, 160px) minmax(220px, 1fr); }
}

@media (max-width: 720px) {
  .modal-backdrop { align-items: flex-start; overflow: auto; padding: 12px; }
  .gsc-csv-import-range, .gsc-csv-import-inputs, .gsc-csv-import-kpis { grid-template-columns: 1fr; }
  .gsc-csv-import-file, .gsc-csv-import-footer { align-items: flex-start; flex-direction: column; }
  .gsc-csv-import-file small, .gsc-csv-import-footer > div { width: 100%; }
  .gsc-csv-import-footer > div { justify-content: flex-end; }
  .keyword-risk-card-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .keyword-period-pair, .keyword-filter-top, .gsc-comparison-grid, .gsc-rank-distribution > div, .gsc-potential-rule-guide { grid-template-columns: 1fr; }
  .keyword-project-scope-row, .gsc-segment-setup { align-items: stretch; flex-direction: column; }
  .keyword-filter-bottom { align-items: stretch; display: flex; flex-direction: column; }
  .keyword-filter-bottom .search-control, .keyword-filter-bottom .select-control, .keyword-project-scope-row .keyword-data-project { width: 100%; }
  .keyword-risk-bar-row { grid-template-columns: minmax(90px, 1fr) minmax(70px, 1fr) 28px; }
  .shopify-control-grid { grid-template-columns: 1fr; }
  .shopify-hero-actions { align-items: stretch; flex-direction: column; }
  .shopify-hero-statuses { justify-content: flex-start; }
  .ai-ingestion-steps { grid-template-columns: 1fr; }
  .ai-ingestion-steps article + article { border-left: 0; border-top: 1px solid var(--line); }
}

/* Production-tool additions. The visual shell intentionally follows the captured visual reference baseline. */
.auth-screen { align-items: center; background: #f4f7f8; display: flex; font-family: Arial, "Microsoft YaHei", sans-serif; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card { background: #fff; border: 1px solid #d7e0e7; border-radius: 14px; box-shadow: 0 18px 50px #10263c1a; max-width: 430px; padding: 30px; width: 100%; }
.auth-brand { align-items: center; display: flex; gap: 12px; margin-bottom: 24px; }
.auth-logo { align-items: center; border: 2px solid #d91e36; border-radius: 50%; color: #d91e36; display: flex; flex: 0 0 42px; font-size: 14px; font-weight: 900; height: 42px; justify-content: center; width: 42px; }
.auth-eyebrow { color: #08756f; font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1; margin: 0; }
.auth-card h1 { color: #0e1c2c; font-size: 23px; line-height: 1.2; margin: 5px 0 0; }
.auth-introduction { color: #607184; font-size: 13px; line-height: 1.6; margin: 0 0 20px; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { color: #0e1c2c; display: grid; font-size: 13px; font-weight: 700; gap: 8px; }
.auth-form .search-control { border-color: #bfcbd5; border-radius: 8px; font-size: 16px; height: 43px; padding: 0 12px; }
.auth-form .search-control:focus { border-color: #08756f; box-shadow: 0 0 0 3px rgba(8, 117, 111, .1); outline: 0; }
.auth-form .dark-button { background: #12202f; border: 0; border-radius: 8px; font-size: 14px; margin-top: 2px; min-height: 0; padding: 12px; width: 100%; }
.auth-form .dark-button:hover { background: #0c1722; }
.auth-hint { color: #607184; font-size: 11px; line-height: 1.6; margin: 16px 0 0; text-align: center; }
.app-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.header-user { align-self: center; color: var(--muted); font-size: 12px; margin-right: 3px; }
.header-actions { align-items: center; }
.live-state { color: #3b765d; background: #ebf7f0; border: 1px solid #bee1cc; border-radius: 4px; display: inline-flex; font-size: 10px; font-weight: 800; padding: 5px 7px; white-space: nowrap; }
.live-state.empty { color: #87661f; background: #fff7e5; border-color: #eed69e; }
.config-modal { max-width: 900px; padding: 0; overflow: hidden; }
.project-config-modal { max-width: 1120px; }
.config-head { align-items: start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px 23px 15px; }
.config-head h2 { margin: 3px 0 3px; color: var(--ink); font-size: 20px; }
.config-head p { color: var(--muted); font-size: 12px; margin: 0; }
.config-body { max-height: 67vh; overflow: auto; padding: 17px 23px 23px; }
.connector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.connector-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.connector-card h3 { color: var(--ink); font-size: 14px; margin: 0; }
.connector-card > p { color: var(--muted); font-size: 11px; line-height: 1.5; min-height: 35px; }
.connector-form { display: grid; gap: 8px; }
.connector-form label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 3px; }
.connector-form textarea { min-height: 78px; resize: vertical; }
.connector-actions { display: flex; gap: 7px; margin-top: 3px; }
.connector-status { color: var(--muted); font-size: 10px; font-weight: 700; min-height: 15px; }
.connector-status.ready { color: var(--green); }
.connector-status.error { color: var(--red); }
.connector-permission-note { background: #f7fafb; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); display: grid; font-size: 10px; gap: 4px; line-height: 1.45; padding: 8px 9px; }
.connector-permission-note.error { background: #fff2f2; border-color: #efc8ca; color: #8d3338; }
.connector-permission-note code { overflow-wrap: anywhere; }
.settings-tabs { background: #f7fafb; border-bottom: 1px solid var(--line); display: flex; gap: 4px; padding: 10px 23px 0; }
.settings-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; padding: 10px 12px; }
.settings-tabs button.active { border-bottom-color: var(--teal); color: var(--teal); }
.team-settings { display: grid; gap: 12px; }
.member-create-form { align-items: end; display: grid; gap: 9px; grid-template-columns: 1.15fr 1.35fr 1fr .9fr auto; }
.member-create-form label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.site-member-add-form { grid-template-columns: minmax(210px, 1.5fr) minmax(140px, .85fr) auto; }
.site-member-boundary { color: var(--muted); font-size: 10px; grid-column: 1 / -1; line-height: 1.45; margin: 0; }
.site-membership-revocation-note { margin: 10px 0; }
.site-member-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; min-width: 180px; }
.site-role-locked, .site-member-action-note { color: var(--muted); font-size: 10px; line-height: 1.4; }
.project-settings { display: grid; gap: 12px; }
.organization-sites-settings { display: grid; gap: 12px; }
.organization-sites-head { align-items: flex-start; background: linear-gradient(118deg, #f2faf9 0%, #fff 66%); border: 1px solid #cfe2df; border-left: 4px solid var(--teal); border-radius: 8px; display: flex; gap: 18px; justify-content: space-between; padding: 14px 15px; }
.organization-sites-head .site-identity { font-size: 10px; margin-bottom: 4px; }
.organization-sites-head .card-title { color: var(--ink); font-size: 16px; margin: 0; }
.organization-sites-head .card-subtitle { color: #5c6f7c; font-size: 11px; line-height: 1.55; margin: 4px 0 0; max-width: 760px; }
.organization-sites-head .teal-button { flex: 0 0 auto; min-height: 34px; white-space: nowrap; }
.organization-site-summary { align-items: center; background: #f8fafb; border: 1px solid var(--line); border-radius: 7px; color: #637482; display: flex; flex-wrap: wrap; font-size: 10px; font-weight: 700; gap: 6px 18px; padding: 9px 12px; }
.organization-site-summary span { white-space: nowrap; }
.organization-site-summary b { color: var(--ink); font-size: 13px; margin-right: 3px; }
.organization-site-list { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.organization-site-list > .empty-state { background: #fff; border: 1px dashed #bdccd4; border-radius: 8px; color: #60717d; font-size: 12px; grid-column: 1 / -1; line-height: 1.6; padding: 24px; text-align: center; }
.organization-site-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 11px; min-width: 0; padding: 13px; }
.organization-site-card.is-active { border-top: 3px solid #5baca5; }
.organization-site-card.is-archived { background: #fcfcfc; border-color: #d8dee2; border-top: 3px solid #9aa7ae; }
.organization-site-card > header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.organization-site-kicker { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
.organization-site-status, .organization-site-current { border-radius: 999px; display: inline-block; font-size: 9px; font-weight: 800; padding: 3px 7px; white-space: nowrap; }
.organization-site-status.active { background: #e8f6ef; color: #2f7750; }
.organization-site-status.archived { background: #eef1f3; color: #697985; }
.organization-site-current { background: #e7f4f2; color: #16716b; }
.organization-site-card h3 { color: var(--ink); font-size: 14px; line-height: 1.35; margin: 5px 0 1px; overflow-wrap: anywhere; }
.organization-site-card header small { color: #86949e; display: block; font-size: 9px; }
.organization-site-card-actions { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.organization-site-card-actions .control-button, .organization-site-card-actions .outline-button { font-size: 10px; min-height: 29px; padding: 0 8px; }
.organization-site-card-actions .text-danger-button { font-size: 10px; min-height: 29px; padding: 0 4px; }
.organization-site-restore { border-color: #6e8994; }
.organization-site-enter { color: #245d76; }
.organization-site-facts { display: grid; gap: 7px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.organization-site-facts > div { background: #f8fafb; border: 1px solid #edf1f3; border-radius: 5px; min-width: 0; padding: 7px 8px; }
.organization-site-facts dt { color: #84919a; font-size: 9px; font-weight: 800; margin: 0; }
.organization-site-facts dd { color: #40515d; font-size: 10px; font-weight: 700; margin: 2px 0 0; overflow-wrap: anywhere; }
.organization-site-empty-facts { color: #84919a; font-size: 10px; margin: 2px 0 0; }
.organization-site-readiness { align-items: center; background: #f3f8f7; border: 1px solid #d8e9e6; border-radius: 5px; color: #54706f; display: flex; flex-wrap: wrap; font-size: 10px; font-weight: 700; gap: 4px 12px; line-height: 1.45; margin: 0; padding: 7px 8px; }
.organization-site-readiness b { color: var(--teal-dark); }
.organization-site-readiness .is-warning { color: #9c5e21; }
.organization-site-edit-form { align-items: end; background: #f5faf9; border: 1px solid #cfe2df; border-radius: 7px; display: grid; gap: 8px; grid-template-columns: minmax(135px, 1fr) minmax(150px, 1.2fr) minmax(120px, .8fr); padding: 10px; }
.organization-site-edit-form label { color: #657681; display: grid; font-size: 9px; font-weight: 800; gap: 4px; min-width: 0; }
.organization-site-edit-form .search-control { font-size: 11px; height: 32px; padding: 0 9px; }
.organization-site-edit-actions { display: flex; gap: 7px; grid-column: 1 / -1; justify-content: flex-end; }
.organization-site-edit-actions .control-button, .organization-site-edit-actions .teal-button { font-size: 10px; min-height: 30px; padding: 0 10px; }
.organization-site-archived-note { background: #f7f8f9; border-left: 3px solid #aab5bb; color: #657682; font-size: 10px; line-height: 1.55; margin: 0; padding: 8px 9px; }
.organization-site-retry { font-size: 10px; margin-left: 8px; min-height: 27px; padding: 0 8px; vertical-align: middle; }
.project-create-card { display: grid; gap: 10px; }
.project-create-form, .project-update-form, .project-member-add-form, .project-scope-form { align-items: end; display: grid; gap: 9px; }
.project-create-form { grid-template-columns: minmax(160px, 1fr) minmax(190px, 1fr) auto; }
.project-create-form label, .project-update-form label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.project-description-field { grid-column: span 2; }
.project-description-field textarea { min-height: 54px; resize: vertical; }
.project-workspace { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.project-workspace-grid { display: grid; gap: 14px; grid-template-columns: 214px minmax(0, 1fr); }
.project-list { border: 1px solid var(--line); border-radius: 7px; display: grid; align-content: start; gap: 5px; min-height: 160px; padding: 6px; }
.project-list-item { background: #fff; border: 1px solid transparent; border-radius: 6px; color: var(--ink); cursor: pointer; display: grid; gap: 3px; padding: 9px 10px; text-align: left; }
.project-list-item:hover { background: #f6faf9; border-color: #d8e8e5; }
.project-list-item.active { background: #eaf6f4; border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.project-list-item strong { font-size: 12px; }
.project-list-item span { color: var(--muted); font-size: 10px; }
.project-detail { display: grid; gap: 11px; min-width: 0; }
.project-detail-card { border: 1px solid var(--line); border-radius: 7px; padding: 12px; }
.project-detail-card > .card-title { margin: 0 0 7px; }
.project-danger-zone { align-items: center; background: #fff8f7; border-color: #ebc7c5; display: flex; gap: 16px; justify-content: space-between; }
.project-danger-zone .card-title { color: #8f2932; margin: 0 0 4px; }
.project-danger-zone .card-subtitle { margin: 0; }
.project-delete-button { border: 1px solid #c65b63; border-radius: 6px; flex: 0 0 auto; font-size: 11px; min-height: 34px; padding: 0 11px; }
.project-delete-button:hover { background: #fff0ef; text-decoration: none; }
.project-summary-card { align-items: center; background: #f9fbfb; display: flex; justify-content: space-between; gap: 12px; }
.project-summary-card h3 { color: var(--ink); font-size: 16px; margin: 6px 0 2px; }
.project-summary-card p { color: var(--muted); font-size: 11px; margin: 0; }
.project-update-form { grid-template-columns: minmax(180px, 1fr) 130px auto; }
.project-member-add-form { grid-template-columns: minmax(190px, 1fr) 120px auto; margin-bottom: 10px; }
.project-scope-form { grid-template-columns: 130px minmax(180px, 1fr) minmax(150px, .75fr) auto; margin-bottom: 10px; }
.scope-list { display: grid; gap: 0; }
.scope-row { align-items: center; border-top: 1px solid #edf1f3; display: grid; gap: 9px; grid-template-columns: auto minmax(130px, .75fr) minmax(120px, 1fr) auto; padding: 8px 0; }
.scope-row b { color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
.scope-row > span:not(.type-pill) { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.text-danger-button { background: transparent; border: 0; color: #a5303a; cursor: pointer; font-size: 10px; font-weight: 800; padding: 4px; white-space: nowrap; }
.text-danger-button:hover { text-decoration: underline; }
.loading-inline { color: var(--muted); font-size: 11px; padding: 4px 0; }
.member-table small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }
.member-table td { vertical-align: middle; }
.toggle-label { align-items: center; color: var(--muted); display: inline-flex; font-size: 11px; gap: 5px; white-space: nowrap; }
.audit-list { display: grid; gap: 0; }
.audit-row { align-items: baseline; border-bottom: 1px solid #edf1f3; display: grid; gap: 8px; grid-template-columns: minmax(120px, .9fr) minmax(220px, 2fr) auto; padding: 9px 0; }
.audit-row:last-child { border-bottom: 0; }
.audit-row b { color: var(--ink); font-size: 11px; }
.audit-row span, .audit-row time { color: var(--muted); font-size: 10px; }
.audit-row time { white-space: nowrap; }
.settings-note { border-left: 3px solid var(--teal); background: #edf8f6; color: #406066; margin-top: 14px; padding: 11px; font-size: 11px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.date-range { display: flex; gap: 8px; align-items: end; }
.date-range label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.range-bar { display: flex; align-items: end; gap: 8px; margin-bottom: 12px; }
.range-bar .range-caption { color: var(--muted); font-size: 11px; margin-left: auto; padding-bottom: 8px; }
.data-warning { background: #fff7e7; border: 1px solid #ead29a; border-radius: 6px; color: #7d692d; margin-bottom: 12px; padding: 10px 12px; font-size: 12px; }
.data-warning strong { color: #825b07; }
.ga4-project-publication-boundary { background: #edf8f6; border-color: #b9ddd6; color: #406b66; }
.ga4-project-publication-boundary strong { color: #16756f; }
.ga4-project-publication-boundary code { color: #16756f; font-size: 11px; font-weight: 800; }
.empty-live { padding: 42px 20px; text-align: center; }
.empty-live h3 { color: var(--ink); margin: 0 0 6px; font-size: 17px; }
.empty-live p { color: var(--muted); max-width: 560px; margin: 0 auto 15px; line-height: 1.6; }
.compact-table { min-width: 760px; }
.summary-copy { color: #435465; line-height: 1.65; margin: 0; }
.sync-list { display: grid; gap: 7px; padding: 14px; }
.sync-row { display: grid; grid-template-columns: 94px 80px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid #edf1f3; padding-bottom: 7px; font-size: 12px; }
.sync-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sync-connector { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.sync-summary { display: grid; gap: 2px; min-width: 0; }
.sync-summary b { color: var(--ink); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-summary small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-row time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.sync-status { border-radius: 4px; display: inline-block; font-size: 10px; font-weight: 800; padding: 4px 6px; width: max-content; }
.sync-status.succeeded { color: #286943; background: #e9f6ed; }
.sync-status.failed { color: #a5303a; background: #fff0f1; }
.sync-status.running { color: #386c95; background: #ecf4fa; }
.sync-status.queued { color: #735d1c; background: #fff6df; }
.sync-status.cancelled { color: #65717b; background: #eef1f3; }
.sync-status.not_configured { color: #8b6e2b; background: #fff6df; }
.import-card { overflow: hidden; }
.import-box { display: grid; grid-template-columns: 150px 1fr auto auto; align-items: end; gap: 8px; padding: 13px 14px; }
.import-box label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
.file-caption { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 8px; }
.import-preview { background: #f4fbf8; border-top: 1px solid #cce5dd; color: #425a5e; display: grid; gap: 8px; font-size: 11px; line-height: 1.55; padding: 11px 14px 13px; }
.import-preview b { color: var(--teal); }
.import-preview details { color: var(--muted); }
.import-preview summary { cursor: pointer; font-weight: 800; }
.import-preview ul { margin: 6px 0 0; padding-left: 18px; }
.import-preview .dark-button { justify-self: start; }
.keyword-control-bar { align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 9px; grid-template-columns: repeat(6, minmax(118px, 1fr)) minmax(210px, 1.7fr) auto; margin-bottom: 13px; padding: 11px; }
.keyword-control-bar > label { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.keyword-control-bar .outline-button { min-height: 34px; white-space: nowrap; }
.keyword-control-bar > .keyword-snapshot-history-note { grid-column: 1 / -1; }
.keyword-search-label { min-width: 190px; }
.priority-actions { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; padding: 14px; }
.priority-actions h3 { color: var(--ink); margin: 0 0 5px; }
.chip { background: #edf5f5; border: 1px solid #d2e5e2; color: #226a66; border-radius: 999px; display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 7px; }
.url-inspection { display: flex; gap: 8px; padding: 14px; }
.url-inspection .search-control { flex: 1; }
.inspection-result { background: #f6fafb; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; padding: 12px 14px; }
.inspection-result div { color: var(--muted); font-size: 10px; }
.inspection-result b { color: var(--ink); display: block; font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watchlist-form { display: grid; grid-template-columns: 105px 1fr auto; gap: 8px; padding: 14px; }
.tutorial-modal { max-width: 1070px; max-height: calc(100vh - 48px); overflow: hidden; padding: 0; }
.tutorial-header { display: flex; justify-content: space-between; gap: 20px; padding: 22px 27px 18px; border-bottom: 1px solid var(--line); }
.tutorial-header h2 { margin: 0; font-size: 24px; color: #10171d; }
.tutorial-header p { color: var(--muted); margin: 7px 0 0; }
.tutorial-close { border: 0; background: #edf3f4; color: #334451; width: 39px; height: 39px; border-radius: 50%; font-size: 24px; line-height: 1; }
.tutorial-nav { display: flex; gap: 8px; overflow: auto; padding: 14px 27px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tutorial-nav-button { border: 1px solid var(--line); background: #fff; border-radius: 18px; color: #475766; font-weight: 800; font-size: 11px; padding: 7px 11px; }
.tutorial-nav-button.active { color: var(--teal); background: #eef8f6; border-color: var(--teal); }
.tutorial-scroll { max-height: calc(100vh - 205px); overflow: auto; padding: 18px 27px 35px; background: #f8fafb; }
.tutorial-section { scroll-margin-top: 8px; margin-bottom: 19px; }
.tutorial-section-lead { align-items: center; background: linear-gradient(100deg, #effaf8, #fff); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 8px; display: flex; gap: 14px; padding: 15px 17px; }
.tutorial-section-lead span { background: var(--teal); border-radius: 18px; color: #fff; font-size: 11px; font-weight: 800; padding: 7px 10px; white-space: nowrap; }
.tutorial-section-lead h2 { color: var(--ink); font-size: 18px; margin: 0; }
.tutorial-section-lead p { color: var(--muted); margin: 3px 0 0; font-size: 12px; }
.tutorial-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; padding: 17px 19px; }
.tutorial-card.with-icon { display: grid; grid-template-columns: 42px 1fr; gap: 13px; }
.tutorial-icon { background: var(--teal); color: #fff; border-radius: 7px; font-size: 11px; font-weight: 800; height: 38px; display: grid; place-items: center; }
.tutorial-card h3 { color: var(--ink); font-size: 15px; margin: 0; }
.tutorial-card h4 { color: var(--teal); font-size: 13px; margin: 15px 0 7px; }
.tutorial-card p, .tutorial-list { color: #4b5b6a; font-size: 12px; line-height: 1.7; }
.tutorial-list { margin: 7px 0; padding-left: 22px; }
.tutorial-code { background: #182630; color: #d9eef2; border-radius: 6px; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 11px; overflow: auto; white-space: pre-wrap; }
.tutorial-notice { background: #fff8e8; border-left: 3px solid #d8a12b; color: #755e2b; font-size: 11px; line-height: 1.6; padding: 10px; }

@media (max-width: 900px) {
  .connector-grid { grid-template-columns: 1fr; }
  .member-create-form { grid-template-columns: 1fr 1fr; }
  .member-create-form button { grid-column: span 2; }
  .site-member-add-form { grid-template-columns: 1fr 1fr; }
  .site-member-add-form .site-member-boundary { grid-column: span 2; }
  .organization-sites-head { flex-wrap: wrap; }
  .organization-site-list { grid-template-columns: 1fr; }
  .organization-site-edit-form { grid-template-columns: 1fr 1fr; }
  .organization-site-edit-form label:first-child { grid-column: span 2; }
  .project-create-form, .project-update-form, .project-member-add-form, .project-scope-form, .competitor-action-form { grid-template-columns: 1fr 1fr; }
  .project-create-form .project-description-field, .project-update-form .project-description-field { grid-column: span 2; }
  .project-workspace-grid { grid-template-columns: 1fr; }
  .project-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); min-height: auto; }
  .project-danger-zone { align-items: stretch; flex-direction: column; }
  .project-delete-button { align-self: flex-start; }
  .scope-row { grid-template-columns: auto minmax(110px, 1fr) auto; }
  .scope-row > span:not(.type-pill) { grid-column: 2 / -1; }
  .audit-row { grid-template-columns: 1fr; gap: 3px; }
  .import-box { grid-template-columns: 1fr; }
  .file-caption { padding-bottom: 0; }
}
.tutorial-shot { align-items: center; background: #f8fafb; border: 1px dashed #bbccd3; border-radius: 6px; color: #536774; display: flex; gap: 8px; padding: 9px; text-align: left; width: 100%; margin-top: 9px; font-size: 11px; }
.tutorial-shot b { color: var(--teal); margin-left: auto; font-size: 10px; white-space: nowrap; }
.tutorial-shots { display: grid; gap: 6px; }
.tutorial-details details { border-bottom: 1px solid #edf1f3; color: #4d5d6c; font-size: 12px; padding: 8px 0; }
.tutorial-details summary { cursor: pointer; font-weight: 800; }
.tutorial-details p { margin: 7px 0 0; }
.tutorial-faq div { border-bottom: 1px solid #edf1f3; padding: 10px 0; }
.tutorial-faq dt { color: var(--ink); font-size: 12px; font-weight: 800; }
.tutorial-faq dd { color: var(--muted); margin: 4px 0 0; font-size: 12px; }

/* Deep-board shells: GSC, GSC drilldown, keyword drilldown and competitors. */
.deep-board-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 18px; align-items: start; }
.module-nav { background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 12px; }
.deep-board-content { min-width: 0; }
.board-status-bar { align-items: center; background: #fff7e7; border: 1px solid #ead29a; border-radius: 6px; color: #716750; display: flex; font-size: 12px; gap: 13px; margin-bottom: 13px; padding: 10px 12px; }
.board-status-bar b { color: #875400; }
.board-status-bar span:nth-child(2) { margin-left: auto; }
.metric-grid { display: grid; gap: 11px; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { background: var(--card); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); min-height: 94px; padding: 13px; }
.metric-card span { color: var(--muted); display: block; font-size: 11px; font-weight: 700; }
.metric-card b { color: var(--ink); display: block; font-size: 24px; letter-spacing: -.55px; line-height: 1.14; margin-top: 6px; }
.metric-card small { color: var(--muted); display: block; font-size: 10px; font-weight: 700; margin-top: 7px; }
.dashboard-dual { display: grid; gap: 17px; grid-template-columns: 1.14fr .86fr; }
.deep-panel { min-width: 0; }
.panel-title-row { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 11px; }
.inline-actions { align-items: end; display: flex; gap: 8px; }
.short-search { width: 240px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.filter-pill { background: #fff; border: 1px solid var(--line); border-radius: 16px; color: #536475; font-size: 12px; font-weight: 700; min-height: 30px; padding: 0 12px; }
.filter-pill.active, .filter-pill:hover { background: var(--teal-pale); border-color: #8ab7b2; color: var(--teal-dark); }
.visual-trend { min-height: 251px; }
.trend-inner { padding: 15px 16px 13px; }
.trend-bars { align-items: end; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #edf2f4 32px); border-bottom: 1px solid #d9e3e8; display: flex; gap: 10px; height: 151px; justify-content: space-between; padding: 8px 7px 0; }
.trend-bars i { background: linear-gradient(to top, #197d79, #59aaa4); border-radius: 4px 4px 1px 1px; display: block; flex: 1; max-width: 42px; min-height: 5px; }
.trend-bars.blue i { background: linear-gradient(to top, #3764a9, #7d9ad0); }
.trend-bars.red i { background: linear-gradient(to top, #c96465, #eaa0a0); }
.trend-labels { color: var(--quiet); display: flex; font-size: 10px; justify-content: space-between; padding: 6px 0 0; }
.compact-list { padding: 5px 15px 13px; }
.compact-list > div { align-items: center; border-bottom: 1px solid #ebf0f2; display: grid; font-size: 12px; gap: 9px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 9px 0; }
.compact-list > div:last-child { border-bottom: 0; }
.compact-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list b { color: var(--ink); font-size: 12px; }
.compact-list small { color: var(--muted); font-size: 10px; min-width: 48px; text-align: right; }
.micro-trend { display: inline-block; min-width: 90px; vertical-align: middle; }
.micro-trend .trend-bars { background: none; border: 0; gap: 3px; height: 22px; padding: 0; width: 90px; }
.micro-trend .trend-bars i { border-radius: 2px 2px 0 0; min-width: 4px; }
.opportunity-grid { display: grid; gap: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opportunity-card { padding: 15px; }
.opportunity-card > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.opportunity-card > b { color: var(--ink); display: block; font-size: 31px; letter-spacing: -.8px; margin-top: 3px; }
.opportunity-card p { color: #566777; font-size: 12px; line-height: 1.5; min-height: 38px; }
.opportunity-card > div { border-top: 1px solid #ebf0f2; display: flex; justify-content: space-between; margin: 11px 0; padding-top: 9px; }
.opportunity-card small { color: var(--muted); font-size: 10px; }
.opportunity-card strong { color: var(--ink); font-size: 12px; }
.comparison-note { align-items: center; background: #eef8f6; border: 1px solid #a7cdc8; border-radius: 6px; color: #526879; display: flex; font-size: 12px; gap: 13px; margin-bottom: 13px; padding: 10px 12px; }
.comparison-note b { color: var(--teal-dark); }
.gsc-dashboard-panel { min-width: 0; }
.gsc-dashboard-controls { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 13px; overflow: hidden; }
.gsc-reference-main { align-items: center; display: grid; gap: 17px; grid-template-columns: minmax(180px, .73fr) minmax(310px, 1.27fr) auto; padding: 13px 14px 11px; }
.gsc-reference-main > div:first-child { align-items: center; display: flex; gap: 12px; min-width: 0; }
.gsc-control-label, .gsc-operating-period > span { color: var(--muted); display: block; font-size: 10px; font-weight: 800; }
.gsc-dimension-toggle { align-items: center; display: flex; gap: 6px; }
.gsc-dimension-toggle .filter-pill { margin: 0; white-space: nowrap; }
.gsc-operating-period { min-width: 0; }
.gsc-operating-period b { color: #344451; display: block; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.gsc-dashboard-filter-row { align-items: end; background: #f9fbfc; border-top: 1px solid #e8eef1; display: grid; gap: 9px; grid-template-columns: minmax(150px, 1fr) 132px 145px 145px auto auto minmax(175px, 1fr); padding: 10px 14px; }
.gsc-custom-range-note { color: #80611b; font-size: 11px; font-weight: 700; line-height: 1.45; margin: 8px 14px 0; }
.gsc-dashboard-controls .field-label { min-width: 0; }
.gsc-dashboard-controls .select-control, .gsc-dashboard-controls .search-control, .gsc-dashboard-controls .date-control { height: 34px; }
.gsc-dashboard-filter-row .control-button, .gsc-dashboard-filter-row .dark-button { min-height: 34px; white-space: nowrap; }
.gsc-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 13px 0; }
.gsc-metric-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-height: 108px; padding: 13px 14px; }
.gsc-metric-card span { color: #617484; display: block; font-size: 12px; font-weight: 800; }
.gsc-metric-card b { color: var(--ink); display: block; font-size: 26px; letter-spacing: -.65px; line-height: 1.1; margin-top: 7px; }
.gsc-metric-card small { color: #7c8b97; display: block; font-size: 10px; font-weight: 700; margin-top: 9px; }
.gsc-metric-card small.trend-positive { color: #157448; font-weight: 850; }
.gsc-metric-card small.trend-negative { color: #b34549; font-weight: 850; }
.gsc-metric-card small i { font-style: normal; }
.gsc-comparison-panel { margin-bottom: 13px; overflow: hidden; }
.gsc-comparison-badge { background: #e8f5f2; border: 1px solid #bfded8; border-radius: 999px; color: #236f66; font-size: 10px; font-weight: 850; padding: 5px 8px; white-space: nowrap; }
.gsc-comparison-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 14px 14px; }
.gsc-comparison-metric { background: #fbfcfd; border: 1px solid #e1e9ed; border-radius: 8px; min-width: 0; padding: 11px 12px; }
.gsc-comparison-metric-heading { align-items: flex-start; display: flex; gap: 7px; justify-content: space-between; }
.gsc-comparison-metric-heading > span:first-child { color: #536775; font-size: 10px; font-weight: 850; line-height: 1.35; }
.gsc-comparison-metric-heading .comparison-delta { flex: 0 0 auto; font-size: 9px; padding: 3px 6px; }
.gsc-comparison-metric-heading i { font-style: normal; }
.gsc-comparison-value { align-items: baseline; display: flex; gap: 6px; margin-top: 8px; }
.gsc-comparison-value b { color: var(--ink); font-size: 22px; letter-spacing: -.45px; line-height: 1; }
.gsc-comparison-value small, .gsc-comparison-metric p { color: #7a8994; font-size: 9px; }
.gsc-comparison-bars { display: grid; gap: 5px; margin-top: 10px; }
.gsc-comparison-bars > div { align-items: center; display: grid; gap: 6px; grid-template-columns: 28px minmax(0, 1fr); }
.gsc-comparison-bars span { color: #617583; font-size: 9px; font-weight: 750; }
.gsc-comparison-bars > div > i { background: #e9eef1; border-radius: 999px; display: block; height: 7px; overflow: hidden; }
.gsc-comparison-bars > div > i > b { background: var(--teal); border-radius: inherit; display: block; height: 100%; }
.gsc-comparison-bars .previous > i > b { background: #9eacb7; }
.gsc-comparison-metric p { margin: 7px 0 0; }
.gsc-rank-distribution { background: linear-gradient(125deg, #fff, #f7fafb); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 13px; overflow: hidden; }
.gsc-rank-distribution > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 11px 14px; }
.gsc-rank-distribution > header h3 { color: var(--ink); font-size: 14px; margin: 0; }
.gsc-rank-distribution > header p { color: var(--muted); font-size: 10px; margin: 2px 0 0; }
.gsc-rank-distribution > header > span { color: #536a75; font-size: 10px; font-weight: 800; }
.gsc-rank-distribution > div { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 14px 14px; }
.gsc-rank-stage { background: #fff; border: 1px solid #e0e8ec; border-radius: 8px; min-width: 0; padding: 10px 11px; }
.gsc-rank-stage > div { align-items: baseline; display: flex; gap: 6px; }
.gsc-rank-stage span { color: #526675; font-size: 11px; font-weight: 850; }
.gsc-rank-stage > div b { color: var(--ink); font-size: 20px; line-height: 1; margin-left: auto; }
.gsc-rank-stage small, .gsc-rank-stage p { color: #7d8d98; font-size: 9px; }
.gsc-rank-stage > i { background: #edf1f3; border-radius: 999px; display: block; height: 8px; margin-top: 10px; overflow: hidden; }
.gsc-rank-stage > i > b { background: var(--teal); border-radius: inherit; display: block; height: 100%; }
.gsc-rank-stage.blue > i > b { background: var(--blue); }
.gsc-rank-stage.orange > i > b { background: var(--orange); }
.gsc-rank-stage.purple > i > b { background: var(--purple); }
.gsc-rank-stage p { margin: 7px 0 0; }
.gsc-query-segment-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 13px; }
.gsc-overview-trend-card .revenue-chart { background: transparent; border-bottom: 0; }
.gsc-overview-trend-card .gsc-y-axis-tick line { stroke: #e5ecef; stroke-width: 1; }
.gsc-overview-trend-card .gsc-y-axis-tick text { fill: #70818d; font-size: 10px; font-weight: 700; }
.gsc-overview-trend-card .gsc-y-axis-line { stroke: #b8c5cb; stroke-width: 1; }
.table-controls-shell > .evil-table-controls[data-evil-table-id="gsc-pages"] .wide-table { min-width: 1040px; table-layout: fixed; }
.table-controls-shell > .evil-table-controls[data-evil-table-id="gsc-pages"] [data-table-column="page"] { width: 340px; }
.table-controls-shell > .evil-table-controls[data-evil-table-id="gsc-pages"] [data-table-column="urlType"] { width: 105px; }
.gsc-overview-page-url { display: -webkit-box; line-height: 1.45; max-width: 318px; overflow: hidden; overflow-wrap: anywhere; white-space: normal; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gsc-query-segment { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 91px; padding: 11px 12px; }
.gsc-query-segment span { color: #526575; display: block; font-size: 11px; font-weight: 800; }
.gsc-query-segment b { color: var(--ink); display: block; font-size: 21px; letter-spacing: -.35px; line-height: 1.1; margin-top: 6px; }
.gsc-query-segment small { color: var(--muted); display: block; font-size: 10px; line-height: 1.35; margin-top: 6px; }
.gsc-query-segment.pending { background: #fbfcfd; border-style: dashed; }
.gsc-query-segment.pending b { color: #81909a; }
.gsc-segment-setup { align-items: center; background: #fff8e8; border: 1px solid #ead49a; border-left: 4px solid #c78918; border-radius: 8px; display: flex; gap: 14px; justify-content: space-between; margin: -2px 0 13px; padding: 10px 12px; }
.gsc-segment-setup > div { display: grid; gap: 2px; }
.gsc-segment-setup b { color: #684c16; font-size: 11px; }
.gsc-segment-setup span { color: #806b42; font-size: 10px; line-height: 1.45; }
.gsc-segment-setup .outline-button { background: #fff; flex: 0 0 auto; min-height: 31px; }
.gsc-insight-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsc-insight-grid > div { display: grid; gap: 13px; min-width: 0; }
.gsc-insight-card { min-width: 0; overflow: hidden; }
.gsc-insight-list { padding: 4px 14px 10px; }
.gsc-insight-list > div { border-bottom: 1px solid #eaf0f3; display: grid; gap: 3px; padding: 9px 0; }
.gsc-insight-list > div:last-child { border-bottom: 0; }
.gsc-insight-list b { color: #2c3c48; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-insight-list span { color: #667887; font-size: 10px; line-height: 1.5; }
.gsc-insight-empty { color: #7b8994; font-size: 11px; line-height: 1.55; margin: 7px 0 8px; }
.gsc-query-table { margin-top: 13px; }
.gsc-workspace-empty { align-items: flex-start; background: #fff; border: 1px dashed #afc3cb; border-radius: 8px; color: #617482; display: grid; gap: 6px; margin-top: 13px; padding: 20px; }
.gsc-workspace-empty h2 { color: #263743; font-size: 18px; margin: 0; }
.gsc-workspace-empty p { font-size: 12px; line-height: 1.6; margin: 0; max-width: 750px; }
.gsc-workspace-empty small { color: #82909a; font-size: 10px; line-height: 1.5; }
.gsc-workspace-empty .outline-button { margin-top: 4px; }
.gsc-empty-kicker { background: #fff7e7; border: 1px solid #ebd39a; border-radius: 12px; color: #8a6622; font-size: 10px; font-weight: 800; padding: 4px 8px; }
.gsc-potential-card { margin-top: 13px; overflow: hidden; }
.gsc-potential-tabs { align-items: center; display: flex; gap: 7px; padding: 11px 14px 12px; }
.gsc-potential-tabs .filter-pill { margin: 0; }
.gsc-potential-rule-guide { background: #f8fafb; border-bottom: 1px solid var(--line); display: grid; gap: 9px; grid-template-columns: minmax(130px, .75fr) minmax(110px, .6fr) minmax(280px, 2fr); padding: 11px 14px; }
.gsc-potential-rule-guide article { background: #fff; border: 1px solid #e0e8ec; border-radius: 7px; display: grid; gap: 3px; padding: 9px 10px; }
.gsc-potential-rule-guide span { color: #697c8a; font-size: 9px; font-weight: 800; }
.gsc-potential-rule-guide b { color: #273b46; font-size: 13px; }
.gsc-potential-rule-guide small { color: #7c8c97; font-size: 9px; line-height: 1.45; }
.gsc-potential-rule-guide .gsc-potential-closest { border-left: 3px solid var(--teal); }
.gsc-table-empty { color: #768692; font-size: 12px; line-height: 1.6; padding: 20px 15px; }
.gsc-indexing-heading { align-items: center; background: linear-gradient(100deg, #f0fbf9, #fff); border: 1px solid #d6e6e7; border-left: 4px solid var(--teal); border-radius: 8px; display: flex; gap: 16px; justify-content: space-between; margin-top: 13px; padding: 15px 16px; }
.gsc-indexing-heading h2 { color: #1b2e39; font-size: 19px; margin: 0; }
.gsc-indexing-heading p { color: #617482; font-size: 12px; line-height: 1.55; margin: 4px 0 0; }
.gsc-indexing-visual-grid { display: grid; gap: 13px; grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr); margin-top: 13px; }
.gsc-index-overall, .gsc-index-types, .gsc-index-reasons { overflow: hidden; }
.gsc-index-overall-body { align-items: center; display: grid; gap: 26px; grid-template-columns: 174px minmax(150px, 1fr); padding: 22px 24px 24px; }
.gsc-index-donut { align-items: center; border-radius: 50%; display: flex; height: 164px; justify-content: center; width: 164px; }
.gsc-index-donut > div { align-items: center; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(223, 230, 233, .7); display: flex; flex-direction: column; height: 104px; justify-content: center; width: 104px; }
.gsc-index-donut b { color: #1b2b35; font-size: 25px; letter-spacing: -.6px; line-height: 1; }
.gsc-index-donut span { color: #71828e; font-size: 11px; font-weight: 750; margin-top: 7px; }
.gsc-index-overall-legend { display: grid; gap: 10px; }
.gsc-index-overall-legend > div { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.gsc-index-overall-legend span { align-items: center; color: #536876; display: inline-flex; font-size: 11px; font-weight: 750; gap: 8px; }
.gsc-index-overall-legend b { color: #263a46; font-size: 15px; }
.gsc-index-overall-legend i { background: #dfe6e9; border-radius: 50%; height: 9px; width: 9px; }
.gsc-index-overall-legend i.is-total { background: #253946; }
.gsc-index-overall-legend i.is-indexed { background: var(--teal); }
.gsc-index-overall-legend i.is-attention { background: var(--orange); }
.gsc-index-type-list { display: grid; gap: 0; padding: 5px 18px 13px; }
.gsc-index-type-row { border-bottom: 1px solid #edf1f3; display: grid; gap: 7px; padding: 11px 0; }
.gsc-index-type-row:last-child { border-bottom: 0; }
.gsc-index-type-heading { align-items: center; display: grid; gap: 8px; grid-template-columns: 95px minmax(120px, 1fr) auto; }
.gsc-index-type-heading b { color: #263946; font-size: 11px; }
.gsc-index-type-heading span { color: #71828e; font-size: 10px; }
.gsc-index-type-heading strong { color: #263946; font-size: 11px; }
.gsc-index-type-bar { background: #e4eaed; border-radius: 999px; display: flex; height: 10px; overflow: hidden; }
.gsc-index-type-bar i { display: block; height: 100%; }
.gsc-index-type-bar i.is-indexed { background: var(--teal); }
.gsc-index-type-bar i.is-attention { background: var(--orange); }
.gsc-index-type-bar i.is-unchecked { background: #dfe6e9; }
.gsc-index-type-counts { color: #7d8c96; display: flex; flex-wrap: wrap; font-size: 9px; gap: 12px; }
.gsc-index-reasons { margin-top: 13px; }
.gsc-index-reasons .card-head { align-items: center; display: flex; justify-content: space-between; }
.gsc-index-reason-list { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 15px; }
.gsc-index-reason-row { background: #fbfcfd; border: 1px solid #e1e8eb; border-radius: 8px; min-width: 0; padding: 12px; }
.gsc-index-reason-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.gsc-index-reason-heading b { color: #2b3e49; font-size: 12px; }
.gsc-index-reason-heading strong { color: #9a601e; font-size: 10px; white-space: nowrap; }
.gsc-index-reason-state { color: #7a8b96; display: block; font-size: 9px; line-height: 1.4; margin-top: 4px; }
.gsc-index-reason-bar { background: #edf1f3; border-radius: 999px; height: 7px; margin-top: 9px; overflow: hidden; }
.gsc-index-reason-bar i { background: var(--orange); border-radius: inherit; display: block; height: 100%; }
.gsc-index-reason-urls { display: grid; gap: 5px; margin-top: 9px; max-height: 116px; overflow: auto; }
.gsc-index-reason-urls a { color: #35668c; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; text-decoration: none; }
.gsc-index-reason-urls a:hover { color: var(--teal); text-decoration: underline; }
.gsc-indexing-summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; }
.gsc-indexing-summary-grid article { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 94px; padding: 12px 13px; }
.gsc-indexing-summary-grid span { color: #657787; display: block; font-size: 11px; font-weight: 800; }
.gsc-indexing-summary-grid b { color: #2d3d48; display: block; font-size: 23px; line-height: 1; margin-top: 7px; }
.gsc-indexing-summary-grid small { color: #80909b; display: block; font-size: 10px; line-height: 1.35; margin-top: 7px; }
.gsc-indexing-status { align-items: flex-start; background: #f8fafb; border: 1px solid #dde6ea; border-left: 3px solid #7d8f9b; border-radius: 7px; display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 9px 12px; }
.gsc-indexing-status strong { color: #334651; font-size: 11px; }
.gsc-indexing-status span { color: #6c7e8b; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.gsc-indexing-status.is-success { background: #f0faf7; border-color: #cce7df; border-left-color: #248b77; }
.gsc-indexing-status.is-warning { background: #fffbef; border-color: #f0dfaf; border-left-color: #d39b2f; }
.gsc-indexing-status.is-error { background: #fff4f3; border-color: #efcfcc; border-left-color: #c9514b; }
.gsc-indexing-queue { margin-top: 13px; }
.gsc-indexing-queue td:first-child { max-width: 380px; overflow-wrap: anywhere; }
.gsc-indexing-queue td:nth-last-child(2) { min-width: 260px; }
.gsc-indexing-queue td:last-child { min-width: 145px; }
.gsc-indexing-result { background: #edf2f4; border-radius: 999px; color: #586c78; display: inline-flex; font-size: 9px; font-weight: 800; padding: 4px 7px; white-space: nowrap; }
.gsc-indexing-result.is-indexed { background: #e5f5ef; color: #1d7867; }
.gsc-indexing-result.is-attention { background: #fff0e1; color: #9a5d18; }
.gsc-indexing-guidance { background: #f7fbfc; border: 1px solid #d8e6ea; border-radius: 8px; color: #526874; margin-top: 13px; padding: 12px 14px; }
.gsc-indexing-guidance strong { color: #263b47; display: block; font-size: 12px; }
.gsc-indexing-guidance ol { display: grid; gap: 5px; margin: 8px 0 0 18px; padding: 0; }
.gsc-indexing-guidance li { font-size: 11px; line-height: 1.5; }
.gsc-indexing-queue-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; }
.gsc-indexing-quota-note { color: #758792; font-size: 10px; line-height: 1.45; margin-left: auto; }
.gsc-indexing-coverage { display: grid; gap: 5px; min-width: 190px; }
.gsc-indexing-coverage > b { color: #506572; font-size: 10px; font-weight: 700; }
.gsc-indexing-details summary { color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 800; }
.gsc-indexing-details dl { background: #f7fafb; border: 1px solid #e2eaed; border-radius: 6px; display: grid; gap: 5px; margin: 7px 0 0; padding: 8px; }
.gsc-indexing-details dl > div { display: grid; gap: 2px; }
.gsc-indexing-details dt { color: #7a8b96; font-size: 9px; font-weight: 800; }
.gsc-indexing-details dd { color: #415863; font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.gsc-indexing-detail-empty { color: #87969f; font-size: 10px; }
.gsc-indexing-row-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 6px; }
.gsc-indexing-row-actions .outline-button { box-sizing: border-box; font-size: 10px; justify-content: center; min-height: 30px; padding: 0 9px; width: 100%; }
.gsc-inspection-fact { margin-top: 13px; overflow: hidden; }
.gsc-inspection-fact > div:last-child { display: grid; gap: 4px 16px; grid-template-columns: auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr); padding: 13px 15px; }
.gsc-inspection-fact span { color: #6b7d8c; font-size: 11px; font-weight: 700; }
.gsc-inspection-fact b { color: #293945; font-size: 12px; }
.gsc-inspection-empty { color: #6e808e; font-size: 12px; line-height: 1.55; padding: 13px 15px; }
.gsc-drill-canvas { padding: 0 28px 38px; }
.gsc-workbench { background: #f6f8fa; border: 0; border-radius: 0; min-height: 560px; padding: 39px 22px 34px; }
.gsc-workbench-head { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.gsc-workbench-head h2 { color: #17232d; font-size: 23px; letter-spacing: -.52px; line-height: 1.15; margin: 0; }
.gsc-workbench-head h2 small { color: #9aa5ae; font-size: 12px; font-weight: 700; letter-spacing: 0; margin-left: 6px; vertical-align: 2px; }
.gsc-workbench-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.gsc-workbench-actions .control-button, .gsc-workbench-actions .dark-button { border-radius: 7px; font-size: 11px; min-height: 31px; padding: 0 12px; }
.gsc-workbench-actions .dark-button { background: #4c88ec; border-color: #4c88ec; }
.gsc-workbench-actions .dark-button:hover { background: #3778df; }
.gsc-workbench-site, .gsc-inspection-chip { background: #edf1fb; border: 1px solid #e2e8f5; border-radius: 14px; color: #6e7c94; font-size: 10px; font-weight: 700; line-height: 1; padding: 6px 10px; white-space: nowrap; }
.gsc-inspection-chip { background: #f0f2f8; color: #778398; }
.gsc-workbench-actions .source-note { color: #778695; font-size: 10px; font-weight: 700; white-space: nowrap; }
.gsc-workbench-actions .gsc-data-project { min-width: 176px; }
.gsc-workbench-actions .gsc-data-project > span { display: none; }
.gsc-workbench-actions .gsc-data-project .select-control { height: 31px; font-size: 11px; }
.gsc-global-search { align-items: center; display: flex; gap: 10px; margin: 24px 0 12px; }
.gsc-global-search input { background: #fff; border-color: #d7dce1; border-radius: 10px; box-shadow: 0 1px 2px rgba(41, 58, 73, .04); flex: 1; height: 40px; padding: 0 16px; }
.gsc-workbench-tabs { align-items: center; background: #fff; border: 1px solid #e0e4e8; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 18px; padding: 4px; }
.gsc-workbench-tabs .filter-pill { background: transparent; border-color: transparent; border-radius: 8px; color: #69757e; flex: 1 0 auto; font-size: 11px; min-height: 33px; padding: 0 10px; white-space: nowrap; }
.gsc-workbench-tabs .filter-pill small { color: #9ca6ad; font-size: 10px; font-weight: 700; }
.gsc-workbench-tabs .filter-pill.active, .gsc-workbench-tabs .filter-pill:hover { background: #4c8cf0; border-color: #79a7ef; box-shadow: 0 2px 4px rgba(61, 117, 211, .22); color: #fff; }
.gsc-workbench-tabs .filter-pill.active small, .gsc-workbench-tabs .filter-pill:hover small { color: rgba(255,255,255,.84); }

/* Page Performance reproduces the compact source workbench while keeping
   each metric bound to the selected, synchronised GSC page facts. */
.gsc-coverage-panel { background: #fff; border: 1px solid #dfe5e8; border-radius: 10px; margin: 0 0 13px; overflow: hidden; }
.gsc-coverage-panel > header { align-items: center; background: #fbfcfd; border-bottom: 1px solid #e4eaed; display: flex; gap: 14px; justify-content: space-between; padding: 11px 13px; }
.gsc-coverage-panel > header > div:first-child { display: grid; gap: 3px; }
.gsc-coverage-panel > header b { color: #263640; font-size: 12px; }
.gsc-coverage-panel > header span { color: #7d8b95; font-size: 10px; }
.gsc-coverage-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.gsc-coverage-actions .control-button, .gsc-coverage-actions .dark-button { font-size: 10px; min-height: 29px; padding: 0 9px; }
.gsc-coverage-readonly { font-weight: 700; }
.gsc-coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gsc-coverage-grid article { border-right: 1px solid #e7ecef; min-width: 0; padding: 11px 13px 12px; }
.gsc-coverage-grid article:last-child { border-right: 0; }
.gsc-coverage-grid article > span { color: #8b969f; display: block; font-size: 9px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.gsc-coverage-grid article > b { color: #344653; display: block; font-size: 12px; margin-top: 4px; }
.gsc-coverage-grid article > small { color: #83919b; display: block; font-size: 9px; line-height: 1.45; margin-top: 4px; }
.gsc-coverage-grid article.is-ready { box-shadow: inset 3px 0 #2b927c; }
.gsc-coverage-grid article.is-actionable { box-shadow: inset 3px 0 #4c88ec; }
.gsc-coverage-grid article.is-limited { box-shadow: inset 3px 0 #d59a31; }
.gsc-page-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 22px; }
.gsc-page-kpi-card { background: #fff; border: 1px solid #e2e5e8; border-radius: 10px; box-shadow: 0 1px 2px rgba(39, 57, 72, .025); min-height: 105px; padding: 15px 13px 12px; }
.gsc-page-kpi-card > span { color: #929aa3; display: block; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.gsc-page-kpi-card > b { color: #1a2630; display: block; font-size: 24px; letter-spacing: -.55px; line-height: 1.05; margin-top: 7px; }
.gsc-page-kpi-card > small { color: #68737d; display: block; font-size: 10px; font-weight: 700; line-height: 1.35; margin-top: 8px; }
.gsc-page-kpi-card.is-unavailable > b { color: #87939e; }
.gsc-page-performance-table, .gsc-page-performance-cards { border-color: #dfe4e7; box-shadow: 0 1px 2px rgba(39, 57, 72, .03); overflow: hidden; }
.gsc-page-performance-table .card-head, .gsc-page-performance-cards .card-head { background: #fff; padding: 13px 16px 11px; }
.gsc-page-performance-table .card-title, .gsc-page-performance-cards .card-title { font-size: 14px; }
.gsc-page-toolbar { align-items: center; background: #fff; border-bottom: 1px solid #e2e7ea; display: flex; gap: 12px; justify-content: space-between; padding: 10px 15px; }
.gsc-page-toolbar-start, .gsc-page-toolbar-end { align-items: center; display: flex; gap: 8px; min-width: 0; }
.gsc-page-toolbar-start { flex: 1; }
.gsc-page-search { border-radius: 4px; font-size: 11px; height: 29px; max-width: 140px; padding: 0 7px; }
.gsc-page-sort { border-radius: 4px; font-size: 11px; height: 29px; max-width: 190px; padding: 0 7px; width: 180px; }
.gsc-page-toolbar-end > span { color: #8b969f; font-size: 10px; font-weight: 700; white-space: nowrap; }
.gsc-fetch-crawl { border-color: #77a5ee; color: #5484cf; font-size: 10px; min-height: 30px; padding: 0 9px; white-space: nowrap; }
.gsc-fetch-crawl:disabled { background: #f8fbff; cursor: not-allowed; opacity: 1; }
.gsc-display-pills { align-items: center; display: flex; gap: 3px; }
.gsc-display-pills .filter-pill { border-radius: 5px; font-size: 10px; min-height: 28px; padding: 0 8px; }
.gsc-page-table { min-width: 1060px; }
.gsc-page-table th { background: #fbfcfd; color: #8a949d; font-size: 10px; letter-spacing: .025em; padding: 10px 11px; }
.gsc-page-table td { font-size: 11px; padding: 9px 11px; vertical-align: middle; }
.gsc-page-table td:first-child { min-width: 250px; }
.gsc-page-path { color: #344653; display: block; font-size: 11px; font-weight: 700; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-page-path + small { color: #99a5ae; display: block; font-size: 9px; margin-top: 3px; }
.gsc-fact-value { color: #334652; display: block; font-size: 11px; font-weight: 800; line-height: 1.1; }
.gsc-fact-value.is-muted { color: #8d9aa4; }
.gsc-fact-note { color: #99a4ac; display: block; font-size: 9px; line-height: 1.15; margin-top: 3px; white-space: nowrap; }
.gsc-page-trend { min-width: 90px; }
.gsc-page-trend .micro-trend { margin: 0; }
.gsc-page-trend .trend-bars { background: transparent; border: 0; gap: 2px; height: 24px; padding: 0; }
.gsc-page-trend .trend-bars i { border-radius: 2px 2px 0 0; min-width: 3px; }
.gsc-page-action { align-items: center; color: #5f88cc; display: inline-flex; font-size: 13px; justify-content: center; margin-right: 7px; text-decoration: none; }
.gsc-page-action:hover { color: #316dbf; }
.gsc-page-action.is-disabled { color: #aeb7bf; cursor: default; }
.gsc-page-action-button { background: transparent; border: 0; cursor: pointer; padding: 0; }
.gsc-page-action-button.is-active { color: var(--teal-dark); }
.gsc-page-card-actions { align-items: center; display: inline-flex; flex: 0 0 auto; }
.gsc-page-card-actions .gsc-page-action { margin-right: 0; margin-left: 7px; }
.gsc-page-full-trend { border-color: #bedad7; overflow: hidden; }
.gsc-page-full-trend .card-head { align-items: flex-start; gap: 12px; }
.gsc-full-trend-grid { display: grid; gap: 0; grid-template-columns: 1fr 1fr; }
.gsc-full-trend-line { border-right: 1px solid #e5ecee; min-width: 0; padding: 13px 15px 11px; }
.gsc-full-trend-line:last-child { border-right: 0; }
.gsc-full-trend-line > header { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 8px; }
.gsc-full-trend-line > header b { color: #667781; font-size: 10px; letter-spacing: .035em; }
.gsc-full-trend-line > header span { color: #31424e; font-size: 14px; font-weight: 800; }
.gsc-full-trend-line > p { color: #8d99a2; font-size: 10px; line-height: 1.4; margin: 8px 0 0; }
.gsc-full-trend-plot { background: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, #edf2f4 31px); border-bottom: 1px solid #dbe5ea; height: 124px; position: relative; }
.gsc-full-trend-plot svg { height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; }
.gsc-full-trend-days { color: #95a1aa; display: flex; font-size: 9px; justify-content: space-between; padding-top: 6px; }
.gsc-full-trend-note { background: #f7fbfa; border-top: 1px solid #e4efed; color: #687984; font-size: 10px; line-height: 1.45; margin: 0; padding: 9px 15px; }
.gsc-full-trend-details { border-top: 1px solid #e7edef; color: #657681; font-size: 11px; }
.gsc-full-trend-details > summary { cursor: pointer; font-weight: 800; padding: 10px 15px; }
.gsc-full-trend-details[open] > summary { border-bottom: 1px solid #e7edef; color: #31424e; }
.gsc-full-trend-details .table-wrap { max-height: 360px; overflow: auto; }
.gsc-page-full-trend-unavailable { align-items: center; display: flex; gap: 8px; justify-content: flex-start; }
.gsc-page-more { align-items: center; background: #fff; border-top: 1px solid #e2e7ea; display: flex; justify-content: center; padding: 10px; }
.gsc-page-more .control-button { font-size: 11px; min-height: 31px; }
.gsc-page-card-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; }
.gsc-page-card { min-width: 0; overflow: hidden; padding: 0; }
.gsc-page-card > header { align-items: flex-start; border-bottom: 1px solid #e8edf0; display: flex; gap: 8px; justify-content: space-between; padding: 12px 13px 10px; }
.gsc-page-card > header > div { min-width: 0; }
.gsc-page-card > header b { color: #2c3c47; display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-page-card > header small { color: #96a1aa; display: block; font-size: 10px; margin-top: 3px; }
.gsc-page-card-metrics { display: grid; gap: 0; grid-template-columns: 1fr 1fr; }
.gsc-page-card-metrics > div { border-bottom: 1px solid #edf0f2; border-right: 1px solid #edf0f2; min-width: 0; padding: 10px 12px; }
.gsc-page-card-metrics > div:nth-child(2n) { border-right: 0; }
.gsc-page-card-metrics span, .gsc-page-card-trend > span { color: #8b969f; display: block; font-size: 9px; font-weight: 800; letter-spacing: .025em; }
.gsc-page-card-metrics b { color: #31424e; display: block; font-size: 16px; letter-spacing: -.3px; margin-top: 3px; }
.gsc-page-card-metrics small, .gsc-page-card-trend small { color: #9ba6ae; display: block; font-size: 9px; margin-top: 3px; }
.gsc-page-card-trend { border-bottom: 1px solid #edf0f2; padding: 10px 12px; }
.gsc-page-card-trend .micro-trend { margin-top: 4px; }
.gsc-page-card-trend .trend-bars { background: transparent; border: 0; height: 36px; padding: 0; }
.gsc-page-card-trend.is-unavailable b { color: #8a97a0; display: block; font-size: 16px; margin-top: 3px; }
.gsc-page-card footer { color: #86939c; display: flex; flex-wrap: wrap; font-size: 9px; gap: 8px; padding: 9px 12px; }
.gsc-page-card footer b { color: #7d8993; }
.gsc-watchlist-empty { align-items: flex-start; display: grid; gap: 4px; text-align: left; }
.gsc-watchlist-empty b { color: var(--ink); font-size: 13px; }
.gsc-watchlist-empty p { color: var(--muted); font-size: 11px; margin: 0; }
.gsc-watchlist-panel { min-width: 0; }
.gsc-watchlist-toolbar { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin: 13px 0; }
.gsc-watchlist-toolbar > div { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.gsc-watchlist-refresh { border-color: #90abc8; color: #3e698c; }
.gsc-watchlist-refresh:disabled { background: #f7fafc; color: #8e9aa4; cursor: not-allowed; opacity: 1; }
.gsc-watchlist-import { align-items: center; cursor: pointer; display: inline-flex; }
.gsc-watchlist-metrics { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.gsc-watchlist-metric { align-items: center; background: #fff; border: 1px solid #dde5e9; border-radius: 5px; color: #8c99a4; display: inline-flex; font-size: 10px; font-weight: 800; gap: 5px; min-height: 29px; padding: 0 8px; }
.gsc-watchlist-metric i { background: #aeb9c1; border-radius: 50%; height: 7px; width: 7px; }
.gsc-watchlist-metric.active { background: #f9fcfc; color: #3c4e5a; }
.gsc-watchlist-metric.metric-impressions.active { border-color: #8cafe9; }
.gsc-watchlist-metric.metric-impressions.active i { background: #3972c4; }
.gsc-watchlist-metric.metric-clicks.active { border-color: #8bcabb; }
.gsc-watchlist-metric.metric-clicks.active i { background: #218d75; }
.gsc-watchlist-metric.metric-position.active { border-color: #edbc78; }
.gsc-watchlist-metric.metric-position.active i { background: #c77b14; }
.gsc-watchlist-metric.metric-ctr.active { border-color: #ea9da2; }
.gsc-watchlist-metric.metric-ctr.active i { background: #bd4e58; }
.gsc-watchlist-add-form { align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; grid-template-columns: minmax(230px, 1.85fr) minmax(130px, .75fr) 142px minmax(180px, 1.1fr) auto; margin-bottom: 10px; padding: 12px; }
.gsc-watchlist-add-form > label { color: #71808b; display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.gsc-watchlist-add-form textarea, .gsc-watchlist-add-form input { border: 1px solid var(--line); border-radius: 5px; color: #394959; font: inherit; min-width: 0; padding: 8px; width: 100%; }
.gsc-watchlist-add-form textarea { min-height: 92px; resize: vertical; }
.gsc-watchlist-add-form input { height: 34px; }
.gsc-watchlist-add-form .date-control { padding: 0 7px; }
.gsc-watchlist-add-form .dark-button { min-height: 34px; white-space: nowrap; }
.gsc-watchlist-batch-note { color: #8d99a2; font-size: 9px; grid-column: 1 / -1; line-height: 1.35; margin-top: -2px; }
.gsc-watchlist-filters { align-items: end; background: #f8fafb; border: 1px solid #e0e7eb; border-radius: 7px; display: grid; gap: 8px; grid-template-columns: minmax(130px, 1.4fr) minmax(120px, .9fr) minmax(130px, 1.15fr) minmax(130px, 1fr) 210px 210px auto; margin-bottom: 10px; padding: 9px; }
.gsc-watchlist-filters label { color: #74818b; display: grid; font-size: 9px; font-weight: 800; gap: 4px; letter-spacing: .025em; min-width: 0; }
.gsc-watchlist-filters .search-control, .gsc-watchlist-filters .select-control, .gsc-watchlist-filters .date-control { background: #fff; border-radius: 4px; font-size: 11px; height: 31px; min-width: 0; padding: 0 7px; width: 100%; }
.gsc-watchlist-filters .gsc-watchlist-date-range > span { align-items: center; display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gsc-watchlist-filters .gsc-watchlist-date-range i { color: #95a0a9; font-size: 11px; font-style: normal; }
.gsc-watchlist-filters .control-button { font-size: 10px; min-height: 31px; white-space: nowrap; }
.gsc-watchlist-display { border-bottom: 1px solid #e5ebee; margin-bottom: 0; padding: 2px 0 5px; }
.gsc-watchlist-card-grid { margin-top: 12px; }
.gsc-watchlist-card { display: grid; gap: 0; min-width: 0; padding: 13px; }
.gsc-watchlist-card .watch-card-top { align-items: center; gap: 8px; margin-bottom: 9px; }
.gsc-watchlist-status { border-radius: 999px; font-size: 9px; font-weight: 800; padding: 4px 7px; white-space: nowrap; }
.gsc-watchlist-status.matched { background: #e9f6ef; color: #2d815f; }
.gsc-watchlist-status.unmatched { background: #f3f5f6; color: #75828c; }
.gsc-watchlist-card-url { min-width: 0; }
.gsc-watchlist-card-url a, .gsc-watchlist-card-url b { color: var(--ink); display: block; font-size: 12px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.gsc-watchlist-card-url a:hover { color: var(--teal); text-decoration: underline; }
.gsc-watchlist-card > p { margin-bottom: 10px; }
.gsc-watchlist-stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); margin: 0 0 10px; padding-top: 9px; }
.gsc-watchlist-stats > div { border-right: 1px solid #ebf0f2; min-width: 0; padding: 0 8px; }
.gsc-watchlist-stats > div:first-child { padding-left: 0; }
.gsc-watchlist-stats > div:last-child { border-right: 0; }
.gsc-watchlist-stats dt { color: var(--muted); font-size: 9px; }
.gsc-watchlist-stats dd { color: var(--ink); font-size: 14px; font-weight: 800; margin: 3px 0 0; }
.gsc-watchlist-card footer { border-top: 1px solid #edf0f2; color: #83909a; display: grid; font-size: 10px; gap: 4px; line-height: 1.45; margin-top: 1px; padding-top: 8px; }
.gsc-watchlist-card footer b { color: #5e6e79; margin-right: 3px; }
.gsc-watchlist-card .micro-trend { margin-top: 9px; }
.gsc-watchlist-card-unavailable, .gsc-watchlist-readonly { color: #8c99a3; display: block; font-size: 10px; margin-top: 9px; }
.gsc-watchlist-remove { justify-self: start; margin-top: 8px; }
.gsc-watchlist-table .gsc-watchlist-url { color: #3a638d; display: block; font-size: 11px; font-weight: 700; max-width: 260px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.gsc-watchlist-table .gsc-watchlist-url:hover { color: #1d7280; text-decoration: underline; }
.gsc-watchlist-table .gsc-watchlist-url + small { color: #96a1aa; display: block; font-size: 9px; margin-top: 3px; }

@media (max-width: 1280px) {
  .gsc-indexing-visual-grid { grid-template-columns: 1fr; }
  .gsc-index-overall-body { grid-template-columns: 174px minmax(180px, 1fr); }
  .gsc-watchlist-add-form { grid-template-columns: minmax(210px, 1.6fr) minmax(125px, .8fr) 130px minmax(165px, 1fr); }
  .gsc-watchlist-add-form .dark-button { grid-column: 4; justify-self: start; }
  .gsc-watchlist-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; }
}

@media (max-width: 760px) {
  .gsc-indexing-heading { align-items: flex-start; flex-direction: column; }
  .gsc-index-overall-body { grid-template-columns: 1fr; justify-items: center; }
  .gsc-index-overall-legend { width: 100%; }
  .gsc-index-reason-list { grid-template-columns: 1fr; }
  .gsc-index-type-heading { grid-template-columns: 80px minmax(100px, 1fr) auto; }
  .gsc-coverage-panel > header { align-items: flex-start; flex-direction: column; }
  .gsc-coverage-actions { justify-content: flex-start; }
  .gsc-coverage-grid { grid-template-columns: 1fr; }
  .gsc-coverage-grid article { border-bottom: 1px solid #e7ecef; border-right: 0; }
  .gsc-coverage-grid article:last-child { border-bottom: 0; }
  .gsc-watchlist-toolbar { align-items: flex-start; flex-direction: column; }
  .gsc-watchlist-add-form, .gsc-watchlist-filters { grid-template-columns: 1fr; }
  .gsc-watchlist-add-form .dark-button { grid-column: auto; }
  .gsc-watchlist-display { align-items: flex-start; flex-direction: column; gap: 5px; }
}

.watch-card-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.watch-card { padding: 14px; }
.watch-card-top { display: flex; justify-content: space-between; margin-bottom: 9px; }
.watch-card > b { color: var(--ink); display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-card > p { color: var(--muted); font-size: 11px; margin: 5px 0 13px; }
.watch-stats { border-top: 1px solid #ebf0f2; display: grid; gap: 9px; grid-template-columns: 1fr 1.2fr 1.2fr; margin-bottom: 12px; padding-top: 10px; }
.watch-stats span { min-width: 0; }
.watch-stats small { color: var(--muted); display: block; font-size: 10px; }
.watch-stats strong { color: var(--ink); display: block; font-size: 14px; margin-top: 2px; }
.watch-stats .trend-bars { background: none; border: 0; gap: 3px; height: 30px; padding: 0; }
.watch-stats .trend-bars i { border-radius: 2px 2px 0 0; min-width: 4px; }
.batch-form, .monitor-form, .submit-form { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; margin-bottom: 13px; padding: 13px; }
.batch-form { grid-template-columns: minmax(0, 2fr) minmax(150px, .8fr) 145px auto; }
.keyword-batch { grid-template-columns: minmax(0, 2fr) minmax(170px, .8fr) auto; }
.monitor-form { grid-template-columns: 180px minmax(0, 1fr) auto; }
.competitor-capture { margin-bottom: 14px; }
.competitor-form { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; }
.competitor-form textarea { border: 1px solid var(--line); border-radius: 6px; font: inherit; min-height: 76px; padding: 9px; resize: vertical; }
.competitor-form .span-two { grid-column: span 2; }
.competitor-form .dark-button { justify-self: start; }
.batch-form textarea, .monitor-form textarea, .submit-form textarea, .assistant-form textarea { border: 1px solid var(--line); border-radius: 6px; color: #394959; font: inherit; min-height: 82px; padding: 9px; resize: vertical; width: 100%; }
.batch-form .date-control { align-self: start; }
.batch-form .dark-button, .monitor-form .dark-button { align-self: end; }
.list-toggle { align-items: center; display: flex; justify-content: space-between; margin: 0 0 2px; }
.list-toggle .filter-pills { margin-bottom: 7px; }
.list-toggle > span { color: var(--muted); font-size: 11px; }
.submit-form textarea { min-height: 140px; }
.submit-form > div { align-items: center; display: flex; gap: 10px; }
.submit-form > div span { color: var(--muted); font-size: 11px; }
.quota-pill { background: #e8f4f1; border: 1px solid #bad8d5; border-radius: 14px; color: var(--teal-dark); font-size: 11px; font-weight: 800; padding: 5px 9px; white-space: nowrap; }
.analyzer-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.gsc-analyzer-panel { min-width: 0; }
.gsc-analyzer-scope { margin: 0 0 12px; }
.gsc-analyzer-card { min-width: 0; overflow: hidden; padding: 0; }
.gsc-analyzer-card > header { align-items: flex-start; border-bottom: 1px solid #e8edf0; display: flex; gap: 10px; justify-content: space-between; padding: 12px 13px 10px; }
.gsc-analyzer-url { min-width: 0; }
.gsc-analyzer-url a, .gsc-analyzer-url b { color: var(--ink); display: block; font-size: 12px; font-weight: 800; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.gsc-analyzer-url a:hover { color: var(--teal); text-decoration: underline; }
.gsc-analyzer-status { border-radius: 999px; flex: 0 0 auto; font-size: 9px; font-weight: 800; line-height: 1.2; padding: 4px 7px; text-align: center; }
.gsc-analyzer-status.matched { background: #e9f6ef; color: #2d815f; }
.gsc-analyzer-status.limited { background: #fff5df; color: #9b6713; }
.gsc-analyzer-status.unmatched { background: #f3f5f6; color: #75828c; }
.gsc-analyzer-quality { color: #74818b; font-size: 10px; line-height: 1.45; margin: 0; padding: 9px 13px; }
.gsc-analyzer-window { border-top: 1px solid #edf0f2; padding: 10px 13px; }
.gsc-analyzer-window:first-of-type { border-top: 0; }
.gsc-analyzer-window > header { align-items: baseline; display: flex; gap: 7px; justify-content: space-between; margin-bottom: 8px; }
.gsc-analyzer-window > header b { color: #455662; font-size: 10px; letter-spacing: .02em; }
.gsc-analyzer-window > header small { color: #96a1aa; font-size: 9px; text-align: right; }
.gsc-analyzer-window dl { display: grid; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.gsc-analyzer-window dl > div { border-right: 1px solid #edf0f2; min-width: 0; padding: 0 8px; }
.gsc-analyzer-window dl > div:first-child { padding-left: 0; }
.gsc-analyzer-window dl > div:last-child { border-right: 0; padding-right: 0; }
.gsc-analyzer-window dt { color: #8b969f; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-analyzer-window dd { color: #31424e; font-size: 13px; font-weight: 800; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsc-analyzer-window-grid { display: grid; grid-template-columns: 1fr 1fr; }
.gsc-analyzer-window-grid .gsc-analyzer-window { border-top: 1px solid #edf0f2; }
.gsc-analyzer-window-grid .gsc-analyzer-window + .gsc-analyzer-window { border-left: 1px solid #edf0f2; }
.gsc-analyzer-window-grid .gsc-analyzer-window dl { grid-template-columns: 1fr 1fr; }
.gsc-analyzer-window-grid .gsc-analyzer-window dl > div:nth-child(2) { border-right: 0; padding-right: 0; }
.gsc-analyzer-window-grid .gsc-analyzer-window dl > div:nth-child(3) { padding-left: 0; padding-top: 8px; }
.gsc-analyzer-window-grid .gsc-analyzer-window dl > div:nth-child(4) { border-right: 0; padding-right: 0; padding-top: 8px; }
.gsc-analyzer-window.is-unavailable dd { color: #9aa5ad; }
.gsc-analyzer-trend { border-top: 1px solid #edf0f2; padding: 10px 13px 12px; }
.gsc-analyzer-trend > b { color: #8b969f; display: block; font-size: 9px; letter-spacing: .025em; }
.gsc-analyzer-trend .micro-trend { margin-top: 7px; }
.gsc-analyzer-trend .trend-bars { height: 52px; }
.gsc-analyzer-trend small { color: #96a1aa; display: block; font-size: 9px; line-height: 1.4; margin-top: 6px; }
.gsc-analyzer-trend.is-unavailable { display: grid; gap: 3px; }
.gsc-analyzer-trend.is-unavailable > span { color: #9aa5ad; font-size: 15px; font-weight: 800; }
.gsc-analyzer-no-match { border-top: 1px solid #edf0f2; color: #7f8d96; padding: 12px 13px; }
.gsc-analyzer-no-match b { color: #566873; font-size: 11px; }
.gsc-analyzer-no-match p { font-size: 10px; line-height: 1.45; margin: 5px 0 0; }
@media (max-width: 880px) {
  .analyzer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gsc-analyzer-window-grid { grid-template-columns: 1fr; }
  .gsc-analyzer-window-grid .gsc-analyzer-window + .gsc-analyzer-window { border-left: 0; }
  .gsc-analyzer-window dl { grid-template-columns: 1fr 1fr; }
  .gsc-analyzer-window dl > div:nth-child(2) { border-right: 0; padding-right: 0; }
  .gsc-analyzer-window dl > div:nth-child(3), .gsc-analyzer-window dl > div:nth-child(4), .gsc-analyzer-window dl > div:nth-child(5) { padding-left: 0; padding-top: 8px; }
  .gsc-analyzer-window dl > div:nth-child(4) { border-right: 0; padding-right: 0; }
}
.monitor-list { overflow: hidden; }
.monitor-row { align-items: center; border-bottom: 1px solid #ebf0f2; display: grid; gap: 11px; grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 15px; }
.monitor-row:last-child { border-bottom: 0; }
.monitor-row b { color: var(--ink); display: block; font-size: 13px; }
.monitor-row small { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }
.analysis-hero { align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 0; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(110px, .55fr)); margin-bottom: 13px; overflow: hidden; }
.analysis-hero > div { border-right: 1px solid var(--line); padding: 15px; }
.analysis-hero > div:last-child { border-right: 0; }
.analysis-hero span, .analysis-stat span { color: var(--muted); display: block; font-size: 11px; font-weight: 700; }
.analysis-hero h2 { color: var(--ink); font-size: 21px; margin: 4px 0 2px; }
.analysis-hero p { color: var(--muted); font-size: 12px; margin: 0; }
.analysis-stat b { color: var(--ink); display: block; font-size: 20px; margin-top: 4px; }
.analysis-stat small { color: var(--muted); display: block; font-size: 10px; margin-top: 4px; }
.assistant-layout { display: grid; gap: 14px; grid-template-columns: .9fr 1.1fr; }
.assistant-form { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; padding: 14px; }
.assistant-form label { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 5px; }
.assistant-form textarea { min-height: 171px; }
.assistant-answer { padding: 16px; }
.assistant-answer h3 { color: var(--ink); font-size: 16px; margin: 4px 0 7px; }
.assistant-answer p, .assistant-answer li { color: #536575; font-size: 12px; line-height: 1.65; }
.assistant-answer ol { margin: 10px 0 0; padding-left: 18px; }
.action-board { overflow: hidden; }
.action-row { align-items: center; border-bottom: 1px solid #ebf0f2; display: grid; gap: 12px; grid-template-columns: 38px minmax(180px, 1fr) minmax(82px, .45fr) 75px 70px 80px; padding: 11px 14px; }
.action-row:last-child { border-bottom: 0; }
.action-row b { color: var(--ink); font-size: 12px; }
.action-row > span:not(.priority-tag):not(.status-pill) { color: var(--muted); font-size: 11px; }
.action-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competitor-action-form { grid-template-columns: 130px minmax(135px, .7fr) minmax(135px, .7fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; }
.competitor-action-form .action-project-note { color: var(--muted); font-size: 10px; grid-column: span 2; line-height: 1.4; }
.priority-tag { background: #edf4f6; border-radius: 4px; color: #567083; font-size: 10px; font-weight: 800; padding: 4px 5px; text-align: center; }
.priority-tag.urgent { background: #fff0f1; color: #a5303a; }

/* Keyword drilldown mirrors the frozen reference board’s compact analysis
   workspace.  The visual cards never invent a historical point: every number
   below is rendered from the selected keyword API response. */
.keyword-drill-layout .module-nav { min-width: 0; }
.keyword-drill-panel { min-width: 0; }
.keyword-drill-tab-strip { align-items: stretch; display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; padding: 1px 0 2px; scrollbar-width: thin; }
.keyword-drill-tab { background: #fff; border: 1px solid #d8e2e8; border-radius: 7px; color: #536573; cursor: pointer; flex: 0 0 auto; font-size: 11px; font-weight: 800; line-height: 1.3; min-height: 42px; padding: 8px 12px; text-align: left; white-space: nowrap; }
.keyword-drill-tab:hover { background: #f6fbfa; border-color: #94c8c2; color: var(--teal-dark); }
.keyword-drill-tab.active { background: #eef8f6; border-color: #58a9a2; box-shadow: inset 3px 0 0 var(--teal); color: #176f6a; }
.keyword-drill-tab:focus-visible { outline: 2px solid #167f79; outline-offset: 2px; }
.keyword-drill-title-row { margin-bottom: 12px; }
.keyword-drill-snapshot-controls { align-items: end; }
.keyword-drill-date { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 800; min-width: 145px; }
.keyword-drill-date .select-control { height: 34px; font-size: 12px; }
.keyword-drill-status { margin-bottom: 12px; }
.keyword-drill-status span:last-child { max-width: 68%; text-align: right; }
.keyword-drill-metrics .kpi-card { min-height: 100px; }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.keyword-drill-period-line { color: var(--muted); font-size: 12px; font-weight: 800; margin: -3px 0 10px; }
.keyword-drill-period-line span { background: #edf7f5; border: 1px solid #c9e2de; border-radius: 999px; color: var(--teal-dark); display: inline-flex; padding: 4px 9px; }
.keyword-drill-table > .keyword-drill-snapshot-controls { margin: 2px 0 8px; }
.keyword-drill-record-period-line { color: var(--muted); font-size: 12px; font-weight: 800; margin: -2px 0 9px; }
.keyword-drill-record-period-line span { background: #f7fafb; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; padding: 4px 9px; }
.keyword-fact-notice { margin: 13px 0 0; }
.keyword-drill-overview { margin-top: 13px; }
.keyword-stage-snapshot { overflow: hidden; }
.keyword-stage-snapshot .card-head { align-items: center; }
.keyword-fact-badge { background: #edf7f5; border: 1px solid #b9dcd7; border-radius: 999px; color: var(--teal-dark); font-size: 10px; font-weight: 800; padding: 4px 7px; white-space: nowrap; }
.keyword-stage-chart { align-items: end; background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, #edf2f4 36px); border-bottom: 1px solid #d9e3e8; display: grid; gap: 13px; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 171px; margin: 15px 17px 0; padding: 0 8px; }
.keyword-stage-column { align-items: center; display: grid; grid-template-rows: 20px 96px 17px 16px; min-width: 0; text-align: center; }
.keyword-stage-value { color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1; }
.keyword-stage-rail { align-items: end; display: flex; height: 96px; justify-content: center; }
.keyword-stage-rail i { border-radius: 4px 4px 1px 1px; display: block; max-width: 46px; min-height: 0; opacity: .95; width: 68%; }
.keyword-stage-column b { color: #40515f; font-size: 11px; line-height: 1.2; }
.keyword-stage-column small { color: var(--quiet); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-stage-foot { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 9px 16px 14px; }
.keyword-opportunity-card { overflow: hidden; }
.keyword-opportunity-list > div { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.keyword-opportunity-list .text-link-button { font-size: 11px; }
.keyword-opportunity-empty { color: var(--muted); display: block !important; font-size: 12px; padding: 14px 0 !important; }
.keyword-drill-table { margin-top: 13px; }
.keyword-drill-table .table-toolbar { flex-wrap: wrap; }
.keyword-drill-table .wide-table { min-width: 930px; }
.keyword-drill-record-table { min-width: 2320px !important; }
.keyword-drill-filter-grid { grid-template-columns: 1.5fr repeat(8, minmax(112px, 1fr)) 116px 128px; }
.keyword-drill-library-toolbar > div { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.keyword-drill-library-toolbar .select-control { width: 138px; }
.keyword-drill-fact-toolbar { background: #fbfcfd; }
.keyword-drill-row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; min-width: 180px; }
.keyword-drill-row-actions .outline-button, .keyword-drill-row-actions .control-button { font-size: 10px; min-height: 27px; padding: 0 7px; }
.keyword-current-page { display: grid; gap: 5px; min-width: 180px; }
.keyword-current-page .url-link, .keyword-current-page .invalid-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-hide-url { background: transparent; border: 0; color: #6b7e8d; cursor: pointer; font-size: 10px; font-weight: 700; justify-self: start; padding: 0; }
.keyword-hide-url:hover { color: var(--teal-dark); text-decoration: underline; }
.keyword-rank-sparkline { min-width: 116px; }
.keyword-rank-sparkline svg { display: block; height: 32px; overflow: visible; width: 62px; }
.keyword-rank-sparkline path { fill: none; stroke: #d8e2e8; stroke-width: 1; }
.keyword-rank-sparkline polyline { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.keyword-rank-sparkline circle { fill: #fff; stroke: var(--teal); stroke-width: 1.6; }
.keyword-rank-sparkline small { color: var(--quiet); display: block; font-size: 9px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-trend-unavailable { color: var(--quiet); }
.keyword-stage-trend { display: grid; gap: 1px; min-width: 74px; }
.keyword-stage-trend b { color: #526372; font-size: 10px; }
.keyword-stage-trend span { color: var(--teal-dark); font-size: 11px; font-weight: 800; }
.keyword-stage-trend small { color: var(--muted); font-size: 10px; }
.keyword-hidden-manager { border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0; box-shadow: none; }
.keyword-hidden-list { display: grid; gap: 0; }
.keyword-hidden-list > div { align-items: center; border-bottom: 1px solid #edf1f3; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 14px; }
.keyword-hidden-list > div:last-child { border-bottom: 0; }
.keyword-hidden-list span { color: #4a5d6c; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-url-cell { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-link-button { background: transparent; border: 0; color: #287296; font: inherit; font-weight: 800; max-width: 100%; overflow: hidden; padding: 0; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.text-link-button:hover { color: var(--teal-dark); text-decoration: underline; }
.keyword-inline-watch { display: inline; margin: 0; }
.keyword-inline-watch .outline-button { font-size: 10px; min-height: 29px; padding: 0 8px; }
.keyword-monitor-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.keyword-monitor-row > .inline-actions { justify-content: flex-end; }
.keyword-analysis-form { grid-template-columns: minmax(0, 1fr) auto; }
.keyword-analysis-form textarea { min-height: 118px; }
.keyword-analysis-hero { margin-top: 13px; }
.keyword-analysis-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin: -2px 0 13px; }
.keyword-analysis-watch { margin: 0; }
.keyword-analysis-table { overflow: hidden; }
.keyword-analysis-table .wide-table { min-width: 900px; }
.keyword-cannibalization-note { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; margin: 0; }
.keyword-page-metrics { margin-top: 13px; }

/* Full tutorial modal, matching the large reference dialog rather than a generic alert. */
.tutorial-backdrop { background: rgba(26, 40, 49, .54); backdrop-filter: blur(4px); padding: 28px; }
.tutorial-modal { border-radius: 14px; display: flex; flex-direction: column; height: min(82vh, 760px); max-width: 1070px; overflow: hidden; padding: 0; width: min(1070px, calc(100vw - 150px)); }
.tutorial-header { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 22px 27px 19px; }
.tutorial-header h2 { color: #10191f; font-size: 24px; letter-spacing: -.55px; line-height: 1.2; margin: 3px 0 5px; }
.tutorial-header > div > p:last-child { color: var(--muted); font-size: 13px; margin: 0; }
.tutorial-close { align-items: center; background: #eef3f4; border: 0; border-radius: 50%; color: #3c4d59; display: grid; flex: 0 0 auto; font-size: 24px; height: 39px; line-height: 1; margin-top: 1px; place-items: center; width: 39px; }
.tutorial-close:hover { background: #e1eaeb; }
.tutorial-nav { background: #f9fbfc; border-bottom: 1px solid var(--line); display: flex; gap: 8px; overflow-x: auto; padding: 12px 27px; scrollbar-width: thin; }
.tutorial-nav-button { align-items: center; background: #fff; border: 1px solid #d5e0e6; border-radius: 18px; color: #2e3e4c; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 800; justify-content: center; min-height: 31px; padding: 0 12px; text-decoration: none; }
.tutorial-nav-button:hover, .tutorial-nav-button.active { background: #eef8f6; border-color: #8abdb8; color: var(--teal-dark); }
.tutorial-scroll { background: #fbfcfd; flex: 1; min-height: 0; overflow: auto; padding: 17px 27px 34px; scroll-behavior: smooth; }
.tutorial-section { scroll-margin-top: 10px; }
.tutorial-section + .tutorial-section { margin-top: 17px; }
.tutorial-section-lead { align-items: center; background: linear-gradient(100deg, #f0fbf9, #fff); border: 1px solid #d5e4e7; border-left: 5px solid var(--teal); border-radius: 9px; display: flex; gap: 13px; margin-bottom: 12px; padding: 16px 17px; }
.tutorial-section-lead > span { background: var(--teal); border-radius: 16px; color: #fff; font-size: 11px; font-weight: 800; padding: 6px 11px; white-space: nowrap; }
.tutorial-section-lead h2 { color: #121d24; font-size: 19px; letter-spacing: -.3px; margin: 0; }
.tutorial-section-lead p { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.tutorial-card { background: #fff; border: 1px solid #dce5ec; border-radius: 9px; margin: 12px 0; padding: 17px 18px; }
.tutorial-card.with-icon { display: grid; gap: 13px; grid-template-columns: 44px minmax(0, 1fr); }
.tutorial-icon { align-items: center; background: var(--teal); border-radius: 8px; color: #fff; display: flex; font-size: 11px; font-weight: 900; height: 37px; justify-content: center; }
.tutorial-card h3 { color: #17212b; font-size: 16px; letter-spacing: -.2px; margin: 0; }
.tutorial-intro, .tutorial-paragraph { color: #566777; font-size: 13px; line-height: 1.7; margin: 7px 0 10px; }
.tutorial-inline-link { color: var(--teal-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tutorial-inline-link:hover { color: var(--teal); }
.tutorial-subhead { color: var(--teal-dark); font-size: 14px; margin: 15px 0 7px; }
.tutorial-list { color: #465867; font-size: 13px; line-height: 1.7; margin: 6px 0 11px; padding-left: 20px; }
.tutorial-list li + li { margin-top: 4px; }
.tutorial-code { background: #f4f7f8; border: 1px solid #e1e9ed; border-radius: 6px; color: #314250; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 10px 0; overflow: auto; padding: 10px 12px; white-space: pre-wrap; }
.tutorial-notice { background: #fff8ea; border-left: 3px solid #d49a26; color: #6e5b31; font-size: 12px; line-height: 1.65; margin: 10px 0; padding: 10px 12px; }
.tutorial-details { display: grid; gap: 7px; margin-top: 9px; }
.tutorial-details details { background: #fff; border: 1px solid #dfe8ec; border-radius: 6px; color: #40515f; font-size: 12px; overflow: hidden; }
.tutorial-details details[open] { border-color: #9ec7c2; box-shadow: 0 1px 2px rgba(21, 87, 83, .06); }
.tutorial-details summary { align-items: center; color: #2e3d49; cursor: pointer; display: flex; font-weight: 800; gap: 10px; justify-content: space-between; list-style: none; padding: 10px 11px; }
.tutorial-details summary::-webkit-details-marker { display: none; }
.tutorial-details summary::before { color: var(--teal); content: "›"; font-size: 17px; line-height: 1; transform: rotate(0deg); transition: transform .16s ease; }
.tutorial-details details[open] summary::before { transform: rotate(90deg); }
.tutorial-details summary > span:first-child { flex: 1; }
.tutorial-details summary:focus-visible { outline: 2px solid rgba(25, 125, 121, .34); outline-offset: -2px; }
.tutorial-detail-hint { color: #8b9ba7; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tutorial-details details[open] .tutorial-detail-hint { color: var(--teal-dark); font-size: 0; }
.tutorial-details details[open] .tutorial-detail-hint::after { content: "已展开"; font-size: 10px; }
.tutorial-detail-content { border-top: 1px solid #e7eef1; padding: 10px 11px 12px; }
.tutorial-detail-actions { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.tutorial-copy { background: #fff; border: 1px solid #a8cbc7; border-radius: 5px; color: var(--teal-dark); font-size: 11px; font-weight: 800; min-height: 28px; padding: 0 9px; }
.tutorial-copy:hover, .tutorial-copy.copied { background: #e8f6f3; border-color: var(--teal); }
.tutorial-detail-instruction { color: #516371; line-height: 1.7; margin: 0; white-space: pre-line; }
.tutorial-shot { align-items: center; background: #f6fafb; border: 1px dashed #9dbcc2; border-radius: 7px; color: #4c6370; display: grid; font-size: 12px; gap: 8px; grid-template-columns: 22px minmax(0, 1fr) auto; margin: 9px 0; padding: 11px; text-align: left; width: 100%; }
.tutorial-shot:hover { background: #ecf7f5; border-color: var(--teal); }
.shot-icon { color: var(--teal); font-size: 19px; }
.tutorial-shot.has-source-image { grid-template-columns: 56px minmax(0, 1fr) auto; }
.tutorial-shot-thumbnail-frame { background: #e8f1f2; border: 1px solid #b9ced1; border-radius: 4px; display: block; height: 36px; overflow: hidden; width: 56px; }
.tutorial-shot-thumbnail { display: block; height: 100%; object-fit: cover; width: 100%; }
.tutorial-shot.capture-required .shot-icon { align-items: center; display: grid; height: 22px; justify-content: center; width: 22px; }
.tutorial-shot b { color: var(--teal-dark); font-size: 10px; white-space: nowrap; }
.tutorial-shots { display: grid; gap: 2px; }
.tutorial-faq { display: grid; gap: 8px; margin: 0; }
.tutorial-faq > div { background: #f8fafb; border: 1px solid #e2eaee; border-radius: 7px; padding: 11px 12px; }
.tutorial-faq dt { color: #263440; font-size: 13px; font-weight: 800; }
.tutorial-faq dd { color: #617283; font-size: 12px; line-height: 1.6; margin: 4px 0 0; }
.shopify-attribution-import-detail-actions, .competitor-import-detail-actions { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tutorial-lightbox-backdrop { align-items: center; background: rgba(19, 33, 42, .64); display: flex; inset: 0; justify-content: center; padding: 34px; position: fixed; z-index: 20; }
.tutorial-lightbox { border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 68px); max-width: 760px; overflow: hidden; padding: 0; width: min(760px, calc(100vw - 68px)); }
.tutorial-lightbox-header { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 18px 21px 15px; }
.tutorial-lightbox-header .site-identity { margin-bottom: 3px; }
.tutorial-lightbox-header h3 { color: #111d25; font-size: 19px; letter-spacing: -.25px; margin: 0; }
.tutorial-lightbox-body { min-height: 0; overflow: auto; padding: 19px 21px 17px; }
.tutorial-lightbox-figure { margin: 0; }
.tutorial-lightbox-image-frame { align-items: center; background: #101a20; border: 1px solid #2b3c46; border-radius: 8px; display: flex; justify-content: center; min-height: 205px; overflow: hidden; }
.tutorial-lightbox-image { display: block; height: auto; max-height: min(60vh, 620px); max-width: 100%; object-fit: contain; width: auto; }
.tutorial-shot-placeholder { align-content: center; background: #f8fafb; border: 1px dashed #b9cbd1; border-radius: 8px; color: #536673; display: grid; justify-items: center; min-height: 205px; padding: 24px; text-align: center; }
.tutorial-shot-placeholder-icon { align-items: center; background: #edf4f4; border: 1px solid #c8dbda; border-radius: 50%; color: var(--teal); display: grid; font-size: 22px; height: 38px; justify-content: center; width: 38px; }
.tutorial-shot-placeholder p { color: #344553; font-size: 14px; font-weight: 800; margin: 11px 0 7px; }
.tutorial-source-status { color: #6e5b31; font-size: 11px; line-height: 1.45; max-width: 32rem; }
.tutorial-lightbox-caption { color: #344553; font-size: 13px; font-weight: 800; line-height: 1.55; margin: 15px 0 5px; }
.tutorial-lightbox-note { background: #fff8ea; border-left: 3px solid #d49a26; color: #6e5b31; font-size: 12px; line-height: 1.6; margin: 9px 0 0; padding: 8px 10px; }
.tutorial-lightbox-note.captured { background: #edf8f6; border-left-color: #197d79; color: #2c5f5b; }
.tutorial-lightbox-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
.tutorial-lightbox-footer { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; padding: 12px 21px; }

@media (max-width: 1280px) {
  .deep-board-layout { grid-template-columns: 170px minmax(0, 1fr); }
  .board-status-bar { flex-wrap: wrap; }
  .board-status-bar span:nth-child(2) { margin-left: 0; }
  .metric-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opportunity-grid { grid-template-columns: 1fr; }
  .tutorial-modal { width: min(1000px, calc(100vw - 60px)); }
  .keyword-control-bar { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
  .keyword-search-label { grid-column: span 2; }
}

/* Competitor monitor: frozen-reference shell, bound only to audited observations. */
.source-chip { background: #eaf6f4; border: 1px solid #cae6e1; border-radius: 12px; color: var(--teal); display: inline-block; font-size: 10px; font-weight: 800; margin-bottom: 5px; padding: 4px 7px; }
.table-count { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.competitor-status-bar { align-items: center; }
.competitor-status-bar .control-button { margin-left: auto; min-height: 30px; }
.competitor-import-card { margin-bottom: 14px; overflow: hidden; }
.competitor-import-form { display: grid; gap: 0; }
.competitor-import-fields { align-items: end; background: #f8fafb; border-top: 1px solid #e3ebee; display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(118px, 1fr)) minmax(225px, 1.45fr) auto; padding: 13px 14px; }
.competitor-import-fields > label, .competitor-import-metric-row > label, .competitor-import-required-fields > label { color: #71808c; display: grid; font-size: 10px; font-weight: 800; gap: 4px; min-width: 0; }
.competitor-import-fields input, .competitor-import-fields select, .competitor-import-metric-row input, .competitor-import-metric-row select, .competitor-import-required-fields select { background: #fff; font-size: 11px; height: 33px; min-width: 0; width: 100%; }
.competitor-import-file small { color: #84929d; font-size: 9px; font-weight: 600; line-height: 1.35; }
.competitor-import-fields .dark-button { align-self: end; min-height: 33px; white-space: nowrap; }
.competitor-import-format-help { display: grid; gap: 8px; grid-column: 1 / -1; }
.competitor-import-format-help .control-button { justify-self: start; }
.competitor-import-preview { border-top: 1px solid #dfe9ea; display: grid; gap: 11px; padding: 14px; }
.competitor-import-steps { background: #f7fafb; border: 1px solid #dfe8eb; border-radius: 7px; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; overflow: hidden; padding: 0; }
.competitor-import-steps li { align-items: center; color: #83919a; display: flex; gap: 8px; min-width: 0; padding: 9px 11px; }
.competitor-import-steps li + li { border-left: 1px solid #e2eaec; }
.competitor-import-steps li > span { align-items: center; background: #e8edef; border-radius: 999px; color: #6f7d86; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-weight: 900; height: 22px; justify-content: center; width: 22px; }
.competitor-import-steps li div { display: grid; gap: 2px; min-width: 0; }
.competitor-import-steps li b { color: #54656f; font-size: 10px; }
.competitor-import-steps li small { font-size: 9px; line-height: 1.35; }
.competitor-import-steps li.is-current { background: #fff8e9; color: #7d672d; }
.competitor-import-steps li.is-current > span { background: #e0ad41; color: #fff; }
.competitor-import-steps li.is-current b { color: #715817; }
.competitor-import-steps li.is-done { background: #eef8f5; color: #52766f; }
.competitor-import-steps li.is-done > span, .competitor-import-steps li.is-ready > span { background: var(--teal); color: #fff; }
.competitor-import-steps li.is-done b, .competitor-import-steps li.is-ready b { color: #236c62; }
.competitor-import-kpis { background: #fbfcfd; border: 1px solid #dde7e9; border-radius: 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.competitor-import-kpis > div { border-right: 1px solid #e5edef; min-width: 0; padding: 10px 12px; }
.competitor-import-kpis > div:last-child { border-right: 0; }
.competitor-import-kpis span, .competitor-import-kpis small { color: #7e8c97; display: block; font-size: 9px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competitor-import-kpis b { color: #233440; display: block; font-size: 13px; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competitor-import-manifest { color: #70808c; font-size: 10px; line-height: 1.7; margin: -3px 0 0; overflow-wrap: anywhere; }
.competitor-import-manifest code { color: #43545f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .96em; }
.competitor-import-mapping { background: #f7fbfb; border: 1px solid #d4e5e3; border-left: 3px solid var(--teal); border-radius: 7px; display: grid; gap: 10px; padding: 11px; }
.competitor-import-mapping > header, .competitor-import-history > header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.competitor-import-mapping > header b, .competitor-import-history > header b { color: #27404a; display: block; font-size: 12px; }
.competitor-import-mapping > header span, .competitor-import-history > header span, .competitor-import-metrics span { color: #74838d; display: block; font-size: 10px; line-height: 1.45; margin-top: 3px; }
.competitor-import-mapping .outline-button, .competitor-import-history .outline-button { flex: 0 0 auto; font-size: 10px; min-height: 29px; padding: 0 8px; }
.competitor-import-mapping-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 7px; }
.competitor-import-mapping-actions .dark-button { font-size: 10px; min-height: 29px; padding: 0 10px; white-space: nowrap; }
.competitor-import-required-fields { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.competitor-import-required-fields em { color: #a64a48; font-size: 9px; font-style: normal; }
.competitor-import-metrics { border-top: 1px dashed #c8ddda; display: grid; gap: 8px; padding-top: 9px; }
.competitor-import-metrics > p { color: #798894; font-size: 10px; margin: 0; }
.competitor-import-metric-row { align-items: end; display: grid; gap: 7px; grid-template-columns: minmax(110px, .8fr) minmax(160px, 1.2fr) minmax(130px, 1fr) minmax(95px, .65fr) auto; }
.competitor-import-metric-row .text-danger-button { align-self: center; margin-bottom: 2px; }
.competitor-import-missing { background: #fff8e9; border-radius: 4px; color: #80672b; font-size: 10px; margin: 0; padding: 7px 8px; }
.competitor-import-missing strong, .competitor-import-mapping-ready strong { color: inherit; }
.competitor-import-mapping-ready { background: #edf8f5; border-radius: 4px; color: #2e6b62; font-size: 10px; margin: 0; padding: 7px 8px; }
.competitor-import-rejected { border: 1px solid #e6e1d3; border-radius: 6px; color: #746441; font-size: 10px; padding: 8px 10px; }
.competitor-import-rejected summary { color: #69582f; cursor: pointer; font-weight: 800; }
.competitor-import-rejected ul { margin: 7px 0 0; padding-left: 18px; }
.competitor-import-rejected li + li { margin-top: 3px; }
.competitor-import-candidates { background: #eef7f5; border: 1px solid #cee5e0; border-radius: 6px; color: #37635d; font-size: 10px; line-height: 1.55; margin: 0; padding: 8px 9px; }
.competitor-import-replace, .competitor-import-attestation { align-items: flex-start; color: #556671; display: flex; font-size: 10px; gap: 7px; line-height: 1.5; }
.competitor-import-replace input, .competitor-import-attestation input { accent-color: var(--teal); flex: 0 0 auto; margin: 2px 0 0; }
.competitor-import-commit-hint { background: #fff8e9; border-radius: 5px; color: #755e25; font-size: 10px; line-height: 1.45; margin: 0; padding: 7px 9px; }
.competitor-import-commit-hint.is-ready { background: #edf8f5; color: #2e6b62; }
.competitor-import-actions { border-top: 1px solid #edf1f2; margin-top: 1px; padding-top: 10px; }
.competitor-import-history { border-top: 1px solid #e3ebee; display: grid; gap: 10px; padding: 13px 14px 14px; }
.competitor-import-history > header small { color: #7e8c97; font-size: 10px; font-weight: 800; white-space: nowrap; }
.competitor-import-history .table-wrap { border: 1px solid #e2eaed; border-radius: 6px; }
.competitor-import-history-table { min-width: 800px; }
.competitor-import-history-empty { color: #768690; font-size: 11px; margin: 0; }
.competitor-import-comparison { background: #eef7f5; border-left: 3px solid var(--teal); color: #46635f; display: grid; font-size: 10px; gap: 2px; line-height: 1.45; padding: 9px 10px; }
.competitor-import-comparison b { color: #236960; font-size: 11px; }
.competitor-import-comparison small { color: #6d827e; font-size: 9px; }
.competitor-import-history-error, .competitor-import-permission { margin-bottom: 0; }
.competitor-analysis-card { margin-bottom: 14px; overflow: hidden; padding: 0; }
.competitor-analysis-head { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 16px 18px; }
.competitor-analysis-head h3 { color: var(--ink); font-size: 18px; margin: 5px 0 3px; }
.competitor-analysis-head p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }
.competitor-analysis-body { background: #f8fafb; padding: 15px 17px 18px; }
.competitor-analysis-empty { align-items: flex-start; background: #f8fafb; color: #687985; display: grid; font-size: 11px; gap: 4px; padding: 18px; }
.competitor-analysis-empty strong { color: #334752; font-size: 13px; }
.competitor-analysis-boundary { align-items: flex-start; background: #eef7f5; border: 1px solid #d0e4e0; border-left: 3px solid var(--teal); border-radius: 6px; color: #617871; display: grid; font-size: 10px; gap: 3px; margin-top: 12px; padding: 9px 11px; }
.competitor-analysis-boundary strong { color: #236b64; font-size: 11px; }
.competitor-analysis-comparison-grid { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.competitor-analysis-comparison-grid article { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 0; padding: 10px 11px; }
.competitor-analysis-comparison-grid span, .competitor-analysis-comparison-grid small { color: #74828d; display: block; font-size: 9px; }
.competitor-analysis-comparison-grid b { color: #20333e; display: block; font-size: 17px; margin: 3px 0; }
.competitor-analysis-rank-grid { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.competitor-analysis-rank-grid article { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 0; overflow: hidden; padding: 10px 11px 13px; position: relative; }
.competitor-analysis-rank-grid span { color: #697a85; font-size: 10px; font-weight: 800; }
.competitor-analysis-rank-grid b { color: #1f333e; display: block; font-size: 19px; margin-top: 4px; }
.competitor-analysis-rank-grid i { background: linear-gradient(90deg, var(--teal) var(--share), #e9eff1 var(--share)); bottom: 0; height: 4px; left: 0; position: absolute; right: 0; }
.competitor-analysis-table { min-width: 720px; }
.competitor-analysis-table .outline-button { font-size: 9px; line-height: 1.35; min-height: 29px; padding: 5px 8px; white-space: normal; }
.competitor-analysis-coverage { background: #f8fafb; border-bottom: 1px solid var(--line); padding: 15px 17px; }
.competitor-analysis-coverage > .card-head { margin-bottom: 10px; }
.competitor-analysis-coverage .data-warning { margin: 10px 0 0; }
.competitor-analysis-coverage-table { min-width: 980px; }
.competitor-analysis-coverage-table td:nth-child(2) { color: var(--teal-dark); font-weight: 800; white-space: nowrap; }
.shopify-attribution-import-card { margin-bottom: 14px; }
.shopify-attribution-import-fields { grid-template-columns: repeat(5, minmax(104px, 1fr)) minmax(225px, 1.55fr) auto; }
.shopify-attribution-import-detail, .competitor-import-detail { background: #f8fbfb; border: 1px solid #d8e7e5; border-radius: 7px; display: grid; gap: 9px; margin-top: 10px; padding: 11px; }
.shopify-attribution-import-detail .card-head, .competitor-import-detail .card-head { align-items: flex-start; }
.shopify-attribution-import-detail .card-title, .competitor-import-detail .card-title { font-size: 12px; }
.shopify-attribution-import-detail .file-caption, .competitor-import-detail .file-caption { padding: 0; white-space: normal; }
.shopify-attribution-import-detail-table, .competitor-import-detail-table { min-width: 780px; }
.shopify-attribution-selected-workspace { display: grid; gap: 12px; }
.shopify-attribution-selected-workspace .shopify-attribution-import-detail { margin-top: 0; }
.shopify-attribution-import-boundary-grid { margin-top: 0; }
.competitor-reference-card { overflow: hidden; padding: 0; }
.competitor-reference-note { align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; gap: 14px; justify-content: space-between; padding: 11px 15px; }
.competitor-reference-note b { color: var(--ink); font-size: 12px; }
.competitor-embed-head { align-items: flex-start; border-bottom: 1px solid #e9eff2; display: flex; gap: 18px; justify-content: space-between; padding: 18px 20px 14px; }
.competitor-embed-head h2 { color: #172733; font-size: 21px; letter-spacing: -.4px; margin: 0 0 4px; }
.competitor-embed-head p { color: #677987; font-size: 11px; margin: 0 0 5px; }
.competitor-embed-head small { color: #87939d; display: block; font-size: 10px; max-width: 760px; }
.competitor-mode { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 20px 6px; }
.competitor-mode > span { color: #758593; font-size: 11px; font-weight: 800; }
.competitor-target { background: #fff; border: 1px solid #d8e2e6; border-radius: 14px; color: #485a66; font-size: 10px; font-weight: 800; min-height: 27px; padding: 5px 10px; }
.competitor-target:hover { background: #f6fbfa; border-color: #8abdb8; color: var(--teal-dark); }
.competitor-target.active { background: #eff8f5; border-color: #85bfb8; color: #16756f; }
.competitor-target-empty { color: #8a98a2; font-size: 10px; font-weight: 700; padding: 5px 3px; }
.competitor-evidence { display: flex; flex-wrap: wrap; gap: 9px; padding: 5px 20px 12px; }
.competitor-evidence span { color: #6e7d89; font-size: 10px; }
.competitor-strategy-nav { border-bottom: 1px solid #e6edf0; border-top: 1px solid #e6edf0; display: flex; gap: 0; overflow-x: auto; padding: 0 12px; scrollbar-width: thin; }
.competitor-strategy-nav button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #677987; flex: 0 0 auto; font-size: 11px; font-weight: 800; min-height: 39px; padding: 11px 9px 9px; }
.competitor-strategy-nav button:hover { color: var(--teal-dark); }
.competitor-strategy-nav button.active { border-bottom-color: var(--teal); color: #16756f; }
.competitor-strategy-panel { background: #f9fbfc; padding: 17px 20px 20px; }
.competitor-panel-title { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 13px; }
.competitor-panel-title h2 { color: var(--ink); font-size: 18px; margin: 0 0 3px; }
.competitor-panel-title p, .competitor-panel-title span { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; }
.competitor-panel-title span { background: #eef8f6; border: 1px solid #c8e2de; border-radius: 12px; color: var(--teal-dark); font-weight: 800; padding: 3px 7px; white-space: nowrap; }
.competitor-company-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.competitor-company-grid article { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 14px; }
.competitor-company-grid h3 { color: #1c2d38; font-size: 14px; margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competitor-company-grid span { color: #197d79; font-size: 10px; font-weight: 800; }
.competitor-company-grid p { color: #61727f; font-size: 12px; line-height: 1.45; margin: 9px 0 0; }
.competitor-overview-panel { min-width: 0; }
.competitor-coverage-note { background: #fff; border: 1px solid var(--line); border-top: 0; color: #667785; display: flex; flex-wrap: wrap; font-size: 11px; gap: 16px; margin: -1px 0 13px; padding: 9px 13px; }
.competitor-coverage-note span { white-space: nowrap; }
.competitor-radar { min-height: 275px; }
.radar-placeholder { align-items: center; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 31px, #e5eef0 32px 33px), linear-gradient(35deg, transparent 49.5%, #e5eef0 50%, transparent 50.5%), linear-gradient(-35deg, transparent 49.5%, #e5eef0 50%, transparent 50.5%); display: grid; grid-template-columns: repeat(4, 1fr); height: 190px; margin: 12px; place-items: center; position: relative; }
.radar-placeholder i { color: #778793; font-size: 11px; font-style: normal; font-weight: 800; text-align: center; }
.radar-placeholder b { background: #197d79; border-radius: 50%; color: #fff; font-size: 11px; grid-column: 2 / span 2; grid-row: 1 / span 2; line-height: 1.35; padding: 23px 11px; text-align: center; z-index: 1; }
.compact-list-card { min-width: 0; }
.competitor-contract-empty { align-items: flex-start; background: #fff; border: 1px dashed #bacbd2; border-radius: 7px; color: #607281; display: grid; font-size: 12px; gap: 4px; line-height: 1.6; padding: 18px; }
.competitor-contract-empty b { color: #334752; font-size: 13px; }
.competitor-contract-empty span { display: block; }
.competitor-contract-empty strong { color: #344b57; }
.competitor-action-workspace { min-width: 0; }
.competitor-action-form { grid-template-columns: 96px minmax(190px, 1fr) minmax(190px, 1fr) auto; }
.competitor-action-form .dark-button { align-self: end; }
.competitor-reference-card > footer { border-top: 1px solid #e8eef0; color: #81909a; font-size: 10px; padding: 10px 20px; }
.competitor-reference-card.theme-dark { background: #192631; }
.competitor-reference-card.theme-dark .competitor-reference-note, .competitor-reference-card.theme-dark .competitor-embed-head, .competitor-reference-card.theme-dark .competitor-strategy-nav, .competitor-reference-card.theme-dark > footer { border-color: #334653; }
.competitor-reference-card.theme-dark .competitor-embed-head h2, .competitor-reference-card.theme-dark .competitor-reference-note b { color: #f5fafb; }
.competitor-reference-card.theme-dark .competitor-embed-head p, .competitor-reference-card.theme-dark .competitor-embed-head small, .competitor-reference-card.theme-dark .competitor-reference-note, .competitor-reference-card.theme-dark .competitor-evidence span, .competitor-reference-card.theme-dark > footer { color: #acc0ca; }
.competitor-reference-card.theme-dark .competitor-strategy-panel { background: #22323d; }
.competitor-reference-card.theme-dark .competitor-strategy-nav button { color: #acc0ca; }
.competitor-reference-card.theme-dark .competitor-strategy-nav button.active { color: #8fd9d1; }
.competitor-reference-card.theme-dark .competitor-company-grid article, .competitor-reference-card.theme-dark .competitor-strategy-panel .card, .competitor-reference-card.theme-dark .competitor-contract-empty, .competitor-reference-card.theme-dark .metric-card { background: #1d2d38; border-color: #38505d; box-shadow: none; }
.competitor-reference-card.theme-dark .competitor-company-grid h3, .competitor-reference-card.theme-dark .competitor-strategy-panel h2, .competitor-reference-card.theme-dark .competitor-strategy-panel .card-title, .competitor-reference-card.theme-dark .metric-card b { color: #eef7f8; }
.competitor-reference-card.theme-dark .competitor-company-grid p, .competitor-reference-card.theme-dark .competitor-strategy-panel p, .competitor-reference-card.theme-dark .competitor-contract-empty, .competitor-reference-card.theme-dark .metric-card span, .competitor-reference-card.theme-dark .metric-card small { color: #b7c7cf; }
.competitor-reference-card.theme-dark .competitor-coverage-note { background: #1d2d38; border-color: #38505d; color: #b7c7cf; }

@media (max-width: 1280px) {
  .competitor-embed-head { flex-wrap: wrap; }
  .competitor-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .competitor-action-form { grid-template-columns: 96px minmax(180px, 1fr) minmax(180px, 1fr); }
  .competitor-action-form .dark-button { grid-column: 3; }
  .competitor-import-fields { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .shopify-attribution-import-fields { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .competitor-import-file { grid-column: span 2; }
  .competitor-import-fields .dark-button { justify-self: start; }
  .competitor-import-metric-row { grid-template-columns: minmax(110px, .75fr) minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(100px, .7fr) auto; }
  .competitor-analysis-comparison-grid, .competitor-analysis-rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .competitor-import-fields, .shopify-attribution-import-fields, .competitor-import-kpis, .competitor-import-required-fields, .competitor-import-metric-row { grid-template-columns: 1fr; }
  .competitor-import-file { grid-column: auto; }
  .competitor-import-kpis > div { border-bottom: 1px solid #e5edef; border-right: 0; }
  .competitor-import-kpis > div:last-child { border-bottom: 0; }
  .competitor-import-mapping > header, .competitor-import-history > header { align-items: flex-start; flex-direction: column; }
  .competitor-import-mapping-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .competitor-import-steps { grid-template-columns: 1fr; }
  .competitor-import-steps li + li { border-left: 0; border-top: 1px solid #e2eaec; }
  .competitor-import-metric-row .text-danger-button { justify-self: start; }
  .competitor-analysis-head { flex-direction: column; }
  .competitor-analysis-comparison-grid, .competitor-analysis-rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Frozen shared-shell parity (RC-20260801-01): the reference desktop capture
 * is 1402 × 768 and its tutorial dialog is approximately 1072px wide by
 * 560px high.  These values only tune the already-observed default dialog;
 * they do not imply that unseen tutorial states have been captured.
 */
.tutorial-modal {
  /* At the captured 650px browser viewport this resolves to about 559px,
     keeping the centred dialog at the observed y≈163 instead of y≈177. */
  height: min(86vh, 760px);
}

.tutorial-header {
  /* The frozen header spans roughly 120px before the TOC strip. */
  padding: 17px 27px 19px;
}

/* The dialog receives programmatic focus on open; its shadow is the visual boundary. */
.tutorial-modal:focus {
  outline: none;
}

.tutorial-nav {
  /* The observed pill strip is roughly 72px tall (31px pills plus air). */
  padding: 20px 27px;
}

.tutorial-scroll {
  /* The first source section starts immediately below the TOC divider while
     retaining the observed 27px horizontal inset. */
  padding: 0 27px 34px;
}

/* Responsive fallback is deliberately marked as an accessibility enhancement:
 * the frozen run has desktop evidence only. It prevents the full tutorial
 * dialog from becoming an off-screen, non-scrollable surface on small viewports.
 */
@media (max-width: 760px) {
  .tutorial-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  .tutorial-modal {
    height: auto;
    max-height: calc(100dvh - 24px);
    min-height: calc(100dvh - 24px);
    width: 100%;
  }

  .tutorial-header {
    gap: 12px;
    padding: 16px 18px 14px;
  }

  .tutorial-header h2 { font-size: 20px; }
  .tutorial-header > div > p:last-child { font-size: 12px; }
  .tutorial-close { height: 36px; width: 36px; }
  .tutorial-nav { padding: 10px 18px; }
  .tutorial-scroll { padding: 0 18px 24px; }
  .tutorial-section-lead { align-items: flex-start; padding: 13px 14px; }
  .tutorial-section-lead h2 { font-size: 17px; }
  .tutorial-section-lead p { font-size: 12px; }
  .tutorial-card { padding: 14px; }
  .tutorial-card.with-icon { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .tutorial-icon { height: 34px; }
}

@media (max-width: 440px) {
  .tutorial-section-lead { gap: 10px; }
  .tutorial-section-lead > span { font-size: 10px; padding: 6px 8px; }
  .tutorial-nav-button { font-size: 11px; padding: 0 10px; }
}

/* SEO weekly / monthly management report */
.seo-report-canvas { display: grid; gap: 18px; margin: 0; padding-left: 40px; padding-right: 40px; }
.seo-report-controls {
  align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 16px;
}
.seo-report-controls label { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 5px; }
.seo-report-controls select { min-width: 220px; }
.seo-report-controls > span { color: var(--muted); font-size: 12px; margin-left: auto; padding-bottom: 9px; }
.seo-report-loading { min-height: 260px; padding-top: 110px; }
.seo-report-hero {
  align-items: center; background: linear-gradient(135deg, #0f6f6b, #174e66); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 69, 82, .14); color: #fff; display: grid;
  gap: 22px; grid-template-columns: 150px minmax(0, 1fr); padding: 24px 28px;
}
.seo-report-hero.status-watch { background: linear-gradient(135deg, #9c6500, #6f5a20); }
.seo-report-hero.status-at_risk { background: linear-gradient(135deg, #a63c36, #6e3347); }
.seo-report-hero.status-insufficient_data { background: linear-gradient(135deg, #5d6a78, #3f5266); }
.seo-report-score { align-items: baseline; border-right: 1px solid rgba(255, 255, 255, .3); display: flex; gap: 4px; justify-content: center; padding-right: 24px; }
.seo-report-score span { font-size: 54px; font-weight: 900; letter-spacing: -3px; }
.seo-report-score small { color: rgba(255, 255, 255, .7); font-size: 14px; }
.seo-report-hero p { font-size: 12px; font-weight: 900; letter-spacing: .08em; margin: 0 0 6px; text-transform: uppercase; }
.seo-report-hero h2 { font-size: 19px; line-height: 1.5; margin: 0; max-width: 1000px; }
.seo-report-confidence { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.seo-report-confidence span { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: 11px; padding: 5px 9px; }
.seo-report-section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 10px; }
.seo-report-section-heading h2 { font-size: 18px; margin: 2px 0 0; }
.seo-report-section-heading > p { color: var(--muted); font-size: 11px; margin: 0; }
.seo-report-coverage-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-report-coverage-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 8px; min-height: 132px; padding: 13px 14px; }
.seo-report-coverage-card.unavailable { border-left-color: #c99a3c; background: #fffdf8; }
.seo-report-coverage-card > div { align-items: center; display: flex; gap: 8px; }
.seo-report-coverage-card b { color: var(--ink); font-size: 13px; }
.seo-report-source-state { background: #e8f5ef; border-radius: 999px; color: #267256; font-size: 10px; font-weight: 900; padding: 4px 7px; }
.seo-report-coverage-card.unavailable .seo-report-source-state { background: #fff1ce; color: #906100; }
.seo-report-coverage-card p { color: #405265; font-size: 12px; line-height: 1.55; margin: 12px 0 8px; }
.seo-report-coverage-card small { color: var(--muted); display: block; font-size: 10px; }
.seo-report-feature-coverage { background: #fff; border: 1px solid var(--line); border-radius: 9px; margin: 14px 0 18px; overflow: hidden; }
.seo-report-feature-coverage > summary { align-items: center; cursor: pointer; display: flex; gap: 12px; justify-content: space-between; list-style: none; min-height: 58px; padding: 11px 14px; }
.seo-report-feature-coverage > summary::-webkit-details-marker { display: none; }
.seo-report-feature-coverage > summary:hover { background: #f8fbfb; }
.seo-report-feature-coverage > summary > span:first-child { display: grid; gap: 3px; }
.seo-report-feature-coverage > summary b { color: var(--ink); font-size: 13px; }
.seo-report-feature-coverage > summary small { color: var(--muted); font-size: 10px; font-weight: 600; }
.seo-report-feature-coverage > summary > span:last-child { color: #71818d; font-size: 18px; transition: transform .16s ease; }
.seo-report-feature-coverage[open] > summary > span:last-child { transform: rotate(180deg); }
.seo-report-feature-summary { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.seo-report-feature-summary em { border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; padding: 4px 7px; white-space: nowrap; }
.seo-report-feature-summary .ready { background: #e5f4ee; color: #287461; }
.seo-report-feature-summary .partial { background: #fff4d9; color: #94651a; }
.seo-report-feature-summary .missing { background: #f4f6f7; color: #6e7d87; }
.seo-report-feature-grid { background: #f7f9fa; border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
.seo-report-feature-grid article { background: #fff; border: 1px solid var(--line); border-left: 4px solid #9daab2; border-radius: 7px; min-width: 0; padding: 11px 12px; }
.seo-report-feature-grid article.state-ready { border-left-color: var(--teal); }
.seo-report-feature-grid article.state-partial { border-left-color: #d59a31; }
.seo-report-feature-grid article > header { align-items: center; display: flex; gap: 8px; }
.seo-report-feature-grid article > header span { background: #f0f3f4; border-radius: 999px; color: #697983; font-size: 9px; font-weight: 800; padding: 3px 6px; }
.seo-report-feature-grid article.state-ready > header span { background: #e5f4ee; color: #287461; }
.seo-report-feature-grid article.state-partial > header span { background: #fff4d9; color: #94651a; }
.seo-report-feature-grid article > header b { color: var(--ink); font-size: 12px; }
.seo-report-feature-grid article p { color: #405265; font-size: 11px; line-height: 1.5; margin: 9px 0 7px; }
.seo-report-feature-grid article small { color: var(--muted); display: block; font-size: 10px; line-height: 1.45; }
.seo-report-feature-grid article small strong { color: #536772; }
.manual-data-catalog-grid { background: #f7f9fa; border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
.manual-data-catalog-grid article { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 0; padding: 11px 12px; }
.manual-data-catalog-grid article > header { align-items: center; display: flex; gap: 8px; margin-bottom: 9px; }
.manual-data-catalog-grid article > header span { background: #eaf6f4; border-radius: 999px; color: #197d79; font-size: 9px; font-weight: 850; padding: 3px 7px; white-space: nowrap; }
.manual-data-catalog-grid article > header b { color: var(--ink); font-size: 12px; }
.manual-data-catalog-grid dl { display: grid; gap: 7px; margin: 0; }
.manual-data-catalog-grid dl > div { display: grid; gap: 2px; }
.manual-data-catalog-grid dt { color: #6c7d87; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.manual-data-catalog-grid dd { color: #405265; font-size: 10px; line-height: 1.48; margin: 0; }
.seo-report-section-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-report-domain-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid #76949d; border-radius: 9px; box-shadow: var(--shadow); overflow: hidden; padding: 15px 16px; }
.seo-report-domain-card.status-healthy { border-top-color: #24946d; }
.seo-report-domain-card.status-watch { border-top-color: #c48b1f; }
.seo-report-domain-card.status-at_risk { border-top-color: #c64c43; }
.seo-report-domain-card.status-unavailable { border-top-color: #9aa6b2; background: #fbfcfd; }
.seo-report-domain-card > header { align-items: flex-start; display: flex; justify-content: space-between; }
.seo-report-domain-card > header span { color: var(--muted); font-size: 10px; font-weight: 900; }
.seo-report-domain-card > header h3 { font-size: 16px; margin: 3px 0 0; }
.seo-report-domain-card > header > strong { color: var(--ink); font-size: 22px; }
.seo-report-domain-headline { color: #405265; font-size: 12px; line-height: 1.55; margin: 11px 0 13px; }
.seo-report-domain-metrics { border: 1px solid #e5ebef; border-radius: 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.seo-report-domain-metrics > div { border-right: 1px solid #e5ebef; display: grid; gap: 3px; min-width: 0; padding: 10px; }
.seo-report-domain-metrics > div:last-child { border-right: 0; }
.seo-report-domain-metrics span:first-child { color: var(--muted); font-size: 10px; }
.seo-report-domain-metrics b { font-size: 14px; overflow-wrap: anywhere; }
.seo-report-metric-change { font-size: 9px; font-weight: 800; }
.seo-report-metric-change.positive { color: #198058; }
.seo-report-metric-change.negative { color: #ba433e; }
.seo-report-metric-change.neutral { color: #8a97a4; }
.seo-report-top-items { border-top: 1px solid var(--line); margin-top: 13px; padding-top: 11px; }
.seo-report-top-items h4 { font-size: 11px; margin: 0 0 6px; }
.seo-report-top-items > div { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 5px 0; }
.seo-report-top-items span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-report-top-items b { font-size: 11px; }
.seo-report-top-items small { color: var(--muted); font-size: 9px; }
.seo-report-findings-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-report-count { background: #edf3f5; border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 900; padding: 5px 9px; }
.seo-report-finding-list article { border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); padding: 13px 16px; }
.seo-report-finding-list article:first-child { border-top: 0; }
.seo-report-finding-icon { align-items: center; background: #e9f6f0; border-radius: 999px; color: #1f805e; display: flex; font-size: 15px; font-weight: 900; height: 26px; justify-content: center; width: 26px; }
.seo-report-findings.risk .seo-report-finding-icon { background: #fff0ed; color: #b7433d; }
.seo-report-finding-list h4 { font-size: 13px; margin: 0; }
.seo-report-finding-list p { color: #405265; font-size: 11px; line-height: 1.5; margin: 4px 0; }
.seo-report-finding-list small { color: var(--ink); display: block; font-size: 10px; line-height: 1.5; }
.seo-report-finding-list em { color: var(--muted); display: block; font-size: 9px; font-style: normal; margin-top: 5px; }
.seo-report-actions ol { list-style: none; margin: 0; padding: 0; }
.seo-report-actions li { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 38px minmax(0, 1fr); padding: 13px 16px; }
.seo-report-actions li:first-child { border-top: 0; }
.seo-report-priority { border-radius: 5px; color: #fff; font-size: 10px; font-weight: 900; padding: 5px 7px; text-align: center; }
.seo-report-priority.p0 { background: #b9443e; }
.seo-report-priority.p1 { background: #bf8416; }
.seo-report-priority.p2 { background: #60758a; }
.seo-report-actions li b { font-size: 13px; }
.seo-report-actions li p { color: #405265; font-size: 11px; margin: 4px 0; }
.seo-report-actions li small { color: var(--muted); font-size: 10px; }
.seo-report-contract-note { color: var(--muted); font-size: 10px; margin: 0; text-align: center; }

@media (max-width: 1180px) {
  .seo-report-coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-report-domain-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-report-domain-metrics > div:nth-child(2) { border-right: 0; }
  .seo-report-domain-metrics > div:nth-child(n + 3) { border-top: 1px solid #e5ebef; }
}

@media (max-width: 760px) {
  .seo-report-canvas { padding-left: 12px; padding-right: 12px; }
  .seo-report-controls, .seo-report-section-heading { align-items: stretch; flex-direction: column; }
  .seo-report-feature-coverage > summary { align-items: flex-start; flex-wrap: wrap; }
  .seo-report-feature-summary { margin-left: 0; order: 3; width: 100%; }
  .seo-report-controls label, .seo-report-controls select { width: 100%; }
  .seo-report-controls > span { margin-left: 0; padding-bottom: 0; }
  .seo-report-hero { grid-template-columns: 1fr; padding: 20px; }
  .seo-report-score { border-bottom: 1px solid rgba(255, 255, 255, .3); border-right: 0; justify-content: flex-start; padding: 0 0 14px; }
  .seo-report-coverage-grid, .seo-report-feature-grid, .manual-data-catalog-grid, .seo-report-section-grid, .seo-report-findings-grid { grid-template-columns: 1fr; }
}

/* Shared information architecture and typography.
 * The seven dashboards are the application-level navigation.  Board-specific
 * menus remain secondary navigation inside the selected dashboard canvas. */
.board-shell {
  align-items: start;
  background: var(--canvas);
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
}

.board-shell > .dashboard-tabs {
  align-self: stretch;
  background: #f8fafb;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
  margin: 0;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 12px 14px;
  position: sticky;
  top: 0;
  z-index: 8;
}

.board-shell > .topbar {
  background: #fff;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 15px 24px 14px;
}

.board-shell > main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  width: 100%;
}

.dashboard-tabs-heading {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  margin: 0 4px 12px;
  padding: 0 7px 14px;
}

.dashboard-tabs-heading span,
.dashboard-tabs-footer > span {
  color: var(--teal);
  font-size: var(--font-size-caption);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-tabs-heading strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.dashboard-tabs-list {
  display: grid;
  gap: 5px;
}

.dashboard-tabs .dashboard-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  display: grid;
  gap: 9px;
  grid-template-columns: 25px minmax(0, 1fr);
  min-height: 58px;
  padding: 8px 9px;
  position: relative;
  text-align: left;
  width: 100%;
}

.dashboard-tabs .dashboard-tab:hover {
  background: #fff;
  border-color: #d1dfe4;
}

.dashboard-tabs .dashboard-tab.active {
  background: #e8f4f2;
  border: 1px solid #9bcac4;
  box-shadow: inset 3px 0 0 var(--teal);
  padding: 8px 9px;
}

.dashboard-tabs .dashboard-tab > .dashboard-tab-index {
  align-items: center;
  background: #edf1f3;
  border-radius: 6px;
  color: #74838e;
  display: flex;
  font-size: 9px;
  font-weight: 900;
  height: 25px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  overflow: visible;
  white-space: nowrap;
  width: 25px;
}

.dashboard-tabs .dashboard-tab.active > .dashboard-tab-index {
  background: #fff;
  color: var(--teal-dark);
}

.dashboard-tabs .dashboard-tab > .dashboard-tab-copy {
  display: block;
  margin: 0;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.dashboard-tabs .dashboard-tab .dashboard-tab-copy > strong {
  color: var(--ink);
  display: block;
  font-size: var(--font-size-label);
  line-height: 1.3;
}

.dashboard-tabs .dashboard-tab .dashboard-tab-note {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-small);
  line-height: 1.35;
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tabs-footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
  margin: auto 4px 0;
  min-width: 0;
  padding: 13px 7px 0;
}

.dashboard-tabs-footer strong {
  color: var(--ink);
  font-size: var(--font-size-body);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tabs-footer small {
  color: var(--muted);
  font-size: var(--font-size-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One consistent type scale for the shared shell and reusable dashboard parts. */
.board-shell .site-identity { font-size: var(--font-size-body); }
.board-shell .page-title { font-size: var(--font-size-page); line-height: 1.16; }
.board-shell .page-subtitle { font-size: var(--font-size-label); line-height: 1.5; }
.board-shell .section-title,
.board-shell .panel-title-row h2 { font-size: var(--font-size-section); line-height: 1.35; }
.board-shell .section-desc,
.board-shell .card-subtitle { font-size: var(--font-size-body); line-height: 1.5; }
.board-shell .card-title { font-size: 15px; line-height: 1.35; }
.board-shell .side-nav-heading { font-size: var(--font-size-caption); letter-spacing: .05em; }
.board-shell .side-nav-button { font-size: var(--font-size-label); line-height: 1.4; }
.board-shell .field-label,
.board-shell label > span:first-child { font-size: var(--font-size-small); }
.board-shell .control-button,
.board-shell .outline-button,
.board-shell .dark-button,
.board-shell .teal-button,
.board-shell .select-control,
.board-shell .search-control,
.board-shell .date-control {
  font-size: var(--font-size-body);
  min-height: var(--control-height);
}
.board-shell table th { font-size: var(--font-size-small); line-height: 1.35; }
.board-shell table td { font-size: var(--font-size-body); line-height: 1.45; }
.board-shell .kpi-label,
.board-shell .metric-card span { font-size: var(--font-size-small); }
.board-shell .kpi-value { font-size: 24px; }
.board-shell .metric-card b { font-size: 23px; }
.board-shell .kpi-note,
.board-shell .metric-card small { font-size: var(--font-size-caption); }

.board-shell > .topbar {
  padding: 8px 20px;
}
.board-shell .topbar .topbar-main {
  align-items: center;
  min-height: 50px;
}
.board-shell .topbar .topbar-main > div:first-child {
  align-items: baseline;
  display: grid;
  gap: 0 9px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}
.board-shell .topbar .site-identity {
  font-size: var(--font-size-small);
  margin: 0;
}
.board-shell .topbar .page-title {
  font-size: 20px;
  letter-spacing: -.35px;
}
.board-shell .topbar .page-subtitle {
  font-size: var(--font-size-small);
  grid-column: 2;
  margin: 1px 0 0;
}
.board-shell .topbar .header-actions {
  align-items: flex-end;
  margin-top: 0;
}
.board-shell .topbar .site-switcher,
.board-shell .topbar .site-switcher .select-control {
  min-width: 190px;
}
.board-shell .shopify-hero {
  border-radius: 7px;
  display: block;
  margin-top: 8px;
  padding: 8px 11px;
}
.board-shell .shopify-layout {
  display: block;
  margin: 0;
}
.board-shell .shopify-nav {
  align-items: center;
  display: flex;
  gap: 3px;
  grid-template-columns: none;
  max-height: none;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0 0 7px 7px;
  border-top: 0;
  padding: 4px 6px;
  position: sticky;
  scrollbar-width: thin;
  top: 0;
}
.board-shell .shopify-nav .side-nav-heading {
  flex: 0 0 auto;
  grid-column: auto;
  padding: 0 10px 0 7px;
}
.board-shell .shopify-nav .side-nav-button {
  border: 1px solid transparent;
  border-radius: 5px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}
.board-shell .shopify-nav .side-nav-button.active {
  border: 1px solid #a7d0cb;
  border-bottom: 3px solid var(--teal);
  padding: 6px 10px 4px;
}
.board-shell .shopify-board-content { margin-top: 9px; }

/* Every dashboard uses one compact, sticky secondary tab rail. The controls
 * were previously split between left sidebars and top strips, which reduced
 * the usable canvas and made the same hierarchy behave differently by board. */
.board-shell .keyword-layout,
.board-shell .deep-board-layout,
.board-shell .keyword-drill-layout {
  display: block;
  width: 100%;
}

.board-shell .keyword-nav,
.board-shell .module-nav,
.board-shell .shopify-nav {
  align-items: stretch;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(22, 49, 62, .06);
  display: flex;
  gap: 3px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 6px;
  position: sticky;
  scrollbar-width: thin;
  top: 0;
  z-index: 9;
}

.board-shell .keyword-nav .side-nav-heading,
.board-shell .module-nav .side-nav-heading,
.board-shell .shopify-nav .side-nav-heading {
  align-items: center;
  display: flex;
  flex: 0 0 116px;
  min-height: 34px;
  padding: 0 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-shell .keyword-nav .side-nav-button,
.board-shell .module-nav .side-nav-button,
.board-shell .shopify-nav .side-nav-button {
  border: 1px solid transparent;
  border-radius: 5px;
  flex: 1 1 0;
  min-height: 34px;
  min-width: 128px;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

.board-shell .keyword-nav .side-nav-button:hover,
.board-shell .module-nav .side-nav-button:hover,
.board-shell .shopify-nav .side-nav-button:hover {
  background: #f2f7f7;
  border-color: #d4e4e3;
}

.board-shell .keyword-nav .side-nav-button.active,
.board-shell .module-nav .side-nav-button.active,
.board-shell .shopify-nav .side-nav-button.active {
  background: var(--teal-pale);
  border: 1px solid #a7d0cb;
  border-bottom: 3px solid var(--teal);
  color: var(--teal);
  padding: 6px 10px 4px;
}

.board-shell .keyword-layout > :not(.keyword-nav),
.board-shell .deep-board-layout > .deep-board-content {
  margin-top: 10px;
}

.board-shell .keyword-layout [id^="keyword-"] {
  scroll-margin-top: 54px;
}

.board-shell .keyword-drill-tab-strip,
.board-shell .gsc-workbench-tabs {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(22, 49, 62, .06);
  flex-wrap: nowrap;
  margin-bottom: 10px;
  padding: 4px 6px;
  position: sticky;
  scrollbar-width: thin;
  top: 0;
  z-index: 9;
}

.board-shell .keyword-drill-tab-strip .keyword-drill-tab,
.board-shell .gsc-workbench-tabs .filter-pill {
  flex: 1 0 150px;
  text-align: center;
  white-space: nowrap;
}

/* Page Performance has ten view tabs. Keep the five page-type tabs together
 * on the first row and the five analysis tabs together on the second row,
 * instead of letting their former 150px flex basis widen the whole page. */
.board-shell .gsc-workbench-tabs {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: visible;
}

.board-shell .gsc-workbench-tabs .filter-pill {
  flex: none;
  line-height: 1.2;
  min-width: 0;
  padding: 5px 6px;
  white-space: normal;
  width: 100%;
}

@media (min-width: 1281px) {
  .board-shell .shopify-control-grid {
    grid-template-columns: 145px 122px 122px 88px 116px minmax(180px, 1fr);
  }
}

@media (max-width: 1100px) {
  .kpi-grid.shopify-overview-kpis .kpi-card,
  .kpi-grid.shopify-overview-kpis .kpi-card:nth-child(n+6) {
    flex-basis: calc(33.333% - 7px);
  }
}

@media (max-width: 720px) {
  .kpi-grid.shopify-overview-kpis .kpi-card,
  .kpi-grid.shopify-overview-kpis .kpi-card:nth-child(n+6) {
    flex-basis: calc(50% - 5px);
    min-width: 132px;
  }
}

/* Keep the shared header actions readable as the application rail narrows the
 * content canvas. Keyword snapshot controls already occupy their own row. */
@media (max-width: 1320px) {
  .board-shell .keyword-snapshot-toolbar { grid-template-columns: 1fr; }
  .board-shell .keyword-filter-top { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .board-shell .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .board-shell .topbar .page-subtitle {
    display: none;
  }
}

@media (max-width: 1100px) {
  .board-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .board-shell > .dashboard-tabs {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    display: block;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    overflow: visible;
    padding: 12px 16px;
    position: static;
  }
  .dashboard-tabs-heading,
  .dashboard-tabs-footer { display: none; }
  .dashboard-tabs-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dashboard-tabs .dashboard-tab {
    min-height: 52px;
  }
  .dashboard-tabs .dashboard-tab .dashboard-tab-note { display: none; }
  .board-shell > .topbar {
    grid-column: 1;
    grid-row: 2;
  }
  .board-shell > main {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .board-shell > .topbar { padding: 10px 12px; }
  .dashboard-tabs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-tabs .dashboard-tab { grid-template-columns: 22px minmax(0, 1fr); min-height: 46px; padding: 7px 8px; }
  .dashboard-tabs .dashboard-tab.active { padding: 7px 8px; }
  .dashboard-tabs .dashboard-tab > .dashboard-tab-index { height: 22px; width: 22px; }
  .board-shell .page-title { font-size: 19px; }
  .board-shell .topbar .topbar-main > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }
  .board-shell .topbar .site-identity,
  .board-shell .topbar .page-subtitle { grid-column: 1; }
  .board-shell .topbar-main { align-items: stretch; flex-direction: column; }
  .board-shell .header-actions { justify-content: flex-start; margin-top: 12px; }
  .board-shell .site-project-control { align-items: stretch; flex: 1 1 100%; flex-direction: column; }
  .board-shell .site-switcher,
  .board-shell .site-switcher .select-control { min-width: 0; width: 100%; }
  .board-shell .header-actions > button { flex: 1 1 auto; }
  .board-shell .keyword-period-pair,
  .board-shell .keyword-filter-top { grid-template-columns: 1fr; }
  .board-shell .shopify-canvas { padding-left: 12px; padding-right: 12px; }
  .board-shell .shopify-layout { margin: 0; }
  .board-shell .keyword-nav .side-nav-heading,
  .board-shell .module-nav .side-nav-heading,
  .board-shell .shopify-nav .side-nav-heading { display: none; }
  .board-shell .keyword-nav .side-nav-button,
  .board-shell .module-nav .side-nav-button,
  .board-shell .shopify-nav .side-nav-button { flex-basis: 132px; min-width: 132px; }
  .board-shell .gsc-workbench-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Unified report drop zone. Native file inputs stay in the DOM for keyboard
   and screen-reader use; the whole surface becomes both click and drop target. */
.file-drop-zone,
.competitor-import-file {
  background: linear-gradient(135deg, #f7fbfb, #eef8f6);
  border: 1.5px dashed #72b9b3 !important;
  border-radius: 9px;
  cursor: pointer;
  min-height: 72px;
  overflow: hidden;
  padding: 11px 13px !important;
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.file-drop-zone:hover,
.file-drop-zone:focus-within,
.competitor-import-file:hover,
.competitor-import-file:focus-within,
.file-drop-zone.is-dragging,
.competitor-import-file.is-dragging,
.file-drop-compact.is-dragging {
  background: #e7f6f3;
  border-color: #197d79 !important;
  box-shadow: 0 0 0 3px rgba(25, 125, 121, .12);
}
.file-drop-zone.is-dragging,
.competitor-import-file.is-dragging,
.file-drop-compact.is-dragging { transform: translateY(-1px); }
.file-drop-zone > span,
.competitor-import-file > span,
.file-drop-zone > small,
.competitor-import-file > small { pointer-events: none; position: relative; z-index: 1; }
.file-drop-zone > span { display: grid; gap: 4px; }
.file-drop-zone > span b,
.competitor-import-file > span { color: #17313b; font-size: 11px; font-weight: 850; }
.file-drop-zone > span small { color: #617681; font-size: 10px; font-style: normal; line-height: 1.4; }
.competitor-import-file::before {
  color: #197d79;
  content: "⇧  拖拽文件到这里，或点击选择";
  display: block;
  font-size: 10px;
  font-weight: 850;
  margin: 3px 0 5px;
  pointer-events: none;
}
.file-drop-zone input[type="file"],
.competitor-import-file input[type="file"] {
  cursor: pointer;
  height: 100% !important;
  inset: 0;
  max-width: none !important;
  opacity: 0;
  position: absolute;
  width: 100% !important;
  z-index: 2;
}
.file-drop-compact { cursor: pointer; position: relative; }
.file-drop-compact::after {
  background: #197d79;
  border-radius: 50%;
  content: "";
  height: 5px;
  margin-left: 6px;
  width: 5px;
}

/* Ruojufanxing brand layer. Orange is reserved for brand identity, active
   navigation and short emphasis text; data-state colors remain semantic. */
:root {
  --brand-orange: #ff6700;
  --brand-orange-dark: #db5700;
  --brand-orange-pale: #fff2e8;
}

.brand-logo { display: block; height: auto; max-width: 100%; }
.site-identity,
.auth-eyebrow,
.dashboard-tabs-heading span,
.dashboard-tabs-footer > span { color: var(--brand-orange); }

.sidebar-brand-logo { margin-bottom: 9px; width: 176px; }
.auth-brand { align-items: start; display: grid; gap: 15px; }
.auth-brand-logo { width: min(280px, 100%); }
.auth-card h1 { color: #06162f; }
.auth-form .search-control:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 103, 0, .12);
}

.dashboard-tabs .dashboard-tab.active {
  background: var(--brand-orange-pale);
  border-color: #ffc49e;
  box-shadow: inset 3px 0 0 var(--brand-orange);
}
.dashboard-tabs .dashboard-tab.active > .dashboard-tab-index,
.dashboard-tabs .dashboard-tab.active .dashboard-tab-copy > strong { color: var(--brand-orange-dark); }
.settings-tabs button.active {
  border-bottom-color: var(--brand-orange);
  color: var(--brand-orange-dark);
}

/* The management workspace fits the viewport and never inherits the 1130px
   minimum width used by analytical data tables. */
.project-config-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  max-width: 1120px;
  width: min(1120px, calc(100vw - 32px));
}
.project-config-modal .config-head,
.project-config-modal .settings-tabs { flex: 0 0 auto; }
.project-config-modal .config-body {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.team-settings,
.team-settings > *,
.team-settings .connector-card,
.team-settings .table-wrap { min-width: 0; }
.team-settings .table-wrap { overflow-x: hidden; }
.team-settings .member-table {
  min-width: 0;
  table-layout: auto;
  width: 100%;
}
.team-settings .member-table th,
.team-settings .member-table td {
  overflow-wrap: anywhere;
  white-space: normal;
}
.team-settings .member-table .select-control { min-width: 0; width: 100%; }
.team-settings .member-create-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.team-settings .member-create-form > button {
  grid-column: 1 / -1;
  justify-self: start;
}
.team-settings .site-member-add-form .site-member-boundary { grid-column: 1 / -1; }
.team-settings .site-member-actions { min-width: 0; }

@media (max-width: 1100px) {
  .board-shell > .dashboard-tabs .dashboard-tabs-heading {
    align-items: center;
    border: 0;
    display: flex;
    justify-content: center;
    margin: 0 0 10px;
    padding: 0;
  }
  .board-shell > .dashboard-tabs .dashboard-tabs-heading span,
  .board-shell > .dashboard-tabs .dashboard-tabs-heading strong { display: none; }
  .board-shell > .dashboard-tabs .sidebar-brand-logo { margin: 0; width: min(190px, 55vw); }
}

@media (max-width: 760px) {
  .modal-backdrop { align-items: flex-start; overflow-y: auto; padding: 8px; }
  .project-config-modal {
    max-height: calc(100dvh - 16px);
    width: calc(100vw - 16px);
  }
  .project-config-modal .config-head { gap: 12px; padding: 15px 16px 12px; }
  .project-config-modal .settings-tabs { overflow-x: auto; padding: 7px 12px 0; white-space: nowrap; }
  .project-config-modal .config-body { padding: 12px; }
  .team-settings .member-create-form,
  .team-settings .site-member-add-form { grid-template-columns: minmax(0, 1fr); }
  .team-settings .member-create-form > button,
  .team-settings .site-member-add-form .site-member-boundary { grid-column: 1; width: 100%; }

  .team-settings .member-table,
  .team-settings .member-table tbody,
  .team-settings .member-table tr,
  .team-settings .member-table td { display: block; width: 100%; }
  .team-settings .member-table thead { display: none; }
  .team-settings .member-table tbody { display: grid; gap: 9px; }
  .team-settings .member-table tr {
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
  }
  .team-settings .member-table td {
    align-items: start;
    border-bottom: 1px solid #edf1f3;
    display: grid;
    gap: 9px;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 9px 10px;
  }
  .team-settings .member-table td:last-child { border-bottom: 0; }
  .team-settings .member-table td::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }
  .team-settings .member-table .empty-state { display: block; }
  .team-settings .member-table .empty-state::before { display: none; }
  .invitation-table td:nth-child(1)::before { content: "邀请对象"; }
  .invitation-table td:nth-child(2)::before { content: "站点角色"; }
  .invitation-table td:nth-child(3)::before { content: "状态"; }
  .invitation-table td:nth-child(4)::before { content: "失效时间"; }
  .identity-table td:nth-child(1)::before,
  .site-members-table td:nth-child(1)::before { content: "成员"; }
  .identity-table td:nth-child(2)::before { content: "登录配置"; }
  .identity-table td:nth-child(3)::before,
  .site-members-table td:nth-child(3)::before { content: "状态"; }
  .identity-table td:nth-child(4)::before { content: "创建时间"; }
  .identity-table td:nth-child(5)::before,
  .site-members-table td:nth-child(5)::before { content: "操作"; }
  .site-members-table td:nth-child(2)::before { content: "站点角色"; }
  .site-members-table td:nth-child(4)::before { content: "登录配置"; }
  .team-settings td.site-member-actions { display: grid; }
  .auth-card { padding: 24px; }
  .auth-brand-logo { width: min(250px, 100%); }
}