:root {
  --trade-bg: #f5f7fa;
  --trade-card: #fff;
  --trade-text: #1d2129;
  --trade-muted: #667085;
  --trade-line: #e5e8ef;
}
[data-theme="dark"] {
  --trade-bg: #131820;
  --trade-card: #1d2531;
  --trade-text: #edf1f7;
  --trade-muted: #a6b1c2;
  --trade-line: #344054;
}
.trade-page {
  margin: 0;
  background: var(--trade-bg);
  color: var(--trade-text);
  font:
    14px/1.6 system-ui,
    -apple-system,
    sans-serif;
}
.trade-page * {
  box-sizing: border-box;
}
.trade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--trade-card);
  border-bottom: 1px solid var(--trade-line);
  flex-wrap: wrap;
}
.trade-top nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.trade-page a,
[data-timezone-widget] a {
  color: #165dff;
  text-decoration: none;
}
.trade-brand {
  font-size: 20px;
  font-weight: 750;
}
.trade-layout {
  max-width: 1480px;
  margin: auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}
.trade-sidebar,
.trade-panel,
[data-timezone-widget] {
  background: var(--trade-card);
  padding: 16px;
  border: 1px solid var(--trade-line);
  border-radius: 12px;
  min-width: 0;
}
.trade-sidebar {
  align-self: start;
}
.trade-content {
  min-width: 0;
  display: grid;
  gap: 24px;
  align-content: start;
}
.trade-page h1 {
  margin: 0;
  font-size: 28px;
}
.trade-page h2,
[data-timezone-widget] h2 {
  font-size: 18px;
  margin: 0 0 16px;
}
.trade-page h3 {
  font-size: 15px;
}
.trade-page p {
  margin: 8px 0;
  color: var(--trade-muted);
}
.trade-page label {
  display: grid;
  gap: 6px;
  color: var(--trade-muted);
}
.trade-page input,
.trade-page select,
.trade-page button,
.trade-page textarea {
  font: inherit;
  color: var(--trade-text);
  background: var(--trade-card);
  border: 1px solid var(--trade-line);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 40px;
  max-width: 100%;
}
.trade-page input,
.trade-page select {
  width: 100%;
  min-width: 0;
}
.trade-page input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: #165dff;
}
.trade-page button {
  cursor: pointer;
}
.trade-page button:disabled {
  opacity: 0.45;
  cursor: default;
}
.trade-page button.primary {
  background: #165dff;
  border-color: #165dff;
  color: white;
}
.trade-page button:focus-visible,
.trade-page input:focus-visible,
.trade-page select:focus-visible {
  outline: 2px solid #165dff;
  outline-offset: 2px;
}
.trade-page .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.trade-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.trade-actions,
.tz-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.tz-heading {
  justify-content: space-between;
  margin: 0 0 16px;
}
.tz-heading h2 {
  margin: 0;
}
.trade-error {
  color: #d92d20;
  white-space: pre-line;
}
.trade-muted,
.trade-page small,
[data-timezone-widget] small {
  color: var(--trade-muted);
}
.trade-status {
  min-height: 24px;
}
.tz-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.tz-clock {
  padding: 16px;
  border: 1px solid var(--trade-line);
  border-radius: 8px;
  min-width: 0;
}
.tz-clock strong {
  display: block;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  color: #165dff;
  margin: 8px 0;
}
.tz-clock small {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tz-city {
  font-weight: 650;
}
.tz-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--trade-bg);
  margin: 8px 0;
  font-size: 12px;
}
.tz-badge.on {
  color: #087e76;
  background: #36cfc922;
}
.tz-favorite {
  padding: 12px 0;
  border-bottom: 1px solid var(--trade-line);
  overflow-wrap: anywhere;
}
.tz-favorite button {
  padding: 2px 8px;
  min-height: 30px;
  margin-top: 6px;
}
.tz-results {
  max-height: 260px;
  overflow: auto;
  margin: 8px 0;
}
.tz-results button {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.trade-table {
  overflow: auto;
  max-width: 100%;
}
.trade-page table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
}
.trade-page td,
.trade-page th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--trade-line);
  font-variant-numeric: tabular-nums;
}
.trade-page th {
  background: var(--trade-bg);
}
.trade-page tr.selected {
  background: #165dff12;
}
.trade-page td.available {
  color: #087e76;
}
.trade-page details {
  margin-top: 16px;
}
.trade-page summary {
  cursor: pointer;
  font-weight: 600;
}
.trade-page .metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.metric {
  padding: 16px;
  background: var(--trade-bg);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.metric strong {
  display: block;
  font-size: 23px;
  color: #165dff;
}
.metric.negative strong {
  color: #d92d20;
}
.trade-page .line-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--trade-line);
}
[data-timezone-widget] {
  margin-bottom: 24px;
  color: var(--trade-text);
}
[data-timezone-widget][hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .trade-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .tz-cards,
  .trade-page .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .trade-layout {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 24px;
  }
  .trade-top {
    padding: 16px;
  }
  .trade-content {
    grid-row: 1;
  }
  .trade-page h1 {
    font-size: 24px;
  }
  .tz-cards,
  .trade-page .metrics {
    grid-template-columns: 1fr;
  }
  .trade-fields {
    grid-template-columns: 1fr;
  }
  .trade-sidebar {
    grid-row: 2;
  }
}
@media print {
  .trade-top,
  .trade-sidebar,
  .trade-actions,
  .no-print {
    display: none !important;
  }
  .trade-layout {
    display: block;
    padding: 0;
  }
  .trade-panel {
    break-inside: avoid;
    margin-bottom: 16px;
  }
  .trade-table {
    overflow: visible;
  }
  .trade-page {
    background: white;
    color: black;
  }
}

.trade-top .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trade-top .theme-toggle-shared {
  position: static;
  box-shadow: none;
}
.trade-top .language-picker-shared {
  position: relative;
  top: auto;
  right: auto;
}
.trade-top nav {
  margin-left: auto;
}
.timezone-page .trade-sidebar details {
  margin: 0;
}
.timezone-page .trade-sidebar summary {
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .trade-top nav {
    order: 3;
    width: 100%;
    margin: 0;
  }
  .trade-top .header-right {
    margin-left: auto;
  }
  .timezone-page .trade-sidebar {
    grid-row: 1;
  }
  .timezone-page .trade-content {
    grid-row: 2;
  }
}