/* Panel premium "Rekuperacja i wentylacja": /pl/projekty/rekuperacja/
   Demonstracja: cztery niezależne jednostki decentralne, sterowane klient-side.
   Wygląd: ciemny granat + szkło, w rodzinie stylistycznej Demo HA.
   Wszystkie stany urządzeń są symulowane w rekuperacja-panel.js. */

.rk-page{
  --rk-ink:#eaf2fb;
  --rk-muted:#9fb2c6;
  --rk-muted-soft:rgba(159,178,198,.72);
  --rk-accent:#66e2ff;
  --rk-accent-2:#12c884;
  --rk-card:rgba(11,22,39,.72);
  --rk-card-line:rgba(120,160,200,.16);
  --rk-glass:rgba(255,255,255,.045);
}

.rk-shell{
  max-width:1560px;
}

.rk-head{
  align-items:flex-start;
  gap:24px;
}

.rk-intro{
  margin:12px 0 0;
  max-width:56rem;
  color:var(--muted-strong);
  line-height:1.65;
}

/* ---- przycisk pełnego ekranu (w nagłówku panelu) ---- */
.rk-fs-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(102,226,255,.34);
  background:rgba(102,226,255,.08);
  color:var(--rk-ink);
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.rk-fs-btn:hover{ background:rgba(102,226,255,.14); border-color:rgba(102,226,255,.55); }
.rk-fs-btn:active{ transform:translateY(1px); }
.rk-fs-btn:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:3px; }

.rk-fs-ic{
  width:18px; height:18px;
  display:inline-block;
  background:currentColor;
  -webkit-mask:var(--rk-fs-mask) center / contain no-repeat;
  mask:var(--rk-fs-mask) center / contain no-repeat;
  --rk-fs-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
}
.is-rk-fullscreen .rk-fs-ic{
  --rk-fs-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5'/%3E%3C/svg%3E");
}

/* ---- scena (element wchodzący w fullscreen) ---- */
.rk-stage{
  position:relative;
  margin-top:18px;
}

.is-rk-fullscreen.rk-stage,
.rk-stage.is-rk-pseudo-fs{
  position:fixed;
  inset:0;
  z-index:2000;
  margin:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(18,200,132,.10), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(102,226,255,.10), transparent 24%),
    linear-gradient(180deg, #07111f 0%, #0a1526 100%);
}
/* desktop: skalowanie planszy do rozmiaru viewportu, z zachowaniem proporcji */
.is-rk-fullscreen .rk-panel,
.rk-stage.is-rk-pseudo-fs .rk-panel{
  position:absolute;
  left:50%;
  top:50%;
  width:1800px;
  max-width:none;
  margin:0;
  transform:translate(-50%, -50%) scale(var(--rk-fs-scale, 1));
  transform-origin:center center;
}
/* wąskie ekrany: bez skalowania, jedno przewijanie od góry */
@media (max-width: 899px){
  .is-rk-fullscreen.rk-stage,
  .rk-stage.is-rk-pseudo-fs{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:clamp(12px, 2.4vw, 24px);
  }
  .is-rk-fullscreen .rk-panel,
  .rk-stage.is-rk-pseudo-fs .rk-panel{
    position:static;
    width:min(1800px, 100%);
    transform:none;
    margin:0 auto;
  }
}

/* ---- panel ---- */
.rk-panel{
  position:relative;
  border-radius:26px;
  border:1px solid var(--rk-card-line);
  padding:clamp(18px, 2.4vw, 30px);
  background:
    radial-gradient(circle at 12% 8%, rgba(102,226,255,.10), transparent 24%),
    radial-gradient(circle at 88% 6%, rgba(18,200,132,.10), transparent 22%),
    linear-gradient(180deg, rgba(10,19,33,.96) 0%, rgba(9,17,28,.98) 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  color:var(--rk-ink);
}

/* ---- pasek górny ---- */
.rk-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--rk-card-line);
}

