:root {
  --design-w: 941;
  --design-h: 1672;
  --ink: #53575c;
  --muted: #8a8a87;
  --green: #71964a;
  --soft-green: #a8c66e;
  --blue: #78addd;
  --glass: rgba(255, 253, 247, 0.70);
  --glass-strong: rgba(255, 253, 247, 0.82);
  --edge: rgba(255, 255, 255, 0.92);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #f7f4ec;
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.95), transparent 34%),
    linear-gradient(180deg, #fbf8ef 0%, #f6f1e5 100%);
}

.phone-stage {
  width: min(100vw, 430px);
  aspect-ratio: 941 / 1672;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 0;
  background: #f7f2df;
}

.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image: url("./assets/background-3.png");
  background-size: cover;
  background-position: center center;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 249, 235, 0.34) 0%, transparent 34%),
    linear-gradient(0deg, rgba(255, 249, 235, 0.32) 0%, transparent 28%);
}

.top-haze {
  position: absolute;
  left: 0;
  top: 0;
  width: 37%;
  height: 8%;
  z-index: 1;
  background: radial-gradient(circle at 38% 38%, rgba(255, 253, 245, 0.98), rgba(255, 253, 245, 0.68) 45%, transparent 72%);
  filter: blur(8px);
  opacity: 0.85;
}

