:root{--blue:#1479cb;--blue2:#0d60b2;--ink:#173e5b;--muted:#667f92;--line:#b9d8ea;--orange:#f48a16;--green:#16a05b;--soft:#eef9ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef9ff,#f8fcff)}button{font:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px;background:linear-gradient(135deg,#147fd0,#0c62b5);color:#fff;box-shadow:0 4px 12px rgba(12,70,120,.18)}.brand-kicker{font-size:.75rem;font-weight:900;letter-spacing:.08em}.brand-block h1{margin:3px 0 0;font-size:clamp(1.45rem,2vw,2.15rem);line-height:1}.top-actions{display:flex;gap:8px}.icon-btn{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.1);color:#fff;border-radius:13px;padding:9px 13px;font-weight:900;cursor:pointer}
.money-dock{margin:10px 16px 8px;padding:9px 11px 10px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fcff);box-shadow:0 7px 18px rgba(31,88,127,.07)}.dock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.dock-title{display:flex;align-items:baseline;gap:9px}.dock-title strong{font-size:.86rem;color:#0e70c7;text-transform:uppercase;letter-spacing:.04em}.dock-title span{font-size:.72rem;color:#668095;font-weight:800}.face-switch{display:flex;padding:3px;border-radius:11px;background:#e8f4fb}.face-switch button{min-height:32px;padding:4px 11px;border:0;border-radius:8px;background:transparent;color:#37617d;font-size:.74rem;font-weight:900;cursor:pointer}.face-switch button.is-active{background:#fff;color:#0d6dbd;box-shadow:0 2px 7px rgba(36,93,129,.12)}.dock-groups{display:flex;align-items:center;gap:10px;min-width:0}.dock-group{display:flex;align-items:center;gap:7px;min-width:0}.dock-group.note-group{flex:1}.dock-divider{width:1px;height:70px;background:#dceaf3;flex:0 0 auto}.group-label{font-size:.63rem;font-weight:950;color:#5a788e;letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg)}.shelf-list{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:1px 2px 3px;scrollbar-width:thin}.shelf-money{flex:0 0 auto;display:grid;place-items:center;gap:2px;border:1px solid #c7dfee;border-radius:11px;background:#fff;color:#1b496b;cursor:pointer;padding:4px 6px;min-height:62px;transition:transform .12s ease,border-color .12s ease,background .12s ease}.shelf-money:hover{border-color:#68b8e4;background:#eff9ff;transform:translateY(-1px)}.shelf-money img{display:block;object-fit:contain}.shelf-money.coin img{width:46px;height:46px}.shelf-money.note img{width:104px;height:46px}.shelf-money span{font-size:.59rem;font-weight:900;white-space:nowrap}.shelf-money img.is-broken{display:none}.shelf-money .img-fallback{display:none;place-items:center;background:#eaf4fa;color:#244d68;font-weight:950;border-radius:9px}.shelf-money.coin .img-fallback{width:46px;height:46px;border-radius:50%}.shelf-money.note .img-fallback{width:104px;height:46px}.shelf-money img.is-broken+.img-fallback{display:grid}
.money-board-wrap{margin:0 16px 8px;flex:1;min-height:0;display:flex;flex-direction:column;border:2px solid #a9d6f0;border-radius:21px;background:#fff;overflow:hidden;box-shadow:0 8px 20px rgba(31,88,127,.06)}.board-toolbar{display:grid;grid-template-columns:minmax(190px,1fr) auto 148px;gap:10px;align-items:center;padding:8px 11px;background:linear-gradient(180deg,#e9f7ff,#dff2ff);border-bottom:1px solid #b9ddef}.selection-info{min-width:0;display:flex;align-items:center;gap:8px}.selection-info span{font-size:.63rem;font-weight:950;color:#668398;text-transform:uppercase}.selection-info strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}.tool-actions{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.tool-actions button{min-height:36px;padding:5px 9px;border:1px solid #b8d5e8;border-radius:10px;background:#fff;color:#214d6c;font-size:.69rem;font-weight:900;cursor:pointer}.tool-actions button:disabled{opacity:.36;cursor:not-allowed}.tool-actions .primary-tool{background:linear-gradient(#22a7ec,#117bcf);border-color:#117bcf;color:#fff}.tool-actions .danger-soft{color:#a04b1b;background:#fff8f1;border-color:#efc08d}.total-box{justify-self:end;min-width:140px;padding:5px 10px;border:0;border-radius:12px;background:linear-gradient(#1a92e0,#1470cc);color:#fff;text-align:center;cursor:pointer}.total-box span{display:block;font-size:.55rem;font-weight:850;opacity:.9}.total-box strong{display:block;font-size:1.05rem;line-height:1.05}.total-box small{display:block;margin-top:2px;font-size:.52rem;opacity:.82}.total-box.is-hidden strong{filter:blur(8px);user-select:none}.money-board{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(rgba(22,121,194,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(22,121,194,.035) 1px,transparent 1px),#fff;background-size:34px 34px;touch-action:none}.empty-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#7890a1;pointer-events:none}.empty-hint strong{font-size:1.25rem;color:#4f7189}.empty-hint span{margin-top:6px;font-size:.82rem}.empty-hint[hidden]{display:none}.money-piece{position:absolute;display:grid;place-items:center;user-select:none;touch-action:none;cursor:grab;filter:drop-shadow(0 5px 8px rgba(39,65,85,.18));transition:outline .1s ease}.money-piece:active{cursor:grabbing}.money-piece.coin{width:118px;height:118px}.money-piece.note{width:244px;height:116px}.money-piece.is-selected{outline:4px solid rgba(244,138,22,.74);outline-offset:4px;border-radius:12px;z-index:20!important}.money-piece.coin.is-selected{border-radius:50%}.money-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none}.piece-fallback{display:none;place-items:center;width:100%;height:100%;border-radius:14px;background:#eaf4fa;color:#244d68;font-weight:950;font-size:1rem}.money-piece.coin .piece-fallback{border-radius:50%}.money-piece img.is-broken{display:none}.money-piece img.is-broken+.piece-fallback{display:grid}.app-footer{display:flex;justify-content:space-between;gap:12px;padding:7px 18px;border-top:1px solid #d5e7f2;background:#f8fcff;color:#607d91;font-size:.69rem}.app-footer strong{color:#0e70c7}
.money-viewer[hidden]{display:none!important}.money-viewer{position:fixed;inset:0;z-index:9999;display:grid;grid-template-rows:auto 1fr auto;background:rgba(5,28,47,.96);color:#fff;padding:18px}.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.viewer-head>div{display:grid;gap:3px}.viewer-head span{font-size:.7rem;font-weight:950;letter-spacing:.1em;color:#8edbff}.viewer-head strong{font-size:clamp(1.3rem,2.2vw,2rem)}.viewer-head button{min-height:44px;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-weight:900;cursor:pointer}.viewer-stage{min-width:0;min-height:0;margin:16px 0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}.viewer-stage img{display:block;object-fit:contain;max-width:92vw;max-height:74vh;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}.viewer-stage.is-coin img{width:min(660px,70vw);height:min(660px,70vw)}.viewer-stage.is-note img{width:min(1280px,88vw);height:auto}.viewer-fallback{display:none;place-items:center;min-width:300px;min-height:200px;padding:30px;border-radius:24px;background:#eaf4fa;color:#244d68;font-size:2rem;font-weight:950}.viewer-stage img.is-broken{display:none}.viewer-stage img.is-broken+.viewer-fallback{display:grid}.viewer-foot{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;color:#c5eaff}.viewer-foot strong{padding:6px 11px;border-radius:999px;background:#1479cb;color:#fff}.viewer-foot span{font-size:.86rem;font-weight:800}
@media(max-width:1000px){.dock-groups{display:grid;grid-template-columns:1fr}.dock-divider{display:none}.group-label{writing-mode:horizontal-tb;transform:none}.dock-group{align-items:flex-start}.board-toolbar{grid-template-columns:1fr}.selection-info{justify-content:center}.total-box{justify-self:center}.money-board-wrap{min-height:560px}.money-piece.note{width:210px;height:100px}.money-piece.coin{width:104px;height:104px}}@media(max-width:650px){.topbar{padding:10px 11px}.brand-block h1{font-size:1.2rem}.top-actions span{display:none}.money-dock,.money-board-wrap{margin-left:7px;margin-right:7px}.dock-head{align-items:flex-start;flex-direction:column}.dock-title{align-items:flex-start;flex-direction:column;gap:2px}.dock-groups{gap:6px}.group-label{display:none}.shelf-money.coin img{width:42px;height:42px}.shelf-money.note img{width:90px;height:42px}.shelf-money.note .img-fallback{width:90px;height:42px}.tool-actions{display:grid;grid-template-columns:repeat(3,1fr)}.tool-actions button{padding:5px;font-size:.64rem}.money-board{min-height:500px}.money-piece.note{width:175px;height:84px}.money-piece.coin{width:90px;height:90px}.app-footer{flex-direction:column}.viewer-head strong{font-size:1.15rem}.viewer-foot{flex-direction:column;gap:7px}.viewer-stage.is-coin img{width:min(82vw,520px);height:min(82vw,520px)}.viewer-stage.is-note img{width:94vw}}

@media(min-width:1001px) and (min-height:650px){
  html,body{height:100%;overflow:hidden}
  .app-shell{height:100vh;min-height:0;overflow:hidden}
  .topbar,.money-dock,.app-footer{flex:0 0 auto}
  .money-dock{margin-top:8px;margin-bottom:6px}
  .money-board-wrap{min-height:0;margin-bottom:6px}
  .money-board{min-height:0}
}