@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{color:#111827;--blue:#0038a8;--deep:#002576;--yellow:#ffcd00;--line:#e2e8f0;background:#e8edf5;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{background:#e8edf5;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.mobile-app,.mobile-login,.checkin-page{background:#f8fafc;width:390px;min-height:100vh;margin:auto;position:relative;box-shadow:0 0 22px #172a4814}.mobile-page{min-height:100vh;padding-bottom:80px}.bottom-nav{z-index:5;border-top:1px solid var(--line);width:390px;height:72px;padding:5px 22px env(safe-area-inset-bottom);background:#fff;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0}.bottom-nav a{flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:10px;display:flex}.bottom-nav a span{border-radius:7px;place-items:center;width:46px;height:38px;display:grid}.bottom-nav a.router-link-active span{background:var(--yellow);color:#111}.welcome{background:#fff;align-items:center;height:70px;padding:11px 15px;display:flex}.welcome div{flex:1}.welcome h1{color:#031f72;margin:0 0 7px;font-size:16px}.welcome p{background:#f1f4f9;border-radius:12px;margin:0;padding:4px 9px;font-size:10px;display:inline-block}.portrait{color:#fff;background:linear-gradient(150deg,#b8d5f5,#425c84);border-radius:7px;place-items:center;width:40px;height:40px;font-size:19px;font-weight:700;display:grid}.home-screen{padding-bottom:20px}.balance-card{color:#fff;background:linear-gradient(130deg,#002b97,#174fc1);border-radius:12px;margin:10px 10px 16px;padding:16px 16px 13px}.balance-label{align-items:center;gap:7px;font-size:12px;display:flex}.balance-label a{align-items:center;margin-left:auto;font-size:10px;display:flex}.balance-card>strong{margin:14px 0;font-size:26px;display:block}.balance-card>div:last-child{grid-template-columns:1fr 1fr;gap:8px;display:grid}.balance-card button{color:#fff;background:#ffffff3b;border:1px solid #ffffff40;border-radius:4px;justify-content:center;align-items:center;gap:7px;height:39px;display:flex}.balance-card button:first-child{color:#172554;background:#ffcd00;border-color:#ffcd00}.quick-card{border:1px solid var(--line);background:#fff;border-radius:9px;grid-template-columns:repeat(3,1fr);margin:0 10px 17px;padding:19px 8px;display:grid}.quick-card a{flex-direction:column;align-items:center;gap:9px;font-size:11px;display:flex}.quick-icon{border-radius:8px;place-items:center;width:36px;height:36px;display:grid}.quick-icon svg{width:18px}.quick-icon.orange{color:#f97316;background:#fff4ed}.quick-icon.green{color:#16a34a;background:#effdf5}.quick-icon.blue{color:#2563eb;background:#eef2ff}.section-title{align-items:center;gap:6px;margin:0 0 10px;padding:0 12px;font-size:15px;display:flex}.reminder-card{border-left:3px solid #f59e0b;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;border-radius:7px;margin:0 10px;padding:12px}.reminder-card>div{align-items:center;display:flex}.reminder-card small{color:#94a3b8;margin-left:auto}.reminder-card p{color:#5b6475;margin:10px 0;font-size:11px}.reminder-card a{color:#002576;justify-content:flex-end;align-items:center;font-size:10px;font-weight:600;display:flex}.status-pill{color:#d97706;background:#fff0d4;border-radius:4px;padding:4px 7px;font-size:10px;display:inline-block}.mobile-login{background:linear-gradient(#eaf0f9,#f8fafc);padding:55px 10px 30px}.mobile-login .lang{background:0 0;border:0;font-size:10px;position:absolute;bottom:16px;right:18px}.mobile-brand{text-align:center}.mobile-brand>span{color:#002576;background:#fff;border-radius:12px;place-items:center;width:46px;height:46px;margin:auto;display:grid;box-shadow:0 3px 10px #0000000d}.mobile-brand h1{margin:16px 0 6px;font-size:18px}.mobile-brand p{color:#667085;margin:0 0 19px;font-size:10px}.mobile-card{border:1px solid var(--line);background:#fff;border-radius:10px}.login-card{padding:18px 14px 17px;box-shadow:0 2px 5px #1e293b14}.login-card h2{margin:0 0 18px;font-size:15px}.login-card>label,.form-card>label{gap:7px;margin:13px 0;font-size:10px;font-weight:600;display:grid}.login-card select,.form-card input,.form-card select,.form-card textarea{background:#fbfaff;border:1px solid #dce1eb;border-radius:3px;outline:0;width:100%;height:42px;padding:0 10px}.mobile-input{background:#fbfaff;border:1px solid #dce1eb;align-items:center;gap:8px;height:42px;padding:0 9px;display:flex}.mobile-input input{background:0 0;border:0;outline:0;flex:1}.mobile-input button{color:#64748b;background:0 0;border:0}.mobile-primary,.mobile-secondary{border:0;border-radius:3px;justify-content:center;align-items:center;gap:7px;min-height:47px;font-weight:700;display:flex}.mobile-primary{color:#fff;background:#002b8d}.mobile-secondary{color:#002576;background:#fff;border:1px solid #aebbd3}.login-card .mobile-primary{width:100%;min-height:39px}.login-card>a{text-align:center;color:#29427d;margin-top:14px;font-size:9px;display:block}.mobile-error{color:#dc2626;font-size:11px}.checkin-link{text-align:center;color:#0038a8;margin-top:18px;font-size:11px;display:block}.checkin-page{background:#f5f7fa;padding-bottom:80px}.checkin-page>header{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:50px;padding:0 11px;font-size:11px;display:flex}.checkin-page header>a{display:none}.checkin-page header b{color:#032474;align-items:center;gap:5px;display:flex}.checkin-page header b svg{width:17px}.checkin-intro{padding:16px 9px}.checkin-intro h1{margin:0 0 8px;font-size:17px}.checkin-intro p{color:#667085;font-size:10px}.steps{grid-template-columns:repeat(3,1fr);margin-top:16px;display:grid;position:relative}.steps:before{content:"";background:#cbd5e1;height:1px;position:absolute;top:12px;left:55px;right:55px}.steps span{z-index:1;text-align:center;color:#94a3b8;font-size:9px}.steps i{background:#e2e8f0;border-radius:50%;place-items:center;width:24px;height:24px;margin:0 auto 6px;font-style:normal;display:grid}.steps span.active{color:#002576}.steps span.active i{color:#fff;background:#002576}.form-card{margin:0 9px;padding:13px 10px}.form-card h3{color:#002576;font-size:11px}.form-card textarea{resize:none;height:110px;padding:10px}.two-fields{grid-template-columns:1fr 1fr;gap:9px;display:grid}.upload-box{color:#395287;position:relative;background:#f8faff!important;border:1px dashed #9eacc5!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:6px!important;min-height:100px!important;display:flex!important}.upload-box input{opacity:0;height:auto;position:absolute;inset:0}.upload-box b{font-size:10px}.upload-box small{color:#94a3b8;font-size:9px}.checkin-footer{border-top:1px solid var(--line);background:#fff;gap:9px;width:390px;padding:9px;display:flex;position:fixed;bottom:0}.checkin-footer button{flex:1}.pad{padding:0 12px}.success-screen{text-align:center;color:#15803d;flex-direction:column;align-items:center;min-height:65vh;padding:75px 25px;display:flex}.success-screen h1,.success-screen h2{color:#111827}.success-screen p{color:#64748b;font-size:12px}.success-screen .mobile-primary{width:100%;margin-top:20px}.subpage,.list-screen{background:#f8fafc;min-height:calc(100vh - 72px)}.sub-header{border-bottom:1px solid var(--line);text-align:center;background:#fff;grid-template-columns:40px 1fr 40px;align-items:center;height:52px;display:grid}.sub-header h1{margin:0;font-size:16px}.sub-header button{background:0 0;border:0}.sub-header span{display:block}.blue-header{color:#fff;background:#002d8e}.screen-heading{padding:18px 14px 14px;display:flex}.screen-heading h1{margin:0 0 5px;font-size:20px}.screen-heading p{color:#64748b;margin:0;font-size:10px}.screen-heading a{color:#fff;background:#0038a8;border-radius:50%;place-items:center;width:38px;height:38px;margin-left:auto;display:grid}.tabs{border-bottom:1px solid var(--line);background:#fff;grid-template-columns:repeat(3,1fr);display:grid}.tabs button{color:#64748b;background:#fff;border:0;height:43px}.tabs button.active{color:#002576;border-bottom:2px solid #002576;font-weight:600}.ticket-list{padding:11px}.mobile-ticket{border:1px solid var(--line);background:#fff;border-radius:8px;margin-bottom:10px;padding:13px;display:block}.mobile-ticket>div{display:flex}.mobile-ticket>div span{margin-left:auto}.mobile-ticket p{color:#475569;margin:13px 0;font-size:12px}.mobile-ticket footer{color:#94a3b8;align-items:center;display:flex}.mobile-ticket footer svg{width:16px;margin-left:auto}.detail-content{padding:11px}.order-summary,.detail-card{margin-bottom:10px;padding:14px}.order-summary>div{display:flex}.order-summary span{margin-left:auto}.order-summary p,.detail-card p{color:#64748b;margin:10px 0 0;font-size:11px}.detail-card h3{font-size:13px}.timeline{margin:15px 0;padding:0;list-style:none}.timeline li{color:#94a3b8;gap:10px;padding-bottom:26px;display:flex;position:relative}.timeline li:not(:last-child):after{content:"";background:#cbd5e1;width:1px;position:absolute;top:28px;bottom:0;left:14px}.timeline li i{z-index:1;background:#e2e8f0;border-radius:50%;place-items:center;width:29px;height:29px;display:grid}.timeline li i svg{width:14px}.timeline li div{flex-direction:column;gap:4px;display:flex}.timeline li small{font-size:9px}.timeline li.done{color:#0038a8}.timeline li.done i{background:#dbeafe}.priority-buttons{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.priority-buttons button{border:1px solid var(--line);background:#fff;height:40px}.priority-buttons button.active{color:#0038a8;background:#eaf0ff;border-color:#0038a8}.wallet-hero{color:#fff;background:linear-gradient(145deg,#0038a8,#174fc1);padding:25px 18px}.wallet-hero small{opacity:.8}.wallet-hero strong{margin:11px 0;font-size:31px;display:block}.wallet-hero p{opacity:.7;font-size:9px}.month-filter{background:#fff;align-items:center;height:54px;padding:0 14px;display:flex}.month-filter select{color:#64748b;border:0;margin-left:auto}.transaction-list{padding:0 10px}.transaction-list article{border-bottom:1px solid var(--line);align-items:center;padding:14px 4px;display:flex}.transaction-list article>span{border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.transaction-list article>span svg{width:17px}.transaction-list .income{color:#15803d;background:#dcfce7}.transaction-list .expense{color:#b91c1c;background:#fee2e2}.transaction-list article>div{flex-direction:column;gap:4px;margin-left:10px;display:flex}.transaction-list article small{color:#94a3b8;font-size:9px}.transaction-list article>strong{margin-left:auto}.income-text{color:#15803d}.expense-text{color:#b91c1c}.profile-screen>header{color:#fff;background:#002c8b;border-radius:0 0 7px 7px;align-items:center;height:130px;padding:20px 14px;display:flex}.profile-avatar{background:linear-gradient(145deg,#f4d6c4,#6c8fb8);border:3px solid #fff;border-radius:8px;place-items:center;width:52px;height:52px;font-size:22px;display:grid}.profile-screen header div{margin-left:10px}.profile-screen header h1{margin:0 0 8px;font-size:17px}.profile-screen header p{margin:0;font-size:10px}.profile-screen header button{color:#fff;background:#ffffff21;border:0;border-radius:6px;width:38px;height:38px;margin-left:auto}.profile-menu{background:#fff;margin:16px 9px}.profile-menu a{border-bottom:1px solid var(--line);align-items:center;gap:12px;height:53px;padding:0 13px;display:flex}.profile-menu a>svg:first-child{color:#0038a8;width:18px}.profile-menu a>svg:last-child{color:#94a3b8;width:16px;margin-left:auto}.profile-menu span{flex:1;font-size:11px}.profile-menu small{float:right;color:#94a3b8}.logout-button{color:#b91c1c;background:#ffd8d3;border:0;border-radius:7px;justify-content:center;align-items:center;gap:8px;width:calc(100% - 38px);height:46px;margin:15px 19px;display:flex}@media (width<=430px){body{background:#f8fafc}.mobile-app,.mobile-login,.checkin-page{width:100%;box-shadow:none}.bottom-nav,.checkin-footer{width:100%}}.balance-card>div:last-child a{color:#fff;background:#ffffff3b;border:1px solid #ffffff40;border-radius:4px;justify-content:center;align-items:center;gap:7px;height:39px;text-decoration:none;display:flex}.balance-card>div:last-child a:first-child{color:#172554;background:#ffcd00;border-color:#ffcd00}.bill-list{padding:14px 10px 30px}.bill-card{align-items:center;gap:10px;margin-bottom:10px;padding:14px;display:flex}.bill-card>span{border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.bill-card>span svg{width:18px}.bill-card .paid{color:#15803d;background:#dcfce7}.bill-card .unpaid{color:#b45309;background:#fef3c7}.bill-card>div{flex-direction:column;flex:1;gap:3px;display:flex}.bill-card small{color:#94a3b8;font-size:9px}.bill-card em{color:#64748b;font-size:9px;font-style:normal}.bill-card>aside{justify-items:end;gap:7px;display:grid}.bill-card>aside strong{color:#172554}.bill-card>aside button{color:#fff;background:#0038a8;border:0;border-radius:4px;height:28px;padding:0 9px;font-size:9px}.bill-card .payment-rejected{color:#b91c1c}.payment-mask{z-index:30;background:#0f172a94;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.payment-card{border-radius:14px 14px 0 0;width:390px;padding:18px 16px 24px}.payment-card header{align-items:start;margin-bottom:15px;display:flex}.payment-card header div{flex:1}.payment-card h3,.payment-card header p{margin:0}.payment-card header p{color:#64748b;margin-top:5px;font-size:11px}.payment-card header button{color:#64748b;background:0 0;border:0}.payment-card label{color:#475569;gap:6px;margin:12px 0;font-size:11px;display:grid}.payment-card input,.payment-card select,.payment-card textarea{border:1px solid var(--line);background:#fbfaff;width:100%;min-height:42px;padding:9px 10px}.payment-card textarea{resize:none;min-height:70px}.payment-card .mobile-primary{width:100%;margin-top:14px}.payment-success{color:#15803d;font-size:11px}.quick-card .quick-disabled{color:#94a3b8;flex-direction:column;align-items:center;gap:9px;font-size:11px;display:flex}.login-card .forgot-disabled{text-align:center;color:#94a3b8;margin-top:14px;font-size:9px;display:block}@media (width<=430px){.payment-card{width:100%}}.mobile-empty{text-align:center;color:#94a3b8;padding:35px}.profile-menu button{border:0;border-bottom:1px solid var(--line);color:#1a1b22;text-align:left;background:#fff;align-items:center;gap:12px;width:100%;height:53px;padding:0 13px;display:flex}.profile-menu button>svg:first-child{color:#0038a8;width:18px}.profile-menu button>svg:last-child{color:#94a3b8;width:16px;margin-left:auto}.profile-edit{margin:12px 10px;padding:14px}.profile-edit h3{font-size:14px}.profile-edit label{gap:6px;margin:10px 0;font-size:11px;display:grid}.profile-edit input{border:1px solid var(--line);height:44px;padding:0 10px}.credential-mask{z-index:30;background:#0f172a94;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.credential-card{text-align:center;color:#0f2f79;justify-items:center;gap:8px;width:min(340px,100%);padding:32px 24px;display:grid;position:relative}.credential-card h3,.credential-card p{margin:0}.credential-card small{color:#64748b}.credential-close{color:#64748b;background:0 0;border:0;position:absolute;top:10px;right:10px}.tenant-info-card{margin:18px;padding:22px}.tenant-info-card h3{font-size:21px}.tenant-info-card p{color:#31549a;border-bottom:1px solid #edf2f7;grid-template-columns:24px 1fr;align-items:center;gap:5px 10px;margin:0;padding:12px 0;display:grid}.tenant-info-card p span{color:#64748b}.tenant-info-card p b{color:#17223a;grid-column:2}.tenant-info-card>small{color:#94a3b8;margin-top:18px;line-height:1.6;display:block}