.athan-bank {
  color-scheme: dark; --red:#e5092c; --panel:#101012; --line:#ffffff16; --muted:#aaa2a8; --cream:#ead7d2; --gold:#b49364; --bg:#151116;
  position:fixed; inset:0; z-index:20; display:grid; place-items:center; pointer-events:none;
  color:var(--cream); font:14px/1.5 'Chakra Petch','Noto Sans Thai',sans-serif; font-variant-numeric:tabular-nums;
}
.athan-bank *, .athan-bank *::before,.athan-bank *::after{box-sizing:border-box;}
.athan-bank [hidden]{display:none!important}
.athan-bank h1,.athan-bank h2,.athan-bank h3,.athan-bank p{margin:0;}
.athan-bank button,.athan-bank input{font:inherit;color:inherit;}
.athan-bank button{cursor:pointer;}
.athan-bank button:disabled{cursor:default;opacity:.42;}
.athan-bank :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.athan-bank svg{display:block;flex:none;}
.athan-bank .bank-frame {
  width:min(1270px,90vw); height:min(720px,85vh); pointer-events:auto; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
  background:rgba(16,16,18,.97); border:1px solid #5a393b; border-top:2px solid #8b2435; border-radius:16px; overflow:hidden;
  box-shadow:0 35px 100px #0009; animation:bank-enter .22s ease-out;
}
.athan-bank .bank-head{display:flex;align-items:center;gap:20px;padding:16px 25px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,#3d152324,transparent 70%);}
.athan-bank .brand{width:108px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 8px #e5092c20);}
.athan-bank .identity{border-left:1px solid #b4936445;padding-left:20px;min-width:0;}
.athan-bank .overline{color:#d0aa9a;font-weight:600;font-size:10px;letter-spacing:.06em;}
.athan-bank h1{font-size:26px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;}
.athan-bank .head-end{margin-left:auto;display:flex;align-items:center;gap:16px;}
.athan-bank .branch-chip{font-size:12px;color:#ddbe8c;border:1px solid #b493643d;border-radius:5px;padding:5px 9px;background:#b493640b;overflow-wrap:anywhere;max-width:180px;}
.athan-bank .close{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#ffffff03;font-size:20px;line-height:1;}
.athan-bank .close:hover{border-color:#b4936480;background:#ffffff0a;}
.athan-bank .bank-notice{display:flex;align-items:center;gap:9px;min-height:37px;padding:6px 25px;border-bottom:1px solid var(--line);font-size:12px;background:#b4936408;color:#d5bb99;overflow-wrap:anywhere;}
.athan-bank .bank-notice[data-kind="error"],.athan-bank .bank-notice[data-kind="unknown"]{background:#8e203222;color:#ffc8ce;}
.athan-bank .bank-notice[data-kind="success"]{background:#b4936415;color:#f0cca0;}
.athan-bank .workspace{min-height:0;display:grid;grid-template-columns:265px minmax(0,1fr);}
.athan-bank .account{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#53323c transparent;padding:19px 20px 17px;border-right:1px solid var(--line);background:radial-gradient(ellipse at 20% 38%,#b4936408,transparent 68%),#0d0d10;}
.athan-bank .section-heading{display:flex;gap:9px;align-items:center;color:var(--cream);}
.athan-bank .section-heading svg{color:var(--gold);}
.athan-bank h2{font-size:19px;font-weight:600;}
.athan-bank .balance-card{margin-top:14px;position:relative;isolation:isolate;overflow:hidden;display:grid;gap:3px;padding:12px 13px;border:1px solid #b4936437;border-radius:8px;background:linear-gradient(116deg,#1c1718,#121214);}
.athan-bank .balance-card.bank-balance{border-color:#b4936461;background:linear-gradient(116deg,#292017,#141214);}
.athan-bank .balance-card>svg{position:absolute;z-index:-1;right:2px;bottom:-17px;color:#b493641f;transform:rotate(-12deg);width:91px;height:91px;stroke-width:.65;}
.athan-bank .balance-card span{color:#c0aebe;font-size:12px;}
.athan-bank .balance-card strong{font-size:clamp(22px,2.2vw,30px);font-weight:600;line-height:1.16;overflow-wrap:anywhere;}
.athan-bank .bank-balance strong{color:#f1d1a3;}
.athan-bank .money-sheet{border-top:1px solid var(--line);margin-top:17px;padding-top:13px;}
.athan-bank .money-sheet label,.athan-bank .dialog label{display:block;color:var(--cream);font-size:13px;font-weight:600;margin-bottom:6px;}
.athan-bank .money-field{display:flex;align-items:center;gap:8px;background:#171417;border:1px solid #ffffff23;border-radius:7px;padding:0 10px;}
.athan-bank .money-field:focus-within{border-color:var(--gold);}
.athan-bank .money-field>span{color:var(--gold);font-size:17px;}
.athan-bank .money-field input{width:100%;min-width:0;border:0;background:transparent;outline:none;padding:8px 0;font-size:16px;}
.athan-bank .money-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;}
.athan-bank .btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:39px;padding:6px 12px;border:1px solid #ffffff22;border-radius:999px;background:#151517;color:var(--cream);font-size:13px;font-weight:600;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;}
.athan-bank .btn:not(:disabled):hover{border-color:#b493647d;background:#211b1e;}
.athan-bank .btn:not(:disabled):active{transform:translateY(1px);}
.athan-bank .btn.primary{background:var(--red);border-color:var(--red);color:#fff;}
.athan-bank .btn.primary:not(:disabled):hover{background:#fa1b3e;border-color:#fa1b3e;box-shadow:0 3px 19px #e5092c29;}
.athan-bank .money-hint{color:var(--muted);font-size:11px;margin-top:8px;overflow-wrap:anywhere;}
.athan-bank .money-hint[data-invalid="true"]{color:#f6aeb6;}
.athan-bank .vault{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:15px 19px 13px;}
.athan-bank .vault-head{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:1px 0 11px;}
.athan-bank .fee-chip{color:#dabc95;padding:3px 8px;border:1px solid #b4936445;background:#b493640d;border-radius:4px;font-size:11px;overflow-wrap:anywhere;max-width:54%;}
.athan-bank .grid-pair{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:12px;}
.athan-bank .storage{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#0d0d0f;}
.athan-bank .storage-head{min-width:0;display:grid;gap:6px;padding:10px 11px 8px;background:linear-gradient(110deg,#1e181c,#151418 72%);border-bottom:1px solid var(--line);}
.athan-bank .storage[data-side="bank"] .storage-head{background:linear-gradient(110deg,#251e17,#151418 74%);}
.athan-bank .storage-head>div{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap;}
.athan-bank .storage-head h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;}
.athan-bank .storage-head h3 svg{color:#c6a573;}
.athan-bank .capacity{font-size:11px;color:#d4b991;}
.athan-bank .weight{font-size:11px;color:var(--muted);}
.athan-bank .weight-line{height:2px;border-radius:2px;background:#ffffff14;overflow:hidden;}
.athan-bank .weight-line span{display:block;height:100%;background:var(--gold);transition:width .22s;}
.athan-bank .weight-line span[data-full="true"]{background:var(--red);}
.athan-bank .storage[data-side="bank"] .weight-line{background:linear-gradient(90deg,#b4936463,transparent);}
.athan-bank .slots-scroll{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#633742 transparent;padding:8px;}
.athan-bank .slots{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:5px;}
.athan-bank .slot{position:relative;min-width:0;height:clamp(43px,4.16vw,56px);border:1px solid #ffffff10;border-radius:5px;background:linear-gradient(145deg,#111114,#141316);color:#a79ba2;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:1px 2px;touch-action:none;transition:background .15s,border-color .15s,box-shadow .15s;}
.athan-bank .slot.filled{border-color:#b493643b;background:radial-gradient(ellipse at 50% 38%,#b4936415,transparent 70%),linear-gradient(145deg,#1c181b,#141316);color:var(--cream);}
.athan-bank .slot:not(:disabled):hover{border-color:#bb9b75a3;background-color:#191619;}
.athan-bank .slot.selected{border-color:#ed4260;background:radial-gradient(ellipse at 50% 45%,#e5092c22,transparent 95%),#211417;box-shadow:inset 0 0 0 1px #e5092c35;}
.athan-bank .slot.targetable{border-color:#b493646b;}
.athan-bank .slot.drop-valid{border-color:#e4bc7f;box-shadow:inset 0 0 15px #b493643a;}
.athan-bank .slot.drop-invalid{border-color:#e5092c;}
.athan-bank .slot-number{position:absolute;top:2px;left:4px;font-size:9px;color:#81777e;line-height:1;}
.athan-bank .slot.filled .slot-number{color:#bdab9c;}
.athan-bank .slot-count{position:absolute;top:2px;right:4px;background:#131113d9;border-radius:3px;padding:0 1px;color:#f2d5ac;font-size:10px;font-weight:700;line-height:1.2;}
.athan-bank .slot img,.athan-bank .slot .item-glyph{display:block;width:75%;height:30px;object-fit:contain;filter:drop-shadow(0 2px 3px #0008);}
.athan-bank .slot .item-glyph{color:#c5a577;width:25px;height:25px;}
.athan-bank .slot-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;text-align:center;padding-bottom:2px;}
.athan-bank .vault-hint{min-height:32px;padding-top:9px;color:var(--muted);font-size:12px;overflow-wrap:anywhere;display:flex;gap:7px;align-items:baseline;}
.athan-bank .vault-hint svg{align-self:center;color:#b49364;}
.athan-bank .vault-hint strong{color:#eed4b5;}
.athan-bank .bank-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 25px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);}
.athan-bank .bank-foot>span{min-width:0;overflow-wrap:anywhere;}
.athan-bank .branch-state{color:#d4b991;}
.athan-bank kbd{font:inherit;border:1px solid #ffffff26;border-radius:3px;padding:0 4px;margin-right:4px;}
.athan-bank .load-view{grid-row:3;display:grid;place-content:center;justify-items:center;gap:10px;padding:22px;text-align:center;}
.athan-bank .load-view svg{color:var(--gold);}
.athan-bank .load-view p{color:var(--muted);max-width:45ch;overflow-wrap:anywhere;}
.athan-bank .dialog{width:min(430px,92vw);max-height:calc(100dvh - 30px);overflow:auto;color:var(--cream);padding:19px 22px 21px;background:#101012;border:1px solid #693b42;border-top:2px solid #b32b44;border-radius:15px;box-shadow:0 25px 120px #000b;}
.athan-bank .dialog[open]{animation:bank-enter .22s ease-out;}
.athan-bank .dialog::backdrop{background:#050507b8;backdrop-filter:blur(5px);}
.athan-bank .dialog-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;}
.athan-bank .confirm-item{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:8px;background:#ffffff05;padding:9px 11px;margin-bottom:12px;}
.athan-bank .confirm-item img,.athan-bank .confirm-item svg{width:37px;height:37px;object-fit:contain;color:var(--gold);}
.athan-bank .confirm-item div{min-width:0;overflow-wrap:anywhere;}
.athan-bank .confirm-item small,.athan-bank .dialog dt{color:var(--muted);}
.athan-bank .dialog input{width:100%;height:38px;background:#171417;border:1px solid #ffffff28;border-radius:6px;padding:0 10px;}
.athan-bank .dialog dl{margin:13px 0 0;border-top:1px solid var(--line);padding-top:10px;}
.athan-bank .dialog dl>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;}
.athan-bank .dialog dd{margin:0;text-align:right;color:#f0cca0;}
.athan-bank .dialog .money-hint{margin:6px 0;}
.athan-bank .dialog-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;margin-top:13px;}
.athan-bank .drag-ghost{position:fixed;inset:0 auto auto 0;z-index:80;pointer-events:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #b4936499;border-radius:6px;background:#171317;color:var(--cream);box-shadow:0 5px 19px #0009;font-size:12px;max-width:200px;}
.athan-bank .drag-ghost img,.athan-bank .drag-ghost svg{width:28px;height:28px;object-fit:contain;color:var(--gold);}
@keyframes bank-enter{from{opacity:0;transform:translateY(7px) scale(.994)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:830px){.athan-bank .bank-frame{height:min(660px,86vh)}.athan-bank .bank-head{padding-block:12px}.athan-bank .slot{height:46px}}
@media(max-width:1020px){.athan-bank .workspace{grid-template-columns:222px minmax(0,1fr)}.athan-bank .vault{padding-inline:12px}.athan-bank .account{padding-inline:13px}.athan-bank .slot-name{font-size:9px}}
@media(max-width:780px){.athan-bank .bank-frame{width:94vw;height:calc(100dvh - 120px)}.athan-bank .workspace{display:block;overflow:auto}.athan-bank .account{border-right:0;border-bottom:1px solid var(--line)}.athan-bank .vault{min-height:390px}.athan-bank .slots-scroll{height:250px}.athan-bank .bank-head,.athan-bank .bank-notice,.athan-bank .bank-foot{padding-inline:12px}.athan-bank .brand{width:72px}.athan-bank .identity{padding-left:8px}.athan-bank .bank-head{gap:8px}.athan-bank h1{font-size:18px}.athan-bank .branch-chip{display:none}.athan-bank .slot{height:43px}}
@media(max-width:460px){.athan-bank .grid-pair{grid-template-columns:minmax(0,1fr)}.athan-bank .vault-head{align-items:flex-start}.athan-bank .vault-hint{min-height:40px}.athan-bank .bank-frame{margin-top:12px}.athan-bank .slot-name{font-size:10px}}
@media(prefers-reduced-motion:reduce){.athan-bank *,.athan-bank *::before,.athan-bank *::after{animation:none!important;transition:none!important;}}