.rk-eyebrow{
  display:block;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rk-accent);
  font-weight:700;
}
.rk-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0 4px;
}
.rk-title-icon{
  width:38px; height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(102,226,255,.12);
  color:var(--rk-accent);
}
.rk-title-icon svg{ width:22px; height:22px; }
.rk-panel-title{
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}
.rk-tagline{
  margin:0;
  color:var(--rk-muted);
  font-size:.95rem;
}

.rk-weather{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 18px;
  border-radius:16px;
  background:var(--rk-glass);
  border:1px solid var(--rk-card-line);
}
.rk-weather-item{ display:flex; align-items:center; gap:10px; }
.rk-weather-ic{ width:26px; height:26px; color:var(--rk-accent); }
.rk-weather-ic svg{ width:100%; height:100%; }
.rk-weather-body{ display:flex; flex-direction:column; line-height:1.15; }
.rk-weather-label{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--rk-muted-soft); }
.rk-weather-val{ font-size:1.05rem; font-weight:700; }
.rk-weather-sep{ width:1px; align-self:stretch; background:var(--rk-card-line); }

.rk-brand{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.rk-brand-row{ display:flex; align-items:center; gap:12px; }
.rk-logo{ width:118px; height:auto; opacity:.92; }
.rk-brand-meta{ display:flex; flex-direction:row; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.rk-demo-badge{
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rk-muted-soft);
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--rk-card-line);
}

/* ---- siatka pokoi ---- */
.rk-rooms{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin:22px 0;
}

.rk-room{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--rk-card-line);
  padding:16px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  gap:14px;
  isolation:isolate;
}
.rk-room-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--rk-room-img) center / cover no-repeat;
  transform:scale(1.02);
}
.rk-room::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(6,12,22,.52) 0%, rgba(6,12,22,.78) 46%, rgba(6,12,22,.92) 100%);
}
.rk-room.is-off::after{
  background:linear-gradient(180deg, rgba(6,12,22,.78) 0%, rgba(6,12,22,.9) 100%);
}
.rk-room.is-off .rk-room-bg{ filter:grayscale(.5) brightness(.7); }

/* strumień powietrza z jednostki na ścianie */
.rk-room-top,
.rk-room-metrics,
.rk-room-device,
.rk-room-fan{
  position:relative;
  z-index:1;
}

.rk-room-air{
  position:absolute;
  top:44px;
  right:-4px;
  width:150px;
  height:60px;
  z-index:0;
  pointer-events:none;
}
.rk-room-air span{
  position:absolute;
  right:8px;
  top:50%;
  width:84px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(140,230,255,.95));
  box-shadow:0 0 6px rgba(120,224,255,.5);
  opacity:0;
  animation:rkAir var(--rk-air-dur, 2.6s) linear infinite;
}
.rk-room-air span:nth-child(1){ --rk-air-y:-18px; animation-delay:0s; }
.rk-room-air span:nth-child(2){ --rk-air-y:0px;   animation-delay:.55s; }
.rk-room-air span:nth-child(3){ --rk-air-y:18px;  animation-delay:1.1s; }
.rk-room.is-off .rk-room-air span{ animation-play-state:paused; opacity:0; }
.rk-room.is-intake .rk-room-air span{
  background:linear-gradient(90deg, rgba(114,239,171,.7), transparent);
  animation-direction:reverse;
}
@keyframes rkAir{
  0%{ opacity:0; transform:translateX(0) translateY(var(--rk-air-y,0)); }
  15%{ opacity:.8; }
  70%{ opacity:.5; }
  100%{ opacity:0; transform:translateX(-58px) translateY(var(--rk-air-y,0)); }
}

