/* assets/style.css — iPadOS-inspired glass UI, no frameworks */
:root{
  --bg1: radial-gradient(1200px 800px at 20% 10%, #89b4ff30, transparent 60%),
         radial-gradient(1000px 700px at 80% 80%, #ff89d630, transparent 60%),
         linear-gradient(180deg, #0b1220, #0e1324);
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.14);
  --stroke: rgba(255,255,255,0.12);
  --text: #eaeefb;
  --sub: #c7cee7;
  --ok: #36d399;
  --warn: #fdd25e;
  --err: #ff6b6b;
  --corner: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, Ubuntu, Arial, sans-serif;
  color: var(--text);
  background: var(--bg1) fixed;
  background-size: cover;
}

.bg{ position:fixed; inset:0; pointer-events:none; filter: blur(60px) saturate(120%); opacity:.9; }

.topbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 22px;
  backdrop-filter: saturate(140%) blur(18px);
  background: linear-gradient(#ffffff06,#00000010);
  border-bottom: 1px solid var(--stroke);
}

.status-left{ display:flex; gap:10px; align-items:center; font-weight:600; }
.status-left .dot{ width:6px; height:6px; background:var(--sub); border-radius:50%; display:inline-block; opacity:.7; }
.status-right .pill{ padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; font-size:13px; opacity:.9;}
.pill.ok{ background: #1f2b27; border-color:#28483b; color:#7ee2b8; }
.pill.err{ background: #2b1f23; border-color:#48323b; color:#ff9db0; }

.container{
  max-width: 1200px;
  margin: 24px auto 120px;
  padding: 0 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 6;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-lg{ grid-column: span 12; }
.card .card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 10px;
}
.card h2, .card h3{ margin:0; font-weight:700; letter-spacing:.2px; }
.subtle{ color: var(--sub); font-size: 14px; }

.weather{
  display:grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items:center;
}
.weather .temp{ font-size: 64px; font-weight: 800; letter-spacing: -1px; }
.weather .deg{ font-size:.5em; opacity:.7; margin-left:4px; }
.weather .meta{ line-height: 1.6; color: var(--sub); }
.weather .icon{ width:80px; height:80px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }

.indoor{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.thermo-value{ font-size: 42px; font-weight:800; }
.thermo-sub{ color: var(--sub); }

.button{
  appearance: none; border:none; cursor:pointer;
  padding: 12px 16px; border-radius: 16px;
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  color: var(--text); font-weight:700; letter-spacing:.2px;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .2s ease, background .2s ease;
}
.button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.button:active{ transform: translateY(0); filter: brightness(.98); }
.button-primary{ background: linear-gradient(180deg, #3d7cff, #2b66ff); border-color:#3364ff66; }
.button-ghost{ background: transparent; }
.button[aria-busy="true"]{ opacity:.7; pointer-events:none; }

.devices-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.device{
  background: rgba(255,255,255,0.06);
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 14px;
  display:flex; flex-direction:column; gap:10px;
}
.device .dev-top{ display:flex; align-items:center; justify-content:space-between; }
.device .name{ font-weight:700; }
.badge{ padding:4px 8px; font-size:12px; border-radius:999px; border:1px solid var(--stroke); }
.badge.on{ background:#1a2a18; color:#b8ffb5; border-color:#2a4b2a; }
.badge.off{ background:#2a2222; color:#ffb5b5; border-color:#4b2a2a; }

.dock{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom: 20px; display:flex; gap:14px; padding:10px 12px;
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(140%);
  background: linear-gradient(#ffffff0a,#00000018);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  z-index: 30;
}
.dock-item{
  width:52px; height:52px; display:grid; place-items:center;
  text-decoration:none; color:var(--text); font-size:22px;
  background: rgba(255,255,255,0.08);
  border:1px solid var(--stroke);
  border-radius: 14px;
}
.dock .grab{ width: 26px; height: 6px; border-radius: 99px; align-self:center;
  background: #ffffff30; margin-left: 4px; margin-right: 2px; }

/* Responsive */
@media (max-width: 900px){
  .card{ grid-column: span 12; }
  .weather .temp{ font-size: 56px; }
}
@media (max-width: 520px){
  .weather{ grid-template-columns: 1fr; }
  .dock{ bottom:12px; gap:10px; }
}


/* Dock active state */
.dock-item.active{ outline: 2px solid #ffffff50; transform: translateY(-2px); }
.dock-item:focus{ outline: 2px solid #ffffff50; }


/* Тёплая подсветка при включённом обогреве */
@keyframes warmPulse {
  0%   { box-shadow: var(--shadow), 0 0 20px rgba(255,120,0,.22), inset 0 0 10px rgba(255,120,0,.12); }
  50%  { box-shadow: var(--shadow), 0 0 46px rgba(255,150,40,.55), inset 0 0 24px rgba(255,120,0,.22); }
  100% { box-shadow: var(--shadow), 0 0 20px rgba(255,120,0,.22), inset 0 0 10px rgba(255,120,0,.12); }
}

#indoor-card.heating{
  border-color: rgba(255,150,64,.65);
  background:
    linear-gradient(180deg, rgba(255,140,40,.18), rgba(255,100,0,.06)) ,
    var(--glass);
  animation: warmPulse 1.8s ease-in-out infinite;
}

/* если пользователю не нравятся анимации */
@media (prefers-reduced-motion: reduce){
  #indoor-card.heating{ animation: none; }
}