/* ===================== Кабинет клиента (mobile-first) ===================== */
.cab { background: var(--bg); }
.cab__head {
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; position: sticky; top: 0; z-index: 10;
}
.cab__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; color: var(--on-brand); }
.cab__logout { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: 14px; }

.cab__tabs { display: flex; gap: 4px; background: var(--brand-2); padding: 0 12px; position: sticky; top: 50px; z-index: 9; overflow-x: auto; }
.cab__tabs a { color: rgba(255, 255, 255, .8); font-weight: 600; font-size: 14px; padding: 12px 14px; white-space: nowrap; border-bottom: 3px solid transparent; }
.cab__tabs a.is-active { color: #fff; border-bottom-color: var(--accent); }

.cab__main { max-width: 560px; margin: 0 auto; padding: 22px 18px 50px; }
.cab__h1 { font-size: 23px; margin-bottom: 18px; }
.cab__empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; color: var(--muted); }

.cab__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cab__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); }
.cab__item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cab__item-name { font-weight: 600; }
.cab__item-meta { font-size: 14px; }
.cab__item-pay { display: inline-block; margin-top: 10px; color: var(--accent-2); font-weight: 600; }
.cab__item-pay:hover { text-decoration: underline; }

.cab__cta { margin-top: 26px; display: grid; gap: 12px; }
.cab__btn { display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; border: none; width: 100%; font: inherit; font-weight: 600; padding: 15px; border-radius: var(--radius); }
.cab__btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-cta); }
.cab__btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px rgba(31, 138, 76, .26); }
.cab__btn--ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

/* auth */
.cab__auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.cab__auth-card { background: var(--surface); border-radius: 18px; padding: clamp(26px, 6vw, 38px); width: 100%; max-width: 400px; box-shadow: var(--shadow); text-align: center; }
.cab__auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; }
.cab__logo { font-size: 22px; font-weight: 700; }
.cab__auth-sub { color: var(--muted); margin: 4px 0 22px; font-size: 14px; }
.cab__auth-card .field { text-align: left; }
.cab__auth-note { color: var(--muted); font-size: 13px; margin-top: 14px; }
.cab__alert { background: var(--exp-bg); color: var(--exp-fg); padding: 12px 14px; border-radius: var(--radius); font-weight: 600; font-size: 14px; margin-bottom: 16px; }

.cab__center { text-align: center; padding: 30px 0; }
.cab__check { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; animation: pop .45s ease; }
.cab__check svg { width: 38px; height: 38px; }