.rk-room-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rk-room-id{ display:flex; align-items:center; gap:10px; }
.rk-room-ic{ width:30px; height:30px; color:var(--rk-accent); flex:0 0 auto; }
.rk-room-ic svg{ width:100%; height:100%; }
.rk-room-id h3{ margin:0; font-size:1.06rem; font-weight:700; letter-spacing:-.01em; }
.rk-room-id p{ margin:2px 0 0; font-size:.76rem; color:var(--rk-muted-soft); line-height:1.3; }

.rk-room-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(114,239,171,.34);
  background:rgba(114,239,171,.12);
  color:#a9f4c8;
  font:inherit;
  font-size:.74rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.rk-room-status:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:2px; }
.rk-room.is-off .rk-room-status{
  border-color:rgba(159,178,198,.3);
  background:rgba(159,178,198,.1);
  color:var(--rk-muted);
}
.rk-dot{
  width:8px; height:8px; border-radius:50%;
  background:#3ce08a;
  box-shadow:0 0 0 0 rgba(60,224,138,.6);
  animation:rkPulse 2s ease-out infinite;
}
.rk-room.is-off .rk-dot{ background:var(--rk-muted); animation:none; box-shadow:none; }
@keyframes rkPulse{
  0%{ box-shadow:0 0 0 0 rgba(60,224,138,.55); }
  70%{ box-shadow:0 0 0 8px rgba(60,224,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(60,224,138,0); }
}

.rk-room-metrics{ display:flex; gap:18px; }
.rk-metric{ display:flex; align-items:center; gap:9px; }
.rk-metric-ic{ width:20px; height:20px; color:var(--rk-muted); }
.rk-metric-ic svg{ width:100%; height:100%; }
.rk-metric b{ display:block; font-size:1.02rem; font-weight:700; }
.rk-metric span{ font-size:.7rem; color:var(--rk-muted-soft); text-transform:uppercase; letter-spacing:.05em; }

.rk-room-device{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  border-top:1px solid var(--rk-card-line);
}
.rk-device-left{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rk-device-eyebrow{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-muted-soft); }
.rk-dir{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--rk-ink);
  font:inherit;
  font-weight:700;
  font-size:.98rem;
  cursor:pointer;
}
.rk-dir:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:3px; border-radius:6px; }
.rk-dir-ic{ width:16px; height:16px; color:var(--rk-accent-2); }
.rk-dir-ic svg{ width:100%; height:100%; }
.rk-room.is-intake .rk-dir-ic{ color:var(--rk-accent); }
.rk-filter{ font-size:.72rem; color:var(--rk-muted-soft); }
.rk-filter b{ color:var(--rk-muted); }

/* tarcza wentylatora */
.rk-dial{
  width:76px; height:76px;
  flex:0 0 auto;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:var(--rk-accent);
}
.rk-dial:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:3px; border-radius:50%; }
.rk-dial-svg{ width:100%; height:100%; overflow:visible; }
.rk-dial-track{ fill:none; stroke:rgba(120,160,200,.22); stroke-width:6; }
.rk-dial-arc{
  fill:none;
  stroke:var(--rk-accent);
  stroke-width:6;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:center;
  transition:stroke-dashoffset .5s ease, stroke .3s ease;
  filter:drop-shadow(0 0 4px rgba(102,226,255,.5));
}
.rk-room.is-intake .rk-dial-arc{ stroke:var(--rk-accent-2); filter:drop-shadow(0 0 4px rgba(18,200,132,.5)); }
.rk-rotor{
  transform-box:fill-box;
  transform-origin:center;
  animation:rkSpin var(--rk-spin-dur, 2s) linear infinite;
}
.rk-room.is-off .rk-rotor{ animation-play-state:paused; opacity:.4; }
@keyframes rkSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.rk-room-fan{ display:flex; flex-direction:column; gap:7px; }
.rk-fan-head{ display:flex; align-items:baseline; justify-content:space-between; font-size:.74rem; color:var(--rk-muted-soft); text-transform:uppercase; letter-spacing:.06em; }
.rk-fan-head b{ font-size:1.1rem; color:var(--rk-ink); letter-spacing:0; }

