:root {
  --safe-ink: #17352e;
  --safe-muted: #657b74;
  --safe-line: rgba(23, 53, 46, 0.12);
  --safe-green: #0a8f68;
  --safe-green-deep: #087052;
  --safe-mint: #dff5ec;
  --safe-lime: #d7f06d;
  --safe-surface: rgba(255, 255, 255, 0.84);
  --safe-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
button, a { font: inherit; }
button { color: inherit; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--safe-ink) !important;
  background: radial-gradient(circle at 9% 12%, rgba(215, 240, 109, 0.2), transparent 28rem), radial-gradient(circle at 90% 70%, rgba(10, 143, 104, 0.09), transparent 32rem), linear-gradient(145deg, #f9fbfa 0%, #edf5f1 100%) !important;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
.gbg, .gveil, .flyer { display: none !important; }
.wrap { width: min(1180px, calc(100% - 32px)) !important; max-width: none !important; margin: 0 auto !important; padding: 28px 0 54px !important; }
.back {
  min-height: 48px; display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 18px !important; padding: 0 16px !important;
  color: var(--safe-green-deep) !important; border: 1px solid rgba(10, 143, 104, 0.16) !important; border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.72) !important; box-shadow: 0 8px 24px rgba(23, 53, 46, 0.06) !important;
  text-decoration: none !important; font-size: 12px !important; font-weight: 800 !important;
  transition: transform 150ms var(--safe-ease), border-color 180ms ease, background-color 180ms ease !important;
}
.back::before { content: ""; width: 29px; height: 29px; border-radius: 10px; background: var(--safe-green); box-shadow: inset 0 0 0 8px var(--safe-green), inset 0 0 0 10px rgba(255,255,255,.85); }
.back:active, button:active, .pod:active, .tile:active, .pill:active, .wcard:active { transform: scale(.97) !important; }
.hero {
  position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr) !important; gap: 14px !important;
  margin: 0 0 16px !important; padding: 14px !important; border: 1px solid rgba(255, 255, 255, .88) !important; border-radius: 30px !important;
  background: rgba(255, 255, 255, .58) !important; box-shadow: 0 26px 70px rgba(29, 74, 61, .11), inset 0 0 0 1px rgba(23,53,46,.04) !important;
  backdrop-filter: blur(18px);
}
.sign { min-height: 238px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 22px !important; background: linear-gradient(135deg, #eff9f5 0%, #e1f4ec 100%) !important; box-shadow: none !important; transform: none !important; }
.sign::before, .sign::after, .nail, .lf, .forms { display: none !important; }
.sign-in { min-height: 238px !important; display: flex !important; align-items: center !important; gap: 28px !important; padding: 30px clamp(24px, 4vw, 46px) !important; border: 0 !important; background: transparent !important; }
.hero-letter { flex: 0 0 auto; width: 126px !important; height: 142px !important; display: grid !important; place-items: center !important; margin: 0 !important; color: white !important; border: 0 !important; border-radius: 54px 54px 62px 62px / 38px 38px 86px 86px !important; background: linear-gradient(145deg, #12a47b, #087052) !important; box-shadow: 0 22px 40px rgba(10, 143, 104, .25), inset 0 1px 0 rgba(255,255,255,.32) !important; transform: none !important; }
.hero-letter span { color: white !important; font-size: 76px !important; line-height: 1 !important; font-weight: 800 !important; }
.sign-txt { text-align: right !important; }
.kicker { color: var(--safe-green) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: 0 !important; }
.title { margin: 8px 0 !important; color: var(--safe-ink) !important; font-size: clamp(30px, 4vw, 50px) !important; line-height: 1.18 !important; letter-spacing: -.04em !important; text-shadow: none !important; }
.sub { margin: 0 !important; color: var(--safe-muted) !important; font-size: 13px !important; line-height: 1.8 !important; letter-spacing: 0 !important; }
.harvest { min-height: 238px !important; margin: 0 !important; padding: 24px !important; border: 1px solid rgba(10, 143, 104, .12) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .76) !important; box-shadow: none !important; }
.harvest-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.harvest-top { color: var(--safe-ink) !important; }
.harvest-top .lb { color: var(--safe-muted) !important; font-size: 11px !important; }
.harvest-top .num { color: var(--safe-green-deep) !important; }
.pips { gap: 7px !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(10,143,104,.12) !important; background: rgba(255,255,255,.7) !important; }
.pips > .pip { width: 27px !important; height: 27px !important; display: grid !important; place-items: center !important; color: var(--safe-muted) !important; border: 1px solid rgba(10,143,104,.14) !important; border-radius: 9px !important; background: #edf4f1 !important; font-size: 10px !important; font-weight: 850 !important; filter: none !important; opacity: .62 !important; }
.pips > .pip.on { color: white !important; border-color: var(--safe-green) !important; background: var(--safe-green) !important; opacity: 1 !important; transform: scale(1.06) !important; }
.harvest-note { color: var(--safe-muted) !important; font-size: 11px !important; line-height: 1.8 !important; }
.replant { min-height: 38px; padding: 0 13px; color: var(--safe-green-deep) !important; border: 1px solid rgba(10,143,104,.16) !important; border-radius: 12px !important; background: var(--safe-mint) !important; font-weight: 800; cursor: pointer; }
.orchard { margin: 0 !important; padding: 18px !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 28px !important; background: rgba(255,255,255,.55) !important; box-shadow: 0 18px 54px rgba(29,74,61,.08) !important; backdrop-filter: blur(16px); }
.beds { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.pod { min-height: 150px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; padding: 18px 12px !important; color: var(--safe-ink) !important; border: 1px solid rgba(23,53,46,.09) !important; border-radius: 20px !important; background: rgba(255,255,255,.84) !important; box-shadow: 0 8px 22px rgba(23,53,46,.06) !important; transform: none !important; cursor: pointer; transition: transform 150ms var(--safe-ease), border-color 180ms ease, box-shadow 180ms ease !important; }
.pod::before, .pod::after { display: none !important; }
.pod-art { position: relative; width: 70px !important; height: 70px !important; display: grid !important; place-items: center !important; border-radius: 20px !important; background: color-mix(in srgb, var(--c) 14%, white) !important; box-shadow: none !important; transform: none !important; }
.pod-num { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--safe-green-deep) !important; border: 1px solid rgba(10,143,104,.12) !important; border-radius: 8px; background: white !important; font-size: 10px; font-weight: 850; }
.pod-name { color: var(--safe-ink) !important; font-size: 13px !important; font-weight: 850 !important; text-shadow: none !important; }
.pod.done { border-color: rgba(10,143,104,.25) !important; background: #f7fcfa !important; }
.pod .tick { position: absolute; top: -7px; left: -7px; width: 24px; height: 24px; display: none; place-items: center; color: white; border-radius: 50%; background: var(--safe-green) !important; font-size: 11px; font-weight: 900; }
.pod.done .tick { display: grid; }
.ground { margin-top: 14px !important; background: transparent !important; }
.signpost { display: flex !important; justify-content: center !important; }
.sign-pod { min-height: 78px !important; width: min(100%, 380px) !important; flex-direction: row !important; }
.foot { margin: 22px 0 0 !important; color: var(--safe-muted) !important; font-size: 10px !important; text-align: center; }
.mo { background: rgba(16, 35, 30, .52) !important; backdrop-filter: blur(10px) !important; }
.sheet { overflow: hidden !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 26px !important; background: #f6faf8 !important; box-shadow: 0 30px 90px rgba(11,34,27,.28) !important; transform-origin: center !important; }
.sh-head { color: var(--safe-ink) !important; background: linear-gradient(135deg, #eff9f5, #dff5ec) !important; }
.sh-head h2 { color: var(--safe-ink) !important; text-shadow: none !important; }
.sh-tag { color: var(--safe-green-deep) !important; }
.sh-x { color: var(--safe-ink) !important; border-color: rgba(23,53,46,.12) !important; background: rgba(255,255,255,.76) !important; transition: transform 150ms var(--safe-ease), background-color 180ms ease !important; }
.vine { display: none !important; }
.sh-body { background: #f6faf8 !important; }
.bed, .tile, .hbox, .wcard, .an, .pad, .win { border-color: rgba(23,53,46,.1) !important; border-radius: 18px !important; background: white !important; box-shadow: 0 8px 22px rgba(23,53,46,.05) !important; }
.bed-t, .hintline { color: var(--safe-muted) !important; }
.toast .safety-check { display: grid !important; place-items: center !important; color: white !important; border-radius: 16px !important; background: var(--safe-green) !important; font-size: 25px !important; font-weight: 900 !important; }
.pill, .tab, .pbtn, .b, .again, .rs { border-radius: 13px !important; transition: transform 150ms var(--safe-ease), filter 180ms ease !important; }
.b-done, .ok, .again { color: white !important; background: var(--safe-green) !important; }
.b-close { color: var(--safe-ink) !important; background: #e7efeb !important; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(10,143,104,.28) !important; outline-offset: 3px !important; }
.kha-progress { height: 7px; margin: 18px 0; overflow: hidden; border-radius: 999px; background: #e3ece8; }
.kha-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--safe-green); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--safe-ease); }
.kha-icon { font-size: 34px; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .back:hover { border-color: rgba(10,143,104,.3) !important; background: white !important; } .pod:hover { transform: translateY(-3px) !important; border-color: rgba(10,143,104,.2) !important; box-shadow: 0 14px 30px rgba(23,53,46,.09) !important; } }
@media (max-width: 760px) { .wrap { width: min(100% - 20px, 620px) !important; padding-top: 14px !important; } .hero { grid-template-columns: 1fr !important; border-radius: 24px !important; } .sign-in { min-height: 210px !important; gap: 18px !important; padding: 24px 20px !important; } .hero-letter { width: 98px !important; height: 112px !important; } .hero-letter span { font-size: 61px !important; } .title { font-size: 32px !important; } .harvest { min-height: auto !important; } .beds { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .pod { min-height: 132px !important; } }
@media (max-width: 430px) { .sign-in { align-items: flex-start !important; flex-direction: column !important; } .hero-letter { width: 76px !important; height: 88px !important; border-radius: 30px 30px 36px 36px / 24px 24px 50px 50px !important; } .hero-letter span { font-size: 50px !important; } .beds { grid-template-columns: 1fr !important; } .pod { min-height: 94px !important; flex-direction: row !important; justify-content: flex-start !important; text-align: right !important; } .pod-art { width: 56px !important; height: 56px !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .pod, .back, button { transition-property: opacity, color, background-color, border-color !important; } }