:root{--bg:#f3f6fb;--surface:#fff;--surface-2:#e9eef7;--text:#0f172a;--muted:#475569;--border:#d9e2ef;--primary:#2563eb;--primary-contrast:#fff;--shadow:0 18px 45px rgba(15,23,42,.08);--radius:22px;--nav-bg:rgba(255,255,255,.92)}
body.theme-dark{--bg:#06111f;--surface:#0b1727;--surface-2:#122337;--text:#e5eef8;--muted:#a7b4c6;--border:#1e334b;--primary:#5ea3ff;--primary-contrast:#06111f;--shadow:0 22px 46px rgba(0,0,0,.35);--nav-bg:rgba(11,23,39,.92)}
*{box-sizing:border-box}
html,body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell,.admin-shell{min-height:100vh;padding-bottom:92px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px;position:sticky;top:0;z-index:100;background:linear-gradient(180deg,var(--bg),rgba(0,0,0,0));backdrop-filter:blur(8px)}
.admin-topbar{padding-bottom:18px}
.eyebrow{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}
h1,h2,h3,p{margin:0}
h1{font-size:26px;margin-top:4px}
h2{font-size:20px}
.page-content,.admin-content{padding:0 18px 24px;display:grid;gap:18px}
.hero-card,.map-card,.panel,.camera-card,.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card,.panel{padding:18px}
.hero-row,.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-header{margin-bottom:10px}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;background:var(--surface-2);border-radius:999px;color:var(--muted);font-size:12px;white-space:nowrap}
.filters{display:grid;gap:10px;margin-top:14px}
.search-input,select,textarea,input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:14px;padding:12px 14px}
textarea{min-height:96px;resize:vertical}
.primary-button,.icon-button,.text-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px}
.primary-button{background:var(--primary);color:var(--primary-contrast);padding:12px 16px;font-weight:700}
.primary-button.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.icon-button{width:48px;height:48px;background:var(--surface);border:1px solid var(--border)}
.text-link{color:var(--primary);font-weight:700}
#map{height:42vh;min-height:320px;border-radius:var(--radius);overflow:hidden;position:relative;z-index:1}
.map-card{padding:8px;position:relative;z-index:1}
.leaflet-container,.leaflet-pane,.leaflet-top,.leaflet-bottom,.leaflet-control{z-index:1!important}
.leaflet-popup{z-index:2!important}
.camera-grid{display:grid;gap:14px}
.compact-grid{grid-template-columns:1fr}
.camera-card{overflow:hidden}
.camera-preview-frame{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--surface-2);position:relative;overflow:hidden}.camera-preview{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2)}.camera-preview-frame.broken .camera-preview{display:none}.preview-fallback{display:none;color:var(--muted);font-weight:600}.camera-preview-frame.broken .preview-fallback{display:block}
.camera-body{padding:14px;display:grid;gap:10px}.camera-meta,.camera-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta-pill{padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px}
.camera-actions button,.camera-actions a{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:12px;padding:10px 12px}
.bottom-nav{position:fixed;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:var(--nav-bg);border:1px solid var(--border);border-radius:24px;padding:8px;backdrop-filter:blur(18px);z-index:200}
.nav-item{min-height:52px;border:0;border-radius:18px;background:transparent;color:var(--muted)}
.nav-item.active{background:var(--surface);color:var(--text);font-weight:700}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999!important}
.modal.hidden{display:none}
.modal-card{width:min(760px,100%);max-height:90vh;overflow:auto;padding:20px;position:relative;z-index:10000!important}
.webcam-modal,.settings-modal,.edit-modal{position:relative;z-index:10001!important}
.close-button{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.detail-media{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-bottom:14px;background:#000}.detail-fallback{display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.detail-grid{display:grid;gap:14px}
.setting-row,.checkbox-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-modal{display:grid;gap:16px}
.version-note,.muted-text{color:var(--muted);font-size:14px}
.admin-form{display:grid;gap:10px}.inline-form{grid-template-columns:1fr auto;align-items:start}.table-list,.candidate-list{display:grid;gap:12px}
.table-row,.candidate-card{background:var(--surface-2);border:1px solid var(--border);border-radius:18px;padding:14px;display:grid;gap:10px}
.table-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.table-actions{display:flex;gap:8px;flex-wrap:wrap}.small-button{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.small-button.danger{border-color:#ef4444;color:#ef4444}.small-button.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)}
.empty-state{padding:20px;border-radius:18px;background:var(--surface);border:1px dashed var(--border);color:var(--muted)}
.hidden{display:none!important}
@media(min-width:860px){.page-content{grid-template-columns:1.2fr .8fr;align-items:start}.hero-card,.map-card{grid-column:1/-1}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-content{grid-template-columns:repeat(2,minmax(0,1fr))}.panel:nth-child(3),.panel:nth-child(4){grid-column:1/-1}}


.crawl-form{margin-bottom:12px}.status-success{border-color:#16a34a;color:#166534}.status-error{border-color:#dc2626;color:#991b1b}.candidate-grid{display:grid;gap:10px}.candidate-grid textarea{grid-column:1/-1}.candidate-thumb{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:var(--surface)}@media(min-width:860px){.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.candidate-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.small-button.active{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)}.candidate-head-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.candidate-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface)}