/* zakresy (suwaki) */
.rk-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:20px;
  margin:0;
  background:transparent;
  cursor:pointer;
}
.rk-range:disabled{ opacity:.45; cursor:not-allowed; }
.rk-range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--rk-accent) 0 var(--rk-fill, 50%), rgba(120,160,200,.2) var(--rk-fill, 50%) 100%);
}
.rk-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:rgba(120,160,200,.2);
}
.rk-range::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:var(--rk-accent);
}
.rk-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  margin-top:-6px;
  width:18px; height:18px;
  border-radius:50%;
  background:#eaf6ff;
  border:3px solid var(--rk-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.rk-range::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background:#eaf6ff;
  border:3px solid var(--rk-accent);
}
.rk-range:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:4px; border-radius:999px; }

/* ---- sterowanie wspólne ---- */
.rk-common{
  border-radius:20px;
  border:1px solid var(--rk-card-line);
  background:var(--rk-glass);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rk-common-eyebrow{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rk-muted-soft); }
.rk-common-head h2{ margin:4px 0 0; font-size:1.2rem; font-weight:700; }
.rk-common-note{ display:inline-block; margin-top:6px; font-size:.76rem; color:var(--rk-muted-soft); }

.rk-common-lower{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  gap:18px 22px;
  align-items:start;
}

