:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; background: #f5f7fb; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f7fb; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 60px; }
.topbar, .section-head, .panel-head, .source-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar { border-bottom: 1px solid #dfe5ef; padding-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: #2674e8; font-size: 12px; letter-spacing: .14em; }
h1, h2, p { margin: 0; } h1 { font-size: clamp(25px, 4vw, 38px); letter-spacing: -.02em; } h2 { font-size: 17px; }
.status { border: 1px solid #cfe0fb; border-radius: 20px; padding: 7px 13px; color: #4e6380; background: #eef5ff; font-size: 13px; }
.source-breakdown { overflow-x: auto; }
.source-breakdown table { width: 100%; border-collapse: collapse; font-size: 13px; }
.source-breakdown th, .source-breakdown td { padding: 9px 10px; border-top: 1px solid #e7edf5; text-align: left; white-space: nowrap; }
.source-breakdown th { color: #60728b; font-weight: 600; }
.nav-shell { max-width: 1080px; }
.nav-hero { padding: 54px 8px 30px; }
.nav-hero h1 { margin: 8px 0; font-size: clamp(32px, 5vw, 56px); letter-spacing: 0; }
.nav-hero p:last-child { margin: 0; color: #64748b; font-size: 16px; }
.nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nav-card { min-height: 230px; padding: 24px; display: flex; flex-direction: column; color: #172033; text-decoration: none; background: #fff; border: 1px solid #dbe5f1; border-radius: 8px; box-shadow: 0 8px 24px rgba(37, 67, 104, .06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.nav-card:hover { transform: translateY(-2px); border-color: #2674e8; box-shadow: 0 12px 28px rgba(37, 67, 104, .12); }
.nav-index { color: #2674e8; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.nav-title { margin-top: 28px; font-size: 24px; font-weight: 700; }
.nav-description { margin-top: 12px; color: #64748b; line-height: 1.65; }
.nav-action { margin-top: auto; padding-top: 24px; color: #2674e8; font-size: 14px; font-weight: 600; }
@media (max-width: 760px) { .nav-grid { grid-template-columns: 1fr; } .nav-card { min-height: 180px; } .nav-hero { padding-top: 28px; } }
.top-actions { display: flex; align-items: center; gap: 10px; } .subline { margin-top: 8px; color: #718096; font-size: 14px; }
.mode-link { color: #2674e8; text-decoration: none; font-size: 13px; border: 1px solid #cfe0fb; border-radius: 7px; padding: 8px 10px; background: #fff; } .mode-link:hover { background: #eef5ff; }
.section-head { padding: 29px 0 17px; } .section-head p, .panel-head span { color: #718096; font-size: 13px; margin-top: 5px; }
button { border: 1px solid #c9d7ea; border-radius: 7px; background: #fff; color: #24405f; padding: 9px 15px; cursor: pointer; box-shadow: 0 2px 5px rgba(38, 62, 92, .06); } button:hover { border-color: #2674e8; color: #2674e8; } button:disabled { cursor: wait; opacity: .65; }
.period-badge { color: #2674e8; background: #eef5ff; border: 1px solid #cfe0fb; padding: 8px 12px; border-radius: 7px; font-size: 13px; }
.metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.metric, .panel { border: 1px solid #e0e6ef; background: #fff; border-radius: 9px; box-shadow: 0 4px 14px rgba(33, 55, 89, .05); }
.metric { min-height: 122px; padding: 17px; display: flex; flex-direction: column; justify-content: space-between; } .metric span, .metric small { color: #718096; font-size: 13px; } .metric strong { font-size: 27px; color: #172033; }
.report-panel { margin-top: 16px; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 13px 12px; border-top: 1px solid #e7ebf2; font-size: 13px; white-space: nowrap; }
th { color: #718096; font-weight: 600; background: #fafbfd; }
td { color: #334155; }
.empty { text-align: center; color: #718096; }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; margin-top: 16px; }
.panel { padding: 20px; } .panel-head { margin-bottom: 18px; } .chart-panel { min-height: 350px; }
.source-panel { align-self: start; } .source-row { border-top: 1px solid #e7ebf2; padding: 15px 0; color: #64748b; } .source-row strong { color: #172033; font-size: 14px; }
.okr-panel, .manual-panel { margin-top: 16px; } .progress-text { color: #2674e8; font-size: 14px; }
.okr-order { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .okr-group { margin: 0; } .group-kicker { margin: 0 0 5px; color: #2674e8; font-size: 12px; } .pending-row { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid #e7ebf2; padding: 16px 0 2px; color: #334155; } .pending-row span { color: #718096; font-size: 13px; }
.history-toolbar { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .history-toolbar span { color: #718096; font-size: 13px; } .history-toolbar select { border: 1px solid #c9d7ea; border-radius: 7px; padding: 9px 12px; min-width: 220px; background: #fff; color: #334155; }
.history-data-panel { margin-top: 16px; overflow: hidden; } .history-table { min-width: 720px; }
.okr-charts-panel { margin-top: 16px; } .okr-charts { display: grid; grid-template-columns: 1fr; gap: 16px; } .okr-chart { border-top: 1px solid #e7ebf2; padding-top: 14px; } .okr-chart h3 { margin: 0 0 10px; font-size: 14px; color: #334155; } .okr-chart canvas { width: 100% !important; height: 260px !important; }
.geo-panel { margin-top: 16px; overflow: hidden; } .geo-screenshot-frame { width: 100%; overflow: hidden; background: #f8fbfd; border: 1px solid #e7ebf2; border-radius: 7px; } .geo-screenshot { display: block; width: 100%; height: auto; }
body.display-mode .manual-table input { border-color: transparent; background: transparent; pointer-events: none; } body.display-mode .manual-table select { appearance: none; border-color: transparent; background: transparent; pointer-events: none; } body.display-mode .manual-table .save-row { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; color: #172033; }
  .shell { width: 100%; max-width: none; padding: 0; }
  .top-actions, .history-toolbar, .history-data-panel, .okr-order, .okr-panel { display: none !important; }
  .topbar { border: 0; padding: 0 0 10px; }
  .topbar h1 { font-size: 22px; }
  .chart-panel { border: 0; box-shadow: none; padding: 0; }
  .okr-charts { display: block; }
  .okr-chart { break-inside: avoid; page-break-inside: avoid; min-height: 230px; margin-bottom: 12px; }
  .okr-chart canvas { height: 220px !important; }
}
.auto-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .auto-source { border: 1px solid #e1e8f2; border-radius: 7px; padding: 15px; background: #fbfcfe; } .auto-source h3 { margin: 0 0 8px; font-size: 14px; } .auto-source p { margin: 0; color: #718096; font-size: 12px; } .auto-source strong { display: block; margin-top: 13px; font-size: 13px; color: #2563a9; }
.traffic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .traffic-card { border: 1px solid #e1e8f2; border-radius: 7px; padding: 14px; background: #fbfcfe; } .traffic-card span { display: block; color: #60728b; font-size: 12px; } .traffic-card strong { display: block; margin-top: 6px; color: #172033; font-size: 22px; } .traffic-card small { display: block; margin-top: 4px; color: #718096; font-size: 12px; }
.legend { color: #718096; font-size: 12px; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; } .pending { background: #e49b24; } .done { background: #2ca56a; }
.manual-table { min-width: 1120px; } .manual-table input, .manual-table select { width: 100%; min-width: 90px; border: 1px solid #d7e0eb; border-radius: 5px; padding: 7px 8px; color: #334155; background: #fff; } .manual-table input:focus, .manual-table select:focus { outline: 2px solid #cfe0fb; border-color: #2674e8; } .manual-table .save-row { padding: 6px 10px; } .fixed-owner { color: #334155; font-weight: 600; white-space: nowrap; } .auto-value { color: #1e293b; font-weight: 700; } .auto-source-label { color: #64748b; font-size: 12px; white-space: nowrap; } .value-state { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #94a3b8; font-size: 18px; font-weight: 700; } .value-state.is-saved { color: #16a368; } .saved { color: #2ca56a; font-size: 12px; }
.manual-table .calculated-row td { background: #f8fbff; } .calculation-note { display: block; margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 400; }
.secondary-stack { display: grid; gap: 16px; margin-top: 16px; }
.secondary-shell { width: min(1440px, calc(100% - 40px)); }
.secondary-events { margin-top: 16px; }
.secondary-table { min-width: 900px; }
.secondary-table input, .secondary-table select, .secondary-table textarea, .ai-summary-form input { width: 100%; border: 1px solid #d7e0eb; border-radius: 5px; padding: 7px 8px; color: #334155; background: #fff; }
.secondary-table input:focus, .secondary-table select:focus, .secondary-table textarea:focus, .ai-summary-form input:focus { outline: 2px solid #cfe0fb; border-color: #2674e8; }
.secondary-table textarea { min-width: 260px; min-height: 46px; resize: vertical; white-space: pre-wrap; }
.secondary-table button + button { margin-left: 6px; }
.event-table { min-width: 1240px; }
.event-table td:first-child input { min-width: 270px; }
.event-table th:nth-child(5), .event-table td:nth-child(5) { min-width: 108px; }
.event-table td:nth-child(5) select { min-width: 96px; }
.event-table td:nth-child(7) textarea { min-width: 360px; }
.readonly-value { display: inline-flex; min-height: 34px; align-items: center; color: #334155; font-weight: 600; }
#aiCheck { display: inline-flex; align-items: center; gap: 8px; }
.ai-summary-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.ai-summary-form label { color: #64748b; font-size: 13px; display: grid; gap: 6px; }
.secondary-charts { grid-template-columns: 1fr; }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .shell { width: min(100% - 24px, 560px); padding-top: 20px; } .topbar, .section-head { align-items: flex-start; flex-direction: column; } .top-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; } .metrics, .grid, .auto-sources, .traffic-summary, .okr-charts, .ai-summary-form { grid-template-columns: 1fr; } .metric { min-height: 105px; } .history-toolbar { align-items: flex-start; flex-direction: column; } }

/* Make the primary event action easy to find. */
#addEvent { background: #15803d; border-color: #15803d; color: #fff; font-weight: 600; }
#addEvent:hover { background: #166534; border-color: #166534; }
#addEvent:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }

button.save-dirty { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
button.save-dirty:hover { background: #1d4ed8; border-color: #1d4ed8; }
button.save-success { background: #f0fdf4; border-color: #86efac; color: #15803d; }
button.save-dirty:focus-visible, button.save-success:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }

.okr-switch { display: flex; gap: 8px; margin: 18px 0; }
.okr-switch [aria-current="page"] { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }

.manual-jump-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 12px; margin: 16px 0; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgba(33,55,89,.06); white-space: nowrap; }
.manual-jump-nav strong { font-size: 13px; color: #64748b; margin-right: 4px; }
.manual-jump-nav a { flex-shrink: 0; padding: 8px 12px; border-radius: 6px; background: #eef5ff; color: #2563eb; text-decoration: none; font-size: 13px; }
.manual-jump-nav a:hover { background: #dbeafe; }
.manual-jump-nav a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
[id^="fill-"] { scroll-margin-top: 84px; }

.period-picker { display: flex; flex-direction: column; gap: 7px; }
.period-picker label { color: #2563eb; font-size: 13px; font-weight: 600; }
.selected-period-hint { color: #718096; font-size: 13px; margin-top: 6px; }

/* Authenticated GEO snapshots, scoped to the selected OKR period. */
.geo-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:20px 0}
.geo-metric{border:1px solid #dce5f0;border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;gap:18px;background:#fff}
.geo-metric span{color:#62748e;font-size:15px}.geo-metric strong{font-size:30px;line-height:1.2;color:#17243b}
.geo-metric:first-child{background:#1bbcb5;border-color:#1bbcb5}.geo-metric:first-child span,.geo-metric:first-child strong{color:#fff}
.geo-trend{height:340px;position:relative}.geo-trend[hidden]{display:none}#geoStatus{color:#71829b;font-size:14px;line-height:1.7}
@media(max-width:1000px){.geo-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.geo-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.geo-metric{padding:16px 12px}.geo-metric strong{font-size:25px}.geo-trend{height:300px}}

/* Retired screenshot; keep the asset for historical reference only. */
.geo-screenshot-frame, .geo-screenshot { display: none !important; }

/* Screenshot-ready crawler ranking: always show every row. */
#botLeaderboard .bot-ranking-period { color: #64748b; font-size: 13px; line-height: 1.8; margin: 10px 0 18px; }
#botLeaderboard .bot-ranking-table { width: 100%; border-collapse: collapse; }
#botLeaderboard .bot-ranking-table th, #botLeaderboard .bot-ranking-table td { padding: 13px 16px; font-size: 13px; white-space: nowrap; }
#botLeaderboard .bot-ranking-table th { background: #f5f8fc; color: #64748b; font-weight: 600; }
#botLeaderboard .bot-ranking-table th:nth-child(n+3), #botLeaderboard .bot-ranking-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
#botLeaderboard .bot-ranking-table th:first-child, #botLeaderboard .bot-ranking-table td:first-child { text-align: center; width: 54px; }
#botLeaderboard .bot-ranking-table tbody tr:nth-child(even) { background: #fafbfd; }
#botLeaderboard .bot-rank { display: inline-block; min-width: 24px; line-height: 24px; color: #64748b; }
#botLeaderboard .bot-rank-top { background: #eaf1ff; color: #326bd2; border-radius: 6px; font-weight: 700; }
#botLeaderboard .bot-up { color: #2563b5; }
#botLeaderboard .bot-down { color: #b45309; }
#botRankingSummary { padding: 12px 16px; background: #f5f8fc; border-radius: 8px; color: #475569; font-size: 13px; line-height: 1.7; }
#botLeaderboard > .source-date:last-child { color: #8190a5; font-size: 12px; line-height: 1.7; }
@media print { #botLeaderboard .table-wrap { overflow: visible; } #botLeaderboard tr { break-inside: avoid; } }

/* Canvas charts must fit the printable area, not their screen pixel width. */
@media print {
  html, body { min-width: 0 !important; width: 100% !important; }
  .shell { width: 100% !important; max-width: 273mm !important; margin: 0 auto !important; }
  .geo-panel, .geo-trend, .okr-chart { min-width: 0 !important; max-width: 100% !important; }
  .geo-trend { width: 100% !important; height: 300px !important; break-inside: avoid; page-break-inside: avoid; }
  .geo-trend canvas { width: 100% !important; max-width: 100% !important; height: 300px !important; }
  .geo-panel h3 { break-after: avoid; }
  .geo-panel .geo-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}