/* LandSync: sign-in pages, admin pages and the map workspace. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--cream); font: 500 .9rem var(--font-body); cursor: pointer; }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--navy); font-weight: 600; } .btn.primary:hover { background: #d9b236; }
.btn.ghost { background: transparent; } .btn.sm { min-height: 32px; padding: 4px 11px; font-size: .8rem; } .btn.danger { border-color: var(--warn); color: var(--warn); }
input, select, textarea { background: var(--navy); border: 1px solid var(--border-2); border-radius: 8px; color: var(--cream); padding: 9px 11px; font: .9rem var(--font-body); max-width: 100%; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(201,162,39,.55); border-color: var(--brass); }
select option { background: var(--navy); color: var(--cream); }
.codein { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .35em; text-align: center; }
.note { border: 1px solid var(--border-2); border-left: 4px solid var(--teal); background: var(--surface); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.note.warn { border-left-color: var(--warn); } .note.ok { border-left-color: var(--ok); }
.chip { display: inline-block; font: 500 .68rem var(--font-mono); border: 1px solid var(--border-2); border-radius: 20px; padding: 1px 8px; color: var(--muted); white-space: nowrap; }
.chip.unv { border-color: var(--warn); color: var(--warn); } .chip.ver { border-color: var(--ok); color: var(--ok); } .chip.prop { border-color: var(--brass); color: var(--brass); }

/* ----- sign-in pages ----- */
body.auth { min-height: 100vh; background: radial-gradient(1200px 520px at 15% -10%, rgba(58,145,136,.18), transparent 60%), radial-gradient(900px 480px at 100% 110%, rgba(201,162,39,.12), transparent 60%), var(--bg); }
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; align-content: center; gap: 16px; }
.authcard { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; padding: 26px 26px 20px; box-shadow: var(--shadow); }
.authbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .authbrand div { display: flex; flex-direction: column; line-height: 1.2; } .authbrand b { font: 700 1.05rem var(--font-display); letter-spacing: .05em; } .authbrand span { font: .68rem var(--font-mono); color: var(--brass); letter-spacing: .08em; }
.langsw { margin-left: auto; border: 1px solid var(--border-2); border-radius: 20px; padding: 3px 12px; font-size: .8rem; color: var(--cream); } .langsw:hover { background: var(--surface-2); text-decoration: none; }
.authcard h1 { font-size: 1.5rem; margin-bottom: 4px; } .sub { color: var(--muted); margin: 0 0 18px; }
.form { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; } .form label { display: flex; flex-direction: column; gap: 5px; } .form label span { color: var(--muted); font-size: .82rem; }
.alt { margin: 12px 0 0; color: var(--muted); font-size: .86rem; } .authfoot { color: var(--faint); font-size: .74rem; max-width: 440px; text-align: center; margin: 0; }

