:root{
  --bg:#0b0d11;
  --bg-2:#11141a;
  --panel:#151922;
  --panel-2:#1b2030;
  --border:#222838;
  --text:#e7e9ee;
  --muted:#8b93a7;
  --accent:#ff6a3d;
  --accent-2:#ffb199;
  --danger:#e5484d;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
  --topbar-h:58px;
}

*{box-sizing:border-box}
html,body{height:100%}
button,a{touch-action:manipulation}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,106,61,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(90,120,255,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

a{color:inherit;text-decoration:none}

.topbar{
  position:sticky;top:0;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 20px;height:var(--topbar-h);
  background:rgba(11,13,17,.78);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
  animation:slideDown .5s ease;
}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,106,61,.6);
  animation:pulse 2.2s infinite;
  flex:0 0 auto;align-self:center;
}
.brand-title{font-weight:600;letter-spacing:.2px;white-space:nowrap}
.brand-sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:10px}
.nav-link{
  color:var(--text);font-size:14px;
  padding:6px 10px;border-radius:8px;transition:background .2s,color .2s;
}
.nav-link:hover{background:var(--panel-2)}
.nav-link.subtle{color:var(--muted)}

.main{min-height:calc(100vh - var(--topbar-h))}

/* ================= MAP PAGE ================= */
.map-wrap{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 360px;
  height:calc(100vh - var(--topbar-h));
}
#map{height:100%;width:100%;background:#0a0c10;z-index:0}

.side-panel{
  border-left:1px solid var(--border);
  background:var(--panel);
  display:flex;flex-direction:column;
  padding:16px;gap:12px;overflow:hidden;
  animation:slideLeft .45s ease both;
}
.panel-header{display:flex;align-items:center;justify-content:space-between}
.panel-header h2{margin:0;font-size:18px;font-weight:600;letter-spacing:.3px}
.panel-actions{display:flex;gap:8px}
.hint{margin:0;color:var(--muted);font-size:13px;animation:fade .3s}
.empty-list{color:var(--muted);font-size:13px;text-align:center;padding:20px 6px;margin:0}

.btn-ghost,.btn-primary,.btn-danger{
  cursor:pointer;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);
  padding:10px 16px;border-radius:10px;font:inherit;font-weight:500;
  transition:transform .15s, background .2s, box-shadow .2s, border-color .2s;
  min-height:40px;
}
.btn-ghost:hover{background:#232a3b}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#ff8a5e);
  border-color:transparent;color:#1a0d06;font-weight:600;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,106,61,.35)}
.btn-danger{background:transparent;border-color:#3c2027;color:#ff7b80}
.btn-danger:hover{background:rgba(229,72,77,.12)}

.icon-btn{
  width:38px;height:38px;padding:0;border-radius:10px;
  font-size:22px;line-height:1;display:grid;place-items:center;
}
#toggleAdd.active{
  background:linear-gradient(135deg,var(--accent),#ff8a5e);
  color:#1a0d06;border-color:transparent;
  transform:rotate(45deg);
}

.panel-toggle{
  display:none;
  position:absolute;top:12px;left:12px;z-index:1000;
  width:42px;height:42px;border-radius:12px;
  background:rgba(21,25,34,.85);backdrop-filter:blur(8px);
  border:1px solid var(--border);color:var(--text);
  font-size:18px;cursor:pointer;
  box-shadow:var(--shadow);
}
.only-mobile{display:none}

.marker-form{display:flex;flex-direction:column;gap:10px;animation:fade .3s}
.marker-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.marker-form input[type=text],
.marker-form textarea,
.caption-label input{
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--border);border-radius:10px;
  padding:12px;font:inherit;outline:none;width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.marker-form input[type=text]:focus,
.marker-form textarea:focus,
.caption-label input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,106,61,.18);
}
.row{display:flex;gap:10px;justify-content:flex-end}

.marker-list{
  list-style:none;margin:0;padding:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch;
}
.marker-list::-webkit-scrollbar{width:8px}
.marker-list::-webkit-scrollbar-thumb{background:#2a3246;border-radius:8px}

.marker-item{
  display:flex;align-items:center;gap:12px;
  padding:10px;border:1px solid var(--border);
  background:var(--panel-2);border-radius:12px;
  cursor:pointer;transition:transform .2s, border-color .2s, background .2s;
  animation:fadeUp .35s ease both;
}
.marker-item:hover{
  transform:translateY(-2px);
  border-color:rgba(255,106,61,.45);
  background:#1f2636;
}
.marker-item:active{transform:scale(.98)}
.marker-thumb{
  width:48px;height:48px;border-radius:10px;overflow:hidden;
  background:#0d1119;flex:0 0 auto;display:grid;place-items:center;
  color:var(--muted);font-size:12px;position:relative;
}
.marker-thumb img,.marker-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.marker-thumb .vb{
  position:absolute;right:2px;bottom:2px;font-size:10px;
  background:rgba(0,0,0,.6);color:#fff;padding:1px 5px;border-radius:4px;
}
.marker-meta{display:flex;flex-direction:column;min-width:0}
.marker-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marker-sub{color:var(--muted);font-size:12px}

/* Leaflet tweaks */
.leaflet-container{background:#0a0c10;font-family:inherit}
.leaflet-control-zoom a{
  background:var(--panel)!important;color:var(--text)!important;
  border-color:var(--border)!important;transition:background .2s;
  width:34px!important;height:34px!important;line-height:34px!important;font-size:18px!important;
}
.leaflet-control-zoom a:hover{background:var(--panel-2)!important}
.leaflet-control-attribution{
  background:rgba(15,18,25,.7)!important;color:var(--muted)!important;
  border-radius:6px!important;font-size:10px!important;
}
.leaflet-control-attribution a{color:#b7bed0!important}

.pulse-marker{
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,106,61,.7);
  animation:pulse 1.8s infinite;
  border:2px solid #fff2;
}

.leaflet-popup-content-wrapper{
  background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);
}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--border)}
.leaflet-popup-content{margin:12px 14px;font-size:14px;max-width:240px}
.popup-title{font-weight:600;margin:0 0 4px 0}
.popup-desc{color:var(--muted);margin:0 0 8px 0;font-size:13px}
.popup-link{
  display:inline-block;margin-top:4px;color:var(--accent);
  font-weight:500;
}
.popup-link:hover{text-decoration:underline}

