*,*:before,*:after{box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;font-weight:400;color:#111827;background:#f9fafb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%}body{margin:0;padding:0;display:block;background:#f9fafb;overflow-x:hidden}a{color:#990012;text-decoration:none}a:hover{color:#4338ca}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}@media(min-width:768px){body{background:#eef2f7}.app-main{max-width:520px;background:#fff;box-shadow:0 10px 30px #00000014;border-radius:18px;overflow:hidden}}.bottom-nav-label{font-size:12px;font-weight:600;margin-top:2px}@media(min-width:768px){.bottom-nav{max-width:520px;left:50%;transform:translate(-50%);border-radius:18px 18px 0 0}}.page-with-nav{padding-bottom:90px;min-height:100vh;background:#f9fafb}.btn{padding:16px;font-size:16px;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .2s;min-height:52px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.login-header{text-align:center;margin-bottom:24px}.login-header .logo{width:100%}.login-logo{font-size:56px;margin-bottom:12px}.login-title{font-size:26px;font-weight:800;color:#111827;margin:0 0 6px}.login-subtitle{font-size:14px;color:#6b7280;margin:0}.login-form{display:flex;flex-direction:column;gap:16px}.form-group label{font-size:14px;font-weight:700;color:#374151}.login-input{width:100%;padding:14px;font-size:16px;border:2px solid #e5e7eb;border-radius:12px;transition:border-color .2s}.home-header{padding:20px;background:#fff;border-bottom:1px solid #e5e7eb}.home-header .logo{width:50%}.home-greeting{font-size:22px;font-weight:800;color:#111827;margin:0}.home-content{padding:20px;display:flex;flex-direction:column;gap:18px}.balance-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:18px;padding:22px;color:#fff;box-shadow:0 10px 24px #667eea40}.balance-label{font-size:13px;opacity:.9;margin-bottom:6px}.balance-value{font-size:38px;font-weight:900;margin:0 0 6px}.balance-updated{font-size:12px;opacity:.75}.quick-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;background:#fff;border:2px solid #e5e7eb;border-radius:16px;cursor:pointer;transition:all .2s;min-height:100px}.quick-action-btn span{font-size:14px;font-weight:700;color:#374151}.info-card{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.info-card-value{font-size:15px;font-weight:800;color:#111827}.qr-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #e5e7eb;background:#fff}.qr-title{font-size:22px;font-weight:900;color:#111827;margin:0}.qr-content{padding:20px;display:flex;flex-direction:column;gap:18px;align-items:center}.qr-card{width:100%;max-width:340px;padding:20px;background:#fff;border-radius:18px;box-shadow:0 10px 24px #0000000f;text-align:center}.qr-box{width:220px;height:220px;margin:0 auto;border-radius:14px;border:2px dashed #c7d2fe;display:grid;place-items:center;color:#990012;font-weight:800}.history-header{background:#fff;padding:18px 20px;border-bottom:1px solid #e5e7eb}.history-title{font-size:22px;font-weight:900;margin:0;color:#111827}.transaction-item{background:#fff;border-radius:14px;padding:16px;border:1px solid #e5e7eb;margin-bottom:10px}.transaction-main{display:flex;justify-content:space-between;align-items:center;gap:10px}.transaction-station{font-size:15px;font-weight:800;color:#111827}.transaction-time{font-size:13px;color:#6b7280}.transaction-points{font-size:14px;font-weight:900;padding:4px 10px;border-radius:10px}.transaction-points.earned{color:#059669;background:#d1fae5}.transaction-points.redeemed{color:#dc2626;background:#fee2e2}.profile-header{background:#fff;padding:18px 20px;border-bottom:1px solid #e5e7eb}.profile-title{font-size:22px;font-weight:900;margin:0;color:#111827}.profile-content{padding:20px;display:flex;flex-direction:column;gap:14px}.profile-card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;padding:16px}.profile-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f3f4f6}.profile-row:last-child{border-bottom:none}.profile-key{font-size:13px;color:#6b7280;font-weight:700}.profile-val{font-size:14px;color:#111827;font-weight:800;text-align:right}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #e5e7eb;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:1000;box-shadow:0 -2px 8px #0000000d}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 16px;background:none;border:none;cursor:pointer;color:#6b7280;transition:color .2s;min-height:60px;flex:1}.bottom-nav-item:active{opacity:.7}.bottom-nav-item.active{color:#990012}.bottom-nav-label{font-size:12px;font-weight:500;margin-top:2px}@media(min-width:768px){.bottom-nav{max-width:500px;left:50%;transform:translate(-50%);border-radius:20px 20px 0 0}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#d91f3a,#990012)}.login-container{width:100%;max-width:400px;background:#fff;border-radius:24px;padding:32px 24px;box-shadow:0 20px 60px #0000004d}.login-header{text-align:center;margin-bottom:32px}.login-logo{font-size:64px;margin-bottom:16px}.login-title{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 8px}.login-subtitle{font-size:16px;color:#6b7280;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:#374151}.login-input{width:100%;padding:16px;font-size:16px;border:2px solid #e5e7eb;border-radius:12px;transition:border-color .2s;box-sizing:border-box}.login-input:focus{outline:none;border-color:#990012}.otp-input{text-align:center;font-size:24px;letter-spacing:8px;font-weight:600}.otp-info{text-align:center;padding:16px;background:#f3f4f6;border-radius:12px;margin-bottom:8px}.otp-info p{margin:0;color:#6b7280;font-size:14px}.phone-display{font-weight:600;color:#1f2937;font-size:16px;margin-top:4px!important}.error-message{padding:12px;background:#fee2e2;color:#dc2626;border-radius:8px;font-size:14px;text-align:center}.btn{padding:16px;font-size:16px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .2s;min-height:52px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#990012;color:#fff}.btn-primary:not(:disabled):active{background:#4338ca}.btn-large{width:100%}.btn-link{background:none;color:#990012;text-decoration:underline;padding:12px}.btn-link:not(:disabled):active{opacity:.7}.home-page{padding-bottom:80px;min-height:100vh;background:#f9fafb}.home-header{padding:24px 20px 16px;background:#fff;border-bottom:1px solid #e5e7eb}.home-greeting{font-size:24px;font-weight:700;color:#1f2937;margin:0}.home-content{padding:20px;display:flex;flex-direction:column;gap:20px}.balance-card{background:linear-gradient(135deg,#990012,#5e000a);border-radius:20px;padding:24px;color:#fff;box-shadow:0 4px 12px #667eea4d}.balance-label{font-size:14px;opacity:.9;margin-bottom:8px}.balance-value{font-size:40px;font-weight:700;margin-bottom:8px}.wallet-balance{font-size:14px;opacity:.9;margin-bottom:8px}.balance-updated{font-size:12px;opacity:.7;margin-top:8px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;background:#fff;border:2px solid #e5e7eb;border-radius:16px;cursor:pointer;transition:all .2s;min-height:100px}.quick-action-btn:active{background:#f3f4f6;border-color:#990012}.quick-action-btn span{font-size:14px;font-weight:600;color:#374151}.quick-action-btn svg{color:#990012}.info-cards{display:flex;flex-direction:column;gap:12px}.info-card{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;border-radius:16px;border:1px solid #e5e7eb}.info-card svg{color:#990012;flex-shrink:0}.info-card-label{font-size:12px;color:#6b7280;margin-bottom:4px}.info-card-value{font-size:16px;font-weight:600;color:#1f2937}.earned-card{border-left:4px solid #10b981}.visit-card{border-left:4px solid #3b82f6}.loading-state{text-align:center;padding:20px;color:#6b7280}.qr-page{min-height:100vh;background:#fff;padding-bottom:80px;display:flex;flex-direction:column}.qr-page.bright{background:#fff}.qr-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.qr-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.qr-actions{display:flex;gap:8px}.qr-action-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:#f3f4f6;border-radius:12px;cursor:pointer;color:#990012;transition:background .2s}.qr-action-btn:active{background:#e5e7eb}.qr-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:24px}.qr-card-container{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:20px}.qr-code-wrapper{width:100%;max-width:300px;padding:24px;background:#fff;border-radius:20px;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:transform .2s}.qr-code-wrapper:active{transform:scale(.98)}.qr-code{width:100%;height:auto;display:block}.qr-code-large{width:100%;max-width:400px;height:auto;display:block}.qr-tap-hint{text-align:center;font-size:12px;color:#6b7280;margin-top:12px}.qr-info{width:100%;display:flex;flex-direction:column;gap:12px;padding:16px;background:#f9fafb;border-radius:12px}.qr-info-item{display:flex;justify-content:space-between;align-items:center}.qr-info-label{font-size:14px;color:#6b7280}.qr-info-value{font-size:16px;font-weight:600;color:#1f2937}.qr-instructions{text-align:center;padding:16px;background:#f3f4f6;border-radius:12px;max-width:400px}.qr-instructions p{margin:0;font-size:14px;color:#6b7280}.qr-loading{text-align:center;padding:40px;color:#6b7280}.qr-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.qr-overlay-content{display:flex;flex-direction:column;align-items:center;gap:20px}.qr-close-btn{padding:12px 24px;background:#990012;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;min-height:44px}.qr-close-btn:active{background:#4338ca}.history-page{min-height:100vh;background:#f9fafb;padding-bottom:80px}.history-header{background:#fff;padding:20px;border-bottom:1px solid #e5e7eb}.history-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.history-filters{display:flex;gap:8px;padding:16px 20px;background:#fff;border-bottom:1px solid #e5e7eb;overflow-x:auto;-webkit-overflow-scrolling:touch}.filter-chip{padding:8px 16px;border:2px solid #e5e7eb;background:#fff;border-radius:20px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;white-space:nowrap;transition:all .2s;min-height:36px}.filter-chip:active{background:#f3f4f6}.filter-chip.active{background:#990012;color:#fff;border-color:#990012}.history-content{padding:20px}.transaction-group{margin-bottom:24px}.transaction-group-header{font-size:14px;font-weight:600;color:#6b7280;margin-bottom:12px;padding:0 4px}.transaction-item{background:#fff;border-radius:12px;padding:16px;margin-bottom:8px;border:1px solid #e5e7eb;cursor:pointer;transition:all .2s}.transaction-item:active{background:#f9fafb;border-color:#990012}.transaction-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.transaction-station{font-size:16px;font-weight:600;color:#1f2937}.transaction-time{font-size:14px;color:#6b7280}.transaction-details{display:flex;justify-content:space-between;align-items:center;gap:12px}.transaction-info{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#6b7280}.transaction-points{font-size:16px;font-weight:700;padding:4px 12px;border-radius:8px}.transaction-points.earned{color:#10b981;background:#d1fae5}.transaction-points.redeemed{color:#ef4444;background:#fee2e2}.loading-state,.empty-state{text-align:center;padding:40px 20px;color:#6b7280}.transaction-modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.transaction-modal-content{background:#fff;border-radius:20px;width:100%;max-width:500px;max-height:80vh;overflow-y:auto}.transaction-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.transaction-modal-header h2{font-size:20px;font-weight:700;color:#1f2937;margin:0}.modal-close-btn{width:36px;height:36px;border:none;background:#f3f4f6;border-radius:8px;font-size:24px;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.modal-close-btn:active{background:#e5e7eb}.transaction-modal-body{padding:20px;display:flex;flex-direction:column;gap:16px}.detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.detail-row:last-child{border-bottom:none;padding-bottom:0}.detail-label{font-size:14px;color:#6b7280;font-weight:500}.detail-value{font-size:14px;color:#1f2937;font-weight:600;text-align:right;word-break:break-word}.detail-value.earned{color:#10b981}.detail-value.redeemed{color:#ef4444}.profile-page{min-height:100vh;background:#f9fafb;padding-bottom:80px}.profile-header{background:#fff;padding:20px;border-bottom:1px solid #e5e7eb}.profile-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.profile-content{padding:20px;display:flex;flex-direction:column;gap:24px}.profile-section{display:flex;flex-direction:column;gap:12px}.profile-section-header{display:flex;justify-content:space-between;align-items:center}.profile-section-title{font-size:16px;font-weight:600;color:#374151;margin:0}.profile-info-card,.profile-actions-card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;overflow:hidden}.profile-info-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border-bottom:1px solid #f3f4f6}.profile-info-item:last-child{border-bottom:none}.profile-info-icon{color:#6b7280;flex-shrink:0;margin-top:2px}.profile-info-content{flex:1;display:flex;flex-direction:column;gap:6px}.profile-info-label{font-size:13px;color:#6b7280;font-weight:500}.profile-info-value{font-size:15px;color:#1f2937;font-weight:500}.profile-input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;color:#1f2937;background:#fff}.profile-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.edit-profile-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.edit-profile-btn:hover{background:#1d4ed8}.edit-profile-actions{display:flex;gap:8px}.save-profile-btn,.cancel-profile-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.save-profile-btn{background:#10b981;color:#fff}.save-profile-btn:hover{background:#059669}.save-profile-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-profile-btn{background:#f3f4f6;color:#6b7280}.cancel-profile-btn:hover{background:#e5e7eb}.profile-action-item{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #f3f4f6;text-decoration:none;color:inherit;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;cursor:pointer;transition:background .2s}.profile-action-item:last-child{border-bottom:none}.profile-action-item:active{background:#f9fafb}.profile-action-item svg{color:#6b7280;flex-shrink:0}.profile-action-label{font-size:14px;font-weight:500;color:#374151}.profile-action-content{display:flex;flex-direction:column;gap:4px;flex:1}.profile-action-hint{font-size:12px;color:#9ca3af}.language-options{display:flex;gap:8px;margin-top:8px}.language-option{padding:6px 12px;border:2px solid #e5e7eb;background:#fff;border-radius:8px;font-size:12px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s}.language-option:active{background:#f3f4f6}.language-option.active{background:#990012;color:#fff;border-color:#990012}.logout-btn{color:#ef4444}.logout-btn svg{color:#ef4444}.logout-btn .profile-action-label{color:#ef4444}.logout-btn:disabled{opacity:.6;cursor:not-allowed}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f9fafb;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;padding-bottom:env(safe-area-inset-bottom)}.app-main{flex:1;width:100%;max-width:100%;margin:0 auto;position:relative}@media(min-width:768px){.app-main{max-width:500px;box-shadow:0 0 20px #0000001a}}@supports (padding: max(0px)){.app{padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}}