/* Shared account surfaces, based on the approved login/cabinet HTML references. */
body.cab, .account-modal {
  --bg:#f4f7f4; --surface:#fff; --surface-2:#f1f7f2;
  --text-1:#17241f; --text-2:#526158; --muted:#68776f;
  --border:#e2eae4; --border-strong:#d6e1d9;
  --accent:#147a5c; --accent-soft:#e5f4e9; --accent-text:#176344; --on-accent:#fff;
  --danger-text:#963e36; --shadow:0 18px 54px #1e523411;
  --radius-sm:12px; --radius-lg:24px;
  font-family:Inter,system-ui,"Segoe UI",sans-serif;
  color:var(--text-1);
}
body.cab { margin:0; min-height:100dvh; background:radial-gradient(ellipse at 50% 0,#e4f3e7,transparent 45%),var(--bg); font-size:15px; line-height:1.5; }
body.cab *, .account-modal * { box-sizing:border-box; }
.cab-wrap { width:min(100% - 32px,780px); max-width:none; margin:auto; padding:0 0 24px; }
.cab-head { min-height:78px; margin:0; display:flex; align-items:center; gap:16px; padding-right:112px; }
.cab-brand { color:var(--text-1); font-size:20px; font-weight:800; letter-spacing:-.04em; }
.cab-brand .dot { display:none; }
.cab-brand small { display:block; margin-top:1px; font-size:11px; font-weight:550; letter-spacing:0; color:var(--muted); }
.cab-biz { display:none; }
.cab-out { margin-left:auto; min-height:44px; color:var(--muted); font-size:12px; }
body.cab .lang-switcher { top:20px; right:max(16px,calc((100vw - 780px)/2)); }
body.cab .lang-current { min-height:36px; border:1px solid var(--border); border-radius:99px; padding:8px 12px; background:#ffffffa8; color:var(--muted); font-size:12px; box-shadow:none; }
body.cab .lang-dropdown { background:#fff; border-color:var(--border); border-radius:12px; box-shadow:0 14px 34px #1e52341a; }
body.cab .lang-option { color:var(--text-2); }
body.cab .lang-option:hover { background:var(--surface-2); color:var(--text-1); }
body.cab .lang-option.active { background:var(--accent-soft); color:var(--accent); }
.cab-intro { grid-column:1/-1; padding:26px 0 6px; }
.cab-eyebrow { margin:0 0 8px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.cab-intro h1 { margin:8px 0; color:var(--text-1); font-size:clamp(30px,6vw,42px); font-weight:750; letter-spacing:-.055em; line-height:1.08; }
.cab-intro > p:last-child { margin:0; color:var(--muted); }
.cab-card { padding:22px; margin:0; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.cab-card h1, .cab-card h2 { color:var(--text-1); font-size:19px; line-height:1.3; letter-spacing:-.03em; }
.cab-card h1 { margin:15px 0 5px; }
.cab-card h2 { margin:0 0 5px; }
.cab-lead { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.cab-status { height:auto; min-height:29px; padding:6px 10px; border:1px solid #cfe8d5; border-radius:99px; background:#f0faf1; color:#287049; font-size:12px; font-weight:750; }
.cab-status.ok { background:#f0faf1; color:#287049; }
.cab-status.wait { border-color:#eadbbe; background:#fff7e8; color:#76531c; }
.cab-status.bad { border-color:#efcfca; background:#fff1ef; color:#8a3939; }
.cab-status::before { box-shadow:0 0 0 4px #5bad691b; }
.cab-progress { height:7px; margin:12px 0; }
.cab-main-card > .cab-btn { display:inline-flex; width:auto; min-height:44px; }
.cab-btn { min-height:48px; padding:12px 16px; margin-top:19px; border-radius:12px; font-size:13px; font-weight:720; }
.cab-btn.primary { background:var(--accent); color:#fff; box-shadow:none; }
.cab-btn.primary:hover { background:#0c5d45; }
.cab-btn.tg, .cab-btn.wa { background:transparent; border:0; color:var(--accent); box-shadow:none; }
.cab-btn.tg:hover, .cab-btn.wa:hover { background:var(--surface-2); filter:none; }
.cab-btn.wa::before { display:none; }
.cab-site-address { margin-top:14px; font-size:12px; color:var(--accent); overflow-wrap:anywhere; }
.cab-site-address > span { display:none; }
.cab-site-address b { font-weight:650; }
#cabHub:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:14px; align-content:start; }
#cabHub > .cab-intro, #cabHub > #cabInvoice, #cabHub > #cabCheck, #cabHub > .cab-help { grid-column:1/-1; }
#cabHub > .cab-main-card { grid-column:1; grid-row:2; }
#cabHub > #cabSubscription { grid-column:2; grid-row:2; }
.cab-row { min-height:39px; padding:11px 0; border-color:#edf1ed; font-size:12px; }
.cab-row b { max-width:65%; overflow-wrap:anywhere; text-align:right; font-weight:650; }
#cabSubscription .cab-lead { margin:0 0 13px; }
.cab-contact-row { font-size:11px; }
.cab-check { margin-top:15px; gap:13px; }
.cab-check li { align-items:flex-start; gap:10px; padding:0; border:0; font-size:13px; color:var(--text-1); }
#ck1T, #ck2T, #ck3T { font-weight:700; }
.cab-check li i { width:22px; height:22px; border:0; background:var(--accent-soft); color:var(--accent); font-size:12px; flex:none; }
.cab-check li.now i::before { display:none; }
.cab-check small { margin-top:3px; color:var(--muted); font-size:13px; line-height:1.5; }
.cab-help { display:grid; grid-template-columns:1fr auto; column-gap:18px; background:#eff7f0; border-color:#d9e9dc; border-radius:14px; padding:15px 17px; box-shadow:none; }
.cab-help h2 { font-size:13px; font-weight:750; margin:0; }
.cab-help .cab-lead { grid-column:1; font-size:12px; }
.cab-help .cab-btn { grid-column:2; grid-row:1/3; align-self:center; margin:0; min-height:44px; padding:8px 0; font-size:12px; }
.cab-help-row { grid-column:1/-1; margin:8px 0 0; color:var(--muted); font-size:11px; }
.cab-inv-to, .cab-inv-hint { color:var(--muted); }
.cab-inv-wait { color:var(--text-2); }
.cab-inv-num { color:var(--muted); }
.account-credit { padding:24px 0 4px; text-align:center; color:#89958e; font-size:11px; }
.account-credit b { color:#50635a; font-weight:700; }
.cab-foot { margin:0; padding:6px 0 0; text-align:center; color:var(--muted); font-size:11px; }
.cab-foot a { color:var(--muted); }
.cab-skel { width:min(100%,440px); margin:40px auto; }

/* The same 440px login card as the approved reference. */
body.cab[data-account-view="login"] .cab-wrap { display:flex; flex-direction:column; justify-content:center; min-height:100dvh; padding:22px 0; }
body.cab[data-account-view="login"] .cab-head { justify-content:center; width:100%; min-height:0; padding:0; margin:0 0 22px; }
body.cab[data-account-view="login"] .cab-brand { font-size:21px; text-align:center; }
body.cab[data-account-view="login"] .lang-switcher { top:16px; right:16px; }
body.cab[data-account-view="login"] .cab-out { position:absolute; right:16px; top:60px; }
.cab-login { width:min(100%,440px); margin:0 auto; padding:clamp(24px,6vw,38px); border-radius:24px; box-shadow:0 24px 70px #1e523414; }
.cab-back { color:var(--muted); text-decoration:none; font-size:12px; }
.cab-login .cab-eyebrow { margin:24px 0 7px; font-size:10px; }
.cab-login h1 { margin:0 0 10px; color:var(--text-1); font-size:30px; line-height:1.1; letter-spacing:-.05em; font-weight:750; }
.cab-login .cab-lead { margin:0 0 23px; }
.cab-label { color:var(--text-1); font-size:12px; font-weight:720; margin-bottom:8px; }
.cab-field { margin:0; }
.cab-login .otp-phone-row { min-height:50px; background:#fff; border-color:var(--border-strong); border-radius:12px; }
.cab-login .otp-prefix { padding:0 13px; border-right:1px solid var(--border); color:var(--text-2); font-weight:700; }
.cab-login .otp-phone-input { padding:0 13px; color:var(--text-1); font-size:15px; }
.cab-login .otp-phone-input::placeholder { color:#8c9a90; }
.cab-login .otp-phone-row:focus-within { border-color:#64b88f; box-shadow:0 0 0 3px #64b88f55; }
.cab-phone-hint { font-size:11px; color:var(--muted); margin:9px 0 17px; }
.cab-login .cab-btn.primary { width:100%; min-height:49px; margin:0; }
.cab-login .cab-btn.tg { width:100%; min-height:36px; margin-top:10px; padding:6px; font-size:12px; }
.cab-login-note { margin:14px 0 0; color:#849087; font-size:11px; text-align:center; }
.cab-login .cab-fine { margin:17px 0 0; font-size:12px; text-align:center; color:var(--muted); }
.cab-login .cab-fine a { color:var(--accent); font-weight:700; }
.cab-login .otp-code-row { gap:7px; margin:0 0 18px; }
.cab-login .otp-digit { width:44px; min-width:0; height:50px; flex:0 1 44px; border:1px solid var(--border-strong); border-radius:10px; background:#fff; color:var(--text-1); font-size:20px; }
.cab-login .otp-digit:focus { border-color:#64b88f; box-shadow:0 0 0 3px #64b88f55; }
.cab-login .otp-dash { display:none; }
.cab-sent { margin:0 0 18px; color:var(--muted); font-size:12px; }
.cab-sent button, .cab-resend button { color:var(--accent); font-size:11px; }
.cab-resend { margin:15px 0 0; flex-wrap:wrap; justify-content:center; gap:8px; font-size:11px; }

/* Business application: same paper card, controls, typography and feedback. */
.account-modal { background:rgba(23,36,31,.38); backdrop-filter:blur(8px); padding:24px 16px; }
.account-modal .modal-box { width:min(100%,440px); max-width:440px; padding:32px; border:1px solid var(--border); border-radius:24px; background:#fff; color:var(--text-1); box-shadow:0 24px 70px #1e52342b; }
.account-modal-brand { font-size:21px; font-weight:800; letter-spacing:-.04em; margin-bottom:16px; }
.account-modal .modal-title { color:var(--text-1); font-size:28px; line-height:1.15; letter-spacing:-.05em; margin:0 28px 18px 0; }
.account-modal .modal-close { color:var(--muted); }
.account-modal .modal-close:hover { color:var(--text-1); background:var(--surface-2); }
.account-modal .modal-steps { margin-bottom:22px; gap:8px; }
.account-modal .modal-steps li { color:var(--muted); font-size:11px; }
.account-modal .modal-steps li.now { color:var(--accent); font-weight:700; }
.account-modal .modal-steps li.done { color:var(--text-2); }
.account-modal .modal-steps li::before { background:var(--border); }
.account-modal .modal-steps li.now::before, .account-modal .modal-steps li.done::before { background:var(--accent); }
.account-modal .modal-step { gap:14px; }
.account-modal .reg-label { color:var(--text-1); font-size:12px; font-weight:720; margin-bottom:8px; }
.account-modal .reg-label small { color:var(--muted); font-weight:400; }
.account-modal .reg-input { background:#fff; color:var(--text-1); border-color:var(--border-strong); border-radius:12px; min-height:50px; font-size:16px; }
.account-modal .reg-input::placeholder { color:#8c9a90; }
.account-modal .reg-input:focus, .account-modal .otp-phone-row:focus-within { border-color:#64b88f; box-shadow:0 0 0 3px #64b88f55; }
.account-modal .otp-phone-row { min-height:50px; background:#fff; border-color:var(--border-strong); border-radius:12px; }
.account-modal .otp-prefix { padding:0 13px; color:var(--text-2); border-right:1px solid var(--border); }
.account-modal .otp-phone-input { border:0; box-shadow:none; }
.account-modal .otp-phone-input:focus { box-shadow:none; }
.account-modal .modal-submit { min-height:49px; border-radius:12px; background:var(--accent); color:#fff; box-shadow:none; font-size:13px; font-weight:720; }
.account-modal .modal-submit:hover { background:#0c5d45; }
.account-modal .modal-submit:disabled { opacity:.55; }
.account-modal .modal-alt.tg, .account-modal .modal-submit.tg { background:transparent; color:var(--accent); border:1px solid var(--border); border-radius:12px; }
.cab-check li.done, .cab-check li.now { color:var(--text-1); }
.cab-check li.now i { color:var(--accent); background:var(--accent-soft); }
.account-modal .modal-note, .account-modal .otp-sent-info, .account-modal .otp-code-hint, .account-modal .pay-note, .account-modal .pay-legal { color:var(--muted); font-size:12px; line-height:1.6; }
.account-modal .consent-label { color:var(--muted); font-size:12px; line-height:1.6; }
.account-modal .consent-label a, .account-modal .pay-legal a { color:var(--accent); }
.account-modal .consent-label input { accent-color:var(--accent); }
.account-modal .otp-code-row { gap:7px; }
.account-modal .otp-digit { width:44px; min-width:0; flex:0 1 44px; height:50px; border:1px solid var(--border-strong); border-radius:10px; background:#fff; color:var(--text-1); }
.account-modal .otp-digit:focus { border-color:#64b88f; box-shadow:0 0 0 3px #64b88f55; }
.account-modal .otp-dash { display:none; }
.account-modal .otp-resend a, .account-modal .otp-resend button, .account-modal .cab-link { color:var(--accent); }
.account-modal .pay-info, .account-modal .modal-prompt-preview { background:var(--surface-2); border-color:var(--border); color:var(--text-2); }
.account-modal .pay-tariff, .account-modal .pay-amount, .account-modal .success-title { color:var(--text-1); }
.account-modal .pay-status, .account-modal .success-text, .account-modal .pay-manual { color:var(--muted); }
.account-modal .success-icon { background:var(--accent-soft); color:var(--accent); }
.account-modal .reg-result.error { color:var(--danger-text); }
.account-modal .reg-result.success { color:var(--accent); }
.account-modal .kaspi-btn { background:#f14635; color:#fff; }
.account-modal .kaspi-btn:hover { background:#d73b2d; }
.account-modal .tg-wait, .account-modal .tg-wait-text { color:var(--text-2); }
body.cab :is(button,a,input):focus-visible, .account-modal :is(button,a,input,select):focus-visible { outline:3px solid #64b88f77; outline-offset:3px; }
@media(max-width:620px) {
  .cab-wrap { width:min(100% - 32px,780px); }
  .cab-head { min-height:66px; }
  body.cab .lang-switcher { top:15px; right:16px; }
  .cab-intro { padding-top:20px; }
  #cabHub:not([hidden]) { grid-template-columns:minmax(0,1fr); }
  #cabHub > .cab-main-card, #cabHub > #cabSubscription { grid-column:1; grid-row:auto; }
  .cab-card { padding:19px; }
  .cab-help { grid-template-columns:1fr; gap:5px; }
  .cab-help .cab-btn { grid-column:1; grid-row:auto; justify-self:start; }
  .cab-login { padding:28px 24px; }
  .account-modal { align-items:flex-end; padding:16px 10px max(10px,env(safe-area-inset-bottom)); }
  .account-modal .modal-box { padding:28px 24px; border-radius:24px; max-height:calc(100dvh - 36px); }
}
@media(max-width:380px) {
  .cab-wrap { width:calc(100% - 24px); }
  .cab-login { padding:24px 18px; }
  .account-modal .modal-box { padding:28px 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .cab-status.live::before, .cab-skel i, .tg-spinner { animation:none; }
  .cab-progress i, .cab-btn, .modal-overlay.account-modal, .account-modal .modal-box, .account-modal .reg-input { transition:none; }
}