:root{--ol-bg:#f6f7f8;--ol-card:#fff;--ol-border:#e6e7e9;--ol-text:#1f2937;--ol-muted:#6b7280;--ol-primary:#0d6efd;--ol-success:#22c55e;--ol-radius:16px}
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.bg-body{background:var(--ol-bg)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem}
.card-soft{background:var(--ol-card);border:1px solid var(--ol-border);border-radius:var(--ol-radius);box-shadow:0 1px 1px rgba(0,0,0,.02)}
.stepper{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.stepper .step{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--ol-border);border-radius:999px;background:#fff;color:var(--ol-muted);font-weight:600}
.stepper .step.active{border-color:var(--ol-primary);color:var(--ol-primary);background:rgba(13,110,253,.06)}
.stepper .step .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;font-size:.8rem}
.dragzone{border:2px dashed var(--ol-border);border-radius:12px;background:#fff;padding:2rem;text-align:center;transition:.2s ease}
.dragzone.dragover{border-color:var(--ol-primary);background:rgba(13,110,253,.05)}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;margin-top:1rem}
.preview-grid .thumb{position:relative;border:1px solid var(--ol-border);border-radius:12px;overflow:hidden;background:#fff}
.preview-grid .thumb img{width:100%;height:120px;object-fit:cover;display:block}
.preview-grid .thumb .btn-del{position:absolute;top:6px;right:6px}
.progress-thin{height:6px;border-radius:999px;overflow:hidden;background:#e5e7eb}.progress-thin .bar{height:100%;width:0%;background:var(--ol-primary);transition:width .2s}
.spinner-hero{display:inline-block;width:1.25rem;height:1.25rem;border-radius:50%;border:3px solid #cbd5e1;border-top-color:var(--ol-primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.city-card:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}


.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.nav-shell{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:72px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:-.02em;
}

.brand-link{
  color:var(--ol-text);
  text-decoration:none;
  font-size:1.05rem;
}

.brand-link:hover{
  color:var(--ol-text);
  text-decoration:none;
}

.dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--ol-primary),var(--ol-success));
  box-shadow:0 0 0 6px rgba(13,110,253,.08);
}

.links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.links a{
  color:var(--ol-text);
  text-decoration:none;
  font-weight:600;
  padding:10px 14px;
  border-radius:12px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.links a:hover{
  background:rgba(13,110,253,.08);
  color:var(--ol-primary);
  text-decoration:none;
  transform:translateY(-1px);
}

.links a.nav-cta{
  background:var(--ol-primary);
  color:#fff;
}

.links a.nav-cta:hover{
  background:#0b5ed7;
  color:#fff;
}

.nav-toggle{
  display:none;
  margin-left:auto;
  width:46px;
  height:46px;
  border:1px solid var(--ol-border);
  border-radius:14px;
  background:#fff;
  padding:0;
  align-items:center;
  justify-content:center;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:3px auto;
  border-radius:999px;
  background:var(--ol-text);
}

@media (max-width:768px){
  .nav-toggle{
    display:inline-flex;
  }

  .nav-shell{
    flex-wrap:wrap;
    padding:12px 0;
  }

  .links{
    display:none;
    width:100%;
    margin:0 0 16px;
    padding:14px;
    border:1px solid var(--ol-border);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .links.is-open{
    display:flex;
  }

  .links a{
    width:100%;
  }
}




/* ── Photo upload ── */
.dragzone {
  border: 2px dashed #adb5bd;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.dragzone:hover,
.dragzone.drag-over {
  border-color: #0d6efd;
  background: #f0f6ff;
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.upload-card {
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
  font-size: .8rem;
}
.upload-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #e9ecef;
}
.upload-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: #dee2e6;
}
.upload-bar {
  height: 100%;
  width: 0;
  background: #0d6efd;
  transition: width .1s;
}
.upload-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.upload-remove:hover { background: #dc3545; }
.upload-name {
  padding: .25rem .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .75rem;
}
.upload-status {
  padding: 0 .4rem .3rem;
}