/* =========================================================
   ArcNode web demo — Home tab (DashboardView)
   Page styles are scoped under .tab-home; overlays rendered into
   #overlay-root use the home- prefix.
   ========================================================= */

.tab-home { overflow: hidden; background: #151515; }
.tab-home .hm-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.tab-home .hm-col { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tab-home .hm-flex { flex: 1 1 auto; }
.tab-home .hm-flex--min6 { min-height: 6px; }

/* Header: 16pt top while the greeting is open, 32pt once collapsed */
.tab-home .arc-header { flex: none; padding-top: calc(var(--safe-top) + 16px); transition: padding-top .45s var(--ease-spring); }
.tab-home.is-collapsed .arc-header { padding-top: calc(var(--safe-top) + 32px); }
.tab-home .arc-header__score:active,
.tab-home .arc-header__bell:active,
.tab-home .arc-header__avatar:active { opacity: .7; }

/* ---------- Segment pill ---------- */
.tab-home .hm-seg { flex: none; display: flex; justify-content: center; margin: 16px 0 32px; }
.tab-home .hm-seg__pill {
  display: flex; gap: 4px; padding: 8px; border-radius: 57px;
  background: rgba(74, 74, 74, 0.35);
}
.tab-home .hm-seg__btn {
  height: 48px; padding: 0 16px; border-radius: 47px;
  font-size: 20px; line-height: 28px; color: #fff;
  transition: background .2s ease-in-out;
}
.tab-home .hm-seg__btn.is-active { background: var(--bg-inlay); }
.tab-home .hm-seg__btn:not(.is-active):active { background: rgba(255, 255, 255, .08); }

/* ---------- Greeting ---------- */
.tab-home .hm-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tab-home .hm-greet-wrap {
  flex: none; display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .5s var(--ease-spring), opacity .35s ease-in-out;
}
.tab-home.is-collapsed .hm-greet-wrap { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.tab-home .hm-greet-clip { min-height: 0; overflow: hidden; }
.tab-home .hm-greet {
  width: 600px; margin: 0 auto; padding: 64px 0;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
  transition: transform .5s var(--ease-spring);
}
.tab-home.is-collapsed .hm-greet { transform: translateY(-60px); }
.tab-home .hm-greet__ring { position: relative; width: 94px; height: 94px; }
.tab-home .hm-greet__ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 40px; color: #fff;
}
.tab-home .hm-greet__text { display: flex; flex-direction: column; gap: 10px; }
.tab-home .hm-greet__text h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 40px; color: #fff;
}
.tab-home .hm-greet__text p { font-size: 20px; line-height: 28px; color: rgba(255, 255, 255, .85); padding: 0 60px; }
.tab-home .hm-greet__cta {
  margin-top: 8px; padding: 8px 16px; border-radius: 29px;
  background: rgba(255, 255, 255, .25); color: #fff; font-size: 16px; line-height: 22px;
  transition: background .2s;
}
.tab-home .hm-greet__cta:active { background: rgba(255, 255, 255, .35); }

/* ---------- Panes ---------- */
.tab-home .hm-body { flex: 1 1 auto; min-height: 0; position: relative; }
.tab-home .hm-pane {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  padding: 0 32px 100px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease-in-out, visibility 0s linear .3s;
  overscroll-behavior: contain;
}
.tab-home .hm-pane.is-active { opacity: 1; visibility: visible; transition: opacity .3s ease-in-out; }
.tab-home .hm-pane--overview { display: flex; flex-direction: column; gap: 16px; }
.tab-home .hm-pane--overview > * { flex: none; }

/* ---------- Time range ---------- */
.tab-home .hm-range-row { display: flex; justify-content: flex-end; gap: 12px; }
.tab-home .hm-range {
  width: 164px; height: 48px; padding: 13px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-inlay); border: 1px solid var(--grey400); border-radius: 6px;
  font-size: 13px; color: var(--fg-primary);
}
.tab-home .hm-range .arc-icon { color: var(--sys-gray); }
.tab-home .hm-range:active { background: #2d2e30; }

/* ---------- Action / scene tiles ---------- */
.tab-home .hm-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tab-home .hm-action {
  display: flex; align-items: center; gap: 12px; min-height: 64px; min-width: 0;
  padding: 14px 16px; border-radius: 12px; text-align: left;
  background: rgba(28, 28, 28, .75);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background .25s, box-shadow .25s, transform .15s;
}
.tab-home .hm-action:active { transform: scale(.98); }
.tab-home .hm-action--light { background: rgba(28, 28, 28, .35); }
.tab-home .hm-action.is-on { background: rgba(118, 125, 251, .18); box-shadow: inset 0 0 0 1.5px rgba(118, 125, 251, .6); }
.tab-home .hm-ico36 {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-gray); color: var(--fg-primary);
  transition: background .25s, color .25s;
}
.tab-home .hm-action.is-on .hm-ico36 { background: var(--primary); color: #fff; }
.tab-home .hm-action__txt { display: flex; flex-direction: column; min-width: 0; }
.tab-home .hm-action__small,
.tab-home .hm-action__main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-home .hm-action__small { font-size: 12px; line-height: 16px; color: var(--fg-secondary); }
.tab-home .hm-action__main { font-size: 16px; line-height: 21px; font-weight: 500; color: var(--fg-primary); }

/* ---------- Cards ---------- */
.tab-home .hm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tab-home .hm-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 20px 20px 24px; border-radius: 12px;
  background: rgba(28, 28, 28, .75);
}
.tab-home .hm-card--sys { min-height: 200px; }
.tab-home .hm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tab-home .hm-card--env .hm-card__head { margin-bottom: 16px; }
.tab-home .hm-card__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tab-home .hm-ico44 {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-gray); color: var(--fg-primary);
}
.tab-home .hm-card__titles { min-width: 0; }
.tab-home .hm-card__title { font-size: 14px; line-height: 18px; color: var(--fg-primary); }
.tab-home .hm-card__sub { font-size: 12px; line-height: 16px; color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-home .hm-card__right { display: flex; align-items: center; flex: none; }
.tab-home .hm-flash { animation: hm-flash 1.8s ease-out; }
@keyframes hm-flash {
  0%, 30% { box-shadow: 0 0 0 2px rgba(118, 125, 251, .9); }
  100% { box-shadow: 0 0 0 2px rgba(118, 125, 251, 0); }
}

.tab-home .hm-big { display: flex; align-items: baseline; color: var(--fg-primary); }
.tab-home .n48 { font-size: 48px; line-height: 52px; font-weight: 400; }
.tab-home .u24 { font-size: 24px; }
.tab-home .n32 { font-size: 32px; line-height: 38px; }
.tab-home .hm-avg { font-size: 16px; color: var(--fg-secondary); margin-left: 6px; }
.tab-home .hm-s14 { font-size: 14px; line-height: 18px; color: var(--fg-secondary); }
.tab-home .hm-mt4 { margin-top: 4px; }

/* Battery */
.tab-home .hm-batt { display: flex; flex-direction: column; gap: 4px; }
.tab-home .hm-stats { display: flex; gap: 24px; align-items: flex-start; }
.tab-home .hm-stat { display: flex; flex-direction: column; gap: 2px; }
.tab-home .hm-stat__v { font-size: 14px; line-height: 18px; color: var(--fg-secondary); }
.tab-home .hm-stat__l { font-size: 10px; line-height: 12px; color: var(--fg-secondary); }

/* Inverter */
.tab-home .hm-inv-power {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--bg-deep); opacity: .55;
}
.tab-home .hm-inv { display: flex; flex-direction: column; gap: 2px; }
.tab-home .hm-inv__state { font-size: 32px; line-height: 38px; color: var(--fg-primary); white-space: nowrap; }

