body { font-family: 'Cairo', sans-serif; background-color: #0f172a; }
body.lang-ku { font-family: 'Rabar', sans-serif; }

/* الخلفية */
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: 0; }
.blob-1 { top: -20%; left: -20%; width: 500px; height: 500px; background: #4f46e5; animation: move 20s infinite alternate; }
.blob-2 { bottom: -20%; right: -20%; width: 400px; height: 400px; background: #10b981; animation: move 15s infinite alternate-reverse; }
@keyframes move { from { transform: translate(0,0); } to { transform: translate(30px, 30px); } }
.backdrop-blur { position: absolute; inset: 0; backdrop-filter: blur(50px); z-index: 1; pointer-events: none; }

/* Sidebar Items */
.sidebar-item {
    width: 100%; text-align: right; padding: 12px; margin-bottom: 5px; border-radius: 12px;
    color: #cbd5e1; transition: all 0.2s; display: flex; items-center gap: 12px;
}
.sidebar-item:hover { background: rgba(255,255,255,0.1); color: white; transform: translateX(-5px); }
html[dir="ltr"] .sidebar-item { text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
html[dir="ltr"] .sidebar-item:hover { transform: translateX(5px); }
html[dir="ltr"] #sidebar { left: 0; right: auto; transform: translateX(-100%); border-r: 1px solid rgba(255,255,255,0.1); border-l: none; }

/* Cards & UI */
.glass-panel {
    background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.fire-anim { animation: burn 1.5s infinite alternate; filter: drop-shadow(0 0 5px orange); }
@keyframes burn { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }

/* Water Tracker */
.water-cup {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1);
    display: flex; items-center; justify-center; cursor: pointer; transition: 0.3s;
    border: 2px solid transparent;
}
.water-cup.filled { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; border-color: #60a5fa; animation: pop 0.3s; }
@keyframes pop { 0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* BMI Gauge (Simple CSS Semi-Circle) */
.gauge-container {
    width: 200px; height: 100px; background: #1e293b; border-top-left-radius: 110px; border-top-right-radius: 110px;
    position: relative; overflow: hidden; margin: 0 auto;
}
.gauge-fill {
    width: 100%; height: 100%; background: conic-gradient(from 180deg, #10b981 0deg, #eab308 90deg, #ef4444 180deg);
    opacity: 0.3;
}
.gauge-needle {
    position: absolute; bottom: 0; left: 50%; width: 4px; height: 90%; background: white;
    transform-origin: bottom center; transform: rotate(-90deg); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 10;
}
.gauge-center {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px;
    background: white; border-radius: 50%; z-index: 11;
}

/* Chat & Inputs */
.input-field {
    width: 100%; background: #1e293b; border: 1px solid #334155; color: white; padding: 14px;
    border-radius: 12px; outline: none; transition: 0.3s;
}
.input-field:focus { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.btn-primary {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: white;
    border-radius: 12px; font-weight: bold; transition: 0.3s;
}
.btn-primary:active { transform: scale(0.97); }

/* Toast */
.toast {
    background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255,255,255,0.1); color: white;
    padding: 12px 24px; border-radius: 50px; display: flex; items-center; gap: 10px;
    animation: slideUp 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }