:root {
  --background: 138 76% 96%;
  --foreground: 142 52% 14%;
  --primary: 142 76% 24%;
  --primary-foreground: 0 0% 100%;
  --secondary: 142 76% 57%;
  --secondary-foreground: 142 65% 11%;
  --muted: 137 38% 88%;
  --muted-foreground: 142 21% 38%;
  --destructive: 0 76% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 139 35% 80%;
  --card: 0 0% 100%;
  --gold: 43 96% 56%;
  --silver: 150 15% 86%;
  --shadow-sm: 0 6px 18px rgba(22, 101, 52, 0.08);
  --shadow-md: 0 12px 32px rgba(22, 101, 52, 0.14);
  --shadow-lg: 0 24px 70px rgba(22, 101, 52, 0.20);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}
.dark {
  --background: 145 40% 8%;
  --foreground: 139 55% 92%;
  --primary: 142 70% 46%;
  --primary-foreground: 145 50% 7%;
  --secondary: 142 54% 28%;
  --secondary-foreground: 139 55% 92%;
  --muted: 145 28% 16%;
  --muted-foreground: 139 18% 72%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 145 24% 24%;
  --card: 145 35% 11%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: 'Tajawal', sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { overflow-x: hidden; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; background: radial-gradient(circle at 20% 0%, rgba(74,222,128,.28), transparent 36%), linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted))); box-shadow: var(--shadow-lg); }
.card { background: hsla(var(--card), .92); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.glass { background: rgba(255,255,255,.68); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.55); }
.dark .glass { background: rgba(10,32,20,.68); border-color: hsl(var(--border)); }
.soft-btn { transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); }
.soft-btn:active { transform: scale(.96); }
.plant-sway { animation: sway 2.8s ease-in-out infinite; transform-origin: bottom center; }
.leaf-float { animation: floatLeaf 1.05s ease-out forwards; pointer-events: none; }
.pulse-grow { animation: pulseGrow 1.7s ease-in-out infinite; }
@keyframes sway { 0%,100%{ transform: rotate(-2deg) translateY(0);} 50%{ transform: rotate(2deg) translateY(-2px);} }
@keyframes floatLeaf { 0%{ transform: translateY(0) scale(.7) rotate(0); opacity: 1;} 100%{ transform: translateY(-70px) scale(1.2) rotate(35deg); opacity: 0;} }
@keyframes pulseGrow { 0%,100%{ filter: drop-shadow(0 0 0 rgba(74,222,128,0)); } 50%{ filter: drop-shadow(0 10px 14px rgba(74,222,128,.32)); } }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.focus-ring:focus { outline: 3px solid hsla(var(--secondary), .38); outline-offset: 2px; }
.admin-hit { position: fixed; top: 8px; left: 8px; width: 42px; height: 42px; opacity: .03; z-index: 50; }