/* Shore */
.tab-home .hm-shore-val { display: flex; align-items: baseline; gap: 6px; color: var(--fg-primary); }
.tab-home .hm-limit { display: flex; flex-direction: column; gap: 4px; }
.tab-home .hm-limit__line { display: flex; align-items: center; gap: 6px; }
.tab-home .hm-limit__line .l { font-size: 11px; color: var(--fg-secondary); }
.tab-home .hm-limit__line .v { font-size: 11px; font-weight: 600; color: var(--fg-primary); }
.tab-home .hm-limit__line .n { font-size: 10px; color: var(--fg-tertiary); }
.tab-home .hm-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tab-home .hm-chip {
  height: 40px; border-radius: 8px; font-size: 13px;
  background: var(--bg-gray); color: var(--fg-secondary); opacity: .4;
}
.tab-home .hm-chip.is-sel { background: var(--bg-inlay); color: var(--fg-primary); font-weight: 600; }

/* Water tanks */
.tab-home .hm-tanks { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tab-home .hm-tank {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 4px; border-radius: 8px; background: rgba(0, 0, 0, .2);
}
.tab-home .hm-tank__ic { display: flex; }
.tab-home .hm-tank__name { font-size: 12px; font-weight: 500; color: var(--fg-primary); }
.tab-home .hm-tank__bar {
  position: relative; flex: 1 1 auto; min-height: 120px; width: 40px;
  border-radius: 6px; background: var(--bg-deep); overflow: hidden;
}
.tab-home .hm-tank__bar > div { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; }
.tab-home .hm-tank__pct { font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.tab-home .hm-tank__vol { font-size: 10px; color: var(--fg-secondary); }

/* Leveling */
.tab-home .hm-lvl-ic { display: flex; }
.tab-home .hm-lvl-set {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 8px; border-radius: 6px; color: var(--fg-secondary);
}
.tab-home .hm-lvl-set:active { background: rgba(255, 255, 255, .08); }
.tab-home .hm-lvl-body { height: 168px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tab-home .hm-lvl-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.tab-home .hm-lvl-col--r { align-items: flex-end; }
.tab-home .hm-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 4px; background: var(--bg-inlay); white-space: nowrap;
}
.tab-home .hm-pill > span { display: flex; }
.tab-home .hm-pill__ic circle { stroke: currentColor; }
.tab-home .hm-pill__l { font-size: 12px; line-height: 15px; color: var(--fg-primary); }
.tab-home .hm-pill__s { font-size: 12px; line-height: 15px; font-weight: 700; }
.tab-home .hm-lvl-van { position: relative; width: 88px; height: 168px; flex: none; }
.tab-home .hm-lvl-ring {
  position: absolute; left: 29.2px; top: 69.2px; width: 29.6px; height: 29.6px;
  border-radius: 50%; border: 1.5px solid rgba(57, 58, 75, .6);
}
.tab-home .hm-lvl-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 3px rgba(0, 0, 0, .25);
  transition: left .3s ease-out, top .3s ease-out;
}
.tab-home .hm-lvl-foot { display: flex; flex-direction: column; gap: 8px; }
.tab-home .hm-lvl-rule { height: 1px; background: #383838; }
.tab-home .hm-lvl-stats { display: flex; align-items: center; }
.tab-home .hm-lvl-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tab-home .hm-lvl-stat .k { font-size: 9px; font-weight: 600; color: var(--fg-secondary); letter-spacing: .02em; }
.tab-home .hm-lvl-stat .v { font-family: var(--font-rounded); font-size: 20px; line-height: 24px; font-weight: 600; color: var(--fg-primary); transition: color .3s; }
.tab-home .hm-lvl-stat .v.is-ok { color: var(--green); }
.tab-home .hm-lvl-stat .k2 { font-size: 9px; color: var(--fg-secondary); }
.tab-home .hm-lvl-vdiv { width: 1px; height: 32px; background: var(--grey400); }
.tab-home .hm-lvl-guide { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fg-primary); }
.tab-home .hm-lvl-guide > span:first-child { display: flex; }
.tab-home .hm-guide-ic path, .tab-home .hm-pill__ic path { stroke: #1C1C1C; }

/* Weather */
.tab-home .hm-wx-main { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 12px; }
.tab-home .hm-wx-temp { display: flex; align-items: flex-start; flex-wrap: wrap; }
.tab-home .hm-wx-n { font-size: 48px; line-height: 52px; font-weight: 300; color: var(--fg-primary); }
.tab-home .hm-wx-u { font-size: 24px; color: var(--fg-secondary); padding-top: 4px; }
.tab-home .hm-wx-avg { padding-top: 10px; }
.tab-home .hm-wx-cond { font-size: 16px; color: var(--fg-secondary); padding-top: 16px; margin-left: 8px; white-space: nowrap; }
.tab-home .hm-wx-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.tab-home .hm-wx-side > div { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-primary); }
.tab-home .hm-wx-side .arc-icon { color: var(--fg-secondary); }
.tab-home .hm-wx-div { height: 1px; background: var(--bg-gray); margin-bottom: 8px; }
.tab-home .hm-wx-h { font-size: 14px; color: var(--fg-secondary); margin-bottom: 8px; }
.tab-home .hm-fcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-home .hm-fc { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fg-primary); }
.tab-home .hm-fc__d { font-size: 12px; color: var(--fg-secondary); }
.tab-home .hm-fc__d.is-today { color: var(--primary); }
.tab-home .hm-fc__hi { font-size: 14px; font-weight: 500; }
.tab-home .hm-fc__lo { font-size: 12px; color: var(--fg-secondary); margin-top: -4px; }
.tab-home .hm-wx-hist { display: flex; flex-direction: column; gap: 8px; }
.tab-home .hm-wx-hist > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-secondary); }
.tab-home .hm-wx-hist b { font-weight: 500; color: var(--fg-primary); }

