/* ==========================================================
   Real Vast billing overview
   ========================================================== */

.billing-overview-panel {
  min-width: 0;
}

.billing-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.billing-selection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.billing-period-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 94px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.58);
}

.billing-period-loading {
  opacity: 0.78;
}

.billing-period-label {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.billing-period-value {
  font-size: 1.22rem;
  line-height: 1.2;
}

.billing-period-status {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.billing-monthly-title-row {
  margin-top: 24px;
}

.billing-monthly-title-row h3 {
  margin: 0 0 4px 0;
}

.billing-monthly-wrap {
  max-height: 520px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.billing-monthly-table {
  width: 100%;
}

.billing-period-cell {
  white-space: nowrap;
}

.billing-money-col {
  text-align: right;
  white-space: nowrap;
}

.billing-month-status {
  color: var(--muted);
  font-size: 0.82rem;
}

.billing-status-live {
  color: #bfdbfe;
}

.billing-status-complete {
  color: #bbf7d0;
}

.billing-status-loading {
  color: #fde68a;
}

.billing-select-col,
.billing-select-cell {
  width: 34px;
  min-width: 34px;
  text-align: center;
}

.billing-machine-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .billing-selection-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

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

/* Billing toolbar button fix */
.billing-selection-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.billing-selection-toolbar #billing-selection-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.billing-selection-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.billing-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: auto;
  min-width: max-content;
  height: 34px;
  padding: 0 14px;

  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;

  background: rgba(15, 23, 42, 0.72);
  color: var(--text);

  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
}

.billing-action-button:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.32);
}

.billing-action-button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* First earning info beside From start */
.billing-start-info-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
}

.billing-start-info {
  position: relative;
}

.billing-start-info summary {
  list-style: none;
}

.billing-start-info summary::-webkit-details-marker {
  display: none;
}

.billing-start-info-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;

  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 10px;

  background: rgba(15, 23, 42, 0.72);
  color: var(--muted);

  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.billing-start-info-button:hover {
  color: var(--text);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.10);
}

.billing-start-info-icon {
  font-size: 1rem;
  line-height: 1;
  color: #93c5fd;
}

.billing-start-info-popover {
  position: absolute;
  z-index: 80;
  top: 43px;
  left: 0;

  width: 280px;
  padding: 14px 16px;

  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;

  background: rgb(8, 20, 36);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

.billing-start-info-heading {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.76rem;
}

.billing-start-info-date {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 1.08rem;
}

.billing-start-info-days {
  color: #bfdbfe;
  font-size: 0.82rem;
}

.billing-start-info-note {
  margin-top: 10px;
  padding-top: 9px;

  border-top: 1px solid rgba(148, 163, 184, 0.12);

  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Static online-since billing info */
.billing-start-info-wrap {
  display: flex;
  align-items: flex-start;
  padding-top: 7px;
}

.billing-start-info-static {
  min-width: 245px;
  padding: 11px 14px;

  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;

  background: rgba(15, 23, 42, 0.42);
}

.billing-start-info-main {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: nowrap;
}

.billing-start-info-main strong {
  margin-left: 4px;
  color: var(--text);
  font-weight: 600;
}

.billing-start-info-main span {
  margin-left: 4px;
  color: #bfdbfe;
}

.billing-start-info-static .billing-start-info-note {
  margin-top: 6px;
  padding: 0;
  border: 0;

  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
}

/* Cleaner Online since card */
.billing-start-info-wrap {
  padding-top: 0;
}

.billing-start-info-static {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 230px;
  min-height: 99px;
  padding: 14px 16px;

  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
}

.billing-start-info-label {
  display: block;
  margin-bottom: 7px;

  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.billing-start-info-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1.2;
}

.billing-start-info-value strong {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.billing-start-info-value span {
  color: #bfdbfe;
  font-size: 0.78rem;
}

.billing-start-info-static .billing-start-info-note {
  margin-top: 9px;
  padding: 0;
  border: 0;

  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.3;
}

/* ==========================================================
   Earnings forecast redesign
   ========================================================== */

.earnings-forecast-panel,
.month-forecast-panel {
  min-width: 0;
}

.earnings-context-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
}

.earnings-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.earnings-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.earnings-summary-card {
  display: flex;
  flex-direction: column;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.52);
}

.earnings-summary-card > span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.earnings-summary-card strong {
  font-size: 1.45rem;
  line-height: 1.15;
}

.earnings-summary-card small {
  margin-top: auto;
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.earnings-summary-actual strong {
  color: var(--green);
}

.earnings-summary-estimate strong {
  color: #f59e0b;
}

.earnings-summary-total strong {
  color: var(--text);
}

.forecast-chart-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-top: 22px;
  padding-top: 15px;

  border-top: 1px solid rgba(148, 163, 184, 0.10);

  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.forecast-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 13px;

  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.forecast-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.forecast-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.forecast-legend-swatch.actual {
  background: var(--blue);
}

.forecast-legend-swatch.estimate {
  background: rgba(203, 213, 225, 0.48);
}

.forecast-weekend-note {
  color: #f59e0b;
}

/* Hourly future forecast */
.hour-bar.forecast {
  background: linear-gradient(
    180deg,
    rgba(203, 213, 225, 0.72),
    rgba(148, 163, 184, 0.28)
  );
  border: 1px dashed rgba(203, 213, 225, 0.24);
}

.hour-bar.forecast:hover {
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.72),
    rgba(245, 158, 11, 0.25)
  );
}

/* Monthly forecast */
.forecast-panel-meta {
  margin-top: 5px;
}

.month-forecast-chart-scroll {
  overflow-x: auto;
  padding-bottom: 5px;
}

.month-forecast-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;

  min-width: 900px;
  height: 205px;
  margin-top: 14px;
  padding-top: 8px;
}

.month-forecast-bar-wrap {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;

  height: 100%;
  min-width: 24px;
}

.month-forecast-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  min-height: 31px;
  margin-bottom: 4px;
}

.month-forecast-amount {
  color: var(--muted);
  font-size: 0.62rem;
  opacity: 0;

  transition: opacity 0.15s ease;
}

.month-forecast-bar-wrap:hover .month-forecast-amount {
  opacity: 1;
}

.month-forecast-weekend-badge {
  color: #f59e0b;
  font-size: 0.57rem;
  line-height: 1;
}

.month-forecast-bar-track {
  position: relative;
  display: flex;
  align-items: flex-end;

  width: 100%;
  flex: 1;
}

.month-forecast-bar {
  width: 100%;
  min-height: 2px;

  border-radius: 4px 4px 0 0;

  transition:
    height 0.35s ease,
    filter 0.15s ease;
}

.month-forecast-bar.actual {
  background: linear-gradient(
    180deg,
    var(--blue),
    rgba(96, 165, 250, 0.40)
  );
}

.month-forecast-bar.forecast {
  background: linear-gradient(
    180deg,
    rgba(203, 213, 225, 0.68),
    rgba(148, 163, 184, 0.24)
  );

  border: 1px dashed rgba(203, 213, 225, 0.22);
}

.month-forecast-bar-wrap.weekend
.month-forecast-bar.forecast {
  background: linear-gradient(
    180deg,
    rgba(203, 213, 225, 0.48),
    rgba(148, 163, 184, 0.16)
  );
}

.month-forecast-bar-wrap:hover
.month-forecast-bar {
  filter: brightness(1.25);
}

.month-forecast-day {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.66rem;
}

@media (max-width: 760px) {
  .earnings-summary-grid {
    grid-template-columns: 1fr;
  }

  .forecast-chart-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .forecast-chart-legend {
    justify-content: flex-start;
  }
}

/* Forecast basis — visually distinct from actual and forecast */

.hour-basis-space {
  min-height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hour-basis-badge {
  font-size: 0.52rem;
  color: #cbd5e1;
  text-transform: uppercase;
}

.hour-day-label {
  margin-top: 4px;
  margin-bottom: -2px;
  color: #94a3b8;
  font-size: 0.54rem;
}

.hour-bar.basis {
  border: 1px solid rgba(148, 163, 184, 0.55);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(96, 165, 250, 0.58),
      rgba(96, 165, 250, 0.58) 4px,
      rgba(71, 85, 105, 0.36) 4px,
      rgba(71, 85, 105, 0.36) 8px
    );
}

.hour-bar.synthetic-history {
  border: 1px dashed rgba(203, 213, 225, 0.30);
  background: linear-gradient(
    180deg,
    rgba(203, 213, 225, 0.58),
    rgba(100, 116, 139, 0.22)
  );
}

.synthetic-history-wrap {
  opacity: 0.82;
}


/* Previous 7 days used as month forecast basis */

.month-forecast-bar-wrap.basis {
  opacity: 0.58;
}

.month-forecast-bar.basis {
  border: 1px solid rgba(148, 163, 184, 0.40);

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(100, 116, 139, 0.54),
      rgba(100, 116, 139, 0.54) 4px,
      rgba(51, 65, 85, 0.28) 4px,
      rgba(51, 65, 85, 0.28) 8px
    );
}

.month-basis-badge {
  color: #cbd5e1;
  font-size: 0.52rem;
  line-height: 1;
}

.month-start-divider {
  position: relative;
  margin-left: 13px;
}

.month-start-divider::before {
  content: "";
  position: absolute;

  left: -9px;
  top: 34px;
  bottom: 17px;

  width: 1px;

  background:
    rgba(96, 165, 250, 0.38);
}

/* Hidden must override later component display rules */
.hidden {
  display: none !important;
}

/* ==========================================================
   Monthly billing component breakdown
   ========================================================== */

.month-component-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 14px;
  padding: 9px 12px;

  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 12px;

  background: rgba(15, 23, 42, 0.30);
}

.month-component-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 9px;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.52);

  color: var(--muted);
  font-size: 0.69rem;
}

.month-component-chip i {
  width: 8px;
  height: 8px;

  border-radius: 50%;
}

.month-component-chip strong {
  color: var(--text);
  font-size: 0.72rem;
}

.month-component-chip.total i {
  background: #94a3b8;
}

.month-component-chip.gpu i,
.forecast-legend-swatch.month-gpu {
  background: #e87500;
}

.month-component-chip.storage i,
.forecast-legend-swatch.month-storage {
  background: #f8b83e;
}

.month-component-chip.bandwidth i,
.forecast-legend-swatch.month-bandwidth {
  background: #ef8ed8;
}


/* Actual stacked daily bars */

.month-stacked-bar {
  display: flex;
  flex-direction: column-reverse;

  width: 100%;
  min-height: 2px;

  overflow: hidden;

  border-radius: 4px 4px 0 0;

  transition:
    height 0.35s ease,
    filter 0.15s ease;
}

.month-stack-segment {
  width: 100%;
  min-height: 1px;
}

.month-stack-segment.gpu {
  background:
    linear-gradient(
      180deg,
      #ee7b00,
      #c95d00
    );
}

.month-stack-segment.storage {
  background:
    linear-gradient(
      180deg,
      #ffc857,
      #e8a72d
    );
}

.month-stack-segment.bandwidth {
  background:
    linear-gradient(
      180deg,
      #f3a2de,
      #d97bc6
    );
}


/* Previous 7 actual days used as forecast basis */

.month-stacked-bar.basis {
  opacity: 0.48;

  filter:
    saturate(0.45)
    brightness(0.92);
}

.month-forecast-bar-wrap.basis {
  opacity: 1;
}

.month-forecast-bar-wrap:hover
.month-stacked-bar {
  filter: brightness(1.18);
}

.month-forecast-bar-wrap.basis:hover
.month-stacked-bar {
  opacity: 0.72;

  filter:
    saturate(0.65)
    brightness(1.08);
}

/* ==========================================================
   Billing component hover tooltip
   ========================================================== */

.daily-component-summary {
  margin-top: 12px;
}

.month-breakdown-tooltip {
  position: fixed;
  z-index: 9999;

  width: 240px;
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  padding: 12px 14px;

  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;

  background: rgba(7, 18, 33, 0.97);

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.42);

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transform: translateY(4px);

  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.month-breakdown-tooltip.visible {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.month-tooltip-date {
  margin-bottom: 4px;

  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.month-tooltip-type {
  margin-bottom: 9px;

  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.month-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  padding: 3px 0;

  color: var(--muted);
  font-size: 0.72rem;
}

.month-tooltip-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.month-tooltip-row strong {
  color: var(--text);
  font-size: 0.74rem;
}

.month-tooltip-row.total {
  margin-bottom: 5px;
  padding-bottom: 7px;

  border-bottom:
    1px solid rgba(148, 163, 184, 0.13);
}

.month-tooltip-row.total strong {
  font-size: 0.82rem;
}

.month-tooltip-dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  border-radius: 50%;
}

.month-tooltip-dot.total {
  background: #94a3b8;
}

.month-tooltip-dot.gpu {
  background: #e87500;
}

.month-tooltip-dot.storage {
  background: #f8b83e;
}

.month-tooltip-dot.bandwidth {
  background: #ef8ed8;
}

.month-tooltip-weekend {
  margin-top: 7px;
  padding-top: 7px;

  border-top:
    1px solid rgba(148, 163, 184, 0.13);

  color: #f59e0b;
  font-size: 0.68rem;
}

/* ==========================================================
   Selected month billing day
   ========================================================== */

.month-forecast-bar-wrap {
  cursor: pointer;
}

.month-forecast-bar-wrap.selected {
  z-index: 3;
}

.month-forecast-bar-wrap.selected
.month-forecast-bar-track {
  border-radius: 6px;

  outline: 2px solid rgba(96, 165, 250, 0.92);
  outline-offset: 3px;

  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.18),
    0 0 20px rgba(96, 165, 250, 0.20);
}

.month-forecast-bar-wrap.selected
.month-forecast-day {
  color: #bfdbfe;
  font-weight: 700;
}


/* Persistent screenshot-friendly legend */

.month-value-legend {
  padding: 4px 7px;

  border-radius: 8px;

  background:
    rgba(15, 23, 42, 0.42);
}

.month-value-legend strong {
  margin-left: 2px;

  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
}

.forecast-legend-swatch.month-total {
  background: #60a5fa;
}

.month-value-legend.total strong {
  color: #93c5fd;
}

.month-value-legend.gpu strong {
  color: #fb923c;
}

.month-value-legend.storage strong {
  color: #fbbf24;
}

.month-value-legend.bandwidth strong {
  color: #f0a3dc;
}

.month-selected-date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;

  margin-right: 3px;
  padding: 4px 8px;

  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 8px;

  background: rgba(96, 165, 250, 0.08);

  color: var(--muted);
  font-size: 0.68rem;
}

.month-selected-date strong {
  color: #bfdbfe;
}

.month-selected-date em {
  margin-left: 3px;

  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
}

.forecast-legend-separator {
  width: 1px;
  height: 17px;

  margin: 0 2px;

  background:
    rgba(148, 163, 184, 0.18);
}

/* ==========================================================
   Earnings machine scope
   ========================================================== */

.earnings-machine-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px 7px;

  margin-top: 8px;
  padding: 7px 3px 2px;

  font-size: 0.67rem;
}

.earnings-scope-label {
  flex: 0 0 auto;

  color: var(--muted);

  font-size: 0.61rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.earnings-scope-chip {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  white-space: nowrap;

  padding: 4px 8px;

  border:
    1px solid rgba(96, 165, 250, 0.17);

  border-radius: 999px;

  background:
    rgba(96, 165, 250, 0.07);

  color: #cbd5e1;

  line-height: 1.1;
}

.earnings-scope-chip.all {
  color: #bfdbfe;

  background:
    rgba(96, 165, 250, 0.09);
}

.earnings-scope-chip.none {
  color: var(--muted);

  border-color:
    rgba(148, 163, 184, 0.13);

  background:
    rgba(148, 163, 184, 0.04);
}

/* Billing toolbar already carries selection controls. */

#billing-machine-scope {
  margin-top: 2px;
  padding-top: 5px;
}

/* Keep scope visually attached to graphs. */

#hourly-machine-scope,
#month-machine-scope {
  border-top:
    1px solid rgba(148, 163, 184, 0.08);
}

/* ==========================================================
   Compact earnings machine selection v2
   ========================================================== */

.earnings-machine-scope {
  display: block;

  margin-top: 8px;
  padding: 8px 3px 2px;

  border-top:
    1px solid rgba(148, 163, 184, 0.08);

  font-size: 0.67rem;
}

.earnings-scope-summary-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px 9px;

  min-height: 25px;
}

.earnings-scope-label {
  flex: 0 0 auto;

  color: var(--muted);

  font-size: 0.61rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.earnings-scope-summary {
  color: #cbd5e1;

  font-size: 0.68rem;
  font-weight: 500;

  line-height: 1.35;
}

.earnings-scope-summary.none {
  color: var(--muted);
}

.earnings-scope-toggle {
  flex: 0 0 auto;

  margin-left: auto;
  padding: 3px 8px;

  border:
    1px solid rgba(96, 165, 250, 0.18);

  border-radius: 7px;

  background:
    rgba(96, 165, 250, 0.06);

  color: #93c5fd;

  font: inherit;
  font-size: 0.62rem;

  cursor: pointer;
}

.earnings-scope-toggle:hover {
  border-color:
    rgba(96, 165, 250, 0.40);

  background:
    rgba(96, 165, 250, 0.12);
}

.earnings-scope-chip-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px 6px;

  margin-top: 6px;
}

.earnings-scope-chip {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  min-width: 0;
  padding: 3px 4px 3px 8px;

  border:
    1px solid rgba(96, 165, 250, 0.17);

  border-radius: 999px;

  background:
    rgba(96, 165, 250, 0.065);

  color: #cbd5e1;

  line-height: 1.1;
}

.earnings-scope-chip-text {
  white-space: nowrap;
}

.earnings-scope-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  margin-left: 5px;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: #718096;

  font-family: inherit;
  font-size: 14px;
  line-height: 1;

  cursor: pointer;
}

.earnings-scope-remove:hover {
  background:
    rgba(248, 113, 113, 0.13);

  color: #fca5a5;
}


/* Billing Overview is the selection-management area. */

#billing-machine-scope {
  margin-top: 4px;
}


/* On charts keep collapsed summary especially compact. */

#hourly-machine-scope,
#month-machine-scope {
  padding-top: 6px;
}


/* Prevent huge selections from creating absurdly tall panels.
   Expanded lists may use several compact wrapped rows. */

.earnings-scope-chip-list.expanded {
  max-height: 122px;
  overflow-y: auto;

  padding-right: 4px;
}


/* Smaller screens */

@media (max-width: 800px) {
  .earnings-scope-toggle {
    margin-left: 0;
  }

  .earnings-scope-summary {
    flex: 1 1 100%;
  }
}

/* ==========================================================
   Hourly component stacked bars
   ========================================================== */

.hour-stacked-bar {
  position: relative;

  display: flex;
  flex-direction: column-reverse;

  align-self: flex-end;

  width: 100%;
  min-height: 2px;
  max-height: 100%;

  overflow: hidden;

  border-radius: 4px 4px 0 0;

  transition:
    height 0.35s ease,
    filter 0.15s ease;
}

.hour-stack-segment {
  width: 100%;
  min-height: 1px;
}

.hour-stack-segment.gpu {
  background:
    linear-gradient(
      180deg,
      #ee7b00,
      #c95d00
    );
}

.hour-stack-segment.storage {
  background:
    linear-gradient(
      180deg,
      #ffc857,
      #e8a72d
    );
}

.hour-stack-segment.bandwidth {
  background:
    linear-gradient(
      180deg,
      #f3a2de,
      #d97bc6
    );
}

.hour-bar-wrap:hover
.hour-stacked-bar {
  filter: brightness(1.15);
}


/* Forecast basis: preserve component colours but make
   the four source hours visibly distinct. */

.hour-stacked-bar.basis {
  outline:
    1px solid rgba(
      96,
      165,
      250,
      0.85
    );

  outline-offset: -1px;
}

.hour-stacked-bar.basis::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(96, 165, 250, 0.22),
      rgba(96, 165, 250, 0.22) 4px,
      transparent 4px,
      transparent 8px
    );
}


/* Historical day without true hourly timing */

.hour-stacked-bar.synthetic-history {
  opacity: 0.72;

  border:
    1px dashed
    rgba(203, 213, 225, 0.38);

  filter: saturate(0.70);
}


/* Hourly legend */

.forecast-legend-swatch.hour-total {
  background: #60a5fa;
}

.forecast-legend-swatch.hour-gpu {
  background: #e87500;
}

.forecast-legend-swatch.hour-storage {
  background: #f8b83e;
}

.forecast-legend-swatch.hour-bandwidth {
  background: #ef8ed8;
}


/* Explicit reliability warning requested for screenshots */

.hourly-component-warning {
  margin-left: 5px;

  color: #f87171;

  font-size: 0.62rem;
  font-weight: 600;

  line-height: 1.25;
}

#hourly-forecast-legend {
  flex-wrap: wrap;
  row-gap: 5px;
}



/* ============================================================
   Billing history: Monthly | Weekly | Payout
   ============================================================ */

.billing-history-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.billing-history-column {
  min-width: 0;
}

.billing-history-title {
  min-height: 56px;
  margin-bottom: 8px;
}

.billing-history-title h3 {
  margin: 0 0 4px 0;
  font-size: 1.08rem;
}

.billing-history-title .section-meta {
  margin: 0;
}

.billing-history-wrap {
  height: 520px;
  max-height: 520px;
  overflow: auto;

  border-radius: 14px;
  border:
    1px solid
    rgba(148, 163, 184, 0.12);
}

.billing-history-table {
  width: 100%;
  table-layout: auto;
}

.billing-history-table th,
.billing-history-table td {
  padding:
    12px 10px;
  font-size: 0.78rem;
}

.billing-history-table th {
  position: sticky;
  top: 0;
  z-index: 2;

  background:
    rgba(9, 19, 34, 0.98);
}

.billing-history-table
.billing-period-cell {
  white-space: nowrap;
}

.billing-history-table
.billing-money-col {
  text-align: right;
  white-space: nowrap;
}

.billing-history-table
.billing-month-status {
  font-size: 0.72rem;
  white-space: nowrap;
}


/* Current/live rows remain visually distinct. */
.billing-history-table
.billing-status-live {
  color: #bfdbfe;
}

.billing-history-table
.billing-status-complete {
  color: #bbf7d0;
}

.billing-history-table
.billing-status-loading {
  color: #fde68a;
}


@media (max-width: 1250px) {
  .billing-history-grid {
    grid-template-columns:
      1fr;
  }

  .billing-history-wrap {
    height: 400px;
  }
}

/* ============================================================
   Billing Overview v2
   Monthly/Weekly tabs + fixed Payout History
   ============================================================ */

.billing-history-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(300px, 1fr) !important;

  grid-template-rows:
    auto
    minmax(0, auto);

  gap: 10px 18px !important;

  align-items: start;
}


/* ------------------------------------------------------------
   Monthly / Weekly selector
   ------------------------------------------------------------ */

.billing-period-tabs {
  grid-column: 1;
  grid-row: 1;

  display: inline-flex;
  align-items: center;

  width: fit-content;

  padding: 3px;

  border:
    1px solid
    rgba(148, 163, 184, 0.16);

  border-radius: 10px;

  background:
    rgba(15, 23, 42, 0.48);
}

.billing-period-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 92px;
  height: 32px;

  padding: 0 15px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--muted);

  font: inherit;
  font-size: 0.80rem;
  font-weight: 650;

  cursor: pointer;
}

.billing-period-tab:hover {
  color: var(--text);
}

.billing-period-tab.active {
  color: #dbeafe;

  background:
    rgba(59, 130, 246, 0.18);

  box-shadow:
    inset 0 0 0 1px
    rgba(96, 165, 250, 0.20);
}