/* ----- admin ----- */
body.adm { min-height: 100vh; }
.admtop { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #0A1626, #070F1A); flex-wrap: wrap; }
.admtop .brand { display: flex; align-items: center; gap: 10px; color: var(--cream); font: 700 1rem var(--font-display); letter-spacing: .05em; } .admtop nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.admtop nav a { color: var(--muted); padding: 6px 12px; border-radius: 8px; } .admtop nav a.on, .admtop nav a:hover { background: var(--surface-2); color: var(--cream); text-decoration: none; }
.admtop .sp { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.admmain { max-width: 1180px; margin: 0 auto; padding: 22px; display: grid; gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .panel h2 { font-size: 1.1rem; margin-bottom: 12px; } .panel h3 { font-size: .95rem; margin: 14px 0 8px; color: var(--brass); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .grid2 label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
.tbl-wrap { overflow-x: auto; } table.tbl { border-collapse: collapse; width: 100%; font-size: .84rem; } .tbl th, .tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .tbl th { color: var(--muted); font-weight: 500; white-space: nowrap; } .tbl tr:hover td { background: rgba(243,238,221,.03); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .muted { color: var(--muted); } .small { font-size: .8rem; }
.num { font-family: var(--font-mono); }

/* ----- map workspace ----- */
html, body.mapapp { height: 100%; margin: 0; overflow: hidden; }
body.mapapp { display: grid; grid-template-columns: 330px minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }
.mtop { grid-column: 1 / 4; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #0A1626, #070F1A); min-width: 0; }
.mtop .brand { display: flex; align-items: center; gap: 10px; } .mtop .brand b { font: 700 1.02rem var(--font-display); letter-spacing: .06em; display: block; line-height: 1.1; } .mtop .brand i { font: normal .66rem var(--font-mono); color: var(--brass); letter-spacing: .1em; }
.mtop .tagline { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mtop .sp { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } .who { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.mtop form { margin: 0; }
.side { grid-row: 2; overflow-y: auto; padding: 14px; background: linear-gradient(180deg, #0A1626, #070F1A); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.side h2 { font: 700 .95rem var(--font-display); margin-bottom: 8px; }
.sel { display: grid; gap: 8px; } .sel label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--muted); }
fieldset.lg { border: 1px solid var(--border); border-radius: 12px; margin: 0; padding: 8px 10px 6px; } fieldset.lg legend { padding: 0 6px; font: 600 .8rem var(--font-display); color: var(--brass); }
.lrow { display: flex; align-items: center; gap: 9px; padding: 4px 2px; font-size: .85rem; cursor: pointer; } .lrow input { width: 16px; height: 16px; flex: none; accent-color: var(--brass); padding: 0; } .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(255,255,255,.35); } .sw.ln { height: 4px; border-radius: 2px; } .sw.pt { border-radius: 50%; }
.seg { display: grid; grid-auto-flow: column; gap: 0; border: 1px solid var(--border-2); border-radius: 9px; overflow: hidden; } .seg button { background: transparent; color: var(--muted); border: 0; padding: 7px 8px; font: 500 .8rem var(--font-body); cursor: pointer; } .seg button[aria-pressed=true] { background: var(--surface-3); color: var(--cream); box-shadow: inset 0 -2px var(--brass); }
.stage { position: relative; grid-row: 2; min-width: 0; min-height: 0; background: #05090f; } #map { position: absolute; inset: 0; background: #05090f; }
.leaflet-container { font-family: var(--font-body); background: #05090f; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--cream); } .leaflet-popup-content { margin: 10px 13px; font-size: .84rem; } .leaflet-container a { color: var(--brass); }
.leaflet-control-attribution { background: rgba(7,15,26,.78) !important; color: var(--muted) !important; font-size: .64rem !important; } .leaflet-control-attribution a { color: var(--cream) !important; }
.mapkey { position: absolute; z-index: 700; left: 10px; bottom: 26px; max-width: 250px; max-height: 46%; overflow-y: auto; background: rgba(7,15,26,.9); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px 10px; font-size: .74rem; line-height: 1.35; color: var(--cream); scrollbar-width: thin; }
.mapkey b { display: block; font: 600 .78rem var(--font-display); color: var(--brass); margin-bottom: 4px; } .mapkey .kt { color: var(--muted); margin: 5px 0 2px; } .mapkey .kr { display: flex; align-items: center; gap: 7px; padding: 1px 0; } .mapkey .kh { color: var(--faint); margin-top: 4px; }
.acq3 { display: grid; gap: 6px; } .acqbtn { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); color: var(--cream); border-radius: 10px; padding: 9px 11px; font: 500 .88rem var(--font-body); cursor: pointer; } .acqbtn:hover { background: var(--surface-3); } .acqbtn b { font: 600 1.2rem var(--font-mono); }
.vlist { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 2px 2px; } .vlist button { background: transparent; color: var(--cream); border: 1px solid var(--border-2); border-radius: 16px; padding: 2px 10px; font: .78rem var(--font-body); cursor: pointer; } .vlist button:hover { border-color: var(--brass); color: var(--brass); }
.cmp-bar { position: absolute; z-index: 800; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(7,15,26,.88); border: 1px solid var(--border-2); border-radius: 10px; padding: 6px 12px; font-size: .78rem; color: var(--cream); display: none; max-width: 90%; text-align: center; } .cmp-bar.on { display: block; }
.cmp-handle { position: absolute; z-index: 790; top: 0; bottom: 0; width: 28px; margin-left: -14px; cursor: ew-resize; display: none; touch-action: none; } .cmp-handle.on { display: block; } .cmp-handle::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 3px; background: var(--brass); } .cmp-handle::after { content: '\2194'; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--brass); color: var(--navy); display: grid; place-items: center; font-weight: 700; }
.cmp-lab { position: absolute; z-index: 795; top: 54px; font: 600 .74rem var(--font-mono); background: rgba(7,15,26,.85); border: 1px solid var(--border-2); padding: 2px 8px; border-radius: 6px; display: none; } .cmp-lab.on { display: block; } #cmpL { left: 12px; } #cmpR { right: 12px; }
.info { grid-row: 2; overflow-y: auto; padding: 16px; background: linear-gradient(180deg, #0A1626, #070F1A); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.info h2 { font-size: 1.25rem; line-height: 1.2; } .info h3 { font: 600 .86rem var(--font-display); color: var(--brass); margin: 0 0 8px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .84rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-family: var(--font-mono); }
.bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; display: flex; } .bar i { display: block; height: 100%; }
.zrow { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: .82rem; padding: 2px 0; } .zrow.me { background: rgba(201,162,39,.12); border-radius: 6px; margin: 0 -4px; padding: 3px 4px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; }
.aqi { display: inline-block; padding: 2px 10px; border-radius: 20px; font: 600 .78rem var(--font-mono); color: #07101a; }
.hint { color: var(--faint); font-size: .76rem; }
.kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .kpi div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; } .kpi b { display: block; font: 600 1.15rem var(--font-mono); } .kpi span { font-size: .72rem; color: var(--muted); }
.legend-wc { display: grid; gap: 3px; font-size: .78rem; } .legend-wc div { display: flex; align-items: center; gap: 8px; }
.pin { background: var(--brass); border: 2px solid var(--navy); border-radius: 50%; }
@media (max-width: 1100px) { body.mapapp { grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto minmax(0, 52vh) minmax(0, 1fr); } .mtop { grid-column: 1 / 3; } .side { grid-row: 2 / 4; } .stage { grid-row: 2; } .info { grid-row: 3; grid-column: 2; border-left: 0; border-top: 1px solid var(--border); } .mtop .tagline { display: none; } }
@media (max-width: 720px) { html, body.mapapp { overflow: auto; } body.mapapp { display: flex; flex-direction: column; height: auto; } .stage { height: 62vh; flex: none; } .side { border-right: 0; border-bottom: 1px solid var(--border); } .info { border-left: 0; } .mtop { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }