*{box-sizing:border-box;margin:0;padding:0}body{color:#f5f5f5;background:radial-gradient(circle at top,#202634 0%,#11151d 45%,#090b10 100%);min-height:100vh;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}.counter{width:min(1100px,92%);margin:0 auto;padding:40px 0 60px}.app-title{text-align:center;letter-spacing:-1px;color:#fff;text-shadow:0 4px 20px #00000059;margin-bottom:35px;font-size:clamp(2rem,5vw,3.5rem)}.foodSearchContainer{justify-content:center;margin-bottom:25px;display:flex}.searchBtnContainer{width:100%;position:relative}.activateSearch{color:#fff;cursor:pointer;background:#242b38;border:1px solid #343e50;border-radius:12px;width:fit-content;margin:0 auto;padding:12px 22px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s;display:block}.activateSearch:hover{background:#30394a;transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.activateSearch:active{transform:translateY(0)}.input-container{grid-template-columns:minmax(280px,380px) 1fr;align-items:start;gap:25px;display:grid}.macrosForm{background:#1b202beb;border:1px solid #303849;border-radius:18px;flex-direction:column;gap:14px;padding:24px;display:flex;box-shadow:0 18px 45px #0000004d}.macrosForm input{color:#fff;background:#121720;border:1px solid #394355;border-radius:10px;outline:none;width:100%;padding:14px 15px;transition:border-color .2s,box-shadow .2s,background .2s}.macrosForm input::placeholder{color:#7f899b}.macrosForm input:focus{background:#161c27;border-color:#6ee7b7;box-shadow:0 0 0 3px #6ee7b71f}.macrosForm input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.macrosForm input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.macrosForm input[type=number]{-moz-appearance:textfield}.macrosForm button{color:#06251a;cursor:pointer;background:linear-gradient(135deg,#6ee7b7,#34d399);border:none;border-radius:10px;margin-top:5px;padding:14px 18px;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s}.macrosForm button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 10px 25px #34d39940}.macrosForm button:active{transform:translateY(0)}.foods-eaten-today-container{min-width:0}.macrosCounterContainer{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;display:grid}.macrosCounterContainer span{text-align:center;background:#1b202bf2;border:1px solid #303849;border-radius:14px;padding:18px 10px;font-size:.95rem;font-weight:700;box-shadow:0 8px 25px #0003}.macrosCounterContainer span:first-child{color:#fbbf24}.macrosCounterContainer span:nth-child(2){color:#6ee7b7}.macrosCounterContainer span:nth-child(3){color:#60a5fa}.macrosCounterContainer span:nth-child(4){color:#f472b6}.food-item-container{flex-direction:column;gap:12px;display:flex}.foodLog,.food-log,.food-item{background:#1b202bf2;border:1px solid #303849;border-radius:14px;padding:18px;transition:transform .2s,border-color .2s;box-shadow:0 8px 24px #0003}.foodLog:hover,.food-log:hover,.food-item:hover{border-color:#46536a;transform:translateY(-2px)}.foodLog h2,.foodLog h3,.food-log h2,.food-log h3,.food-item h2,.food-item h3{color:#fff;margin-bottom:8px}.foodLog p,.foodLog span,.food-log p,.food-log span,.food-item p,.food-item span{color:#adb6c7}.foodLog button,.food-log button,.food-item button{color:#fff;cursor:pointer;background:#303849;border:none;border-radius:8px;margin-top:10px;margin-right:8px;padding:8px 12px;font-weight:600;transition:background .2s,transform .2s}.foodLog button:hover,.food-log button:hover,.food-item button:hover{background:#46536a;transform:translateY(-1px)}.clearBtn{color:#fca5a5;cursor:pointer;background:#7f1d1d40;border:1px solid #f8717166;border-radius:10px;margin:30px auto 0;padding:12px 20px;font-weight:700;transition:background .2s,transform .2s,border-color .2s;display:block}.clearBtn:hover{background:#b91c1c59;border-color:#f87171;transform:translateY(-2px)}.foodDatabase,.food-data-base,.searchResultsContainer{background:#1b202bfa;border:1px solid #303849;border-radius:16px;margin:18px auto 0;padding:20px;box-shadow:0 16px 40px #00000059}.foodDatabase input,.food-data-base input,.searchResultsContainer input{color:#fff;background:#121720;border:1px solid #394355;border-radius:10px;outline:none;width:100%;margin-bottom:15px;padding:13px 14px}.foodDatabase input:focus,.food-data-base input:focus,.searchResultsContainer input:focus{border-color:#6ee7b7;box-shadow:0 0 0 3px #6ee7b71f}.searchResult,.search-result,.database-food{background:#151b25;border:1px solid #303849;border-radius:10px;justify-content:space-between;align-items:center;gap:15px;margin-bottom:10px;padding:14px;display:flex}.searchResult button,.search-result button,.database-food button{color:#06251a;cursor:pointer;background:#34d399;border:none;border-radius:8px;padding:8px 12px;font-weight:700}@media (width<=800px){.counter{width:min(94%,650px);padding-top:25px}.input-container{grid-template-columns:1fr}.macrosCounterContainer{grid-template-columns:repeat(2,1fr)}}@media (width<=450px){.app-title{margin-bottom:25px;font-size:2rem}.macrosForm{padding:18px}.macrosCounterContainer{gap:8px}.macrosCounterContainer span{padding:14px 8px;font-size:.85rem}.searchResult,.search-result,.database-food{flex-direction:column;align-items:stretch}.searchResult button,.search-result button,.database-food button{width:100%}}.food-row{background:#1b202bf2;border:1px solid #303849;border-radius:14px;grid-template-columns:1.5fr 1fr auto;align-items:center;gap:16px;padding:16px 18px;transition:transform .2s,border-color .2s,background .2s;display:grid;box-shadow:0 8px 24px #0003}.food-row:hover{background:#1f2531fa;border-color:#46536a;transform:translateY(-2px)}.food-main{flex-direction:column;gap:5px;display:flex}.food-name{color:#fff;overflow-wrap:anywhere;font-size:1.05rem;font-weight:700}.food-main>span{color:#fbbf24;font-size:.9rem;font-weight:600}.food-macros{align-items:center;gap:8px;display:flex}.food-macros span{white-space:nowrap;background:#151b25;border:1px solid #303849;border-radius:7px;padding:6px 9px;font-size:.82rem;font-weight:700}.food-macros span:first-child{color:#6ee7b7}.food-macros span:nth-child(2){color:#60a5fa}.food-macros span:nth-child(3){color:#f472b6}.food-actions{align-items:center;gap:8px;display:flex}.food-actions button{cursor:pointer;border:none;border-radius:8px;padding:8px 12px;font-size:.85rem;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s}.food-actions button:hover{transform:translateY(-2px)}.edit-food-btn{color:#93c5fd;background:#3b82f626;border:1px solid #60a5fa59!important}.edit-food-btn:hover{background:#3b82f647;box-shadow:0 6px 18px #3b82f624}.delete-food-btn{color:#fca5a5;background:#ef444426;border:1px solid #f8717159!important}.delete-food-btn:hover{background:#ef444447;box-shadow:0 6px 18px #ef444424}.food-row>input{color:#fff;background:#121720;border:1px solid #394355;border-radius:9px;outline:none;grid-column:1/3;width:100%;padding:11px 13px;transition:border-color .2s,box-shadow .2s}.food-row>input::placeholder{color:#7f899b}.food-row>input:focus{border-color:#6ee7b7;box-shadow:0 0 0 3px #6ee7b71f}.food-row>button{color:#06251a;cursor:pointer;background:#34d399;border:none;border-radius:9px;padding:11px 14px;font-weight:800;transition:transform .2s,filter .2s,box-shadow .2s}.food-row>button:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 8px 20px #34d39933}@media (width<=900px){.food-row{grid-template-columns:1fr auto}.food-macros{grid-column:1/-1}.food-actions{grid-area:1/2}.food-row>input{grid-column:1}.food-row>button{grid-column:2}}@media (width<=550px){.food-row{grid-template-columns:1fr;gap:12px;padding:15px}.food-main,.food-macros,.food-actions,.food-row>input,.food-row>button{grid-area:auto/1}.food-macros{grid-template-columns:repeat(3,1fr);display:grid}.food-macros span{text-align:center}.food-actions{width:100%}.food-actions button{flex:1}.food-row>button{width:100%}}.foodsDataBase{background:#2a3955fa;border:1px solid #303849;border-radius:18px;width:min(900px,100%);margin:20px auto 0;padding:24px;box-shadow:0 20px 50px #0006,inset 0 1px #ffffff08}.foodsDataBase>.activateSearch{color:#fca5a5;background:#ef44441f;border:1px solid #f871714d;margin:0 0 20px auto}.foodsDataBase>.activateSearch:hover{background:#ef444438;border-color:#f87171}.search-input{color:#fff;background:#10151d;border:1px solid #394355;border-radius:11px;outline:none;width:100%;margin-bottom:20px;padding:14px 16px;font-size:1rem;transition:border-color .2s,box-shadow .2s,background .2s}.search-input::placeholder{color:#778196}.search-input:focus{background:#151b25;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1f}.foodsDataBase .macrosForm{box-shadow:none;background:#171d27;border:1px solid #303849;border-radius:14px;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:25px;padding:20px;display:grid}.foodsDataBase .macrosForm input{color:#fff;background:#10151d;border:1px solid #343e50;border-radius:9px;outline:none;padding:12px 14px}.foodsDataBase .macrosForm input:first-child{grid-column:1/-1}.foodsDataBase .macrosForm input:focus{border-color:#6ee7b7;box-shadow:0 0 0 3px #6ee7b71a}.foodsDataBase .macrosForm button{color:#06251a;cursor:pointer;background:linear-gradient(135deg,#6ee7b7,#34d399);border:none;border-radius:9px;grid-column:1/-1;padding:13px;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s}.foodsDataBase .macrosForm button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 10px 25px #34d39933}.FoodsDataContainer{flex-direction:column;gap:12px;max-height:500px;padding-right:5px;display:flex;overflow-y:auto}.FoodsDataContainer::-webkit-scrollbar{width:7px}.FoodsDataContainer::-webkit-scrollbar-track{background:#11161e;border-radius:10px}.FoodsDataContainer::-webkit-scrollbar-thumb{background:#3c4658;border-radius:10px}.FoodsDataContainer::-webkit-scrollbar-thumb:hover{background:#566279}.foodsDataBase .food-row{background:#171d27;border:1px solid #303849;border-radius:12px;grid-template-columns:minmax(140px,1.3fr) minmax(180px,1fr) auto;align-items:center;gap:15px;padding:16px;transition:transform .2s,border-color .2s,background .2s;display:grid}.foodsDataBase .food-row:hover{background:#1b222e;border-color:#46536a;transform:translateY(-2px)}.foodsDataBase .food-main{flex-direction:column;gap:5px;display:flex}.foodsDataBase .food-name{color:#fff;font-size:1rem}.foodsDataBase .food-main>span{color:#fbbf24}.foodsDataBase .food-macros{gap:7px;display:flex}.foodsDataBase .food-macros span{background:#10151d;border:1px solid #303849;border-radius:7px;padding:6px 8px;font-size:.78rem;font-weight:700}.foodsDataBase .food-macros span:first-child{color:#6ee7b7}.foodsDataBase .food-macros span:nth-child(2){color:#60a5fa}.foodsDataBase .food-macros span:nth-child(3){color:#f472b6}.foodsDataBase .food-actions{gap:7px;display:flex}.foodsDataBase .edit-food-btn,.foodsDataBase .delete-food-btn{cursor:pointer;border-radius:7px;padding:7px 10px;font-size:.8rem;font-weight:700}.foodsDataBase .food-row>input{color:#fff;background:#10151d;border:1px solid #394355;border-radius:8px;outline:none;grid-column:1/3;width:100%;padding:11px 13px}.foodsDataBase .food-row>input:focus{border-color:#34d399;box-shadow:0 0 0 3px #34d3991a}.foodsDataBase .food-row>button{color:#06251a;cursor:pointer;background:#34d399;border:none;border-radius:8px;padding:11px 14px;font-weight:800;transition:transform .2s,filter .2s,box-shadow .2s}.foodsDataBase .food-row>button:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 8px 20px #34d39933}@media (width<=750px){.foodsDataBase{padding:18px}.foodsDataBase .food-row{grid-template-columns:1fr auto}.foodsDataBase .food-macros{grid-column:1/-1}.foodsDataBase .food-row>input{grid-column:1}.foodsDataBase .food-row>button{grid-column:2}}@media (width<=520px){.foodsDataBase{padding:14px}.foodsDataBase .macrosForm{grid-template-columns:1fr;padding:15px}.foodsDataBase .macrosForm input,.foodsDataBase .macrosForm input:first-child,.foodsDataBase .macrosForm button{grid-column:1}.foodsDataBase .food-row{grid-template-columns:1fr}.foodsDataBase .food-main,.foodsDataBase .food-macros,.foodsDataBase .food-actions,.foodsDataBase .food-row>input,.foodsDataBase .food-row>button{grid-column:1}.foodsDataBase .food-macros{grid-template-columns:repeat(3,1fr);display:grid}.foodsDataBase .food-macros span{text-align:center}.foodsDataBase .food-actions{width:100%}.foodsDataBase .food-actions button{flex:1}.foodsDataBase .food-row>button{width:100%}}
