/* Reset */
* {margin:0;padding:0;box-sizing:border-box;}
html,body {font-family:system-ui,Helvetica,Arial,sans-serif;background:#f8f9fa;color:#1a1a2e;min-height:100vh;}

/* Color variables */
:root {
  --color-bg: #f8f9fa;
  --color-card: #ffffff;
  --color-primary: #00e676; /* vibrant green */
  --color-accent: #ff6d00; /* orange fallback */
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #6b7280;
  --color-border: #e5e7eb;
  --color-success: #10b981;
  --color-danger: #ef4444;
}

/* Utility classes */
.card {background:var(--color-card);border:1px solid var(--color-border);border-radius:8px;padding:1rem;box-shadow:0 2px 16px rgba(0,0,0,0.08);margin:1rem 0;}
.btn {display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background 0.2s ease;min-height:48px;}
.btn-primary {background:var(--color-primary);color:#fff;}
.btn-primary:hover {background:#00c864;}
.btn-secondary {background:var(--color-accent);color:#fff;}
.btn-secondary:hover {background:#e66a00;}

/* Layout */
body.login-page {display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #e0f7fa, #e8f5e9);}
.login-card {width:90%;max-width:360px;}

.sidebar {position:fixed;top:0;left:0;bottom:0;width:240px;background:var(--color-card);box-shadow:2px 0 8px rgba(0,0,0,0.05);padding-top:2rem;display:none;}
.sidebar ul {list-style:none;}
.sidebar a {display:flex;align-items:center;padding:0.75rem 1rem;color:var(--color-text-primary);text-decoration:none;}
.sidebar a.active {background:rgba(0,0,0,0.05);}
.sidebar a:hover {background:rgba(0,0,0,0.08);}
.sidebar svg {margin-right:0.5rem;}

.content {margin-left:0;padding:1rem;}
@media (min-width:768px) {
  .sidebar {display:block;}
  .content {margin-left:250px;}
}

.header h2 {font-size:1.5rem; margin-bottom:0.25rem;}
.header p {color:var(--color-text-secondary);} 

/* Input groups */
.input-group {margin-bottom:1rem;}
.input-group label {display:flex;align-items:center;font-weight:600;color:var(--color-text-secondary);margin-bottom:0.25rem;}
.input-group .input-icon {display:flex;align-items:center;border:1px solid var(--color-border);border-radius:6px;padding:0.5rem;background:#fff;}
.input-group .input-icon svg {margin-right:0.5rem;flex-shrink:0;}
.input-group input, .input-group select {border:none;outline:none;width:100%;font-size:1rem;}

/* AI chat widget */
.ai-chat-widget {position:fixed;right:1rem;bottom:1rem;width:320px;max-height:80vh;background:var(--color-card);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);display:flex;flex-direction:column;overflow:hidden;}
.ai-avatar {height:48px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" fill="%2300e676"/><path d="M32 20a12 12 0 110 24 12 12 0 010-24z" fill="%23fff"/></svg>') center/contain no-repeat;animation: pulse 2s infinite;}
@keyframes pulse {0% {transform:scale(1);}50% {transform:scale(1.05);}100% {transform:scale(1);} }
.chat-messages {flex:1;overflow-y:auto;padding:0.5rem;}
.chat-input {display:flex;border-top:1px solid var(--color-border);} 
.chat-input input {flex:1;padding:0.5rem;border:none;outline:none;}
.chat-input button {border:none;background:var(--color-primary);color:#fff;padding:0 1rem;}

/* Responsive cards grid */
@media (min-width:640px) {
  .content {display:grid;grid-template-columns:repeat(auto-fit, minmax(280px,1fr));gap:1rem;}
}

/* Workout active page */
.workout-active {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#1e1e1e;color:#fff;}
.workout-active .exercise-name {font-size:2.5rem; margin-bottom:1rem;}
.workout-active .timer {font-size:4rem; margin-bottom:2rem;}
.workout-active .progress {font-size:1.2rem; margin-bottom:2rem;}
.workout-active .finish-btn {background:#ff6d00;}

/* Meals page */
.meals-page {padding:1rem;}
.upload-btn {display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;border-radius:8px;padding:1rem;margin-bottom:1rem;cursor:pointer;}
.upload-btn svg {margin-right:0.5rem;}
.photo-preview {max-width:100%;border-radius:8px;margin-bottom:1rem;}

/* Sleep page */
.sleep-page {padding:1rem;}
.sleep-form {display:flex;flex-direction:column;}
.sleep-form label {margin-top:0.5rem;}

/* Progress page */
.progress-page {padding:1rem;}

/* Animations */
.fade-in {animation: fadeIn 0.5s ease forwards;}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
.slide-up {animation: slideUp 0.5s ease forwards;}
@keyframes slideUp {from {transform:translateY(20px);opacity:0;} to {transform:translateY(0);opacity:1;}}