/* Toasts */
.toast-container{
  position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:2000;
  pointer-events:none;max-width:90%;
}
.toast{
  background:var(--panel);border:1px solid var(--border);
  padding:10px 16px;border-radius:10px;
  box-shadow:var(--shadow);font-size:14px;text-align:center;
  animation:toastIn .35s ease, toastOut .35s ease 2.6s forwards;
}

/* ================= DETAIL PAGE ================= */
.detail-wrap{max-width:1100px;margin:0 auto;padding:24px 20px 80px}
.back-link{
  display:inline-block;color:var(--muted);
  font-size:14px;margin-bottom:10px;transition:color .2s;
}
.back-link:hover{color:var(--text)}

.detail-header h1{margin:8px 0 6px;font-size:28px;font-weight:700;letter-spacing:.2px;word-break:break-word}
.meta{color:var(--muted);font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meta .sep{opacity:.6}
.description{margin:14px 0 0;line-height:1.55;color:#cfd3df;max-width:72ch;word-break:break-word}

.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}

.upload-form{margin:24px 0;display:grid;gap:12px;grid-template-columns:1fr auto;align-items:end}
.upload-form .drop-zone,.upload-form .caption-label{grid-column:1/-1}
.upload-form .btn-primary{justify-self:end}

.drop-zone{
  display:block;cursor:pointer;
  border:2px dashed #2e3648;border-radius:var(--radius);
  padding:28px 16px;text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  transition:border-color .2s, background .2s, transform .2s;
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--accent);
  background:rgba(255,106,61,.06);
  transform:translateY(-1px);
}
.drop-icon{font-size:26px;margin-bottom:4px;opacity:.9}
.drop-text{font-weight:500}
.drop-sub{color:var(--muted);font-size:13px;margin-top:4px}

.gallery{
  margin-top:18px;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.photo-card{
  position:relative;margin:0;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  animation:fadeUp .5s ease both;
  animation-delay:calc(var(--i) * 60ms);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.photo-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,106,61,.4);
  box-shadow:var(--shadow);
}
.media-box{display:block;position:relative;background:#0a0c10}
.photo-card img,
.photo-card video{
  display:block;width:100%;height:200px;object-fit:cover;background:#0a0c10;
  transition:transform .5s ease;
}
.photo-card:hover img{transform:scale(1.05)}
.kind-badge{
  position:absolute;left:8px;top:8px;
  background:rgba(0,0,0,.65);color:#fff;
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;
}
.photo-card figcaption{
  padding:8px 12px;font-size:13px;color:#cfd3df;
  border-top:1px solid var(--border);word-break:break-word;
}
.photo-del{position:absolute;top:8px;right:8px;margin:0}
.photo-del button{
  width:30px;height:30px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;
  opacity:0;transform:translateY(-4px);transition:all .2s;
}
.photo-card:hover .photo-del button,
.photo-card:focus-within .photo-del button{opacity:1;transform:translateY(0)}
.photo-del button:hover{background:var(--danger)}

.empty{color:var(--muted);padding:30px 0;text-align:center;grid-column:1/-1}
.danger-zone{margin-top:40px;text-align:right}

/* ================= Animations ================= */
.fade-in{animation:fade .5s ease both}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,106,61,.65)}
  70%{box-shadow:0 0 0 14px rgba(255,106,61,0)}
  100%{box-shadow:0 0 0 0 rgba(255,106,61,0)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideLeft{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* ================= Responsive ================= */
@media (max-width:900px){
  .topbar{padding:10px 14px}
  .brand-sub{display:none}
  .nav-link{padding:6px 8px}

  .map-wrap{grid-template-columns:1fr;height:calc(100vh - var(--topbar-h))}
  .panel-toggle{display:grid;place-items:center}
  .only-mobile{display:grid}

  .side-panel{
    position:absolute;left:0;right:0;bottom:0;
    border-left:none;border-top:1px solid var(--border);
    border-radius:18px 18px 0 0;
    max-height:75vh;height:auto;
    z-index:1100;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
    pointer-events:none;
  }
  .side-panel.open{pointer-events:auto}
  .side-panel::before{
    content:"";display:block;width:42px;height:4px;border-radius:2px;
    background:#2c3346;margin:2px auto 10px;
  }
  .side-panel.open{transform:translateY(0)}

  .detail-wrap{padding:20px 16px 60px}
  .detail-header h1{font-size:24px}
  .upload-form{grid-template-columns:1fr}
  .upload-form .btn-primary{justify-self:stretch}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .photo-card img,.photo-card video{height:160px}
  .photo-del button{opacity:1;transform:none;background:rgba(0,0,0,.55)}
}

@media (max-width:480px){
  .brand-title{font-size:15px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .photo-card img,.photo-card video{height:140px}
  .leaflet-popup-content{max-width:200px}
}

@media (hover:none){
  .photo-del button{opacity:1;transform:none;background:rgba(0,0,0,.55)}
}