/* Readable data surfaces; strong gradients are reserved for navigation and actions. */
:root {
 --ink:#14213a;
 --muted:#42536c;
 --border:#b9c7db;
 --surface-shadow:0 5px 12px #14213a0a,0 18px 38px -22px #14213a45;
 font-size:17px;
 color:var(--ink);
}
body {font-weight:500;line-height:1.65;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility;background:linear-gradient(145deg,var(--page),#e7edf7);}
body,body[data-palette=indigo] {--accent:#4c35bf;--accent-hover:#38238e;--accent-text:#402b9c;--nav-start:#39308b;--nav-end:#111b36;--chart-color:#5436cc;}
body[data-palette=ocean] {--accent:#075c94;--accent-hover:#034775;--accent-text:#064e7d;--nav-start:#07517b;--nav-end:#10263f;--chart-color:#0874b3;}
body[data-palette=emerald] {--accent:#08664f;--accent-hover:#044e3c;--accent-text:#07513e;--nav-start:#09674f;--nav-end:#102d36;--chart-color:#08775b;}
body[data-palette=berry] {--accent:#8e285d;--accent-hover:#701c48;--accent-text:#7b204f;--nav-start:#752654;--nav-end:#241b39;--chart-color:#a42d69;}
body[data-palette=amber] {--accent:#8d4b08;--accent-hover:#6c3604;--accent-text:#783f06;--nav-start:#744512;--nav-end:#292334;--chart-color:#9c550e;}
h1,h2,h3,strong,b {color:var(--ink);}
h1 {font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1.22;}
.heading p,.integration p,.panel-head p,.growth-intro p,.metrika-help p,.empty p,.first-load-prompt p {font-size:16px;line-height:1.75;color:var(--muted);font-weight:500;}
.heading p {max-width:76ch;}
.integration>p,.growth-intro p {max-width:85ch;}
.panel h2,.panel-head h2,.integration h2 {font-size:21px;font-weight:750;line-height:1.4;letter-spacing:-.35px;}
.muted,.form-help,.chart-note,.integration .form-help,.account-form-info,.account-switch-note,.position-period-info {color:var(--muted);font-size:15px;line-height:1.75;}
.sidebar {background:linear-gradient(155deg,var(--nav-start) 0%,var(--nav-end) 85%);border-right:1px solid #ffffff30;box-shadow:8px 0 28px #12203c24;}
.sidebar .brand {color:#fff;font-weight:800;font-size:19px;}
.sidebar .brand small,.sidebar .sidebar-foot small {color:#d0dbef;font-size:12px;}
.sidebar .brand-symbol {border:1px solid #ffffff60;box-shadow:0 4px 16px #090e2b50;}
.sidebar .account-picker label,.sidebar .site-picker label,.sidebar .nav-label,.sidebar .metrika-nav-label,.palette-picker>span {color:#e1e8ff!important;font-size:12px;font-weight:700;letter-spacing:.65px;}
.sidebar nav a {font-size:15px;font-weight:600;color:#e5ebfa;padding-top:12px;padding-bottom:12px;}
.sidebar nav a.active {color:#fff;background:linear-gradient(105deg,var(--accent),var(--accent-hover));box-shadow:inset 3px 0 var(--nav-line),0 6px 18px #090e2b45;}
.sidebar nav a.active span {color:#fff;}
.sidebar nav a:hover {background-color:#ffffff16;color:#fff;}
.sidebar .text-button {color:#edf2ff;font-size:13px;font-weight:600;}
.sidebar .account-picker select,.sidebar .site-picker select {background:#0c16374d;border:1px solid #c6d7ff80;color:#fff;font-size:15px;font-weight:600;min-height:48px;}
.sidebar select option,.sidebar select optgroup {background:#fff;color:#14213a;}
.sidebar .sidebar-foot {color:#d8e1f2;font-size:12px;}
.topbar {background:#fff;border-bottom:1px solid var(--border);box-shadow:0 3px 12px #14213a0a;}
.breadcrumb {color:var(--muted);font-size:14px;}
.breadcrumb b {color:var(--ink);font-weight:750;}
.source-pill {font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--accent) 30%,white);color:var(--accent-text);}
.panel,.filters,.kpi,.region-card {border:1px solid var(--border);box-shadow:var(--surface-shadow);}
.panel {background:#fff;}
.panel-head,.table-toolbar {background:linear-gradient(110deg,var(--panel-head),#fff);border-bottom:1px solid var(--border);}
.integration {padding:28px;}
.integration>.panel-head {margin-bottom:20px;border-radius:10px;border:1px solid var(--border);}
.filters {background:#fff;}
.filters label,.report-settings label,label,.calendar-range-control,.help-label {font-size:14px;color:#33465f;font-weight:650;}
input,select,textarea,.calendar-trigger,.host-search,.search-box input,label input,label select {color:var(--ink);font-size:16px;font-weight:550;border-color:#98abc5;}
input:not([type=checkbox]):not([type=radio]),select,.calendar-trigger {min-height:46px;}
input::placeholder,textarea::placeholder {color:#596b83;opacity:1;}
input[type=checkbox],input[type=radio] {accent-color:var(--accent);}
/* Keep native select/checkbox semantics, replace only their painted controls. */
:root select:not([multiple]) {
 appearance:none;
 -webkit-appearance:none;
 padding-inline-end:56px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Crect width='36' height='32' rx='8' fill='%23edf1f8'/%3E%3Cpath d='m13 14 5 5 5-5' fill='none' stroke='%23384d6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 8px center;
 background-size:36px 32px;
 border-radius:10px;
 box-shadow:0 2px 4px #14213a08;
 cursor:pointer;
 text-overflow:ellipsis;
 transition:border-color .18s,box-shadow .18s;
}
:root select:not([multiple]):hover:not(:disabled) {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);}
:root .sidebar select:not([multiple]) {
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Crect width='36' height='32' rx='8' fill='white' fill-opacity='.12'/%3E%3Cpath d='m13 14 5 5 5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root .sidebar select:not([multiple]):hover:not(:disabled) {border-color:#e0e8ff;box-shadow:0 0 0 3px #ffffff14;}
:root select:disabled {cursor:not-allowed;opacity:.6;}
:root input[type=checkbox],:root input[type=radio] {
 appearance:none;
 -webkit-appearance:none;
 display:inline-grid;
 place-content:center;
 vertical-align:middle;
 flex:0 0 22px;
 width:22px;
 min-width:22px;
 height:22px;
 min-height:22px;
 margin:0 9px 0 0;
 padding:0;
 border:1.5px solid #8b9fb9;
 border-radius:7px;
 background:#fff;
 box-shadow:0 2px 4px #14213a0d;
 cursor:pointer;
 transition:background-color .15s,border-color .15s,box-shadow .15s;
}
:root input[type=checkbox]::before {
 content:'';
 width:12px;
 height:7px;
 margin-top:-3px;
 border-left:2px solid #fff;
 border-bottom:2px solid #fff;
 transform:rotate(-45deg) scale(0);
}
:root input[type=checkbox]:checked,:root input[type=radio]:checked {
 background:var(--accent);
 border-color:var(--accent-hover);
 box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 22%,transparent);
}
:root input[type=checkbox]:checked::before {transform:rotate(-45deg) scale(1);}
:root input[type=checkbox]:indeterminate {background:var(--accent);border-color:var(--accent-hover);}
:root input[type=checkbox]:indeterminate::before {width:10px;height:0;border-left:0;border-bottom:2px solid #fff;transform:none;margin-top:0;}
:root input[type=radio] {border-radius:50%;}
:root input[type=radio]::before {content:'';width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);}
:root input[type=radio]:checked::before {transform:scale(1);}
:root input[type=checkbox]:hover:not(:disabled),:root input[type=radio]:hover:not(:disabled) {border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);}
:root input[type=checkbox]:disabled,:root input[type=radio]:disabled {opacity:.5;cursor:not-allowed;box-shadow:none;}
label:has(>input[type=checkbox]),label:has(>input[type=radio]) {cursor:pointer;}
#rank-cost-confirm {width:22px;height:22px;margin-inline-end:9px;}
.calendar-navigation>div {min-width:0;}
:root .calendar-navigation select {padding-inline-end:42px;background-size:28px 28px;background-position:right 6px center;min-width:0;}
/* Paint the opened picker too, rather than handing it to the operating system. */
@supports (appearance:base-select) {
 :root select:not([multiple]),:root select:not([multiple])::picker(select) {
  appearance:base-select;
  -webkit-appearance:base-select;
 }
 :root select:not([multiple])::picker-icon {display:none;}
 :root select:not([multiple])::picker(select) {
  color:#14213a;
  background:#fff;
  border:1px solid #b3c2da;
  border-radius:13px;
  padding:6px;
  inset:auto;
  top:anchor(bottom);
  left:anchor(left);
  margin:7px 0;
  inline-size:anchor-size(width);
  min-inline-size:anchor-size(width);
  max-inline-size:calc(100vw - 24px);
  position-try-fallbacks:flip-block,flip-inline;
  max-block-size:min(360px,55dvh);
  overflow:auto;
  overscroll-behavior:contain;
  box-shadow:0 8px 20px #14213a1c,0 22px 50px #14213a26;
  scrollbar-width:thin;
  scrollbar-color:#9cacbf transparent;
  font-size:15px;
  font-weight:550;
 }
 :root select:not([multiple]) option {
  display:flex;
  align-items:center;
  gap:10px;
  min-block-size:42px;
  padding:10px 13px;
  margin:2px 0;
  border-radius:8px;
  background:#fff;
  color:#14213a;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  font-size:15px;
  line-height:1.45;
 }
 :root select:not([multiple]) option:is(:hover,:focus-visible) {background:var(--accent-soft);color:var(--accent-text);outline:none;}
 :root select:not([multiple]) option:checked {background:var(--accent);color:#fff;font-weight:700;}
 :root select:not([multiple]) option::checkmark {color:currentColor;order:1;margin-inline-start:auto;}
 :root select:not([multiple]) option:disabled {background:#f1f4f8;color:#66758b;cursor:not-allowed;}
 :root select:not([multiple]) optgroup {padding:5px 0;color:#455b7a;background:#fff;font-size:12px;font-weight:750;}
 :root select:not([multiple]) optgroup>legend {padding:9px 13px 5px;}
}
@media(forced-colors:active) {
 :root select:not([multiple]) {appearance:auto;background-image:none;padding-inline-end:12px;}
 :root input[type=checkbox],:root input[type=radio] {appearance:auto;background:Canvas;border-color:ButtonText;}
 :root input[type=checkbox]::before,:root input[type=radio]::before {content:none;}
 :root select:not([multiple])::picker(select) {appearance:auto;color:CanvasText;background:Canvas;border-color:ButtonText;box-shadow:none;}
}
.primary,.secondary {font-size:15px;font-weight:750;min-height:46px;border-radius:10px;}
.primary {color:#fff;background:linear-gradient(125deg,var(--accent),var(--accent-hover));border:1px solid var(--accent-hover);box-shadow:0 5px 9px color-mix(in srgb,var(--accent) 20%,transparent),0 12px 24px -12px var(--accent);}
.primary:hover {background:linear-gradient(125deg,var(--accent-hover),var(--accent));box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 30%,transparent);}
.secondary {color:#263c58;background:linear-gradient(#fff,#f1f5fb);border:1px solid #a5b7ce;box-shadow:0 2px 4px #14213a0c;}
.secondary:hover {color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft);}
button:disabled {opacity:.6;box-shadow:none;cursor:not-allowed;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.sidebar :focus-visible {outline-color:#fff;}
.kpi {border-top:3px solid var(--accent);}
.kpi-grid .kpi:nth-child(4n+1) {background:linear-gradient(135deg,#e2dcff,#f8f7ff);border-color:#a79bd1;}
.kpi-grid .kpi:nth-child(4n+2) {background:linear-gradient(135deg,#cee8ff,#f3f9ff);border-color:#8ab5d6;}
.kpi-grid .kpi:nth-child(4n+3) {background:linear-gradient(135deg,#ffe3b5,#fff9ee);border-color:#cfa368;}
.kpi-grid .kpi:nth-child(4n+4) {background:linear-gradient(135deg,#f6d3e5,#fff5fa);border-color:#c59ab0;}
.kpi-label {color:#263b57;font-size:14px;font-weight:700;line-height:1.5;}
.kpi small {color:#3e526e;font-size:13px;line-height:1.6;}
.kpi-value {font-size:42px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;}
.kpi-grid .kpi:nth-child(4n+1) .kpi-value {color:#41268b;}
.kpi-grid .kpi:nth-child(4n+2) .kpi-value {color:#10557f;}
.kpi-grid .kpi:nth-child(4n+3) .kpi-value {color:#754005;}
.kpi-grid .kpi:nth-child(4n+4) .kpi-value {color:#7a2751;}
table {font-size:15px;}
th,th button {font-size:14px;font-weight:750;color:#253a56;}
th {background:color-mix(in srgb,var(--accent) 9%,white);border-bottom:2px solid #a8b8cf;}
td {color:#20334d;border-bottom-color:#d0daea;line-height:1.6;}
tbody tr:nth-child(even) {background:#f6f8fc;}
tbody tr:hover {background:color-mix(in srgb,var(--accent) 7%,white);}
.query-link {font-size:15px;font-weight:650;color:#253e63;}
.query-cell small,.table-bottom,.table-bottom small {font-size:13px;color:#435875;}
.number {font-weight:650;font-variant-numeric:tabular-nums;}
.delta.up {color:#076143;}.delta.down,.status-error {color:#a02536;}.delta.none {color:#4c5d73;}
.rank-good {color:#095634;background:#daf0e2;border:1px solid #83b99a;}
.pill,.metric-selector button {font-size:14px;font-weight:650;border-color:#a5b7ce;color:#334b68;}
.pill.active,.metric-selector button.active {color:var(--accent-text);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.chart text {fill:#3c506b;font-weight:600;}
.chart .grid,.overview-traffic-chart .grid {stroke:#c6d2e3;}
.chart .line,.overview-traffic-chart path {stroke-width:3;}
.chart-note,.overview-chart-legend {font-size:14px;color:#354d69;}
.notice,.first-load-prompt {border-width:1px;box-shadow:0 4px 12px #14213a0a;font-size:15px;}
.notice.error,.position-period-error {color:#8c2333;background:#fff0f1;border-color:#d694a0;}
.notice.success {color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,white);}
.badge {font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--accent) 35%,white);}
.region-card h3,.host-item strong {font-size:17px;color:var(--ink);}
.region-card p,.region-card small,.host-item small,.account-summary p {font-size:14px;color:var(--muted);}
.content-foot {color:#42536c;font-size:14px;}
.log-table {min-width:900px;}
.log-table td {vertical-align:top;}
.log-table small {display:block;color:var(--muted);margin-top:5px;font-size:13px;}
.log-table pre {max-width:340px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;color:#263c58;}
.log-table details p {font-size:12px;overflow-wrap:anywhere;}
.log-table summary {cursor:pointer;color:var(--accent-text);font-weight:650;}
.log-level {display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#edf1f8;color:#3c526f;}
.log-level-error {background:#ffe3e8;color:#921f34;}
.log-level-warning {background:#fff0ce;color:#754307;}
.log-level-info {background:var(--accent-soft);color:var(--accent-text);}
.rank-warning {display:block;font-size:12px;color:#7b4c0e;font-weight:650;margin-top:5px;}
.distribution-row {font-size:14px;color:#354b68;}
.distribution .muted,.table-toolbar .muted,.panel-head .muted {font-size:14px;color:#42536c;}
.filters .secondary,.report-settings .secondary,.position-period-info .secondary {font-size:14px;}
.overview-metrika-detail td,.overview-metrika-detail th {font-size:14px;}
dialog,.metric-help-popover {border-color:#a9bbd3;box-shadow:0 14px 30px #14213a25,0 30px 85px #14213a33;}
.metric-help-popover {font-size:15px;color:#243952;}
.calendar-explanation,.calendar-selection p {font-size:14px;color:#3c526f;}
.calendar-weekdays span,.calendar-legend,.calendar-saved-periods small {color:#465d7a;font-size:12px;}
.calendar-day {font-size:15px;font-weight:650;}
.calendar-day.has-data {background:#e5ecf7;color:#213b60;}
.calendar-day.selected {background:linear-gradient(125deg,var(--accent),var(--accent-hover));color:#fff;}
.calendar-day:disabled {color:#6b7b91;background:#f1f4f8;}
@media(max-width:1150px) {
 .kpi-value {font-size:36px;}
 .kpi-label {font-size:13px;}
}
@media(max-width:820px) {
 h1,.heading h1 {font-size:31px;letter-spacing:-.8px;}
 .content {padding:26px 16px;}
 .heading p,.integration p,.panel-head p,.growth-intro p {font-size:16px;}
 .integration {padding:21px;}
 .panel h2,.integration h2 {font-size:20px;}
 .primary,.secondary {font-size:15px;min-height:46px;}
 .heading-actions button {font-size:13px;}
 .kpi {padding:17px 14px;}
 .kpi-value {font-size:32px;}
 .kpi-label {font-size:13px;}
 .kpi small {font-size:12px;}
 .source-pill {font-size:11px;}
 .calendar-presets .secondary {font-size:12px;}
 .calendar-trigger {font-size:14px;}
 .rank-settings label {flex-basis:100%;}
}
