/* ===========================================================
   BANK ACCOUNT V2 — Frenzy96 player (2026-05-30)
   Compact premium design. Renders into #pf3-subpage-body.
   Rules (Mz): no-delete (Edit-once instead), holder LOCKED = registered name.
   Vanilla, English-only.
   =========================================================== */
/* Design tokens — also declared on .ba-sov / .ba-cm because those are portaled
   to document.body (OUTSIDE .baw) so they must carry their own --ba-* or every
   var() resolves to empty → transparent/unstyled sheet (root cause of the
   "overlay not working / inputs unstyled" bug, 2026-05-30). */
.baw, .ba-sov, .ba-cm {
  --ba-bg:#0b0c10; --ba-surface:#111318; --ba-surface2:#141620; --ba-border:#1e2028; --ba-border2:#1a1c24;
  --ba-gold:#e8a124; --ba-gold-bg:#1f1a0d; --ba-gold-border:#3a2e0a;
  --ba-blue:#4a8ee8; --ba-blue-bg:#0a1220; --ba-blue-border:#1a2535;
  --ba-green:#2dc98a; --ba-green-bg:#0d1a10; --ba-green-border:#1a3520;
  --ba-red:#e84040; --ba-red-bg:#200f0f; --ba-red-border:#3a1515;
  --ba-text:#eee; --ba-text2:#aaa; --ba-text3:#555; --ba-text4:#3a3e4d;
}
.baw {
  background:var(--ba-bg); color:var(--ba-text); margin:-14px; padding:14px; min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.ba-addtop { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ba-addtop__t { font-size:14px; font-weight:600; }
.ba-addbtn { background:var(--ba-gold); color:#0b0c10; font-size:10px; font-weight:600; border:0; border-radius:7px; padding:5px 10px; cursor:pointer; }
.ba-addbtn:disabled { background:#252831; color:#555; cursor:not-allowed; }

.ba-seclbl { font-size:9px; font-weight:600; color:var(--ba-text4); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 8px; }

/* account card */
.ba-card { background:var(--ba-surface); border:1px solid var(--ba-border); border-radius:14px; overflow:hidden; margin-bottom:8px; }
.ba-card__top { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#0d1520 0%,#111820 100%); border-bottom:1px solid var(--ba-border2); padding:12px 14px; }
.ba-card__ic { width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:var(--ba-blue-bg); border:1px solid var(--ba-blue-border); color:var(--ba-blue); display:flex; align-items:center; justify-content:center; }
.ba-card__ic svg { width:20px; height:20px; }
.ba-card__info { flex:1; min-width:0; }
.ba-card__bank { font-size:13px; font-weight:600; color:var(--ba-text); }
.ba-card__acc { font-size:11px; color:var(--ba-text3); letter-spacing:1px; font-family:"JetBrains Mono",ui-monospace,monospace; margin-top:1px; }
.ba-card__holder { font-size:10px; color:#888; margin-top:1px; }
.ba-badge { font-size:8px; font-weight:700; background:var(--ba-gold-bg); border:1px solid var(--ba-gold-border); color:var(--ba-gold); border-radius:20px; padding:3px 8px; flex:0 0 auto; }
.ba-card__bar { display:flex; gap:6px; padding:10px 14px; }
.ba-act { flex:1; padding:7px; border-radius:8px; font-size:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid; }
.ba-act svg { width:13px; height:13px; }
.ba-act--detail { background:#151720; border-color:var(--ba-border); color:#888; }
.ba-act--default { background:var(--ba-gold-bg); border-color:var(--ba-gold-border); color:var(--ba-gold); }
.ba-act--default.is-default { border-color:var(--ba-gold); cursor:default; }
.ba-act--edit { background:#151720; border-color:var(--ba-border); color:#888; }
.ba-act--edit.locked { opacity:.4; cursor:not-allowed; }

/* empty slots */
.ba-slots { display:grid; gap:8px; }
.ba-slots.two { grid-template-columns:1fr 1fr; }
.ba-slot { border:1.5px dashed var(--ba-border); border-radius:14px; padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.ba-slot:active { border-color:var(--ba-gold); background:rgba(232,161,36,.06); }
.ba-slot__n { width:22px; height:22px; border-radius:7px; background:var(--ba-border2); color:var(--ba-text4); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.ba-slot__p { font-size:18px; color:var(--ba-text4); line-height:1; }
.ba-slot__t { font-size:10px; color:var(--ba-text4); text-align:center; }

/* security note */
.ba-sec { display:flex; gap:10px; align-items:flex-start; background:var(--ba-green-bg); border:1px solid var(--ba-green-border); border-radius:10px; padding:10px 12px; margin-top:16px; }
.ba-sec svg { width:13px; height:13px; flex:0 0 13px; color:var(--ba-green); margin-top:1px; }
.ba-sec span { font-size:10px; color:var(--ba-green); line-height:1.5; }

/* ===== bottom sheet (shared detail + add/edit) ===== */
.ba-sov { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.7); opacity:0; transition:opacity .2s; display:flex; align-items:flex-end; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.ba-sov.on { opacity:1; }
.ba-sheet { width:100%; max-width:560px; margin:0 auto; background:var(--ba-surface); border-top:1px solid var(--ba-border); border-radius:18px 18px 0 0; transform:translateY(100%); transition:transform .3s ease-out; max-height:90vh; display:flex; flex-direction:column; box-sizing:border-box; }
.ba-sov.on .ba-sheet { transform:translateY(0); }
.ba-grab { width:32px; height:3px; border-radius:3px; background:#2a2d38; margin:8px auto 12px; flex:0 0 auto; }
.ba-sh-head { display:flex; align-items:center; gap:10px; padding:0 18px 12px; flex:0 0 auto; }
.ba-sh-title { font-size:13px; font-weight:600; flex:1; }
.ba-sh-x { width:28px; height:28px; border-radius:8px; border:0; background:#151720; color:var(--ba-text2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ba-sh-x svg { width:16px; height:16px; }
.ba-sh-body { flex:1 1 auto; overflow-y:auto; padding:0 18px; }
.ba-drow { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--ba-border2); font-size:12px; }
.ba-drow:last-child { border-bottom:0; }
.ba-drow .k { color:var(--ba-text3); font-size:10px; flex:0 0 auto; }
.ba-drow .v { color:var(--ba-text); font-weight:600; text-align:right; word-break:break-word; }
.ba-sh-foot { flex:0 0 auto; position:sticky; bottom:0; background:var(--ba-surface); padding:12px 16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); border-top:1px solid var(--ba-border); }
.ba-closebtn { width:100%; padding:13px; border-radius:11px; border:1px solid var(--ba-border); background:var(--ba-surface2); color:var(--ba-text); font-size:13px; font-weight:600; cursor:pointer; }

/* ===== form (unified field system) ===== */
.ba-field2 { margin-bottom:14px; }
.ba-flbl2 { font-size:10px; font-weight:600; color:var(--ba-text4); letter-spacing:.5px; text-transform:uppercase; margin-bottom:5px; display:block; }
.ba-input { width:100%; background:var(--ba-surface2); border:1px solid var(--ba-border); border-radius:9px; padding:9px 12px; color:var(--ba-text); font-size:12px; outline:0; box-sizing:border-box; }
.ba-input:focus { border-color:var(--ba-gold); }
.ba-input.err { border-color:var(--ba-red); }
.ba-input:read-only { opacity:.75; }
.ba-input::placeholder { color:var(--ba-text4); }
.ba-hint { font-size:10px; color:var(--ba-text4); margin-top:4px; }
.ba-hint-green { font-size:10px; color:var(--ba-green); margin-top:4px; display:flex; align-items:center; gap:4px; line-height:1.4; }
.ba-hint-green svg { width:12px; height:12px; flex:0 0 12px; }
.ba-ferr { font-size:10px; color:var(--ba-red); margin-top:4px; min-height:0; }

/* custom dropdown */
.ba-dd { position:relative; }
.ba-dd__trig { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--ba-surface2); border:1px solid var(--ba-border); border-radius:9px; padding:9px 12px; font-size:12px; color:var(--ba-text); cursor:pointer; box-sizing:border-box; }
.ba-dd__trig.placeholder { color:var(--ba-text4); }
.ba-dd__trig.open { border-color:var(--ba-gold); }
.ba-dd__trig.err { border-color:var(--ba-red); }
.ba-dd__trig svg { width:16px; height:16px; flex:0 0 16px; color:var(--ba-text4); transition:transform .2s; }
.ba-dd__trig.open svg { transform:rotate(180deg); }
.ba-dd__list { position:absolute; top:calc(100% + 4px); left:0; width:100%; background:#1a1c24; border:1px solid #252831; border-radius:10px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.4); max-height:200px; overflow-y:auto; padding:4px; display:none; }
.ba-dd__list.open { display:block; }
.ba-dd__opt { padding:10px 14px; font-size:12px; color:#ddd; cursor:pointer; border-radius:7px; }
.ba-dd__opt:hover { background:#252831; }
.ba-dd__opt.sel { color:var(--ba-gold); font-weight:600; }

/* toggle switch (Set as default) */
.ba-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; margin:2px 0 2px; user-select:none; }
.ba-toggle__sw { width:32px; height:18px; flex:0 0 32px; border-radius:20px; background:#252831; position:relative; transition:background .2s; }
.ba-toggle__sw::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; }
.ba-toggle.on .ba-toggle__sw { background:var(--ba-gold); }
.ba-toggle.on .ba-toggle__sw::after { transform:translateX(14px); }
.ba-toggle__lbl { font-size:12px; color:var(--ba-text2); }

/* save button states */
.ba-savebtn { width:100%; padding:14px; border-radius:11px; border:0; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s; }
.ba-savebtn.ready { background:var(--ba-gold); color:#0b0c10; }
.ba-savebtn.disabled, .ba-savebtn:disabled { background:#252831; color:#555; cursor:not-allowed; }
.ba-spin { width:15px; height:15px; border:2px solid rgba(0,0,0,.3); border-top-color:#0b0c10; border-radius:50%; animation:ba-spin .7s linear infinite; }
@keyframes ba-spin { to { transform:rotate(360deg); } }

/* delete-blocked modal (default account) */
.ba-cm { position:fixed; inset:0; z-index:100002; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; }
.ba-cm__box { width:300px; max-width:100%; background:#14161c; border:1px solid #252830; border-radius:12px; padding:18px; }
.ba-cm__t { font-size:15px; font-weight:600; margin-bottom:8px; }
.ba-cm__b { font-size:12px; color:var(--ba-text2); line-height:1.5; margin-bottom:16px; }
.ba-cm__acts { display:flex; gap:8px; }
.ba-cm__btn { flex:1; padding:10px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--ba-border); background:var(--ba-surface2); color:var(--ba-text); }

.ba-empty { text-align:center; padding:40px 16px; color:var(--ba-text3); font-size:12px; }
.ba-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:100003; color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.4); }