/* ============ ATM 与 Cage 收银台（js/core/atm-ui.js、js/core/cage-ui.js） ============
   ATM 是一台写实的澳洲银行机：石墨拉丝面板、运营商灯箱、蓝色屏幕 + 左右各 4 个侧键、钢制密码键盘（取消红 / 清除黄 / 确认绿）、
   插卡口、收据口、出钞口。Cage 是柜台窗口：木墙、黄铜招牌、格栅、大理石台面。
   只用 token / 渐变 / 内联 SVG；动画单次 ≤ .35s；不发光、不虚线。 */

/* =========================== ATM =========================== */
.modal-box.atm-box{width:880px;}
#muAtm .mb{padding:12px 16px;}
.atm-stage{display:grid;grid-template-columns:448px minmax(0,1fr);gap:18px;align-items:start;}

/* ---------- 机身 ---------- */
.atm{--acc:#3a3f45;--acc-ink:var(--brass-300);position:relative;border-radius:8px;padding:0 14px 10px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#4a4f55 0%,#34383d 26%,#26292d 100%);
  box-shadow:0 0 0 1px #0a0b0c,0 1px 0 rgba(255,255,255,.12) inset,0 18px 40px rgba(0,0,0,.6);}
.atm.op-cba{--acc:#d9b02c;--acc-ink:#1b1606;}
.atm.op-atmx{--acc:#2a7fae;--acc-ink:#eaf3f8;}
.atm-top{margin:0 -14px 10px;height:30px;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 50%,rgba(0,0,0,.12)),var(--acc);color:var(--acc-ink);
  border-bottom:2px solid rgba(0,0,0,.5);}
.atm-top .opn{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;}
.atm-top .opx{font-size:11px;letter-spacing:.18em;font-weight:600;opacity:.85;}

/* ---------- 屏幕 + 侧键：侧键和屏幕里的选项行一一对齐（标题 26 + 小标题 26，之后每行 36） ---------- */
.atm-face{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:6px;align-items:start;}
.atm-bezel{padding:9px;border-radius:6px;background:linear-gradient(180deg,#131517,#0a0b0c);
  box-shadow:0 0 0 1px #000,0 1px 0 rgba(255,255,255,.1),inset 0 0 0 2px #1f2225;}
.atm-scr{position:relative;height:218px;overflow:hidden;border-radius:2px;color:var(--lcd-text);font-family:var(--sans);
  background:radial-gradient(ellipse at 50% 0%,rgba(140,200,255,.16),transparent 60%),linear-gradient(180deg,#11548c 0%,#0b3d6b 50%,#072a4b 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.35);}
.atm-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);}
.atm-scr .sh{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;
  font-size:12px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(160,200,235,.18);}
.atm-scr .sh b{font-weight:700;letter-spacing:.02em;}
.atm-scr .sh span{font-family:var(--mono);color:#b9cfe0;}
.atm-scr .st{position:absolute;left:0;right:0;top:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:.04em;}
.atm-scr .sf{position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  font-size:11px;color:#b9cfe0;background:rgba(0,0,0,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.atm-scr .sg{position:absolute;left:0;right:0;top:52px;height:144px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,36px);}
.atm-scr .op{align-self:center;height:28px;margin:0 6px;display:flex;align-items:center;padding:0 10px;position:relative;cursor:pointer;
  font-size:13px;line-height:1.1;border-radius:3px;border:1px solid rgba(170,210,240,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.atm-scr .op:hover{border-color:rgba(200,230,250,.7);}
.atm-scr .op.l{justify-content:flex-start;margin-left:0;border-left-width:4px;border-left-color:#8cc8f2;}
.atm-scr .op.r{justify-content:flex-end;margin-right:0;border-right-width:4px;border-right-color:#8cc8f2;}
.atm-scr .op.go{border-color:#5fc28c;background:linear-gradient(180deg,rgba(95,194,140,.42),rgba(95,194,140,.16));}
.atm-scr .op.go.r{border-right-color:#8be0b0;}
.atm-scr .op.dim{opacity:.45;}
.atm-scr .op.none{visibility:hidden;}
/* 居中的提示屏（欢迎 / PIN / 处理中 / 错误 …）：有下两行选项时只占上半 */
.atm-scr .sm{position:absolute;left:10px;right:10px;top:26px;bottom:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}
.atm-scr .sm:has(~ .sg){bottom:94px;}
.atm-scr .sm .t{font-size:17px;font-weight:700;letter-spacing:.04em;}
.atm-scr .sm .s{font-size:12.5px;line-height:1.5;color:#d3e2ee;}
.atm-scr .sm .s small{font-size:11px;color:#a9c2d6;}
.atm-scr .sm .s2{font-size:12px;color:#b9cfe0;}
.atm-scr .sm .big{font-family:var(--mono);font-size:22px;color:var(--lcd-text);letter-spacing:.02em;}
.atm-scr .warn{color:#ffd27a;font-size:12px;}
.atm-scr .pinbox{display:flex;gap:8px;margin-top:4px;}
.atm-scr .pinbox i{width:24px;height:28px;border-radius:3px;background:rgba(0,0,0,.35);border:1px solid rgba(170,210,240,.45);position:relative;}
.atm-scr .pinbox i.on::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--lcd-text);}
.atm-scr .amtbox{position:absolute;left:0;right:0;top:66px;display:flex;align-items:baseline;justify-content:center;gap:4px;font-family:var(--mono);}
.atm-scr .amtbox span{font-size:18px;color:#b9cfe0;}
.atm-scr .amtbox b{font-size:30px;font-weight:400;min-width:120px;text-align:left;padding:0 8px;border-bottom:2px solid rgba(170,210,240,.6);}
.atm-scr .hintl{position:absolute;left:0;right:0;top:112px;text-align:center;font-size:11.5px;color:#b9cfe0;}
.atm-scr .dots{width:120px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:6px;}
.atm-scr .dots i{display:none;}
.atm-scr .dots::before{content:"";display:block;height:100%;width:100%;background:linear-gradient(90deg,#8cc8f2,#dff0fb);transform-origin:left;animation:atmProg 1.1s linear both;}
@keyframes atmProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.atm-scr .insert{width:44px;height:28px;border-radius:4px;border:2px solid #8cc8f2;position:relative;margin-top:4px;}
.atm-scr .insert::before{content:"";position:absolute;left:6px;top:7px;width:10px;height:8px;border-radius:2px;background:#8cc8f2;}
.atm-scr .insert i{position:absolute;right:-18px;top:8px;width:0;height:0;border-left:9px solid #8cc8f2;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.atm-scr .arrow{width:0;height:0;margin-top:4px;}
.atm-scr .arrow.r{border-left:14px solid #8cc8f2;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.atm-scr .arrow.d{border-top:14px solid #8cc8f2;border-left:9px solid transparent;border-right:9px solid transparent;}
.atm-scr .sconf{position:absolute;left:12px;right:12px;top:30px;height:94px;display:flex;flex-direction:column;justify-content:center;gap:1px;}
.atm-scr .sconf .feewarn{font-size:11px;line-height:1.35;color:#ffe2a8;border-left:3px solid #f2b640;padding:1px 0 1px 7px;margin-bottom:3px;}
.atm-scr .sconf .feewarn b{color:#fff1cf;font-weight:700;}
.atm-scr .sconf .ln{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.35;}
.atm-scr .sconf .ln b{font-family:var(--mono);font-weight:400;}
.atm-scr .sconf .ln.fee b{color:#ffd27a;}
.atm-scr .sconf .ln.tot{font-weight:700;border-top:1px solid rgba(170,210,240,.3);padding-top:1px;}
.atm-scr .sconf .ln.dim{color:#a9c2d6;font-size:11px;}
/* 侧键：钢制方键，按下有行程 */
.atm-fdk{display:flex;flex-direction:column;padding-top:61px;}
.atm-fdk .fk{height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:default;}
.atm-fdk .fk i{display:block;width:28px;height:20px;border-radius:3px;background:linear-gradient(180deg,#d7dce0,#949ca4);
  box-shadow:0 2px 0 #3d4247,0 3px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7);transition:transform var(--t-fast),box-shadow var(--t-fast);}
.atm-fdk .fk.live{cursor:pointer;}
.atm-fdk .fk.live i{background:linear-gradient(180deg,#e6eaed,#a3abb2);}
.atm-fdk .fk:active i{transform:translateY(2px);box-shadow:0 0 0 #3d4247,0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);}

/* ---------- 操作台：收据口 · 密码键盘 · 插卡口 ---------- */
.atm-shelf{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin-top:10px;padding:10px 8px 8px;border-radius:6px;
  background:linear-gradient(180deg,#2c2f33,#1c1e21);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #0b0c0d,0 3px 8px rgba(0,0,0,.4);}
.atm-pad{display:grid;grid-template-columns:repeat(3,44px) 70px;grid-auto-rows:29px;gap:5px;padding:6px;border-radius:5px;
  background:linear-gradient(180deg,#17191b,#101113);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 1px #2e3236;}
.atm-pad .pk{border:0;border-radius:4px;background:linear-gradient(180deg,#e7eaed,#aab1b8);color:#1b1f23;font:600 16px var(--sans);position:relative;cursor:pointer;
  box-shadow:0 3px 0 #4d5359,0 4px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.9);transition:transform var(--t-fast),box-shadow var(--t-fast);}
.atm-pad .pk:active{transform:translateY(2px);box-shadow:0 1px 0 #4d5359,0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.7);}
.atm-pad .pk.dot::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:2px;margin-left:-2px;border-radius:1px;background:#3a3f44;}
.atm-pad .pk.blank{visibility:hidden;}
.atm-pad .pk.fn{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-size:12px;gap:1px;}
.atm-pad .pk.fn b{font-weight:700;}
.atm-pad .pk.fn small{font-size:10px;letter-spacing:.06em;opacity:.85;}
.atm-pad .pk.red{background:linear-gradient(180deg,#d8594f,#9c2a22);color:#fff1ee;box-shadow:0 3px 0 #5e1813,0 4px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,210,200,.6);}
.atm-pad .pk.yel{background:linear-gradient(180deg,#e9c650,#b38e1c);color:#231a02;box-shadow:0 3px 0 #6b5410,0 4px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,245,200,.8);}
.atm-pad .pk.grn{background:linear-gradient(180deg,#4fb06e,#257743);color:#effbf2;box-shadow:0 3px 0 #164a29,0 4px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(200,255,215,.6);}
.atm-slot{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;padding-top:4px;}
.atm-slot .lbl,.atm-disp .lbl{font-size:10px;letter-spacing:.14em;color:#9aa3ab;white-space:nowrap;}
.atm-slot .mouth,.atm-disp .mouth{position:relative;width:78px;height:9px;border-radius:3px;background:#040404;
  box-shadow:inset 0 2px 3px #000,0 0 0 3px #3b3f44,0 0 0 4px #121416,0 1px 0 4px rgba(255,255,255,.06);}
.atm-slot.rcpt .mouth{width:64px;height:6px;}
.atm-slot .led{position:absolute;right:-17px;top:0;width:8px;height:8px;border-radius:50%;background:#1b3322;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);}
.atm-slot .led.on{background:radial-gradient(circle at 40% 35%,#c4ffd4,#3cc769 55%,#1b6a35);}
.atm-slot .clip{position:relative;width:84px;height:50px;overflow:hidden;margin-top:-2px;}
/* 卡：退出来一半，点它取回 */
.dcard.tab{position:absolute;left:12px;top:0;width:60px;height:38px;border-radius:5px;transform:translateY(-42px);transition:transform .3s ease-out;cursor:pointer;}
.dcard.tab.eject{transform:translateY(0);}
.dcard.tab .emv{left:8px;top:12px;width:14px;height:11px;}
.dcard.tab .bk{display:none;}
/* 收据：从收据口吐出来 */
.atm-slot .paper{position:absolute;left:18px;top:0;width:48px;height:46px;cursor:pointer;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,#f3eee1,#e3dccb);box-shadow:0 2px 4px rgba(0,0,0,.45);transform:translateY(-48px);transition:transform .35s ease-out;padding-top:6px;}
.atm-slot .paper.out{transform:translateY(0);}
.atm-slot .paper i{display:block;height:2px;margin:0 6px 5px;background:rgba(40,36,30,.35);}
.atm-slot .paper i:nth-child(2n){margin-right:14px;}
/* ---------- 出钞口 ---------- */
.atm-disp{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.atm-disp .mouth{width:200px;height:12px;}
.atm-disp .clip{position:relative;width:340px;height:58px;overflow:hidden;margin-top:-2px;}
.atm-disp .notes{position:absolute;left:50%;top:0;width:150px;transform:translate(-50%,-62px);transition:transform .35s ease-out,opacity .25s;cursor:pointer;}
.atm-disp .notes.out{transform:translate(-50%,0);}
.atm-disp .notes .stack{position:relative;height:50px;}
.atm-disp .notes .cnt{position:absolute;left:100%;top:14px;margin-left:8px;font-size:11px;color:#c7ced4;white-space:nowrap;}
.note{position:absolute;left:calc(var(--i) * 5px);top:calc(var(--i) * 1px);width:118px;height:40px;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.35),0 calc(var(--thick,0px) * .5) 0 rgba(0,0,0,.25),0 3px 5px rgba(0,0,0,.45);}
.note::before{content:"";position:absolute;left:38px;top:6px;width:24px;height:27px;border-radius:50%;background:rgba(0,0,0,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.note::after{content:"";position:absolute;left:8px;right:36px;bottom:6px;height:2px;background:rgba(0,0,0,.18);}
.note b{position:absolute;left:7px;top:3px;font:700 16px var(--serif);color:rgba(40,20,0,.72);}
.note .win{position:absolute;right:9px;top:6px;width:16px;height:26px;border-radius:8px;background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
.note.n50{background:linear-gradient(135deg,#ecd06a,#c99d2e 58%,#a57b1d);}
.note.n20{background:linear-gradient(135deg,#e8896a,#c65433 58%,#9c3a22);}
.note.n100{background:linear-gradient(135deg,#7fc08f,#3f8f5a 58%,#2b6a40);}
.note.n10{background:linear-gradient(135deg,#7fb3dd,#3a7fb8 58%,#275d8c);}
.note.n5{background:linear-gradient(135deg,#d89ac4,#a2598f 58%,#7c3f6c);}
.atm-help{margin-top:6px;font-size:11px;color:#c5ccd2;text-align:center;padding:4px 8px;border-radius:3px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(95,194,140,.35);}
.atm-help b{color:#e4edf3;font-family:var(--mono);font-weight:400;}

/* ---------- 右栏：借记卡、机器、额度、收据 ---------- */
.atm-side{display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;}
.atm-side .h,.cage-side .h{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--brass-300);}
.atm-machines{display:flex;flex-direction:column;gap:6px;}
.atm-machines .where{font-size:11px;color:var(--cream-500);display:flex;align-items:center;gap:6px;}
.atm-machines .where .ic{fill:var(--brass-500);width:14px;height:14px;}
.atm-machines .seg{display:flex;}
.atm-machines .seg button{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;height:40px;line-height:1.25;gap:0;}
.atm-machines .seg button em{font-style:normal;font-size:11px;color:var(--cream-500);}
.atm-machines .seg button.on em{color:var(--brass-300);}
.atm-machines .seg button[disabled]{opacity:.45;cursor:not-allowed;}
.atm-wallet{display:flex;flex-direction:column;gap:6px;}
.atm-wallet .dslot{height:118px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:linear-gradient(180deg,#2a1f18,#16100c);box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 0 0 1px var(--brass-900);}
.atm-wallet .hint{font-size:11px;color:var(--cream-500);min-height:16px;}
.dcard{position:relative;width:168px;height:104px;border-radius:8px;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,#34393f,#171a1e 58%,#0c0e10);
  box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .3s ease-out,opacity .3s ease-out;}
.dcard::after{content:"";position:absolute;right:0;top:0;bottom:0;width:10px;background:var(--bank,#c9a052);opacity:.9;}
.dcard.b-CBA{--bank:#d9b02c;} .dcard.b-WBC{--bank:#b3182a;} .dcard.b-ANZ{--bank:#1f6fb2;} .dcard.b-NAB{--bank:#c2272d;}
.dcard.ready:hover{transform:translateY(-3px);}
.dcard.gone{opacity:0;transform:translateX(-60px) scale(.6);pointer-events:none;}
.dcard .emv{position:absolute;left:16px;top:36px;width:28px;height:21px;border-radius:4px;background:linear-gradient(135deg,#f3d98c,#b8913a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);}
.dcard .emv::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.3);}
.dcard .emv::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(0,0,0,.3);}
.dcard .bk{position:absolute;left:16px;top:11px;font:700 13px var(--sans);color:#ece3cc;letter-spacing:.01em;}
.dcard .ty{position:absolute;right:20px;top:13px;font:700 10px var(--sans);letter-spacing:.16em;color:#cfd6dc;}
.dcard .no{position:absolute;left:16px;bottom:27px;font:12px var(--mono);letter-spacing:.02em;color:#e6e4dc;}
.dcard .nm{position:absolute;left:16px;bottom:10px;font:10px var(--sans);letter-spacing:.12em;color:#b9c0c6;}
.dcard .wave{display:none;}
.atm-rows{display:flex;flex-direction:column;}
.atm-rows .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:12px;}
.atm-rows .row:last-child{border-bottom:0;}
.atm-rows .row span{color:var(--cream-500);}
.atm-rows .row b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--brass-100);text-align:right;}
.atm-rows .row b.sm{font-size:12px;color:var(--cream-300);font-family:var(--sans);}
.atm-law{font-size:11px;color:var(--cream-700);line-height:1.6;}
/* 收据纸（ATM / 场内消费共用） */
.rcpaper{background:linear-gradient(180deg,#f6f2e7,#ebe4d2);color:#2b2a26;font:11px/1.5 var(--mono);padding:10px 12px 12px;border-radius:1px;
  box-shadow:0 4px 12px rgba(0,0,0,.55);animation:rcIn .3s ease-out;}
@keyframes rcIn{from{transform:translateY(-10px);opacity:0;}}
.atm-rc{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:6px 0;overflow:auto;cursor:pointer;
  background:linear-gradient(180deg,rgba(12,9,7,.82),rgba(12,9,7,.9));border-radius:6px;}
.atm-rc:empty{display:none;}
.atm-rc .rcpaper{width:100%;max-width:270px;margin:0 auto;flex:none;}
.atm-rc .rc-x{font-size:11px;color:var(--cream-500);}
.rcpaper .rh{text-align:center;font-weight:700;font-size:12px;margin-bottom:6px;display:flex;flex-direction:column;}
.rcpaper .rh small{font-weight:400;font-size:10px;opacity:1;}
.rcpaper .rl{display:flex;justify-content:space-between;gap:10px;}
.rcpaper .rl span:last-child{text-align:right;white-space:nowrap;}
.rcpaper .rl.big{font-weight:700;font-size:13px;margin-top:2px;}
.rcpaper .rs{border-top:1px solid rgba(0,0,0,.35);margin:6px 0;}
.rcpaper .rf{text-align:center;margin-top:6px;font-size:10px;line-height:1.5;}

@container vp (max-width:900px){
  .atm-stage{grid-template-columns:1fr;}
}
@container vp (max-height:760px){
  #muAtm .mb{padding:8px 14px;}
  #muAtm .mh{padding:10px 16px 8px;}
  #muAtm .mf{padding:8px 16px 10px;}
  .atm-top{height:26px;margin-bottom:8px;}
  .atm-pad{grid-auto-rows:26px;gap:4px;}
  .atm-disp .clip{height:48px;}
  .atm-wallet .dslot{height:108px;}
}

/* =========================== Cage 收银台 =========================== */
.modal-box.cage-box{width:900px;}
#muCage .mb{padding:12px 16px;}
.cage-window{position:relative;height:134px;border-radius:6px;overflow:hidden;margin-bottom:12px;box-shadow:0 0 0 1px var(--brass-900),inset 0 -1px 0 rgba(0,0,0,.6);}
.cw-wall{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 120px),
  repeating-linear-gradient(94deg,rgba(0,0,0,.12) 0 2px,transparent 2px 7px,rgba(255,255,255,.025) 7px 9px,transparent 9px 23px),
  radial-gradient(ellipse at 50% 0%,rgba(255,210,150,.18),transparent 60%),
  linear-gradient(180deg,var(--wood-300),var(--wood-500) 40%,var(--wood-700));}
.cw-sign{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;align-items:baseline;gap:12px;padding:4px 18px;border-radius:2px;white-space:nowrap;
  pointer-events:none;
  background:linear-gradient(180deg,#1b140e,#0e0a07);border:1px solid var(--brass-700);box-shadow:0 2px 6px rgba(0,0,0,.6),var(--hi-brass);}
.cw-sign b{font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.34em;color:var(--brass-300);padding-left:.34em;}
.cw-sign small{font-size:10px;letter-spacing:.1em;color:var(--cream-500);opacity:1;}
.cw-grille{position:absolute;left:24%;right:24%;top:42px;height:44px;display:flex;justify-content:space-evenly;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,220,160,.2),rgba(255,220,160,.04) 70%),linear-gradient(180deg,#2a2018,#171109);
  box-shadow:0 0 0 2px var(--brass-700),0 0 0 4px rgba(0,0,0,.5),inset 0 8px 16px rgba(0,0,0,.5);}
.cw-grille i{width:2px;height:100%;background:linear-gradient(90deg,var(--brass-700),var(--brass-300),var(--brass-700));opacity:.8;}
.cw-teller{position:absolute;left:50%;top:52px;width:60px;height:40px;transform:translateX(-50%);pointer-events:none;}
.cw-teller .lamp{position:absolute;left:50%;top:0;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,155,.35),transparent 70%);}
.cw-counter{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;gap:18px;padding:0 16px;
  background:
    linear-gradient(115deg,transparent 0 30%,rgba(120,110,95,.18) 31%,transparent 33% 62%,rgba(120,110,95,.14) 63%,transparent 65%),
    linear-gradient(180deg,#efe9dc,#c9c0ad 70%,#a79d88);
  border-top:2px solid var(--brass-700);box-shadow:0 -6px 12px rgba(0,0,0,.35);}
.cw-counter .idle{align-self:center;font-size:11px;color:#6d6454;letter-spacing:.08em;}
.cw-counter.push>*{animation:cagePush .35s ease-out;}
@keyframes cagePush{from{transform:translateY(-22px);opacity:0;}}
.cw-counter .ct{display:flex;align-items:center;gap:14px;}
.cw-counter .cc{display:flex;align-items:flex-end;gap:4px;}
.cw-counter .cc .chipstack{margin-top:8px;}
.cw-counter .cc small{font-size:11px;color:#4d4536;font-family:var(--serif);opacity:1;line-height:1;}
.cw-counter .bundle{position:relative;width:96px;height:30px;}
.cw-counter .bundle i{position:absolute;left:calc(var(--k,0) * 3px);top:calc(var(--k,0) * -2px);width:90px;height:26px;border-radius:2px;background:linear-gradient(135deg,#ecd06a,#c99d2e 60%,#a57b1d);box-shadow:0 1px 2px rgba(0,0,0,.4);}
.cw-counter .bundle i:nth-child(2){--k:1;} .cw-counter .bundle i:nth-child(3){--k:2;}
.cw-counter .bundle b{position:absolute;left:30px;top:1px;width:30px;height:24px;display:flex;align-items:center;justify-content:center;background:#f4efe2;color:#3a2a10;
  font:700 10px var(--serif);writing-mode:horizontal-tb;box-shadow:0 0 0 1px rgba(0,0,0,.2);z-index:2;width:auto;padding:0 4px;left:24px;}
.cw-counter .slip{flex-direction:column;align-items:flex-start;gap:0;padding:3px 10px;background:linear-gradient(180deg,#f7f3e8,#e8e1cf);color:#2b2a26;border-radius:1px;
  box-shadow:0 2px 4px rgba(0,0,0,.35);font-size:11px;line-height:1.25;}
.cw-counter .slip .r1{display:flex;align-items:baseline;gap:10px;white-space:nowrap;}
.cw-counter .slip b{font:700 10px var(--sans);letter-spacing:.1em;color:#5a4a2a;}
.cw-counter .slip span{font:700 13px var(--mono);}
.cw-counter .slip small{font-size:10px;opacity:1;color:#5a5448;}
.cw-counter .slip.cheque{background:linear-gradient(180deg,#eef3e6,#dde6d2);}
.cw-counter .slip.frozen{background:linear-gradient(180deg,#e8eef5,#d6dee8);}
.eftpos{display:flex;flex-direction:column;align-items:center;gap:3px;width:78px;padding:5px;border-radius:6px;background:linear-gradient(180deg,#34383d,#1d1f22);box-shadow:0 3px 6px rgba(0,0,0,.5);}
.eftpos .lcd{width:100%;padding:2px 4px;border-radius:2px;background:linear-gradient(180deg,#b9c7a8,#94a585);color:#1d2a14;display:flex;flex-direction:column;align-items:center;line-height:1.15;}
.eftpos .lcd b{font:700 10px var(--mono);letter-spacing:.04em;}
.eftpos .lcd small{font:10px var(--mono);opacity:1;}
.eftpos.ok .lcd{background:linear-gradient(180deg,#bfe0b0,#8dbb7a);}
.eftpos .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:100%;}
.eftpos .keys i{height:4px;border-radius:1px;background:#8d959c;}
.cage-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;}
.cage-tabs{display:flex;margin-bottom:10px;}
.cage-tabs button{flex:1;justify-content:center;gap:6px;height:32px;}
.cage-tabs .ic{width:14px;height:14px;fill:currentColor;}
.cage-form{display:flex;flex-direction:column;gap:8px;}
/* 取现金 / 进场（原来收银台首屏那一屏）：四个快捷额 + 一个大号输入框 */
.cage-take{display:flex;}
.cage-take button{flex:1;justify-content:center;height:36px;font-family:var(--serif);font-size:15px;letter-spacing:.02em;}
#cageTake{height:48px;text-align:right;font-size:24px;}
.cage-meth{display:flex;}
.cage-meth button{flex:1;justify-content:center;}
.cage-colour{display:flex;align-items:center;gap:10px;}
.cage-colour .lbl,.cage-via .lbl{font-size:11px;color:var(--cream-500);letter-spacing:.06em;}
.cage-chips{display:flex;gap:16px;align-items:flex-end;min-height:66px;padding:8px 14px 6px;border-radius:6px;flex-wrap:wrap;
  background:radial-gradient(ellipse at 50% 0,rgba(255,220,160,.1),transparent 65%),linear-gradient(180deg,var(--felt-700),var(--felt-900));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 0 1px var(--brass-900);}
.cage-chips .cc{display:flex;flex-direction:column;align-items:center;gap:4px;}
.cage-chips .cc small{font-size:11px;color:var(--cream-100);font-family:var(--serif);opacity:1;white-space:nowrap;}
.cage-chips .cc .chipstack{height:46px;}
/* .cc 和会员卡面（css/loop.css .cc 440×278）撞了类名：桌面上也还原成一摞筹码的大小（手机版在 mobile.css） */
.cage-chips .cc,.cw-counter .cc{width:auto;height:auto;margin:0;border-radius:0;box-shadow:none;overflow:visible;isolation:auto;}
.cage-chips .cc::before,.cw-counter .cc::before{content:none;}
.cage-chips .empty{align-self:center;font-size:12px;color:var(--cream-300);opacity:.8;}
.cage-have{display:flex;gap:22px;font-size:12px;color:var(--cream-500);align-items:baseline;}
.cage-have b{font-size:19px;font-weight:400;color:var(--brass-100);margin-left:4px;}
.cage-via{display:flex;flex-direction:column;gap:5px;}
.cage-via .seg{display:flex;}
.cage-via .seg button{flex:1;justify-content:center;padding:0 8px;}
.cage-free{padding:16px;border:1px solid var(--brass-900);border-radius:6px;background:rgba(0,0,0,.2);}
.cage-free b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--brass-300);}
.cage-free p{font-size:12px;line-height:1.8;margin-top:6px;color:var(--cream-300);}
.cage-side{border-left:1px solid var(--hairline);padding-left:16px;margin:0;}
.cage-side .h{margin-bottom:2px;}
.cage-side .h.sub{margin-top:12px;}
.mu-rows .row b.warn{color:var(--warn);}
.mu-rows .row b.sm{font-size:12px;font-family:var(--sans);color:var(--cream-300);}
.mu-rows .row b.dim{font-size:13px;color:var(--cream-500);}
.mu-note.warn{color:#ffd6a0;}
@container vp (max-width:900px){ .cage-body{grid-template-columns:1fr;} .cage-side{border-left:0;padding-left:0;} }
@container vp (max-height:760px){
  #muCage .mh{padding:10px 16px 8px;} #muCage .mf{padding:8px 16px 10px;} #muCage .mb{padding:10px 16px;}
  .cage-window{height:104px;margin-bottom:10px;} .cw-sign{top:5px;padding:3px 14px;} .cw-grille{top:34px;height:28px;} .cw-teller{top:34px;} .cw-counter{height:40px;}
  .cage-chips{min-height:56px;padding:6px 12px 4px;}
  .cage-chips .cc .chipstack{height:40px;}
  .cage-form .mu-rows .row{padding:4px 0;}
}