:root {
  color-scheme: dark;
  --ot-bg: #0b0f16;
  --ot-bg-soft: #111722;
  --ot-panel: #171e2a;
  --ot-panel-2: #1d2736;
  --ot-panel-3: #101722;
  --ot-line: #2b3748;
  --ot-line-strong: #42536c;
  --ot-text: #edf2f7;
  --ot-muted: #9eabba;
  --ot-blue: #6f8ff5;
  --ot-blue-strong: #5579ed;
  --ot-cyan: #67e8f9;
  --ot-green: #86efac;
  --ot-yellow: #facc75;
  --ot-red: #fca5a5;
  --ot-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  --ot-radius: 15px;
  --ot-radius-small: 10px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ot-bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ot-text);
  background:
    radial-gradient(circle at 50% -20%, rgba(76, 104, 154, .35), transparent 42rem),
    linear-gradient(180deg, #111824 0%, var(--ot-bg) 42rem);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* Shared header */
.outlytic-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(66, 83, 108, .72);
  background: rgba(11, 15, 22, .91);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}

.site-header-inner {
  width: min(1500px, calc(100% - 28px));
  min-height: 62px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -.025em;
  text-decoration: none;
}

.site-brand-mark {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: #07101e;
  background: linear-gradient(145deg, #89a6ff, #61e6f6);
  border-radius: 9px;
  box-shadow: 0 7px 20px rgba(92, 125, 238, .30);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.site-nav > a,
.nav-menu > summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  color: #c6d0dd;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary::after {
  content: "▾";
  margin-left: 6px;
  color: var(--ot-muted);
  font-size: .75rem;
}

.site-nav > a:hover,
.nav-menu > summary:hover,
.nav-menu[open] > summary {
  color: #fff;
  background: var(--ot-panel);
  border-color: var(--ot-line);
}

.nav-menu {
  position: relative;
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  padding: 8px;
  background: #131b27;
  border: 1px solid var(--ot-line);
  border-radius: 12px;
  box-shadow: var(--ot-shadow);
}

.nav-menu-panel a {
  display: block;
  padding: 9px 10px;
  color: #d8e0e9;
  border-radius: 8px;
  font-size: .88rem;
  text-decoration: none;
}

.nav-menu-panel a:hover {
  color: #fff;
  background: var(--ot-panel-2);
}

/* Main layout */
.outlytic-main {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 58px;
}

.outlytic-main.wide,
.outlytic-wide-page .outlytic-main {
  width: min(1860px, calc(100% - 28px));
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.page-title-wrap {
  min-width: 0;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--ot-cyan);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-title,
h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.page-description,
.subtitle,
.sub {
  max-width: 820px;
  margin-top: 8px;
  color: var(--ot-muted);
  line-height: 1.6;
}

.page-actions,
.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.crumbs {
  margin-bottom: 14px;
  color: var(--ot-muted);
  font-size: .88rem;
}

.crumbs a {
  color: #cbd8e8;
  text-decoration: none;
}

.crumbs a:hover {
  color: #fff;
}

/* Panels and cards */
.panel,
.card,
.form-card,
.results-card,
.tool-section {
  color: var(--ot-text);
  background: linear-gradient(145deg, rgba(25, 33, 46, .97), rgba(16, 23, 34, .97));
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  box-shadow: var(--ot-shadow);
}

.panel,
.form-card,
.results-card {
  padding: 22px;
}

.panel + .panel,
.form-card + .results-card,
.section-block + .section-block {
  margin-top: 18px;
}

.panel-header {
  margin-bottom: 17px;
}

.panel-title {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
}

.panel-description {
  margin: 6px 0 0;
  color: var(--ot-muted);
  font-size: .92rem;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.tool-card {
  min-height: 166px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  color: inherit;
  background: linear-gradient(145deg, rgba(26, 35, 49, .98), rgba(15, 22, 32, .98));
  border: 1px solid var(--ot-line);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  background: var(--ot-panel-2);
  border-color: #536987;
}

.tool-card-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 8px;
  color: #b9cbff;
  background: rgba(82, 114, 222, .15);
  border: 1px solid rgba(111, 143, 245, .32);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tool-card h2,
.tool-card h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 1.12rem;
}

.tool-card p {
  margin: 0;
  color: var(--ot-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.tool-card-arrow {
  color: var(--ot-cyan);
  font-size: .88rem;
  font-weight: 800;
}

/* Forms */
.form-grid,
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 13px;
  align-items: end;
}

.form-grid.two-column {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.form-grid.three-column {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field.span-2 {
  grid-column: span 2;
}

.field label,
label.form-label {
  color: #c9d2de;
  font-size: .82rem;
  font-weight: 700;
}

input,
select,
textarea,
.form-control {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ot-text);
  background: #0d141f;
  border: 1px solid var(--ot-line);
  border-radius: 9px;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #728095;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  color: #fff;
  background: #0f1724;
  border-color: var(--ot-blue);
  box-shadow: 0 0 0 3px rgba(111, 143, 245, .15);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.button,
.btn,
button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  color: var(--ot-text);
  background: var(--ot-panel-2);
  border: 1px solid var(--ot-line);
  border-radius: 9px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.button:hover,
.btn:hover,
button:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: var(--ot-line-strong);
  filter: brightness(1.08);
}

.button.primary,
.btn-primary,
button.primary,
button[type="submit"] {
  color: #fff;
  background: linear-gradient(145deg, var(--ot-blue), var(--ot-blue-strong));
  border-color: #718ff0;
}

.button.ghost {
  background: transparent;
}

.help-text {
  margin-top: 8px;
  color: var(--ot-muted);
  font-size: .82rem;
}

/* Alerts, status and metrics */
.alert {
  margin: 15px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ot-line);
  border-radius: 10px;
  line-height: 1.5;
}

.alert.error,
.error-message {
  color: #ffd1d1;
  background: rgba(122, 33, 33, .26);
  border-color: rgba(252, 165, 165, .35);
}

.alert.info {
  color: #d7e3ff;
  background: rgba(59, 83, 157, .20);
  border-color: rgba(111, 143, 245, .35);
}

.status,
.meta-line {
  margin-top: 8px;
  color: var(--ot-muted);
  font-size: .87rem;
  line-height: 1.5;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  color: #cbd7e7;
  background: #233047;
  border: 1px solid var(--ot-line);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

.good { color: var(--ot-green) !important; }
.warn { color: var(--ot-yellow) !important; }
.bad { color: var(--ot-red) !important; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}

.metric-card {
  padding: 16px;
  background: #111925;
  border: 1px solid var(--ot-line);
  border-radius: 11px;
}

.metric-label {
  color: var(--ot-muted);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.metric-value {
  margin-top: 5px;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 18px 0;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.tab {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: var(--ot-muted);
  background: var(--ot-panel-3);
  border: 1px solid var(--ot-line);
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover,
.tab.active {
  color: #fff;
  background: var(--ot-panel-2);
  border-color: #516681;
}

.tab.active {
  color: var(--ot-cyan);
}

/* Tables */
.table-wrap,
.table-container,
.data-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--ot-line);
  border-radius: 12px;
  background: var(--ot-panel);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.data-table-wrap {
  margin-top: 16px;
}

.table-wrap table,
.table-container table,
.data-table-wrap table,
#data-table {
  width: 100%;
  margin: 0;
  color: var(--ot-text);
  background: transparent;
  border: 0;
  border-collapse: collapse;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}

.data-table-wrap table,
#data-table {
  min-width: 920px;
}

.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.data-table-wrap th,
.data-table-wrap td,
#data-table th,
#data-table td {
  padding: 10px 11px;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #233044;
  text-align: right;
  white-space: nowrap;
}

.table-wrap th,
.table-container th,
.data-table-wrap th,
#data-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: #c4cedb;
  background: #151f2e;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.table-wrap tbody tr:hover,
.table-container tbody tr:hover,
.data-table-wrap tbody tr:hover,
#data-table tbody tr:hover {
  background: #182336;
}

.data-table-wrap th:first-child,
.data-table-wrap td:first-child {
  text-align: left;
}

.data-table-wrap th[data-sort-dir="asc"]::after,
#data-table th[data-sort-dir="asc"]::after {
  content: " ▲";
  color: var(--ot-cyan);
}

.data-table-wrap th[data-sort-dir="desc"]::after,
#data-table th[data-sort-dir="desc"]::after {
  content: " ▼";
  color: var(--ot-cyan);
}

