:root{--bg-color-1:#030712;--bg-color-2:#0f172a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--border-color:#ffffff14;--glass-bg:#0f172aa6;--glass-glow:#6366f126;--color-calories:28, 100%, 55%;--color-protein:221, 100%, 62%;--color-carbs:180, 100%, 42%;--color-fats:340, 100%, 65%;--color-fasting:262, 85%, 66%;--color-water:200, 95%, 55%;--color-weight:150, 80%, 50%}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0}body{background:radial-gradient(circle at 50% 0%, #1e1b4b 0%, var(--bg-color-1) 70%);background-color:var(--bg-color-1);color:var(--text-primary);min-height:100vh;font-family:Outfit,Inter,sans-serif;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-color-1)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff2e}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:20px;padding:24px;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;box-shadow:0 8px 32px #0000005e}.glass-card:hover{border-color:#ffffff26}.input-field{border:1px solid var(--border-color);width:100%;color:var(--text-primary);background:#ffffff0a;border-radius:12px;outline:none;padding:12px 16px;font-size:15px;transition:all .2s}.input-field:focus{border-color:hsla(var(--color-protein), .8);box-shadow:0 0 12px hsla(var(--color-protein), .25);background:#ffffff12}.btn-primary{background:linear-gradient(135deg, hsl(var(--color-protein)) 0%, #4f46e5 100%);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 4px 14px #4f46e54d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #4f46e573}.btn-primary:active{transform:translateY(1px)}.app-header{-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);z-index:40;background:#0f172a66;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.logo-area{align-items:center;gap:10px;display:flex}.logo-box{background:linear-gradient(135deg, hsl(var(--color-protein)) 0%, #a855f7 100%);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex;box-shadow:0 4px 12px #6366f14d}.logo-title{letter-spacing:.05em;color:#fff;font-size:18px;font-weight:800}.desktop-nav{align-items:center;gap:6px;display:none}@media (width>=768px){.desktop-nav{display:flex}}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.tab-btn:hover{color:var(--text-primary);background:#ffffff0d}.tab-btn.active{color:var(--text-primary);background:#ffffff14;box-shadow:inset 0 1px #ffffff1a}.mobile-nav{-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-color);z-index:40;background:#030712e6;justify-content:space-around;align-items:center;padding:12px 8px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 24px #00000080}@media (width>=768px){.mobile-nav{display:none}}.mobile-nav-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;transition:color .2s;display:flex}.mobile-nav-btn.active{color:#818cf8}.main-container{flex-direction:column;gap:24px;width:100%;max-width:960px;margin:0 auto;padding:24px 16px;display:flex}.loader-screen{background-color:var(--bg-color-1);justify-content:center;align-items:center;min-height:100vh;display:flex}.loader-content{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.dashboard-grid{flex-direction:column;gap:24px;display:flex}.calorie-summary-card{flex-direction:column;justify-content:space-between;align-items:center;gap:24px;display:flex}@media (width>=640px){.calorie-summary-card{text-align:left;flex-direction:row}}.calorie-text-side{flex-direction:column;gap:8px;display:flex}.calorie-label-icon{color:#f59e0b;align-items:center;gap:8px;display:flex}.calorie-label-icon span{letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700}.calorie-number{color:#fff;font-size:40px;font-weight:800;line-height:1.1}.calorie-number span{color:var(--text-secondary);margin-left:4px;font-size:18px;font-weight:400}.calorie-subtext{color:var(--text-secondary);font-size:14px}.ring-container-36{width:144px;height:144px;position:relative}.ring-text-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-text-pct{color:#fff;font-size:28px;font-weight:900;line-height:1}.ring-text-sub{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;font-size:10px;font-weight:700}.macros-card{flex-direction:column;gap:20px;display:flex}.macros-header{color:#fff;border-bottom:1px solid border-color;padding-bottom:12px;font-size:16px;font-weight:700}.macros-row{flex-flow:wrap;justify-content:space-around;align-items:center;gap:24px;display:flex}.macro-circle-container{flex-direction:column;align-items:center;gap:12px;display:flex}.ring-container-20{width:80px;height:80px;position:relative}.ring-text-mini{color:#fff;justify-content:center;align-items:center;font-size:14px;font-weight:800;display:flex;position:absolute;inset:0}.macro-details{text-align:center}.macro-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700}.macro-value{color:#fff;margin-top:2px;font-size:14px;font-weight:600}.macro-value span{color:var(--text-secondary);font-size:10px;font-weight:400}.quick-widgets-grid{grid-template-cols:1fr;gap:16px;display:grid}@media (width>=640px){.quick-widgets-grid{grid-template-cols:repeat(3, 1fr)}}.quick-widget-card{cursor:pointer;flex-direction:column;justify-content:space-between;min-height:120px;display:flex}.widget-header{justify-content:space-between;align-items:center;display:flex}.widget-icon-bg{border-radius:12px;justify-content:center;align-items:center;padding:10px;transition:transform .2s cubic-bezier(.16,1,.3,1);display:flex}.quick-widget-card:hover .widget-icon-bg{transform:scale(1.06)}.bg-purple-icon{color:#c084fc;background:#a855f726;border:1px solid #a855f740}.bg-sky-icon{color:#38bdf8;background:#0ea5e926;border:1px solid #0ea5e940}.bg-emerald-icon{color:#34d399;background:#10b98126;border:1px solid #10b98140}.widget-arrow{color:var(--text-secondary);transition:color .2s}.quick-widget-card:hover .widget-arrow{color:#fff}.widget-content{flex-direction:column;gap:2px;display:flex}.widget-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}.widget-val{color:#fff;font-size:18px;font-weight:700}.log-flex-layout{grid-template-cols:1fr;align-items:start;gap:24px;display:grid}@media (width>=1024px){.log-flex-layout{grid-template-cols:7fr 5fr}}.log-date-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.meal-category-card{flex-direction:column;gap:16px;display:flex}.meal-card-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding-bottom:10px;display:flex}.meal-card-title{color:#fff;font-size:16px;font-weight:700}.meal-card-calories{color:#f59e0b;font-size:14px;font-weight:600}.meal-items-list{flex-direction:column;gap:10px;display:flex}.logged-food-row{background:#03071259;border:1px solid #ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px;transition:border-color .2s;display:flex}.logged-food-row:hover{border-color:#ffffff14}.food-info{flex:1;min-width:0}.food-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.food-subinfo{color:var(--text-secondary);margin-top:2px;font-size:11px}.food-actions{align-items:center;gap:12px;display:flex}.food-calories{color:#fff;font-size:14px;font-weight:700}.delete-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.delete-btn:hover{color:#ef4444;background:#ef44441a}.add-meal-inline-btn{color:#38bdf8;cursor:pointer;background:0 0;border:none;border-radius:8px;align-self:flex-end;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:background .2s;display:flex}.add-meal-inline-btn:hover{background:#38bdf814}.logging-panel{flex-direction:column;gap:16px;display:flex}.panel-header{border-bottom:1px solid #ffffff0f;padding-bottom:10px}.panel-title{color:#fff;font-size:16px;font-weight:700}.panel-subtitle{color:var(--text-secondary);margin-top:2px;font-size:11px}.meal-tabs-selector{grid-template-cols:repeat(4, 1fr);background:#03071299;border:1px solid #ffffff0f;border-radius:12px;gap:4px;padding:4px;display:grid}.meal-selector-btn{color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:none;border-radius:8px;padding:8px 4px;font-size:11px;font-weight:700;transition:all .2s}.meal-selector-btn.active{color:#fff;background:#4f46e5;box-shadow:0 2px 8px #4f46e54d}.toggle-group{gap:8px;display:flex}.toggle-btn{color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:1px solid #ffffff0f;border-radius:10px;flex:1;padding:10px;font-size:12px;font-weight:600;transition:all .2s}.toggle-btn.active{color:#a5b4fc;background:#4f46e51a;border-color:#4f46e540}.search-container{flex-direction:column;gap:12px;display:flex;position:relative}.search-icon-pos{color:var(--text-secondary);position:absolute;top:14px;left:12px}.search-input{padding-left:36px}.templates-list{flex-direction:column;gap:8px;max-height:320px;padding-right:4px;display:flex;overflow-y:auto}.template-row{background:#03071266;border:1px solid #ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.template-row:hover{border-color:#ffffff14}.add-template-btn{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:background .2s;display:flex}.add-template-btn:hover{background:#4338ca}.custom-form{flex-direction:column;gap:12px;display:flex}.form-row{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:700}.form-grid-2{grid-template-cols:1fr 1fr;gap:12px;display:grid}.fasting-grid{grid-template-cols:1fr;align-items:start;gap:24px;display:grid}@media (width>=768px){.fasting-grid{grid-template-cols:1fr 1fr}}.fasting-clock-card{text-align:center;flex-direction:column;align-items:center;gap:24px;padding:40px 16px;display:flex}.fasting-status-header{flex-direction:column;gap:4px;display:flex}.fasting-title{color:#fff;font-size:20px;font-weight:800}.fasting-subtitle{color:var(--text-secondary);font-size:12px}.clock-timer-visual{justify-content:center;align-items:center;width:224px;height:224px;display:flex;position:relative}.clock-text-overlay{z-index:10;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.clock-time{color:#fff;letter-spacing:.05em;margin-top:4px;font-size:32px;font-weight:800}.clock-target-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-top:8px;font-size:10px;font-weight:700}.fasting-btn{width:100%;max-width:280px}.fasting-btn-start{background:linear-gradient(135deg,#a855f7 0%,#7c3aed 100%);box-shadow:0 4px 14px #a855f74d}.fasting-btn-start:hover{box-shadow:0 6px 20px #a855f773}.fasting-btn-stop{background:linear-gradient(135deg,#f43f5e 0%,#e11d48 100%);box-shadow:0 4px 14px #f43f5e4d}.fasting-btn-stop:hover{box-shadow:0 6px 20px #f43f5e73}.fasting-settings-card{flex-direction:column;gap:16px;display:flex}.presets-grid{grid-template-cols:1fr 1fr;gap:8px;display:grid}.preset-btn{color:var(--text-secondary);cursor:pointer;background:#0307124d;border:1px solid #ffffff0f;border-radius:12px;padding:12px;font-size:12px;font-weight:700;transition:all .2s}.preset-btn.active{color:#d8b4fe;background:#a855f71a;border-color:#a855f740}.completed-fasts-card{flex-direction:column;gap:16px;display:flex}.fasts-list{flex-direction:column;gap:10px;max-height:240px;padding-right:4px;display:flex;overflow-y:auto}.fast-record-row{background:#03071266;border:1px solid #ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.fast-record-left{align-items:center;gap:12px;display:flex}.icon-container-purple{color:#c084fc;background:#a855f726;border:1px solid #a855f740;border-radius:10px;padding:8px}.fast-record-title{color:#fff;font-size:14px;font-weight:600}.fast-record-subtitle{color:var(--text-secondary);margin-top:2px;font-size:10px}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:12px;padding:4px 10px;font-size:10px;font-weight:700}.badge-success{color:#34d399;background:#10b9811a}.badge-warning{color:#fbbf24;background:#f59e0b1a}.weight-grid{grid-template-cols:1fr;align-items:start;gap:24px;display:grid}@media (width>=768px){.weight-grid{grid-template-cols:5fr 7fr}}.weight-form-card{flex-direction:column;gap:16px;display:flex}.weight-form-header{color:#10b981;border-bottom:1px solid #ffffff0f;align-items:center;gap:8px;padding-bottom:12px;display:flex}.weight-form-title{color:#fff;font-size:16px;font-weight:700}.weight-trend-card,.records-list-card{flex-direction:column;gap:16px;display:flex}.records-scroll{flex-direction:column;gap:10px;max-height:240px;padding-right:4px;display:flex;overflow-y:auto}.weight-record-row{background:#03071266;border:1px solid #ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.weight-record-left{align-items:center;gap:12px;display:flex}.icon-container-emerald{color:#34d399;background:#10b98126;border:1px solid #10b98140;border-radius:10px;padding:8px}.badge-fat{color:#a5b4fc;background:#6366f126;border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700}.water-logger-card{flex-direction:column;align-items:center;gap:24px;padding:32px 16px;display:flex}.water-header-area{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.water-title-icon{color:#38bdf8;align-items:center;gap:8px;display:flex}.water-title{color:#fff;font-size:20px;font-weight:800}.water-subtitle{color:var(--text-secondary);font-size:12px}.water-actions-wrapper{flex-direction:column;gap:12px;width:100%;display:flex}.water-btn-row{grid-template-cols:1fr 1fr;gap:12px;display:grid}.water-btn-add{background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);box-shadow:0 4px 14px #0ea5e94d}.water-btn-add:hover{box-shadow:0 6px 20px #0ea5e973}.water-btn-sub{color:#cbd5e1;box-shadow:none;background:#1e293b;border:1px solid #ffffff0f}.water-btn-sub:hover{box-shadow:none;background:#334155}.tips-card{color:var(--text-secondary);background:#38bdf808;border:1px solid #38bdf826;border-radius:16px;gap:12px;padding:16px;font-size:12px;display:flex}.tips-icon{color:#38bdf8;flex-shrink:0}.profile-card{flex-direction:column;gap:24px;display:flex}.profile-header-area{border-bottom:1px solid #ffffff0f;align-items:center;gap:12px;padding-bottom:16px;display:flex}.icon-container-indigo{color:#a5b4fc;background:#6366f126;border:1px solid #6366f140;border-radius:12px;padding:10px}.profile-title{color:#fff;font-size:20px;font-weight:800}.profile-subtitle{color:var(--text-secondary);font-size:12px}.profile-form{flex-direction:column;gap:16px;display:flex}.form-grid-3{grid-template-cols:repeat(3, 1fr);gap:12px;display:grid}.success-toast{color:#fff;z-index:50;background:#10b981;border:1px solid #10b98133;border-radius:16px;align-items:center;gap:8px;padding:12px 20px;font-weight:600;animation:2s infinite bounce-anim;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 25px #10b9814d}@keyframes bounce-anim{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.progress-ring-circle{transform-origin:50%;transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1);transform:rotate(-90deg)}@keyframes pulse-glow{0%{box-shadow:0 0 #a855f766}70%{box-shadow:0 0 0 15px #a855f700}to{box-shadow:0 0 #a855f700}}.pulse-circle{animation:2s infinite pulse-glow}.water-container{background:#0003;border:2px solid #ffffff26;border-radius:20px;width:100px;height:200px;position:relative;overflow:hidden}.water-wave{width:200%;height:var(--water-fill,0%);background:linear-gradient(180deg, hsla(var(--color-water), .7) 0%, hsla(var(--color-water), .95) 100%);border-radius:0 0 18px 18px;transition:height .6s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;left:0}.water-wave:before{content:"";background:radial-gradient(circle at 50% 120%, hsla(var(--color-water), .7) 30%, transparent 60%);background-size:40px 20px;width:100%;height:15px;animation:4s linear infinite wave-animation;position:absolute;top:-12px;left:0}@keyframes wave-animation{0%{transform:translate(0)translateZ(0)scaleY(1)}50%{transform:translate(-25%)translateZ(0)scaleY(.9)}to{transform:translate(-50%)translateZ(0)scaleY(1)}}