:root{
  --header:#b7b7b7; --light:#d9d9d9; --dark:#595959; --black:#111;
  --white:#fff; --frame:#1c1c1a; --accent:#3d5a80; --warn:#8a5a2b; --danger:#7a2e2e; --ok:#3a6b4a;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Courier New', monospace; background:var(--frame);
  min-height:100%; padding:24px 12px; color:var(--black);
}
.stage{display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap; max-width:1360px; margin:0 auto;}
.app{width:900px; max-width:100%; background:#fff; position:relative; box-shadow:0 0 0 6px var(--frame);}
#accountBar{background:#2c2c2c; color:#ddd; font-size:11px; padding:6px 16px; display:flex; justify-content:space-between; align-items:center;}
#accountBar a{color:#fff; text-decoration:underline; cursor:pointer; margin-left:10px;}
header{background:var(--header); display:flex; align-items:center; justify-content:space-between; padding:14px 20px; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:center; gap:14px;}
.logo{width:56px; height:42px; background:#fff; border:1px solid #888; position:relative; flex-shrink:0;}
.logo::before,.logo::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#999;transform-origin:center;}
.logo::before{transform:translateY(-1px) rotate(20deg);}
.logo::after{transform:translateY(-1px) rotate(-20deg);}
.title{font-weight:bold; font-size:18px; letter-spacing:.3px;}
.subtitle{font-size:11px; color:#666; margin-top:2px;}
.navbtns{display:flex; gap:10px;}
.navbtn{background:#fff; border:1px solid #999; padding:8px 18px; font-family:inherit; font-size:12px; cursor:pointer; text-decoration:none; color:#000; display:inline-block;}
.navbtn:hover{background:#eee;}
.body-pad{padding:22px;}
.bar{background:#000; height:11px; margin:8px 0;}
.w1{width:95%;} .w2{width:70%;} .w3{width:50%;} .w4{width:30%;} .w5{width:18%;}
.box{background:var(--light);}
.btn{background:var(--dark); color:#fff; border:none; padding:9px 16px; font-family:inherit; font-size:12px; cursor:pointer; text-decoration:none; display:inline-block;}
.btn:hover{filter:brightness(1.1);}
.btn.white{background:#fff; color:#000; border:1px solid #999;}
.btn.danger{background:var(--danger);}
.btn.warn{background:var(--warn);}
.btn.ok{background:var(--ok);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.ph-img{background:var(--light); position:relative;}
.ph-img::before,.ph-img::after{content:"";position:absolute;inset:0;}
.ph-img::before{background:linear-gradient(to bottom right, transparent calc(50% - 1px), #999 50%, transparent calc(50% + 1px));}
.ph-img::after{background:linear-gradient(to top right, transparent calc(50% - 1px), #999 50%, transparent calc(50% + 1px));}
.searchbar{background:var(--light); padding:14px 18px; font-weight:bold; font-size:14px; margin-bottom:16px; border:none; width:100%; font-family:inherit;}
.row{display:flex; gap:16px; flex-wrap:wrap;}
.card{background:var(--light); padding:16px;}
.clickable{cursor:pointer;}
.clickable:hover{outline:2px dashed #888;}
.chip{height:26px; flex:1; min-width:60px;}
a.plain{color:inherit; text-decoration:none;}

/* dropdowns */
.dropdown{display:none; position:absolute; right:20px; top:64px; background:#fff; border:1px solid #999; width:230px; z-index:50; box-shadow:0 4px 10px rgba(0,0,0,.25);}
.dropdown.show{display:block;}
.dd-close{width:100%; text-align:center; padding:10px; background:#fff; border:none; border-bottom:1px solid #ccc; font-family:inherit; cursor:pointer;}
.dd-section{padding:8px 16px; font-weight:bold; background:var(--light); font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#555;}
.dd-item{padding:10px 16px; border-bottom:1px solid #eee; cursor:pointer; font-size:13px; display:block; color:inherit; text-decoration:none;}
.dd-item:hover{background:#f0f0f0;}
.dd-item.danger{color:var(--danger); font-weight:bold;}
.dd-sub{display:block; font-size:10px; color:#777; font-weight:normal; margin-top:2px;}
.dd-foot{background:var(--dark); height:30px;}

.modal-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; align-items:center; justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{background:var(--light); width:340px; padding:20px; max-width:92vw;}
.modal h3{margin:0 0 14px; text-align:center; font-size:14px;}
.field-label{font-size:12px; font-weight:bold; margin-bottom:4px;}
.field-input{background:#fff; border:1px solid #999; height:30px; width:100%; margin-bottom:14px; font-family:inherit; padding:0 8px;}
.field-input.error{border-color:var(--danger); background:#fbeaea;}
.field-error-text{font-size:11px; color:var(--danger); margin:-10px 0 10px; display:none;}
.field-input.error + .field-error-text{display:block;}
select.field-input{padding:0 6px;}
.modal-actions{display:flex; gap:12px; margin-top:6px;}
.warning-box{background:#f3e3c8; border:1px solid var(--warn); color:#5c3d12; font-size:12px; padding:8px 10px; margin:-6px 0 14px;}

.map-wrap{position:relative;}
.map-area{background:var(--light); height:280px; position:relative; overflow:hidden;
  background-image:linear-gradient(to bottom right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%),
                    linear-gradient(to top right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%);}
.pin{position:absolute; width:26px; height:34px; cursor:pointer;}
.pin svg{width:100%; height:100%;}
.pin.dim{opacity:.2;}
.boundary{position:absolute; border:2px dashed #777; border-radius:50%; pointer-events:none;}
.gpx-track{position:absolute; pointer-events:none;}
.map-legend{font-size:11px; color:#555; display:flex; gap:18px; margin-top:8px; flex-wrap:wrap;}
.filter-dd{display:none; position:absolute; right:0; top:44px; background:var(--dark); color:#fff; width:210px; padding:14px 16px; z-index:20;}
.filter-dd.show{display:block;}
.filter-dd label{display:flex; gap:8px; align-items:center; padding:4px 0; font-size:12px; font-weight:bold; cursor:pointer;}
.layer-toggle{display:flex; align-items:center; gap:10px; background:var(--light); padding:10px 14px; margin-bottom:14px; font-size:12px;}
.layer-toggle button{background:#fff; border:1px solid #999; padding:5px 12px; font-family:inherit; cursor:pointer; font-size:11px;}
.layer-toggle button.active{background:var(--dark); color:#fff;}

.gallery-row{display:flex; gap:20px; background:var(--light); padding:20px;}
.gallery-actions{display:flex; flex-direction:column; gap:10px; margin-top:10px; max-width:220px;}
.profile-cols{display:flex; gap:20px; margin-top:20px; flex-wrap:wrap;}
.profile-side{width:170px;}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#222; color:#fff; padding:10px 18px; font-size:13px; display:none; z-index:200;}

.stat-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.stat-card{background:var(--light); flex:1; min-width:130px; padding:14px 16px;}
.stat-label{font-size:10px; letter-spacing:.4px; color:#555; font-weight:bold; text-transform:uppercase; margin-bottom:8px;}
.stat-value{font-size:24px; font-weight:bold;}
.results-row{display:flex; align-items:center; justify-content:space-between; margin:14px 0 16px; flex-wrap:wrap; gap:10px;}
.results-count{font-size:12px; color:#555;}

.sites-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:22px;}
@media (max-width:700px){ .sites-list{grid-template-columns:repeat(2, 1fr);} }
.site-card{background:var(--light); padding:16px;}
.site-card.inactive{opacity:.55;}
.site-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.chevron{font-size:18px; line-height:1; color:#666;}
.meta-line{display:flex; align-items:center; gap:8px; margin-top:10px;}
.meta-dot{width:8px; height:8px; border-radius:50%; background:#999; flex-shrink:0;}
.tag{display:inline-block; background:#fff; border:1px solid #999; font-size:11px; font-weight:bold; padding:4px 10px; margin-top:12px;}
.tag.inactive-tag{background:var(--danger); color:#fff; border:none;}
.card-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.card-actions .btn{font-size:11px; padding:6px 10px;}
.view-map-btn{display:block; width:100%; text-align:center; padding:16px; font-weight:bold; font-size:13px; letter-spacing:.3px;}

.tag-chip{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #999; font-size:11px; font-weight:bold; padding:5px 6px 5px 10px; margin:4px 6px 0 0;}
.tag-chip button{background:none; border:none; cursor:pointer; font-size:12px; color:#777; padding:0 2px;}
.tag-input-row{display:flex; gap:8px; margin-top:10px;}
.tag-input-row input{flex:1;}

.tabs{display:flex; gap:0; margin-bottom:0;}
.tab-btn{background:var(--light); border:none; padding:10px 16px; font-family:inherit; font-size:12px; font-weight:bold; cursor:pointer; border-bottom:3px solid transparent;}
.tab-btn.active{border-bottom:3px solid var(--dark); background:#eee;}
.tab-panel{display:none; background:var(--light); padding:16px;}
.tab-panel.active{display:block;}

table.wf-table{width:100%; border-collapse:collapse; font-size:12px;}
table.wf-table th{text-align:left; background:var(--dark); color:#fff; padding:8px 10px; font-size:11px; text-transform:uppercase;}
table.wf-table td{padding:8px 10px; border-bottom:1px solid #ccc; background:#fff;}
table.wf-table tr.clickable:hover td{background:#f0f0f0;}
.you-badge{background:var(--accent); color:#fff; font-size:10px; padding:2px 6px; margin-left:6px;}

.banner{padding:10px 16px; font-size:12px; margin-bottom:16px;}
.banner.offline{background:#f3e3c8; color:#5c3d12;}
.banner.warn{background:#f3e3c8; color:#5c3d12; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}

.center-page{display:flex; align-items:center; justify-content:center; min-height:520px;}
.auth-box{width:340px; max-width:92vw; padding:10px 10px 30px;}
.auth-box h2{margin:0 0 4px;}
.role-pick{display:flex; gap:10px; margin-top:6px;}
.role-pick .btn{flex:1; text-align:center;}
.step{display:none;}
.step.active{display:block;}
.link-line{font-size:12px; text-align:center; margin-top:14px;}
.link-line a{color:var(--accent); cursor:pointer;}

/* ===== User stories panel — lives OUTSIDE the app screen, injected by app.js ===== */
.stories{width:360px; max-width:100%; background:#fff; padding:20px 22px; box-shadow:0 0 0 6px var(--frame); max-height:900px; overflow-y:auto;}
.stories h2{font-size:16px; margin:0 0 4px;}
.stories .hint{font-size:11px; color:#777; margin:0 0 18px; line-height:1.5;}
.stories .hint code{background:var(--light); padding:1px 4px;}
.story-block{margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed #ccc;}
.story-block:last-child{border-bottom:none;}
.story-block h3{font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px; background:var(--light); padding:6px 10px;}
.story-block[data-current="true"] h3{background:var(--dark); color:#fff;}
.story-item{margin-bottom:10px;}
.story-item:last-child{margin-bottom:0;}
.story-id{display:inline-block; font-size:10px; font-weight:bold; color:var(--accent); margin-bottom:3px;}
.story-item p{font-size:12.5px; line-height:1.5; margin:0; color:#333;}

.us{display:inline-block; font-size:9px; font-weight:bold; color:var(--accent); border:1px dashed var(--accent); background:#fff; padding:1px 4px; margin:0 4px; vertical-align:middle; white-space:nowrap;}