.billing-layout {
      display: grid;
      gap: 18px;
    }

    .billing-panel[hidden] {
      display: none;
    }

    .billing-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .billing-summary-item {
      padding: 14px;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #f8fafc;
    }

    .billing-summary-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .billing-summary-item strong {
      display: block;
      margin-top: 5px;
      color: var(--text);
      font-size: 22px;
      line-height: 1.2;
    }

    .billing-settings-panel {
      padding: 16px;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #fff;
    }

    .billing-settings-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }

    .billing-settings-header h2 {
      margin: 0;
      font-size: 18px;
    }

    .billing-checkbox-field {
      display: flex;
      min-height: 44px;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #dbe3ef;
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      background: #f8fafc;
    }

    .billing-checkbox-field input {
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
    }

    .billing-table {
      min-width: 1380px;
    }

    .billing-money {
      font-weight: 900;
      white-space: nowrap;
    }

    .billing-tariff-dashboard {
      display: grid;
      gap: 16px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .billing-tariff-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #fff;
    }

    .billing-tariff-hero h2 {
      margin: 0;
      font-size: 22px;
    }

    .billing-tariff-hero .notice-help {
      margin: 6px 0 0;
    }

    .billing-settings-compact {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      min-width: min(100%, 520px);
    }

    .billing-settings-compact .billing-checkbox-field {
      min-height: 40px;
      padding: 8px 10px;
    }

    .billing-settings-compact input[type="number"] {
      width: 86px;
      min-height: 34px;
      padding: 0 9px;
    }

    .billing-tariff-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .billing-tariff-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 220px;
      gap: 12px;
      align-items: end;
      padding: 14px;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #fff;
    }

    .billing-tariff-tabs {
      display: inline-flex;
      justify-self: start;
      gap: 6px;
      padding: 5px;
      border: 1px solid #dce4f1;
      border-radius: 12px;
      background: #f8fafc;
    }

    .billing-tariff-tab {
      min-height: 38px;
      padding: 0 13px;
      border: 0;
      border-radius: 9px;
      color: #5c6678;
      background: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .billing-tariff-tab.active {
      color: #fff;
      background: var(--primary);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .billing-tariff-groups {
      display: grid;
      gap: 14px;
    }

    .billing-tariff-card {
      overflow: hidden;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(31, 41, 55, 0.05);
    }

    .billing-tariff-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 15px 16px 12px;
      border-bottom: 1px solid #edf1f7;
    }

    .billing-tariff-card-header h3 {
      margin: 0;
      font-size: 17px;
    }

    .billing-tariff-card-header p,
    .billing-tariff-note {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .billing-tariff-note {
      padding: 0 16px 14px;
    }

    .billing-tariff-table-wrap {
      overflow: hidden;
    }

    .billing-tariff-table {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .billing-tariff-table th,
    .billing-tariff-table td {
      padding: 12px 16px;
      border-bottom: 1px solid #edf1f7;
      text-align: left;
      vertical-align: middle;
    }

    .billing-tariff-table th {
      color: #667085;
      background: #f8fafc;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .billing-tariff-table th:last-child,
    .billing-tariff-table td:last-child {
      text-align: right;
    }

    .billing-tariff-table tr:hover td {
      background: #fbfdff;
    }

    .billing-tariff-table tr:last-child td {
      border-bottom: 0;
    }

    .billing-tariff-service {
      display: grid;
      gap: 4px;
      min-width: 0;
      font-weight: 900;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .billing-tariff-service small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .billing-tariff-price {
      color: var(--text);
      font-size: 16px;
      font-weight: 950;
      white-space: nowrap;
    }

    .billing-tariff-chip,
    .billing-tariff-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .billing-tariff-chip {
      color: #344054;
      background: #eef2f7;
    }

    .billing-tariff-status.active {
      color: #067647;
      background: #dcfae6;
    }

    .billing-tariff-status.inactive {
      color: #475467;
      background: #eef2f7;
    }

    .billing-tariff-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      white-space: nowrap;
    }

    .billing-tariff-empty {
      padding: 18px;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      color: var(--muted);
      background: #fff;
      font-size: 13px;
      font-weight: 800;
    }

    .billing-tariff-history {
      display: grid;
      gap: 8px;
      margin-top: 16px;
      padding: 12px;
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      background: #f8fafc;
    }

    .billing-tariff-history h3 {
      margin: 0;
      font-size: 14px;
    }

    .billing-tariff-history-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      color: #42526b;
      font-size: 13px;
      font-weight: 800;
    }

    .billing-price-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .billing-price-unit {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .billing-breakdown {
      display: grid;
      gap: 4px;
      min-width: 220px;
      color: #42526b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    .billing-status-pill,
    .billing-meter-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .billing-status-pill.paid {
      color: #067647;
      background: #dcfae6;
    }

    .billing-status-pill.unpaid {
      color: #b54708;
      background: #fff4d6;
    }

    .billing-status-pill.empty {
      color: #475467;
      background: #eef2f7;
    }

    .billing-meter-pill.complete {
      color: #067647;
      background: #dcfae6;
    }

    .billing-meter-pill.partial {
      color: #175cd3;
      background: #eaf1ff;
    }

    .billing-meter-pill.missing {
      color: #b42318;
      background: #fee4e2;
    }

    .billing-action-group {
      display: grid;
      min-width: 150px;
      gap: 8px;
    }

    .billing-action-button {
      min-height: 36px;
      padding: 0 12px;
      border: 0;
      border-radius: 8px;
      color: #fff;
      background: var(--primary);
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .billing-action-button.secondary {
      color: #334155;
      background: #e6edf5;
    }

    .billing-action-button:disabled {
      cursor: wait;
      opacity: 0.65;
    }