/* =========================================================
   ArcNode web demo — Devices tab (DeviceControlView)
   Everything is scoped under .tab-devices; modals opened from this tab
   (rendered in #overlay-root) use the .dev- class prefix.
   ========================================================= */

.tab-devices {
  display: flex; flex-direction: column;
  background: var(--primary-bg);
  --pad: 24px;
}
.tab-devices button { -webkit-touch-callout: none; }
.tab-devices .sp { flex: 1; }

/* ---------- Title row ---------- */
.tab-devices .dev-titlerow {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 16px;
}
.tab-devices .dev-titlerow h1 { font-size: 28px; font-weight: 700; line-height: 34px; color: var(--fg-primary); }
.tab-devices .dev-overflow {
  width: 40px; height: 40px; border-radius: 4px; background: var(--bg-gray);
  box-shadow: inset 0 0 0 1px var(--menu-grey); color: var(--fg-primary);
  display: flex; align-items: center; justify-content: center;
}
.tab-devices .dev-overflow:active { background: #505050; }
.tab-devices .dev-menu {
  position: absolute; right: 24px; top: 46px;
  background: var(--menu-grey); border-radius: 4px; padding: 12px 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,.25);
  animation: dev-fade .15s ease-out;
}
.tab-devices .dev-menu.is-leaving { animation: dev-fade-out .15s ease-out forwards; }
.tab-devices .dev-menu__item { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 16px; color: #fff; white-space: nowrap; }
.tab-devices .dev-menu__item .arc-icon { width: 24px; }
@keyframes dev-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dev-fade-out { to { opacity: 0; } }

/* ---------- Pill strip ---------- */
.tab-devices .dev-pills {
  display: flex; gap: 8px; padding: 8px 24px 16px 20px;
  overflow-x: auto; flex: none;
}
.tab-devices .dev-pill {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 16px 24px; border-radius: 9999px;
  color: var(--glass-default-text); font-size: 16px; line-height: 20px;
  transition: background .2s ease-in-out, color .2s ease-in-out;
}
.tab-devices .dev-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.20) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tab-devices .dev-pill.is-sel { background: var(--glass-selected-pill); color: #fff; }
.tab-devices .dev-pill:active { transform: scale(.97); }
.tab-devices .dev-pill__lbl { display: grid; }
.tab-devices .dev-pill__lbl > span { grid-area: 1 / 1; }
.tab-devices .dev-pill__lbl .ghost { font-weight: 600; visibility: hidden; }
.tab-devices .dev-pill.is-sel .real { font-weight: 600; }

/* ---------- Scroll content ---------- */
.tab-devices .dev-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tab-devices .dev-content {
  display: flex; flex-direction: column; gap: 20px;
  padding: 8px 24px 124px;
  animation: dev-xfade .2s ease-in-out;
}
.tab-devices .dev-content--switches, .tab-devices .dev-content--awning { gap: 16px; }
.tab-devices .dev-content--media { padding-top: 0; }
@keyframes dev-xfade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Common controls ---------- */
.tab-devices .dev-card { background: var(--bg-card); border-radius: 20px; display: flex; flex-direction: column; }
.tab-devices .dev-card--compact { border-radius: 16px; }
.tab-devices .dev-power {
  flex: none; border-radius: 50%; background: var(--bg-control); color: var(--fg-tertiary);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, transform .1s;
}
.tab-devices .dev-power.is-on { background: var(--bg-green); color: var(--green); }
.tab-devices .dev-power:active { transform: scale(.94); }
.tab-devices .dev-battbtn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); border-radius: 6px; flex: none; }
.tab-devices .dev-battbtn--lg { width: 32px; height: 32px; }
.tab-devices .dev-battbtn:active { background: rgba(255,255,255,.08); }
.tab-devices .ios-switch:disabled { cursor: default; }
.tab-devices .dev-iconbtn { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); border-radius: 6px; }
.tab-devices .dev-iconbtn:active { background: rgba(255,255,255,.08); }

/* Gradient layers (cross-fade between states) */
.tab-devices .dev-grad { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .6s ease-in-out; pointer-events: none; }
.tab-devices .dev-grad.is-on { opacity: 1; }

/* Round +/- buttons */
.tab-devices .dev-stack { display: flex; flex-direction: column; gap: 12px; margin-right: 12px; }
.tab-devices .dev-round {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .1s;
}
.tab-devices .dev-round:active:not(:disabled) { transform: scale(.92); }
.tab-devices .dev-round:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.3); cursor: default; }

