/* ═══════════════════════════════════════════════════════════════
   Account, login and admin.

   These are product screens, not marketing, and they follow the
   calm-ui constraints rather than the landing page's: a tight type
   scale topping out at the page title, quiet shadows with no tint,
   small radii on containers, and one primary action per screen.
   The brand colour still identifies the product, but it stops
   doing decorative work here.

   The landing page is deliberately the opposite — expressive, big,
   animated — because it has a different job. Same palette, two
   different densities.
   ═══════════════════════════════════════════════════════════════ */

.page { padding: 44px 0 80px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.page-head p { margin: 0; color: var(--tx-3); font-size: 15px; }

/* ── auth card ────────────────────────────────────────────── */

.auth-wrap { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 20px; }
.auth {
  width: 100%; max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--bg-200), var(--bg-100));
  padding: 32px 28px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.auth h1 { margin: 16px 0 6px; font-size: 21px; font-weight: 800; }
.auth .sub { color: var(--tx-3); font-size: 14.5px; margin: 0 0 26px; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-100); border: 1px solid var(--line); margin-bottom: 26px; }
.tabs button {
  flex: 1 1 0; padding: 9px 10px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--tx-3); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tabs button.on { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; }
.tabs button:active { transform: scale(.97); }
.inp:disabled { opacity: .5; cursor: not-allowed; }

/* ── fields ───────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--tx-3); margin-bottom: 7px; }
.inp {
  width: 100%; padding: 12px 15px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-lift);
  background: rgba(0,0,0,.32);
  color: var(--tx);
  font: inherit; font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inp::placeholder { color: var(--tx-4); }
.inp:focus {
  outline: none;
  border-color: var(--red-lift);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), .16);
}
select.inp { cursor: pointer; }

.msg {
  border-radius: var(--r-card);
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 16px;
  border-inline-start: 3px solid;
  display: none;
}
.msg.on { display: block; }
.msg.err  { background: rgba(255,138,61,.09);  border-color: var(--amber);  color: #FFA76B; }
.msg.ok   { background: rgba(61,220,151,.09);  border-color: var(--ok);  color: #7DECBA; }
.msg.info { background: rgba(125,211,252,.08); border-color: var(--info);    color: var(--info); }

.auth-foot { margin-top: 20px; text-align: center; font-size: 14px; color: var(--tx-4); }
.auth-foot a { color: var(--red-soft); font-weight: 700; }

/* ── cards & tables ───────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 30px; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-100);
  padding: 20px 22px;
}
.card .k { font-size: 12.5px; color: var(--tx-3); font-weight: 600; margin-bottom: 6px; }
.card .v { font-family: var(--num); font-size: 20px; font-weight: 700; color: var(--tx); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-100);
  overflow: hidden;
  margin-bottom: 22px;
}
.panel-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-hd h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.panel-hd .grow { flex: 1 1 auto; }
.panel-bd { padding: 20px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--tx-4); font-weight: 700; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .18s var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.02); }
.table-wrap { overflow-x: auto; }

.pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800;
}
.pill.pending  { background: rgba(255,210,77,.14); color: var(--yellow); }
.pill.paid     { background: rgba(61,220,151,.14); color: var(--ok); }
.pill.rejected { background: rgba(255,138,61,.13); color: var(--amber); }
.pill.revoked  { background: rgba(255,138,61,.13); color: var(--amber); }
.pill.active   { background: rgba(61,220,151,.14); color: var(--ok); }

.key-box {
  font-family: var(--num);
  font-size: 15px; font-weight: 700;
  letter-spacing: .04em;
  background: rgba(0,0,0,.4);
  border: 1px dashed var(--line-lift);
  border-radius: var(--r-card);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 12px;
  direction: ltr;
}
.key-box .grow { flex: 1 1 auto; }

.empty { text-align: center; padding: 40px 20px; color: var(--tx-4); font-size: 14.5px; }

.row-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── pay steps ────────────────────────────────────────────── */

.pay-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.pay-step { display: flex; gap: 13px; align-items: flex-start; }
.pay-step .n {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--num); font-size: 12px; font-weight: 700;
  background: rgba(var(--red-rgb), .15); color: var(--red-soft);
  border: 1px solid rgba(var(--red-rgb), .3);
}
.pay-step p { margin: 0; font-size: 14.5px; color: var(--tx-2); line-height: 1.75; }
.pay-step b { color: var(--tx); }

.amount-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 18px; margin-bottom: 18px;
  border-radius: var(--r-card);
  background: rgba(var(--red-rgb), .08);
  border: 1px solid rgba(var(--red-rgb), .22);
}
.amount-line b { font-family: var(--num); font-size: 20px; font-weight: 700; color: var(--tx); }
.amount-line span { color: var(--tx-3); font-size: 14px; }

@media (max-width: 620px) {
  .page { padding: 28px 0 60px; }
  .auth { padding: 28px 22px 26px; }
  th, td { padding: 10px; }
}