.outdoor-panel{grid-column:1/3;padding:14px;display:flex;flex-direction:column}
.indoor-panel{grid-column:3;padding:14px;display:flex;flex-direction:column}
.trend-panel{grid-column:1;padding:12px}
.forecast-panel{grid-column:2;padding:12px}
.radar-panel{grid-column:3;padding:10px}
.alerts-panel{grid-column:1/4;padding:10px}

.outdoor-main{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:20px;flex:1;min-height:0}
.weather-visual{text-align:center}
.weather-icon{font-size:clamp(110px,12vw,190px);filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.outdoor-temp{font-size:clamp(72px,8vw,130px);font-weight:850;letter-spacing:-6px;line-height:.9}
.outdoor-temp small{font-size:.33em;color:#d6e0e9;letter-spacing:0}
.weather-label{font-size:clamp(26px,2.8vw,44px);font-weight:800;margin-top:10px}
.feels{display:inline-flex;gap:8px;align-items:center;margin-top:12px;color:var(--orange);font-size:clamp(16px,1.5vw,22px)}
.outdoor-stats{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.stat{padding:11px;border-right:1px solid rgba(255,255,255,.08)}
.stat:last-child{border-right:0}
.stat span,.astro-row span,.indoor-temp-card>span,.indoor-small>span,.micro-card>span{display:block;font-size:9px;color:#aebdca;letter-spacing:.6px}
.stat strong{display:block;font-size:clamp(16px,1.5vw,22px);margin-top:4px}
.stat em{display:block;font-size:10px;color:var(--cyan);font-style:normal;margin-top:3px}
.astro-row{display:grid;grid-template-columns:repeat(6,1fr);margin-top:8px}
.astro-row>div{padding:9px 12px;border-right:1px solid rgba(255,255,255,.08)}
.astro-row>div:last-child{border-right:0}
.astro-row strong{display:block;font-size:14px;margin-top:3px}

.indoor-grid{display:grid;grid-template-columns:1.5fr .9fr .9fr;grid-template-rows:1.25fr .8fr .7fr;gap:8px;flex:1;margin-top:10px}
.indoor-temp-card{grid-row:1/3;padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(145deg,rgba(14,47,75,.72),rgba(8,24,40,.72));border:1px solid rgba(110,190,255,.16);border-radius:12px;position:relative;overflow:hidden}
.indoor-temp-card::before{content:"🌡";position:absolute;left:18px;bottom:8px;font-size:90px;opacity:.08}
.indoor-temp-card strong{font-size:clamp(68px,7vw,108px);line-height:.92;color:var(--blue);letter-spacing:-5px;margin-top:14px;position:relative}
.indoor-temp-card strong small{font-size:.33em;letter-spacing:0}
.indoor-temp-card em{font-style:normal;color:var(--green);font-size:15px;font-weight:700;margin-top:14px}
.indoor-small,.micro-card{padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:12px}
.indoor-small strong{display:block;font-size:clamp(20px,2vw,30px);margin-top:8px}
.indoor-small em{display:block;font-style:normal;font-size:11px;color:var(--green);margin-top:7px}
.meter{height:6px;background:rgba(255,255,255,.1);border-radius:99px;margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px}
.micro-card strong{display:block;font-size:clamp(16px,1.5vw,22px);margin-top:7px}
.ventilation-micro strong{color:var(--green)}
.last-netatmo{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:8px;padding:10px;background:rgba(255,255,255,.04);border-radius:10px;font-size:11px}
.last-netatmo strong{font-size:20px}

.tabs{display:flex;gap:6px;margin-top:10px}
.tabs button{border:1px solid rgba(110,190,255,.2);background:rgba(255,255,255,.04);color:#fff;border-radius:8px;padding:7px 12px;font-size:10px}
.tabs button.active{background:rgba(20,157,255,.35)}
.chart-box{height:160px;margin-top:8px}
.chart-box canvas{width:100%;height:100%;display:block}
.chart-legend{display:flex;justify-content:center;gap:20px;font-size:10px;color:#c3d0db}
.chart-legend i{display:inline-block;width:16px;height:3px;margin-right:5px}
.outdoor-line{background:var(--orange)}.indoor-line{background:var(--blue)}

.forecast-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:10px}
.forecast-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 5px;text-align:center}
.forecast-card .day{font-size:11px;font-weight:800}
.forecast-card .date{font-size:9px;color:#a9b9c7;margin-top:2px}
.forecast-card .icon{font-size:27px;margin:7px 0}
.forecast-card .max{font-size:18px;font-weight:800}
.forecast-card .min{font-size:13px;color:#b8c6d2}
.forecast-card .rainp{font-size:10px;color:var(--cyan);margin-top:6px}
.forecast-footer{text-align:center;margin-top:8px;padding:8px;background:rgba(255,255,255,.04);border-radius:9px;font-size:11px}

.radar-head{display:flex;justify-content:space-between;align-items:center}
.radar-head button{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;border-radius:8px;padding:5px 8px}
#radarFrame{width:100%;height:235px;border:0;border-radius:12px;margin-top:8px;filter:saturate(.9) brightness(.9)}

.alerts-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:9px}
.alert-card{display:flex;gap:10px;align-items:center;padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px}
.alert-card>span{font-size:25px}
.alert-card strong{display:block;font-size:12px}
.alert-card em{display:block;font-style:normal;font-size:9px;color:#aab9c6;margin-top:3px}
.alert-card.green strong{color:var(--green)}
.alert-card.yellow strong{color:var(--yellow)}
.alert-card.orange strong{color:var(--orange)}
.alert-card.red strong{color:var(--red)}
.alert-card.blue strong{color:var(--cyan)}
.alert-card.cyan strong{color:#56e4ff}


/* V7 Ultimate – látványosabb kültéri rész, grafikon és AI panel */
.outdoor-main{
  grid-template-columns:1fr 1.15fr;
  gap:10px;
}
.weather-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.weather-icon{
  font-size:clamp(150px,15vw,235px);
  transform:translateY(4px);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.52));
}
.outdoor-summary{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.outdoor-temp{
  text-shadow:0 8px 28px rgba(0,0,0,.48);
}
.indoor-temp-card::before{
  content:"";
}
.indoor-temp-card{
  background:
    radial-gradient(circle at 50% 48%,rgba(20,157,255,.20),transparent 48%),
    linear-gradient(145deg,rgba(14,47,75,.72),rgba(8,24,40,.72));
}
.indoor-temp-card strong{
  text-shadow:0 0 28px rgba(20,157,255,.30);
}
.chart-box{
  height:178px;
}
.forecast-panel{
  display:flex;
  flex-direction:column;
}
.forecast-cards{
  flex:0 0 auto;
}
.ai-advice-card{
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  background:
    linear-gradient(135deg,rgba(23,123,174,.20),rgba(30,185,119,.10)),
    rgba(255,255,255,.035);
  border:1px solid rgba(83,199,255,.20);
}
.ai-advice-title{
  font-size:10px;
  color:#9fdfff;
  letter-spacing:1px;
  font-weight:800;
}
.ai-advice-text{
  margin-top:7px;
  font-size:14px;
  line-height:1.35;
  color:#f4f8fb;
}
.alert-card{
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.alert-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
}
.alert-card.green>span{animation:alertPulse 2.6s ease-in-out infinite}
.alert-card.red>span{animation:alertWarn 2s ease-in-out infinite}
.alert-card.orange>span{animation:alertFloat 3.2s ease-in-out infinite}
@keyframes alertPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes alertWarn{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes alertFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}


/* V7.2 – középső tartalom kontrasztja */
.outdoor-summary,
.indoor-temp-card{
  filter:none;
}

.indoor-temp-card{
  background:
    linear-gradient(145deg,rgba(10,42,68,.88),rgba(7,22,38,.88));
}

.outdoor-panel,
.indoor-panel,
.trend-panel,
.forecast-panel,
.radar-panel,
.alerts-panel{
  box-shadow:0 8px 24px rgba(0,0,0,.42);
}

.weather-icon{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.42));
}

.ai-advice-card{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}


/* V8 Ultimate – kártyák és hangsúlyok */
.outdoor-panel{
  position:relative;
  overflow:hidden;
}
.outdoor-panel::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  left:-180px;
  top:-190px;
  background:radial-gradient(circle,rgba(255,169,41,.16),transparent 68%);
  pointer-events:none;
}
.indoor-panel{
  position:relative;
  overflow:hidden;
}
.indoor-panel::after{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  border-radius:50%;
  right:-170px;
  top:-150px;
  background:radial-gradient(circle,rgba(56,167,255,.18),transparent 68%);
  pointer-events:none;
}
.weather-icon{
  animation:weatherFloat 5s ease-in-out infinite;
}
.indoor-temp-card strong{
  font-size:clamp(76px,7.5vw,118px);
  color:#69baff;
}
.indoor-temp-card{
  border-color:rgba(69,216,255,.20);
}
.outdoor-temp,
.indoor-temp-card strong{
  font-variant-numeric:tabular-nums;
}
.stat,
.indoor-small,
.micro-card,
.forecast-card,
.alert-card{
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
}
.forecast-card:hover,
.stat:hover,
.indoor-small:hover,
.micro-card:hover{
  border-color:rgba(69,216,255,.26);
}
.ai-advice-card{
  position:relative;
  overflow:hidden;
}
.ai-advice-card::after{
  content:"AI";
  position:absolute;
  right:12px;
  bottom:-8px;
  font-size:54px;
  font-weight:900;
  color:rgba(255,255,255,.035);
}
.alert-card{
  min-height:64px;
}
@keyframes weatherFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}