/* ---------- Cooling ---------- */
.tab-devices .dev-climate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.tab-devices .dev-chead { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.tab-devices .dev-ac .dev-chead { gap: 10px; }
.tab-devices .dev-chead__icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--fg-tertiary); transition: color .3s; }
.tab-devices .dev-chead__icon.is-on { color: var(--primary); }
.tab-devices .dev-chead__name { flex: 1; font-size: 16px; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tab-devices .dev-fanpanel { position: relative; margin: 0 16px 10px; height: 200px; border-radius: 16px; }
.tab-devices .dev-grad--mf-on { background: radial-gradient(250px circle at 51% 100%, #64C9FB 0, #3B9EC5 250px); }
.tab-devices .dev-grad--mf-off { background: radial-gradient(250px circle at 51% 100%, rgba(69,69,69,.44) 0, rgba(68,68,68,.44) 250px); }
.tab-devices .dev-fanpanel__row { position: relative; height: 100%; display: flex; align-items: center; }
.tab-devices .dev-fanpanel__num { flex: 1; text-align: center; font-size: 64px; font-weight: 200; color: #fff; padding-left: 56px; transition: color .3s; font-variant-numeric: tabular-nums; }
.tab-devices .dev-fanpanel__num.is-off { color: rgba(255,255,255,.5); }

.tab-devices .dev-mf__sub { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 12px; font-size: 14px; }
.tab-devices .dev-mf__vent { display: flex; align-items: center; justify-content: space-between; transition: opacity .2s; }
.tab-devices .is-dim { opacity: .4; }
.tab-devices .dev-mf__flow { display: flex; gap: 16px; transition: opacity .2s; margin-top: -4px; }
.tab-devices .dev-flow { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--fg-tertiary); transition: color .2s; }
.tab-devices .dev-flow__c { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.tab-devices .dev-flow.is-sel { color: var(--fg-primary); }
.tab-devices .dev-flow.is-sel .dev-flow__c { color: #fff; }
.tab-devices .dev-flow:disabled { cursor: default; }

.tab-devices .dev-mfthermo { margin: 0 16px 10px; padding: 14px; background: rgba(58,58,58,.5); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.tab-devices .dev-mfthermo__top { display: flex; align-items: center; gap: 12px; }
.tab-devices .dev-mfthermo__top > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tab-devices .dev-mfthermo__title { font-size: 15px; font-weight: 500; }
.tab-devices .dev-mfthermo__title.is-off { color: var(--fg-tertiary); }
.tab-devices .dev-mfthermo__sub { font-size: 12px; color: var(--fg-tertiary); }
.tab-devices .dev-mfthermo__set { display: flex; align-items: center; gap: 16px; animation: dev-xfade .25s; }
.tab-devices .dev-mfthermo__set .lbl { flex: 1; font-size: 13px; color: var(--fg-tertiary); }
.tab-devices .dev-mfthermo__set .val { min-width: 64px; text-align: center; font-size: 22px; font-weight: 600; }
.tab-devices .dev-cbtn { position: relative; width: 24px; height: 24px; color: var(--fg-tertiary); }
.tab-devices .dev-cbtn.is-primary { color: var(--primary); }
.tab-devices .dev-cbtn > svg { position: absolute; inset: 0; }
.tab-devices .dev-cbtn .dev-cbtn__g { color: #242424; }
.tab-devices .dev-cbtn:active { transform: scale(.9); }
.tab-devices .dev-mfthermo__status { display: flex; align-items: center; gap: 6px; font-size: 13px; animation: dev-xfade .25s; }
.tab-devices .dev-mfthermo__status .dot { width: 8px; height: 8px; border-radius: 50%; }
.tab-devices .dev-mfthermo__status .cabin { color: var(--fg-tertiary); flex: 1; }
.tab-devices .dev-mfthermo__status .dir { font-size: 12px; color: var(--fg-tertiary); }

/* AC */
.tab-devices .dev-acpanel { position: relative; margin: 0 16px; height: 200px; border-radius: 16px; color: var(--fg-primary); transition: color .4s; }
.tab-devices .dev-acpanel.is-running { color: rgba(0,0,0,.85); }
.tab-devices .dev-grad--ac-cold { background: linear-gradient(#2BBCFF, #0090F6); }
.tab-devices .dev-grad--ac-cool { background: linear-gradient(#64C9FB, #3B9EC5); }
.tab-devices .dev-grad--ac-mild { background: linear-gradient(#8FD5FC, #5BB2D6); }
.tab-devices .dev-grad--ac-idle { background: linear-gradient(#3A3A3A, #2C2C2C); }
.tab-devices .dev-acpanel__row { position: relative; height: 100%; display: flex; align-items: center; }
.tab-devices .dev-acmodes { width: 85px; align-self: flex-start; padding-top: 8px; display: flex; flex-direction: column; }
.tab-devices .dev-acmode { display: flex; flex-direction: column; align-items: stretch; color: inherit; }
.tab-devices .dev-acmode__row { display: flex; align-items: center; gap: 4px; padding: 10px; font-size: 12px; white-space: nowrap; }
.tab-devices .dev-acmode.is-sel .dev-acmode__row { font-weight: 700; }
.tab-devices .dev-acmode__bar { height: 2px; margin: 0 10px; background: transparent; border-radius: 1px; transition: background .2s; }
.tab-devices .dev-acmode.is-sel .dev-acmode__bar { background: #fff; }
.tab-devices .dev-acpanel.is-running .dev-acmode.is-sel .dev-acmode__bar { background: rgba(0,0,0,.85); }
.tab-devices .dev-acpanel__temp { flex: 1; text-align: center; font-size: 56px; font-weight: 200; font-variant-numeric: tabular-nums; }
.tab-devices .dev-acpanel .dev-round { color: inherit; }
.tab-devices .dev-acpanel.is-running .dev-round { background: rgba(0,0,0,.15); }
.tab-devices .dev-acfan { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px; }
.tab-devices .dev-acfan__lbl { font-size: 16px; }
.tab-devices .dev-acfan__row { display: flex; gap: 8px; }
.tab-devices .dev-fanbtn {
  width: 100px; height: 40px; border-radius: 4px; background: var(--bg-gray); box-shadow: inset 0 0 0 1px #1C1C1C;
  font-size: 16px; color: #fff; transition: background .2s;
}
.tab-devices .dev-fanbtn.is-on { background: var(--green); }
.tab-devices .dev-fanbtn:active { filter: brightness(1.15); }

/* ---------- Heating ---------- */
.tab-devices .dev-fhead { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; }
.tab-devices .dev-fhead__icon { width: 32px; display: flex; justify-content: center; color: var(--fg-tertiary); transition: color .3s; }
.tab-devices .dev-fhead__icon.is-on { color: #fff; }
.tab-devices .dev-fhead__name { flex: 1; font-size: 17px; font-weight: 600; }
.tab-devices .dev-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-spring), opacity .3s; }
.tab-devices .dev-collapse.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
.tab-devices .dev-collapse__inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }

.tab-devices .dev-srcrow { display: flex; gap: 10px; padding: 0 20px 12px; }
.tab-devices .dev-src {
  flex: 1; height: 76px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500; background: var(--bg-control); color: var(--fg-tertiary);
  transition: background .3s, color .3s, transform .1s;
}
.tab-devices .dev-src:active { transform: scale(.97); }
.tab-devices .dev-src .arc-icon { transition: color .3s; }
.tab-devices .dev-src--standby { background: rgba(118,125,251,.18); color: var(--fg-primary); }
.tab-devices .dev-src--standby .arc-icon { color: var(--primary); }
.tab-devices .dev-src--active { background: var(--bg-green); color: var(--fg-primary); }
.tab-devices .dev-src--active .arc-icon { color: var(--green); }
.tab-devices .dev-shore {
  margin: 0 20px 12px; padding: 8px 12px; background: rgba(255,159,10,.12); border-radius: 8px;
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-tertiary);
  animation: dev-fade .25s ease-out;
}
.tab-devices .dev-shore .arc-icon { color: #FF9F0A; }
.tab-devices .dev-featrow { display: flex; gap: 10px; padding: 0 20px 12px; }
.tab-devices .dev-feat {
  flex: 1; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; background: var(--bg-control); color: var(--fg-tertiary); transition: background .3s, color .3s;
}
.tab-devices .dev-feat.is-on { background: var(--bg-green); color: #fff; }
.tab-devices .dev-feat:active { transform: scale(.98); }

.tab-devices .dev-htpanel { position: relative; margin: 8px 20px 12px; height: 240px; border-radius: 16px; color: #fff; transition: color .4s; }
.tab-devices .dev-htpanel.is-on { color: #1A1A1A; }
.tab-devices .dev-grad--ht-off { background: #1F1F22; }
.tab-devices .dev-grad--ht-low { background: radial-gradient(280px circle at 51% 100%, #FFD96B 0, #FFC832 280px); }
.tab-devices .dev-grad--ht-mid { background: radial-gradient(280px circle at 51% 100%, #FFC832 0, #F0AA14 280px); }
.tab-devices .dev-grad--ht-hot { background: radial-gradient(280px circle at 51% 100%, #F98028 0, #E96816 140px, #D95103 280px); }
.tab-devices .dev-htpanel__thermo { position: absolute; top: 12px; right: 16px; z-index: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.tab-devices .dev-htpanel__thermo span { opacity: .85; }
.tab-devices .dev-htpanel__thermo .ios-switch { transform: scale(.85); transform-origin: right center; }
.tab-devices .dev-htpanel__row { position: relative; height: 100%; display: flex; align-items: center; padding-bottom: 12px; padding-top: 24px; }
.tab-devices .dev-floor {
  margin-left: 16px; width: 170px; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; color: inherit; text-align: left;
  background: rgba(255,255,255,.08); opacity: .6; transition: background .3s, opacity .3s;
}
.tab-devices .dev-floor.is-on { background: rgba(255,255,255,.25); }
.tab-devices .dev-htpanel.is-on .dev-floor { opacity: 1; background: rgba(0,0,0,.06); }
.tab-devices .dev-htpanel.is-on .dev-floor.is-on { background: rgba(0,0,0,.18); }
.tab-devices .dev-floor__txt { display: flex; flex-direction: column; gap: 6px; }
.tab-devices .dev-floor__txt b { font-size: 17px; font-weight: 600; }
.tab-devices .dev-floor__txt span { font-size: 13px; opacity: .75; }
.tab-devices .dev-floor:active { transform: scale(.97); }
.tab-devices .dev-htpanel__temp { flex: 1; text-align: center; font-size: 96px; font-weight: 200; line-height: 1; padding-right: 60px; font-variant-numeric: tabular-nums; }
.tab-devices .dev-htpanel__temp.is-off { font-size: 56px; font-weight: 300; opacity: .7; }
.tab-devices .dev-stack--lg { gap: 12px; margin-right: 20px; }
.tab-devices .dev-round--lg { width: 56px; height: 56px; background: rgba(255,255,255,.08); color: inherit; }
.tab-devices .dev-htpanel.is-on .dev-round--lg { background: rgba(0,0,0,.15); }
.tab-devices .dev-round--lg:disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }

.tab-devices .dev-htfan { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 16px; }
.tab-devices .dev-htfan__row { display: flex; align-items: center; gap: 8px; }
.tab-devices .dev-htfan__row .lbl { flex: 1; font-size: 13px; color: var(--fg-tertiary); }
.tab-devices .dev-htfan__row .pct { width: 40px; text-align: right; font-size: 13px; font-weight: 500; }
.tab-devices .dev-auto { font-size: 12px; font-weight: 600; padding: 5px 24px; border-radius: 999px; background: var(--bg-deep); color: var(--fg-tertiary); transition: background .2s, color .2s; }
.tab-devices .dev-auto.is-sel { background: var(--primary); color: #1D1D1D; }
.tab-devices .dev-httank { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 20px 16px; }
.tab-devices .dev-httank .lbl { font-size: 11px; color: var(--fg-tertiary); margin-bottom: 2px; }
.tab-devices .dev-httank .val { font-size: 15px; transition: font-size .2s; }
.tab-devices .dev-httank .val.is-big { font-size: 22px; font-weight: 600; }
.tab-devices .dev-httank .right { text-align: right; }
.tab-devices .dev-httank .status { font-size: 13px; font-weight: 500; transition: color .3s; }
.tab-devices .dev-diag { padding: 0 20px 16px; }
.tab-devices .dev-diag__toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-tertiary); }
.tab-devices .dev-diag__toggle .arc-icon { transition: transform .25s; }
.tab-devices .dev-diag__toggle.is-open .arc-icon { transform: rotate(180deg); }
.tab-devices .dev-diag__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; animation: dev-fade .2s; }
.tab-devices .dev-diag__grid div { display: flex; flex-direction: column; gap: 2px; }
.tab-devices .dev-diag__grid span { font-size: 10px; color: var(--fg-tertiary); }
.tab-devices .dev-diag__grid b { font-size: 13px; font-weight: 400; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.tab-devices .dev-console-row {
  margin: 0 20px 16px; padding: 14px 16px; background: var(--bg-control); border-radius: 8px;
  display: flex; align-items: center; gap: 12px; text-align: left; color: var(--fg-tertiary);
}
.tab-devices .dev-console-row:active { background: #444; }
.tab-devices .dev-console-row .ic { width: 28px; display: flex; justify-content: center; color: var(--primary); }
.tab-devices .dev-console-row .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tab-devices .dev-console-row .txt b { font-size: 15px; font-weight: 500; color: var(--fg-primary); }
.tab-devices .dev-console-row .txt span { font-size: 12px; }

/* ---------- Lights ---------- */
.tab-devices .dev-schem-wrap { display: flex; flex-direction: column; gap: 12px; }
.tab-devices .dev-schem-btns { display: flex; justify-content: flex-end; gap: 8px; }
.tab-devices .dev-sqbtn {
  height: 40px; padding: 0 12px; border-radius: 4px; background: var(--bg-gray); box-shadow: inset 0 0 0 1px var(--menu-grey);
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg-primary);
}
.tab-devices .dev-sqbtn:active { background: #505050; }
.tab-devices .dev-sqbtn--done { background: var(--bg-inlay); box-shadow: none; font-weight: 600; }
.tab-devices .dev-schem { position: relative; height: 300px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s; }
.tab-devices .dev-schem.is-editing { box-shadow: inset 0 0 0 1.5px rgba(118,125,251,.4); cursor: crosshair; }
.tab-devices .dev-schem img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 100%; width: auto; height: 100%; object-fit: contain; pointer-events: none; }

.tab-devices .dev-hs {
  position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  touch-action: none;
}
.tab-devices .dev-hs > span { position: absolute; border-radius: 50%; transition: all .3s ease-in-out; }
.tab-devices .dev-hs .pulse { width: 90px; height: 90px; background: rgba(118,125,251,.25); opacity: 0; transform: scale(.6); }
.tab-devices .dev-hs .mid { width: 72px; height: 72px; background: rgba(118,125,251,.35); box-shadow: inset 0 0 0 2px var(--primary); opacity: 0; transform: scale(.7); }
.tab-devices .dev-hs .in {
  width: 48px; height: 48px; background: #1C1C1C; box-shadow: inset 0 0 0 1.5px rgba(245,241,235,.5);
  display: flex; align-items: center; justify-content: center; color: var(--fg-primary);
}
.tab-devices .dev-hs.is-on .pulse { opacity: .5; transform: scale(1); animation: dev-pulse 1.5s ease-in-out infinite alternate; }
.tab-devices .dev-hs.is-on .mid { opacity: 1; transform: scale(1); }
.tab-devices .dev-hs.is-on .in { background: #fff; box-shadow: inset 0 0 0 2px var(--primary), 0 0 12px rgba(118,125,251,.5); color: #000; }
.tab-devices .dev-hs:active .in, .tab-devices .dev-hs.is-holding .in { transform: scale(.92); }
@keyframes dev-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.15); opacity: .2; } }
.tab-devices .dev-hs--edit { cursor: grab; }
.tab-devices .dev-hs--edit.is-dragging { cursor: grabbing; z-index: 2; }
.tab-devices .dev-hs--edit .ring { width: 56px; height: 56px; box-shadow: inset 0 0 0 2px var(--primary); opacity: 0; }
.tab-devices .dev-hs--edit.is-sel .ring { opacity: 1; }
.tab-devices .dev-hs--edit .base { width: 48px; height: 48px; background: var(--bg-control); }
.tab-devices .dev-hs--edit .in { width: 28px; height: 28px; background: var(--primary); box-shadow: none; color: #000; }
.tab-devices .dev-hs--edit.is-dragging .base { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.tab-devices .dev-hs--edit > span { transition: transform .15s, opacity .2s; }

.tab-devices .dev-dimmer {
  position: absolute; inset: 0; z-index: 3; border-radius: 16px; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; animation: dev-xfade .2s;
}
.tab-devices .dev-dimmer__card {
  width: 260px; padding: 24px; background: var(--bg-inlay); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--bg-control);
  display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: default;
  animation: arc-pop-in .3s var(--ease-spring);
}
.tab-devices .dev-dimmer__card .name { font-size: 16px; font-weight: 600; }
.tab-devices .dev-dimmer__card .pct { font-size: 28px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

.tab-devices .dev-lhead { display: flex; align-items: center; gap: 12px; }
.tab-devices .dev-lhead__title { font-size: 20px; font-weight: 600; }
.tab-devices .dev-newgroup { display: flex; align-items: center; gap: 4px; padding: 8px; font-size: 16px; color: var(--fg-primary); border-radius: 6px; }
.tab-devices .dev-newgroup:active { background: rgba(255,255,255,.06); }
.tab-devices .dev-seg { display: flex; gap: 6px; }
.tab-devices .dev-seg__btn {
  height: 40px; padding: 0 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--fg-primary);
  background: var(--bg-gray); box-shadow: inset 0 0 0 1px var(--menu-grey); transition: background .2s, box-shadow .2s;
}
.tab-devices .dev-seg__btn.is-sel { background: var(--bg-inlay); box-shadow: none; }

.tab-devices .dev-subhead { font-size: 17px; font-weight: 600; color: var(--fg-secondary); }
.tab-devices .dev-groups { display: flex; flex-direction: column; gap: 16px; }
.tab-devices .dev-group { display: flex; flex-direction: column; gap: 12px; animation: dev-fade .25s; }
.tab-devices .dev-group__head { display: flex; align-items: center; gap: 8px; }
.tab-devices .dev-group__head .name { font-size: 17px; font-weight: 600; }
.tab-devices .dev-groupall {
  display: flex; align-items: center; gap: 6px; padding: 8px 24px; border-radius: 8px; background: var(--bg-control);
  box-shadow: inset 0 0 0 1px rgba(165,165,165,.15); font-size: 13px; font-weight: 500;
}
.tab-devices .dev-groupall:active { background: #444; }
.tab-devices .dev-empty-mini { font-size: 13px; color: var(--fg-tertiary); padding: 4px 0; }

.tab-devices .dev-tiles { display: grid; column-gap: 10px; row-gap: 12px; }
.tab-devices .dev-tile { background: rgba(28,28,28,.76); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.tab-devices .dev-tile__tap { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 4px; text-align: left; transition: transform .15s; }
.tab-devices .dev-tile__tap:active, .tab-devices .dev-tile__tap.is-holding { transform: scale(.97); }
.tab-devices .dev-tile__top { display: flex; align-items: flex-start; gap: 10px; }
.tab-devices .dev-tile__name { flex: 1; font-size: 14px; line-height: 18px; color: var(--fg-primary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tab-devices .dev-pwrdot { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bg-control); display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); transition: color .3s; }
.tab-devices .is-on .dev-pwrdot { color: var(--green); }
.tab-devices .dev-tile__bulb { position: relative; height: 60px; display: flex; align-items: center; justify-content: center; }
.tab-devices .dev-tile__bulb .bulb { position: relative; color: var(--fg-tertiary); transition: color .4s, opacity .4s; display: flex; }
.tab-devices .dev-tile.is-on .dev-tile__bulb .bulb { color: #fff; }
.tab-devices .dev-glow {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 29px; margin: -26px 0 0 -25px; border-radius: 50%;
  background: rgba(252,247,173,.84); filter: blur(5.9px); transition: opacity .4s;
}
.tab-devices .dev-tile__slider { height: 40px; padding: 0 12px; margin-bottom: 12px; display: flex; align-items: center; transition: opacity .25s; }
.tab-devices .dev-tile__slider.is-hidden { opacity: 0; pointer-events: none; }

.tab-devices .dev-list { display: flex; flex-direction: column; gap: 8px; }
.tab-devices .dev-lrow { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: rgba(28,28,28,.76); border-radius: 8px; animation: dev-xfade .2s; }
.tab-devices .dev-lrow__bulb { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--fg-tertiary); transition: color .4s; }
.tab-devices .dev-lrow.is-on .dev-lrow__bulb { color: #fff; }
.tab-devices .dev-lrow__bulb .arc-icon { position: relative; }
.tab-devices .dev-glow--sm { width: 38px; height: 22px; margin: -17px 0 0 -19px; filter: blur(5px); }
.tab-devices .dev-lrow__name { font-size: 15px; font-weight: 500; }
.tab-devices .dev-lrow__slider { width: 160px; height: 32px; display: flex; align-items: center; }
.tab-devices .dev-lrow__pct { width: 42px; font-size: 13px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Switches ---------- */
.tab-devices .dev-swtop { display: flex; justify-content: flex-end; }
.tab-devices .dev-swgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tab-devices .dev-swtile .dev-tile__top { gap: 8px; align-items: center; }
.tab-devices .dev-swtile__icon { color: var(--fg-tertiary); transition: color .3s; }
.tab-devices .dev-swtile.is-on .dev-swtile__icon { color: var(--primary); }
.tab-devices .dev-role {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; white-space: nowrap;
  font-size: 10px; font-weight: 600; color: var(--fg-secondary); line-height: 12px;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--tint) 25%, transparent);
}
.tab-devices .dev-role .d { width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }
.tab-devices .dev-swlist { display: flex; flex-direction: column; gap: 12px; }
.tab-devices .dev-swrow { display: flex; align-items: center; gap: 16px; padding: 16px; background: rgba(28,28,28,.6); border-radius: 12px; animation: dev-xfade .2s; }
.tab-devices .dev-swrow__icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-inlay); color: var(--fg-secondary); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.tab-devices .dev-swrow.is-on .dev-swrow__icon { background: rgba(118,125,251,.15); color: var(--primary); }
.tab-devices .dev-swrow__txt { display: flex; flex-direction: column; gap: 4px; }
.tab-devices .dev-swrow__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.tab-devices .dev-swrow__sub { font-size: 12px; color: var(--fg-tertiary); font-variant-numeric: tabular-nums; }

/* ---------- Awning ---------- */
.tab-devices .dev-awhead { display: flex; align-items: center; gap: 8px; padding: 20px 20px 16px; }
.tab-devices .dev-awhead .ic { display: flex; transition: color .3s; }
.tab-devices .dev-awhead .name { font-size: 17px; font-weight: 600; }
.tab-devices .dev-awpill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px;
  font-size: 12px; font-weight: 500; color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent);
  animation: dev-fade .2s;
}
.tab-devices .dev-awpill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: dev-blink 1s ease-in-out infinite alternate; }
@keyframes dev-blink { to { opacity: .35; } }
.tab-devices .dev-awpill--lock { color: var(--fg-tertiary); background: rgba(255,255,255,.05); }
.tab-devices .dev-awbtns { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 4px; }
.tab-devices .dev-awbtn {
  height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--fg-primary);
  background: var(--bg-control); box-shadow: inset 0 0 0 1px rgba(165,165,165,.3);
  transition: background .15s, box-shadow .15s, color .15s, opacity .2s, transform .1s ease-in-out;
  touch-action: none;
}
.tab-devices .dev-awbtn.is-pressed:not(:disabled) { transform: scale(.96); }
.tab-devices .dev-awbtn.is-active { background: color-mix(in srgb, var(--acc) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent); color: #fff; }
.tab-devices .dev-awbtn.is-latched { background: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: inset 0 0 0 1px var(--acc); color: #fff; }
.tab-devices .dev-awbtn:disabled { opacity: .4; cursor: default; }
.tab-devices .dev-awhint { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 0 16px; font-size: 11px; color: rgba(142,141,138,.7); }
.tab-devices .dev-awspacer { height: 16px; }

/* ---------- Media ---------- */
.tab-devices .dev-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-top: 4px; }
.tab-devices .dev-mcard { background: var(--bg-inlay); border-radius: 16px; display: flex; flex-direction: column; animation: dev-xfade .25s; }
.tab-devices .dev-mhead2 { display: flex; align-items: center; gap: 10px; padding: 16px 24px; }
.tab-devices .dev-mhead2__name { font-size: 16px; }
.tab-devices .dev-mcard__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-inlay); display: flex; align-items: center; justify-content: center; color: var(--fg-primary); flex: none; }
.tab-devices .dev-refresh { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-control); color: var(--fg-secondary); display: flex; align-items: center; justify-content: center; flex: none; }
.tab-devices .dev-refresh.is-spinning .arc-icon { animation: dev-spin .7s linear; }
@keyframes dev-spin { to { transform: rotate(360deg); } }
.tab-devices .dev-remote { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tab-devices .dev-remote__top { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 24px; }
.tab-devices .dev-remote__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tab-devices .dev-remote__col .l { font-size: 12px; color: var(--fg-secondary); }
.tab-devices .dev-remote__col .l--sm { font-size: 10px; color: var(--fg-tertiary); }
.tab-devices .dev-rc {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg-control); color: var(--fg-primary);
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.tab-devices .dev-rc:active { transform: scale(.92); background: #4a4a4a; }
.tab-devices .dev-rc.is-flash { animation: dev-flash .35s ease-out; }
@keyframes dev-flash { 0% { background: #5a5a5a; } 100% { background: var(--bg-control); } }
.tab-devices .dev-rc--ok { font-size: 14px; color: var(--primary); }
.tab-devices .dev-dpad { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tab-devices .dev-dpad__mid { display: flex; gap: 4px; }
.tab-devices .dev-remote__bottom { display: flex; justify-content: center; gap: 10px; }

.tab-devices .dev-tv.is-off { padding: 20px; }
.tab-devices .dev-tvoff { display: flex; align-items: center; gap: 10px; }
.tab-devices .dev-tvoff__txt { display: flex; flex-direction: column; gap: 2px; }
.tab-devices .dev-tvoff__txt .n { font-size: 16px; }
.tab-devices .dev-tvoff__txt .s { font-size: 12px; color: var(--fg-secondary); }
.tab-devices .dev-chip { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 8px; color: var(--primary); background: rgba(118,125,251,.1); font-size: 13px; font-weight: 500; }
.tab-devices .dev-chip:active { background: rgba(118,125,251,.2); }
.tab-devices .dev-tvoff__pwr { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-control); color: var(--green); display: flex; align-items: center; justify-content: center; }
.tab-devices .dev-tvoff__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--fg-tertiary); font-size: 13px; min-height: 240px; }

.tab-devices .dev-conn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; background: var(--bg-control); font-size: 10px; font-weight: 500; color: var(--fg-secondary); }
.tab-devices .dev-conn .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.tab-devices .dev-np { display: flex; align-items: center; gap: 12px; padding: 0 16px 12px; }
.tab-devices .dev-np__art { position: relative; width: 44px; height: 44px; border-radius: 6px; background: var(--bg-control); color: var(--fg-tertiary); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.tab-devices .dev-np__art .eq { position: absolute; right: 4px; bottom: 4px; display: none; gap: 1.5px; align-items: flex-end; height: 10px; }
.tab-devices .dev-np__art.is-playing .eq { display: flex; }
.tab-devices .dev-np__art .eq i { width: 2px; background: var(--primary); border-radius: 1px; animation: dev-eq .9s ease-in-out infinite alternate; }
.tab-devices .dev-np__art .eq i:nth-child(2) { animation-delay: -.3s; }
.tab-devices .dev-np__art .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes dev-eq { from { height: 2px; } to { height: 10px; } }
.tab-devices .dev-np__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tab-devices .dev-np__txt .t { font-size: 13px; font-weight: 500; }
.tab-devices .dev-np__txt .a { font-size: 12px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-devices .dev-np__txt .s { font-size: 10px; font-weight: 500; color: var(--fg-tertiary); }
.tab-devices .dev-transport { display: flex; justify-content: center; align-items: center; gap: 12px; padding-bottom: 12px; }
.tab-devices .dev-tbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-control); color: var(--fg-primary); display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.tab-devices .dev-tbtn:active:not(:disabled) { transform: scale(.9); }
.tab-devices .dev-tbtn:disabled { background: rgba(58,58,58,.5); color: rgba(245,241,235,.3); cursor: default; }
.tab-devices .dev-tbtn--play { width: 48px; height: 48px; color: var(--primary); }
.tab-devices .dev-vol { display: flex; align-items: center; gap: 12px; padding: 0 16px 16px; }
.tab-devices .dev-vol .ios-slider { flex: 1; height: 32px; }
.tab-devices .dev-vol .v { width: 28px; text-align: right; font-size: 12px; font-weight: 500; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.tab-devices .dev-mute { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-control); color: var(--fg-secondary); display: flex; align-items: center; justify-content: center; flex: none; }
.tab-devices .dev-mute.is-muted { color: var(--red); }
.tab-devices .dev-mdiv { height: 1px; background: var(--fg-secondary-light); margin: 0 16px 10px; }
.tab-devices .dev-favbtn { margin: 0 16px 12px; padding: 11px 0; border-radius: 8px; background: rgba(118,125,251,.1); color: var(--primary); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; }
.tab-devices .dev-favbtn:active { background: rgba(118,125,251,.2); }


.tab-devices .dev-scanrow { display: flex; gap: 10px; padding-top: 4px; margin-top: -10px; }
.tab-devices .dev-scan { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; background: var(--bg-control); font-size: 14px; color: var(--fg-secondary); }
.tab-devices .dev-scan:disabled { cursor: default; opacity: .8; }
.tab-devices .dev-scan:active:not(:disabled) { background: #444; }

/* Spinner (shared inside tab + dev- modals) */
.dev-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(168,167,167,.3); border-top-color: var(--fg-secondary); animation: dev-spin .8s linear infinite; display: inline-block; flex: none; }
.dev-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes dev-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Modals (rendered in #overlay-root)
   ========================================================= */
.dev-mhead { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; font-size: 18px; font-weight: 600; }
.dev-mhead .pin-card__close { width: 32px; height: 32px; margin: -6px -6px -6px 0; }
.dev-btn-primary { width: 100%; padding: 14px 0; border-radius: 10px; background: var(--primary); color: var(--button-primary-text); font-size: 16px; font-weight: 600; }
.dev-btn-primary:disabled { background: var(--bg-control); color: var(--fg-secondary); cursor: default; }
.dev-btn-secondary { width: 100%; padding: 14px 0; border-radius: 10px; background: var(--bg-control); color: var(--fg-primary); font-size: 16px; font-weight: 500; }

/* Edit Device */
.dev-editdev { width: calc(100% - 80px); max-width: 420px; background: var(--bg-card); border-radius: 20px; }
.dev-editdev__body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 20px; }
.dev-field { display: flex; flex-direction: column; gap: 8px; }
.dev-field .lbl { font-size: 14px; font-weight: 500; color: var(--fg-tertiary); }
.dev-field input, .dev-groupm__name input {
  width: 100%; padding: 12px; border-radius: 10px; background: var(--bg-inlay); border: 0; outline: none; font-size: 16px; color: var(--fg-primary);
}
.dev-field input:focus, .dev-groupm__name input:focus { box-shadow: inset 0 0 0 1.5px rgba(118,125,251,.6); }
.dev-editdev__box { padding: 16px; background: var(--bg-inlay); border-radius: 12px; }
.dev-editdev__dim { display: flex; align-items: center; gap: 12px; }
.dev-editdev__dim > div { flex: 1; }
.dev-editdev__box .t { font-size: 15px; }
.dev-editdev__box .s { font-size: 12px; color: var(--fg-tertiary); margin-top: 2px; }
.dev-editdev__info { display: flex; flex-direction: column; gap: 10px; }
.dev-editdev__info .kv { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-secondary); }
.dev-editdev__info .kv span:last-child { color: var(--fg-primary); }
.dev-editdev__btns { display: flex; flex-direction: column; gap: 8px; }

/* Create / Edit Light Group */
.dev-groupm { width: calc(100% - 80px); max-width: 500px; max-height: 560px; background: var(--bg-elevated); border-radius: 24px; display: flex; flex-direction: column; }
.dev-groupm__head { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; padding: 20px; }
.dev-groupm__head .title { text-align: center; font-size: 18px; font-weight: 600; }
.dev-groupm__x, .dev-groupm__trash { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--fg-primary); }
.dev-groupm__trash { color: var(--red); }
.dev-groupm__name { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.dev-groupm__name .lbl, .dev-groupm__lbl { font-size: 14px; font-weight: 500; color: var(--fg-secondary); }
.dev-groupm__lbl { padding: 0 20px 10px; }
.dev-groupm__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.dev-groupm__row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-inlay);
  font-size: 15px; font-weight: 500; text-align: left; transition: background .15s, box-shadow .15s; flex: none;
}
.dev-groupm__row.is-sel { background: rgba(118,125,251,.1); box-shadow: inset 0 0 0 1.5px var(--primary); }
.dev-groupm__row .chk { position: relative; width: 20px; height: 20px; color: var(--bg-control); }
.dev-groupm__row.is-sel .chk { color: var(--primary); }
.dev-groupm__row .chk svg { position: absolute; inset: 0; }
.dev-groupm__foot { padding: 20px; }
.dev-groupm__foot .dev-btn-primary { padding: 16px 0; border-radius: 12px; }

/* System-style alert */
.dev-alert { width: 270px; background: rgba(44,44,46,.96); border-radius: 14px; overflow: hidden; text-align: center; }
.dev-alert__body { padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; }
.dev-alert__body b { font-size: 17px; font-weight: 600; }
.dev-alert__body p { font-size: 13px; color: var(--fg-primary); line-height: 1.35; }
.dev-alert__btns { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid rgba(84,84,88,.65); }
.dev-alert__btns button { padding: 12px 0; font-size: 17px; color: #0A84FF; }
.dev-alert__btns button + button { border-left: .5px solid rgba(84,84,88,.65); }
.dev-alert__btns .is-destructive { color: #FF453A; font-weight: 600; }

/* Tile long-press context menu */
.dev-ctxmenu { width: 220px; background: rgba(44,44,46,.95); border-radius: 12px; overflow: hidden; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.dev-ctxmenu__item { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 16px; color: var(--fg-primary); }
.dev-ctxmenu__item:active { background: rgba(255,255,255,.08); }

/* Rixens Console (full-screen cover) */
.arc-modal__card.dev-console { width: 1194px; height: 834px; max-height: none; border-radius: 0; background: #1C1C1C; display: flex; flex-direction: column; animation: dev-cover-in .35s var(--ease-spring); }
@keyframes dev-cover-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dev-console__bar { position: relative; height: 52px; margin-top: var(--safe-top); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bg-control); flex: none; }
.dev-console__back { display: flex; align-items: center; gap: 4px; color: var(--primary); font-size: 16px; }
.dev-console__title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.dev-console__title .arc-icon { color: var(--primary); }
.dev-console__nav { display: flex; gap: 20px; }
.dev-console__nav button { color: var(--fg-primary); }
.dev-console__nav button:disabled { color: #555; cursor: default; }
.dev-console__body { flex: 1; display: flex; align-items: center; justify-content: center; }
.dev-console__state { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; text-align: center; animation: dev-xfade .25s; }
.dev-console__state .msg { font-size: 14px; color: var(--fg-secondary); }
.dev-console__state .sub { font-size: 12px; color: var(--fg-tertiary); line-height: 1.45; }
.dev-console__state .title { font-size: 18px; font-weight: 600; }
.dev-console__err .err-ic { color: var(--red); margin-bottom: 4px; }
.dev-console__retry { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 8px; background: var(--primary); color: #000; font-size: 14px; font-weight: 500; }

/* Sonos favorites sheet */
.dev-favs { width: 540px; height: 620px; max-height: calc(100% - 48px); background: var(--bg-inlay); border-radius: 12px; display: flex; flex-direction: column; }
.dev-favs__head { display: flex; align-items: center; gap: 10px; padding: 20px; }
.dev-favs__head .t { font-size: 18px; font-weight: 600; }
.dev-favs__head .s { font-size: 12px; color: var(--fg-secondary); margin-top: 2px; }
.dev-favs__head .sp { flex: 1; }
.dev-favs__c { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-control); color: var(--fg-primary); display: flex; align-items: center; justify-content: center; }
.dev-favs__list { flex: 1; overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dev-favs__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 0; font-size: 14px; color: var(--fg-secondary); }
.dev-fav { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--bg-inlay); text-align: left; animation: dev-xfade .25s; }
.dev-fav:hover, .dev-fav:active { background: #2c2d2f; }
.dev-fav .art { width: 48px; height: 48px; border-radius: 4px; background: var(--bg-control); color: var(--fg-tertiary); display: flex; align-items: center; justify-content: center; }
.dev-fav .txt { display: flex; flex-direction: column; gap: 2px; }
.dev-fav .txt .t { font-size: 14px; font-weight: 500; }
.dev-fav .txt .s { font-size: 12px; color: var(--fg-secondary); }
.dev-fav .sp { flex: 1; }
.dev-fav .go { color: var(--primary); display: flex; }