html, body {
    overscroll-behavior: none;
    padding-top:2em;
}

:root{
  --glass-bg: rgba(255,255,255,.08);
  --glass-bg-2: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.16);
  --glass-shadow: 0 12px 40px rgba(0,0,0,.28);
  --blur: 18px;
  --radius: 22px;
  --muted: rgba(255,255,255,.72);
}

[data-bs-theme="light"]{
  --glass-bg: rgba(255,255,255,.62);
  --glass-bg-2: rgba(255,255,255,.48);
  --glass-border: rgba(0,0,0,.10);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.10);
  --muted: rgba(0,0,0,.68);
}

html, body{
  height: 100%;
}

body{
  background: radial-gradient(1200px 700px at 20% -10%, rgba(120,140,255,.35), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(0,255,200,.18), transparent 55%),
              radial-gradient(900px 700px at 50% 120%, rgba(255,120,200,.16), transparent 60%),
              #0b0f1a;
}

[data-bs-theme="light"] body{
  background: radial-gradient(1200px 700px at 20% -10%, rgba(120,140,255,.20), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(0,255,200,.10), transparent 55%),
              radial-gradient(900px 700px at 50% 120%, rgba(255,120,200,.10), transparent 60%),
              #f5f7fb;
}

/* floating orbs */
.bg-orb{
  position: fixed;
  inset: auto;
  width: 520px;
  height: 520px;
  filter: blur(28px);
  opacity: .55;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
.orb-1{ left:-220px; top:-220px; background: radial-gradient(circle at 30% 30%, rgba(125,150,255,.9), transparent 60%); }
.orb-2{ right:-240px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(0,255,200,.65), transparent 60%); }
.orb-3{ left:25%; bottom:-320px; background: radial-gradient(circle at 30% 30%, rgba(255,120,200,.55), transparent 60%); }

.container, header, main{
  position: relative;
  z-index: 1;
}

.glass{
  background: linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.badge-glass{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid var(--glass-border);
}
[data-bs-theme="light"] .badge-glass{
  background: rgba(255,255,255,.55) !important;
}

.btn-glass{
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.mini-stat{
  min-width: 110px;
  padding: .65rem .8rem;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
}
[data-bs-theme="light"] .mini-stat{ background: rgba(255,255,255,.55); }

.mini-stat-label{
  font-size: .75rem;
  color: var(--muted);
}
.mini-stat-value{
  font-weight: 600;
  font-size: .95rem;
}

.forecast-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 992px){
  .forecast-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .forecast-grid{ grid-template-columns: 1fr; }
}

.forecast-item{
  padding: .75rem .85rem;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
}
[data-bs-theme="light"] .forecast-item{ background: rgba(255,255,255,.55); }

.forecast-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.forecast-time{
  font-size:.8rem;
  color: var(--muted);
}
.forecast-temp{
  font-weight: 700;
}

.trend-chip{
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
  font-size: .8rem;
}
[data-bs-theme="light"] .trend-chip{ background: rgba(255,255,255,.55); }

.accordion-glass .accordion-item{
  background: transparent;
  border: 0;
}
.accordion-glass .accordion-button{
  border-radius: 18px !important;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14) !important;
  color: inherit;
}
[data-bs-theme="light"] .accordion-glass .accordion-button{
  background: rgba(255,255,255,.55) !important;
}
.accordion-glass .accordion-body{
  padding: 1rem 0 0 0;
}

.sensor-card{
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding: .9rem;
  height: 100%;
}
[data-bs-theme="light"] .sensor-card{ background: rgba(255,255,255,.55); }

.sensor-title{
  font-weight: 650;
  margin: 0;
}
.sensor-sub{
  color: var(--muted);
  font-size: .8rem;
}
.spark{
  width: 100%;
  height: 44px;
}

/* Optional: make inputs feel more glassy */
.form-control {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  box-shadow: none;
}