/* ------------------------------------------------------------
   Monthly + Weekly occupy the SAME space
   ------------------------------------------------------------ */

.billing-period-panel {
  grid-column: 1;
  grid-row: 2;

  display: none;
  min-width: 0;
}

.billing-period-panel.active {
  display: block;
}


/* We already know which tab is active,
   so the large repeated title is unnecessary. */
.billing-period-panel
.billing-history-title {
  min-height: 38px !important;
  margin-bottom: 7px !important;
}

.billing-period-panel
.billing-history-title h3 {
  margin: 0 !important;
  font-size: 1rem !important;
}

.billing-period-panel
.billing-history-title .section-meta {
  margin-top: 3px !important;
}


/* ------------------------------------------------------------
   Payout always stays on the right
   ------------------------------------------------------------ */

.billing-payout-column {
  grid-column: 2;
  grid-row: 1 / span 2;

  min-width: 0;
}


/* Same actual table height on both sides. */

.billing-period-panel
.billing-history-wrap,
.billing-payout-column
.billing-history-wrap {
  height: 520px !important;
  max-height: 520px !important;
}


/* Weekly now has plenty of width, so no horizontal scrollbar. */
.billing-period-panel
.billing-history-wrap {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.billing-period-panel
.billing-history-table {
  width: 100% !important;
  table-layout: auto !important;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .billing-history-grid {
    grid-template-columns: 1fr !important;
  }

  .billing-period-tabs {
    grid-column: 1;
    grid-row: 1;
  }

  .billing-period-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .billing-payout-column {
    grid-column: 1;
    grid-row: 3;

    margin-top: 14px;
  }
}


/* ============================================================
   Billing tabs layout fix
   ============================================================ */

.billing-history-grid {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(330px, 1fr) !important;

  /* No separate grid rows for tabs/table anymore. */
  grid-template-rows: none !important;

  gap: 18px !important;
  align-items: start !important;
}


/* ------------------------------------------------------------
   LEFT SIDE = tabs + selected billing table
   ------------------------------------------------------------ */

.billing-period-column {
  min-width: 0;
  grid-column: 1 !important;
  grid-row: auto !important;
}

.billing-period-tabs {
  display: inline-flex !important;

  grid-column: auto !important;
  grid-row: auto !important;

  margin: 0 0 5px 0 !important;
}


/* Monthly/Weekly occupy exactly the same place. */

.billing-period-panel {
  display: none !important;

  grid-column: auto !important;
  grid-row: auto !important;

  min-width: 0 !important;
}

.billing-period-panel.active {
  display: block !important;
}


/*
 * Tab already says Monthly / Weekly.
 * Don't repeat a giant "Monthly Billing" title below it.
 */
.billing-period-panel .billing-history-title {
  min-height: 30px !important;
  margin: 0 0 8px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.billing-period-panel .billing-history-title h3 {
  display: none !important;
}

.billing-period-panel .billing-history-title .section-meta {
  margin: 0 !important;
  font-size: 0.76rem !important;
}


/* ------------------------------------------------------------
   RIGHT SIDE = payout stays fixed
   ------------------------------------------------------------ */

.billing-payout-column {
  grid-column: 2 !important;
  grid-row: auto !important;

  min-width: 0 !important;
}

.billing-payout-column .billing-history-title {
  min-height: 69px !important;
  margin: 0 0 8px 0 !important;
}


/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */

.billing-period-column .billing-history-wrap,
.billing-payout-column .billing-history-wrap {
  height: 520px !important;
  max-height: 520px !important;
}

.billing-period-column .billing-history-wrap {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .billing-history-grid {
    grid-template-columns: 1fr !important;
  }

  .billing-period-column,
  .billing-payout-column {
    grid-column: 1 !important;
  }

  .billing-payout-column {
    margin-top: 18px !important;
  }
}


/* ============================================================
   Billing Overview cards compact
   ============================================================ */

/* All 7 summary items fit cleanly in one row on desktop. */
.billing-overview-panel .billing-period-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Normal billing cards */
.billing-overview-panel .billing-period-card {
  min-width: 0 !important;
  min-height: 98px !important;
  padding: 12px 13px !important;
}

.billing-overview-panel .billing-period-label {
  font-size: 0.72rem !important;
}

.billing-overview-panel .billing-period-value {
  font-size: 1.10rem !important;
  white-space: nowrap !important;
}

.billing-overview-panel .billing-period-status {
  font-size: 0.70rem !important;
}


/* Online Since must behave like the other cards */
.billing-overview-panel .billing-start-info-static {
  min-width: 0 !important;
  width: auto !important;
  min-height: 98px !important;

  padding: 12px 13px !important;

  overflow: hidden !important;
}

.billing-overview-panel .billing-start-info-label {
  font-size: 0.72rem !important;
}

.billing-overview-panel .billing-start-info-value {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.billing-overview-panel .billing-start-info-value strong {
  font-size: 1.05rem !important;
}
.billing-start-days { display: inline-flex; flex-direction: column; align-items: center; color: #f59a23; line-height: 1; margin-left: 8px; vertical-align: middle; }
.billing-start-days strong { font-size: 1.3rem !important; }
.billing-start-days small { font-size: .65rem; text-transform: uppercase; }
.credential-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-profile-link { display: inline; min-height: 0 !important; height: auto !important; padding: 0; border: 0; background: transparent; color: #5eb6ff; text-decoration: underline; cursor: pointer; font: inherit; font-size: 1rem; }
.management-user-tree > .management-user-row + button, .management-user-tree + button { margin-top: 18px; }
.gpu-slot.rented { background: #20a957; color: #fff; font-weight: 800; box-shadow: 0 0 0 1px #11783b; }

.billing-overview-panel .billing-start-info-value span {
  font-size: 0.72rem !important;
}

.billing-overview-panel .billing-start-info-note {
  margin-top: 8px !important;
  font-size: 0.67rem !important;
  white-space: normal !important;
  overflow: hidden !important;
}


/* Responsive fallbacks */
@media (max-width: 1250px) {
  .billing-overview-panel .billing-period-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  .billing-overview-panel .billing-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}



/* ============================================================
   Payout History lock for partial machine selections
   ============================================================ */

.billing-payout-column {
  position: relative;
}

.billing-payout-lock {
  position: absolute;

  /*
   * Starts below the Payout History heading
   * and covers the actual payout table.
   */
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  border-radius: 14px;

  background:
    rgba(8, 17, 31, 0.92);

  backdrop-filter: blur(5px);
}

.billing-payout-lock.hidden {
  display: none !important;
}

.billing-payout-lock-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 310px;

  text-align: center;
}

.billing-payout-lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  margin-bottom: 14px;

  border-radius: 50%;

  background:
    rgba(242, 169, 59, 0.12);

  border:
    1px solid
    rgba(242, 169, 59, 0.30);

  color: #f2a93b;

  font-size: 1.55rem;
  line-height: 1;
}

.billing-payout-lock-content strong {
  margin-bottom: 7px;

  color: var(--text);

  font-size: 1rem;
}

.billing-payout-lock-content span {
  margin-bottom: 18px;

  color: var(--muted);

  font-size: 0.80rem;
  line-height: 1.45;
}

.billing-payout-lock-content
.billing-action-button {
  min-width: 150px;
}

.billing-payout-meta-disabled {
  opacity: 0.35;
}


/* ============================================================
   Recent Alerts / Poll Monitor final layout
   ============================================================ */

.recent-alerts-panel {
  grid-column: span 9 !important;
  min-width: 0 !important;
}

.poll-monitor-panel {
  grid-column: span 3 !important;
  min-width: 300px !important;
}


/* Poll title + source should stack, never squeeze side-by-side */
.poll-monitor-panel .panel-title-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

.poll-monitor-panel .panel-title-row h2 {
  margin: 0 !important;
  white-space: nowrap !important;
}

.poll-monitor-panel .section-meta {
  display: block !important;
  width: 100% !important;

  text-align: left !important;
  white-space: normal !important;
  line-height: 1.35 !important;

  margin: 0 0 8px 0 !important;
}


/* Poll / Fetch / Persist / Alerts / Online etc. */
.poll-monitor-panel #poll-monitor-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.poll-monitor-panel #poll-monitor-grid > * {
  min-width: 0 !important;
}


/* Recent Alerts keeps normal horizontal heading */
.recent-alerts-panel .panel-title-row {
  align-items: center !important;
}

.recent-alerts-panel .section-meta {
  text-align: right !important;
}


/* Smaller desktops: give Poll Monitor a little more room */
@media (max-width: 1250px) {
  .recent-alerts-panel {
    grid-column: span 8 !important;
  }

  .poll-monitor-panel {
    grid-column: span 4 !important;
  }
}


/* Mobile/tablet: stack panels */
@media (max-width: 850px) {
  .recent-alerts-panel,
  .poll-monitor-panel {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   Billing history refresh controls + Daily tab
   ============================================================ */

.billing-refresh-controls {
  margin: 10px 0 16px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.billing-refresh-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-refresh-status {
  margin-left: 4px;
}

.billing-refresh-error {
  color: var(--danger, #ef4444) !important;
}

.billing-refresh-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.billing-refresh-actions .billing-action-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.billing-period-tabs {
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .billing-refresh-actions {
    align-items: stretch;
  }

  .billing-refresh-actions .billing-action-button {
    flex: 1 1 100%;
  }

  .billing-refresh-status {
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   FINAL MOBILE DASHBOARD LAYOUT
   Must stay at the END of this file.
   ============================================================ */

@media (max-width: 800px) {

  /* ----------------------------------------------------------
     Page / outer dashboard
     ---------------------------------------------------------- */

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 10px !important;

    box-sizing: border-box !important;
  }

  .dashboard {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
.dashboard .panel,
.dashboard .panel.wide,
.earnings-forecast-panel,
.billing-overview-panel,
.recent-alerts-panel,
.poll-monitor-panel {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    margin: 0 0 12px 0 !important;
    padding: 14px !important;

    border-radius: 16px !important;
  }

  .dashboard .panel > * {
    max-width: 100%;
    box-sizing: border-box;
  }


  /* ----------------------------------------------------------
     Hero
     ---------------------------------------------------------- */

  .hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 16px !important;

    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .hero h1 {
    font-size: 2.35rem !important;
    line-height: 1.05 !important;
  }

  .hero-copy {
    line-height: 1.4 !important;
  }

  .hero-meta {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;
  }

  #last-updated {
    flex: 1 1 100% !important;
  }


  /* ----------------------------------------------------------
     Panel headings / Source information
     ---------------------------------------------------------- */

  .panel-title-row {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
  }

  .panel-title-row h2 {
    max-width: 100% !important;

    font-size: 1.35rem !important;
    line-height: 1.15 !important;

    overflow-wrap: anywhere !important;
  }

  .section-meta,
  .panel-meta {
    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;

    text-align: left !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }


  /* ----------------------------------------------------------
     Hourly / daily forecast
     ---------------------------------------------------------- */

  .earnings-forecast-panel
  .panel-title-row > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  .earnings-context-row {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 6px 10px !important;

    width: 100% !important;
  }

  .earnings-nav {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;
  }

  .earnings-nav .section-meta {
    flex: 1 1 220px !important;
  }

  .earnings-summary-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 10px !important;
  }

  .earnings-summary-card {
    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  #hourly-chart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ----------------------------------------------------------
     Monthly earnings forecast
     ---------------------------------------------------------- */

  .month-forecast-chart-scroll {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  .month-forecast-chart {
    min-width: 720px !important;
  }


  /* ----------------------------------------------------------
     Billing heading / selection
     ---------------------------------------------------------- */

  .billing-selection-toolbar {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;
  }

  .billing-selection-toolbar .section-meta {
    width: 100% !important;
  }

  .billing-selection-actions {
    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;

    gap: 8px !important;
  }


  /* ----------------------------------------------------------
     Force billing refresh
     ---------------------------------------------------------- */

  .billing-refresh-controls {
    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 10px !important;
  }

  .billing-refresh-actions {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    width: 100% !important;

    gap: 8px !important;
  }

  .billing-refresh-actions
  .billing-action-button {
    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;
  }

  .billing-refresh-status {
    width: 100% !important;
    margin: 0 !important;
  }

  .billing-refresh-note {
    width: 100% !important;

    font-size: 0.78rem !important;
    line-height: 1.45 !important;

    overflow-wrap: anywhere !important;
  }


  /* ----------------------------------------------------------
     Billing summary cards
     ---------------------------------------------------------- */

  .billing-overview-panel
  .billing-period-grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;
  }

  .billing-overview-panel
  .billing-period-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  .billing-overview-panel
  .billing-period-card,
  .billing-overview-panel
  .billing-start-info-static {
    width: auto !important;
    min-width: 0 !important;

    overflow: hidden !important;
  }

  .billing-overview-panel
  .billing-period-value,
  .billing-overview-panel
  .billing-start-info-value {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }


  /* ----------------------------------------------------------
     Daily / Weekly / Monthly + payouts
     ---------------------------------------------------------- */

  .billing-history-grid {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .billing-period-column,
  .billing-payout-column {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 16px 0 !important;
  }

  .billing-period-tabs {
    display: flex !important;

    width: 100% !important;

    margin: 0 0 8px 0 !important;
  }

  .billing-period-tab {
    flex: 1 1 0 !important;

    min-width: 0 !important;

    text-align: center !important;
  }

  .billing-period-panel.active {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .billing-period-column
  .billing-history-wrap,
  .billing-payout-column
  .billing-history-wrap {
    width: 100% !important;
    max-width: 100% !important;

    height: 390px !important;
    max-height: 390px !important;

    overflow: auto !important;
  }

  .billing-history-table {
    width: 100% !important;
    min-width: 0 !important;

    table-layout: auto !important;
  }

  .billing-payout-column
  .billing-history-title {
    min-height: 0 !important;
  }


  /* ----------------------------------------------------------
     Fleet trends
     ---------------------------------------------------------- */

  .trend-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .trend-card,
  .trend-card-header {
    min-width: 0 !important;
  }

  .trend-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .trend-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .trend-chart {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ----------------------------------------------------------
     Machines
     Full table remains available by horizontal scroll.
     ---------------------------------------------------------- */

  .machine-view-tabs {
    width: 100% !important;
  }

  .machine-filters {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  .panel.wide
  .table-wrap.machines-scroll {
    width: 100% !important;
    max-width: 100% !important;

    overflow: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  .machines-scroll table {
    min-width: 1180px !important;
  }


  /* ----------------------------------------------------------
     Alerts / Poll Monitor
     ---------------------------------------------------------- */

  .recent-alerts-panel,
  .poll-monitor-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .recent-alerts-panel
  .panel-title-row {
    align-items: flex-start !important;
  }

  .recent-alerts-panel
  .section-meta {
    text-align: left !important;
  }

  .poll-monitor-panel
  #poll-monitor-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
  }


  /* ----------------------------------------------------------
     DB admin
     ---------------------------------------------------------- */

  .db-admin-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  /* ----------------------------------------------------------
     Modal
     ---------------------------------------------------------- */

  .modal-content {
    width: calc(100vw - 20px) !important;
    max-width: none !important;

    max-height: 92vh !important;
  }

  .modal-body {
    padding: 14px !important;
  }

  .modal-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Extra-small phones */
@media (max-width: 430px) {

  .app-shell {
    padding: 7px !important;
  }

  .dashboard .panel,
  .dashboard .panel.wide {
    padding: 12px !important;
  }
.billing-overview-panel
  .billing-period-grid,
.db-admin-grid,
.modal-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .billing-period-label,
  .billing-period-status {
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
   MOBILE POLISH V2
   GPU breakdown / summary / charts / billing
   ============================================================ */

@media (max-width: 800px) {


  /* ==========================================================
     2. HOURLY CHART
     24 labels are too dense on a phone.
     Keep every bar, show labels every two hours.
     ========================================================== */

  #hourly-chart {
    overflow: hidden !important;
  }

  #hourly-chart .hour-basis-badge {
    /*
     * The legend already explains Forecast basis · 4h.
     * Repeating BASIS over individual bars only overlaps.
     */
    display: none !important;
  }

  #hourly-chart .hour-basis-space {
    min-height: 5px !important;
    height: 5px !important;
  }

  #hourly-chart .hour-bar-wrap .hour-label {
    font-size: 0.63rem !important;
    line-height: 1 !important;
  }

  /*
   * 00, 02, 04 ... 22.
   * Bars themselves all remain visible.
   */
  #hourly-chart
  .hour-bar-wrap:nth-child(even)
  .hour-label {
    visibility: hidden !important;
  }

  #hourly-chart .hour-bar-wrap {
    min-width: 0 !important;
  }


  /* ==========================================================
     4. BILLING TABLES
     Fit Date / Status / Earnings into the viewport.
     ========================================================== */

  .billing-period-column .billing-history-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .billing-period-column .billing-history-table {
    width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed !important;
  }

  .billing-period-column
  .billing-history-table th,
  .billing-period-column
  .billing-history-table td {
    position: static !important;
    left: auto !important;

    padding: 10px 5px !important;

    font-size: 0.76rem !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .billing-period-column
  .billing-history-table th:nth-child(1),
  .billing-period-column
  .billing-history-table td:nth-child(1) {
    width: 31% !important;
  }

  .billing-period-column
  .billing-history-table th:nth-child(2),
  .billing-period-column
  .billing-history-table td:nth-child(2) {
    width: 39% !important;
  }

  .billing-period-column
  .billing-history-table th:nth-child(3),
  .billing-period-column
  .billing-history-table td:nth-child(3) {
    width: 30% !important;

    text-align: right !important;
  }

  .billing-period-column
  .billing-history-table
  .billing-money-col {
    white-space: nowrap !important;
  }

  .billing-period-column
  .billing-month-status {
    white-space: normal !important;

    line-height: 1.25 !important;
  }


  /* ==========================================================
     5. EARNINGS / FORECAST LEGENDS
     Prevent individual text elements colliding.
     ========================================================== */

  .earnings-forecast-panel
  [class*="legend"],
  .month-forecast-panel
  [class*="legend"] {
    flex-wrap: wrap !important;

    white-space: normal !important;
  }

  .earnings-forecast-panel
  [class*="legend"] > *,
  .month-forecast-panel
  [class*="legend"] > * {
    flex: 0 0 auto !important;
  }
}


/* Really narrow devices */
@media (max-width: 430px) {

  .billing-period-column
  .billing-history-table th,
  .billing-period-column
  .billing-history-table td {
    font-size: 0.72rem !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ============================================================
   MOBILE POLISH V3
   Fleet earnings + hourly legend
   ============================================================ */

@media (max-width: 800px) {


  /* ----------------------------------------------------------
     Hourly earnings legend
     ---------------------------------------------------------- */

  #hourly-forecast-legend {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    column-gap: 9px !important;
    row-gap: 7px !important;

    overflow: visible !important;
  }

  /*
   * Desktop separator only wastes horizontal space on mobile.
   */
  #hourly-forecast-legend
  .forecast-legend-separator {
    display: none !important;
  }

  /*
   * The duplicate "Forecast basis · 4h" immediately after
   * the desktop separator is unnecessary on mobile.
   */
  #hourly-forecast-legend
  .forecast-legend-separator + * {
    display: none !important;
  }

  /*
   * Reliability warning gets its OWN full row.
   */
  #hourly-forecast-legend
  .hourly-component-warning {
    display: block !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 4px 0 0 0 !important;

    padding: 0 !important;

    font-size: 0.70rem !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
   MACHINE PRIORITY + EARNINGS SCOPE ACTIONS
   ============================================================ */

.earnings-scope-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  width: 100%;

  margin-top: 7px;
}

.earnings-scope-action {
  appearance: none;

  padding: 7px 11px;

  border:
    1px solid
    rgba(148, 163, 184, 0.22);

  border-radius: 10px;

  background:
    rgba(15, 23, 42, 0.72);

  color: var(--text);

  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;

  cursor: pointer;
}

.earnings-scope-action:hover {
  border-color:
    rgba(96, 165, 250, 0.45);

  background:
    rgba(96, 165, 250, 0.10);
}


/* Machines is now the primary operational section. */
#machines-panel {
  scroll-margin-top: 16px;
}


@media (max-width: 800px) {

  .earnings-scope-actions {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .earnings-scope-action {
    width: 100%;

    white-space: normal;

    line-height: 1.25;
  }


  /*
   * Machine table starts with:
   * checkbox | Hostname | GPU | Occupancy | Listed Price
   *
   * Do not allow older sticky-column rules to keep ID/DC
   * glued over these new priority columns.
   */
  #machines-panel
  th.machine-col-id,
  #machines-panel
  td.machine-col-id,
  #machines-panel
  th.machine-col-hostname,
  #machines-panel
  td.machine-col-hostname {
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  #machines-panel
  .machines-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;

    scroll-behavior: smooth;
  }

  #machines-panel
  .machines-scroll table {
    min-width: 1150px !important;
  }

  #machines-panel
  .machine-col-hostname {
    min-width: 180px !important;
  }

  #machines-panel
  .machine-col-gpu {
    min-width: 165px !important;
  }

  #machines-panel
  .machine-col-occupancy {
    min-width: 210px !important;
  }

  #machines-panel
  .machine-col-price {
    min-width: 105px !important;
  }
}

/* ============================================================
   MACHINES DESKTOP LAYOUT FIX
   New column order:
   select | Hostname | GPU | Occupancy | Listed Price |
   Rentals | Status | ...
   ============================================================ */

/*
 * Machines moved into the primary dashboard group.
 * It must use the entire available dashboard width.
 */
#machines-panel {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* ============================================================
   Desktop / tablet landscape
   ============================================================ */

@media (min-width: 801px) {

  /*
   * Old layout used sticky ID + Hostname.
   * Those columns are no longer at the beginning, so the
   * historical left offsets caused the moving overlap.
   *
   * Keep only the THEAD vertically sticky.
   */
  #machines-panel
  th.machine-col-id,
  #machines-panel
  td.machine-col-id,
  #machines-panel
  th.machine-col-hostname,
  #machines-panel
  td.machine-col-hostname {
    position: static !important;

    left: auto !important;
    right: auto !important;

    z-index: auto !important;

    box-shadow: none !important;
  }

  #machines-panel
  tr.machine-row:hover
  .machine-col-id,
  #machines-panel
  tr.machine-row:hover
  .machine-col-hostname {
    background: transparent !important;
  }


  /*
   * The desktop table should fit into the panel instead of
   * requiring horizontal scrolling.
   */
  #machines-panel
  .machines-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #machines-panel
  .machines-scroll table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: auto !important;
  }


  /*
   * Compact desktop spacing.
   */
  #machines-panel
  .machines-scroll th,
  #machines-panel
  .machines-scroll td {
    padding-left: 6px !important;
    padding-right: 6px !important;

    font-size: 0.78rem !important;

    white-space: nowrap;
  }


  /* Primary columns get predictable space. */

  #machines-panel
  .billing-select-col,
  #machines-panel
  .billing-select-cell {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #machines-panel
  .machine-col-hostname {
    width: 142px !important;
    min-width: 125px !important;
    max-width: 165px !important;
  }

  #machines-panel
  .machine-col-gpu {
    width: 130px !important;
    min-width: 110px !important;
    max-width: 145px !important;

    white-space: normal !important;
    line-height: 1.15 !important;
  }

  #machines-panel
  .machine-col-occupancy {
    width: 172px !important;
    min-width: 150px !important;
  }

  #machines-panel
  .machine-col-price {
    width: 78px !important;
    min-width: 72px !important;
  }

  #machines-panel
  .machine-col-rentals {
    width: 58px !important;
    min-width: 54px !important;
  }

  #machines-panel
  .machine-col-status {
    width: 76px !important;
    min-width: 70px !important;
  }


  /*
   * Less important columns stay compact.
   */
  #machines-panel
  .machine-col-id {
    width: 66px !important;
  }

  #machines-panel
  .dc-col,
  #machines-panel
  .dc-cell,
  #machines-panel
  .listed-col,
  #machines-panel
  .listed-cell,
  #machines-panel
  .maint-col,
  #machines-panel
  .maint-cell {
    width: 42px !important;
  }

  #machines-panel
  .machine-col-temp {
    width: 52px !important;
  }

  #machines-panel
  .machine-col-reports {
    width: 55px !important;
  }

  #machines-panel
  .machine-col-reliability {
    width: 68px !important;
  }

  #machines-panel
  .machine-col-uptime {
    width: 68px !important;
  }


  /*
   * Occupancy dots were designed for the older wide layout.
   * Slightly reduce them on the desktop table.
   */
  #machines-panel
  .gpu-slot {
    width: 21px !important;
    height: 21px !important;

    margin-right: 2px !important;

    font-size: 0.68rem !important;
  }


  #machines-panel
  .status-pill,
  #machines-panel
  .dc-pill,
  #machines-panel
  .listed-pill,
  #machines-panel
  .util-chip {
    padding: 4px 7px !important;

    font-size: 0.70rem !important;
  }
}


/* ============================================================
   Medium desktop
   Hide purely diagnostic columns before forcing horizontal
   scrolling. They remain available in machine detail.
   ============================================================ */

@media (min-width: 801px) and (max-width: 1350px) {

  #machines-panel
  .machine-col-uptime,
  #machines-panel
  .machine-col-reports {
    display: none !important;
  }
}


/* ============================================================
   Mobile
   Preserve horizontal scrolling and priority column order.
   ============================================================ */

@media (max-width: 800px) {

  #machines-panel
  .machines-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  #machines-panel
  .machines-scroll table {
    min-width: 1150px !important;
  }
}

/* ============================================================
   MACHINES HEADER STICKY CORRECTION
   Body cells must NOT be horizontally sticky.
   Header cells must STILL be vertically sticky.
   ============================================================ */

@media (min-width: 801px) {

  /* Body cells: normal scrolling with the row. */
  #machines-panel td.machine-col-id,
  #machines-panel td.machine-col-hostname {
    position: static !important;

    left: auto !important;
    right: auto !important;

    z-index: auto !important;

    box-shadow: none !important;
  }

  /*
   * Header cells: retain the normal sticky table header.
   * Only disable the obsolete horizontal left offsets.
   */
  #machines-panel th.machine-col-id,
  #machines-panel th.machine-col-hostname {
    position: sticky !important;

    top: 0 !important;

    left: auto !important;
    right: auto !important;

    z-index: 12 !important;

    background: rgba(9, 17, 31, 0.98) !important;

    box-shadow: none !important;
  }

  /*
   * Data rows must never paint above the sticky header.
   */
  #machines-panel tbody td {
    position: relative;
    z-index: 1;
  }

  #machines-panel thead th {
    z-index: 12 !important;
  }

  /*
   * Checkbox column header also stays above data rows.
   */
  #machines-panel thead .billing-select-col {
    position: sticky !important;
    top: 0 !important;
    z-index: 13 !important;
  }
}

/* ============================================================
   MACHINE WARNING ROW BACKGROUND FIX
   Let row status colour show through former sticky cells.
   ============================================================ */

#machines-panel tbody td.machine-col-id,
#machines-panel tbody td.machine-col-hostname {
  background: transparent !important;
  box-shadow: none !important;
}

/* Preserve the same continuous row colour on hover. */
#machines-panel tr.machine-row:hover td.machine-col-id,
#machines-panel tr.machine-row:hover td.machine-col-hostname {
  background: transparent !important;
}

/* Explicitly keep warning/error rows visually continuous. */
#machines-panel tr.low-reliability td.machine-col-id,
#machines-panel tr.low-reliability td.machine-col-hostname,
#machines-panel tr.machine-error td.machine-col-id,
#machines-panel tr.machine-error td.machine-col-hostname,
#machines-panel tr.high-temperature td.machine-col-id,
#machines-panel tr.high-temperature td.machine-col-hostname,
#machines-panel tr.machine-unverified td.machine-col-id,
#machines-panel tr.machine-unverified td.machine-col-hostname {
  background: transparent !important;
}

/* ============================================================
   EARNINGS CHART LAYOUT STABILITY
   Prevent Today / Historical / Forecast views from changing
   panel height when legends contain different amounts of text.
   Desktop only; mobile keeps its responsive wrapping.
   ============================================================ */

@media (min-width: 801px) {

  /*
   * Use a predictable two-column layout:
   * left = chart heading
   * right = legends / selected-day information
   */
  .earnings-forecast-panel .forecast-chart-title-row,
  .month-forecast-panel .forecast-chart-title-row {
    display: grid !important;

    grid-template-columns:
      145px
      minmax(0, 1fr) !important;

    align-items: start !important;

    column-gap: 14px !important;

    /*
     * Reserve enough height for the largest normal legend state.
     * A historical day therefore occupies the same vertical space
     * as Today even when its legend needs only one line.
     */
    min-height: 38px !important;

    box-sizing: border-box !important;
  }

  /*
   * Never allow HOURLY EARNINGS / DAILY EARNINGS & FORECAST
   * to become a two-line label just because the legend grows.
   */
  .earnings-forecast-panel
  .forecast-chart-title-row > span:first-child,
  .month-forecast-panel
  .forecast-chart-title-row > span:first-child {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    white-space: nowrap !important;

    line-height: 1.25 !important;
  }

  /*
   * Outer legend always owns the second grid column.
   */
  .earnings-forecast-panel .forecast-chart-legend,
  .month-forecast-panel .forecast-chart-legend {
    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;

    justify-content: flex-end !important;
    align-items: flex-start !important;
    align-content: flex-start !important;

    /*
     * Keep the top-level pieces on one logical row.
     * The dynamic inner legend may wrap inside its own space.
     */
    flex-wrap: nowrap !important;

    min-height: 28px !important;
  }

  /*
   * This is the dynamic part containing Total / GPU / Storage /
   * Bandwidth / warning. Previously it behaved as one large
   * indivisible flex item and pushed the whole legend down.
   */
  .earnings-forecast-panel #hourly-forecast-legend {
    display: flex !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    flex-wrap: wrap !important;

    justify-content: flex-end !important;
    align-items: center !important;
    align-content: flex-start !important;

    column-gap: 9px !important;
    row-gap: 4px !important;
  }

  /*
   * Basis and Actual labels must not shrink or wrap.
   */
  .earnings-forecast-panel
  .forecast-chart-legend > .forecast-legend-item:not(#hourly-forecast-legend) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /*
   * Do the same for the monthly legend so changing between
   * actual day / historical day / forecast doesn't move the chart.
   */
  .month-forecast-panel .forecast-chart-legend {
    min-height: 28px !important;
  }

  .month-forecast-panel .forecast-chart-legend > * {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   CHART NO-JUMP V2
   - BASIS labels no longer consume chart height
   - monthly selected-value legend gets stable widths
   ============================================================ */

@media (min-width: 801px) {

  /* ----------------------------------------------------------
     HOURLY: BASIS goes inside the bar area
     ---------------------------------------------------------- */

  #hourly-chart .hour-bar-wrap {
    position: relative !important;
  }

  /*
   * Previously this reserved ~14px above basis bars and caused
   * Today to have a different vertical layout than History.
   */
  #hourly-chart .hour-basis-space {
    position: relative !important;

    min-height: 0 !important;
    height: 0 !important;

    overflow: visible !important;

    z-index: 6 !important;
  }

  /*
   * Put BASIS diagonally inside the top of the corresponding bar.
   * It is now purely an overlay and consumes ZERO layout height.
   */
  #hourly-chart .hour-basis-badge {
    position: absolute !important;

    left: 50% !important;
    top: 13px !important;

    transform:
      translateX(-50%)
      rotate(-55deg) !important;

    transform-origin: center !important;

    z-index: 7 !important;

    margin: 0 !important;

    font-size: 0.47rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    opacity: 0.82 !important;

    pointer-events: none !important;
  }


  /* ----------------------------------------------------------
     MONTH: stop legend values moving left/right
     ---------------------------------------------------------- */

  .month-forecast-panel .forecast-chart-legend {
    justify-content: flex-start !important;
  }

  /*
   * The selected date must always occupy the same space.
   */
  .month-forecast-panel .month-selected-date {
    flex: 0 0 132px !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    box-sizing: border-box !important;

    justify-content: center !important;

    white-space: nowrap !important;
  }

  /*
   * Fixed slots for component values.
   * Different dollar amounts therefore cannot move the following
   * labels horizontally.
   */
  .month-forecast-panel .month-value-legend.total {
    flex: 0 0 108px !important;
    width: 108px !important;
  }

  .month-forecast-panel .month-value-legend.gpu {
    flex: 0 0 112px !important;
    width: 112px !important;
  }

  .month-forecast-panel .month-value-legend.storage {
    flex: 0 0 122px !important;
    width: 122px !important;
  }

  .month-forecast-panel .month-value-legend.bandwidth {
    flex: 0 0 130px !important;
    width: 130px !important;
  }

  .month-forecast-panel .month-value-legend {
    min-width: 0 !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums !important;
  }

  .month-forecast-panel .month-value-legend strong,
  .month-forecast-panel .month-selected-date strong {
    font-variant-numeric: tabular-nums !important;
  }
}

/* ============================================================
   CHART STABILITY V3 FINAL
   Stable geometry between Historical / Today / Forecast.
   ============================================================ */

@media (min-width: 1100px) {

  /* ==========================================================
     HOURLY HEADER
     ========================================================== */

  .earnings-forecast-panel .forecast-chart-title-row {
    display: grid !important;

    grid-template-columns:
      150px
      minmax(0, 1fr) !important;

    align-items: start !important;

    column-gap: 18px !important;

    /*
     * Fixed vertical budget.
     * Historical and Today therefore occupy exactly the same
     * amount of space above the graph.
     */
    height: 48px !important;
    min-height: 48px !important;

    box-sizing: border-box !important;
  }

  .earnings-forecast-panel
  .forecast-chart-title-row > span:first-child {
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }


  /*
   * BASIS is already explained in the legend.
   * Repeating BASIS over four individual bars adds no information
   * and was changing / overflowing the graph geometry.
   */
  #hourly-chart .hour-basis-space {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #hourly-chart .hour-basis-badge {
    display: none !important;
  }


  /*
   * Stable hourly legend.
   */
  .earnings-forecast-panel .forecast-chart-legend {
    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: flex-start !important;
    justify-content: flex-end !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    column-gap: 12px !important;

    overflow: visible !important;
  }


  /*
   * Dynamic component legend always gets a fixed two-line area:
   *
   * line 1 = Total / GPU / Storage / Bandwidth / Forecast
   * line 2 = reliability notice
   */
  .earnings-forecast-panel #hourly-forecast-legend {
    display: flex !important;

    flex: 1 1 auto !important;

    flex-wrap: wrap !important;

    justify-content: flex-end !important;
    align-items: center !important;
    align-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    column-gap: 9px !important;
    row-gap: 2px !important;

    overflow: visible !important;
  }


  /*
   * The dynamic renderer also inserts another
   * "Forecast basis · 4h". The static legend on the left already
   * says this, so remove the duplicate.
   */
  .earnings-forecast-panel
  #hourly-forecast-legend
  .forecast-legend-separator {
    display: none !important;
  }

  .earnings-forecast-panel
  #hourly-forecast-legend
  .forecast-legend-separator + * {
    display: none !important;
  }


  .earnings-forecast-panel
  #hourly-forecast-legend
  .hourly-component-warning {
    display: block !important;

    flex: 0 0 100% !important;

    width: 100% !important;

    margin: 1px 0 0 0 !important;

    text-align: right !important;

    white-space: nowrap !important;

    font-size: 0.60rem !important;
    line-height: 1.15 !important;
  }


  /* ==========================================================
     MONTHLY DAILY LEGEND
     ========================================================== */

  .month-forecast-panel .forecast-chart-title-row {
    display: grid !important;

    grid-template-columns:
      150px
      minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap: 10px !important;

    min-height: 38px !important;
  }

  .month-forecast-panel
  .forecast-chart-title-row > span:first-child {
    white-space: nowrap !important;
  }


  /*
   * IMPORTANT:
   *
   * Do NOT let text width determine positions.
   *
   * Every item owns a permanent grid column, therefore:
   *
   *   $276.30
   *   $325.60
   *   $6,545.02
   *   —
   *
   * all occupy exactly the same layout slot.
   */
  .month-forecast-panel .forecast-chart-legend {
    display: grid !important;

    grid-template-columns:
      130px
      105px
      108px
      118px
      128px
      92px
      68px
      minmax(135px, 1fr) !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    column-gap: 5px !important;

    justify-content: stretch !important;

    white-space: nowrap !important;

    font-variant-numeric: tabular-nums !important;
  }


  /* Selected day */
  .month-forecast-panel .month-selected-date {
    grid-column: 1 !important;

    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    justify-content: center !important;
  }


  /* Total */
  .month-forecast-panel .month-value-legend.total {
    grid-column: 2 !important;

    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
  }


  /* GPU */
  .month-forecast-panel .month-value-legend.gpu {
    grid-column: 3 !important;

    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }


  /* Storage */
  .month-forecast-panel .month-value-legend.storage {
    grid-column: 4 !important;

    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }


  /* Bandwidth */
  .month-forecast-panel .month-value-legend.bandwidth {
    grid-column: 5 !important;

    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }


  #month-basis-legend {
    grid-column: 6 !important;

    width: 92px !important;

    justify-self: start !important;
  }


  #month-forecast-legend {
    grid-column: 7 !important;

    width: 68px !important;

    justify-self: start !important;
  }


  #month-weekend-note {
    grid-column: 8 !important;

    justify-self: end !important;

    margin: 0 !important;

    text-align: right !important;
  }


  /*
   * Old separator is unnecessary now that CSS grid supplies
   * the visual spacing.
   */
  .month-forecast-panel
  .forecast-legend-separator {
    display: none !important;
  }


  /*
   * All amounts use tabular digits as an additional safeguard.
   */
  .month-forecast-panel
  .month-value-legend,
  .month-forecast-panel
  .month-value-legend strong,
  .month-forecast-panel
  .month-selected-date,
  .month-forecast-panel
  .month-selected-date strong {
    font-variant-numeric:
      tabular-nums !important;

    white-space: nowrap !important;
  }
}

