/* Atlas Method theme, matched to the staff console (atlas-method-staff src/theme).
   Light is the default; html.dark switches palettes (see /theme.js). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap");

:root {
  color-scheme: light;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #ffffff;
  --header: #f5f7fa;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;
  --band: #f3f4f6;
  --ink: #202020;
  --text: #000000;
  --text-muted: #202020;
  --border: #d7d7d7;
  --primary: #1d1b6d;
  --primary-pressed: #063f9e;
  --selected: #1d1b6d;
  --accent: #f8ae1e;
  --destructive: #b54a3c;
  --success: #3f7a45;
  --focus: #3508b7;
  --on-primary: #f5f5f5;
  --cta: linear-gradient(165deg, #3508b7 0%, #1d1b6d 42%, #063f9e 99%);
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
  /* Graph series (grades and sources) */
  --c-total: #1d1b6d;
  --c-hot: #f8ae1e;
  --c-warm: #f2cf85;
  --c-pending: #6d6bd1;
  --c-disqualified: #b54a3c;
  --c-ungraded: #a0a0a0;
  --c-s0: #1d1b6d;
  --c-s1: #f8ae1e;
  --c-s2: #3f7a45;
  --c-s3: #b54a3c;
  --c-s4: #3508b7;
  --c-s5: #0e7490;
  --c-s6: #a21caf;
  --c-s7: #6b7280;
  --grid: #e6e6e6;
}

