/* Shared account dialogs. Theme per app with --acc-primary / --acc-primary-hover. */
.acc-modal {
  --acc-primary: #e41827;
  --acc-primary-hover: #c8101e;
  --acc-text: #1b1e25;
  --acc-muted: #6b7280;
  --acc-border: #dcdfe4;
  --acc-green: #1d9d4b;
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--acc-text);
  font: 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: auto;
}
.acc-modal::backdrop { background: rgba(10, 12, 16, .6); }
.acc-modal *, .acc-modal *::before, .acc-modal *::after { box-sizing: border-box; }

.acc-card { position: relative; padding: 24px 22px 20px; }
.acc-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--acc-muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.acc-close:hover { background: #f1f2f4; color: var(--acc-text); }

.acc-title { margin: 0 32px 4px 0; font-size: 20px; font-weight: 800; }
.acc-subtitle { margin: 18px 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--acc-muted); }
.acc-lead { margin: 0 0 14px; color: var(--acc-muted); }
.acc-balance { margin: 0 0 14px; color: var(--acc-muted); }
.acc-balance strong { color: var(--acc-text); }

.acc-form { display: grid; gap: 12px; margin-top: 12px; }
.acc-form.is-busy { opacity: .7; }
.acc-field { display: grid; gap: 5px; }
.acc-label { font-size: 12px; font-weight: 600; color: var(--acc-muted); }
.acc-hint { font-size: 12px; color: var(--acc-muted); }
.acc-input {
  display: flex; align-items: center; height: 44px;
  border: 1px solid var(--acc-border); border-radius: 8px; background: #fff;
}
.acc-input:focus-within { border-color: var(--acc-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-primary) 18%, transparent); }
.acc-input input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px;
  border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 15px;
}
.acc-prefix { padding: 0 2px 0 12px; color: var(--acc-muted); font-weight: 600; }
.acc-input--phone input { padding-left: 8px; }

.acc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.acc-check input { width: 16px; height: 16px; accent-color: var(--acc-primary); }
.acc-check a { color: var(--acc-primary); }

