.amount-box,.insurance-box{background:#fff;border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 2px 12px #17203912}.amount-box label{font-weight:800}.amount-input{display:flex;align-items:center;margin:8px 0;border:1px solid #aeb8c9;border-radius:12px;padding:0 12px;font-size:20px}.amount-input input,.insurance-amount{border:0;outline:0;font-size:18px;padding:13px 8px;width:100%}.amount-box small{color:#667085}.insurance-box h2{margin-bottom:12px}.purchase-row{padding:13px 0;border-top:1px solid #e6e9f0}.purchase-row span{display:block;font-size:13px;color:#65738b;margin:5px 0}.purchase-row div{display:flex;gap:8px}.insurance-amount{border:1px solid #aeb8c9;border-radius:10px;min-width:0}.buy-button{border:0;border-radius:10px;background:#263e91;color:#fff;font-weight:800;padding:0 14px;min-height:48px;white-space:nowrap}.settle-row{display:flex;gap:10px;align-items:end;margin-top:14px}.settle-row label{font-size:14px;font-weight:700;flex:1}.settle-row select{display:block;width:100%;font-size:17px;margin-top:5px;padding:10px;border-radius:10px;border:1px solid #aeb8c9}.settlement{border-radius:12px;padding:12px;margin:13px 0}.settlement p{margin:5px 0}.paid{background:#ffe0e4;color:#941729}.collected{background:#fff2c8;color:#704b00}
/* Mobile PWA polish: presentation only; no application state or logic is changed. */
html{min-height:100%;background:#f5f7fb}body{min-height:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}button,input,select{font:inherit;touch-action:manipulation}.icon-button,.phase-button,.card-slot,.primary-button,.secondary-button,.buy-button,.text-button,.rank-grid button{touch-action:manipulation}@media(max-width:430px){.app-shell{width:100%;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}header{margin-bottom:14px}h1{font-size:27px}h2{font-size:18px}.phase-selector{gap:6px}.phase-button{min-height:50px;font-size:13px}.rule-note{padding:12px;font-size:13px}.hand{padding:14px;margin:11px 0}.card-slots{gap:8px;margin-top:11px}.card-slot{min-height:70px;font-size:23px}.status{padding:16px;margin:14px 0 10px}.status-title{font-size:19px}.amount-box,.insurance-box{padding:14px;border-radius:16px}.amount-input input,.insurance-amount{font-size:16px}.purchase-row div,.settle-row{flex-wrap:wrap}.purchase-row div .insurance-amount{flex:1 1 160px}.purchase-row div .buy-button,.settle-row .buy-button{flex:1 0 112px;min-height:48px}.settle-row label{flex-basis:100%}.record{align-items:flex-start;flex-wrap:wrap;padding:12px}.record>div{min-width:0;flex:1 1 180px}.badge{margin-left:auto}.section-heading{gap:8px}.text-button{min-height:40px;padding:8px 4px}.rank-grid{gap:8px}.rank-grid button{height:52px}.login-cover{padding:16px}.login-card{padding:24px 20px}.login-card input,.login-card select{font-size:16px}}@media(min-width:621px){.app-shell{padding-left:24px;padding-right:24px}}
/* Keep the brand centred on the whole mobile content width; the info button is decorative chrome only. */
@media(max-width:430px){.app-shell>header{position:relative!important;display:block!important;width:100%!important;max-width:none!important;margin:0 0 14px!important;padding:51px 0 12px!important;text-align:center!important}.app-shell>header>div{display:block!important;width:100%!important;text-align:center!important}.app-shell>header .eyebrow,.app-shell>header h1{width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}.app-shell>header h1{font-size:clamp(27px,8.2vw,34px)!important;line-height:1.15!important;white-space:nowrap!important}.app-shell>header .icon-button{position:absolute!important;top:max(2px,env(safe-area-inset-top))!important;right:0!important;left:auto!important;margin:0!important}}
/* Brand order: Chinese name first, English descriptor below it. */
.app-shell>header>div{display:flex;flex-direction:column;align-items:center}.app-shell>header h1{order:1}.app-shell>header .eyebrow{order:2;margin:7px 0 0!important}@media(max-width:430px){.app-shell>header>div{display:flex!important;flex-direction:column!important;align-items:center!important}.app-shell>header .eyebrow{margin:7px 0 0!important}}