:root{--blue:#009d98;--line:#e1eeec;--muted:#718582;background:#f5f9f9;color:#172a2a}
.city-control{display:none;align-items:center;gap:8px;font-size:14px}.signed-in .city-control{display:flex}.city-control select{width:100px;padding:8px;border:1px solid #c8e3df;border-radius:8px}.city-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:28px}.city-card{display:flex;flex-direction:column;gap:10px;padding:18px;background:white;border:1px solid #dceae7;border-radius:12px;color:#244640;text-decoration:none}.city-card.selected{border-color:#00aaa3;background:#ecfaf7}.city-card span{font-size:12px;line-height:1.8;color:#607873}@media(max-width:1000px){.city-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{flex-wrap:wrap;height:auto}}
.topbar{height:88px;padding:16px 32px;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px #193e3c06}.brand{display:flex;align-items:center;gap:12px;color:#152d2c}.brand .brand-mark{display:grid;place-items:center;margin:0;padding:0;border:0;width:38px;height:42px;background:#00aaa3;color:#fff;font-size:22px;border-radius:10px}.workspace{max-width:none;padding:32px}.signed-in .workspace{margin-left:224px}.login{max-width:480px}.eyebrow{display:none}#sidebar{position:fixed;top:88px;bottom:0;width:224px;background:#fff;padding:30px 18px;border-right:1px solid var(--line)}#sidebar button{display:block;text-align:left;width:100%;margin-bottom:10px;background:transparent;color:#526765;padding:16px;font-size:16px}#sidebar .nav-active{background:#00aaa3;color:#fff;font-weight:600}.nav-caption{font-size:12px;color:#7e9390;padding:0 16px 20px}.sidebar-bottom{position:absolute;bottom:24px;font-size:12px;color:#879b98;left:34px}.section-heading h1{font-size:30px;margin-bottom:4px}.section-heading p{font-size:14px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0 32px}.metrics article{padding:25px 24px;background:#fff;border:1px solid #e3f0ee;border-bottom:5px solid #00aaa3;border-radius:14px;box-shadow:0 8px 20px #007f7507}.metrics span{font-size:15px;color:#546d69}.metrics strong{display:block;font-size:38px;margin:10px 0;font-variant-numeric:tabular-nums}.metrics small{font-size:11px;color:#7a8f8b}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.overview-card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px #007d7507}.overview-card h2{background:#00aaa3;color:white;padding:27px 30px;font-size:23px}.card-body{padding:26px 30px}.quick-links button{display:flex;justify-content:space-between;width:100%;background:white;border-radius:0;border-bottom:1px solid var(--line);padding:22px 0;text-align:left;color:#233c39}.quick-links button:last-child{border:0}.quick-links span{color:#009d98;font-size:22px}.config-line{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:14px}.config-line strong{color:#008b80}.overview-qr{display:flex;gap:18px;margin-top:28px}.overview-qr>div{flex:1;min-width:0;text-align:center}.overview-qr img,.qr-placeholder{width:100%;aspect-ratio:1;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:8px;background:#f9fcfc}.qr-placeholder{display:grid;place-items:center;color:#829c96;font-size:13px}.overview-qr span{display:block;font-size:13px;color:#52736b;margin-top:12px}.page-heading{flex-wrap:wrap}.page-heading h1{font-size:28px}.heading-actions{flex-wrap:wrap}.heading-actions button{font-size:13px}.primary{background:#009f96}.quiet{background:#eaf4f2;color:#38665d}.payment-card{max-width:1100px;background:#fff;padding:30px;border:1px solid var(--line);border-radius:16px}.system-actions{display:flex;gap:12px;margin:24px 0}.payment-card h2{font-size:23px}.payment-card p,.payment-card small{font-size:13px}.payment-card textarea{font-size:12px}.payment-card .checkline{display:flex;gap:10px;align-items:center}.payment-card input[type=checkbox]{width:18px}#payment-error,#overview-error{color:#a93628}.table-wrap{background:#fff}.notice{font-size:13px}.feedback{margin:12px 0}.form-grid{gap:22px}button:focus-visible{outline-color:#008f85}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:1fr}.signed-in .workspace{margin-left:190px}#sidebar{width:190px}}
@media(max-width:700px){.topbar{padding:12px 16px;height:auto;min-height:72px;flex-wrap:wrap}.brand{font-size:19px}.preview-link{display:none}#sidebar{position:static;width:100%;display:flex;gap:6px;padding:12px;overflow:auto}#sidebar button{white-space:nowrap;margin:0;font-size:13px;padding:10px}.nav-caption,.sidebar-bottom{display:none}.signed-in .workspace{margin-left:0;padding:20px 14px}.metrics{gap:10px}.metrics article{padding:16px 12px}.metrics strong{font-size:29px}.metrics small{font-size:10px}.card-body,.payment-card{padding:20px}.overview-card h2{padding:22px}.overview-qr{gap:10px}.form-grid{grid-template-columns:1fr}}
/* Login reference: full-screen aqua background and a separate account card. */
body:not(.signed-in){background:linear-gradient(115deg,#20ccba 0%,#0abbd0 60%,#30b9e6 100%);min-height:100vh}
body:not(.signed-in)::before,body:not(.signed-in)::after{content:"";position:fixed;pointer-events:none;border-radius:50%;background:rgba(214,255,247,.28)}
body:not(.signed-in)::before{width:76vw;height:72vw;right:-28vw;top:-57vw}
body:not(.signed-in)::after{width:116vw;height:68vw;left:25vw;top:57vh;transform:rotate(-12deg)}
body:not(.signed-in)>.topbar{display:none}
body:not(.signed-in)>.workspace{padding:48px 7vw;min-height:100vh;display:flex;align-items:center;position:relative;z-index:1}
#login.login{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:7vw;width:100%;max-width:1500px;margin:auto}
#login .login-intro h1{font-size:clamp(32px,3.9vw,65px);font-weight:750;white-space:nowrap;letter-spacing:-.04em;color:#081e32;line-height:1.3;margin:0 0 30px}
#login .login-intro p{color:#10313e;font-size:clamp(16px,1.7vw,25px);text-align:center;margin:0}
#login .login-card{background:#fff;border-radius:30px;padding:58px 54px 40px;box-shadow:0 20px 50px #12697822}
#login .login-card h2{font-size:34px;color:#111827;margin:0 0 32px}
#login form{margin:0}
#login input:not([type=checkbox]){height:54px;border:1px solid #dce2e5;border-radius:30px;background:#fff;padding:0 24px;margin:0 0 20px;font-size:17px;width:100%}
#login input::placeholder{color:#79858a}
#login .remember-line{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:#66716e;margin:0 0 30px;cursor:pointer}
#login .remember-line input{width:18px;height:18px;margin:0;accent-color:#00a99e}
#login #login-button{height:56px;border-radius:30px;background:#00b7ad;font-size:20px;margin:0;color:#fff}
#login .login-admin-note{text-align:center;color:#368780;font-size:14px;margin:20px 0 0}
#login #login-error{font-size:14px;min-height:22px;margin:12px 0 0}
.login-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:900px){#login.login{gap:30px;grid-template-columns:1fr;max-width:480px}#login .login-intro{text-align:center}#login .login-intro h1{white-space:normal;font-size:34px;margin-bottom:14px}#login .login-card{padding:34px 30px 24px;border-radius:24px}body:not(.signed-in)>.workspace{padding:36px 22px}#login .login-card h2{font-size:28px;margin-bottom:24px}}