/* ---------- Energy flow ---------- */
.tab-home .hm-energy { position: relative; height: 500px; }
.tab-home .hm-energy__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tab-home .hm-conn { stroke: rgba(118, 125, 251, .35); stroke-width: 2; stroke-linecap: round; }
.tab-home .hm-flow {
  stroke: #9B9FFC; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 16;
  opacity: .9; animation: hm-flow 1.1s linear infinite;
}
@keyframes hm-flow { to { stroke-dashoffset: -16; } }
.tab-home .hm-etile {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  padding: 20px; border-radius: 12px; background: rgba(28, 28, 28, .75);
}
.tab-home .hm-etile__head { display: flex; align-items: center; gap: 8px; }
.tab-home .hm-etile__head .hm-ico36 { margin-right: 2px; }
.tab-home .hm-etile__t { flex: 1 1 auto; min-width: 0; }
.tab-home .hm-etile__t .t,
.tab-home .hm-etile__t .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-home .hm-etile__t .t { font-size: 13px; line-height: 17px; color: var(--fg-primary); }
.tab-home .hm-etile__t .s { font-size: 11px; line-height: 14px; color: var(--fg-secondary); }
.tab-home .hm-etile__val { font-size: 40px; line-height: 46px; color: var(--fg-primary); white-space: nowrap; }
.tab-home .hm-etile__val .u { font-size: 20px; color: var(--fg-secondary); margin-left: 2px; }
.tab-home .hm-ebatt { padding: 0; }
.tab-home .hm-ebatt__fill {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 12px;
  background: linear-gradient(to top, rgba(42, 188, 83, .08), rgba(42, 188, 83, .25));
  transition: height .8s ease-in-out;
}
.tab-home .hm-ebatt__in { position: relative; height: 100%; padding: 20px; display: flex; flex-direction: column; }
.tab-home .hm-ebatt__st { font-size: 12px; color: var(--fg-secondary); margin-top: 2px; }
.tab-home .hm-ebatt__ttg { font-size: 14px; color: var(--fg-secondary); margin-top: 2px; }
.tab-home .hm-ebatt__foot { display: flex; gap: 24px; }
.tab-home .hm-ebatt__foot > div { display: flex; flex-direction: column; gap: 2px; }
.tab-home .hm-ebatt__foot b { font-weight: 400; font-size: 13px; color: var(--fg-secondary); }
.tab-home .hm-ebatt__foot span { font-size: 10px; color: var(--fg-secondary); }

