.payments-page { min-height:calc(100vh - 88px); padding:34px clamp(32px,5vw,76px) 72px; background:#fff; }
.payments-catalog { width:100%; border:1px solid var(--cab-line-strong); border-radius:12px; background:#fff; }
.payments-catalog > header { display:flex; min-height:92px; padding:20px 28px; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--cab-line); }
.payments-catalog h2 { margin:0; color:var(--cab-ink); font-size:27px; line-height:1.2; letter-spacing:-.02em; }
.payments-catalog header p { margin:6px 0 0; color:var(--cab-muted); font-size:15px; }

.payments-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px 28px; gap:16px; border-bottom:1px solid var(--cab-line); background:var(--cab-surface); }
.payments-filter { display:grid; gap:7px; color:var(--cab-copy); font-size:13px; font-weight:650; }
.payments-filter select { width:100%; height:44px; padding:0 34px 0 12px; border:1px solid var(--cab-line-strong); border-radius:8px; background:#fff; color:var(--cab-ink); font:400 15px/1.3 'Finlandica Text',sans-serif; }
.payments-filter select:focus { border-color:var(--cab-brand); outline:3px solid var(--cab-focus); }

.payments-table { width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; }
.payments-table th { padding:12px 18px; border-bottom:1px solid var(--cab-line-strong); color:var(--cab-muted); font-size:13px; font-weight:700; letter-spacing:.03em; }
.payments-table td { padding:18px; border-bottom:1px solid var(--cab-line); vertical-align:middle; color:var(--cab-ink); font-size:15px; }
.payments-table tr:last-child td { border-bottom:0; }
.payments-table th:nth-child(1) { width:14%; }
.payments-table th:nth-child(2) { width:22%; }
.payments-table th:nth-child(3) { width:13%; }
.payments-table th:nth-child(4) { width:14%; }
.payments-table th:nth-child(5) { width:16%; }
.payments-table th:nth-child(6) { width:11%; }
.payments-table th:nth-child(7) { width:10%; }
.payments-product { color:var(--cab-ink); font-weight:650; }
.payments-date,.payments-period { color:var(--cab-copy); }

.payments-status-badge { display:inline-flex; min-height:30px; padding:0 10px; align-items:center; border:1px solid var(--cab-line-strong); border-radius:999px; color:var(--cab-copy); font-size:13px; font-weight:700; white-space:nowrap; }
.payments-status-badge.is-paid { border-color:#8dd8c1; color:#087856; }
.payments-status-badge.is-awaiting { border-color:#e6c87a; color:#9a6100; }
.payments-status-badge.is-error { border-color:#f0b3b5; color:#c40b12; }
.payments-status-badge.is-cancelled { border-color:var(--cab-line-strong); color:var(--cab-ink); }
.payments-status-badge.is-refund { border-color:var(--cab-line-strong); color:var(--cab-muted); }

.payments-actions { display:flex; align-items:center; gap:7px; }
.payments-icon-btn { position:relative; display:inline-flex; width:38px; height:38px; padding:0; align-items:center; justify-content:center; border:1px solid var(--cab-line); border-radius:8px; background:#fff; color:var(--cab-copy); cursor:pointer; transition:border-color var(--cab-fast) var(--cab-ease),background var(--cab-fast) var(--cab-ease),color var(--cab-fast) var(--cab-ease); }
.payments-icon-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.payments-icon-btn:hover { border-color:var(--cab-line-strong); background:var(--cab-surface-strong); color:var(--cab-ink); }
.payments-icon-btn:focus-visible { outline:2px solid var(--cab-brand); outline-offset:2px; }
.payments-icon-btn[data-tooltip]::after { position:absolute; z-index:5; bottom:calc(100% + 8px); left:50%; padding:7px 9px; border-radius:6px; background:var(--cab-ink); color:#fff; font-size:13px; font-weight:600; line-height:1; white-space:nowrap; content:attr(data-tooltip); opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity 160ms ease,transform 160ms ease; }
.payments-icon-btn[data-tooltip]:hover::after,.payments-icon-btn[data-tooltip]:focus-visible::after { opacity:1; transform:translate(-50%,0); }

.payments-empty { padding:48px 28px; border-top:1px solid var(--cab-line); text-align:center; }
.payments-empty h3 { margin:0; color:var(--cab-ink); font-size:25px; }
.payments-empty p { max-width:520px; margin:12px auto 0; color:var(--cab-copy); font-size:16px; line-height:1.5; }
.payments-empty .cab-primary-action { display:inline-flex; min-height:48px; margin-top:22px; padding:0 20px; align-items:center; justify-content:center; border-radius:8px; }
.payments-status { min-height:22px; margin:0; padding:14px 28px 18px; color:var(--cab-success); font-size:15px; font-weight:650; }
.payments-status:empty { display:none; }

.payments-detail,.payments-receipt { display:grid; gap:0; }
.payments-detail .payments-detail-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--cab-line); font-size:15px; }
.payments-detail .payments-detail-row:last-child { border-bottom:0; }
.payments-detail span,.payments-receipt span { color:var(--cab-muted); }
.payments-detail strong,.payments-receipt strong { color:var(--cab-ink); }
.payments-receipt { padding:20px; border:1px solid var(--cab-line-strong); border-radius:10px; background:var(--cab-surface); }
.payments-receipt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.payments-receipt-head strong { font-size:18px; }
.payments-receipt-note { margin-top:16px; padding:12px 14px; border:1px solid var(--cab-line); border-radius:8px; background:#fff; color:var(--cab-muted); font-size:13px; line-height:1.45; }

@media (max-width:1180px) {
  .payments-table,.payments-table tbody { display:block; }
  .payments-table thead { display:none; }
  .payments-table tr { display:grid; padding:22px; border-bottom:1px solid var(--cab-line); gap:12px; }
  .payments-table td { display:block; padding:0; border:0; }
  .payments-table td::before { display:block; margin-bottom:6px; color:var(--cab-muted); font-size:13px; font-weight:650; }
  .payments-table td:nth-child(1)::before { content:'Дата'; }
  .payments-table td:nth-child(2)::before { content:'Продукт'; }
  .payments-table td:nth-child(3)::before { content:'Сумма'; }
  .payments-table td:nth-child(4)::before { content:'Период'; }
  .payments-table td:nth-child(5)::before { content:'Статус'; }
  .payments-table td:nth-child(6)::before { content:'Документ'; }
  .payments-table td:nth-child(7)::before { content:'Действия'; }
}
@media (max-width:980px) {
  .payments-page { padding:26px 24px 54px; }
}
@media (max-width:640px) {
  .payments-page { padding:26px 16px 48px; }
  .payments-catalog > header { padding:20px; }
  .payments-tools { padding:18px 20px; grid-template-columns:1fr; }
  .payments-table tr { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .payments-icon-btn { transition-duration:.01ms!important; }
}