:root{--green:#0f5132;--green2:#0a8f3d;--red:#d32f2f;--bgScrim: rgba(255,255,255,.55)}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif}.page{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:18px}.page-home{background:url(/home-bg.jpg) center/cover no-repeat,radial-gradient(circle at 30% 20%,#e9f6ee,#f7fbf8 45%,#eef7f2)}.page-details{background:url(/details-bg.jpg) center/cover no-repeat,radial-gradient(circle at 30% 20%,#e9f6ee,#f7fbf8 45%,#eef7f2)}.scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bgScrim)}.content{position:relative;width:100%;max-width:520px}.card{background:#fff;border:1px solid #cfe9db;border-radius:16px;padding:16px;box-shadow:0 8px 26px #0000001a}.headerBox{font-weight:900;text-transform:uppercase;letter-spacing:.6px;text-align:center;color:#1a1a1a;background:#e6f2e6eb;border:1px solid #b3d9b3;border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:14px}.row{display:flex;gap:10px;align-items:center;margin-bottom:12px}.input{flex:1;border:1px solid #cbd5e1;padding:14px;border-radius:10px;font-size:16px;outline:none;transition:box-shadow .15s ease,border-color .15s ease}.input:focus{border-color:#86efac;box-shadow:0 0 0 4px #22c55e24}.scanBtn{width:52px;height:52px;border-radius:12px;border:1px solid #bfe7c7;background:#e7f9ec;color:var(--green);font-size:26px;font-weight:900;cursor:pointer;transition:transform .06s ease,filter .15s ease}.scanBtn:hover{filter:brightness(.98)}.scanBtn:active{transform:scale(.98)}.btn{width:100%;padding:14px;border-radius:12px;border:0;cursor:pointer;font-size:16px;font-weight:900;transition:transform .06s ease,filter .15s ease,opacity .15s ease}.btn-green{background:var(--green);color:#fff}.btn-gray{background:#6b7280;color:#fff}.btn:hover{filter:brightness(.98)}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.toast{margin-bottom:10px;border-radius:12px;padding:10px 12px;font-weight:800;text-align:center}.toast-error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}.tinyNote{margin-top:10px;font-size:12px;color:#355a3a;text-align:center;font-weight:700}.topBar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.backLink{border:0;background:transparent;color:var(--green);font-weight:900;cursor:pointer}.backLink:hover{text-decoration:underline}.titleRow{display:flex;align-items:center;gap:8px}.titleIcon{font-size:18px}.titleText{color:var(--green);font-size:18px;font-weight:900}.banner{display:flex;gap:10px;align-items:center;background:#f0faf5;border:1px solid #cfe9db;border-radius:14px;padding:12px;margin-bottom:12px}.bannerText{font-weight:900;color:#0b1c12;font-size:13.5px}.chip{padding:7px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid transparent;white-space:nowrap}.chip-paid{background:#dcfce7;border-color:#a7f3d0;color:#065f46}.chip-unpaid{background:#fee2e2;border-color:#fecaca;color:#991b1b}.chip-pending{background:#ffedd5;border-color:#fed7aa;color:#9a3412}.chip-bad{background:#fee2e2;border-color:#fecaca;color:#991b1b}.loading{text-align:center;font-weight:900;color:#355a3a;padding:14px 0}.detailsCard{border-top:1px solid #edf2ef;padding-top:12px}.sectionTitle{margin-top:14px;margin-bottom:6px;padding:10px 12px;border-radius:12px;background:#e6f2e6a6;border:1px solid #cfe9db;color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:12.5px}.detailRow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #edf2ef}.lbl{width:45%;font-weight:900;color:#0a6b0a}.val{width:55%;text-align:right;font-weight:800;color:#111827;word-break:break-word;overflow-wrap:anywhere}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:1px}.strong{font-weight:900}.green{color:var(--green2)}.red{color:var(--red)}.btnRow{margin-top:14px}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999}.modal{width:100%;max-width:560px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e5e7eb}.modalTop{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f0faf5;border-bottom:1px solid #cfe9db}.modalTitle{font-weight:900;color:var(--green)}.iconBtn{border:0;background:transparent;font-size:20px;font-weight:900;cursor:pointer;color:#111827}.iconBtn:hover{opacity:.85}.scannerWrap{position:relative;background:#000;height:380px}.video{width:100%;height:100%;object-fit:cover}.scanHint{position:absolute;left:10px;right:10px;bottom:10px;background:#0000008c;color:#fff;padding:10px 12px;border-radius:12px;font-weight:800;font-size:13px}.scanError{padding:12px 14px;background:#fef2f2;border-top:1px solid #FECACA;color:#991b1b;font-weight:900}.modalBottom{padding:12px 14px}@media (max-width: 420px){.card{padding:14px}.headerBox{font-size:13px}.row{gap:8px}.scanBtn{width:48px;height:48px;font-size:24px}.scannerWrap{height:320px}.detailRow{flex-direction:column;align-items:flex-start}.lbl,.val{width:100%;text-align:left}.val{margin-top:4px}}.feeGrid{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.feeCard{border:1px solid #cfe9db;border-radius:14px;padding:12px;background:linear-gradient(180deg,#f0faf58c,#fff);box-shadow:0 6px 18px #0000000f}.feeTop{display:flex;gap:10px;align-items:center;margin-bottom:10px}.feeBadge{padding:7px 10px;border-radius:999px;font-weight:900;font-size:11.5px;letter-spacing:.6px;border:1px solid transparent;white-space:nowrap}.feeBadge-private{background:#dcfce7;border-color:#a7f3d0;color:#065f46}.feeBadge-commercial{background:#dbeafe;border-color:#bfdbfe;color:#1e40af}.feeTopTitle{font-weight:900;color:#0b1c12;font-size:13.5px}.feeTopSub{margin-top:2px;font-size:12px;color:#355a3a;font-weight:800}.feeMainRow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0 8px;border-top:1px dashed #d8efe1;border-bottom:1px solid #edf2ef}.feeMainLabel{font-weight:900;color:#0a6b0a;width:55%}.feeMainValue{width:45%;text-align:right;font-weight:900;font-size:18px;color:#0b1c12}.feeLineRow{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf2ef}.feeLineLabel{width:55%;font-weight:900;color:#335a37}.feeLineValue{width:45%;text-align:right;font-weight:900;color:#111827}.feeTotalRow{display:flex;justify-content:space-between;gap:10px;padding-top:12px}.feeTotalLabel{width:55%;font-weight:900;color:#0b1c12}.feeTotalValue{width:45%;text-align:right;font-weight:900;font-size:18px;color:#0a8f3d}@media (max-width: 420px){.feeGrid{grid-template-columns:1fr}}