/* ---- harmonogram (AUTO czasowe) ---- */
.rk-schedule{
  border:1px solid rgba(102,226,255,.22);
  border-radius:14px;
  background:rgba(9,19,32,.55);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rk-schedule[hidden]{ display:none; }
.rk-schedule-title{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rk-muted-soft); }
.rk-schedule-rows{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.rk-schedule-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid var(--rk-card-line);
  background:rgba(9,17,28,.6);
  color:var(--rk-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.rk-schedule-row:hover{ border-color:rgba(102,226,255,.45); }
.rk-schedule-row:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:2px; }
.rk-schedule-row.is-active{
  border-color:rgba(102,226,255,.75);
  background:linear-gradient(135deg, rgba(102,226,255,.2), rgba(18,200,132,.12));
}
.rk-slot-time{ font-size:.82rem; font-weight:700; }
.rk-slot-name{ font-size:.7rem; color:var(--rk-muted-soft); text-transform:uppercase; letter-spacing:.06em; }
.rk-slot-pct{ font-size:1rem; font-weight:800; color:var(--rk-accent); }
.rk-schedule-row.is-active .rk-slot-pct{ color:#bdf1ff; }
.rk-schedule-hint{ font-size:.72rem; color:var(--rk-muted-soft); }

.rk-modes{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
}
.rk-mode{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--rk-card-line);
  background:rgba(9,17,28,.55);
  color:var(--rk-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.rk-mode:hover{ border-color:rgba(102,226,255,.4); }
.rk-mode:active{ transform:translateY(1px); }
.rk-mode:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:2px; }
.rk-mode.is-active{
  border-color:rgba(102,226,255,.7);
  background:linear-gradient(135deg, rgba(102,226,255,.18), rgba(18,200,132,.12));
  box-shadow:0 0 0 1px rgba(102,226,255,.28);
}
.rk-mode-ic{ width:22px; height:22px; color:var(--rk-accent); flex:0 0 auto; }
.rk-mode-ic svg{ width:100%; height:100%; }
.rk-mode-body{ display:flex; flex-direction:column; min-width:0; }
.rk-mode-body b{ font-size:.86rem; font-weight:700; }
.rk-mode-body small{ font-size:.72rem; color:var(--rk-muted-soft); }
.rk-mode--airing.is-running{
  border-color:rgba(255,183,87,.7);
  background:linear-gradient(135deg, rgba(255,183,87,.2), rgba(255,140,66,.12));
  box-shadow:0 0 0 1px rgba(255,183,87,.3);
}
.rk-mode--airing.is-running .rk-mode-ic{ color:#ffc078; }

.rk-speed{ display:flex; flex-direction:column; gap:8px; }
.rk-speed-head{ display:flex; align-items:baseline; justify-content:space-between; }
.rk-speed-head label{ font-size:.82rem; color:var(--rk-muted); font-weight:600; }
.rk-speed-head b{ font-size:1.1rem; }
.rk-speed-scale{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--rk-muted-soft); }

.rk-common-actions{ display:flex; flex-direction:column; gap:10px; }
.rk-action{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--rk-card-line);
  background:rgba(9,17,28,.55);
  color:var(--rk-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.rk-action:hover{ border-color:rgba(102,226,255,.4); background:rgba(9,17,28,.75); }
.rk-action:focus-visible{ outline:2px solid var(--rk-accent); outline-offset:2px; }
.rk-action-ic{ width:20px; height:20px; color:var(--rk-muted); flex:0 0 auto; }
.rk-action-ic svg{ width:100%; height:100%; }
.rk-action-body{ display:flex; flex-direction:column; }
.rk-action-body b{ font-size:.88rem; }
.rk-action-body small{ font-size:.72rem; color:var(--rk-muted-soft); }

/* globalny wyłącznik: stan „wszystko wyłączone” */
.rk-action--power.is-armed{
  border-color:rgba(114,239,171,.6);
  background:linear-gradient(135deg, rgba(114,239,171,.16), rgba(18,200,132,.1));
}
.rk-action--power.is-armed .rk-action-ic{ color:#8af0b8; }
.rk-action--power.is-armed .rk-action-body b{ color:#c7f6da; }

/* ---- stopka panelu ---- */
.rk-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--rk-card-line);
  font-size:.8rem;
  color:var(--rk-muted-soft);
}

/* ---- toast ---- */
.rk-toast{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(10px);
  max-width:min(90%, 460px);
  padding:12px 18px;
  border-radius:12px;
  background:rgba(8,16,28,.94);
  border:1px solid rgba(102,226,255,.34);
  color:var(--rk-ink);
  font-size:.86rem;
  line-height:1.45;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  z-index:8;
}
.rk-toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- responsywność ---- */
@media (max-width: 1180px){
  .rk-rooms{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rk-modes{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px){
  .rk-head{ flex-direction:column; gap:14px; }
  .rk-top{
    grid-template-columns:1fr;
    justify-items:start;
    gap:16px;
    padding-right:120px; /* miejsce na przypięty przycisk pełnego ekranu */
  }
  .rk-brand{ flex-direction:row; align-items:center; }
  .rk-brand-meta{ align-items:flex-start; }
  .rk-weather{ width:100%; }
  /* przycisk pełnego ekranu przypięty do prawego górnego rogu panelu */
  .rk-fs-btn{
    position:absolute;
    top:clamp(16px, 2.4vw, 30px);
    right:clamp(16px, 2.4vw, 30px);
    z-index:5;
  }
  .rk-common-lower{ grid-template-columns:1fr; }
  .rk-common-actions{ flex-direction:row; }
  .rk-common-actions .rk-action{ flex:1; }
}

@media (max-width: 720px){
  .rk-panel{ padding:14px; border-radius:20px; }
  .rk-top{ padding-bottom:16px; }
  .rk-panel-title{ font-size:1.5rem; }
  .rk-title-icon{ width:32px; height:32px; }
  .rk-title-icon svg{ width:19px; height:19px; }
  .rk-tagline{ font-size:.86rem; }

  .rk-rooms{ grid-template-columns:1fr; gap:12px; margin:16px 0; }

  /* karta pokoju: zwarta typografia na telefonie */
  .rk-room{ min-height:0; padding:14px; gap:10px; }
  .rk-room-air{ display:none; } /* na telefonie wskaźnikiem pracy jest wirnik tarczy */

  .rk-room-top{ gap:8px; align-items:flex-start; }
  .rk-room-id{ gap:8px; flex:1; min-width:0; align-items:flex-start; }
  .rk-room-ic{ width:24px; height:24px; margin-top:1px; }
  .rk-room-id h3{ font-size:1rem; line-height:1.25; }
  .rk-room-id p{ font-size:.72rem; }
  .rk-room-status{ font-size:.66rem; padding:4px 9px; gap:5px; flex:0 0 auto; }
  .rk-dot{ width:7px; height:7px; }

  .rk-room-metrics{ gap:14px; }
  .rk-metric{ gap:8px; }
  .rk-metric-ic{ width:18px; height:18px; }
  .rk-metric b{ font-size:.98rem; }
  .rk-metric span{ font-size:.66rem; }

  .rk-room-device{ padding-top:10px; gap:10px; }
  .rk-device-eyebrow{ font-size:.62rem; }
  .rk-dir{ font-size:.92rem; }
  .rk-dial{ width:60px; height:60px; }

  .rk-room-fan{ gap:6px; }
  .rk-fan-head{ font-size:.68rem; }
  .rk-fan-head b{ font-size:1rem; }

  /* sterowanie wspólne */
  .rk-common{ padding:16px; gap:14px; }
  .rk-common-head h2{ font-size:1.08rem; }
  .rk-modes{ grid-template-columns:1fr; gap:8px; }
  .rk-mode{ padding:11px 13px; gap:11px; }
  .rk-mode-body b{ font-size:.86rem; }
  .rk-mode-body small{ font-size:.7rem; }
  .rk-schedule-rows{ grid-template-columns:1fr; }
  .rk-schedule-row{ flex-direction:row; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .rk-slot-name{ order:3; }
  .rk-slot-pct{ margin-left:auto; }

  .rk-common-lower{ grid-template-columns:1fr; gap:14px; }
  .rk-common-actions{ flex-direction:column; }

  .rk-foot{ flex-direction:column; align-items:flex-start; gap:6px; }
  .rk-weather{ flex-wrap:wrap; width:100%; }
  .rk-weather-sep{ display:none; }
  .rk-top{ padding-right:56px; }
  .rk-fs-btn .rk-fs-label{ display:none; }
  .rk-fs-btn{ min-height:34px; padding:7px 8px; }
}

/* ---- mobile (<=720px): panel rozbity na samodzielne kafelki-sekcje ----
   Ten sam wzorzec co /pl/projekty/ogrzewanie/. Karty pokoi (.rk-room) sa juz
   hero-cardami ze zdjeciem, wiec zmieniamy tylko obudowe panelu i sekcje.
   Tryb pelnego ekranu (.is-rk-fullscreen / .is-rk-pseudo-fs) bez zmian. */
@media (max-width: 720px){
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs){
    margin-inline:0;
  }
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-panel{
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-top,
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-common{
    margin:0;
    border:1px solid var(--rk-card-line);
    border-radius:22px;
    box-shadow:0 18px 40px rgba(0,0,0,.26);
    background:rgba(9,17,28,.98);
  }
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-top{
    padding:16px;
    padding-right:16px;
    border-bottom:1px solid var(--rk-card-line);
  }
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-rooms{
    margin:0;
    gap:12px;
  }
  /* badge demo na gorze pierwszego kafelka, logo i FS ukryte */
  .rk-page .rk-stage:not(.is-rk-fullscreen):not(.is-rk-pseudo-fs) .rk-brand{
    order:-1;
  }
  .rk-page .rk-logo{ display:none; }
  .rk-page .rk-fs-btn{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .rk-rotor,
  .rk-room-air span,
  .rk-dot{ animation:none !important; }
  .rk-room-air span{ opacity:.4; transform:translateX(-20px) translateY(var(--rk-air-y,0)); }
  .rk-dial-arc{ transition:none; }
}