.glass {
  position: absolute;
  z-index: 2;
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow:
    0 14px 38px rgba(128, 112, 86, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
}

.weather-card {
  left: 5.31%;
  top: 4.37%;
  width: 35.7%;
  height: 20.1%;
  border-radius: 9.8%;
  padding: 4.05% 3.75% 3.15%;
}

.location-row {
  display: flex;
  align-items: center;
  gap: 4.8%;
  font-size: clamp(12px, 3.05cqw, 28px);
  line-height: 1;
  letter-spacing: 0;
  color: #55595d;
}

.location-row svg {
  width: 12.5%;
  flex: 0 0 auto;
}

.weather-main {
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
  column-gap: 9%;
  margin-top: 13.5%;
}

.weather-icon {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.9;
}

.sun {
  position: absolute;
  left: 8%;
  top: 3%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffc74d;
  box-shadow: 0 0 0 6px rgba(255, 199, 77, 0.18);
}

.sun::before {
  content: "";
  position: absolute;
  inset: -36%;
  background:
    linear-gradient(#ffc74d, #ffc74d) center 0 / 7% 18% no-repeat,
    linear-gradient(#ffc74d, #ffc74d) center 100% / 7% 18% no-repeat,
    linear-gradient(90deg, #ffc74d, #ffc74d) 0 center / 18% 7% no-repeat,
    linear-gradient(90deg, #ffc74d, #ffc74d) 100% center / 18% 7% no-repeat;
  opacity: 0.76;
}

.cloud {
  position: absolute;
  bottom: 22%;
  border-radius: 999px;
  background: #dededc;
  filter: drop-shadow(0 3px 2px rgba(158, 158, 158, 0.1));
}

.cloud-a {
  left: 14%;
  width: 66%;
  height: 30%;
}

.cloud-b {
  right: 7%;
  bottom: 27%;
  width: 44%;
  height: 34%;
}

.rain {
  position: absolute;
  width: 9%;
  height: 20%;
  border-radius: 999px;
  background: #80b9e6;
  transform: rotate(18deg);
}

.rain-a {
  left: 29%;
  bottom: -1%;
}

.rain-b {
  left: 54%;
  bottom: 1%;
}

.temperature {
  font-size: clamp(26px, 6.55cqw, 58px);
  line-height: 1;
  color: #4f5256;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.condition {
  margin-left: 38.2%;
  margin-top: 6.7%;
  font-size: clamp(11px, 2.58cqw, 23px);
  line-height: 1.2;
  color: #838383;
  white-space: nowrap;
}

.weather-meta {
  display: flex;
  align-items: center;
  gap: 8%;
  margin-top: 13.7%;
  font-size: clamp(10px, 2.38cqw, 22px);
  color: #7b7b78;
  white-space: nowrap;
}

.weather-meta i {
  width: 1px;
  height: 1.05em;
  background: rgba(117, 117, 112, 0.32);
}

.weather-meta svg {
  width: 8%;
  color: #8fb56a;
}

.plant-bubble {
  min-width: 13.9%;
  min-height: 5.2%;
  border-radius: 18%;
  padding: 1.45% 1.85%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.36em;
}

.plant-bubble strong {
  display: flex;
  align-items: center;
  gap: 0.2em;
  color: #64615f;
  font-size: clamp(11px, 2.48cqw, 23px);
  line-height: 1;
  font-weight: 600;
}

.plant-bubble strong::after {
  content: "🌿";
  font-size: 0.82em;
  line-height: 1;
}

.plant-bubble span {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #858580;
  font-size: clamp(8px, 1.8cqw, 17px);
  line-height: 1;
  white-space: nowrap;
}

.plant-bubble span b {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #a5bf72;
}

.morning {
  left: 60.8%;
  top: 22.7%;
  width: 18.1%;
  height: 5.4%;
}

.mint {
  left: 8.7%;
  top: 41%;
  width: 14.2%;
  height: 5.3%;
}

.perilla {
  left: 36.2%;
  top: 41.7%;
  width: 14.1%;
  height: 5.1%;
}

.speech {
  left: 18.9%;
  top: 30.35%;
  width: 38.8%;
  height: 7.05%;
  border-radius: 18% / 45%;
  padding: 2.05% 2.55% 2.05%;
  color: #5e5f60;
}

.speech::after {
  content: "";
  position: absolute;
  right: 7.1%;
  bottom: -10%;
  width: 8.6%;
  aspect-ratio: 1;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.86);
  transform: rotate(42deg) skew(8deg, 8deg);
  border-radius: 0 0 25% 0;
}

.speech p {
  margin: 0;
  font-size: clamp(10px, 2.22cqw, 21px);
  line-height: 1.72;
  letter-spacing: 0;
}

.speech svg {
  position: absolute;
  right: 4.4%;
  bottom: 7.5%;
  width: 4.8%;
  color: #a9cff3;
}

.status-card {
  left: 10.3%;
  top: 72.95%;
  width: 78.8%;
  height: 12.4%;
  border-radius: 7% / 25%;
  background: var(--glass-strong);
  display: grid;
  grid-template-columns: 35% 22% 34%;
  align-items: center;
  column-gap: 4.5%;
  padding: 3.25% 3.75% 2.75%;
}

.status-title {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 1.05em;
  color: #65705c;
  font-size: clamp(11px, 2.55cqw, 24px);
  line-height: 1;
  white-space: nowrap;
}

.status-title svg {
  width: 1.35em;
  height: 1.35em;
  color: #7da855;
}

.status-left p,
.status-right p {
  margin: 0 0 0.7em;
  color: #85857f;
  font-size: clamp(10px, 2.15cqw, 21px);
  line-height: 1;
  white-space: nowrap;
}

.status-left strong {
  color: #789d48;
  font-weight: 500;
  font-size: 1.22em;
}

.status-right .blue {
  color: var(--blue);
}

.cat-title svg {
  color: #697c8b;
}

.leaf-orb {
  justify-self: center;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 253, 244, 0.38);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.48);
}

.leaf-orb svg {
  width: 58%;
}

.progress {
  width: 95%;
  height: 0.42em;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(204, 202, 187, 0.55);
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.plant-progress i {
  width: 90%;
  background: #9ab86a;
}

.arbor-progress i {
  width: 87%;
  background: #85b8e3;
}

.pager {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 86.8%;
  display: flex;
  justify-content: center;
  gap: 1.65%;
}

.pager span {
  width: 1.25%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.pager .active {
  background: #94b764;
}

.tab-bar {
  left: 5.28%;
  bottom: 2.82%;
  width: 89.15%;
  height: 6.48%;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.83);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  padding: 0 4.2%;
}

.tab-bar button {
  width: 64%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4d5155;
  opacity: 0.98;
}

.tab-bar button.active {
  color: #6f9644;
}

.tab-bar svg {
  width: 65%;
  height: 65%;
}