/* ---------- Quick Controls ---------- */
.tab-home .hm-qc { display: flex; gap: 24px; align-items: flex-start; }
.tab-home .hm-qc__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tab-home .hm-qc__head { height: 40px; display: flex; align-items: center; }
.tab-home .hm-qc__title { font-size: 20px; font-weight: 400; color: var(--fg-primary); }
.tab-home .hm-qc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.tab-home .hm-qc__grid--lights { gap: 12px; }
.tab-home .hm-allbtn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--bg-gray); border: 1px solid rgba(28, 28, 28, .4); border-radius: 4px;
  font-size: 16px; color: var(--fg-primary);
}
.tab-home .hm-allbtn:active { background: #505050; }

.tab-home .hm-dev {
  position: relative; min-height: 190px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(28, 28, 28, .76); border-radius: 8px; cursor: pointer;
  transition: transform .15s;
}
.tab-home .hm-dev[role="button"]:active { transform: scale(.98); }
.tab-home .hm-dev__top { display: flex; align-items: flex-start; gap: 10px; }
.tab-home .hm-dev__name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 18px; color: var(--fg-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tab-home .hm-pwr {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-control); color: var(--fg-secondary);
  transition: color .3s;
}
.tab-home .is-on .hm-pwr { color: var(--green); }
.tab-home .hm-dev__icon {
  height: 60px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-tertiary); transition: color .3s ease-in-out;
}
.tab-home .hm-dev.is-on .hm-dev__icon { color: var(--primary); }
.tab-home .hm-dev__sum { height: 19px; line-height: 19px; font-size: 11px; text-align: center; color: var(--red); }
.tab-home .hm-dev__impact {
  align-self: center; display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg-secondary); padding: 2px 6px; border-radius: 4px;
}
.tab-home .hm-dev__impact:active { background: rgba(255, 255, 255, .08); }

