body.app-bg {
  background: linear-gradient(160deg,#0b3d91,#0a7c66);
  color:#fff;
  font-family: system-ui;
}

.app-shell { max-width:900px; margin:auto; }

.app-header { padding:15px; }

.app-title { font-size:1.4rem; font-weight:600; }
.app-subtitle { font-size:0.8rem; opacity:0.9; }

.app-card {
  background:rgba(255,255,255,0.08);
  border:0;
  backdrop-filter: blur(8px);
  border-radius:16px;
}

.app-map { width: 100%; height: 42vh; min-height: 280px; border-radius: 16px; } { height:350px; border-radius:16px; }

/* map status chip */
.map-status{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  backdrop-filter: blur(8px);
  font-size:.9rem;
  line-height:1;
  transition: opacity .25s ease;
}

.map-status .icon{ width:22px; text-align:center; }

.map-status.ok{ background:rgba(45,187,78,.85); }
.map-status.warn{ background:rgba(31,111,235,.85); }
.map-status.err{ background:rgba(255,193,7,.92); color:#111; }

/* mini result under radius */
.mini-result{
  margin-top:6px;
  font-size:.9rem;
  color:#fff;
  opacity:.92;
}

/* smart box */
.smart-box{
  padding:12px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}
.smart-desc{
  margin-top:6px;
  color: rgba(255,255,255,.75);
}

/* pulse (subtle, pro) */
.pulse-on{
  animation:pulseGlow 1.3s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%   { box-shadow: 0 0 0 0 rgba(31,111,235,.0); }
  50%  { box-shadow: 0 0 0 14px rgba(31,111,235,.12); }
  100% { box-shadow: 0 0 0 0 rgba(31,111,235,.0); }
}

.label { font-size:0.8rem; opacity:0.9; }
.value { font-size:1rem; font-weight:600; }

.btn-ocean {
  background:#1f6feb;
  border:none;
  color:#fff;
}

.btn-leaf {
  background:#2dbb4e;
  border:none;
  color:#fff;
}

.map-status-chip {
  position:absolute;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 14px;
  background:rgba(0,0,0,0.6);
  border-radius:20px;
  font-size:0.85rem;
  display:flex;
  gap:6px;
  align-items:center;
  transition:all 0.3s ease;
}

.map-status-chip.ok { background:#2dbb4e; }
.map-status-chip.warn { background:#1f6feb; }
.map-status-chip.err { background:#ffc107; color:#000; }

.smart-box {
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,0.25);
}

.smart-desc {
  font-size:0.75rem;
  opacity:0.8;
}

.pulse-on {
  animation:pulse 1s infinite;
}

@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(31,111,235,0.5); }
  70% { box-shadow:0 0 0 20px rgba(31,111,235,0); }
  100% { box-shadow:0 0 0 0 rgba(31,111,235,0); }
}