:root{--primary:#193c34;--primary-light:#245247;--primary-dark:#102722;--gold:#b8860b;--gold-light:#e5c158;--gold-bg:#fdfaf3;--bg:#f7f6f0;--card:#fff;--text:#213f31;--text-muted:#64746d;--border:#e2e4dc;--border-light:#eff1ea;--green:#217a43;--green-bg:#edf8f0;--red:#c0392b;--red-bg:#fdf0ee;--blue:#1d6fa5;--blue-bg:#eef6fc;--radius:14px;--radius-sm:8px;--shadow:0 4px 20px #193c340f;--shadow-lg:0 10px 30px #193c341f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.5;display:flex}.phone-container{background:var(--card);flex-direction:column;width:100%;max-width:500px;min-height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 40px #00000014}.app-header{background:var(--primary);color:#fff;z-index:50;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0;box-shadow:0 2px 10px #00000026}.brand-title{letter-spacing:.5px;color:#fff;align-items:center;gap:8px;font-family:serif;font-size:22px;display:flex}.brand-subtitle{letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-light);font-size:11px;font-weight:600}.lang-toggle{color:#fff;cursor:pointer;background:#ffffff26;border:1px solid #ffffff40;border-radius:20px;align-items:center;gap:5px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.lang-toggle:hover{background:#ffffff40}.login-hero{color:#fff;text-align:center;background:linear-gradient(#193c34 0%,#102722 100%);border-bottom-right-radius:24px;border-bottom-left-radius:24px;padding:36px 24px 28px}.login-hero h1{color:#fff;margin-bottom:8px;font-family:serif;font-size:28px}.login-hero p{color:#ffffffd9;font-size:14px;line-height:1.6}.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);margin:14px 16px;padding:20px}.gold-card{background:linear-gradient(135deg,#fefbf4 0%,#f7f0df 100%);border:1px solid #ebd9a8}.input-group{margin-bottom:16px}.input-label{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.text-input{border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#fff;outline:none;padding:14px 16px;font-size:16px;transition:border-color .2s}.text-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #193c341a}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:15px 20px;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}.btn-gold{color:#fff;background:linear-gradient(135deg,#c59b27 0%,#a87900 100%);box-shadow:0 4px 12px #a8790040}.btn-gold:hover{opacity:.95}.btn-secondary{color:var(--primary);border:1px solid var(--border);background:#f0f2eb}.btn-secondary:hover{background:#e5e8de}.btn-outline{color:var(--primary);border:1.5px solid var(--primary);background:0 0}.btn-outline:hover{background:#193c340d}.badge{border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge-green{background:var(--green-bg);color:var(--green)}.badge-gold{color:#8c6708;background:#fcf4dd}.badge-blue{background:var(--blue-bg);color:var(--blue)}.badge-red{background:var(--red-bg);color:var(--red)}.progress-bar-bg{background:#e8ece5;border-radius:5px;width:100%;height:10px;margin:10px 0;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#193c34 0%,#c59b27 100%);border-radius:5px;height:100%;transition:width .5s}.instalment-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;display:grid}.instalment-box{text-align:center;border:1px solid var(--border);background:#fff;border-radius:8px;padding:10px 6px;font-size:12px}.instalment-box.paid{color:#196333;background:#edf8f0;border-color:#bce3c7;font-weight:600}.instalment-box.due{color:#9c6e00;background:#fff8e8;border-color:#edd18c;font-weight:700;box-shadow:0 0 0 2px #d4af3766}.instalment-box.upcoming{color:#888;background:#fafaf7}.modal-overlay{z-index:100;background:#000000a6;justify-content:center;align-items:flex-end;padding:0;display:flex;position:fixed;inset:0}@media (min-width:500px){.modal-overlay{align-items:center;padding:20px}}.modal-content{width:100%;max-width:500px;max-height:90vh;box-shadow:var(--shadow-lg);background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;padding:24px 20px 32px;animation:.25s ease-out slideUp;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:12px;display:flex}.modal-title{color:var(--primary);font-family:serif;font-size:20px}.close-btn{color:#888;cursor:pointer;background:0 0;border:none;padding:4px;font-size:24px}.tab-bar{border-bottom:1px solid var(--border);z-index:40;background:#fff;display:flex;position:sticky;top:61px}.tab-btn{text-align:center;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:14px 8px;font-size:14px;font-weight:600;transition:all .2s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.receipt-item{border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;margin-bottom:10px;padding:14px;display:flex}.receipt-item:hover{background:#fafaf6}.banner-notice{border-radius:var(--radius-sm);align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 16px;font-size:13px;line-height:1.5;display:flex}.banner-notice.warning{color:#855f00;background:#fff9e6;border:1px solid #fae4a8}.banner-notice.success{color:#176534;background:#eafaf1;border:1px solid #bcefd0}.banner-notice.info{color:#165b89;background:#eef6fc;border:1px solid #c8e3f8}