/* Awning */
.tab-home .hm-awn { cursor: default; }
.tab-home .hm-awn__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; opacity: 0; transition: opacity .2s; flex: none; }
.tab-home .hm-awn[data-state="extending"] .hm-awn__dot { opacity: 1; background: #4CAF50; }
.tab-home .hm-awn[data-state="retracting"] .hm-awn__dot { opacity: 1; background: #FF9800; }
.tab-home .hm-awn[data-state="extending"] .hm-dev__icon,
.tab-home .hm-awn[data-state="retracting"] .hm-dev__icon { color: var(--primary); }
.tab-home .hm-awn[data-state="extending"] .hm-dev__icon .arc-icon { animation: hm-awn-pulse 1s ease-in-out infinite; }
.tab-home .hm-awn[data-state="retracting"] .hm-dev__icon .arc-icon { animation: hm-awn-pulse 1s ease-in-out infinite reverse; }
@keyframes hm-awn-pulse { 50% { transform: scale(1.08); } }
.tab-home .hm-awn__btns { display: flex; flex-direction: column; gap: 6px; }
.tab-home .hm-awn__btn {
  height: 32px; width: 100%; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-control); color: var(--fg-primary);
  touch-action: none; transition: background .15s;
}
.tab-home .hm-awn__btn.is-held[data-dir="extending"] { background: rgba(76, 175, 80, .4); color: #fff; }
.tab-home .hm-awn__btn.is-held[data-dir="retracting"] { background: rgba(255, 152, 0, .4); color: #fff; }
.tab-home .hm-awn__gate { position: absolute; inset: 0; display: none; border-radius: 8px; cursor: pointer; }
.tab-home .hm-awn.is-locked .hm-awn__gate { display: block; }

/* Lights */
.tab-home .hm-light { display: flex; flex-direction: column; background: rgba(28, 28, 28, .76); border-radius: 8px; --glow: 0; --bulb: 1; }
.tab-home .hm-light__top { padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; border-radius: 8px 8px 0 0; }
.tab-home .hm-light__top:active { background: rgba(255, 255, 255, .03); }
.tab-home .hm-light__bulb { position: relative; height: 60px; display: flex; align-items: center; justify-content: center; }
.tab-home .hm-light__glow {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 29px; margin: -14.5px 0 0 -25px;
  border-radius: 50%; background: rgba(252, 247, 173, .84); filter: blur(5.9px);
  transform: translateY(-12px); opacity: var(--glow); transition: opacity .4s ease-in-out;
}
.tab-home .hm-light__ic { position: relative; color: var(--fg-tertiary); transition: color .4s ease-in-out, opacity .4s ease-in-out; }
.tab-home .hm-light.is-on .hm-light__ic { color: #fff; opacity: var(--bulb); }
.tab-home .hm-light__slider {
  height: 56px; padding: 0 16px 16px; display: flex; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out;
}
.tab-home .hm-light.has-slider .hm-light__slider { opacity: 1; pointer-events: auto; }

/* ---------- Header bell count (every tab) ---------- */
.arc-header__bell .home-bell-count {
  position: absolute; left: 22px; top: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #FF6565; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ---------- Time-range menu (iOS context menu) ---------- */
.home-menu-layer { position: absolute; inset: 0; z-index: 5; }
.home-menu {
  position: absolute; width: 220px; overflow: hidden;
  background: rgba(40, 40, 42, .86);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  transform-origin: top right; animation: home-menu-in .22s var(--ease-spring);
}
@keyframes home-menu-in { from { transform: scale(.85); opacity: 0; } }
.home-menu__item {
  width: 100%; height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px 0 12px; font-size: 16px; color: var(--fg-primary); text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.home-menu__item:last-child { border-bottom: 0; }
.home-menu__item:active { background: rgba(255, 255, 255, .1); }
.home-menu__check { width: 18px; display: flex; justify-content: center; }

/* ---------- Alerts drawer ---------- */
#screen #tab-root { transition: filter .3s ease-in-out; }
#screen.home-drawer-open #tab-root { filter: blur(10px); }
.arc-modal__card.home-drawer {
  position: absolute; top: 20px; right: 20px; bottom: 20px;
  width: min(533px, calc(100% - 40px)); max-height: none; overflow: hidden;
  background: var(--bg-elevated); border-radius: 16px; box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  animation: home-drawer-in .3s ease-in-out;
}
.arc-modal.is-closing .arc-modal__card.home-drawer { animation: home-drawer-out .25s ease-in forwards; }
@keyframes home-drawer-in { from { transform: translateX(calc(100% + 20px)); } }
@keyframes home-drawer-out { to { transform: translateX(calc(100% + 20px)); } }
.home-drawer__view { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .25s ease-in-out, visibility 0s; }
.home-drawer[data-view="list"] > [data-view="report"],
.home-drawer[data-view="report"] > [data-view="list"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease-in-out, visibility 0s linear .25s; }

.home-drawer .hd-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.home-drawer .hd-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.home-drawer .hd-title { font-size: 20px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hd-count { font-size: 13px; color: var(--fg-tertiary); }
.home-drawer .hd-head__r { display: flex; align-items: center; gap: 14px; }
.home-drawer .hd-clear { font-size: 13px; color: var(--fg-secondary); }
.home-drawer .hd-x,
.home-drawer .hd-back {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: var(--fg-primary);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home-drawer .hd-back { width: 40px; height: 40px; }
.home-drawer .hd-x:active, .home-drawer .hd-back:active { background: rgba(255, 255, 255, .16); }
.home-drawer .hd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.home-drawer .hd-insight-wrap { padding: 24px 16px 8px; }
.home-drawer .hd-insight {
  position: relative; overflow: hidden;
  border: 1px solid #373737; border-radius: 8px;
  padding: 16px 16px 64px; display: flex; flex-direction: column; gap: 16px;
}
.home-drawer .hd-insight__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hd-insight__center { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.home-drawer .hd-ring { position: relative; width: 94px; height: 94px; flex: none; }
.home-drawer .hd-ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 39.5px; color: var(--green);
}
.home-drawer .hd-summary {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 26px; color: var(--fg-primary); text-align: center;
}
.home-drawer .hd-stats { display: flex; flex-direction: column; gap: 8px; }
.home-drawer .hd-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: var(--bg-inlay); border-radius: 4px; }
.home-drawer .hd-stat > div { display: flex; flex-direction: column; gap: 3px; }
.home-drawer .hd-stat .l { font-size: 11px; color: var(--fg-secondary); }
.home-drawer .hd-stat .v { font-size: 20px; color: var(--fg-primary); }
.home-drawer .hd-stat .d { font-size: 11px; color: var(--fg-secondary); text-align: right; }
.home-drawer .hd-insight__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  background: linear-gradient(to bottom, rgba(28, 28, 28, 0), #1C1C1C 62%);
}
.home-drawer .hd-insight__fade button { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg-primary); padding: 6px 10px; border-radius: 6px; }
.home-drawer .hd-insight__fade button:active { background: rgba(255, 255, 255, .08); }

.home-drawer .hd-night {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px; background: var(--bg-inlay); border: 1px solid #373737; border-radius: 4px;
}
.home-drawer .hd-night:active { background: #2b2c2e; }
.home-drawer .hd-night__ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(42, 188, 83, .15); color: var(--green); }
.home-drawer .hd-night__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-drawer .hd-night__mid .k { font-size: 11px; font-weight: 600; color: var(--fg-secondary); letter-spacing: .03em; }
.home-drawer .hd-night__mid .h { font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hd-night__mid .d { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-secondary); white-space: nowrap; }
.home-drawer .hd-night__mid .d .g { color: var(--green); }
.home-drawer .hd-night__mid .d i { font-style: normal; color: var(--fg-tertiary); }

.home-drawer .hd-alerts { margin: 16px 0 24px; border-top: 1px solid var(--divider); }
.home-drawer .hd-alert {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 16px 21px;
  background: color-mix(in srgb, var(--sev) 12%, transparent);
  border-bottom: 1px solid var(--divider); cursor: pointer;
}
.home-drawer .hd-alert.is-read { background: color-mix(in srgb, var(--sev) 5%, transparent); }
.home-drawer .hd-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sev); }
.home-drawer .hd-alert__ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sev) 30%, transparent); color: var(--sev);
}
.home-drawer .hd-alert__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-drawer .hd-alert__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-drawer .hd-alert__top .t { font-size: 18px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hd-alert.is-read .hd-alert__top .t { font-weight: 500; }
.home-drawer .hd-alert__top .ago { font-size: 12px; color: var(--fg-secondary); white-space: nowrap; }
.home-drawer .hd-alert p {
  font-size: 16px; line-height: 21px; color: rgba(245, 241, 235, .85);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-drawer .hd-alert__acts { display: flex; gap: 12px; padding-top: 4px; }
.home-drawer .hd-alert__acts .act { font-size: 14px; font-weight: 500; color: var(--primary); }
.home-drawer .hd-alert__acts .dis { font-size: 14px; color: var(--fg-tertiary); }
.home-drawer .hd-clearstate { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 32px; text-align: center; }
.home-drawer .hd-clearstate__ic { color: rgba(42, 188, 83, .5); display: flex; }
.home-drawer .hd-clearstate .t { font-size: 18px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hd-clearstate p { font-size: 14px; color: var(--fg-tertiary); }

/* ---------- ArcInsight report ---------- */
.home-drawer .hr-head { flex: none; height: 48px; margin-top: 12px; padding: 0 24px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; }
.home-drawer .hr-head__c { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hr-divider { flex: none; height: 1px; margin-top: 8px; background: var(--divider); }
.home-drawer .hr-bodywrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #020202; }
.home-drawer .hr-lava {
  position: absolute; inset: -15%; opacity: .9; pointer-events: none;
  background:
    radial-gradient(circle 360px at 30% 60%, rgba(59, 59, 59, .4), rgba(59, 59, 59, 0) 100%),
    radial-gradient(circle 900px at 58% 100%, #3B3B3B 0%, #2D2D2D 25%, #1F1F1F 50%, #111111 75%, #0A0A0A 87.5%, #020202 100%);
  animation: home-lava 12s ease-in-out infinite alternate;
}
@keyframes home-lava {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, -3%) scale(1.06); }
  100% { transform: translate(4%, -6%) scale(1.02); }
}
.home-drawer .hr-scroll { position: absolute; inset: 0; overflow-y: auto; }
.home-drawer .hr-content { padding: 16px; display: flex; flex-direction: column; gap: 32px; }
.home-drawer .hr-score { display: flex; flex-direction: column; gap: 10px; }
.home-drawer .hr-score__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg-primary); margin-bottom: 4px; }
.home-drawer .hr-score__center { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 16px; }
.home-drawer .hr-summary {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 24px; line-height: 32px; color: var(--fg-primary); text-align: left; align-self: stretch;
}
.home-drawer .hr-stats { display: flex; flex-direction: column; gap: 10px; }
.home-drawer .hr-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--bg-inlay); border-radius: 4px; }
.home-drawer .hr-stat > div { display: flex; flex-direction: column; gap: 4px; }
.home-drawer .hr-stat .l { font-size: 12px; color: var(--fg-primary); }
.home-drawer .hr-stat .v { font-size: 24px; color: var(--fg-primary); }
.home-drawer .hr-stat .d { font-size: 12px; line-height: 16px; color: var(--fg-secondary); text-align: right; max-width: 55%; }
.home-drawer .hr-block { padding: 16px 0; border-bottom: 1px solid #383838; }
.home-drawer .hr-block:last-child { border-bottom: 0; }
.home-drawer .hr-block__t { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-primary); }
.home-drawer .hr-block__t .bx { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.home-drawer .hr-block p { margin-top: 8px; font-size: 16px; line-height: 28px; color: var(--fg-secondary); }
.home-drawer .hr-rec { padding: 16px; background: rgba(255, 255, 255, .08); border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.home-drawer .hr-rec__t { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--fg-primary); }
.home-drawer .hr-rec p { font-size: 16px; line-height: 22px; color: var(--fg-primary); }
.home-drawer .hr-rule { height: 1px; background: #383838; margin-top: -8px; }
.home-drawer .hr-night { display: flex; flex-direction: column; gap: 24px; }
.home-drawer .hr-night__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg-primary); }
.home-drawer .hr-night__head .sub { font-size: 12px; font-weight: 400; color: var(--fg-secondary); }
.home-drawer .hr-chip { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--green); margin-bottom: -12px; }
.home-drawer .hr-chip span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.home-drawer .hr-traj { padding: 16px; background: var(--bg-inlay); border-radius: 4px; }
.home-drawer .hr-traj .k { font-size: 11px; letter-spacing: 1px; color: var(--fg-secondary); }
.home-drawer .hr-traj__area { position: relative; height: 64px; margin: 10px 22px 0; }
.home-drawer .hr-traj__track { position: absolute; left: 0; right: 0; top: 28px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.home-drawer .hr-traj__track .fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245, 241, 235, .18), rgba(118, 125, 251, .25) 88%, rgba(42, 188, 83, .3)); }
.home-drawer .hr-traj__pt { position: absolute; top: 0; width: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.home-drawer .hr-traj__pt b { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--fg-primary); height: 14px; margin-bottom: 13px; }
.home-drawer .hr-traj__pt i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-inlay); }
.home-drawer .hr-traj__pt span { font-size: 9px; color: var(--fg-tertiary); margin-top: 4px; }

