/* ORIGINAL STYLE.CSS - RESTORED */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
:root {
  --bg: #0a0a0b; --card: #141416; --card2: #1c1c1f;
  --text: #f5f5f5; --text2: #a3a3a3; --text3: #6b7280;
  --accent: #6366f1; --accent2: #5558e6; --accent-soft: rgba(99,102,241,0.15);
  --green: #22c55e; --red: #ef4444; --yellow: #eab308; --blue: #3b82f6; --purple: #a855f7;
  --border: #2a2a2e;
}
html,body { height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; overscroll-behavior:none }
body { overflow:hidden }
.hide { display:none !important }

#login-screen { height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center }
.login-logo { font-size:56px; margin-bottom:12px }
.login-title { font-size:24px; font-weight:700; margin-bottom:4px }
.login-sub { font-size:14px; color:var(--text2); margin-bottom:24px }

#main-screen { display:none; height:100dvh; flex-direction:column }
#main-screen.active { display:flex }
.tab-content { flex:1; overflow-y:auto; padding:16px 16px 100px }
.tab-content.hide { display:none }

.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:6px 0; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px); z-index:50 }
.nav-btn { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; color:var(--text2); font-size:10px; cursor:pointer; padding:4px 12px; transition:color .15s; min-width:56px }
.nav-btn.active { color:var(--accent) }
.nav-btn svg { width:22px; height:22px }
.nav-btn span { font-weight:500 }

.input { width:100%; padding:12px 14px; background:var(--card2); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:15px; outline:none; transition:border .15s }
.input:focus { border-color:var(--accent) }
.input::placeholder { color:var(--text3) }
.btn { width:100%; padding:12px; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; transition:opacity .15s; display:flex; align-items:center; justify-content:center; gap:6px }
.btn:active { opacity:.7 }
.btn-primary { background:var(--accent); color:#fff }
.btn-secondary { background:var(--card2); color:var(--text) }
.btn-danger { background:rgba(239,68,68,0.15); color:var(--red) }
.btn-sm { padding:8px 14px; font-size:13px; width:auto; border-radius:10px }

.card { background:var(--card); border-radius:16px; padding:16px; margin-bottom:12px }
.card-title { font-size:13px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px }

.tab-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-top:4px }
.tab-title { font-size:20px; font-weight:700 }
.date-nav { display:flex; align-items:center; gap:12px; justify-content:center }
.date-nav button { background:none; border:none; color:var(--text2); font-size:18px; cursor:pointer; padding:4px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center }
.date-nav button:active { background:var(--card2) }
.date-label { font-size:14px; font-weight:600; color:var(--text2); min-width:100px; text-align:center }

.cal-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:10px; text-align:center }
.cal-item .cal-val { font-size:22px; font-weight:800; letter-spacing:-.5px }
.cal-item .cal-label { font-size:10px; color:var(--text3); margin-top:1px; text-transform:uppercase; letter-spacing:.6px }
.cal-bar { height:8px; background:var(--card2); border-radius:4px; overflow:hidden }
.cal-bar-fill { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:4px; transition:width .5s ease }

.meal-card { background:var(--card); border-radius:14px; padding:12px; margin-bottom:6px }
.meal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px }
.meal-head-left { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px }
.meal-add { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); border:none; color:var(--accent); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center }
.meal-item { display:flex; justify-content:space-between; align-items:center; padding:6px 4px; font-size:13px; border-radius:10px; transition:background .15s }
.meal-item:active { background:var(--card2) }
.meal-item span:last-child { color:var(--text2); font-family:monospace }
.meal-del { width:26px; height:26px; border-radius:50%; border:none; background:rgba(239,68,68,0.12); color:#ef4444; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.meal-del:active { background:rgba(239,68,68,0.25) }
.meal-empty { color:var(--text3); font-size:13px; padding:8px 0; text-align:center }

.tracker-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin-bottom:12px }
.tracker-item { background:var(--card); border-radius:14px; padding:14px 4px; text-align:center; cursor:pointer; border:none; color:var(--text); transition:transform .1s }
.tracker-item:active { transform:scale(.93) }
.tracker-icon { font-size:24px; margin-bottom:2px }
.tracker-val { font-size:15px; font-weight:700 }
.tracker-label { font-size:9px; color:var(--text2); margin-top:2px; letter-spacing:.3px }

