/* ===== Base ===== */
html, body { height: 100%; }

body{
  margin:0;
  background:#0a0e14;
  font: 600 14px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow:hidden;
}

.bg-wrap{
  position:fixed;
  inset:0;
  z-index:0;
  background:url("wallpaper.webp") center center / cover no-repeat;
}

@media (max-width:640px){
  .bg-wrap{
    background:url("wallpaper-mobile.webp") center center / cover no-repeat;
  }
}

/* ===== Design Tokens ===== */
:root{
  --accent:#0A84FF;
  --surface:rgba(255,255,255,.22);
  --stroke:rgba(255,255,255,.26);
  --inner:rgba(255,255,255,.12);
  --text:#0b0b0b;
  --subtext:#5f5f62;
  --label-strong:#2f3033;
  --shadow:0 12px 40px rgba(0,0,0,.20);
  --shadow-hover:0 18px 52px rgba(0,0,0,.30);
  --radius:28px;
  --hairline:1px;
  --row-gap:14px;
  --col-gap:18px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --shortcuts-mobile-block:116px;
}

@media (prefers-color-scheme: dark){
  :root{
    --surface:rgba(22,28,38,.32);
    --stroke:rgba(255,255,255,.08);
    --inner:rgba(255,255,255,.06);
    --text:#F5F5F7;
    --subtext:#b7b7ba;
    --label-strong:#e4e5e8;
    --shadow:0 16px 44px rgba(0,0,0,.50);
    --shadow-hover:0 22px 60px rgba(0,0,0,.60);
  }
}

/* ===== Sensor Overlay ===== */
#ha-overlay{
  position:fixed;
  top:calc(12px + var(--safe-top));
  left:calc(12px + var(--safe-left));
  z-index:10;
  background:var(--surface);
  backdrop-filter:blur(28px) saturate(180%) contrast(1.05) brightness(1.03);
  -webkit-backdrop-filter:blur(28px) saturate(180%) contrast(1.05) brightness(1.03);
  border-radius:var(--radius);
  border:var(--hairline) solid var(--stroke);
  color:var(--text);
  box-shadow:var(--shadow);
  min-width:380px;
  max-width:560px;
  padding:18px 18px 14px;
  user-select:none;
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  opacity:.98;
  overflow:hidden;
}

#ha-overlay::before,
#ha-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

#ha-overlay::before{ box-shadow:inset 0 0 0 1px var(--inner); }

#ha-overlay::after{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  mix-blend-mode:screen;
  opacity:.75;
}

.ha-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
}

.ha-head-left{ display:flex; align-items:center; gap:10px; }

.ha-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(16px, 1.2rem, 18px);
}

.ha-live{
  font-weight:800;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#0A84FF,#0768d2);
  color:#fff;
  border:var(--hairline) solid rgba(255,255,255,.25);
  letter-spacing:.35px;
  animation:livePulse 2.2s ease-out infinite;
}

@keyframes livePulse{
  0%{
    box-shadow:0 0 0 0 rgba(10,132,255,.55), 0 2px 8px rgba(10,132,255,.45);
  }
  70%{
    box-shadow:0 0 0 12px rgba(10,132,255,0), 0 2px 14px rgba(10,132,255,.55);
  }
  100%{
    box-shadow:0 0 0 0 rgba(10,132,255,0), 0 2px 8px rgba(10,132,255,.45);
  }
}

.ha-live.offline{
  animation:none;
  background:linear-gradient(180deg,#8e8e93,#6c6c70);
  box-shadow:none;
  opacity:.8;
}

.ha-grid{
  display:grid;
  grid-template-columns:1fr minmax(10ch,max-content);
  gap:var(--row-gap) var(--col-gap);
  padding:6px 4px 6px;
  align-items:baseline;
}

.ha-label{
  color:var(--label-strong);
  font-weight:600;
  font-size:clamp(15px, 2.8vw, 16px);
  padding-top:4px;
}

.ha-value{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:.35em;
  text-align:right;
  font-weight:800;
  font-size:clamp(18px, 3.4vw, 20px);
  letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  padding-top:4px;
}

.ha-value--text{ white-space:normal; word-break:break-word; }
.ha-unit{ opacity:.78; font-weight:600; }

/* ===== Shortcuts ===== */
.ios-shortcuts{
  position:fixed;
  top:calc(12px + var(--safe-top));
  right:calc(12px + var(--safe-right));
  z-index:11;
  display:flex;
  flex-direction:column;
  gap:12px;
  isolation:isolate;
}

.shortcut-card{
  position:relative;
  display:flex;
  align-items:center;
  padding:10px 16px;
  min-height:56px;
  border-radius:var(--radius);
  background:var(--surface);
  border:var(--hairline) solid var(--stroke);
  backdrop-filter:blur(28px) saturate(180%) contrast(1.05) brightness(1.03);
  -webkit-backdrop-filter:blur(28px) saturate(180%) contrast(1.05) brightness(1.03);
  box-shadow:var(--shadow);
  color:var(--text);
  text-decoration:none;
  gap:12px;
  overflow:visible;
  transform-origin:right center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change:transform;
  max-width:46vw;
  touch-action:manipulation;
}

.shortcut-card::before,
.shortcut-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

.shortcut-card::before{ box-shadow:inset 0 0 0 1px var(--inner); }

.shortcut-card::after{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  mix-blend-mode:screen;
  opacity:.72;
}

@media (hover:hover) and (pointer:fine){
  .shortcut-card:hover,
  .shortcut-card:focus-visible{
    transform:scale(1.06);
    box-shadow:var(--shadow-hover);
    background:rgba(255,255,255,.30);
    z-index:12;
  }
}

.shortcut-card:active{ transform:scale(.98); }

.icon-bubble{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  line-height:0;
  flex:0 0 36px;
  color:var(--text);
}

.icon-bubble svg{
  width:100%;
  height:100%;
  display:block;
  vertical-align:middle;
}

.icon-bubble img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.shortcut-card .label{
  white-space:nowrap;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--text);
}

/* ===== Mobile ===== */
@media (max-width:640px){
  #ha-overlay{
    left:calc(8px + var(--safe-left));
    right:calc(8px + var(--safe-right));
    top:calc(8px + var(--safe-top));
    min-width:auto;
    max-width:none;
    width:auto;
    padding:16px 14px 12px;
    max-height:calc(100dvh - var(--safe-top) - var(--shortcuts-mobile-block));
    overflow:auto;
    backdrop-filter:blur(24px) saturate(180%) contrast(1.05) brightness(1.03);
    -webkit-backdrop-filter:blur(24px) saturate(180%) contrast(1.05) brightness(1.03);
  }

  .ios-shortcuts{
    top:auto;
    right:auto;
    left:50%;
    bottom:calc(8px + var(--safe-bottom));
    transform:translateX(-50%);
    width:clamp(300px, 92vw, 640px);
    flex-direction:row;
    justify-content:center;
    align-items:stretch;
    gap:10px;
  }

  .shortcut-card{
    transform:none !important;
    max-width:none;
    flex:0 1 calc(50% - 5px);
    min-width:0;
    padding:12px 14px;
    min-height:56px;
  }

  .shortcut-card .label{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .ha-value--text{ text-align:left; }
}

@media (max-width:380px){
  .ios-shortcuts{ width:clamp(280px, 94vw, 640px); }
  .shortcut-card{ padding:12px; }
  .shortcut-card .label{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  #ha-overlay,
  .shortcut-card{ transition:none; }
  .ha-live{ animation:none; }
}