/* ---------- Sheets (Pet Mode, Leveling) ---------- */
.arc-modal__card.home-sheet { animation: home-sheet-in .38s var(--ease-spring); }
@keyframes home-sheet-in { from { transform: translateY(80px); opacity: 0; } }

.home-pet {
  width: 540px; min-height: 460px; padding: 45px;
  background: var(--bg-inlay); border-radius: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.home-pet.is-on { min-height: 520px; }
.home-pet__title { font-size: 22px; font-weight: 600; color: var(--fg-primary); }
.home-pet__lede { font-size: 15px; line-height: 20px; color: #fff; }
.home-pet__stepper { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 8px 0; }
.home-pet__step {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1C1C1C; color: var(--fg-primary);
}
.home-pet__step:active { background: #111; }
.home-pet__step:disabled { opacity: .35; cursor: default; }
.home-pet__temp { min-width: 140px; text-align: center; font-size: 72px; line-height: 80px; font-weight: 200; color: #fff; font-variant-numeric: tabular-nums; }
.home-pet__modes { display: flex; gap: 10px; }
.home-pet__mode {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--fg-secondary); border-radius: 10px;
  transition: color .2s;
}
.home-pet__mode.is-sel { color: var(--primary); }
.home-pet__mode:active { background: rgba(255, 255, 255, .05); }
.home-pet__primary { width: 100%; padding: 16px 0; border-radius: 12px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 600; }
.home-pet__primary:disabled { background: rgba(118, 125, 251, .4); cursor: default; }
.home-pet__primary:not(:disabled):active { filter: brightness(1.1); }
.home-pet__off { width: 100%; padding: 14px 0; border-radius: 12px; background: var(--bg-gray); color: var(--red); font-size: 16px; font-weight: 600; }
.home-pet__cancel { align-self: center; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--fg-secondary); padding: 4px 12px; }
.home-pet__confirm { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.home-pet__confirm h2 { font-size: 22px; font-weight: 600; color: var(--fg-primary); }
.home-pet__confirm p { font-size: 15px; line-height: 21px; color: #fff; }
.home-pet__confirm .hm-flex { flex: 1 1 auto; }
.home-pet__flame { color: var(--red); display: flex; }

.home-lvl {
  width: 540px; background: var(--bg-card); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden !important;
}
.home-lvl__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 20px; background: #1D1D1D; font-size: 18px; font-weight: 600; color: var(--fg-primary); border-bottom: 1px solid #383838; }
.home-lvl__head .hm-flex { flex: 1 1 auto; }
.home-lvl__x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--fg-secondary); }
.home-lvl__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
.home-lvl__sec { display: flex; flex-direction: column; gap: 12px; }
.home-lvl__t { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.home-lvl__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-secondary); }
.home-lvl__row span:last-child { font-weight: 500; }
.home-lvl__row .is-ok { color: var(--green); }
.home-lvl__note { font-size: 12px; line-height: 16px; color: var(--fg-secondary); }
.home-lvl__primary { width: 100%; height: 40px; border-radius: 6px; background: var(--primary); color: var(--button-primary-text); font-size: 16px; }
.home-lvl__primary:active { filter: brightness(1.1); }
.home-lvl__secondary { width: 100%; height: 40px; border-radius: 6px; background: #333; border: 1px solid #555; color: #fff; font-size: 16px; }
.home-lvl__src { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--fg-secondary); }
.home-lvl__src .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-secondary); flex: none; }
.home-lvl__field { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-primary); }
.home-lvl__field > span:first-child { flex: 1 1 auto; }
.home-lvl__field input {
  width: 80px; height: 36px; padding: 0 10px; text-align: right;
  background: var(--bg-elevated); border: 1px solid var(--grey400); border-radius: 6px;
  font-size: 14px; color: var(--fg-primary-warm); outline: none;
}
.home-lvl__field input:focus { border-color: var(--primary); }
.home-lvl__field .u { width: 18px; font-size: 13px; color: var(--fg-secondary); }