:root{--collector:#087a62;--collector-bg:#eff6f2}
*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}
.collector-body{margin:0;background:var(--collector-bg);color:#153a34;font-family:"Noto Sans Thai Looped",system-ui,sans-serif}
.collector-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(20px,calc((100vw - 1120px)/2));border-bottom:1px solid #dce9e2;background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.collector-brand{display:flex;min-width:0;align-items:center;gap:12px;color:inherit;text-decoration:none}.collector-brand-mark{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:13px;background:var(--collector);color:#fff;font-size:20px}.collector-brand strong,.collector-brand small{display:block}.collector-brand strong{color:#153a34}.collector-brand small{color:#6c827b;font-size:12px}
.collector-account{display:flex;align-items:center;gap:9px}.collector-account-avatar{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:#e0f3ea;color:#087a62}.collector-account-text{display:grid;line-height:1.15}.collector-account-text strong{font-size:14px}.collector-account-text small{margin-top:3px;color:#688078;font-size:12px}.collector-logout{display:inline-flex;align-items:center;gap:7px;margin-left:7px;padding:9px 11px;border:1px solid #c8e2d5;border-radius:9px;color:#087a62;text-decoration:none;font-size:13px;font-weight:700}.collector-logout:hover{background:#edf8f2}
.collector-main{max-width:1120px;margin:0 auto;padding:28px 20px 54px}.collector-hero{padding:28px;border-radius:20px;background:linear-gradient(125deg,#0b735f,#0c4d42);color:#fff}.collector-hero h1{margin:0;font-size:30px}.collector-hero p{margin:7px 0 0;color:#d7f3e9}.collector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}.collector-card{display:grid;gap:14px;padding:20px;border:1px solid #d9e9e1;border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(19,66,54,.06)}.collector-card h2{margin:0;font-size:18px}.collector-card p{margin:0;color:#607970}.collector-card-meta{color:#527269;font-size:13px}.collector-unavailable{padding:11px 13px;border-radius:10px;background:#fff4db;color:#87651b;font-size:13px;font-weight:700}
.collector-button,.collector-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:0;border-radius:10px;background:var(--collector);color:#fff;text-decoration:none;font:700 15px inherit;cursor:pointer}.collector-secondary{border:1px solid #abd7c6;background:#fff;color:var(--collector)}
.collector-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.collector-page-head h1{margin:0;font-size:24px}.collector-page-head p{margin:4px 0 0;color:#647d75}.collector-form{display:grid;min-width:0;gap:18px;padding-bottom:88px}
.collector-location-primary{display:grid;gap:12px;padding:18px;border:1px solid #bfe4d2;border-radius:15px;background:#fff;box-shadow:0 7px 18px rgba(15,72,55,.06)}.collector-location-primary h2,.collector-location-primary p{margin:0}.collector-location-primary h2{font-size:18px}.collector-location-primary h2 i{color:#087a62}.collector-location-primary p{color:#607970;font-size:14px}.collector-location-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.collector-coordinate-display{display:grid;gap:4px;padding:12px 14px;border-left:3px solid #087a62;border-radius:10px;background:#f2f8f5;color:#315e51;font-size:14px;line-height:1.45}.collector-coordinate-display strong{color:#173b36}.collector-coordinate-empty{color:#6a8179}
.collector-map-details{padding:14px;border:1px solid #d3e4dc;border-radius:13px;background:#fff}.collector-map-details summary{color:#2d5f50;font-weight:700;cursor:pointer}.collector-map-details summary i{margin-right:6px;color:#087a62}.collector-map-details p{margin:10px 0;color:#6a8179;font-size:13px}.collector-map{width:100%;height:320px;max-width:100%;border:1px solid #cfe1d8;border-radius:12px;overflow:hidden;background:#eaf2ee}
.collector-photo-field{display:grid;gap:12px;padding:18px;border:1px solid #cfe1d8;border-radius:14px;background:#fff}.collector-photo-heading{display:flex;align-items:center;gap:8px}.collector-photo-heading i,.collector-photo-heading span{color:#087a62}.collector-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.collector-photo-button{display:flex;min-height:52px;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #abd7c6;border-radius:10px;background:#fff;color:#087a62;font-weight:700;cursor:pointer}.collector-photo-button--camera{border-color:#087a62;background:#087a62;color:#fff}.collector-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.collector-photo-field p{margin:0;color:#6a8179;font-size:13px}
.collector-notice,.collector-error{padding:12px 14px;border-radius:10px}.collector-notice{background:#e2f4eb;color:#08634f}.collector-error{background:#fde9e7;color:#a3342d}.collector-actions{position:sticky;bottom:0;z-index:15;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;width:100%;max-width:100%;margin:0;padding:12px;border:1px solid #d8e8e0;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 -5px 18px rgba(15,57,47,.11);backdrop-filter:blur(10px)}
.collector-login-body{display:grid;min-height:100vh;place-items:center;padding:20px;background:radial-gradient(circle at top right,#d4f1e4,transparent 42%),var(--collector-bg)}.collector-login-card{display:grid;width:min(100%,410px);gap:14px;padding:34px;border:1px solid #d4e6dd;border-radius:22px;background:#fff;box-shadow:0 18px 52px rgba(15,57,47,.13)}.collector-login-card .collector-brand-mark{width:52px;height:52px;font-size:24px}.collector-login-card h1,.collector-login-card p{margin:0}.collector-login-card>p:not(.collector-error){color:#647d75}.collector-login-kicker{color:#087a62!important;font-size:12px;font-weight:700;letter-spacing:.12em}.collector-login-form{display:grid;gap:13px;margin-top:5px}.collector-login-form label{display:grid;gap:6px;font-weight:700}.collector-login-form input{width:100%;padding:12px;border:1px solid #c9ddd4;border-radius:10px;font:inherit}.collector-login-form .collector-button{width:100%;margin-top:4px}.collector-back-link{color:#087a62;text-align:center;font-size:14px}
@media(max-width:640px){.collector-topbar{gap:10px;padding:12px 14px}.collector-brand small{display:none}.collector-brand strong{font-size:15px}.collector-brand-mark{width:38px;height:38px;border-radius:11px;font-size:18px}.collector-account{gap:6px}.collector-account-avatar{width:34px;height:34px}.collector-account-text{max-width:108px}.collector-account-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.collector-account-text small{font-size:11px}.collector-logout{width:36px;height:36px;justify-content:center;margin-left:2px;padding:0}.collector-logout span{display:none}.collector-main{width:100%;padding:18px 14px 112px}.collector-hero{padding:22px}.collector-hero h1{font-size:25px}.collector-page-head{align-items:flex-start;flex-direction:column}.collector-page-head .collector-secondary{width:100%}.collector-location-actions{align-items:stretch;flex-direction:column}.collector-location-actions .collector-button{width:100%;font-size:16px}.collector-map{height:290px}.collector-photo-actions{grid-template-columns:1fr}.collector-photo-button{min-height:56px}.collector-actions{position:fixed;right:0;bottom:0;left:0;z-index:30;margin:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d8e8e0;border-radius:0;background:rgba(255,255,255,.98);box-shadow:0 -5px 18px rgba(15,57,47,.16)}.collector-actions>*{flex:1;white-space:nowrap}.collector-login-card{padding:28px 22px}}