:root{--bg:#f2f8f3;--card:#fff;--tx:#17301c;--mu:#66806b;--g:#239447;--gd:#166534;--bd:#d4e6d7;--orange:#e98919;--red:#cf3d42}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,"Noto Sans Thai",sans-serif}.screen{display:none;min-height:100dvh;padding:calc(22px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));max-width:760px;margin:auto}.screen.active{display:block}.auth{padding-top:8vh;text-align:center}.logo{width:96px;height:96px;border-radius:28px;background:linear-gradient(135deg,var(--g),var(--gd));display:grid;place-items:center;color:#fff;font-size:60px;margin:auto}.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:15px}.auth form{display:grid;gap:14px;text-align:left;margin:25px 0 10px}.card label{display:grid;gap:6px;font-weight:700}input{width:100%;padding:12px;border:1px solid var(--bd);border-radius:12px;background:var(--card);font:inherit;color:var(--tx)}button{border:0;border-radius:12px;background:linear-gradient(135deg,var(--g),var(--gd));color:#fff;font:inherit;font-weight:800;padding:11px;cursor:pointer}.ghost,.link,.back{background:none;color:var(--g)}.demo{display:grid;gap:6px;margin-top:24px}.demo code{padding:7px;background:var(--card);border-radius:8px}.app header{display:flex;justify-content:space-between;align-items:center}.app h2{margin:2px 0}.score{display:grid;text-align:center;background:linear-gradient(135deg,#2eaa55,#155c2d);color:#fff;border-radius:22px;padding:18px;margin:14px 0}.score strong{font-size:46px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:4px;position:sticky;top:0;z-index:900}.tabs button{background:none;color:var(--mu);padding:9px 4px;font-size:12px}.tabs button.active{background:var(--gd);color:#fff}.panel{display:none}.panel.active{display:block}.mapbar{display:grid;grid-template-columns:1fr auto;gap:7px;margin:10px 0}.chips{display:flex;gap:6px;overflow:auto;margin-bottom:8px}.chips button{white-space:nowrap;background:var(--card);color:var(--mu);border:1px solid var(--bd);padding:7px 10px}.chips button.active{background:var(--gd);color:#fff}#map{height:50vh;min-height:370px;border-radius:18px;border:1px solid var(--bd);margin-bottom:10px;z-index:1}.binrow,.rank{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--bd)}.dot{width:13px;height:13px;border-radius:50%}.rank{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin:7px 0;padding:11px}.rank div,.binrow div{display:grid}.rank small,.binrow small,.note{color:var(--mu);font-size:12px}.rank strong{color:var(--g)}.camera{height:390px;background:#07120a;border-radius:18px;overflow:hidden;position:relative}.camera video,.camera img{width:100%;height:100%;object-fit:cover}.camera img{display:none}.camera span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#000a;color:#fff;padding:7px 10px;border-radius:99px;white-space:nowrap;font-size:12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}.secondary{background:var(--card);color:var(--g);border:1px solid var(--bd)}#send{width:100%}.history-item,.review{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:11px;margin:7px 0}.status{font-weight:800}.approved{color:var(--g)}.pending{color:var(--orange)}.rejected{color:var(--red)}.wide{max-width:1180px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metrics div{display:grid;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px}.metrics b{font-size:28px;color:var(--g)}.admin-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:10px}.review-actions{display:flex;gap:6px}.reject{background:var(--red)}#toast{position:fixed;z-index:2000;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-100px);background:#102216;color:#fff;padding:10px 14px;border-radius:11px;transition:.2s;max-width:90%;text-align:center}#toast.show{transform:translate(-50%,0)}@media(max-width:800px){.admin-grid{grid-template-columns:1fr}}

.modal{position:fixed;inset:0;z-index:3000;background:#07120ab8;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}.modal.show{display:flex}.modal-card{width:min(390px,100%);background:var(--card);border:1px solid var(--bd);border-radius:24px;padding:24px;text-align:center;box-shadow:0 20px 60px #0005}.modal-icon{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e7f5ea;font-size:44px}.modal-card h2{margin:5px 0}.modal-card p{color:var(--mu);line-height:1.55}.modal-points{font-size:28px;font-weight:900;color:var(--g);margin:12px}.modal-card button{width:100%}.live-badge{display:inline-flex;align-items:center;gap:6px;color:var(--g);font-size:12px}.live-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 4px #23944722}
.login-logo{width:min(440px,92vw);margin:0 auto 8px;display:flex;justify-content:center;align-items:center}
.login-logo img{display:block;width:100%;height:auto;max-height:44vh;object-fit:contain;filter:drop-shadow(0 8px 20px #0c3b1d22)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-height:720px){.login-logo{width:min(300px,75vw)}.login-logo img{max-height:33vh}.auth{padding-top:2vh}}

/* ===== WasteWise polished mobile UI v3 ===== */
:root{
 --bg:#f3f8f3;--surface:#ffffff;--surface2:#edf7ef;--ink:#102a18;--sub:#64776a;
 --brand:#168447;--brand2:#075c32;--lime:#8cc63f;--line:#d8e8dc;
 --shadow:0 14px 40px rgba(16,69,34,.10);--softshadow:0 8px 24px rgba(16,69,34,.08)
}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% -10%,#dff3e3 0,transparent 35%),var(--bg);color:var(--ink)}
button,input{min-height:44px}button{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}button:active{transform:scale(.97)}
.screen{padding-left:16px;padding-right:16px}.auth{padding-top:max(3vh,env(safe-area-inset-top));max-width:460px}
.login-logo{width:min(330px,78vw);margin-bottom:0}.login-logo img{max-height:34vh;filter:drop-shadow(0 12px 25px rgba(3,72,35,.14))}
.auth>p{margin:0 0 18px;color:var(--sub);font-weight:600}.auth .card{box-shadow:var(--shadow);border-color:#e0eee3;padding:20px}
.auth label{font-size:13px;color:#284a33}.auth input{background:#f8fcf8;border:1.5px solid var(--line);padding:13px 14px;outline:none}.auth input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(22,132,71,.11)}
.auth form button{margin-top:4px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 9px 22px rgba(9,99,49,.22)}
.app{padding-bottom:96px}.app header{background:linear-gradient(135deg,#0d6e3b,#064d2b);margin:-22px -16px 0;padding:calc(22px + env(safe-area-inset-top)) 20px 58px;color:#fff;border-radius:0 0 28px 28px}.app header small{color:#cfebd8}.app header .ghost{color:#fff;border:1px solid rgba(255,255,255,.25);padding:8px 13px}
.score{position:relative;margin:-38px 4px 16px;background:linear-gradient(135deg,#fff,#eff9f1);color:var(--ink);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);padding:19px;border-radius:22px;overflow:hidden}.score:after{content:'🌿';position:absolute;right:-8px;bottom:-18px;font-size:76px;opacity:.11;transform:rotate(-18deg)}.score span{font-size:12px;letter-spacing:1.4px;color:var(--brand);font-weight:900}.score strong{color:var(--brand2);font-size:48px;line-height:1.05}.score small{color:var(--sub);font-weight:700}
.tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);height:calc(69px + env(safe-area-inset-bottom));padding:6px 8px env(safe-area-inset-bottom);border:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(14,59,29,.11);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);z-index:1500}.tabs button{min-height:54px;border-radius:15px;font-size:11px;display:grid;place-items:center;align-content:center;gap:2px}.tabs button:before{font-size:20px;line-height:1}.tabs button[data-tab="mapPanel"]:before{content:'⌖'}.tabs button[data-tab="board"]:before{content:'🏆'}.tabs button[data-tab="submit"]:before{content:'📷'}.tabs button[data-tab="history"]:before{content:'↻'}.tabs button.active{background:#e7f5ea;color:var(--brand2);box-shadow:none}
.panel{animation:rise .25s ease}.panel>h3{font-size:18px;margin:19px 3px 12px}@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.mapbar{margin-top:15px}.mapbar input{box-shadow:var(--softshadow);border:0}.mapbar button{box-shadow:var(--softshadow)}.chips{padding:2px 0 8px}.chips button{box-shadow:0 3px 10px rgba(15,75,33,.05)}
#map{height:52vh;border:5px solid #fff;box-shadow:var(--shadow);border-radius:23px}.card{border-color:var(--line);box-shadow:var(--softshadow)}
.binrow{border-bottom:1px solid #e8f0ea}.binrow:last-child{border-bottom:0}.dot{box-shadow:0 0 0 4px #e9f4eb}
.rank{grid-template-columns:42px 1fr auto;border:0;box-shadow:var(--softshadow);padding:14px 13px}.rank:first-child{background:linear-gradient(135deg,#fff9dc,#fff);outline:1px solid #f2d96c}.rank:nth-child(2){background:linear-gradient(135deg,#f4f6f8,#fff)}.rank:nth-child(3){background:linear-gradient(135deg,#fff1e9,#fff)}.rank strong{font-size:18px}
.camera{height:min(55vh,470px);border:5px solid #fff;box-shadow:var(--shadow);border-radius:24px}.camera span{box-shadow:0 5px 18px #0005}.actions button,#send{box-shadow:var(--softshadow)}
.history-item,.review{border:0;box-shadow:var(--softshadow);padding:14px}.status{padding:3px 8px;border-radius:99px;font-size:12px}.status.approved{background:#e4f6e9}.status.pending{background:#fff1d9}.status.rejected{background:#ffe6e7}
.modal-card{border:0;box-shadow:0 24px 80px rgba(0,0,0,.28)}.modal-icon{box-shadow:inset 0 0 0 8px rgba(255,255,255,.55)}
.metrics{margin-top:-36px;position:relative}.metrics div{border:0;box-shadow:var(--softshadow);padding:15px}.admin-grid .card{padding:18px}
#toast{box-shadow:0 12px 35px rgba(0,0,0,.25)}
@media(min-width:820px){.app header{margin-top:0;border-radius:28px}.tabs{position:sticky;top:8px;bottom:auto;transform:none;left:auto;width:100%;height:auto;border:1px solid var(--line);border-radius:18px;margin-top:10px;padding:5px}.tabs button{display:block;min-height:44px}.tabs button:before{margin-right:6px}.app{padding-bottom:28px}.score{max-width:420px;margin:-38px auto 20px}}

/* ===== UI v4: clear separation, bottom navigation, high-contrast live state ===== */
/* Never let content cards overlap the header */
.app header{margin:-22px -16px 18px;padding:calc(22px + env(safe-area-inset-top)) 20px 24px;border-radius:0 0 24px 24px}
.score{margin:0 0 16px;position:relative;z-index:1}
.metrics{margin:0 0 16px;position:relative;z-index:1;gap:12px}
.metrics div{background:#fff;border:1px solid #d3e5d7;border-radius:18px;box-shadow:0 8px 20px rgba(16,69,34,.07)}
.admin-grid{margin-top:0;gap:16px;align-items:start}
.admin-grid>.card{background:#fff;border:1px solid #d3e5d7;border-radius:22px;box-shadow:0 10px 28px rgba(16,69,34,.08);overflow:hidden}
.admin-grid>.card h3{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #e4eee6}
.review{background:#f8fbf8;border:1px solid #e1ece3;box-shadow:none;margin:10px 0;padding:15px}
.review+.review{margin-top:12px}

/* Live-update badge must stand out on dark green header */
.live-badge{display:inline-flex!important;vertical-align:middle;align-items:center;gap:7px;margin-left:10px;padding:6px 10px;border-radius:999px;background:#fff;color:#075c32!important;border:2px solid #9ee0ad;box-shadow:0 3px 12px rgba(0,0,0,.18);font-size:12px;font-weight:900;white-space:nowrap}
.live-badge:before{width:9px;height:9px;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.18);animation:livePulse 1.6s infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* Always keep student navigation at the bottom on phones and wide Android WebViews */
#student .tabs{position:fixed!important;top:auto!important;left:50%!important;right:auto!important;bottom:0!important;transform:translateX(-50%)!important;width:min(760px,100%)!important;height:calc(72px + env(safe-area-inset-bottom))!important;margin:0!important;padding:6px 8px env(safe-area-inset-bottom)!important;border:0!important;border-top:1px solid #d8e8dc!important;border-radius:22px 22px 0 0!important;box-shadow:0 -10px 30px rgba(14,59,29,.12)!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(16px)!important;z-index:1500!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important}
#student .tabs button{display:grid!important;place-items:center!important;align-content:center!important;min-height:56px!important;padding:4px!important;border-radius:15px!important;font-size:12px!important}
#student{padding-bottom:100px!important}

/* Student sections become visually separate cards, never stacked into the header */
#student .panel{margin-top:14px}
#student #mapPanel>.card,#student #board,#student #submit,#student #history{background:transparent}
#student #board>h3,#student #submit>h3,#student #history>h3{margin:18px 4px 12px}
.mapbar{margin-top:0;background:#fff;border:1px solid #dceadf;padding:10px;border-radius:18px;box-shadow:0 7px 20px rgba(16,69,34,.06)}
.chips{margin:10px 0 5px;padding:0}
#map{margin-top:8px}

/* Desktop admin: discrete blocks with breathing room */
@media(min-width:820px){
 .app{padding-top:22px;padding-bottom:32px}
 .app header{margin:0 0 18px;padding:22px 24px;border-radius:24px}
 .score{max-width:none;margin:0 0 18px}
 .admin-grid{grid-template-columns:minmax(340px,.9fr) minmax(440px,1.1fr)}
 /* Undo the old generic desktop tabs rule only for student; remain bottom */
 #student .tabs{position:fixed!important;top:auto!important;bottom:0!important;transform:translateX(-50%)!important;width:min(760px,100%)!important;border-radius:22px 22px 0 0!important}
 #student{padding-bottom:105px!important}
}
@media(max-width:760px){
 .metrics{grid-template-columns:repeat(3,1fr)}
 .metrics div{padding:12px 10px}.metrics span{font-size:12px}.metrics b{font-size:25px}
 .admin-grid{grid-template-columns:1fr}
 .live-badge{display:flex!important;width:max-content;margin:8px 0 0}
}