:root {
  --tdm-font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tdm-focus-ring: #2563eb;
}
.tdm-widget {
  max-width: 1100px;
  margin: 14px 0;
  font-family: var(--tdm-font-family);
  color: var(--tdm-text-color, #111827);
  line-height: 1.45;
}
.tdm-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tdm-padding, 12px);
  border: 1px solid var(--tdm-card-border, #e5e7eb);
  border-radius: var(--tdm-radius, 10px);
  background: var(--tdm-card-bg, #ffffff);
  margin-bottom: 10px;
}
.tdm-price__label {
  font-size: var(--tdm-label-size, 12px);
  color: var(--tdm-muted-color, #6b7280) !important;
}
.tdm-price__value {
  font-size: var(--tdm-price-size, 28px);
  font-weight: 650;
  line-height: 1.1;
  color: var(--tdm-text-color, #111827) !important;
}
.tdm-price__meta {
  font-size: var(--tdm-meta-size, 12px);
  color: var(--tdm-muted-color, #6b7280) !important;
}

.tdm-chart {
  padding: 10px 12px;
  border-radius: var(--tdm-radius, 10px);
  background: var(--tdm-chart-bg, var(--tdm-card-bg, #ffffff));
  border: 1px solid var(--tdm-card-border, #e5e7eb);
}

.tdm-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
}
.tdm-controls select {
  padding: 6px 8px;
  background: var(--tdm-control-bg, var(--tdm-card-bg, #ffffff));
  color: var(--tdm-control-text, var(--tdm-text-color, #111827)) !important;
  border: 1px solid var(--tdm-control-border, var(--tdm-card-border, #e5e7eb));
  border-radius: var(--tdm-radius, 10px);
}
.tdm-controls__hint {
  font-size: var(--tdm-meta-size, 12px);
  color: var(--tdm-muted-color, #6b7280) !important;
}

.tdm-widget :where(select, button, a, input, textarea):focus-visible,
.tdm-table :where(select, button, a, input, textarea):focus-visible {
  outline: 3px solid var(--tdm-focus-ring, #2563eb);
  outline-offset: 2px;
}

.tdm-status {
  margin-top: 8px;
  font-size: var(--tdm-meta-size, 12px);
  color: var(--tdm-status-color, #2b7a2b);
  min-height: 16px;
}
.tdm-status--error {
  color: var(--tdm-status-error-color, #b00020);
}

/* ---------- Tables ---------- */
.tdm-table {
  max-width: 1100px;
  margin: 18px 0;
  color: var(--tdm-text-color, var(--tdt-row-text, #111827));
  font-family: var(--tdm-font-family);
  line-height: 1.45;
}
.tdm-table__title {
  text-align: center;
  font-weight: 750;
  color: var(--tdm-text-color, #111827) !important;
  font-size: 20px;
  margin-bottom: 10px;
}
.tdm-table__wrap {
  border: 1px solid var(--tdt-border, #e5e7eb);
  border-radius: var(--tdt-radius, 10px);
  overflow: hidden;
  background: var(--tdt-bg, #ffffff);
}
.tdm-table__table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 0px !important;
}
.tdm-table__table th,
.tdm-table__table td {
  padding: var(--tdt-padding, 12px);
  border-top: 1px solid var(--tdt-border, #e5e7eb);
  text-align: center;
  width: 33.33% !important;
}
.tdm-table__table thead th {
  background: var(--tdt-header-bg, #ffffff);
  color: var(--tdm-text-color, #111827) !important;
  font-weight: 750;
  border-top: none;
}

.tdm-table__table tbody td {
  color: var(--tdm-text-color, var(--tdt-row-text, #111827)) !important;
}
.tdm-table__table tbody tr:hover td {
  background: var(--tdt-hover-bg, rgba(0, 0, 0, 0.02));
}

.tdm-table__table tbody tr:focus-within td {
  background: var(--tdt-hover-bg, rgba(0, 0, 0, 0.02));
}

/* ==========================
   Glass theme (modern UI)
   ========================== */
.tdm-theme--glass {
  --tdm-glass-bg: rgba(255, 255, 255, 0.08);
  --tdm-glass-border: rgba(255, 255, 255, 0.22);
  --tdm-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --tdm-glass-blur: 14px;

  /* Table vars */
  --tdt-glass-bg: rgba(255, 255, 255, 0.08);
  --tdt-glass-border: rgba(255, 255, 255, 0.22);
  --tdt-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  --tdt-glass-blur: 14px;
}

/* Apply to widget containers */
.tdm-theme--glass.tdm-widget .tdm-price {
  background: var(--tdm-glass-bg);
  border: 1px solid var(--tdm-glass-border);
  box-shadow: var(--tdm-glass-shadow);
  backdrop-filter: blur(var(--tdm-glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--tdm-glass-blur)) saturate(150%);
  color: var(--tdm-text-color, white);
}

.tdm-theme--glass.tdm-widget .tdm-chart {
  padding: 10px 12px;
  border-radius: var(--tdm-radius, 10px);
  background: var(--tdm-glass-bg);
  border: 1px solid var(--tdm-glass-border);
  box-shadow: var(--tdm-glass-shadow);
  backdrop-filter: blur(var(--tdm-glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--tdm-glass-blur)) saturate(150%);
  color: var(--tdm-text-color, white);
}

.tdm-theme--glass.tdm-widget .tdm-controls select {
  background: var(--tdm-control-bg, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--tdm-control-border, rgba(255, 255, 255, 0.25));
  border-radius: 10px;
  color: var(--tdm-control-text, inherit);
  padding: 6px 10px;
  outline: none;
}

.tdm-theme--glass.tdm-widget .tdm-controls select:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Apply to tables */
.tdm-theme--glass.tdm-table .tdm-table__wrap {
  border: 1px solid var(--tdm-glass-border);
  background: var(--tdt-glass-bg);
  box-shadow: var(--tdt-glass-shadow);
  backdrop-filter: blur(var(--tdt-glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--tdt-glass-blur)) saturate(150%);
  color: var(--tdt-row-text, white);
}

.tdm-theme--glass.tdm-table .tdm-table__table thead th {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--tdt-header-text, white);
}

.tdm-theme--glass.tdm-table .tdm-table__table th,
.tdm-theme--glass.tdm-table .tdm-table__table td {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.tdm-theme--glass .tdm-status {
  color: rgba(255, 255, 255, 0.85);
}

/* Classic theme (explicit) — uses existing defaults */
.tdm-theme--classic.tdm-widget .tdm-price,
.tdm-theme--classic.tdm-widget .tdm-chart,
.tdm-theme--classic.tdm-table .tdm-table__wrap {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==========================
   Contrast helpers (for dark backgrounds)
   ========================== */
.tdm-contrast--dark {
  --tdm-text-color: #d8dedf;
  --tdm-muted-color: #d8dedf;
  --tdm-grid-color: rgba(245, 239, 230, 0.18);
  --tdm-surface-border: rgba(245, 239, 230, 0.28);
  --tdt-row-text: rgba(245, 239, 230, 0.9);
}

.tdm-contrast--dark .tdm-controls select {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.92);
}

.tdm-contrast--dark .tdm-table__table th,
.tdm-contrast--dark .tdm-table__table td {
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.tdm-contrast--dark .tdm-table__table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

.tdm-contrast--dark .tdm-status {
  color: rgba(166, 255, 166, 0.9);
}
.tdm-contrast--dark .tdm-status--error {
  color: rgba(255, 170, 170, 0.95);
}

/* Optional explicit light contrast */
.tdm-contrast--light {
  --tdm-text-color: #111827;
  --tdm-muted-color: #6b7280;
  --tdm-grid-color: rgba(0, 0, 0, 0.1);
  --tdm-surface-border: rgb(229 229 229);
  --tdt-row-text: #111827;
  --tdt-header-text: #f97316;
}