.section-title { font-size:17px; font-weight:700; margin-bottom:10px; padding-left:2px; letter-spacing:-.3px }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; display:none; align-items:end; justify-content:center }
.overlay.active { display:flex }
.sheet { background:var(--card); width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:20px; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px); max-height:85vh; overflow-y:auto; animation:slideUp .25s ease }
@keyframes slideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.sheet-title { font-size:17px; font-weight:600 }
.sheet-close { width:32px; height:32px; border-radius:50%; background:var(--card2); border:none; color:var(--text2); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center }

.picker-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px }
.picker-item { background:var(--card2); border:none; border-radius:14px; padding:16px 8px; text-align:center; color:var(--text); cursor:pointer; transition:transform .1s }
.picker-item:active { transform:scale(.95) }
.picker-item .pi-icon { font-size:26px; margin-bottom:6px }
.picker-item .pi-label { font-size:12px }

.profile-header { display:flex; align-items:center; gap:14px; margin-bottom:16px }
.profile-avatar { width:56px; height:56px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--accent); font-weight:700 }
.profile-name { font-size:17px; font-weight:600 }
.profile-status { font-size:12px; color:var(--text3) }
.profile-id { font-size:11px; color:var(--text3); font-family:monospace; margin-top:2px }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.setting-row + .setting-row { border-top:1px solid var(--border) }
.setting-label { font-size:14px; color:var(--text) }
.setting-right { font-size:13px; color:var(--text2); display:flex; align-items:center; gap:4px }
.edit-icon { color:var(--accent); font-size:14px; cursor:pointer; padding:4px; border-radius:8px; transition:background .15s }
.edit-icon:active { background:var(--accent-soft) }
.profile-menu-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 16px; background:transparent; border:none; color:var(--text); font-size:15px; cursor:pointer; transition:background .1s; border-radius:12px; margin:2px 0 }
.profile-menu-btn:active { background:var(--card2) }
.profile-menu-btn span:last-child { color:var(--text3); font-size:18px }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:14px; cursor:pointer }
.toggle-row input[type=checkbox] { width:44px; height:24px; appearance:none; background:var(--card2); border-radius:12px; position:relative; cursor:pointer; transition:background .15s; flex-shrink:0 }
.toggle-row input[type=checkbox]::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text3); transition:transform .15s,background .15s }
.toggle-row input[type=checkbox]:checked { background:var(--accent) }
.toggle-row input[type=checkbox]:checked::before { transform:translateX(20px); background:#fff }

.recipe-search { display:flex; gap:8px; margin-bottom:12px }
.recipe-search input { flex:1 }
.recipe-tabs { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px }
.recipe-tab { padding:6px 14px; border-radius:20px; background:var(--card2); border:none; color:var(--text2); font-size:13px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s }
.recipe-tab.active { background:var(--accent); color:#fff }
.recipe-card { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:12px; margin-bottom:8px; cursor:pointer; border:none; width:100%; text-align:left; color:var(--text) }
.recipe-card:active { opacity:.7 }
.recipe-icon { width:56px; height:56px; border-radius:12px; background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:24px }
.recipe-info { flex:1; min-width:0 }
.recipe-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.recipe-macros { font-size:11px; color:var(--text3); margin-top:4px; font-family:monospace; display:flex; gap:8px }

.stat-card { background:var(--card); border-radius:14px; padding:14px; margin-bottom:8px }
.stat-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.stat-label { font-size:13px; font-weight:600 }
.stat-avg { text-align:right }
.stat-avg-val { font-size:15px; font-weight:700 }
.stat-avg-unit { font-size:11px; font-weight:400; color:var(--text3) }
.stat-avg-label { font-size:10px; color:var(--text3) }
.bar-chart { display:flex; align-items:end; gap:4px; height:80px; padding-top:8px }
.bar { flex:1; border-radius:4px 4px 0 0; min-height:4px; position:relative; transition:height .3s }
.period-tabs { display:flex; gap:6px; margin-bottom:14px }
.period-tab { padding:6px 16px; border-radius:10px; background:var(--card2); border:none; color:var(--text2); font-size:13px; cursor:pointer; transition:background .15s,color .15s }
.period-tab.active { background:var(--accent); color:#fff }

.food-result { display:flex; align-items:center; justify-content:space-between; padding:10px; background:var(--card2); border-radius:12px; margin-bottom:6px; cursor:pointer; border:none; width:100%; text-align:left; color:var(--text) }
.food-result:active { opacity:.7 }
.food-result-name { font-size:13px; font-weight:500 }
.food-result-macros { font-size:11px; color:var(--text3); margin-top:2px }
.food-result-kcal { font-size:13px; color:var(--accent); font-family:monospace }
.food-input-row { display:flex; gap:8px; margin-bottom:10px }

.mood-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:8px; margin-bottom:12px }
.mood-item { background:var(--card2); border:none; border-radius:14px; padding:10px 4px; text-align:center; color:var(--text); cursor:pointer; transition:transform .1s }
.mood-item:active { transform:scale(.95) }
.mood-emoji { font-size:28px }
.mood-label { font-size:10px; color:var(--text2); margin-top:4px }
.val-row { display:flex; gap:6px; margin-bottom:12px }
.val-btn { flex:1; padding:10px; border-radius:10px; background:var(--card2); border:none; color:var(--text2); font-size:13px; cursor:pointer; transition:background .15s,color .15s; text-align:center }
.val-btn.selected { background:var(--accent); color:#fff }

.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text3); gap:8px }
.spinner { width:20px; height:20px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:spin .6s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }

.toast { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:200; padding:10px 20px; border-radius:12px; font-size:13px; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.4); max-width:320px; text-align:center; pointer-events:none; opacity:0; transition:opacity .25s }
.toast.show { opacity:1 }
.toast.error { background:rgba(239,68,68,.9); color:#fff }
.toast.success { background:rgba(34,197,94,.9); color:#fff }
.toast.info { background:var(--card); color:var(--text) }

#tab-chat { flex:1; display:flex; flex-direction:column; overflow:hidden }
#tab-chat.hide { display:none }
.chat-msgs { flex:1; overflow-y:auto; padding:6px 12px; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column }
.chat-input-bar { display:flex; align-items:center; gap:6px; padding:6px 10px; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px); background:var(--card); border-top:1px solid var(--border); flex-shrink:0 }
.chat-input { flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:8px 14px; color:var(--text); font-size:15px; outline:none; line-height:1.4 }
.chat-input:focus { border-color:var(--accent) }
.chat-send { width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.chat-send:disabled { opacity:0.5 }
.chat-bubble { max-width:82%; padding:8px 14px; border-radius:18px; font-size:15px; line-height:1.45; white-space:pre-wrap; margin-bottom:6px; word-break:break-word; width:fit-content }
.chat-user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px }
.chat-assistant { align-self:flex-start; background:var(--card2); color:var(--text); border-bottom-left-radius:4px }
.back-btn { background:none; border:none; color:var(--text2); font-size:16px; cursor:pointer; padding:4px; display:flex; align-items:center; gap:4px }
.gap-8 { gap:8px }
.flex { display:flex }
.flex-1 { flex:1 }
.items-center { align-items:center }
.justify-between { justify-content:space-between }
.mt-8 { margin-top:8px }
.mb-8 { margin-bottom:8px }
.text-center { text-align:center }
.text-sm { font-size:13px }
.text-xs { font-size:11px }
.text-tertiary { color:var(--text3) }
.font-mono { font-family:monospace }