/* ============================================================
   MONTH LEGEND OVERFLOW FINAL FIX
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * DAILY EARNINGS & FORECAST needs more room.
   * The old 150px column was narrower than the actual label.
   */
  .month-forecast-panel .forecast-chart-title-row {
    grid-template-columns:
      190px
      minmax(0, 1fr) !important;

    column-gap: 12px !important;
  }

  #month-chart-heading {
    width: 190px !important;
    min-width: 190px !important;

    white-space: nowrap !important;

    overflow: visible !important;
  }

  /*
   * Keep Selected identical for actual / historical / forecast.
   * The extra "forecast" suffix was overflowing from its fixed
   * grid cell and pushing visually into Total.
   *
   * Forecast state is already obvious from the selected bar
   * and the Forecast legend.
   */
  .month-forecast-panel
  .month-selected-date em {
    display: none !important;
  }

  .month-forecast-panel
  .month-selected-date {
    overflow: hidden !important;

    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

    justify-content: center !important;

    white-space: nowrap !important;
  }

  /*
   * Prevent any individual value from visually escaping
   * its fixed grid slot.
   */
  .month-forecast-panel
  .month-value-legend {
    overflow: hidden !important;

    text-overflow: clip !important;

    white-space: nowrap !important;
  }
}

/* ============================================================
   HOURLY SELECTED HOUR LEGEND
   ============================================================ */

.hour-bar-wrap[data-hour-kind] {
  cursor: pointer;
}

/*
 * Same visual selection concept as the selected day
 * in the monthly chart.
 */
.hour-bar-wrap.hour-selected {
  z-index: 8;
}

.hour-bar-wrap.hour-selected
.hour-bar-track {
  border-radius: 5px;

  outline:
    2px solid rgba(96, 165, 250, 0.92);

  outline-offset: 3px;

  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.18),
    0 0 18px rgba(96, 165, 250, 0.20);
}

.hour-bar-wrap.hour-selected
.hour-label {
  color: #bfdbfe;
  font-weight: 700;
}


/*
 * Selected-hour values visually match the selected-day
 * values in the monthly chart.
 */
#hourly-forecast-legend.hourly-selected-mode
.month-selected-date,
#hourly-forecast-legend.hourly-selected-mode
.month-value-legend {
  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;
}

#hourly-forecast-legend
.month-value-legend
.forecast-legend-swatch {
  margin-right: 3px;
}

.hourly-selected-kind {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;

  color: var(--muted);
}


/* ------------------------------------------------------------
   Desktop: fixed slots prevent values moving left/right.
   ------------------------------------------------------------ */

@media (min-width: 1100px) {

  .earnings-forecast-panel
  #hourly-forecast-legend.hourly-selected-mode {
    display: grid !important;

    grid-template-columns:
      104px
      100px
      108px
      118px
      128px
      minmax(92px, 1fr) !important;

    column-gap: 6px !important;
    row-gap: 2px !important;

    align-items: center !important;

    width: 100% !important;

    height: 38px !important;
    min-height: 38px !important;

    overflow: visible !important;
  }

  #hourly-forecast-legend
  .hourly-selected-date {
    grid-column: 1;

    width: 104px;
    min-width: 104px;
    max-width: 104px;

    margin: 0;

    justify-content: center;

    box-sizing: border-box;
  }

  #hourly-forecast-legend
  .hourly-selected-total {
    grid-column: 2;
  }

  #hourly-forecast-legend
  .hourly-selected-gpu {
    grid-column: 3;
  }

  #hourly-forecast-legend
  .hourly-selected-storage {
    grid-column: 4;
  }

  #hourly-forecast-legend
  .hourly-selected-bandwidth {
    grid-column: 5;
  }

  #hourly-forecast-legend
  .hourly-selected-kind {
    grid-column: 6;

    justify-self: start;
  }

  #hourly-forecast-legend.hourly-selected-mode
  .hourly-component-warning {
    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 0 !important;

    text-align: right !important;
  }
}


/* ------------------------------------------------------------
   Mobile: same information, naturally wraps.
   ------------------------------------------------------------ */

@media (max-width: 1099px) {

  .earnings-forecast-panel
  #hourly-forecast-legend.hourly-selected-mode {
    display: flex !important;

    flex-wrap: wrap !important;

    width: 100% !important;

    gap: 7px 9px !important;

    height: auto !important;
    min-height: 0 !important;
  }

  #hourly-forecast-legend.hourly-selected-mode
  .hourly-component-warning {
    flex: 0 0 100% !important;
  }
}

/* ============================================================
   CENTER MAIN DASHBOARD PANELS
   Main financial panels use one common centered viewport width.
   ============================================================ */

@media (min-width: 801px) {
.earnings-forecast-panel,
.month-forecast-panel {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    justify-self: center !important;

    box-sizing: border-box !important;
  }
}

/* ============================================================
   DASHBOARD GRID TRACK NORMALIZATION

   1fr has an automatic min-content floor.
   Wide tables / legends can therefore expand dashboard tracks
   beyond the centered app-shell.

   minmax(0, 1fr) keeps all 12 tracks equal and constrained to
   the actual dashboard width.
   ============================================================ */

@media (min-width: 801px) {

  .dashboard {
    grid-template-columns:
      repeat(12, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
   * Every panel must be allowed to shrink to its assigned
   * grid area instead of imposing its min-content width.
   */
  .dashboard .panel {
    min-width: 0 !important;
  }
}

/* ============================================================
   NORMAL MODE CAROUSEL WRAPPER FIX

   Historical CSS turned #carousel-group-primary into its own
   2-column grid when Fleet Summary + GPU Breakdown were paired.

   Those panels are no longer in the same group. In normal
   dashboard mode both carousel wrappers must therefore be
   transparent to the main 12-column dashboard grid.
   ============================================================ */

@media (min-width: 801px) {

  /*
   * Keep the actual dashboard tracks bounded and equal.
   */
  .dashboard {
    grid-template-columns:
      repeat(12, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .dashboard > *,
  .dashboard .panel {
    min-width: 0 !important;
  }
}

/* ============================================================
   FLOATING BACK TO CHARTS
   ============================================================ */

.back-to-charts-floating {
  position: fixed;

  right: 28px;
  bottom: 26px;

  z-index: 60;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 0 16px;

  border:
    1px solid rgba(96, 165, 250, 0.42);

  border-radius: 999px;

  background:
    rgba(15, 23, 42, 0.94);

  color: #dbeafe;

  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;

  box-shadow:
    0 10px 30px rgba(2, 6, 23, 0.38);

  backdrop-filter: blur(12px);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(12px);

  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.back-to-charts-floating.visible {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;
}

.back-to-charts-floating:hover {
  background:
    rgba(30, 41, 59, 0.98);

  border-color:
    rgba(96, 165, 250, 0.75);
}

.back-to-charts-floating:focus-visible {
  outline:
    2px solid rgba(96, 165, 250, 0.95);

  outline-offset: 3px;
}

.back-to-charts-arrow {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background:
    rgba(96, 165, 250, 0.14);

  color: #93c5fd;

  font-size: 1rem;
  line-height: 1;
}


/* Mobile */
@media (max-width: 800px) {

  .back-to-charts-floating {
    right: 12px;

    bottom:
      calc(
        14px
        + env(safe-area-inset-bottom, 0px)
      );

    min-height: 42px;

    padding: 0 13px;

    font-size: 0.75rem;
  }

  .back-to-charts-arrow {
    width: 20px;
    height: 20px;
  }
}


@media (prefers-reduced-motion: reduce) {

  .back-to-charts-floating {
    transition: none;
  }
}

/* ============================================================
   MOBILE BOTTOM CHART NAVIGATION
   ============================================================ */

.mobile-chart-bottom-nav {
  display: none;
}


@media (max-width: 800px) {

  .mobile-chart-bottom-nav {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;

    width: 100%;

    margin:
      10px 0 6px;

    padding: 0;

    box-sizing: border-box;
  }

  .mobile-chart-nav-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;
    min-width: 0;
    min-height: 44px;

    padding: 8px 10px;

    border:
      1px solid rgba(148, 163, 184, 0.22);

    border-radius: 10px;

    background:
      rgba(15, 23, 42, 0.82);

    color: var(--text);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;

    cursor: pointer;
  }

  .mobile-chart-nav-button
  > span[aria-hidden="true"] {
    color: #93c5fd;

    font-size: 1.25rem;
    line-height: 1;
  }

  .mobile-chart-nav-button:active {
    background:
      rgba(96, 165, 250, 0.12);
  }

  .mobile-chart-nav-button:disabled {
    opacity: 0.35;

    cursor: default;
  }
}

/* ============================================================
   MOBILE FORECAST LEGEND SPACE STABILITY

   Forecast labels may disappear for historical days/months.
   On mobile their disappearance must NOT change panel height.
   Keep their layout slots, but make inactive labels invisible.
   ============================================================ */

@media (max-width: 800px) {

  /*
   * Hourly:
   * Forecast basis exists for Today, but normally disappears
   * on historical days. Keep the same occupied space.
   */
  #hourly-static-basis-legend.hidden {
    display: inline-flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  /*
   * Monthly:
   * historical months may have no Forecast basis / Forecast /
   * Weekend forecast. Preserve those slots as well.
   */
  #month-basis-legend.hidden,
  #month-forecast-legend.hidden,
  #month-weekend-note.hidden {
    display: inline-flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  /*
   * Give both legend areas a predictable vertical budget.
   * Content can still wrap naturally, but changing period
   * should no longer pull the chart up/down.
   */
  .earnings-forecast-panel
  .forecast-chart-title-row {
    min-height: 78px !important;
  }

  .month-forecast-panel
  .forecast-chart-title-row {
    min-height: 78px !important;
  }


  /*
   * Hidden placeholders must retain their normal dimensions.
   */
  #hourly-static-basis-legend,
  #month-basis-legend,
  #month-forecast-legend,
  #month-weekend-note {
    box-sizing: border-box !important;
  }
}

/* ============================================================
   MOBILE HOURLY TEXT HEIGHT STABILITY

   Historical hourly days use different explanatory strings.
   Reserve identical vertical space so day switching does not
   move the chart up/down.
   ============================================================ */

@media (max-width: 800px) {

  /*
   * Today's Hourly Earnings vs
   * Historical Hourly Breakdown.
   * Always reserve two title lines.
   */
  .earnings-forecast-panel #earnings-title {
    min-height: 2.45em !important;

    line-height: 1.22 !important;

    display: flex !important;
    align-items: flex-start !important;
  }


  /*
   * Source / explanation changes considerably between:
   *
   * - derived from billing updates
   * - evenly distributed across 24h
   * - unavailable
   *
   * Reserve four mobile text lines.
   */
  .earnings-forecast-panel #earnings-meta {
    min-height: 5.2em !important;

    line-height: 1.30 !important;

    display: block !important;

    box-sizing: border-box !important;
  }


  /*
   * Synthetic and billing-derived hourly warnings also have
   * different text lengths. Give both the same vertical budget.
   */
  .earnings-forecast-panel
  .hourly-component-warning {
    min-height: 4.8em !important;

    line-height: 1.20 !important;

    display: block !important;

    box-sizing: border-box !important;
  }
}

/* ============================================================
   WEEKEND FORECAST DROP CONTROL
   ============================================================ */

.weekend-drop-control {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  margin-right: 5px;

  color: var(--muted);

  font-size: 0.72rem;

  white-space: nowrap;
}

.weekend-drop-control input {
  width: 54px;
  height: 32px;

  padding: 4px 6px;

  box-sizing: border-box;

  border:
    1px solid rgba(148, 163, 184, 0.22);

  border-radius: 8px;

  background:
    rgba(15, 23, 42, 0.82);

  color: var(--text);

  font: inherit;

  text-align: center;
}


/* Remove ugly browser spinner width where possible. */
.weekend-drop-control input::-webkit-inner-spin-button,
.weekend-drop-control input::-webkit-outer-spin-button {
  margin: 0;
}


@media (max-width: 800px) {

  .month-forecast-panel
  .panel-title-row
  .earnings-nav {
    flex-wrap: wrap !important;
  }

  .weekend-drop-control {
    flex: 1 1 auto;

    margin-right: 4px;

    font-size: 0.72rem;
  }

  .weekend-drop-control input {
    width: 50px;
    min-width: 50px;
  }
}

/* ============================================================
   WEEKEND DROP APPLY BUTTON
   ============================================================ */

.weekend-drop-apply {
  min-height: 32px;

  padding: 4px 10px;

  border:
    1px solid rgba(96, 165, 250, 0.34);

  border-radius: 8px;

  background:
    rgba(96, 165, 250, 0.11);

  color: #bfdbfe;

  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;

  cursor: pointer;
}

.weekend-drop-apply:hover {
  background:
    rgba(96, 165, 250, 0.18);
}

.weekend-drop-apply:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 800px) {
  .weekend-drop-apply {
    min-height: 36px;
  }
}