.table-empty,
.empty {
  padding: 44px 20px;
  color: var(--ot-muted);
  text-align: center;
}

.text-center {
  text-align: center !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 15px;
  color: var(--ot-muted);
  flex-wrap: wrap;
}

/* Heatmap and image output */
.visual-card {
  margin-top: 18px;
  padding: 18px;
  background: #0f1621;
  border: 1px solid var(--ot-line);
  border-radius: 13px;
  text-align: center;
}

.visual-card img,
.heatmap-image,
.image-container img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--ot-line);
  border-radius: 11px;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .34);
}

.visual-caption {
  margin: 0 0 13px;
  color: var(--ot-muted);
  font-size: .88rem;
}

/* Existing wide screening pages */
.outlytic-wide-page .shell {
  width: min(1860px, calc(100% - 28px));
  max-width: none !important;
  margin: 0 auto;
  padding: 28px 0 54px !important;
}

.outlytic-wide-page .topbar {
  gap: 20px;
}

.outlytic-wide-page .toolbar,
.outlytic-wide-page .filters {
  background: linear-gradient(145deg, rgba(24, 32, 45, .98), rgba(15, 22, 32, .98));
  border-color: var(--ot-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.outlytic-wide-page .table-wrap {
  max-height: calc(100vh - 300px);
}

/* Hot Options standalone page */
.legacy-hot-options .page {
  width: min(1860px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 55px;
}

.legacy-hot-options .toolbar {
  border-color: var(--ot-line);
  background: linear-gradient(145deg, rgba(24, 32, 45, .98), rgba(15, 22, 32, .98));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .20);
}

.legacy-hot-options .table-wrap {
  border-color: var(--ot-line);
  background: var(--ot-panel);
}

.legacy-hot-options thead th,
.legacy-hot-options thead tr.filters th {
  background: #151f2e;
}

/* Footer */
.outlytic-footer {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 30px;
  color: #748295;
  border-top: 1px solid rgba(43, 55, 72, .7);
  text-align: center;
  font-size: .78rem;
  line-height: 1.6;
}

.outlytic-footer a {
  color: #9eb3ff;
}

/* Responsive */
@media (max-width: 1000px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .filter-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .site-header-inner {
    min-height: auto;
    padding: 10px 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .nav-menu-panel {
    position: fixed;
    top: 104px;
    right: 14px;
    left: 14px;
    width: auto;
  }

  .page-header {
    flex-direction: column;
  }

  .page-actions,
  .actions {
    justify-content: flex-start;
  }

  .outlytic-wide-page .shell {
    width: min(100% - 20px, 1860px);
  }
}

@media (max-width: 620px) {
  .outlytic-main,
  .outlytic-main.wide,
  .outlytic-wide-page .outlytic-main,
  .outlytic-footer {
    width: min(100% - 18px, 1240px);
  }

  .outlytic-main {
    padding-top: 24px;
  }

  .tool-grid,
  .form-grid,
  .form-grid.two-column,
  .form-grid.three-column,
  .filter-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .field.span-2 {
    grid-column: auto;
  }

  .panel,
  .form-card,
  .results-card {
    padding: 17px;
  }

  .tool-card {
    min-height: 145px;
  }

  .page-title,
  h1 {
    font-size: 1.85rem;
  }

  .button,
  .btn,
  button {
    min-height: 42px;
  }
}