/* ==========================================================================
   Layout و کامپوننت‌های اختصاصی پنل IoT
   بر پایه tokenهای design-system.css
   ========================================================================== */

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

/* موقع لود اولیه هر صفحه، تا وضعیت پیش‌فرض منو تعیین بشه انیمیشن غیرفعاله (بدون افکت باز/بسته ناخواسته) */
html.no-anim .sidebar,
html.no-anim .app-shell,
html.no-anim .sidebar-backdrop,
html.no-anim .menu-toggle__bar {
  transition: none !important;
}

/* ---- نوار بالا ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding-inline: 16px;
  padding-block: 10px;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-border);
}

/* ریل ۳ پیکسلی نارنجی زیر هدر — امضای بصری PMVault */
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 3px;
  background: var(--pv-primary);
}

.topbar__side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar__search {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 360px;
  padding-inline: 12px;
  padding-block: 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.topbar__search:focus-within {
  border-color: var(--focus);
}

.topbar__search svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.topbar__search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  color: var(--text-primary);
}

.topbar__search input::placeholder {
  color: var(--text-muted);
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.topbar__actions {
  display: none;
  align-items: center;
  gap: 4px;
}

.topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pv-r-btn);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__icon-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.topbar__icon-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

@media (min-width: 768px) {
  .topbar__search,
  .topbar__actions {
    display: flex;
  }
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.topbar__brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-primary);
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--pv-r-btn);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle:hover { background: var(--bg-subtle); }

.menu-toggle__bar {
  position: absolute;
  inset-inline-start: 9px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1), opacity .5s ease, top .6s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle__bar:nth-child(1) { top: 13px; }
.menu-toggle__bar:nth-child(2) { top: 18px; }
.menu-toggle__bar:nth-child(3) { top: 23px; }

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
  top: 18px;
  transform: rotate(-45deg);
}

/* ---- ساختار کلی صفحه: محتوا + منو ---- */
.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  padding-inline-start: 0;
  transition: padding-inline-start .7s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 16px;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}

/* ---- سایدبار: منوی کشویی با زیرمنو ---- */
.sidebar {
  position: fixed;
  inset-inline-start: 0;
  top: 61px;
  height: calc(100vh - 61px);
  width: 280px;
  max-width: 85vw;
  background: var(--pv-surface);
  border-inline-end: 1px solid var(--pv-border);
  box-shadow: var(--pv-e3);
  z-index: 50;
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

.sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin-block: 10px;
  margin-inline: 4px;
  flex-shrink: 0;
}

.nav-link,
.nav-group__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding-inline: 12px;
  border-radius: var(--pv-r-btn);
  border: none;
  background: transparent;
  color: var(--pv-text-muted);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.nav-group__chevron {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* ---- چیپ رنگی آیکن‌های منو ---- */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pv-r-btn);
  flex-shrink: 0;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--pv-text);
  fill: none;
  stroke-width: 2;
}

.nav-icon.nav-icon--sm {
  width: 26px;
  height: 26px;
  border-radius: var(--pv-r-chip);
}

.nav-icon.nav-icon--sm svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.1;
}

/* هوی‌های ماژول (MD §1) — فقط روی چیپ آیکن منو، نه پس‌زمینهٔ تمام‌عرض */
.nav-icon--home     { background: var(--pv-primary-soft); }
.nav-icon--home svg { stroke: var(--pv-primary); }
.nav-icon--devices  { background: color-mix(in srgb, var(--pv-task) 18%, white); }
.nav-icon--devices svg { stroke: var(--pv-task); }
.nav-icon--icecream { background: color-mix(in srgb, var(--pv-inbox) 20%, white); }
.nav-icon--icecream svg { stroke: var(--pv-inbox); }
.nav-icon--soon     { background: var(--pv-elevated); }
.nav-icon--soon svg { stroke: var(--pv-text-faint); }
.nav-icon--reports  { background: color-mix(in srgb, var(--pv-project) 16%, white); }
.nav-icon--reports svg { stroke: var(--pv-project); }
.nav-icon--more     { background: color-mix(in srgb, var(--pv-people) 18%, white); }
.nav-icon--more svg { stroke: var(--pv-people); }
.nav-icon--settings { background: var(--pv-elevated); }
.nav-icon--settings svg { stroke: var(--pv-text-muted); }
.nav-icon--manage   { background: color-mix(in srgb, var(--pv-task) 18%, white); }
.nav-icon--manage svg { stroke: var(--pv-task); }
.nav-icon--about    { background: color-mix(in srgb, var(--pv-note) 30%, white); }
.nav-icon--about svg { stroke: var(--pv-warn-text); }
.nav-icon--logout   { background: var(--pv-danger-soft); }
.nav-icon--logout svg { stroke: var(--pv-danger); }

