:root {
  --bg: #FAF9F6;
  --bg-glow: radial-gradient(circle at 50% 35%, #fff6ec 0%, #FAF9F6 60%);
  --text: #3a3a3a;
  --muted: #9a938a;
  --faint: #c9c2b8;
  --c1: #d6c1 e8; /* fallback */
  --circle-a: #e9d5f0;
  --circle-b: #ffd9c0;
  --glow: rgba(214, 193, 232, 0.55);
  --toggle: #b8ada0;
}

:root[data-theme="dark"] {
  --bg: #12141C;
  --bg-glow: radial-gradient(circle at 50% 35%, #1c2030 0%, #0e0f16 65%);
  --text: #e9e6df;
  --muted: #7a7f92;
  --faint: #454b60;
  --circle-a: #3a4a6b;
  --circle-b: #5a4a7a;
  --glow: rgba(90, 110, 170, 0.45);
  --toggle: #6b7188;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  background-image: var(--bg-glow);
  color: var(--text);
  font-family: 'Vazirmatn', sans-serif;
  transition: background-color 0.9s ease, color 0.9s ease;
  overflow: hidden;
}

.zen-root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2.2rem 1.2rem 1.4rem;
  position: relative;
}

/* Theme toggle */
.theme-toggle {
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 1.2rem;
  background: transparent;
  border: 1px solid var(--faint);
  color: var(--toggle);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.7s ease;
  display: grid;
  place-items: center;
}
.theme-toggle:hover {
  border-color: var(--muted);
  color: var(--text);
  transform: rotate(20deg);
}

/* Header */
.zen-header {
  text-align: center;
  margin-top: 1rem;
}
.zen-title {
  font-weight: 100;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing: 0.08em;
  color: var(--text);
}
.zen-subtitle {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-top: 0.35rem;
  text-transform: lowercase;
  direction: ltr;
}

/* Main */
.zen-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 480px;
}

/* Breathing circle */
.breath-wrap {
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
}
.breath-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--circle-a), var(--circle-b));
  box-shadow: 0 0 60px 10px var(--glow);
  display: grid;
  place-items: center;
  transition: transform 4s cubic-bezier(0.4, 0, 0.4, 1),
              box-shadow 4s ease;
}
.breath-in {
  transform: scale(1.55);
  box-shadow: 0 0 90px 24px var(--glow);
}
.breath-out {
  transform: scale(0.85);
  box-shadow: 0 0 40px 6px var(--glow);
}
.breath-static { transform: scale(1.15); }

.breath-label {
  font-weight: 300;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.05em;
}
.breath-label-en {
  position: absolute;
  margin-top: 3.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.55);
  direction: ltr;
}

/* Clock */
.zen-clock {
  font-weight: 100;
  font-size: clamp(2.8rem, 12vw, 4rem);
  letter-spacing: 0.06em;
  color: var(--text);
  direction: ltr;
  line-height: 1;
}
.zen-date {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: -0.6rem;
}

/* Phrase */
.phrase-slot {
  min-height: 4.2rem;
  text-align: center;
  margin-top: 0.4rem;
}
.zen-phrase {
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.7;
  transition: opacity 0.7s ease;
}
.zen-phrase-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 0.3rem;
  direction: ltr;
  transition: opacity 0.7s ease;
}
.phrase-visible { opacity: 1; }
.phrase-hidden { opacity: 0; }

/* Footer */
.zen-footer {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  direction: ltr;
}
.zen-footer a {
  color: var(--faint);
  text-decoration: none;
  transition: color 0.7s ease;
}
.zen-footer a:hover { color: var(--muted); }

@media (max-width: 380px) {
  .breath-wrap { width: 210px; height: 210px; }
  .breath-circle { width: 120px; height: 120px; }
}