.acc-error, .acc-success { margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.acc-error { background: #fdecee; color: #b4141f; }
.acc-success { background: #e8f6ee; color: #136c34; font-weight: 600; }

.acc-btn {
  height: 46px; border: 0; border-radius: 8px;
  background: var(--acc-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.acc-btn:hover:not(:disabled) { background: var(--acc-primary-hover); }
.acc-btn:disabled { cursor: progress; }
.acc-btn--inline { height: 38px; padding: 0 18px; font-size: 14px; }
.acc-btn--ghost { width: 100%; margin-top: 16px; background: #f1f2f4; color: var(--acc-text); }
.acc-btn--ghost:hover:not(:disabled) { background: #e4e6ea; }

.acc-link { padding: 0; border: 0; background: none; color: var(--acc-primary); font: inherit; font-weight: 600; cursor: pointer; }
.acc-link:hover { text-decoration: underline; }
.acc-switch { margin: 14px 0 0; text-align: center; color: var(--acc-muted); }

.acc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  margin: 14px 0 4px;
}
.acc-tabs button {
  border: 0;
  background: transparent;
  color: #6b7280;
  padding: 10px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.acc-tabs button.on { background: #97f600; color: #0e1910; }
.acc-join { gap: 0; }
.acc-join .acc-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.acc-phone { display: flex; gap: 8px; align-items: center; }
.acc-cc {
  width: 92px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  background: #fff;
  white-space: nowrap;
  font-weight: 600;
}
.acc-phone input, .acc-pass input {
  height: 44px;
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: #fff;
}
.acc-phone input { flex: 1; min-width: 0; }
.acc-phone input:focus, .acc-pass input:focus { outline: 2px solid #97f600; border-color: #97f600; }
.acc-pass { position: relative; }
.acc-pass input { width: 100%; padding-right: 64px; }
.acc-pass button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #1bd093;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.acc-ussd {
  margin: 8px 0 12px;
  font-size: 28px;
  font-weight: 800;
}
.acc-btn--join {
  width: 100%;
  margin-top: 16px;
  border-radius: 12px;
  background: #97f600;
  color: #0e1910;
}
.acc-btn--join:hover:not(:disabled) { background: #89e000; }
.acc-note { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff7e0; color: #7a5a00; font-size: 12px; }

.acc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.acc-quick button {
  height: 36px; border: 1px solid var(--acc-border); border-radius: 8px;
  background: #fff; color: var(--acc-text); font: inherit; font-weight: 600; cursor: pointer;
}
.acc-quick button:hover { border-color: var(--acc-primary); }
.acc-quick button.is-active { border-color: var(--acc-primary); background: color-mix(in srgb, var(--acc-primary) 10%, #fff); color: var(--acc-primary); }

.acc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border-radius: 10px; background: #f6f7f9;
}
.acc-summary > div { display: grid; gap: 2px; }
.acc-summary__value { font-size: 20px; font-variant-numeric: tabular-nums; }

.acc-tx { max-height: 260px; margin: 0; padding: 0; list-style: none; overflow: auto; border: 1px solid var(--acc-border); border-radius: 10px; }
.acc-tx__row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "type amount" "time after";
  gap: 1px 10px; padding: 9px 12px; border-top: 1px solid var(--acc-border); font-variant-numeric: tabular-nums;
}
.acc-tx__row:first-child { border-top: 0; }
.acc-tx__type { grid-area: type; font-weight: 600; }
.acc-tx__time { grid-area: time; font-size: 12px; color: var(--acc-muted); }
.acc-tx__amount { grid-area: amount; text-align: right; font-weight: 700; }
.acc-tx__amount.is-credit { color: var(--acc-green); }
.acc-tx__amount.is-debit { color: #b4141f; }
.acc-tx__after { grid-area: after; text-align: right; font-size: 12px; color: var(--acc-muted); }
.acc-tx__empty { padding: 14px 12px; color: var(--acc-muted); text-align: center; }

@media (max-width: 479px) {
  .acc-card { padding: 22px 16px 16px; }
}

.acc-kicker {
  margin: 0 0 8px;
  color: #a3a3a3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.acc-modal.is-deposit {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid #2a2b2e;
  border-radius: 16px;
  background: #1b1c1d;
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.acc-modal.is-deposit::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.acc-modal.is-deposit .acc-card { padding: 28px 24px 20px; }
.acc-modal.is-deposit .acc-close {
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  color: #a3a3a3;
}
.acc-modal.is-deposit .acc-close:hover { background: #2c2d30; color: #fff; }
.acc-modal.is-deposit .acc-title { margin-bottom: 8px; letter-spacing: -0.02em; }
.acc-modal.is-deposit .acc-lead,
.acc-modal.is-deposit .acc-balance,
.acc-modal.is-deposit .acc-label,
.acc-modal.is-deposit .acc-hint { color: #a3a3a3; }
.acc-modal.is-deposit .acc-balance strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.acc-modal.is-deposit .acc-input {
  height: 48px;
  border-color: #2a2b2e;
  border-radius: 12px;
  background: #141516;
  color: #fff;
}
.acc-modal.is-deposit .acc-input input { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acc-modal.is-deposit .acc-quick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acc-modal.is-deposit .acc-quick button {
  min-height: 44px;
  height: 44px;
  border-color: #2a2b2e;
  border-radius: 999px;
  background: #141516;
  color: #fff;
}
.acc-modal.is-deposit .acc-quick button:hover { border-color: #28a909; }
.acc-modal.is-deposit .acc-quick button.is-active {
  border-color: #28a909;
  background: #142616;
  color: #fff;
}
.acc-modal.is-deposit .acc-btn {
  width: 100%;
  min-height: 48px;
  height: 48px;
  border-radius: 999px;
  background: #28a909;
}
.acc-modal.is-deposit .acc-btn:hover:not(:disabled) { background: #36cb12; }
.acc-modal.is-deposit .acc-btn:disabled { opacity: 0.7; }
.acc-modal.is-deposit #acc-join-now { background: #e50539; }
.acc-modal.is-deposit #acc-join-now:hover:not(:disabled) { background: #d0021b; }
.acc-modal.is-deposit .acc-error { background: #2a1216; color: #ffb4b8; }
.acc-modal.is-deposit .acc-success { background: #142616; color: #b6f5c3; }
.acc-modal.is-deposit .acc-close:focus-visible,
.acc-modal.is-deposit .acc-btn:focus-visible,
.acc-modal.is-deposit .acc-quick button:focus-visible,
.acc-modal.is-deposit .acc-input:focus-within {
  outline: 2px solid #7eb0ff;
  outline-offset: 2px;
}
@media (prefers-reduced-transparency: reduce) {
  .acc-modal.is-deposit::backdrop {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}