.nav-link:hover,
.nav-group__toggle:hover {
  background: var(--pv-elevated);
}

.nav-link.active,
.nav-group__toggle.active {
  color: var(--pv-primary);
  background: var(--pv-primary-soft);
  font-weight: 600;
  box-shadow: inset -3px 0 0 var(--pv-primary);
}

.nav-group__chevron {
  margin-inline-start: auto;
  transition: transform .2s ease;
}

.nav-group.is-expanded .nav-group__chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
  margin-inline-start: 20px;
  border-inline-start: 1px solid var(--divider);
}

.nav-group.is-expanded .nav-submenu {
  grid-template-rows: 1fr;
}

.nav-submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
  padding-inline: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}


.nav-sublink:hover {
  color: var(--primary-600);
}

.nav-sublink.active {
  color: var(--primary-600);
  font-weight: 600;
}

.nav-sublink.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.nav-sublink.is-disabled .nav-sublink__soon {
  font-size: 11px;
  margin-inline-start: auto;
  color: var(--text-muted);
}

.nav-sublink--danger {
  color: var(--error-text);
}

/* ---- دسکتاپ: سایدبار به‌صورت پیش‌فرض باز و کنارِ محتوا ---- */
@media (min-width: 900px) {
  .sidebar-backdrop {
    display: none;
  }

  .app-shell.has-sidebar-space {
    padding-inline-start: 280px;
  }
}

/* ---- کارت‌های دستگاه ---- */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  gap: 14px;
}

.device-card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  border-inline-start: 3px solid var(--pv-task);
  padding: var(--pv-s4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease-out, border-color .15s ease-out;
}

.device-card:hover {
  border-color: var(--pv-border-strong);
  border-inline-start-color: var(--pv-task);
  box-shadow: var(--pv-e2);
}

.device-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.device-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--pv-r-btn);
  background: var(--pv-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-primary);
}

.device-card__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.device-card__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.device-card__subtitle { font-size: 12px; color: var(--text-muted); }

.device-card__metrics {
  display: flex;
  gap: 14px;
  margin-block-start: 4px;
}

.device-card__metric { display: flex; flex-direction: column; }
.device-card__metric-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.device-card__metric-label { font-size: 11px; color: var(--text-muted); }

/* ---- badge با نقطه وضعیت ---- */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- صفحه جزئیات دستگاه ---- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px;
  flex-wrap: wrap;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-block-end: 16px;
}

.metric-tile {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: 14px;
}

.metric-tile__label {
  font-size: 12px;
  color: var(--text-muted);
  margin-block-end: 6px;
}

.metric-tile__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.metric-tile__unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-inline-start: 4px;
}

.side-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .side-columns { grid-template-columns: 1fr 1fr; }
}

/* ---- کارت هر سمت دستگاه ---- */
.side-card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  overflow: hidden;
}

.side-card__accent {
  height: 3px;
  background: var(--accent-color, var(--pv-primary));
}

.side-card--left { --accent-color: var(--pv-task); order: 2; }
.side-card--right { --accent-color: var(--pv-primary); order: 1; }

.side-card__body {
  padding: 18px;
}

.side-panel__title {
  font-weight: 700;
  font-size: 14px;
  margin-block-end: 16px;
  color: var(--secondary-700);
}

/* ---- نمای اصلی دما (hero) ---- */
.hero-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 16px;
}

.hero-stat__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--pv-r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--pv-accent);
  transition: background-color .2s ease-out;
}

.hero-stat__icon.is-warm {
  background: var(--pv-primary);
}

.hero-stat__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--pv-text-invert);
  fill: none;
  stroke-width: 1.8;
}

.hero-stat__text {
  display: flex;
  flex-direction: column;
}

.hero-stat__label {
  font-size: 12px;
  color: var(--text-muted);
  margin-block-end: 2px;
}

.hero-stat__value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  direction: ltr;
  unicode-bidi: isolate;
}

.hero-stat__value .metric-tile__unit {
  font-size: 15px;
}

/* ---- آمار ریز (تانک، جریان، ستپوینت، تولید) ---- */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-block-end: 18px;
}

.mini-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pv-elevated);
  border-radius: var(--pv-r-btn);
  padding: 10px;
}

.mini-stat__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--pv-r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mini-stat__icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--pv-text);
  fill: none;
  stroke-width: 2;
}

.mini-stat__icon--tank { background: color-mix(in srgb, var(--pv-accent) 20%, white); }
.mini-stat__icon--current { background: var(--pv-primary-soft); }
.mini-stat__icon--setpoint { background: color-mix(in srgb, var(--pv-task) 20%, white); }
.mini-stat__icon--count { background: color-mix(in srgb, var(--pv-chat) 20%, white); }