html.dark {
  color-scheme: dark;
  --bg: #000000;
  --header: #202020;
  --surface: #202020;
  --surface-muted: #202020;
  --band: #202020;
  --ink: #f5f5f5;
  --text: #f5f5f5;
  --text-muted: #d7d7d7;
  --border: #202020;
  --selected: #a8a6f0;
  --destructive: #d96a5b;
  --success: #7dab7a;
  --focus: #a490df;
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45);
  --c-total: #a8a6f0;
  --c-warm: #b58a3c;
  --c-pending: #a8a6f0;
  --c-disqualified: #d96a5b;
  --c-ungraded: #6b6b6b;
  --c-s0: #a8a6f0;
  --c-s2: #7dab7a;
  --c-s3: #d96a5b;
  --c-s4: #a490df;
  --c-s5: #22d3ee;
  --c-s6: #e879f9;
  --c-s7: #9ca3af;
  --grid: #333333;
}
html.dark .table-wrap, html.dark .card, html.dark input, html.dark .btn-quiet, html.dark .chips label { border-color: #3a3a3a; }
html.dark th, html.dark td { border-bottom-color: #333333; }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
}

strong, b, th, legend, .label { font-weight: 600; }

a { color: var(--selected); }

/* Atlas Method mark (staff console /brand/am-mark-black.png, 80px). Used as a mask so one
   asset renders black in light mode and off-white in dark mode, like the staff app. */
.mark {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: none;
  background-color: var(--text);
  --mark-src: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEUBAQEBAQEPDw8aGhqKPcA7AAAABHRSTlMB+J5i/IaEdwAAAt5JREFUeNp91TGIHHUUx/HP/mc813gJi2gSuBO2OQhcisVCTAqZIqVFBG+FVCkEBQu3sLAcOytJ4RWCxTUHchYGsbSY6rSwWCRZhIhsESGBoAN3nGsyu2MxuzczV2Sa/8yXN2/+v/d+/zc873q6s/P96r6zXP8aYW2/Ba9tgpf3QABRxZxkIAZv8OEN1zfKb+rIqG/jBoc/elrDNdEd+PdOOTqF6z6qcr7u0QpGSZRUcDGeZ0u45spq24/cXcLNkK7gUfJkCUf/1Wr3nlUwZHkNf11kBF6U1bB0l8DVslmtbEpgWjRhHhNI8ibsBoIgbcKTMkPn/XYLdhNBd96GaV9wtWjDfi6Y9trwXlcs+5jw7ZDrI1h7txDZvphhmJmdTCaTyZ+/bd+PZd/RlbFMsyiF0EFh0FQaygUGpqyEpVm8zvJ5awfW9pLtuIiR63J4WEX2BqGIkfYbCnp57BjZ8YUajjeCHpG3Fk1RYYDS53jzNrZG4vWQ9yh1pP6ZYZQjGNMNcxklUdYTFwGKuWTAgip1yDGISlOkujiuTJsvhlUnXa39maOLqWkNUxToLhsbQ/Za8uwHlFF2GhmZDD8oiRcLCYQepcSsZM0XIWFdMFBKkZr7Yw5xQDigPEjI8gKFuJebd9CxpacPx2HcKNlUD4WgYcRiuc9QdW5Z3Fdg0IvjwkvvwPa++deQ98LxqmWnpyEfB9HZwZElIZRnYZqEeant2kgSS7a/3IGLyQNs63RwP2m/ff49wc1+G85i4cyBYzATxLM2nPYFs9CGyVgQyqxlrqoou63Pnx8SSFun68qCQD9uwr2CiKOtSUPk47+nAidGNTwnJTBPn9Twckgqh9x+WsPRC0vb/F6evn8+e3UJj6pZCL+4Q9WMZ5eGlaoLD6N7K38+8qAK/NnlenrvZpe+wrXNzkE9vT/1+BMebzrXnPO7Vc4qcBnps2q5pQmPHsKlm2cs8Pb+rZ+e+8f5H5QK5pT4PW6oAAAAAElFTkSuQmCC");
  -webkit-mask: var(--mark-src) center / contain no-repeat;
  mask: var(--mark-src) center / contain no-repeat;
}

/* Header chrome */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 12px 24px;
  background: var(--header);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.intro { padding: 24px 24px 8px; }
.sub, .stamp { margin: 0; color: var(--text-muted); font-size: 14px; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Buttons */
button, input, select { font: inherit; letter-spacing: inherit; color: var(--text); }
.cta, button[type="submit"], #refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--cta);
  color: var(--on-primary);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
}
.cta:hover, button[type="submit"]:hover, #refresh:hover { filter: brightness(1.12); }
.btn-quiet {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { background: var(--band); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.banner {
  margin: 0 24px 12px;
  padding: 10px 12px;
  border: 1px solid var(--destructive);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  color: var(--destructive);
  background: var(--surface);
}

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: end;
  padding: 8px 24px 16px;
}
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .source {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0;
  margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.chips label:has(input:checked) { border-color: var(--selected); box-shadow: inset 0 0 0 1px var(--selected); }
input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
html.dark input[type="checkbox"] { accent-color: var(--selected); }
.source { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
input[type="search"], input[type="password"], input[type="date"] {
  text-transform: none;
  letter-spacing: -0.2px;
  font-size: 14px;
  font-weight: 300;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  min-width: 200px;
}
/* Date filter */
.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.date-custom { display: inline-flex; align-items: center; gap: 8px; }
.date-custom[hidden] { display: none; }
select {
  height: 36px;
  padding: 0 32px 0 12px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.2px;
  color: var(--text);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23808080' stroke-width='1.5'/%3E%3C/svg%3E")
    right 12px center / 10px 6px no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  appearance: none;
  cursor: pointer;
}
input[type="date"] { min-width: 150px; }
html.dark select { border-color: #3a3a3a; }
.date-filter.is-active select { border-color: var(--selected); box-shadow: inset 0 0 0 1px var(--selected); }
.result-count { margin: 0 24px 12px; font-size: 13px; color: var(--text-muted); }
.result-count strong { color: var(--text); }
.result-count .pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--band);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.check { display: inline-flex; gap: 8px; align-items: center; height: 36px; }

.empty {
  margin: 12px 24px;
  padding: 16px;
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
code { font-size: 13px; background: var(--band); padding: 1px 4px; border-radius: var(--radius-sm); }

/* Table card */
.table-wrap {
  margin: 0 24px 32px;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; min-width: 1180px; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-muted); }
th {
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--band);
}
tr.is-disqualified { opacity: 0.55; }
tr.is-hidden { display: none; }

.when { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.when small, .contact small { color: var(--text-muted); opacity: 0.8; }
.contact { display: flex; flex-direction: column; gap: 2px; }
.funnels { display: flex; flex-direction: column; gap: 2px; }
.unknown { color: var(--text-muted); opacity: 0.7; font-style: italic; }
.reason { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge.hot { background: var(--accent); color: #202020; }
.badge.warm { border-color: var(--accent); color: var(--text); }
.badge.pending { border-color: var(--selected); color: var(--selected); }
.badge.disqualified { border-color: var(--destructive); color: var(--destructive); }
.badge.ungraded { border-color: var(--border); color: var(--text-muted); }

td input[type="text"] {
  font: inherit;
  width: 180px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 8px;
  border-radius: var(--radius-md);
}
td input[type="text"]:hover, td input[type="text"]:focus { border-color: var(--border); background: var(--surface); }
.save-error { color: var(--destructive); font-size: 12px; }

/* Login (mirrors the staff console sign-in) */
.login {
  max-width: 448px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.login h1 { margin-top: 12px; }
.login .helper { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.login .banner { margin: 0; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.login input[type="password"] { width: 100%; height: 52px; font-size: 16px; }
.login .actions { display: flex; align-items: center; gap: 12px; }
.login button[type="submit"] { height: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hamburger menu */
.menu { position: relative; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--band); }
.burger { display: inline-flex; flex-direction: column; gap: 4px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--text); }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.menu-list[hidden] { display: none; }
.menu-list [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 300;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-list [role="menuitem"]:hover, .menu-list [role="menuitem"]:focus-visible { background: var(--band); outline-offset: -2px; }
.menu-list .logout { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; border-radius: 0; }
html.dark .icon-btn, html.dark .menu-list, html.dark .menu-list .logout { border-color: #3a3a3a; }

/* Tabs */
.tabs { display: flex; gap: 4px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tabs [role="tab"] {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  margin-bottom: -1px;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--selected); border-bottom-color: var(--selected); }
.tabs [role="tab"]:hover { color: var(--text); }
html.dark .tabs { border-bottom-color: #3a3a3a; }
body[data-view="table"] .graph-only, body[data-view="graph"] .table-only { display: none !important; }
.check[hidden] { display: none; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; height: 32px; }
.segmented label { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; background: var(--surface); }
.segmented label + label { border-left: 1px solid var(--border); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
html.dark .segmented, html.dark .segmented label + label { border-color: #3a3a3a; }
html.dark .segmented label:has(input:checked) { background: var(--selected); color: #000000; }

/* Graph */
.chart-card {
  margin: 0 24px 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
html.dark .chart-card { border-color: #3a3a3a; }
.chart { width: 100%; min-height: 320px; }
.chart[hidden] { display: none; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis-line { stroke: var(--text-muted); stroke-width: 1; }
.chart-svg .axis { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.chart-svg .axis-title { font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.chart-svg .bar:hover { opacity: 0.8; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: 13px; }
.legend:empty { display: none; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.bar.total { fill: var(--c-total); } .swatch.total { background: var(--c-total); }
.bar.g-hot { fill: var(--c-hot); } .swatch.g-hot { background: var(--c-hot); }
.bar.g-warm { fill: var(--c-warm); } .swatch.g-warm { background: var(--c-warm); }
.bar.g-pending { fill: var(--c-pending); } .swatch.g-pending { background: var(--c-pending); }
.bar.g-disqualified { fill: var(--c-disqualified); } .swatch.g-disqualified { background: var(--c-disqualified); }
.bar.g-ungraded { fill: var(--c-ungraded); } .swatch.g-ungraded { background: var(--c-ungraded); }
.bar.s-0 { fill: var(--c-s0); } .swatch.s-0 { background: var(--c-s0); }
.bar.s-1 { fill: var(--c-s1); } .swatch.s-1 { background: var(--c-s1); }
.bar.s-2 { fill: var(--c-s2); } .swatch.s-2 { background: var(--c-s2); }
.bar.s-3 { fill: var(--c-s3); } .swatch.s-3 { background: var(--c-s3); }
.bar.s-4 { fill: var(--c-s4); } .swatch.s-4 { background: var(--c-s4); }
.bar.s-5 { fill: var(--c-s5); } .swatch.s-5 { background: var(--c-s5); }
.bar.s-6 { fill: var(--c-s6); } .swatch.s-6 { background: var(--c-s6); }
.bar.s-7 { fill: var(--c-s7); } .swatch.s-7 { background: var(--c-s7); }
.graph-note { margin: 0 24px 32px; font-size: 13px; }
.chart-card .empty { margin: 0; }

/* Settings slide-over */
.backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.35); }
.backdrop[hidden], .drawer[hidden] { display: none; }
body.drawer-open { overflow: hidden; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: min(760px, 100vw);
  overflow-y: auto;
  padding: 20px 24px 32px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
html.dark .drawer { border-left-color: #3a3a3a; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.drawer h2 { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.6px; color: var(--ink); }
.drawer h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.placeholder-note {
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13px;
}
.settings-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
html.dark .settings-section, html.dark .placeholder-note { border-color: #3a3a3a; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.soon {
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.status-line { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.status-off { font-weight: 600; color: var(--text); }
.settings-fields { display: flex; flex-direction: column; gap: 12px; }
.settings-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.settings-fields input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.2px;
  text-transform: none;
}
.settings-fields :disabled, .section-head button:disabled { opacity: 0.6; cursor: not-allowed; }
html.dark .settings-fields input { border-color: #3a3a3a; }
.planned-rule { padding: 10px 12px; border-left: 3px solid var(--border); background: var(--surface-muted); color: var(--text-muted); opacity: 0.75; }
.planned-rule p { margin: 0; }
.planned-rule .label { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; }
.settings-table { margin: 8px 0 0; }
.settings-table table { min-width: 0; font-size: 13px; }
.settings-table th, .settings-table td { padding: 10px; }
.settings-table code { white-space: nowrap; font-size: 12px; }
.settings-table td.num { text-align: right; }
.settings-table td:nth-child(2) { min-width: 110px; }
.source-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.source-cell code:first-child { font-weight: 600; }
.source-cell .hook { background: transparent; padding: 0; color: var(--text-muted); }

@media (max-width: 720px) {
  .top { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .intro, .filters { padding-left: 16px; padding-right: 16px; }
  .table-wrap { margin: 0 12px 24px; }
  .tabs { padding-left: 16px; padding-right: 16px; }
  .chart-card { margin: 0 12px 12px; }
  .top-actions { width: 100%; }
  .menu { margin-left: auto; }
}