/* Session entry hides every legacy dashboard/modal until identity is resolved. */
body[data-session-ready="false"] > :not(#language-toolbar):not(#session-toolbar):not(#session-notices):not(#session-gate):not(#session-management):not(#dashboard-shell) { display: none !important; }
.session-toolbar, .session-management-container { max-width: 1392px; margin: 16px auto; padding: 0 24px; }
.session-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.session-toolbar span { margin-right: auto; }
.session-gate { width: min(92vw, 480px); margin: 10vh auto; padding: 32px; border: 1px solid var(--panel-border); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.session-gate[hidden] { display: none; }
.session-login, .session-management form { display: flex; flex-wrap: wrap; gap: 12px; }
.session-login { flex-direction: column; }
.session-gate label, .session-management label { display: flex; flex-direction: column; gap: 6px; }
.session-gate input, .session-management input:not([type="checkbox"]), .session-management select, .session-toolbar select { min-width: 0; padding: 10px; color: var(--text); background: var(--bg); border: 1px solid #526582; border-radius: 8px; font: inherit; }
.session-gate button, .session-management button, .session-toolbar button { padding: 10px 16px; border: 1px solid #526582; border-radius: 8px; background: #172d4b; color: var(--text); cursor: pointer; font: inherit; }
.session-gate button:disabled, .session-management button:disabled { opacity: .55; cursor: wait; }
.session-management { padding: 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); }
.session-management summary { cursor: pointer; }
.session-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--panel-border); }
.session-row strong, .session-row span { margin-right: auto; }
.session-acl label { flex-direction: row; align-items: center; }
.session-acl h3, .session-acl p { width: 100%; }
body[data-dashboard-role="user"] .billing-payout-column .table-wrap,
body[data-dashboard-role="user"] #billing-payout-lock,
body[data-dashboard-role="user"] .settings-section:has(#settings-admin-token),
body:not([data-dashboard-tenant="1"]) .settings-section:has(#settings-admin-token) { display: none !important; }


.dashboard-test-banner {
  box-sizing: border-box;
  width: 100%;
  padding: 12px clamp(12px, 3vw, 32px);
  border-bottom: 2px solid #c89b14;
  background: #fff3b0;
  color: #493700;
  font-size: clamp(.9rem, 2.5vw, 1rem);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: center;
  border-radius: 0 0 12px 12px;
}

body:not([data-dashboard-role="superadmin"]) .operator-settings-section { display: none !important; }
body[data-dashboard-role="user"] .poll-monitor-panel,
body[data-dashboard-role="user"] #db-admin-panel,
body[data-dashboard-role="account_admin"] #db-admin-panel,
body[data-dashboard-role="user"] .db-admin-section,
body[data-dashboard-role="account_admin"] .db-admin-section { display: none !important; }

/* Account provisioning must wrap even long names and metadata on narrow screens. */
.session-management { overflow-wrap: anywhere; }
.session-management form > label { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.session-management input, .session-management select { box-sizing: border-box; max-width: 100%; }
.session-management form > p { flex-basis: 100%; }
.session-connection { padding: 12px 0; }

/* Shared account toolbar and forms: labels sit above equally sized controls. */
.session-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.session-toolbar .session-profile-button { margin-right: auto; background: transparent; }
.session-management[hidden] { display: none; }
.session-management .session-row { align-items: flex-end; }
.session-management input:not([type="checkbox"]), .session-management select,
.session-management button, .session-toolbar button, .session-toolbar select { min-height: 44px; }
.session-management .session-row > label { flex: 1 1 220px; }
.session-management .session-row > button { flex: 0 0 auto; margin: 0; }
.session-subpanel { padding: 14px 0; border-bottom: 1px solid var(--panel-border); }
.session-subpanel summary { cursor: pointer; font-weight: 600; }
.session-management h2, .session-management h3 { margin-top: 20px; }
.session-management input[type="checkbox"] { min-height: 24px; align-self: flex-start; }
@media (max-width: 600px) {
  .session-toolbar, .session-management-container { padding-left: 12px; padding-right: 12px; }
  .session-management .session-row > button { width: 100%; }
  .session-toolbar .session-profile-button { flex-basis: 100%; text-align: left; }
}

.license-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.license-bars { display: flex; height: 160px; align-items: flex-end; gap: 3px; padding: 12px; border-bottom: 1px solid var(--panel-border); }
.license-bar { flex: 1; min-width: 0; background: #48a5d8; border-radius: 3px 3px 0 0; }
.license-bar-unavailable { background: repeating-linear-gradient(135deg, #536174, #536174 5px, #637184 5px, #637184 10px); opacity: .6; }

.session-management input:not([type="checkbox"]), .session-management select,
.session-management button, .session-toolbar button, .session-toolbar select { height: 46px; box-sizing: border-box; }
.session-toolbar .session-profile-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.session-gate.session-archive { width: min(94vw, 1392px); box-sizing: border-box; margin: 24px auto; }
.session-archive .session-row { align-items: flex-end; }
.session-archive .session-row > label { flex: 1 1 200px; min-width: 0; }
.session-archive .session-row input { box-sizing: border-box; width: 100%; }
.session-archive .session-row button { height: 46px; }

/* Administration has separate account sections, creation flow and user editor. */
.management-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--panel-border); }
.management-tabs button { min-height: 36px; padding: 7px 13px; font-size: .9rem; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-billing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-billing-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; }
.profile-billing-actions button { min-height: 36px; padding: 7px 13px; }
.manage-users-link { margin-top: 4px; font-size: .95rem; }
.management-tabs button[aria-pressed="true"] { background: #24517b; border-color: #7abdec; }
.management-section, .management-create { padding-top: 16px; }
.management-section[hidden], .management-selected[hidden], .management-create[hidden], .management-editor[hidden] { display: none; }
.session-management .management-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; align-items: end; gap: 16px; margin: 16px 0; }
.management-form > p { grid-column: 1 / -1; }
.management-form > button { justify-self: start; }
.management-user-group { padding: 14px; margin: 10px 0; border: 1px solid var(--panel-border); border-radius: 10px; }
.management-user-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 0 0 14px; }
.management-user-row > span { flex: 1; color: var(--muted); }
.management-user-name { background: transparent !important; font-weight: 600; }
.management-editor { margin-top: 20px; padding: 16px; border: 1px solid #526582; border-radius: 12px; }
.management-acl { display: flex; flex-direction: column; gap: 10px; }
.management-acl label { flex-direction: row; align-items: center; }
.session-toolbar > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.session-toolbar { align-items: flex-end; }
.session-preview-notice { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; background: #26354d; border: 1px solid #d0ac52; border-radius: 10px; }
.session-preview-notice > span { flex: 1; }
@media (max-width: 600px) {
  .session-management .management-form { grid-template-columns: minmax(0, 1fr); }
  .session-toolbar > label { flex: 1 1 160px; }
  .session-toolbar > label > select { width: 100%; }
  .management-user-row { padding-left: 0; }
}
.session-management [hidden] { display: none !important; }
.management-user-name { max-width: min(60vw, 280px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.management-access-state { display: block; padding: 14px; margin: 12px 0; border: 1px solid #b59c58; border-radius: 8px; }
.management-access-action { border: 2px solid #b59c58 !important; margin: 12px 0; }
.management-danger { border: 1px solid #c66b72; border-radius: 10px; margin-top: 24px; padding: 16px; }
.management-danger > button, .management-danger form > button { border-color: #c66b72; }
.management-form > section { grid-column: 1 / -1; }
.management-form > section > label { flex-direction: row; align-items: center; padding: 6px 0; overflow-wrap: anywhere; }

/* Feature-specific theme adapters consume the shared interface palette. */
/* Shell and hierarchy: numerical content leads; secondary text stays quiet. */
html[data-theme="light"] :is(.hero, .panel, .session-gate, .session-management, .modal-content) {
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  box-shadow: var(--elevation-panel);
  color: var(--text-primary);
  backdrop-filter: none;
}

html[data-theme="light"] .eyebrow { color: var(--action); }
html[data-theme="light"] :is(.hero-copy, .hero-credit) { color: var(--text-secondary); }
html[data-theme="light"] .hero-credit { color: var(--text-muted); }

html[data-theme="light"] :is(.stat-card, .summary-card, .earnings-summary-card, .billing-period-card,
  .billing-start-info-static, .modal-summary-card, .trend-card, .breakdown-section) {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: none;
}

html[data-theme="light"] :is(.stat-card span, .billing-period-label, .settings-section-title,
  .month-basis-badge, .hour-basis-badge, .hour-day-label, .section-meta) { color: var(--text-muted); }
html[data-theme="light"] :is(.month-component-summary, .month-component-chip, .month-value-legend,
  .month-selected-date, .modal-timeline, .modal-chart-wrap, .modal-earnings-status,
  .billing-refresh-controls, .management-user-group, .management-editor, .db-admin-run-details pre,
  .stat-compare, .reports-toolbar, .section-placeholder) {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
  box-shadow: none;
  color: var(--text-secondary);
}
html[data-theme="light"] :is(.earnings-scope-summary, .earnings-scope-chip) { color: var(--text-secondary); }
html[data-theme="light"] :is(.earnings-scope-chip.all, .earnings-scope-toggle) { color: var(--action); background: var(--state-selected); }
html[data-theme="light"] .month-component-chip { background: transparent; border-color: transparent; }

/* Controls retain the shared geometry; selection is a quiet blue tint. */
html[data-theme="light"] :is(button, .filter-toggle, .filter-select, .filter-input, .billing-start-info-button),
html[data-theme="light"] :where(.session-toolbar, .session-management, .session-gate, .weekend-drop-control) :is(input:not([type="checkbox"]), select, textarea) {
  background: var(--control-bg);
  color: var(--text-secondary);
  border-color: var(--control-border);
  box-shadow: none;
}

html[data-theme="light"] :is(input, select, textarea) { accent-color: var(--action); color-scheme: light; }
html[data-theme="light"] input::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme="light"] :is(button, .filter-toggle, .billing-start-info-button):hover:not(:disabled) {
  background: var(--state-hover);
  color: var(--text-primary);
  border-color: var(--action);
}
html[data-theme="light"] :is(button, input, select, textarea, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}
html[data-theme="light"] :is(.session-management, .session-gate) button[type="submit"] {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
html[data-theme="light"] :is(.session-management, .session-gate) button[type="submit"]:hover:not(:disabled) { background: var(--action-hover); }
html[data-theme="light"] .session-toolbar .session-profile-button { color: var(--text-primary); background: var(--surface-secondary); }
html[data-theme="light"] :is(.management-tabs, .modal-tabs, .billing-period-tabs, .density-toggle, .machine-view-tabs) {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
}
html[data-theme="light"] .management-tabs { background: transparent; }
html[data-theme="light"] .management-tabs button {
  background: transparent; color: var(--text-secondary); }
html[data-theme="light"] :is(button.active, button[aria-pressed="true"], .machine-filter-chip,
  .filter-toggle:has(input:checked)) { color: var(--action); background: var(--state-selected); border-color: var(--action); }
html[data-theme="light"] .management-tabs button[aria-pressed="true"] { background: var(--state-selected); color: var(--action); border-bottom-color: var(--action); }
html[data-theme="light"] :is(.inline-profile-link, .manage-users-link, .breakdown-gpu-filter) {
  color: var(--action); background: transparent; border: 0; box-shadow: none; text-underline-offset: 3px;
}
html[data-theme="light"] :is(.inline-profile-link, .manage-users-link):hover { color: var(--action-hover); background: transparent; }
html[data-theme="light"] :is(.modal-close, .management-user-name) { background: transparent; }

/* Tables: opaque sticky cells, quiet rules and shared hover across pinned columns. */
html[data-theme="light"] :is(th, td) { border-bottom-color: var(--border-subtle); }
html[data-theme="light"] :is(th, .billing-history-table th, .machine-col-id, .machine-col-hostname) {
  background: var(--surface-secondary); color: var(--text-secondary); backdrop-filter: none;
}
html[data-theme="light"] :is(td.machine-col-id, td.machine-col-hostname) { background: var(--surface-raised); color: var(--text-primary); }
html[data-theme="light"] :is(.machines-scroll, .billing-history-wrap, .billing-monthly-wrap) { border-color: var(--border-subtle); }
html[data-theme="light"] :is(tr.machine-unverified, tr.machine-unverified .machine-col-id, tr.machine-unverified .machine-col-hostname) { background: var(--state-hover); }
html[data-theme="light"] :is(tr.low-reliability, tr.machine-error, tr.low-reliability .machine-col-id, tr.low-reliability .machine-col-hostname,
  tr.machine-error .machine-col-id, tr.machine-error .machine-col-hostname) { background: var(--status-warning-bg); }
html[data-theme="light"] tr.low-reliability td { color: var(--text-primary); border-color: var(--border-subtle); }
html[data-theme="light"] :is(tr.high-temperature, tr.high-temperature .machine-col-id, tr.high-temperature .machine-col-hostname) { background: var(--status-danger-bg); }
@media(hover:hover) and (pointer:fine){html[data-theme="light"] tbody tr:hover,
html[data-theme="light"] tbody tr:hover :is(.machine-col-id, .machine-col-hostname) { background: var(--state-hover); }}
html[data-theme="light"] :is(tr.selected, tr.selected .machine-col-id, tr.selected .machine-col-hostname) { background: var(--state-selected); }
html[data-theme="light"] :is(.machine-col-id, .machine-col-hostname) { box-shadow: none; }

/* Semantic status pairs: text always carries meaning alongside the tint. */
html[data-theme="light"] :is(.health-badge, .status-pill, .util-chip, .listed-pill, .gpu-slot,
  .price-chip, .report-badge, .dc-pill, .verification-pill, .summary-badge, .db-admin-badge, .modal-header-verified) {
  --badge-ink: var(--status-neutral);
  --badge-surface: var(--status-neutral-bg);
  color: var(--badge-ink); background: var(--badge-surface);
  border-color: currentColor; box-shadow: none;
}
html[data-theme="light"] :is(.status-pill.online, .util-chip.high, .listed-pill, .gpu-slot.occupied,
  .verification-pill.verified, .health-badge.healthy, .summary-badge.realized, .summary-badge.healthy, .modal-header-verified.verified,
  .price-chip.price-up, .price-chip.delta-up) { --badge-ink: var(--status-success); --badge-surface: var(--status-success-bg); }
html[data-theme="light"] :is(.util-chip.medium, .health-badge.stale, .health-badge.degraded,
  .verification-pill.unverified, .report-badge.changed, .summary-badge.estimated, .db-admin-badge.warn) { --badge-ink: var(--status-warning); --badge-surface: var(--status-warning-bg); }
html[data-theme="light"] :is(.verification-pill.deverified, .modal-header-verified.deverified, .status-pill.offline, .listed-pill.off, .util-chip.low, .summary-badge.degraded, .price-chip.price-down,
  .price-chip.delta-down) { --badge-ink: var(--status-danger); --badge-surface: var(--status-danger-bg); }
html[data-theme="light"] :is(.dc-pill, .health-badge.polling, .summary-badge.info, .db-admin-badge.ok,
  .modal-header-verified.unverified) { --badge-ink: var(--action); --badge-surface: var(--state-selected); }
html[data-theme="light"] .gpu-slot.rented { --badge-ink: var(--on-action); --badge-surface: var(--status-success); border-color: var(--status-success); }
html[data-theme="light"] .gpu-slot.free { --badge-ink: var(--status-neutral); --badge-surface: var(--status-neutral-bg); }
html[data-theme="light"] :is(.summary-capacity-positive, .earnings-trend-positive, .gpu-compare-positive,
  .modal-delta-up, .billing-history-table .billing-status-complete) { color: var(--status-success); }
html[data-theme="light"] :is(.earnings-trend-negative, .gpu-compare-negative,
  .forecast-weekend-note, .month-tooltip-weekend, .month-forecast-weekend-badge,
  .billing-history-table .billing-status-loading) { color: var(--status-warning); }
html[data-theme="light"] :is(.modal-delta-down, .hourly-component-warning) { color: var(--status-danger); }
html[data-theme="light"] :is(.billing-history-table .billing-status-live, .billing-start-info-icon,
  .billing-start-info-days, .billing-start-info-value span, .month-selected-date strong,
  .hour-bar-wrap.hour-selected .hour-label, .month-forecast-bar-wrap.selected .month-forecast-day) { color: var(--action); }
html[data-theme="light"] .billing-start-info-value .billing-start-days,
html[data-theme="light"] .billing-start-days strong { color: var(--chart-gpu); }

/* Chart surfaces and labels. Preserve series identity and geometry from JS. */
html[data-theme="light"] :is(.trend-axis text, .trend-legend text, .trend-benchmark text, .chart-axis text, .chart-empty) { fill: var(--text-muted); }
html[data-theme="light"] :is(.trend-axis line, .chart-axis line, .chart-axis path) { stroke: var(--chart-grid); }
html[data-theme="light"] .chart-crosshair { stroke: var(--text-muted); }
html[data-theme="light"] .chart-area { fill: var(--state-selected); }
/* Existing inline series colors are tuned for dark mode; darken marks and their
 * matching legend swatches together instead of replacing distinct series colors. */
html[data-theme="light"] :is(.trend-line, .chart-line, .trend-legend rect, .chart-hover-dot, .chart-tooltip-value tspan) { filter: brightness(.76) saturate(.85); }
html[data-theme="light"] .chart-tooltip-box { fill: var(--surface-raised); stroke: var(--border-strong); }
html[data-theme="light"] .chart-annotation text { fill: var(--status-success); }
html[data-theme="light"] .chart-annotation-dot { fill: var(--status-success); stroke: var(--surface-raised); }
html[data-theme="light"] .chart-hover-dot { stroke: var(--surface-raised); }
html[data-theme="light"] .chart-tooltip-value tspan { fill: var(--text-primary); filter: none; }
html[data-theme="light"] :is(.hour-bar:not(.future):not(.forecast):not(.basis):not(.synthetic-history), .month-forecast-bar.actual) { background: var(--action); }
html[data-theme="light"] :is(.hour-bar.forecast, .month-forecast-bar.forecast,
  .month-forecast-bar-wrap.weekend .month-forecast-bar.forecast, .hour-bar.synthetic-history,
  .forecast-legend-swatch.estimate) { background: var(--chart-estimate); }
html[data-theme="light"] .hour-bar.future { background: var(--surface-inset); }
html[data-theme="light"] :is(.hour-bar.basis, .month-forecast-bar.basis) { background: repeating-linear-gradient(-45deg, var(--chart-estimate), var(--chart-estimate) 4px, var(--surface-inset) 4px, var(--surface-inset) 8px); }
html[data-theme="light"] :is(.hour-stack-segment.gpu, .month-stack-segment.gpu, .forecast-legend-swatch.hour-gpu, .forecast-legend-swatch.month-gpu, .month-component-chip.gpu i, .month-tooltip-dot.gpu) { background: var(--chart-gpu); }
html[data-theme="light"] :is(.hour-stack-segment.storage, .month-stack-segment.storage, .forecast-legend-swatch.hour-storage, .forecast-legend-swatch.month-storage, .month-component-chip.storage i, .month-tooltip-dot.storage) { background: var(--chart-storage); }
html[data-theme="light"] :is(.hour-stack-segment.bandwidth, .month-stack-segment.bandwidth, .forecast-legend-swatch.hour-bandwidth, .forecast-legend-swatch.month-bandwidth, .month-component-chip.bandwidth i, .month-tooltip-dot.bandwidth) { background: var(--chart-bandwidth); }
html[data-theme="light"] :is(.forecast-legend-swatch.hour-total, .forecast-legend-swatch.month-total) { background: var(--action); }
html[data-theme="light"] .month-value-legend.total strong { color: var(--action); }
html[data-theme="light"] .month-value-legend.gpu strong { color: var(--chart-gpu); }
html[data-theme="light"] .month-value-legend.storage strong { color: var(--chart-storage-ink); }
html[data-theme="light"] .month-value-legend.bandwidth strong { color: var(--chart-bandwidth); }
html[data-theme="light"] :is(.hour-bar-wrap.hour-selected .hour-bar-track, .month-forecast-bar-wrap.selected .month-forecast-bar) { outline-color: var(--action); box-shadow: none; }
html[data-theme="light"] .license-bar { background: var(--action); }
html[data-theme="light"] .license-bar-unavailable { background: repeating-linear-gradient(135deg, var(--chart-estimate), var(--chart-estimate) 5px, var(--surface-inset) 5px, var(--surface-inset) 10px); opacity: 1; }


/* Daylight charts: saturated component colors, with texture reserved for estimates.
 * Insets separate thin segments without changing the amount or bar height. */
html[data-theme="light"] :is(.hour-stacked-bar, .month-stacked-bar, .weekly-history-bar) { filter: none; }
html[data-theme="light"] :is(.hour-stack-segment, .month-stack-segment, .weekly-history-bar > i) {
  background-image: none;
  box-shadow: inset 0 1px rgb(227 233 240 / 45%);
}
html[data-theme="light"] :is(.hour-stack-segment.gpu, .month-stack-segment.gpu, .weekly-history-bar > .gpu) { box-shadow: none; }
html[data-theme="light"] :is(.hour-stacked-bar.basis, .month-stacked-bar.basis, .month-forecast-bar-wrap.basis) { opacity: 1; filter: none; }
html[data-theme="light"] .hour-stacked-bar.basis::after { background: none; }
html[data-theme="light"] :is(.hour-bar.forecast, .month-forecast-bar.forecast,
  .month-forecast-bar-wrap.weekend .month-forecast-bar.forecast, .forecast-legend-swatch.estimate) {
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(71 91 116 / 22%) 5px 7px), var(--chart-estimate);
  border-color: var(--chart-estimate-line);
  opacity: 1;
}
html[data-theme="light"] :is(.hour-stacked-bar.synthetic-history, .weekly-history-bar.incomplete) {
  opacity: 1;
  filter: none;
  border-color: var(--chart-estimate-line);
}
html[data-theme="light"] :is(.hour-stacked-bar.synthetic-history .hour-stack-segment, .weekly-history-bar.incomplete > i) {
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgb(227 233 240 / 35%) 5px 7px);
}
html[data-theme="light"] .weekly-history-legend .incomplete {
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(71 91 116 / 22%) 5px 7px), var(--chart-estimate);
}

/* Notices and overlays use the same palette as inline status, with one elevation. */
html[data-theme="light"] :is(.warning-banner, .session-preview-notice, .modal-maintenance,
  .modal-error, .db-admin-warning, .management-access-state) {
  color: var(--status-warning); background: var(--status-warning-bg);
  border-color: var(--status-warning); box-shadow: none;
}
html[data-theme="light"] :is(.info-banner, .modal-live-note) { color: var(--action); background: var(--state-selected); border-color: var(--action); }
html[data-theme="light"] .alert-item { background: var(--surface-secondary); }
html[data-theme="light"] .alert-item.warning { border-left-color: var(--status-warning); }
html[data-theme="light"] .alert-item.error { border-left-color: var(--status-danger); }
html[data-theme="light"] .management-danger { border-color: var(--status-danger); }
html[data-theme="light"] :is(.settings-inline-button-danger, .management-danger > button, .management-danger form > button) { color: var(--status-danger); background: var(--status-danger-bg); border-color: var(--status-danger); }
html[data-theme="light"] :is(.settings-inline-button-danger, .management-danger > button, .management-danger form > button):hover:not(:disabled) { color: var(--on-action); background: var(--status-danger); border-color: var(--status-danger); }
html[data-theme="light"] .settings-inline-button-warn { color: var(--status-warning); }
html[data-theme="light"] .settings-inline-button-warn:hover { color: var(--status-warning); background: var(--status-warning-bg); }
html[data-theme="light"] .modal-backdrop { background: rgb(23 43 64 / 40%); }
html[data-theme="light"] .modal-content { box-shadow: var(--elevation-overlay); }
html[data-theme="light"] :is(.modal-header, .reports-modal-toolbar) { background: var(--surface-secondary); border-color: var(--border-subtle); }
html[data-theme="light"] :is(.market-tooltip, .month-breakdown-tooltip, .billing-start-info-popover, .dashboard-toast) {
  color: var(--text-primary); background: var(--surface-raised);
  border-color: var(--border-strong); box-shadow: var(--elevation-overlay);
}
html[data-theme="light"] .billing-payout-lock { background: var(--surface-secondary); border-color: var(--border-subtle); }
html[data-theme="light"] .billing-payout-lock-icon { color: var(--status-warning); background: var(--status-warning-bg); }
html[data-theme="light"] :is(.back-to-charts-floating, .mobile-chart-nav-button) { color: var(--action); background: var(--surface-raised); border-color: var(--border-strong); box-shadow: var(--elevation-panel); }
html[data-theme="light"] :is(.back-to-charts-arrow, .mobile-chart-nav-button > span[aria-hidden="true"]) { color: var(--action); background: var(--state-selected); }
html[data-theme="light"] .db-admin-run-details summary { color: var(--action); }

/* The shared desktop sticky-header correction uses !important for its paint. */
@media (min-width: 801px) {
  html[data-theme="light"] #machines-panel th.machine-col-id,
  html[data-theme="light"] #machines-panel th.machine-col-hostname { background: var(--surface-secondary) !important; }
}

/* Language controls remain available before sign-in and in either theme. */
#language-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px clamp(12px, 3vw, 40px) 0;
}
.language-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
}
.language-selector button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: 700 .6875rem/1 var(--font-ui);
  cursor: pointer;
}
.language-selector button:hover,
.language-selector button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--bg);
}
.language-selector button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
@media (max-width: 400px) {
  #language-toolbar { padding-inline: 6px; }
  .language-selector { gap: 1px; }
  .language-selector button { width: 32px; }
}

/* Compact theme switch beside the language controls. */
#language-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quick-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 76px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgb(148 163 184 / 38%);
  border-radius: 8px;
  background: rgb(5 15 30 / 72%);
  color: #e5edf8;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.quick-theme-toggle:hover {
  border-color: rgb(96 165 250 / 75%);
  background: rgb(17 37 63 / 92%);
}

.quick-theme-toggle:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.quick-theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

html[data-theme="light"] .quick-theme-toggle {
  color: var(--text-primary);
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

html[data-theme="light"] .quick-theme-toggle:hover {
  color: var(--action);
  background: var(--state-hover);
  border-color: var(--action);
}

@media (max-width: 640px) {
  #language-toolbar {
    gap: 4px;
    overflow-x: auto;
  }

  .quick-theme-toggle {
    min-width: 62px;
    height: 32px;
    padding-inline: 8px;
  }
}

/* Keep the DCMetrik hero stable while switching languages. */
.hero-copy {
  line-height: 1.4;
  min-height: 2.8em;
}

.management-global-settings {
  margin-block: 12px;
}

.management-global-settings h3 {
  margin: 0 0 8px;
}

.management-setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.management-setting-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.management-global-settings .section-meta {
  margin: 5px 0 0 27px;
}

/* Finance entry and feature introduction share the dashboard visual language. */
a.finance-entry-button, .finance-entry-button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:38px; padding:8px 18px; border:1px solid #60a5fa; border-radius:999px;
  background:linear-gradient(120deg,#2563eb,#1d4ed8); color:#fff;
  font:inherit; font-weight:700; line-height:1.25; text-decoration:none;
  box-shadow:0 4px 18px rgb(37 99 235 / 20%); cursor:pointer;
}
a.finance-entry-button:hover {background:#1d4ed8; border-color:#93c5fd; box-shadow:0 4px 22px rgb(37 99 235 / 35%);}
.finance-entry-button:focus-visible,.finance-access-secondary:focus-visible {outline:3px solid var(--blue);outline-offset:4px;}
.finance-entry-button[aria-busy="true"] {opacity:.7;cursor:wait;}
.finance-access-secondary {display:inline-block;margin:12px;color:var(--blue);text-decoration:none;}
.finance-access-secondary:hover {text-decoration:underline;}
.finance-access-dialog {position:fixed;inset:0;width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:32px;border:1px solid var(--panel-border);border-radius:24px;background:var(--bg);color:var(--text);box-shadow:var(--shadow);}
.finance-access-dialog::backdrop {background:rgb(2 6 23 / 65%);backdrop-filter:blur(4px);}
.finance-access-dialog h1 {font-size:1.8rem;line-height:1.2;}
.finance-access-dialog p,.finance-about p {line-height:1.65;}
.finance-access-close {float:right;border:1px solid var(--panel-border);border-radius:50%;width:34px;height:34px;font:inherit;font-size:24px;color:var(--text);background:transparent;cursor:pointer;}
.finance-about {max-width:1120px;}
.finance-about-nav {display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.finance-about .hero h1 {font-size:clamp(2rem,5vw,3.5rem);max-width:750px;}
.finance-about .hero-copy {max-width:720px;}
.finance-feature-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px;}
.finance-about .panel {padding:24px;backdrop-filter:none;}
.finance-feature-list > .panel {grid-column:auto;}
.finance-feature-list h2 {font-size:1.2rem;}
@media(max-width:650px){.finance-feature-list {grid-template-columns:1fr;}.finance-access-dialog {padding:24px;}}

.machine-detail-note {grid-column:1/-1;margin:4px 0 16px;color:var(--muted);font-size:.85rem;line-height:1.6;}
.modal-summary-card small {color:var(--muted);font-size:.75rem;line-height:1.5;font-weight:400;}
.modal-timeline-list {max-height:65vh;overflow-y:auto;overscroll-behavior:contain;}
.modal-timeline-list .timeline-item {padding:12px;border-bottom:1px solid var(--panel-border);}

#modal-summary,#modal-earnings-breakdown {grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:700px){#modal-summary,#modal-earnings-breakdown {grid-template-columns:repeat(2,minmax(0,1fr));}}

.modal-summary-card small {display:block;margin-top:6px;}
.modal-header-name {font-size:1.05rem;font-weight:700;margin-right:6px;}

.machine-billing-cards {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px 12px;
}
.machine-billing-card {
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  min-width:0;
  overflow-wrap:anywhere;
}
.machine-billing-card .machine-billing-label,
.machine-billing-card .machine-billing-period {margin:0;letter-spacing:normal;text-transform:none;}
.machine-billing-card .machine-billing-label {color:var(--text);font-size:.82rem;font-weight:600;}
.machine-billing-card .machine-billing-period {font-size:.75rem;}
.machine-billing-card strong {display:block;font-size:1.15rem;align-self:start;}
.machine-billing-card small {margin-top:0;}
@media(max-width:700px){.machine-billing-cards {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;}}
.modal-summary-card .status-pill {display:inline-flex;width:auto;letter-spacing:normal;margin-bottom:0;}
.machine-detail-note details {margin-top:4px;}
.machine-detail-note summary {cursor:pointer;}

/* Billing Master product tour: local media, loaded only when needed. */
.finance-showcase { margin-bottom:24px; }
.finance-showcase > h2 { margin:6px 0 10px; font-size:clamp(1.4rem,3vw,2rem); }
.showcase-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 18px; }
.showcase-tabs button { padding:10px 16px; border:1px solid var(--panel-border); border-radius:999px; background:var(--panel); color:var(--text); font:inherit; cursor:pointer; }
.showcase-tabs button[aria-selected="true"] { color:var(--blue); border-color:var(--blue); background:var(--state-hover); font-weight:700; }
.showcase-tabs button:focus-visible,.showcase-image:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.finance-showcase [role="tabpanel"][hidden] { display:none; }
.finance-showcase video,.showcase-image img { display:block; width:100%; height:auto; border-radius:14px; background:#0a1220; }
.finance-showcase video { aspect-ratio:1440 / 1000; }
.showcase-image { display:block; width:100%; padding:0; border:1px solid var(--panel-border); border-radius:14px; cursor:zoom-in; background:transparent; overflow:hidden; }
.showcase-caption { margin:16px 0 12px; color:var(--muted); }
.finance-showcase summary { cursor:pointer; color:var(--blue); }
.finance-showcase li { line-height:1.65; margin-bottom:8px; }
.showcase-lightbox { width:min(1500px,96vw); max-width:96vw; max-height:94vh; padding:16px; border:1px solid var(--panel-border); border-radius:18px; color:var(--text); background:var(--panel); }
.showcase-lightbox::backdrop { background:rgba(0,0,0,.8); }
.showcase-lightbox > button { display:block; margin:0 0 12px auto; padding:8px 16px; border:1px solid var(--panel-border); border-radius:999px; background:var(--panel); color:var(--text); cursor:pointer; font:inherit; }
.showcase-lightbox img { display:block; width:100%; height:auto; }
@media(max-width:650px){.finance-about .finance-showcase { padding:16px; }.showcase-tabs { gap:6px; }.showcase-tabs button { padding:8px 12px; font-size:14px; }}

/* Keep localized controls inside their panels without reducing text size. */
:is(.session-toolbar, .session-management, .settings-panel, .finance-about) :is(button, .button, label, summary, h2, h3, p) { overflow-wrap: anywhere; }
:is(.session-toolbar, .session-management, .finance-about) button { white-space: normal; height: auto; max-width: 100%; }
.session-toolbar > *, .session-toolbar-actions > *, .management-form > *, .finance-feature-list > * { min-width: 0; }
:is(.session-toolbar, .session-management) select { min-width: 0; max-width: 100%; }
.showcase-tabs { flex-wrap: wrap; }

/* Keep the return action readable for translated labels on narrow screens. */
.back-to-charts-floating {
  max-width: calc(100vw - 40px);
  white-space: normal;
  overflow-wrap: anywhere;
  padding-block: 10px;
  border-color: var(--action, #60a5fa);
}

/* Current and historical occupancy share one compact summary card. */
.utilisation-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.utilisation-pair > div {min-width:0;}
.utilisation-pair .stat-label {overflow-wrap:anywhere;}
.utilisation-pair .stat-value {white-space:nowrap;}
.utilisation-coverage {display:block;margin-top:6px;color:var(--muted);font-size:.7rem;line-height:1.4;}

.month-forecast-day {border:1px solid transparent;border-radius:3px;padding:1px 3px;}
.month-forecast-day.forecast-basis-date {border-color:#fbbf24;}
.month-basis-key {display:inline-flex;align-items:center;gap:6px;margin-left:8px;max-width:100%;color:var(--muted);font-size:.75rem;}
.month-basis-key-swatch {display:inline-block;flex:none;width:12px;height:12px;border:1px solid #fbbf24;border-radius:3px;}
html[data-theme="light"] .forecast-basis-date,html[data-theme="light"] .month-basis-key-swatch {border-color:var(--status-warning);}
@media(max-width:700px){.month-basis-key {margin-left:0;}}

body[data-dashboard-role="user"] :is([data-earnings-exclude-third-party],[data-earnings-only-third-party],#billing-exclude-third-party,#billing-only-third-party) {display:none !important;}

/* Keep both utilisation values readable within narrow summary grids. */
.stat-card-utilisation {min-width:0;}
.stat-card-utilisation .utilisation-pair .stat-value {font-size:clamp(1.05rem,2vw,1.55rem);}
.stat-card-utilisation .utilisation-pair .stat-label {white-space:normal;min-width:0;}
.chart-average-line {stroke:#fbbf24;stroke-width:1.5;stroke-dasharray:6 4;}
.chart-average-label {fill:var(--text);font-size:11px;paint-order:stroke;stroke:var(--panel,#0b1525);stroke-width:3px;}

.price-series-legend {display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px;font-size:.7rem;color:var(--muted);}
.price-series-legend span {display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere;}
.price-series-legend i {width:20px;flex:none;border-top:2px solid;}

.vast-help-tooltip {position:fixed;z-index:2147483647;max-width:min(360px,calc(100vw - 20px));width:max-content;
  padding:10px 13px;border:1px solid var(--border,#45556e);border-radius:10px;background:var(--panel,#0c1728);
  color:var(--text,#e5edf8);box-shadow:0 6px 24px #0004;font:400 .8rem/1.5 system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:none;}
.vast-help-tooltip[hidden] {display:none;}
html[data-theme="light"] .chart-average-line {stroke:var(--status-warning);}

/* One palette for all interactive controls; reserve solid blue for primary actions. */
html[data-theme="light"] body :is(button, .button, .filter-toggle) {
  background: var(--control-bg); color: var(--text-secondary); border-color: var(--border-strong);
}
html[data-theme="light"] body :is(button, .button, .filter-toggle):hover:not(:disabled) {
  background: var(--state-hover); color: var(--action-hover); border-color: var(--action);
}
html[data-theme="light"] body :is(button[aria-current="page"], button[aria-current="step"], button[aria-pressed="true"], button.active) {
  background: var(--state-selected); color: var(--action); border-color: var(--action);
}
html[data-theme="light"] body :is(button.primary, button[type="submit"], .finance-entry-button, button.management-primary) {
  background: var(--action); color: var(--on-action); border-color: var(--action);
}
html[data-theme="light"] body :is(button.primary, button[type="submit"], .finance-entry-button, button.management-primary):hover:not(:disabled) {
  background: var(--action-hover); color: var(--on-action);
}
html[data-theme="light"] body button:disabled {
  background: var(--surface-inset); color: var(--text-muted); border-color: var(--border-subtle); opacity: 1;
}
html[data-theme="light"] body :is(button.danger, .management-danger > button) {
  color: var(--status-danger); background: var(--status-danger-bg); border-color: var(--status-danger);
}
.session-profile-group {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-right:auto;min-width:0;max-width:100%;}
.session-toolbar .session-profile-group .session-profile-button {margin-right:0;flex-basis:auto;}
.session-profile-group #session-scope-notice {margin:0;padding:6px 10px;font-size:.75rem;line-height:1.4;max-width:300px;white-space:normal;overflow-wrap:anywhere;border-radius:8px;}
.session-profile-group #session-scope-notice[hidden] {display:none;}
@media(max-width:600px){.session-profile-group {flex:1 1 220px;}.session-profile-group #session-scope-notice {max-width:100%;}}

html[data-theme="light"] .price-series-legend i {filter:brightness(.76) saturate(.85);}

/* A shared screen-update pause, independent of server data collection. */
.refresh-pause-control { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 10px; min-width:0; max-width:100%; }
.refresh-pause-control button { height:auto; min-height:34px; max-width:100%; padding:7px 13px; white-space:normal; overflow-wrap:anywhere; line-height:1.3; color:var(--blue); border-color:var(--blue); font-weight:700; }
.refresh-pause-control.is-paused button { color:var(--yellow); border-color:var(--yellow); }
.refresh-pause-status { color:var(--yellow); font-size:12px; overflow-wrap:anywhere; }
.refresh-pause-status[hidden] { display:none; }
html[data-theme="light"] .refresh-pause-control button { color:var(--action); border-color:var(--border-strong); background:var(--state-selected); }
html[data-theme="light"] .refresh-pause-control.is-paused button { color:var(--status-warning); border-color:var(--status-warning); background:var(--status-warning-bg); }
html[data-theme="light"] .refresh-pause-status { color:var(--status-warning); }

.refresh-pause-control [hidden] { display:none; }
.refresh-pause-warning { position:fixed; inset:0; margin:auto; width:min(470px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:1px solid var(--yellow); border-radius:18px; color:var(--text); background:var(--bg); box-shadow:var(--shadow); }
.refresh-pause-warning::backdrop { background:rgba(2,6,23,.5); }
.refresh-pause-warning h2 { font-size:20px; margin:0 0 12px; color:var(--yellow); overflow-wrap:anywhere; }
.refresh-pause-warning p { font-size:14px; line-height:1.6; margin:0 0 20px; overflow-wrap:anywhere; }
.refresh-warning-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.refresh-warning-actions button { height:auto; min-height:36px; padding:8px 14px; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.refresh-warning-actions .refresh-warning-extend { font-weight:700; border-color:var(--blue); color:var(--blue); }
html[data-theme="light"] .refresh-pause-warning h2 { color:var(--status-warning); }
html[data-theme="light"] .refresh-warning-actions button { color:var(--action); border-color:var(--border-strong); background:var(--state-selected); }
@media (min-width: 981px) {
  .hero:has(.hero-meta .refresh-pause-control) > div:first-child,
  .hero-meta:has(.refresh-pause-control) { flex:1 1 50%; min-width:0; }
  .hero-meta > .refresh-pause-control { flex-basis:100%; }
}

/* Small shared information markers; their focus/click never submits a form. */
.help-info-icon { display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; flex:none;
  width:14px; height:14px; margin:0 0 0 5px !important; padding:0; vertical-align:baseline; border:1px solid var(--blue,#60a5fa); border-radius:50%;
  background:color-mix(in srgb,var(--blue,#60a5fa) 12%,transparent); color:var(--blue,#60a5fa); font:700 10px/1 system-ui,sans-serif !important; letter-spacing:normal; text-transform:none; cursor:help; user-select:none; }
.help-info-icon:focus-visible { outline:2px solid var(--blue,#60a5fa); outline-offset:3px; }
.help-info-icon:hover { background:color-mix(in srgb,var(--blue,#60a5fa) 22%,transparent); }
html[data-theme="light"] .help-info-icon { color:var(--action); border-color:var(--border-strong); background:var(--state-selected); }
label > .help-info-icon { vertical-align:middle; }

@media (min-width:701px) and (max-width:1099px) {
  .month-forecast-panel .forecast-chart-title-row { flex-wrap:wrap; min-width:0; }
  .month-forecast-panel .forecast-chart-legend { flex-wrap:wrap !important; min-width:0; max-width:100%; }
  .month-forecast-panel .forecast-weekend-note { white-space:normal; overflow-wrap:anywhere; }
}

@media (max-width:1099px) {
 .panel-title-row {flex-wrap:wrap;min-width:0;}
 .panel-title-row > h2 {min-width:0;max-width:100%;white-space:normal !important;overflow-wrap:anywhere;}
 .panel-title-row > h2 > span {white-space:normal !important;overflow-wrap:anywhere;}
}

#month-machine-scope .earnings-scope-actions { align-items: center; }
@media(max-width:800px){#month-machine-scope .month-basis-key {grid-column:1/-1;margin-left:0;}}

/* Associate the payout heading and account metadata with their own table. */
.billing-payout-column .billing-history-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  text-align: left;
}
.billing-payout-column .billing-history-title h3 { margin: 0; }
.billing-payout-column .billing-history-title .section-meta {
  text-align: left;
  align-self: flex-start;
  font-size: .76rem;
}

/* Account settings: compact navigation, user cards and a focused access editor. */
.session-management { --management-inset: rgba(15,23,42,.55); padding: 24px; border-radius: 20px; }
html[data-theme="light"] .session-management { --management-inset: var(--surface-secondary); }
.management-selected { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px 24px; }
.management-selected > h2, .management-selected > p { grid-column: 1 / -1; margin-bottom: 0; }
.management-selected > p { color: var(--muted); font-size: .85rem; }
.management-selected > .management-tabs { grid-column: 1; grid-row: 3; align-self: start; flex-direction: column; align-items: stretch; border: 0; padding: 20px 0; }
.management-tabs button { text-align: start; }
.management-selected > .management-section { grid-column: 2; grid-row: 3; min-width: 0; padding-top: 20px; }
.session-management .management-users-heading, .management-machine-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.session-management .management-users-heading h3 { margin: 0; }
.management-users-heading > div { flex: 1 1 240px; }
.management-users-heading p { margin: 8px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.session-management button.management-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.management-user-tree { display: grid; gap: 10px; margin-top: 20px; }
.management-user-row { display: grid; grid-template-columns: minmax(140px,1fr) auto auto; gap: 16px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--management-inset); align-items: center; }
.management-user-card-identity { min-width: 0; }
.session-management .management-user-name { padding: 0; min-height: 0; border: 0; border-radius: 0; font-size: 1rem; font-weight: 700; color: var(--text); text-align: start; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.management-user-card-identity > small { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }
.management-user-status { display: flex; flex-wrap: wrap; gap: 6px; max-width: 310px; }
.management-status { padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid var(--panel-border); color: var(--muted); }
.management-status.enabled { color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.management-status.disabled { color: var(--muted); background: var(--management-inset); }
.session-management .management-editor { margin-top: 24px; padding: 20px; border-color: var(--panel-border); border-radius: 16px; scroll-margin-top: 16px; }
.session-management .management-editor > h3 { margin: 0 0 20px; }
.session-management .management-user-form { max-width: none; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; margin: 0; gap: 20px; }
.management-user-form > section { min-width: 0; }
.management-user-form h4 { margin: 0 0 14px; font-size: .85rem; }
.management-user-identity { display: grid; gap: 14px; }
.management-user-identity h4 { margin-bottom: 0; }
.management-user-identity label { font-size: .82rem; }
.management-user-identity input { width: 100%; }
.management-permission-card { padding: 12px; margin-bottom: 10px; background: var(--management-inset); border: 1px solid var(--panel-border); border-radius: 12px; }
.session-management .management-permission-card .management-check { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 600; font-size: .83rem; cursor: pointer; }
.management-permission-card p { color: var(--muted); font-size: .75rem; line-height: 1.5; margin: 8px 0 0; }
.session-management input.management-switch { appearance: none; flex: 0 0 34px; width: 34px; height: 20px; min-height: 20px; margin: 0; align-self: center; border: 1px solid var(--muted); border-radius: 12px; background: var(--panel); cursor: pointer; position: relative; }
.management-switch::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.session-management input.management-switch:checked { background: var(--blue); border-color: var(--blue); }
.management-switch:checked::before { transform: translateX(14px); background: #fff; }
.management-switch:focus-visible, .management-machine-choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.management-user-form > .management-machine-panel { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--panel-border); }
.management-machine-heading h4 { margin: 0; }
.management-selection-count { color: var(--blue); font-size: .78rem; font-weight: 600; }
.management-machine-panel > p { margin: 8px 0 14px; font-size: .78rem; line-height: 1.5; }
.management-machine-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.management-machine-tools input { flex: 1 1 240px; }
.session-management .management-machine-tools button { min-height: 36px; font-size: .78rem; padding: 7px 10px; }
.management-machine-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px; }
.session-management label.management-machine-choice { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--management-inset); cursor: pointer; }
.management-machine-choice:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--panel)); }
.session-management .management-machine-choice input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; align-self: center; accent-color: var(--blue); }
.management-machine-choice > span { min-width: 0; }
.management-machine-choice strong { display: block; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.management-machine-choice small { display: block; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.management-machines-empty { grid-column: 1 / -1; color: var(--muted); padding: 18px; text-align: center; }
.management-editor-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 0; position: sticky; bottom: 0; z-index: 2; background: var(--panel); border-top: 1px solid var(--panel-border); }
.management-password-panel { padding-top: 16px; border-top: 1px solid var(--panel-border); }
.management-password-panel > summary { font-size: .85rem; font-weight: 600; color: var(--muted); }
.management-password-panel > p { font-size: .8rem; color: var(--muted); }
@media (max-width: 1050px) {
  .management-selected { grid-template-columns: minmax(0,1fr); }
  .management-selected > .management-tabs { grid-column: 1; grid-row: 3; flex-direction: row; padding: 12px 0; }
  .management-selected > .management-section { grid-column: 1; grid-row: 4; padding-top: 4px; }
}
@media (max-width: 650px) {
  .session-management { padding: 16px; }
  .session-management .management-editor { padding: 14px; }
  .session-management .management-user-form { grid-template-columns: minmax(0,1fr); }
  .management-user-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .management-user-status { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .management-machine-grid { grid-template-columns: minmax(0,1fr); }
  .management-editor-actions button { flex: 1 1 auto; }
}

/* Keep every hour on the same baseline, including forecast inputs from yesterday. */
#hourly-chart .hour-label {border:1px solid transparent;border-radius:3px;padding:1px 3px;line-height:1.2;}
#hourly-chart .hour-label.forecast-basis-hour {border-color:#fbbf24;}
html[data-theme="light"] #hourly-chart .hour-label.forecast-basis-hour {border-color:var(--status-warning);}

/* Vast verification is distinct from the datacenter tag. */
#machines-panel .verification-col, #machines-panel .verification-cell { width:1%; padding-inline:6px; text-align:center; white-space:nowrap; }
.verification-pill { display:inline-flex; align-items:center; justify-content:center; border:1px solid; border-radius:999px; padding:3px 7px; font-size:11px; font-weight:700; line-height:1.2; white-space:nowrap; }
.verification-pill.verified { color:#86efac; border-color:rgb(34 197 94 / 30%); background:rgb(34 197 94 / 14%); }
.verification-pill.unverified { color:#fcd34d; border-color:rgb(245 158 11 / 35%); background:rgb(245 158 11 / 14%); }
.verification-pill.deverified, .modal-header-verified.deverified { color:#fca5a5; border-color:rgb(239 68 68 / 35%); background:rgb(239 68 68 / 14%); }
.verification-pill.unknown { color:var(--muted); border-color:var(--panel-border); background:rgb(148 163 184 / 10%); }
html[data-theme="light"] .verification-pill.verified { color:var(--status-success); }
html[data-theme="light"] .verification-pill.unverified { color:var(--status-warning); }
html[data-theme="light"] .verification-pill.deverified, html[data-theme="light"] .modal-header-verified.deverified { color:var(--status-danger); }

/* Archive identity review belongs to Dashboard, including accounts without Finance. */
.machine-archive-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.machine-submeta [data-machine-resolve] {padding:3px 9px;font-size:.72rem;color:var(--blue);}
.machine-identity-dialog {position:fixed;inset:0;margin:auto;width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:24px;background:var(--bg);color:var(--text);border:1px solid var(--panel-border);border-radius:22px;box-shadow:var(--shadow);}
.machine-identity-dialog::backdrop {background:rgb(2 6 23 / 70%);backdrop-filter:blur(4px);}
.machine-identity-dialog header,.machine-identity-dialog footer {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.machine-identity-dialog h2 {margin:0;font-size:1.35rem;}
.machine-identity-dialog h3 {margin:20px 0 6px;}
.machine-identity-dialog footer {position:sticky;bottom:-24px;padding:16px 0;background:var(--bg);border-top:1px solid var(--panel-border);}
.machine-identity-dialog footer [data-notice] {flex:1;color:var(--green,#20c67a);}
.machine-identity-dialog .section-meta {line-height:1.5;}
.machine-identity-dialog label {display:grid;gap:8px;}
.machine-identity-dialog select {width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.identity-source {display:grid;gap:6px;margin-top:16px;padding:16px;border:1px solid var(--panel-border);border-radius:14px;background:var(--panel);}
.identity-evidence {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:10px 0 0;}
.identity-evidence dt {font-size:.72rem;color:var(--muted);}
.identity-evidence dd {margin:6px 0 0;font-size:.83rem;}
.identity-suggestions {display:grid;gap:10px;}
.identity-suggestions article {padding:14px;border:1px solid var(--panel-border);border-radius:12px;}
.identity-candidate-heading {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.identity-candidate-heading>span {font-size:.76rem;color:var(--muted);}
.identity-reasons {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.identity-reasons span {font-size:.73rem;color:var(--blue);background:rgb(75 151 255 / 10%);border-radius:6px;padding:4px 7px;}
.identity-conflicts,.machine-identity-dialog [data-error] {color:var(--yellow,#ffb72b);font-size:.85rem;line-height:1.5;}
.identity-decision {display:grid;gap:14px;border:1px solid var(--panel-border);padding:16px;border-radius:12px;margin:20px 0 0;}
.machine-identity-dialog .identity-ack {display:flex;align-items:center;font-size:.85rem;}
.machine-identity-dialog .identity-ack input {width:18px;flex:0 0 18px;}
.machine-identity-dialog [hidden],.machine-archive-actions [hidden] {display:none!important;}
@media(max-width:650px) {.machine-identity-dialog {padding:16px;}.machine-identity-dialog footer {bottom:-16px;}.identity-evidence {grid-template-columns:repeat(2,minmax(0,1fr));}.machine-archive-actions {justify-content:flex-start;}.identity-source strong,.identity-candidate-heading strong {overflow-wrap:anywhere;}}

.machine-identity-dialog :is(button,select),.machine-archive-actions>button,.machine-submeta [data-machine-resolve] {font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:9px 12px;}
.machine-identity-dialog button,.machine-archive-actions>button,.machine-submeta [data-machine-resolve] {cursor:pointer;font-size:.8rem;}
.machine-identity-dialog button:hover:not(:disabled),.machine-archive-actions>button:hover,.machine-submeta [data-machine-resolve]:hover {border-color:var(--blue);color:var(--blue);}
.machine-identity-dialog button.primary {color:var(--blue);border-color:var(--blue);background:rgb(96 165 250 / 12%);font-weight:600;}
.machine-identity-dialog button:disabled {opacity:.45;cursor:default;}
.machine-identity-dialog .section-meta {text-align:left;font-size:.78rem;margin:8px 0 12px;max-width:none;}
.machine-identity-dialog :is(button,select,input):focus-visible {outline:2px solid var(--blue);outline-offset:3px;}
.machine-identity-dialog label,.identity-decision legend {font-size:.85rem;}
.machine-submeta [data-machine-resolve] {font-size:.72rem;padding:4px 9px;color:var(--blue);}

.identity-archive-notice {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;margin:0 0 14px;border:1px solid var(--panel-border);border-radius:12px;background:rgb(96 165 250 / 6%);}
.identity-archive-notice.needs-review {border-color:rgb(245 158 11 / 25%);background:rgb(245 158 11 / 7%);}
.identity-archive-notice strong {font-size:.86rem;}
.identity-archive-notice.needs-review strong,.identity-needs-review {color:var(--yellow);}
.identity-archive-notice p {margin:5px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5;}
.identity-archive-notice button {flex:none;font:inherit;font-size:.8rem;color:var(--blue);padding:9px 12px;border:1px solid var(--blue);border-radius:10px;background:rgb(96 165 250 / 10%);cursor:pointer;}
.identity-row-status {display:flex;align-items:flex-start;gap:5px;flex-direction:column;white-space:normal;}
.identity-needs-review {font-weight:600;}
.identity-linked {color:var(--green);font-weight:600;}
.identity-migration {max-width:310px;line-height:1.45;overflow-wrap:anywhere;}
#machines-panel td.machine-col-hostname:has(.identity-row-status) {width:230px!important;min-width:210px!important;max-width:260px!important;}
html[data-theme="light"] .identity-needs-review,html[data-theme="light"] .identity-archive-notice.needs-review strong {color:var(--status-warning);}
@media(max-width:650px){.identity-archive-notice {align-items:flex-start;flex-direction:column;gap:10px;}}

.identity-earnings {display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;margin-top:12px;padding-top:10px;border-top:1px solid var(--panel-border);font-size:.8rem;color:var(--muted);}
.identity-earnings strong {font-size:1rem;color:var(--text);margin-left:6px;}
.identity-earnings>span {overflow-wrap:anywhere;}
.machine-identity-dialog [data-action-note] {margin:0;}
.machine-identity-dialog [data-suggestions] {margin-top:24px;}


/* Current GPU capacity belongs to Machine Overview and filters the detailed table. */
.machine-capacity-overview {
  --capacity-occupied: var(--green); --capacity-free: var(--yellow);
  --capacity-offline: var(--red); --capacity-unlisted: #64748b; --capacity-unknown: #a78bfa;
  margin: 18px 0 22px; font-variant-numeric: tabular-nums;
}
.machine-capacity-overview[hidden], .machine-capacity-overview [hidden] { display: none !important; }
.capacity-heading, .capacity-history-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.capacity-heading h3 { font-size: 15px; margin: 0; }
.capacity-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.capacity-heading button { font-size: 12px; padding: 7px 10px; }
.capacity-legend { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.capacity-legend button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); }
.capacity-legend i { width: 8px; height: 8px; border-radius: 50%; }
.capacity-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; }
.capacity-groups .capacity-tile { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 11px 10px; text-align: left; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); color: var(--text); }
.capacity-tile:hover, .capacity-tile[aria-pressed="true"], .capacity-legend button[aria-pressed="true"] { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); }
.capacity-tile:focus-visible, .capacity-legend button:focus-visible, .capacity-plot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.capacity-ring { width: 80px; height: 80px; display: block; }
.capacity-ring text { fill: var(--text); font-family: inherit; font-size: 17px; font-weight: 600; }
.capacity-ring .capacity-denominator { fill: var(--muted); font-size: 12px; font-weight: 400; }
.capacity-ring .capacity-ring-unit { fill: var(--muted); font-size: 9px; font-weight: 400; }
.capacity-copy { min-width: 0; }
.capacity-copy strong { display: block; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.capacity-copy small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.capacity-availability { display: block; font-size: 11px; line-height: 1.5; margin-top: 6px; }
.capacity-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 10px 0 0; }
.capacity-history { border-top: 1px solid var(--panel-border); padding-top: 14px; margin-top: 18px; }
.capacity-history-heading strong { font-size: 13px; overflow-wrap: anywhere; }
.capacity-history-heading > span { color: var(--muted); font-size: 11px; }
.capacity-plot { width: 100%; height: 150px; display: block; margin-top: 10px; }
.capacity-plot text { fill: var(--muted); font-family: inherit; font-size: 10px; }
.capacity-gridline { stroke: var(--panel-border); stroke-dasharray: 3 4; }
.capacity-line { stroke: var(--blue); stroke-width: 2; fill: none; }
.capacity-area { fill: var(--blue); opacity: .10; }
.capacity-point { fill: var(--blue); }
[data-capacity-history] { position: relative; }
.capacity-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  width: max-content; max-width: calc(100% - 16px); padding: 8px 11px;
  border: 1px solid var(--panel-border); border-radius: 9px;
  background: var(--surface-raised, #0c1728); color: var(--text);
  box-shadow: var(--shadow); font-size: 11px; line-height: 1.4;
}
.capacity-tooltip strong { display: block; color: var(--blue); font-size: 16px; font-variant-numeric: tabular-nums; }
.capacity-tooltip span { display: block; margin-top: 2px; color: var(--muted); }
.capacity-history-readout { font-size: 11px; color: var(--muted); min-height: 17px; margin: 2px 0 0; }
.capacity-no-history { display: grid; place-items: center; min-height: 100px; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 640px) { .capacity-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) {
  .capacity-groups .capacity-tile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 10px 7px; }
  .capacity-copy strong { min-height: 34px; }
  .capacity-legend { gap: 5px; }
  .capacity-legend button { font-size: 11px; padding: 7px; }
}
@media (pointer: coarse) { .capacity-legend button, .capacity-heading button { min-height: 44px; } }
.capacity-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.capacity-heading .capacity-legend { margin: 0; }
.capacity-heading { margin-bottom: 14px; }
.capacity-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#machines-panel { scroll-margin-top: calc(var(--app-topbar-height, 64px) + 16px); }

.capacity-actions button { border: 1px solid var(--panel-border); border-radius: 999px; background: var(--panel); color: var(--text); font-family: inherit; cursor: pointer; }
.capacity-actions button:hover { border-color: var(--blue); color: var(--blue); }
.capacity-actions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* An account administrator's message is distinct from the global beta notice. */
:is(.session-toolbar, .session-notices) .dashboard-account-notice {flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);border-radius:10px;background:color-mix(in srgb,var(--blue) 8%,transparent);font-size:13px;line-height:1.5;}
:is(.session-toolbar, .session-notices) .dashboard-account-notice strong {color:var(--blue);}
:is(.session-toolbar, .session-notices) .dashboard-account-notice span {white-space:pre-line;margin:0;overflow-wrap:anywhere;}
:is(.session-toolbar, .session-notices) .dashboard-account-notice[hidden] {display:none;}
.gpu-price-chart-controls {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:8px 0;}
.gpu-price-chart-controls .segmented-control {display:flex;gap:4px;}
.gpu-price-chart-controls button {padding:5px 10px;font-size:.76rem;font-family:inherit;background:var(--panel);color:var(--text);border:1px solid var(--panel-border);border-radius:999px;cursor:pointer;}
.gpu-price-chart-controls button[aria-pressed="true"] {background:var(--accent-soft,#213a59);border-color:var(--accent,#60a5fa);}
.gpu-price-chart-caption {font-size:.7rem;color:var(--muted);}
#trend-price-legend {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;font-size:.75rem;}
#trend-price-legend .price-series-item {display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:center;min-width:0;}
#trend-price-legend i {width:16px;}
#trend-price-legend strong {white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums;}
#trend-price-legend .price-series-name {min-width:0;overflow-wrap:anywhere;}
@media(max-width:540px){#trend-price-legend{grid-template-columns:1fr;}}

/* Dashboard components added after the original theme adapters. */
html[data-theme="light"] .machine-capacity-overview {
  --capacity-occupied: var(--status-success);
  --capacity-free: var(--status-warning);
  --capacity-offline: var(--status-danger);
  --capacity-unlisted: var(--status-neutral);
  --capacity-unknown: #71568e;
}
html[data-theme="light"] :is(.hour-label, .hour-day-label, .month-forecast-day) { color: var(--text-muted); }
html[data-theme="light"] :is(.earnings-summary-estimate strong, .month-forecast-summary-estimate strong) { color: var(--status-warning); }
html[data-theme="light"] .identity-archive-notice { background: var(--surface-secondary); }
html[data-theme="light"] .identity-archive-notice.needs-review { background: var(--status-warning-bg); }
html[data-theme="light"] :is(.settings-field, .settings-section, .settings-note) { border-color: var(--border-subtle); }
html[data-theme="light"] :is(.settings-field input:not([type="checkbox"]), .settings-field select, .settings-field textarea) {
  background: var(--control-bg); color: var(--text); border-color: var(--border-strong);
}
html[data-theme="light"] body :is(.inline-profile-link, .manage-users-link, .breakdown-gpu-filter, .breakdown-metric-button, .management-user-name, .modal-close) {
  color: var(--action); background: transparent; border-color: transparent;
}
html[data-theme="light"] body .language-selector button { background: transparent; border-color: transparent; }
html[data-theme="light"] body .language-selector button:is(:hover, [aria-pressed="true"]) {
  background: var(--state-selected); border-color: var(--action);
}
html[data-theme="light"] .vast-help-tooltip { border-color: var(--border-strong); box-shadow: var(--elevation-overlay); }

/* Keep historical labels legible; only the estimated bars carry a softer tint. */
html[data-theme="light"] .synthetic-history-wrap { opacity: 1; }
html[data-theme="light"] .synthetic-history-wrap .hour-bar { opacity: .82; }

/* Machines: distinct table densities and a metric-led card view. */
#machines-panel [hidden] { display: none !important; }
#machines-panel .machines-scroll { overflow-x: auto !important; }
#machines-panel .machines-scroll:not(.compact-density) td { padding: 14px 9px !important; font-size: .85rem !important; line-height: 1.4; }
#machines-panel .machines-scroll:not(.compact-density) .gpu-slot { width: 24px !important; height: 24px !important; font-size: .72rem !important; }
#machines-panel .machines-scroll.compact-density td { padding: 5px 6px !important; font-size: .74rem !important; line-height: 1.15; }
#machines-panel .machines-scroll.compact-density .machine-hostname-cell > .machine-submeta:not(.identity-row-status) { display: none; }
#machines-panel .machines-scroll.compact-density .machine-gpu-cell .machine-submeta { display: none; }
#machines-panel .machines-scroll.compact-density .gpu-slot { width: 17px !important; height: 17px !important; margin-right: 1px !important; font-size: .61rem !important; }
#machines-panel .machines-scroll.compact-density :is(.status-pill,.dc-pill,.listed-pill,.verification-pill,.report-badge) { padding: 2px 5px !important; font-size: .65rem !important; transform: none; }
#machines-panel .machines-scroll.compact-density .delta-flat { display: none; }
.machine-card-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.machine-card-controls label { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.machine-card-controls :is(select,button) { font-size: .8rem; }
.machine-card-hint { color: var(--muted); font-size: .76rem; line-height: 1.5; margin: 10px 0 14px; }
.machine-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 12px; }
.machine-card { min-width: 0; border: 1px solid var(--border-subtle, rgba(148,163,184,.2)); background: var(--surface-raised, rgba(15,23,42,.45)); border-radius: 14px; padding: 14px; cursor: pointer; }
@media(hover:hover) and (pointer:fine){.machine-card:hover { border-color: var(--blue); }}
.machine-card:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.machine-card.is-hot, .machine-card.has-error, .machine-card.low-reliability { border-color: var(--red); }
.machine-card header { display: flex; align-items: flex-start; gap: 9px; }
.machine-card-identity { flex: 1; min-width: 0; font-size: .85rem; font-weight: 650; overflow-wrap: anywhere; }
.machine-card-gpu { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; margin-top: 4px; }
.machine-card .machine-submeta { font-size: .73rem; font-weight: 400; }
.machine-card .delta-flat { display: none; }
.machine-card-visual { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 142px; }
.machine-donut { position: relative; flex: 0 0 120px; height: 120px; }
.machine-donut svg { width: 100%; height: 100%; }
.machine-donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.machine-donut strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.machine-donut strong small { display: inline; margin-left: 1px; font-size: .8rem; font-weight: 400; }
.machine-donut small { font-size: .69rem; color: var(--muted); }
.machine-ring-D { stroke: #25b777; } .machine-dot-D { background: #25b777; }
.machine-ring-R { stroke: #639cf3; } .machine-dot-R { background: #639cf3; }
.machine-ring-I { stroke: #edb341; } .machine-dot-I { background: #edb341; }
.machine-ring-X { stroke: #bd777b; } .machine-dot-X { background: #bd777b; }
.machine-ring-unknown,.machine-ring-track { stroke: #586779; } .machine-dot-unknown { background: #586779; }
.machine-slot-legend { display: grid; gap: 6px; min-width: 82px; }
.machine-slot-legend > span { display: flex; gap: 9px; align-items: center; font-size: .8rem; }
.machine-slot-legend i { height: 8px; width: 8px; border-radius: 50%; }
.machine-slot-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.machine-card-comparisons { min-height: 142px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.machine-card-comparisons small { color: var(--muted); font-size: .72rem; }
.machine-comparison > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; margin-bottom: 6px; }
.machine-comparison strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.machine-meter { height: 6px; background: var(--surface-inset, rgba(148,163,184,.15)); border-radius: 4px; overflow: hidden; }
.machine-meter i { height: 100%; display: block; border-radius: inherit; background: var(--blue); }
.machine-meter .realized { background: var(--green); } .machine-meter .hot { background: var(--red); }
.machine-disk-values { display: grid; gap: 12px; color: var(--muted); font-size: .74rem; }
.machine-disk-values strong { display: block; color: var(--text); margin-top: 3px; }
.machine-card-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .71rem; margin-bottom: 12px; }
.machine-card-facts b { color: var(--text); margin-left: 3px; }
.machine-card-reliability.is-low {color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);border-radius:5px;padding:2px 5px;margin:-2px -5px;}
.machine-card-reliability.is-low b {color:inherit;}
.machine-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle,rgba(148,163,184,.15)); font-size: .7rem; }
.machine-card footer > div { display: flex; align-items: center; gap: 5px; margin-right: auto; }
.machine-card-open { padding: 4px 8px; font-size: .73rem; }
@media (max-width: 600px) { .machine-card-controls label { margin-left: 0; } }

.trend-card-header.trend-util-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 45%); align-items: start; }
.trend-util-header > div { min-width: 0; }
.trend-util-header > div .muted { font-size: .76rem; line-height: 1.5; }
.trend-util-header #trend-util-gpu-select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .trend-card-header.trend-util-header { grid-template-columns: 1fr; } }

.month-forecast-panel [hidden] { display: none !important; }
.earnings-history-toggle { margin: 4px 0 18px; }
#weekly-history-view { position: relative; }
.weekly-history-summary { display: flex; flex-wrap: wrap; gap: 18px 36px; padding: 12px 0 18px; }
.weekly-history-summary > span { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .78rem; }
.weekly-history-summary strong { font-size: 1.5rem; color: var(--text); }
.weekly-history-summary > span:first-child strong { color: var(--green); }
.weekly-history-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin: 12px 0; }
.weekly-history-legend span { display: flex; gap: 5px; align-items: center; }
.weekly-history-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.weekly-history-scroll { overflow-x: auto; padding: 24px 0 8px; }
.weekly-history-bars { display: grid; gap: 1px; height: 255px; }
.weekly-history-column { display: flex; flex-direction: column; min-width: 0; }
.weekly-history-bar { display: flex; flex-direction: column-reverse; justify-content: flex-start; position: relative; width: 100%; height: 215px; min-height: 0; border: 0; border-radius: 0; padding: 0; background: transparent !important; }
.weekly-history-bar i { display: block; width: 100%; flex-shrink: 0; }
.weekly-history-bar:is(:hover,:focus-visible) { outline: 1px solid var(--blue); outline-offset: 1px; }
.weekly-history-date { font-size: .63rem; color: var(--muted); white-space: nowrap; margin-top: 10px; }
.weekly-history-column:last-child .weekly-history-date { align-self: end; text-align: right; }
.weekly-history-bar .gpu,.weekly-history-legend .gpu { background: var(--chart-gpu, #eb8700); }
.weekly-history-bar .storage,.weekly-history-legend .storage { background: var(--chart-storage, #ffc347); }
.weekly-history-bar .bandwidth,.weekly-history-legend .bandwidth { background: var(--chart-bandwidth, #e98ed2); }
.weekly-history-bar .total { background: var(--blue); }
.weekly-history-bar.incomplete i,.weekly-history-legend .incomplete { background-image: repeating-linear-gradient(135deg,transparent 0 3px,rgba(148,163,184,.5) 3px 5px); }
.weekly-history-bar .missing { height: 3px; background-color: var(--muted); }
.weekly-history-tooltip { position: absolute; z-index: 15; pointer-events: none; max-width: min(320px,100%); display: grid; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-subtle, #334155); background: var(--surface-raised, #0b1524); color: var(--text); font-size: .78rem; box-shadow: 0 8px 24px #0003; }
.billing-period-column .billing-history-table { min-width: 680px; }
.billing-history-table .billing-money-col { white-space: nowrap; font-variant-numeric: tabular-nums; }

.machine-card-controls select, #machine-card-select-all, #machine-card-unselect-all, .machine-card-open {
  appearance: auto; font: inherit; font-size: .76rem; line-height: 1.4;
  color: var(--text); background: var(--control-bg, #101d30); border: 1px solid var(--border-subtle, #334155);
  padding: 6px 10px; border-radius: 9px;
}
#machine-card-select-all:hover, #machine-card-unselect-all:hover, .machine-card-open:hover { border-color: var(--blue); color: var(--blue); }
.machine-card footer { min-height: 38px; }

.billing-components-note { color: var(--muted); font-size: .73rem; line-height: 1.5; margin: 10px 0; }

.machine-presentation-controls { display: flex; flex-wrap: wrap; margin: 0; }
@media(max-width:600px) { .machine-presentation-controls { justify-content: flex-start; } }

/* Product sections keep their accent in headings, sign-in and access notices. */
:root { --product-gold: #f3bc4b; }
html[data-theme="light"] { --product-gold: #8a5b00; }
.dashboard-brand, .billing-master-brand, .agent-brand { color: var(--product-gold); white-space: nowrap; }

/* Compact dashboard identity with a dedicated, extensible module navigation row. */
.hero.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 20px;
}
.dashboard-hero .dashboard-heading { min-width: 0; }
.dashboard-hero h1.dashboard-brand-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em;
}
.dashboard-hero .hero-copy { margin: 5px 0 0; min-height: 0; font-size: .75rem; line-height: 1.45; }
.dashboard-hero .hero-credit { display: inline; margin: 0 0 0 8px; font-size: .7rem; white-space: nowrap; }
/* Four module links fit alongside the identity at desktop widths; longer labels
 * wrap naturally on smaller screens without competing with refresh controls. */
.dashboard-app-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.dashboard-app-links > :is(a, button) { flex: 0 1 auto; max-width: 100%; min-height: 34px; padding: 7px 12px; font-size: .82rem; line-height: 1.25; overflow-wrap: anywhere; }
.dashboard-hero-footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-width: 0; border-top: 1px solid var(--panel-border); padding-top: 10px; }
.dashboard-hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.dashboard-hero #last-updated { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.dashboard-hero .health-badge { font-size: .7rem; padding: 5px 10px; }
.dashboard-hero .hero-meta,
.dashboard-hero .hero-meta:has(.refresh-pause-control) { flex: 0 1 auto; gap: 6px; min-width: 0; margin-inline-start: auto; }
.dashboard-hero .hero-meta > .refresh-pause-control { flex: 0 1 auto; gap: 6px; }
.dashboard-hero .hero-meta button { font-size: .75rem; min-height: 32px; height: auto; padding: 6px 11px; line-height: 1.3; }
.dashboard-hero .refresh-pause-status { font-size: .7rem; }
@media (max-width: 1100px) {
  .hero.dashboard-hero { grid-template-columns: minmax(0, 1fr); }
  .dashboard-app-links { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .hero.dashboard-hero { padding: 14px !important; gap: 10px !important; }
  .dashboard-hero h1.dashboard-brand-title { font-size: clamp(1.2rem, 5.9vw, 1.5rem) !important; line-height: 1.2 !important; }
  .dashboard-hero .hero-meta { gap: 6px !important; }
  .dashboard-hero #last-updated { flex: 1 0 100% !important; }
  .dashboard-hero .hero-meta > .refresh-pause-control { justify-content: flex-start; }
}

/* Shared controls and title rows keep both history tables aligned as copy wraps. */
.billing-history-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; }
.billing-history-controls .billing-period-tabs { flex: 0 0 auto; margin: 0 !important; }
.billing-history-controls .billing-components-note { flex: 1 1 420px; margin: 0; }
.billing-history-controls + .billing-history-grid { margin-top: 12px; }
.billing-history-grid .billing-history-title { min-height: 0 !important; margin: 0 0 8px !important; }
.billing-history-grid .billing-history-wrap { margin-top: 0; }
.billing-payout-table { position: relative; min-width: 0; }
.billing-payout-table .billing-payout-lock { inset: 0; }
.billing-payout-table .billing-history-table { min-width: 0; }
@media (min-width: 1001px) {
  .billing-history-controls + .billing-history-grid { grid-template-rows: auto auto !important; row-gap: 8px !important; }
  .billing-history-grid > :is(.billing-period-column, .billing-payout-column),
  .billing-history-grid .billing-period-panel.active {
    display: grid !important;
    grid-template-rows: subgrid;
    grid-row: 1 / span 2 !important;
  }
  .billing-history-grid .billing-history-title { margin: 0 !important; align-self: end; }
}


/* History is available on demand without moving a card's chart or footer. */
.machine-card { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.machine-card-history { display: inline-block; vertical-align: middle; margin-inline-start: 4px; font-weight: 400; }
.machine-card-history > summary { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--border-strong, #52647b); border-radius: 50%; color: var(--blue); cursor: pointer; list-style: none; }
.machine-card-history > summary::-webkit-details-marker { display: none; }
.machine-card-history > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.machine-card-history-content { position: absolute; inset-inline: 14px; top: 46px; z-index: 3; padding: 12px; border: 1px solid var(--border-strong, #52647b); border-radius: 10px; background: var(--panel, #101c2d); color: var(--text); box-shadow: var(--elevation-overlay, 0 8px 24px #0006); font-size: .75rem; line-height: 1.6; }

/* Keep the rendered history in place until a new range is ready. */
#modal-backdrop > .modal-content { position: relative; }
#modal-backdrop .modal-body { overflow-anchor: none; }
#modal-backdrop.is-history-loading .modal-body > :not(.modal-tabs):not(#modal-tab-charts),
#modal-backdrop.is-history-loading #modal-tab-charts > :not(.modal-toolbar) { opacity: .4; filter: blur(1px); pointer-events: none; }
.machine-history-loading { position: absolute; inset: 100px 20px 20px; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.machine-history-loading[hidden] { display: none; }
.machine-history-loading > span { max-width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 12px; background: var(--panel, #101c2d); color: var(--text); border: 1px solid var(--border-strong, #52647b); box-shadow: var(--elevation-overlay, 0 8px 24px #0006); }

.machine-history-loading > span { display: flex; align-items: center; gap: 10px; opacity: 1; }
.machine-history-loading > span::before { content: ''; flex: 0 0 18px; height: 18px; border: 2px solid var(--border-strong, #52647b); border-top-color: var(--blue); border-radius: 50%; animation: machine-history-spin .8s linear infinite; }
@keyframes machine-history-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .machine-history-loading > span::before { animation: none; } }

/* Shared chart renderer: readable isolated samples and legend strokes by day. */
html[data-theme="light"] :is(.trend-legend line, .chart-single-point) { filter: brightness(.76) saturate(.85); }

/* Data capability policy: whole disabled features leave the grid, including old cached DOM. */
body[data-stream-machines_occupancy="off"] :is(.fleet-summary-panel,#machines-panel,[data-requires-stream="machines_occupancy"],#gpu-breakdown-panel,.recent-alerts-panel,.poll-monitor-panel,#modal-backdrop,#reports-modal-backdrop,.dashboard-hero-status){display:none!important}
body[data-stream-market_benchmarks="off"] :is(.gpu-market-guide,#trend-util-note,[data-market-tooltip]){display:none!important}
body[data-stream-earnings_finance="off"] :is(.earnings-forecast-panel,.month-forecast-panel,.billing-overview-panel,.fleet-overview-earnings,#finance-entry,#finance-link,#modal-earnings-breakdown,#modal-earnings-status,#earnings-chart-title,#earnings-chart-note,#earnings-chart,.topbar-currency,.display-currency-control,[data-requires-stream="earnings_finance"]){display:none!important}
body[data-stream-earnings_finance="off"] .fleet-overview-performance{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-stream-market_benchmarks="off"] .gpu-price-compare{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}

body[data-stream-earnings_finance="off"] :is(.dashboard-currency-group,.machine-card-comparison.realized){display:none!important}

/* Presentation setting only: automatic collection and existing authorization stay independent. */
body[data-manual-refresh="off"] [data-manual-refresh-control]{display:none!important}

/* The future agent entry is hidden until an authenticated capability enables it. */
body:not([data-jdai-sos="on"]) #jdai-sos-entry { display: none !important; }
.jdai-sos-preview { max-width: 760px; margin-block: 36px; }
.jdai-sos-preview .panel { padding: 28px; }
.jdai-sos-preview p { color: var(--muted); line-height: 1.65; }
.jdai-sos-preview .eyebrow { color: var(--blue); }

/* Compact product shortcuts use the same gold accent as the module names. */
#finance-entry, #jdai-sos-entry {
  color: var(--product-gold);
  background: var(--surface-secondary);
  border-color: color-mix(in srgb, var(--product-gold) 65%, var(--border-subtle));
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
#finance-entry:hover, #jdai-sos-entry:hover {
  color: var(--product-gold);
  background: color-mix(in srgb, var(--product-gold) 10%, var(--surface-secondary));
  border-color: var(--product-gold);
}
#finance-entry > span, #jdai-sos-entry > span { white-space: nowrap; }
.jdai-sos-preview .dcmedic-expansion { font-size: .9rem; margin-top: 8px; }

/* Machine workspace: views and display mode start at the left, then search,
   filters and local warning limits. No separate settings dialog. */
.machine-workspace-controls { border: 1px solid var(--panel-border); border-radius: 12px; background: var(--surface-inset); padding: 12px; margin: 14px 0 10px; }
.machine-browse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.machine-browse-row .machine-archive-actions { justify-content: flex-start; }
.machine-browse-row #archive-review-button { order: 1; }
.machine-browse-row #filter-search { flex: 1 1 180px; min-width: 150px; margin-inline-start: auto; }
.machine-browse-row .machine-view-tabs { margin: 0; }
#machines-panel .machine-filters { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; overflow: visible; margin: 12px 0; padding: 0; }
#machines-panel .machine-filters .filter-select { flex: 1 1 110px; width: auto; min-width: 100px; }
#machines-panel .machine-filters #filter-gpu-select { flex-basis: 150px; }
.machine-thresholds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-top: 1px solid var(--panel-border); padding-top: 10px; color: var(--muted); font-size: 12px; }
#machine-thresholds-title { color: var(--text); font-weight: 600; }
.machine-thresholds label { display: inline-flex; align-items: center; gap: 8px; }
.machine-thresholds .filter-input { flex: none; width: 68px; min-height: 30px; padding: 5px 7px; font-variant-numeric: tabular-nums; }
.machine-thresholds small { font-size: 11px; }
@media (max-width: 640px) {
  .machine-workspace-controls { padding: 10px; }
  .machine-browse-row { align-items: stretch; }
  .machine-browse-row #filter-search { flex-basis: 100%; margin-inline-start: 0; }
  .machine-thresholds label { flex: 1 1 100%; justify-content: space-between; }
  .machine-thresholds small { flex-basis: 100%; }
}

/* Stable first load and earnings selection transitions. */
.dashboard-initial-loading { position: fixed; inset: 170px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: min(18vh,160px); z-index: 20; pointer-events: none; }
.dashboard-initial-loading[hidden], .selection-loading-indicator[hidden] { display: none; }
.dashboard-loading-label, .selection-loading-indicator { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--control-border); border-radius: 24px; background: var(--surface-secondary); color: var(--text); box-shadow: 0 4px 20px #0002; font-size: 13px; }
.dashboard-loading-label::before, .selection-loading-indicator::before { content: ''; flex: none; width: 17px; height: 17px; border: 2px solid var(--control-border); border-top-color: var(--product-gold); border-radius: 50%; animation: dashboard-loading-spin .8s linear infinite; }
.dashboard-starting { min-height: 85vh; }
.dashboard-starting > :not(.warning-banner) { filter: blur(3px); opacity: .38; pointer-events: none; }
.dashboard-starting .fleet-summary-panel { min-height: 280px; }
.dashboard-starting .earnings-forecast-panel { min-height: 420px; }
:is(.earnings-forecast-panel,.month-forecast-panel,.billing-overview-panel) { position: relative; }
.selection-loading-indicator { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); z-index: 5; pointer-events: none; white-space: nowrap; }
.selection-pending :is(.earnings-summary-grid,.component-summary,.forecast-chart-title-row,.month-forecast-chart-scroll,.hourly-chart,#weekly-history-view,.billing-period-grid,.billing-history-grid) { filter: blur(2px); opacity: .5; pointer-events: none; }
.earnings-scope-summary-line { flex-wrap: nowrap; }
.earnings-scope-summary { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earnings-scope-toggle { margin-inline-start: 0; }
@keyframes dashboard-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dashboard-loading-label::before, .selection-loading-indicator::before { animation: none; } }

/* Per-source collection state replaces the ambiguous global healthy badge. */
.dashboard-hero-status { flex-wrap: wrap; min-width: 0; }
.datastream-status { max-width: 100%; }
.datastream-status summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; cursor: pointer; list-style: none; }
.datastream-status summary::-webkit-details-marker { display: none; }
.datastream-label { color: var(--text); font-size: 12px; font-weight: 600; }
.datastream-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.datastream-pill { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--panel-border); border-radius: 6px; padding: 4px 7px; background: var(--surface-inset); color: var(--muted); font-size: 10px; }
.datastream-pill b { font-weight: 500; }
.datastream-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.datastream-pill.stream-ok { color: var(--green); }
.datastream-pill.stream-error { color: var(--red); }
.datastream-pill:is(.stream-stale,.stream-waiting) { color: var(--yellow); }
.datastream-pill.stream-collecting { color: var(--blue); }
.datastream-pill.stream-disabled { border-style: dashed; }
.datastream-status[open] { flex-basis: 100%; }
.datastream-status[open] .datastream-label { color: var(--product-gold); }
.datastream-details { padding-top: 10px; font-size: 12px; }
.datastream-scope { color: var(--muted); margin: 0 0 10px; }
.datastream-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.datastream-detail { min-width: 0; border: 1px solid var(--panel-border); border-radius: 8px; padding: 12px; background: var(--surface-inset); }
.datastream-detail > strong,.datastream-detail > span { display: block; }
.datastream-detail > span { color: var(--product-gold); margin: 4px 0; }
.datastream-detail p { color: var(--muted); margin: 8px 0; }
.datastream-detail dl { margin: 10px 0 0; }
.datastream-detail dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.datastream-detail dt { color: var(--muted); }
.datastream-detail dd { margin: 0; }
.datastream-detail .datastream-disabled-note { color: var(--text); }
@media (max-width:1000px) { .datastream-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .datastream-detail-grid { grid-template-columns: minmax(0,1fr); } .datastream-pill { font-size: 11px; } }

/* Only the empty, never-authenticated shell is visible behind sign-in. */
body[data-session-ready="false"][data-dashboard-placeholder="true"] .app-shell { display: block !important; filter: blur(6px); opacity: .38; pointer-events: none; user-select: none; min-height: 100vh; }
body[data-session-ready="false"][data-dashboard-placeholder="true"] .session-gate { position: fixed; z-index: 45; inset: calc(50dvh + var(--app-topbar-height,80px) / 2) auto auto 50%; transform: translate(-50%,-50%); width: min(430px,calc(100vw - 32px)); max-height: calc(100dvh - var(--app-topbar-height,80px) - 32px); overflow: auto; margin: 0; padding: 26px; border: 1px solid var(--control-border); border-radius: 16px; background: var(--surface-secondary); box-shadow: 0 20px 80px #0005; }
body[data-dashboard-placeholder="true"] .session-gate h1 { font-size: 23px; line-height: 1.4; margin: 0 0 12px; }
body[data-dashboard-placeholder="true"] .session-login { display: grid; gap: 16px; }
body[data-dashboard-placeholder="true"] .session-login label { display: grid; gap: 7px; }
body[data-dashboard-placeholder="true"] .session-login input { width: 100%; min-width: 0; }
body[data-dashboard-placeholder="true"] .dashboard-initial-loading { display: none; }
body[data-dashboard-placeholder="true"] .fleet-summary-panel { min-height: 280px; }

.session-entry-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:18px; margin-top:12px; border-top:1px solid var(--panel-border); font-size:13px; }
.session-entry-links a { color:var(--action); text-underline-offset:4px; }

body[data-session-ready="false"] > #dashboard-shell { display:none !important; }
body[data-session-ready="false"][data-dashboard-placeholder="true"] > #dashboard-shell { display:block !important; }
.datastream-info { display:inline-grid; place-items:center; width:14px; height:14px; border:1px solid currentColor; border-radius:50%; font-size:10px; font-family:serif; }

/* Explain the public market-data restriction without marking own-account streams as broken. */
.datastream-pill.market-collection-blocked { color:var(--status-danger); border-color:var(--status-danger); background:var(--status-danger-bg); }
.datastream-detail.market-collection-blocked > span,
.datastream-detail.market-collection-blocked .datastream-disabled-note { color:var(--status-danger); font-weight:600; }

.product-data-notice { border-left:3px solid var(--action); background:var(--surface-secondary); padding:12px 16px; margin:20px 0; font-size:12px; line-height:1.6; }
.product-data-notice strong { display:block; color:var(--text); margin-bottom:6px; }
.product-data-notice p { color:var(--muted); margin:0; }
.session-gate .product-data-notice { padding:10px 12px; margin:18px 0 0; font-size:11px; }

.client-access-notice a { display:inline-block; margin-top:8px; color:var(--action); font-weight:600; text-underline-offset:3px; }

/* Highlight only the aggregate overview, never a named administrator or user. */
.session-toolbar .session-view-scope:has(option.session-whole-account:checked) {
  color: var(--status-warning);
}
.session-toolbar .session-view-scope select:has(> option.session-whole-account:checked) {
  color: var(--status-warning);
  border-color: var(--status-warning);
  background: var(--status-warning-bg);
  box-shadow: inset 0 0 0 1px var(--status-warning);
}
.session-toolbar .session-view-scope option { color: var(--text); background: var(--bg); }

.electricity-confirm { display:flex; align-items:flex-start; gap:.65rem; margin:1rem 0; }
.electricity-confirm input[type="checkbox"] { flex:0 0 auto; width:auto; margin-top:.25rem; }
.electricity-calibration-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.electricity-estimates .notice { margin-block:1rem; }

/* Restricted users have no account-wide payout panel or placeholder column. */
body[data-dashboard-role="user"] .billing-payout-column { display:none !important; }
body[data-dashboard-role="user"] .billing-history-grid { grid-template-columns:minmax(0,1fr) !important; }

/* One stable fleet plot; tabs and the legend never move the next section. */
.fleet-trends-panel [hidden] { display:none !important; }
.fleet-trend-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;background:var(--surface-inset);border:1px solid var(--panel-border);border-radius:12px;margin:16px 0 12px;}
.fleet-trend-tabs button {min-width:0;min-height:44px;padding:9px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;}
.fleet-trend-tabs button:hover {color:var(--text);background:var(--panel);}
.fleet-trend-tabs button[aria-selected="true"] {color:var(--blue);background:var(--accent-soft,var(--panel));border-color:var(--blue);}
.fleet-trend-tabs button:focus-visible {outline:2px solid var(--blue);outline-offset:2px;}
.fleet-trend-content {display:grid;grid-template-rows:52px 100px 300px;gap:12px;padding:16px;border:1px solid var(--panel-border);border-radius:12px;background:var(--surface-inset);min-width:0;}
.fleet-trend-toolbar {display:flex;align-items:center;min-width:0;color:var(--muted);font-size:.8rem;overflow:auto;}
.fleet-trend-toolbar > * {width:100%;min-width:0;}
.fleet-trend-util-controls {display:flex;align-items:center;justify-content:space-between;gap:16px;}
#trend-util-note {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.fleet-trend-util-controls select {width:min(45%,320px);min-width:140px;flex-shrink:0;}
.fleet-trend-readings {min-width:0;overflow:auto;scrollbar-gutter:stable;}
.fleet-trend-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.fleet-trend-reading {padding:10px 14px;border-left:2px solid var(--panel-border);min-width:0;}
.fleet-trend-reading > span {display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.76rem;}
.fleet-trend-reading i {width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fleet-trend-reading strong {display:block;font-size:1.55rem;line-height:1.4;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--text);}
#fleet-trend-chart {width:100%;height:300px;min-width:0;}
.fleet-trends-panel .gpu-price-chart-controls {margin:0;}
.fleet-trends-panel #trend-price-legend {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;padding:8px 0;}
.fleet-trends-panel .gpu-price-chart-caption {white-space:nowrap;font-variant-numeric:tabular-nums;}
.fleet-trend-meta {height:36px;line-height:18px;font-size:.72rem;margin:12px 0 0;overflow:auto;}
body:not([data-dashboard-role="superadmin"]) :is(.poll-monitor-panel,.db-admin-section) {display:none !important;}
@media(max-width:700px){
  .fleet-trend-tabs {grid-template-columns:repeat(2,minmax(0,1fr));}
  .fleet-trend-tabs button {font-size:.78rem;}
  .fleet-trend-content {grid-template-rows:64px 116px 260px;padding:12px;gap:10px;}
  .fleet-trend-util-controls {flex-direction:column;align-items:stretch;gap:6px;}
  .fleet-trend-util-controls select {width:100%;min-width:0;}
  .fleet-trend-summary {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .fleet-trend-reading {padding:6px 10px;}
  .fleet-trend-reading strong {font-size:1.25rem;margin-top:2px;}
  .fleet-trends-panel #trend-price-legend {grid-template-columns:repeat(2,minmax(0,1fr));font-size:.7rem;gap:10px;}
  .fleet-trends-panel #trend-price-legend .price-series-item {grid-template-columns:12px minmax(0,1fr);gap:3px 6px;}
  .fleet-trends-panel #trend-price-legend strong {grid-column:2;}
  #fleet-trend-chart {height:260px;}
  .fleet-trend-meta {height:54px;}
}

/* Shared, keyboard-accessible close control for expandable workspaces. */
button.panel-close-button,.management-modern button.panel-close-button {display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:0;border:1px solid var(--panel-border);border-radius:50%;background:var(--surface-inset);color:var(--muted);font-size:24px;font-weight:400;line-height:1;cursor:pointer;}
button.panel-close-button:hover {color:var(--text);border-color:var(--action);background:var(--state-selected);}
button.panel-close-button:focus-visible {outline:2px solid var(--action);outline-offset:3px;}
.datastream-status {position:relative;}
.datastream-status[open]>summary {min-height:38px;padding-inline-end:50px;}
.datastream-close {position:absolute;inset-inline-end:0;top:0;}

body:not([data-dashboard-role="superadmin"]) .recent-alerts-panel {grid-column:1 / -1 !important;}

.earnings-summary-card[data-forecast-difference="positive"] strong { color:var(--status-success); }
.earnings-summary-card[data-forecast-difference="negative"] strong { color:var(--status-danger); }
.earnings-summary-card[data-forecast-difference="neutral"] strong { color:var(--muted); }

/* Status badges share the amount's semantic colour without hiding the source note. */
.earnings-summary-grid .earnings-summary-value {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.earnings-summary-badge {display:inline-flex;align-items:center;flex:none;padding:5px 9px;border:1px solid currentColor;border-radius:999px;font-size:.68rem;font-weight:800;line-height:1.15;letter-spacing:.08em;background:color-mix(in srgb,currentColor 10%,transparent);}
.earnings-summary-badge[hidden] {display:none;}
.earnings-summary-actual .earnings-summary-badge {color:var(--green);}
.earnings-summary-card[data-forecast-difference="positive"] .earnings-summary-badge {color:var(--status-success);}
.earnings-summary-card[data-forecast-difference="negative"] .earnings-summary-badge {color:var(--status-danger);}

.earnings-nav .current-period-button {width:auto;height:auto;padding:7px 12px;}
.earnings-nav {flex-wrap:wrap;}
.earnings-summary-card .comparison-unavailable {font-size:1.15rem;color:var(--muted);}

/* Every section retains a predictable, compact heading when folded. */
[data-collapse-key] > .panel-title-row {position:relative;padding-right:140px;min-height:34px;}
.panel-collapse-button {position:absolute;right:0;top:0;white-space:nowrap;max-width:138px;}
[data-collapse-key].panel-collapsed {min-height:0 !important;align-self:start;}
[data-collapse-key].panel-collapsed > :not(.panel-title-row) {display:none !important;}
[data-collapse-key].panel-collapsed > .panel-title-row {margin-bottom:0;}
[data-collapse-key].panel-collapsed > .panel-title-row > :not(:first-child):not(.panel-collapse-button):not(.panel-collapse-hint):not(.alerts-count-summary) {display:none !important;}
[data-collapse-key].panel-collapsed > .panel-title-row > :first-child:not(h2) > :not(h2):not(.panel-collapse-hint) {display:none !important;}
@media(max-width:600px) {
  [data-collapse-key] > .panel-title-row {padding-right:0;padding-top:42px;}
  [data-collapse-key].panel-collapsed > .panel-title-row {padding-top:0;padding-right:140px;}
}

.machine-comparison.temperature-yellow {--temperature-color:var(--yellow);}
.machine-comparison.temperature-orange {--temperature-color:#ef8b23;}
.machine-comparison.hot {--temperature-color:var(--red);}
.machine-comparison:is(.temperature-yellow,.temperature-orange,.hot) strong {color:var(--temperature-color);}
.machine-comparison:is(.temperature-yellow,.temperature-orange,.hot) .machine-meter i {background:var(--temperature-color);}

.period-navigation {display:inline-flex;align-items:center;gap:8px;max-width:100%;}
.period-navigation .current-period-button {flex:0 1 auto;}

.chart-history-start-warning {fill:none;stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke;}
.chart-axis text.chart-history-date-warning, html[data-theme="light"] .chart-axis text.chart-history-date-warning {fill:var(--red);}
.modal-chart-wrap:has(> .machine-history-coverage-note) {height:auto;}
.modal-chart-wrap:has(> .machine-history-coverage-note) > svg {display:block;}
.machine-history-coverage-note {margin:8px 12px 12px;color:var(--red);font-size:.8rem;line-height:1.5;}

.machine-revenue-average {font-weight:600;color:var(--green);font-size:.85rem;}

.panel-collapse-hint {color:var(--gold,#f6b642);font-size:.8rem;font-weight:600;margin-inline:12px;}
.panel-collapse-hint[hidden] {display:none;}
.panel-collapsed > .panel-title-row {cursor:pointer;}
@media(hover:hover) and (pointer:fine){.panel-collapsed:hover {border-color:var(--blue);}}
.alerts-count-summary {font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.panel-title-row:has(.alerts-count-summary) {flex-wrap:wrap;}
@media(max-width:700px){.panel-collapse-hint{display:block;margin:4px 0;}.panel-collapsed > .panel-title-row{align-items:flex-start;}.alerts-count-summary{width:100%;}}

/* Compact charts with clear emphasis, rounded lines and quiet grid lines. */
:is(.chart,.trend-chart,#fleet-trend-chart) text {font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:11px;}
:is(.chart-line,.trend-line) {stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5;}
:is(.chart-axis,.trend-axis) line {stroke:var(--panel-border);stroke-dasharray:none;opacity:.5;}
.chart-interior-date {opacity:.7;}
.chart-annotation text {font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;fill:var(--text);paint-order:stroke;stroke:var(--surface-inset);stroke-width:5px;stroke-linejoin:round;}
.chart-annotation-dot {stroke:var(--surface-inset);stroke-width:2;fill:var(--blue);}
.chart-last-point {stroke:var(--surface-inset);stroke-width:1.5;}
.fleet-trend-content {grid-template-rows:44px 80px 260px 36px;background:transparent;border:0;padding:4px 0;gap:8px;}
#fleet-trend-chart {height:260px;}
.fleet-trend-reading {border:1px solid var(--panel-border);border-radius:10px;background:var(--surface-inset);text-align:left;font:inherit;color:var(--text);}
button.fleet-trend-reading {cursor:pointer;}
button.fleet-trend-reading[aria-pressed="true"] {border-color:var(--blue);background:var(--accent-soft);}
.fleet-trend-reading strong {font-size:1.35rem;}
.fleet-history-coverage {margin:0;min-height:36px;font-size:.75rem;line-height:18px;color:var(--red,#f18c91);}
.fleet-trends-panel #trend-price-legend {padding:0;gap:6px 18px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;}
@media(max-width:700px){.fleet-trend-content{grid-template-rows:64px 110px 230px 54px;}#fleet-trend-chart{height:230px;}.fleet-history-coverage{min-height:54px;}.fleet-trend-reading strong{font-size:1.15rem;}}

.earnings-summary-actual strong {font-size:1.75rem;}
.earnings-summary-badge {font-size:.8rem;padding:6px 10px;letter-spacing:.06em;}

/* Shared saving/action feedback appears above dialogs without taking focus. */
.app-save-feedback {position:fixed;inset:auto 16px 20px auto;margin:0;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 18px;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel,#142330);color:var(--text,#eef6ff);font:600 15px/1.5 system-ui,sans-serif;box-shadow:0 6px 24px #0005;z-index:2147483647;pointer-events:none;}
.app-save-feedback[hidden] {display:none;}
.app-save-spinner {display:inline-block;flex:0 0 20px;width:20px;height:20px;box-sizing:border-box;border:2px solid var(--panel-border,#526879);border-top-color:var(--product-gold,#f4bf50);border-radius:50%;animation:app-save-spin .8s linear infinite;}
@keyframes app-save-spin {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.app-save-spinner{animation:none;}}
@media(max-width:600px){.app-save-feedback{inset:auto 12px 12px 12px;max-width:none;width:auto;font-size:14px;}}

@media(hover:none),(pointer:coarse){
 :is(.panel,.panel-finance,.kpi,.machine-card,.finance-scroll,tr,svg){-webkit-tap-highlight-color:transparent;}
 .machine-card{cursor:default;}
 .machine-card:not(:has(:focus-visible)){outline:none;}
 .help-info-icon{min-width:24px;min-height:24px;touch-action:manipulation;}
}

/* Superadmin product catalog: shared DCMetrik surfaces and compact controls. */
.commercial-management { max-width: 1180px; margin-inline: auto; }
.session-management .commercial-editor { display: block; min-width: 0; color: var(--text-primary); }
.commercial-editor-heading { position: sticky; top: 64px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 6px 20px #00000012; }
.commercial-editor-heading h3 { margin: 0; }
.commercial-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.commercial-actions [role="status"] { font-size: .85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.commercial-actions button { white-space: nowrap; min-height: 44px; }
.commercial-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 20px; }
.commercial-section-title { margin: 8px 0 -8px; font-size: 1.05rem; }
.commercial-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.commercial-plan { min-width: 0; padding: 22px; border: 1px solid var(--panel-border); border-radius: 16px; background: var(--surface-secondary); }
.commercial-plan h4 { margin: 0 0 14px; font-size: 1rem; }
.commercial-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; color: var(--text-secondary); }
.commercial-hero strong { font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.2; letter-spacing: -.04em; color: var(--text-primary); }
.commercial-editor .commercial-control { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--panel-border); font-size: .86rem; }
.commercial-control > span:first-child { min-width: 0; max-width: 58%; overflow-wrap: anywhere; color: var(--text-secondary); }
.commercial-control-value { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; flex-shrink: 0; max-width: 52%; }
.commercial-editor .commercial-control input { box-sizing: border-box; width: 84px; min-width: 0; min-height: 42px; padding: 8px; text-align: right; border-radius: 9px; background: var(--surface-raised); border: 1px solid var(--panel-border); color: var(--text-primary); }
.commercial-unit { font-size: .75rem; color: var(--text-muted); }
.commercial-general { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 28px; row-gap: 12px; }
.commercial-general h4 { grid-column: 1/-1; margin-bottom: 0; }
.commercial-editor .commercial-mode { display: flex; flex-direction: column; gap: 10px; align-self: start; font-size: .86rem; }
.commercial-mode select { width: 100%; max-width: 360px; min-height: 44px; }
.commercial-help { margin: 10px 0 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.55; }
.commercial-visibility { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.commercial-visibility .commercial-help { flex-basis: 100%; margin: 0; }
.commercial-editor .commercial-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; position: relative; min-height: 44px; cursor: pointer; }
.commercial-toggle input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; }
.commercial-toggle-track { width: 44px; height: 26px; border-radius: 20px; background: var(--text-muted); border: 1px solid var(--panel-border); box-sizing: border-box; transition: background .15s; }
.commercial-toggle-track::after { content: ''; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: white; transition: transform .15s; }
.commercial-toggle input:checked + .commercial-toggle-track { background: var(--action); }
.commercial-toggle input:checked + .commercial-toggle-track::after { transform: translateX(18px); }
.commercial-toggle input:focus-visible + .commercial-toggle-track { outline: 2px solid var(--action); outline-offset: 3px; }
.commercial-visibility-badge { padding: 4px 9px; border-radius: 20px; background: var(--surface-raised); border: 1px solid var(--panel-border); font-size: .75rem; color: var(--text-secondary); }
.commercial-visibility-badge[data-visible="true"] { color: var(--action); border-color: var(--action); }
.commercial-billing > .commercial-control { max-width: 480px; margin-top: 14px; }
.commercial-billing-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.commercial-billing-preview p { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px; background: var(--surface-raised); border-radius: 10px; font-size: .85rem; line-height: 1.6; }
.commercial-agent { margin-top: 18px; }
.commercial-agent h5 { margin: 0; font-size: .9rem; }
.commercial-agent .commercial-help { margin-bottom: 14px; }
@media (max-width: 850px) {
 .commercial-plan-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
 .commercial-editor-heading { top: 60px; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
 .commercial-editor-heading h3 { font-size: 1.05rem; }
 .commercial-actions { justify-content: space-between; }
 .commercial-general, .commercial-billing-preview { grid-template-columns: minmax(0,1fr); }
 .commercial-plan { padding: 16px; }
 .commercial-editor .commercial-control { gap: 8px; }
 .commercial-control-value { max-width: 46%; }
 .commercial-editor .commercial-control input { width: 76px; }
}

.commercial-subscriptions { margin-top: 28px; }
.commercial-account-picker { max-width: 760px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--surface-secondary); }
.commercial-account-picker > summary { min-height: 24px; overflow-wrap: anywhere; font-weight: 600; }
.commercial-account-picker > label { margin-top: 16px; font-size: .85rem; }
.commercial-account-picker input { width: 100%; box-sizing: border-box; min-height: 44px; }
.commercial-account-results { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; margin-top: 12px; }
.commercial-account-results button { text-align: left; min-height: 44px; overflow-wrap: anywhere; }
.commercial-account-results button[aria-pressed="true"] { border-color: var(--action); background: var(--state-selected); }
.commercial-account-paging { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.commercial-account-paging[hidden] { display: none; }
.commercial-account-editor { margin-top: 20px; }
.commercial-account-editor > section { padding: 16px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--surface-secondary); }
.commercial-account-editor h4 { margin-top: 0; overflow-wrap: anywhere; }

/* Shared entry presentation; authentication behavior stays in the session controller. */
.auth-eyebrow { color: var(--action); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.session-gate:has(.auth-login-layout) { box-sizing: border-box; width: min(1000px,calc(100% - 32px)); margin: 5vh auto; padding: 32px; }
.auth-login-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.auth-login-intro h1 { font-size: clamp(1.8rem,3.5vw,2.8rem); line-height: 1.12; letter-spacing: -.035em; margin: 16px 0; }
.auth-login-intro > p:not(.auth-eyebrow) { color: var(--text-secondary); line-height: 1.65; }
.auth-login-products { display: grid; gap: 16px; margin: 28px 0; }
.auth-login-products > div { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--action); }
.auth-login-products span { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.auth-login-form { min-width: 0; padding: 24px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--surface-secondary); }
.auth-login-form h2 { font-size: 1.25rem; margin: 0 0 24px; }
.auth-login-form .session-login { gap: 18px; }
.auth-login-form input { box-sizing: border-box; width: 100%; min-height: 46px; }
.auth-login-form button[type="submit"] { background: var(--action); color: var(--on-action); font-weight: 700; min-height: 46px; }
.auth-login-privacy { margin-top: 16px; font-size: .8rem; color: var(--text-secondary); }
.auth-login-privacy summary { cursor: pointer; }
@media(max-width:700px) {
 .session-gate:has(.auth-login-layout) { padding: 20px; margin: 24px auto; }
 .auth-login-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .auth-login-products { display: none; }
 .auth-login-form { padding: 18px; }
}

.subscription-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
.session-management .subscription-form { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 18px; margin: 0; padding: 18px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--surface-raised); min-width: 0; }
.subscription-form header { display: grid; gap: 10px; }
.subscription-form h5 { font-size: 1.05rem; margin: 0; }
.subscription-status { font-size: .74rem; color: var(--text-secondary); background: var(--surface-secondary); border-radius: 20px; padding: 5px 9px; justify-self: start; }
.subscription-fields { display: grid; gap: 14px; padding: 0; border: 0; margin: 0; min-width: 0; }
.subscription-fields label { font-size: .78rem; }
.subscription-fields input,.subscription-fields select { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 44px; }
.subscription-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.session-management .subscription-presets button { min-height: 34px; padding: 6px 9px; font-size: .73rem; border-color: var(--panel-border); background: var(--surface-secondary); color: var(--text-secondary); }
.session-management .subscription-presets button:hover { border-color: var(--action); color: var(--text-primary); }
.subscription-fields .commercial-help { margin: 0; font-size: .74rem; }
.subscription-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: auto; }
.subscription-actions [role="status"] { font-size: .75rem; color: var(--text-secondary); }
.session-management .subscription-actions button { padding: 8px 14px; min-height: 40px; background: var(--action); color: var(--on-action); border-color: transparent; }
@media(max-width:1000px) { .subscription-grid { grid-template-columns: minmax(0,1fr); } }

/* Subscription overview stays compact; editing lives in the modal top layer. */
.subscription-directory-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 16px 0; }
.subscription-directory-toolbar label { flex: 1; max-width: 520px; font-size: .8rem; }
.subscription-directory-toolbar input { width: 100%; box-sizing: border-box; min-height: 44px; }
.subscription-directory-wrap { max-height: 510px; overflow: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.subscription-directory { width: 100%; min-width: 0; border-collapse: collapse; text-align: left; font-size: .8rem; }
.subscription-directory th { position: sticky; top: 0; padding: 12px; background: var(--surface-secondary); color: var(--text-secondary); z-index: 1; font-size: .74rem; }
.subscription-directory td { padding: 14px 12px; border-top: 1px solid var(--panel-border); vertical-align: middle; white-space: normal; }
.subscription-directory td:first-child { max-width: 230px; overflow-wrap: anywhere; }
.subscription-directory td:first-child strong,.subscription-directory td:first-child small { display: block; }
.subscription-directory small { color: var(--text-muted); font-size: .69rem; line-height: 1.5; }
.subscription-directory td:first-child small { margin-top: 5px; }
.subscription-directory td:last-child { text-align: right; }
.subscription-summary-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.subscription-summary-cell small { flex-basis: 100%; }
.subscription-state-badge { display: inline-block; font-size: .72rem; padding: 4px 8px; border-radius: 20px; background: var(--status-neutral-bg); color: var(--status-neutral); }
.subscription-summary-cell:is([data-state="active"],[data-state="trial"],[data-state="legacy"]) .subscription-state-badge { background: var(--status-success-bg); color: var(--status-success); }
.subscription-summary-cell[data-state="expired"] .subscription-state-badge { background: var(--status-danger-bg); color: var(--status-danger); }
.subscription-summary-cell[data-state="scheduled"] .subscription-state-badge { background: var(--status-warning-bg); color: var(--status-warning); }
.subscription-unlimited { font-size: 1.3rem; line-height: 1; color: var(--text-primary); }
.commercial-subscription-dialog { box-sizing: border-box; position: fixed; inset: 0; margin: auto; width: min(1120px,calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 90dvh; padding: 24px; color: var(--text-primary); border: 1px solid var(--control-border); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--elevation-overlay); overflow: auto; }
.commercial-subscription-dialog:not([open]) { display: none; }
.commercial-subscription-dialog::backdrop { background: var(--overlay-scrim); backdrop-filter: blur(4px); }
.subscription-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: -24px; z-index: 3; padding: 14px 0; margin-top: -14px; background: var(--surface-raised); }
.subscription-dialog-header h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.subscription-dialog-header button { flex-shrink: 0; }
.subscription-dialog-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 8px 0; }
.subscription-dialog-overview > div { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 10px; font-size: .8rem; }
.commercial-subscription-dialog .commercial-account-editor > section { padding: 0; border: 0; background: transparent; }
.commercial-subscription-dialog .subscription-grid { margin-top: 16px; }
@media(max-width:700px) {
 .subscription-directory-toolbar { display: grid; gap: 6px; }
 .subscription-directory thead { display: none; }
 .subscription-directory,.subscription-directory tbody { display: block; }
 .subscription-directory tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 12px; gap: 12px 8px; border-bottom: 1px solid var(--panel-border); }
 .subscription-directory td { display: block; padding: 0; border: 0; min-width: 0; }
 .subscription-directory td:first-child { grid-column: 1/-1; max-width: none; }
 .subscription-directory td[data-label]::before { content: attr(data-label); display: block; font-size: .65rem; margin-bottom: 7px; color: var(--text-muted); }
 .subscription-directory td:last-child { grid-column: 1/-1; }
 .subscription-directory td:last-child button { width: 100%; }
 .subscription-state-badge { padding: 4px 6px; font-size: .65rem; }
 .commercial-subscription-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: 94dvh; padding: 16px; }
 .subscription-dialog-header { top: -16px; }
 .subscription-dialog-header h3 { font-size: .9rem; }
 .subscription-dialog-overview { grid-template-columns: minmax(0,1fr); }
 .subscription-dialog-overview > div { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* The dashboard placeholder must not force the two-column login into 430px. */
body[data-session-ready="false"][data-dashboard-placeholder="true"] .session-gate:has(.auth-login-layout) {
 width: min(1000px,calc(100vw - 32px)); margin: 0; padding: 24px;
}
.session-gate:has(.auth-login-layout) { container-type: inline-size; }
.auth-login-layout { grid-template-columns: minmax(0,1.1fr) minmax(300px,1fr); gap: 28px; }
.auth-login-intro { min-width: 0; }
.auth-login-form button[type="submit"] { white-space: nowrap; }
.auth-login-form [role="status"]:empty { display: none; }
@container(max-width:700px) {
 .auth-login-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .auth-login-form { order: -1; padding: 18px; }
 .auth-login-products { display: none; }
 .auth-login-intro h1 { font-size: 1.4rem; }
 .auth-login-intro > p:not(.auth-eyebrow) { margin-bottom: 0; font-size: .85rem; }
}
@media(max-width:480px) {
 body[data-session-ready="false"][data-dashboard-placeholder="true"] .session-gate:has(.auth-login-layout) { width: calc(100vw - 20px); padding: 14px; }
 .auth-login-form { padding: 14px; }
}

/* Public-product switches share the same control and badge baseline. */
.commercial-general .commercial-mode { grid-column: 1 / -1; }
.commercial-general .commercial-visibility { display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: start; align-items: center; gap: 8px 12px; }
.commercial-general .commercial-visibility .commercial-help { grid-column: 1 / -1; }
.commercial-general .commercial-toggle { margin: 0; font-size: .85rem; }
.commercial-toggle-track { flex: 0 0 44px; }
.commercial-general .commercial-visibility-badge { justify-self: end; white-space: nowrap; }
.commercial-pricing [hidden] { display: none; }

/* A disconnected account keeps the full dashboard and a clear setup action. */
.account-connection-notice {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 26px; margin:20px 0 24px;
  border:1px solid var(--panel-border); border-inline-start:4px solid var(--status-danger);
  border-radius:var(--radius-panel,22px); background:var(--panel);
  color:var(--text); font-size:16px; font-weight:500; line-height:1.6;
}
.account-connection-notice > span { flex:1; margin:0; min-width:0; }
.account-connection-notice .account-connection-action {
  flex:none; padding:12px 22px; min-height:46px;
  border:1px solid var(--status-danger); border-radius:999px;
  color:var(--status-danger); background:color-mix(in srgb,var(--status-danger) 12%,transparent);
  font:inherit; font-weight:650; line-height:1.4; cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.account-connection-notice .account-connection-action:hover {
  background:color-mix(in srgb,var(--status-danger) 22%,transparent);
}
.account-connection-notice .account-connection-action:focus-visible { outline:2px solid var(--status-danger); outline-offset:3px; }
@media(max-width:640px) {
  .account-connection-notice { align-items:flex-start; flex-direction:column; gap:16px; padding:20px; }
  .account-connection-notice .account-connection-action { max-width:100%; white-space:normal; }
}