.mini-stat__text { display: flex; flex-direction: column; min-width: 0; }
.mini-stat__label { font-size: 11px; color: var(--text-muted); }
.mini-stat__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- وضعیت اجزا (فقط نمایشی) ---- */
.component-list {
  border-top: 1px solid var(--divider);
  padding-block-start: 6px;
}

.component-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
}

.component-row__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.component-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--pv-r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.component-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--pv-text);
  fill: none;
  stroke-width: 2;
}

.component-icon--compressor { background: color-mix(in srgb, var(--pv-accent) 20%, white); }
.component-icon--cooler { background: color-mix(in srgb, var(--pv-task) 20%, white); }
.component-icon--mixer { background: var(--pv-primary-soft); }

/* ---- کلید روشن/خاموش قابل‌کلیک (برای دستگاه‌هایی که کنترل واقعی دارن، مثل پکیج) ---- */
.toggle {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: inset-inline-start .15s ease;
}

.toggle.on {
  background: var(--primary-500);
}

.toggle.on::after {
  inset-inline-start: 23px;
}

.toggle:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ---- دکمه‌های + / - برای تنظیم عددی (مثل ست‌پوینت دما) ---- */
.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper__btn {
  width: 30px;
  height: 30px;
  border-radius: var(--pv-r-btn);
  border: 1px solid var(--pv-border);
  background: var(--pv-elevated);
  color: var(--pv-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stepper__btn:hover {
  background: var(--pv-sunken);
  border-color: var(--pv-primary);
}

.stepper__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.u-text-secondary { color: var(--text-secondary); }
.u-text-muted { color: var(--text-muted); }

/* ---- placeholder برای صفحات بعدی ---- */
.empty-state {
  text-align: center;
  padding-block: 60px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-block-end: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

/* ---- فرم لاگین ---- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--pv-sunken);
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: 28px 24px;
}

.auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-end: 24px;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary-600);
}

.field-group {
  margin-block-end: 16px;
}

.auth-card .btn {
  width: 100%;
  justify-content: center;
  margin-block-start: 4px;
}

/* ==========================================================================
   نمای پکیج گرمایشی — دایره‌ی لمسی دما (شبیه اپ واقعی)
   ========================================================================== */

.combi-card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  overflow: hidden;
  max-width: 420px;
  margin-inline: auto;
}

.combi-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-block: 14px;
  padding-inline: 44px;
  background: var(--pv-elevated);
  border-bottom: 1px solid var(--pv-border);
}

.combi-card__room {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--pv-text);
}

.combi-card__room svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.combi-card__edit {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.combi-card__edit:hover { background: var(--bg-subtle); }

.combi-card__edit svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.combi-card__body {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- دایره لمسی ---- */
.thermo-dial {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}

.thermo-dial__svg {
  width: 100%;
  height: 100%;
}

.thermo-dial__track {
  fill: none;
  stroke: var(--surface-sunken);
  stroke-width: 16;
  stroke-linecap: round;
}

.thermo-dial__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dasharray .2s ease;
}

.thermo-dial__thumb {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.thermo-dial__thumb svg {
  width: 12px;
  height: 12px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.5;
}

.thermo-dial__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.thermo-dial__flame {
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  margin-block-end: 4px;
}

.thermo-dial__flame.is-heating { color: var(--accent); }

.thermo-dial__flame svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.thermo-dial__value {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  direction: ltr;
}

.thermo-dial__label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-block-start: 6px;
}

.thermo-dial__btn {
  position: absolute;
  bottom: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.thermo-dial__btn:hover { border-color: var(--accent); }
.thermo-dial__btn--up { inset-inline-start: 6px; }
.thermo-dial__btn--down { inset-inline-end: 6px; }

.thermo-dial {
  touch-action: none;
  cursor: pointer;
}

.combi-status-text {
  margin-block-start: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
}

.combi-status-text.is-heating { color: var(--accent); }

/* ---- پیل درخشان دمای فعلی ---- */
.current-temp-pill {
  margin-block-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  padding-block: 8px;
  border-radius: var(--pv-r-pill);
  background: var(--pv-primary-soft);
  box-shadow: none;
  color: var(--pv-primary);
  font-size: 14px;
}

.current-temp-pill svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.current-temp-pill span {
  color: var(--text-secondary);
}

.current-temp-pill strong {
  font-weight: 800;
  direction: ltr;
}

/* ---- دکمه پاور دایره‌ای بزرگ ---- */
.power-btn-wrap {
  margin-block-start: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.power-btn {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--pv-sunken);
  color: var(--pv-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pv-e1);
  transition: background-color .2s ease-out, color .2s ease-out;
}

.power-btn.on {
  background: var(--pv-primary);
  color: #FFFFFF;
  box-shadow: var(--pv-e2);
}

.power-btn svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.power-btn-wrap__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}