.fullscreen-modal {
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.sticky-header {
    position: sticky;
    top: 0;
    background: var(--bg, #fff);
    z-index: 2;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Hide sticky header only inside recognition modal */
/* Recognition Bottom Sheet */
.recognition-bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.recognition-bottom-sheet.active {
    display: block;
    pointer-events: auto;
}

.recognition-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recognition-bottom-sheet.active .recognition-sheet-backdrop {
    opacity: 1;
}

.recognition-sheet-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--modal-bg, #ffffff);
    border-radius: 20px 20px 0 0;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    overflow: hidden;
}

.recognition-bottom-sheet.active .recognition-sheet-container {
    transform: translateY(0);
}

/* Auto height modes */
.recognition-sheet-container.with-photo {
    height: 95vh;
}

.recognition-sheet-container.without-photo {
    height: auto;
    max-height: 75vh;
}

.recognition-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--text-secondary, #8e8e93);
    opacity: 0.3;
    border-radius: 2px;
    margin: 12px auto 8px;
    cursor: grab;
    flex-shrink: 0;
}

.recognition-sheet-close {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary, #8e8e93);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
    padding: 0;
    z-index: 10;
}

.recognition-sheet-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.recognition-sheet-close:active {
    transform: scale(0.9);
}

.recognition-photo {
    position: relative;
    flex-shrink: 0;
    max-height: 400px;
    overflow: hidden;
    background: #000;
}

.recognition-photo img {
    width: 100%;
    height: auto;
    max-height: 400px;
    display: block;
    object-fit: contain;
}

.recognition-sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

/* Dark Theme для Bottom Sheet */
.dark-theme .recognition-sheet-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.dark-theme .recognition-sheet-container {
    background: var(--modal-bg, #1c1c1e);
}

.dark-theme .recognition-sheet-close {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.dark-theme .recognition-sheet-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.recognition-details {
    padding: 16px;
}
.details-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.details-line.title-line {
    align-items: baseline;
    gap: 12px;
}
.recognized-title {
    font-size: 18px;
    font-weight: 600;
}
.recognized-serving {
    opacity: 0.7;
}
.details-line.top-line {
    gap: 8px;
}
.details-line.top-line .calories-meal {
    display: flex;
    align-items: center;
    gap: 6px;
}
.details-line.top-line .recognized-time {
    margin-left: auto;
    opacity: 0.8;
}
.details-line.top-line .value {
    font-weight: 600;
}
.details-line.top-line .dot {
    opacity: 0.6;
}
.macros-line {
    width: 100%;
    gap: 8px;
    justify-content: space-between !important;
}
.macros-line .macro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--modal-chip-bg, rgba(0, 0, 0, 0.04));
    flex: 0 1 auto;
    min-width: 0;
}
.macros-line .macro .label {
    font-weight: 600;
    white-space: nowrap;
}
.macros-line .macro .value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.macros-line .macro-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.macros-line .macro-bottom {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.macros-line .macro .unit {
    opacity: 0.7;
}
.macros-line .macro.protein i {
    color: #5a9cff;
}
.macros-line .macro.fat i {
    color: #fc8e2c;
}
.macros-line .macro .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.macros-line .macro.protein {
    grid-template-columns: auto auto;
    justify-items: center;
    align-items: center;
    text-align: center;
}
.macros-line .macro.carb i {
    color: #10b981;
}

/* iOS-like secondary button for fallback edit */
.recognition-actions .ios-secondary {
    background: transparent;
    color: var(--accent, #0a84ff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.recognition-actions .ios-secondary:active {
    background: rgba(0, 0, 0, 0.06);
}

/* subtle pills for time and serving */
.pill {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.favorite-recognition-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #ff2d55;
}
.composition {
    margin-top: 8px;
}
.composition-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0;
    color: var(--text-color, #1d1d1f);
    cursor: pointer;
}

.composition-toggle:hover {
    opacity: 0.7;
}
.ingredients-simple {
    opacity: 0.9;
    font-size: 14px;
    line-height: 1.4;
}
.ingredients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ingredients-list .ingredient-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ingredient-chip .ingredient-name {
    display: inline-block;
}

.ingredient-chip .ingredient-delete-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 59, 48, 0.8);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.ingredient-chip .ingredient-delete-btn:hover {
    background: rgba(255, 59, 48, 0.1);
    color: rgb(255, 59, 48);
}

.ingredient-chip .ingredient-delete-btn i {
    font-size: 14px;
}

.food-log-item {
    cursor: pointer;
    transition: background 0.2s ease;
}

.food-log-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.food-log-item:active {
    background: rgba(0, 0, 0, 0.05);
}

/* Delete button style for food detail modal */
.ios-destructive {
    background: linear-gradient(180deg, #ff453a 0%, #ff3b30 100%) !important;
    border: none !important;
    color: white !important;
}

.ios-destructive:hover {
    background: linear-gradient(180deg, #ff3b30 0%, #ff2d22 100%) !important;
}
.recognition-photo.limited {
    max-height: 300px;
    overflow: hidden;
}
.recognition-photo.expandable {
    cursor: pointer;
}
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%,
    to {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.2);
    }
}

@keyframes modalAppear {
    0% {
        transform: scale(0.94);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.content,
body {
    height: 100vh;
    margin: 0;
    border-radius: 0;
    background: var(--content-bg);
}

.details-center,
.details-left,
.details-right,
.frame-313,
.frame-315,
.icon,
.title,
body {
    display: flex;
}

.form-group input[type='date'],
.form-group input[type='number'],
.form-group input[type='text'],
.form-group select,
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial,
        sans-serif;
}

.allergen-tag span,
.div10,
.food-item-name,
.food-log-name {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calories-bg,
.calories-progress-path {
    stroke-linecap: round;
    shape-rendering: geometricPrecision;
}

.action-sheet-header,
.calendar-weekdays,
.calories-text,
.div,
.gift-app,
.mini-app,
.no-food-items {
    text-align: center;
}

*,
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.content {
    /* border-radius: 20px; */
    /* width: 393px; */
    position: relative;
    overflow-y: auto;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0; /* Mini-app chrome provides rounded corners if needed */
}

/* Full-width inside Telegram Mini App and on large mobile screens */
/* body.tg-mini-app .content {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0; /* Mini-app chrome provides rounded corners if needed */
/* } */

/* @media (min-width: 420px) and (max-width: 1024px) {
    body.tg-mini-app .content,
    .content.mobile-full {
        width: 100vw;
        max-width: 100vw;
    }
} */

.header-mini-app-close {
    background: #fff;
    padding: 6px 0;
    height: 56px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.details-master {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
}

.details-left {
    flex: 1;
    align-items: center;
}

.close {
    color: #007aff;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

.calories-value,
.div,
.div10,
.div9,
.gift-app {
    font-weight: 600;
}

.details-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
}

.details-center,
.title {
    align-items: center;
}

.gift-app {
    color: #000;
    font-size: 18px;
}

.mini-app {
    color: #8e8e93;
    font-size: 14px;
    margin-top: -3px;
}

.details-right {
    flex: 1;
    justify-content: flex-end;
}

.frame-313,
.icon {
    padding: 8px;
    align-items: center;
}

.frame-313 {
    padding: 20px 15px;
    flex-direction: column;
    gap: 10px;
}

.frame-315 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    width: 100%;
    height: 60px;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

#calories-marker,
.calories-marker {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.div {
    color: var(--text-color);
    font-size: 18px;
    letter-spacing: -0.5px;
}

.bx,
.ph {
    font-size: 26px;
    color: #737376;
}

.ri {
    font-size: 24px;
    color: #1d1d1f;
}

#input-mode-control input[type='radio'],
#unit-mode-control input[type='radio'],
.allergen-chip input[type='checkbox'],
.hidden-container,
.manual-input-container,
.modal-overlay#favoritesModal .modal-content.hidden,
.report-icon,
.segmented-control input[type='radio'],
.settings-icon {
    display: none;
}

.calendar-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: 0.2s;
}

.calendar-icon .ri {
    font-size: 24px;
    color: #8e8e93;
}

.calendar-icon:hover .ri,
.delete-food-btn:hover,
.edit-food-btn:hover,
.report-icon:hover .ri,
.settings-icon:hover .ri {
    color: #1d1d1f;
}

.calendar-icon:active,
.report-icon:active,
.settings-icon:active {
    transform: translateY(-50%) scale(0.95);
}

.frame-301 {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.calories-progress-container {
    width: 260px;
    height: 130px;
    position: relative;
    overflow: hidden;
}

.calories-progress,
.calories-progress-bg {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.calories-progress-bg {
    position: absolute;
    border: 22px solid #b2dbff;
    clip-path: polygon(0 0, 100%0, 100% 50%, 0 50%);
}

.calories-progress {
    position: absolute;
    border: 22px solid #4998f4;
    transform-origin: center center;
    clip-path: polygon(50%0, 50%0, 50% 50%, 50% 50%);
    transition: clip-path 0.5s;
}

.calories-marker {
    background: #fff;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    position: absolute;
    top: 22px;
    left: 130px;
    transform-origin: center 108px;
    transform: rotate(0) translateY(-108px);
    z-index: 2;
    transition: transform 0.5s;
}

.action-sheet-button:hover,
.action-sheet-cancel:hover,
.allergen-suggestion:hover,
.calendar-close:hover,
.calendar-day:hover,
.calendar-today:hover,
.close-modal:hover,
.nutrient-progress {
    background-color: rgba(0, 0, 0, 0.05);
}

.calories-text {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.calories-value {
    color: #1d1d1f;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calories-icon {
    margin-left: 8px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(255, 165, 0, 0.3));
    color: #ff5722;
    font-size: 24px;
}

.calories-goal {
    color: #86868b;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.calendar-month,
.div10,
.div9,
.settings-section h4 {
    letter-spacing: -0.5px;
}

.nutrient-progress {
    position: relative;
    width: 75px;
    height: 10px;
    border-radius: 5px;
    margin: 8px 0;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nutrient-progress-bar {
    height: 10px;
    border-radius: 5px;
    transition: width 0.5s;
}

.protein-bar {
    background: linear-gradient(90deg, #34c759, #4cd964);
    box-shadow: 0 1px 3px rgba(52, 199, 89, 0.3);
}

.fat-bar {
    background: linear-gradient(90deg, #ff9500, #fc0);
    box-shadow: 0 1px 3px rgba(255, 149, 0, 0.3);
}

.carb-bar {
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3);
}

.div3 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 0 20px;
    margin-top: 30px;
}

.div4,
.div6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85px;
}

.div5,
.div7,
.div8 {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

._45-70-g,
._78-90-g,
._95-110-g {
    color: #878488;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.frame-317 {
    background: #fff;
    border-radius: 12px;
    padding: 21px 14px;
    width: 100%;
    box-shadow: 3px 3px 15px 1px rgba(0, 0, 0, 0.08);
    margin-bottom: 100px;
}

.div9 {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #1d1d1f;
    margin-bottom: 10px;
}

.frame-326,
.frame-327,
.frame-328,
.frame-329-snack {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    min-height: 85px;
    position: relative;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: 'icon title calories' 'icon nutrients nutrients';
    align-items: start;
    padding: 14px;
    gap: 5px 8px;
    transition: 0.3s;
    overflow: hidden;
}

.frame-326:hover,
.frame-327:hover,
.frame-328:hover,
.frame-329-snack:hover {
    transform: translateY(-3px);
}

.frame-326 {
    border: 1px solid rgba(255, 157, 0, 0.1);
    box-shadow: 0 2px 10px rgba(255, 157, 0, 0.05);
}

.frame-327 {
    border: 1px solid rgba(255, 204, 0, 0.2);
    box-shadow: 0 2px 10px rgba(255, 204, 0, 0.08);
}

.frame-328 {
    border: 1px solid rgba(107, 124, 255, 0.1);
    box-shadow: 0 2px 10px rgba(107, 124, 255, 0.05);
}

.frame-329-snack {
    border: 1px solid rgba(80, 200, 120, 0.1);
    box-shadow: 0 2px 10px rgba(80, 200, 120, 0.05);
}

.frame-326:hover {
    box-shadow: 0 6px 15px rgba(255, 157, 0, 0.1);
}

.frame-327:hover {
    box-shadow: 0 6px 15px rgba(255, 204, 0, 0.15);
}

.frame-328:hover {
    box-shadow: 0 6px 15px rgba(107, 124, 255, 0.1);
}

.frame-329-snack:hover {
    box-shadow: 0 6px 15px rgba(80, 200, 120, 0.1);
}

.frame-326.active,
.frame-327.active,
.frame-328.active,
.frame-329-snack.active {
    border-width: 2px;
}

.frame-326.active {
    border-color: rgba(255, 157, 0, 0.3);
}

.frame-327.active {
    border-color: rgba(255, 204, 0, 0.4);
}

.frame-328.active {
    border-color: rgba(107, 124, 255, 0.3);
}

.frame-329-snack.active {
    border-color: rgba(80, 200, 120, 0.3);
}

.frame-3262 {
    grid-area: icon;
}

.frame-326:hover .frame-3262,
.frame-327:hover .frame-3262,
.frame-328:hover .frame-3262,
.frame-329-snack:hover .frame-3262,
.theme-toggle:hover {
    transform: scale(1.1);
}

.div10 {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    grid-area: title;
    font-size: 17px;
    margin-top: 0;
    padding-top: 2px;
    overflow: hidden;
}

._576 {
    grid-area: calories;
    background-color: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    font-size: 14px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 20px;
    white-space: nowrap;
}

.frame-329 {
    grid-area: nutrients;
    display: flex;
    gap: 6px;
    margin-top: 0;
    flex-wrap: wrap;
}

.food-form,
.food-list {
    width: 100%;
    margin-top: 15px;
}

.submit-btn {
    background-color: #67bd6e;
    color: #fff;
    border: 0;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    width: 100%;
}

.food-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: 'name quantity calories';
    padding: 10px 70px 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 4px;
    align-items: center;
    min-height: 44px;
}

.food-item:last-child {
    border-bottom: none;
}

.food-item-name {
    grid-area: name;
    font-weight: 500;
    font-size: 16px;
    overflow: hidden;
    max-width: 150px;
}

.food-item-quantity {
    grid-area: quantity;
    color: #8e8e93;
    font-size: 14px;
    margin-right: 8px;
    white-space: nowrap;
}

.food-item-calories {
    grid-area: calories;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.03);
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.food-item {
    position: relative;
    padding-right: 60px;
}

.food-item-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    margin-top: 0;
}

.delete-food-btn,
.edit-food-btn {
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8e8e93;
    transition: color 0.2s;
}

.no-food-items {
    color: #8e8e93;
    padding: 15px 0;
    font-size: 15px;
}

.add-food-btn {
    gap: 6px;
    color: #007aff;
    font-weight: 500;
    font-size: 15px;
}

.action-sheet.active .action-sheet-container,
.add-food-btn:active,
.disable-auto-payment-btn:active,
.manage-subscription-btn:active,
.modal-overlay#favoritesModal.active .modal-content {
    transform: translateY(0);
}

.add-food-btn svg {
    transition: transform 0.2s;
}

.add-food-btn:hover svg {
    transform: rotate(90deg);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.close-modal,
.delete-btn,
.save-btn {
    transition: background-color 0.2s;
    cursor: pointer;
}

.calendar-modal.active,
.modal-overlay.active,
.neuro-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--modal-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: 0.3s forwards modalAppear;
}

.calendar-modal.active .calendar-container,
.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.form-group label,
.get-neuro-btn {
    font-weight: 500;
}

.close-modal {
    background: 0 0;
    border: 0;
    color: #8e8e93;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.meal-add-modal .modal-body,
.modal-body {
    padding: 16px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 16px;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group input[type='date']:focus,
.form-group input[type='number']:focus,
.form-group input[type='text']:focus,
.form-group select:focus {
    outline: 0;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.delete-btn,
.save-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: 0;
    font-weight: 500;
    font-size: 15px;
}

.save-btn {
    background-color: #007aff;
    color: #fff;
}

.save-btn:hover {
    background-color: #06c;
}

.delete-btn {
    background-color: #ff3b30;
    color: #fff;
}

.delete-btn:hover {
    background-color: #d9322a;
}

._12,
._23,
._30 {
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.03);
    padding: 3px 7px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    margin-top: 2px;
}

._23 {
    color: #34c759;
}

._12 {
    color: #ff9500;
}

._30,
.calendar-today {
    color: #007aff;
}

.frame-326 ._576 {
    background-color: rgba(255, 157, 0, 0.1);
    color: #ff9d00;
}

.frame-327 ._576 {
    background-color: rgba(255, 204, 0, 0.1);
    color: #fc0;
}

.frame-328 ._576 {
    background-color: rgba(107, 124, 255, 0.1);
    color: #6b7cff;
}

.frame-329-snack ._576 {
    background-color: rgba(80, 200, 120, 0.1);
    color: #50c878;
}

.meal-details {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    margin-top: 6px;
    padding: 14px;
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.meal-details.active {
    display: block;
    animation: 0.3s forwards slideDown;
}

.calories-svg {
    position: relative;
    z-index: 1;
    height: 140px;
    width: 240px;
}

.frame-3262,
.neuro-icon {
    height: 44px;
    margin-right: 15px;
}

.calories-progress-path {
    transition: stroke-dashoffset 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#calories-marker {
    filter: none;
    transition: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    color: #fff;
    z-index: 1000;
    transform: translateY(-20px);
}

.notification.auth-expired {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.notification.auth-expired .notification-icon {
    align-self: center;
}

.auth-warning,
.notification.auth-expired .notification-text {
    text-align: center;
}

.notification.auth-expired .manage-subscription-btn {
    width: 100%;
}

.auth-warning .warning-icon {
    margin: 0 auto 12px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-warning .warning-icon i {
    font-size: 28px;
    color: #f59e0b;
}

.clicked {
    animation: 0.3s pulse;
}

.breakfast-icon .ri,
.dinner-icon .ri,
.lunch-icon .ri,
.snack-icon .ri {
    -webkit-text-fill-color: transparent;
    font-size: 25px;
    display: block;
}

.breakfast-icon .ri {
    color: #ff9d00;
    background: linear-gradient(135deg, #ffdb58, #ff7e00);
}

.breakfast-icon .ri,
.dinner-icon .ri,
.lunch-icon .ri,
.snack-icon .ri {
    -webkit-background-clip: text;
    background-clip: text;
}

.lunch-icon .ri {
    color: #fc0;
    background: linear-gradient(135deg, #fc0, #ff9500);
}

.dinner-icon .ri {
    color: #6b7cff;
    background: linear-gradient(135deg, #a18cd1, #6b7cff);
}

.snack-icon .ri {
    color: #50c878;
    background: linear-gradient(135deg, #7bed9f, #2ed573);
}

.frame-3262 {
    border-radius: 12px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.breakfast-icon {
    background: rgba(255, 157, 0, 0.1);
    border: 1px solid rgba(255, 157, 0, 0.2);
}

.lunch-icon {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.25);
}

.dinner-icon {
    background: rgba(107, 124, 255, 0.1);
    border: 1px solid rgba(107, 124, 255, 0.2);
}

.snack-icon {
    background: rgba(80, 200, 120, 0.1);
    border: 1px solid rgba(80, 200, 120, 0.2);
}

.frame-326:hover .breakfast-icon,
.frame-327:hover .lunch-icon,
.frame-329-snack:hover .snack-icon,
.frame-328:hover .dinner-icon,
.neuro-header:hover .neuro-icon {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.meal-container,
.neuro-container {
    width: 100%;
    margin-bottom: 15px;
}

.meal-header {
    cursor: pointer;
    position: relative;
}

.expand-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
    color: #8e8e93;
    z-index: 2;
}

.report-icon-calories,
.subscription-icon-calories {
    justify-content: center;
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.expand-icon svg {
    width: 19px;
    height: 19px;
}

.meal-header.active .expand-icon {
    transform: translateY(-50%) rotate(180deg);
}

.report-icon-calories {
    left: -10px;
    -webkit-backdrop-filter: blur(10px);
}

.subscription-icon-calories {
    right: -10px;
    top: 65px !important;
    -webkit-backdrop-filter: blur(10px);
}

.neuro-header,
.settings-icon-calories {
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.settings-icon-calories {
    right: -10px;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
}

.neuro-header,
.neuro-icon {
    align-items: center;
    transition: 0.3s;
}

.calendar-container,
.main-menu-button:active,
.report-icon-calories:active,
.settings-icon-calories:active,
.subscription-icon-calories:active {
    transform: scale(0.95);
}

.neuro-header {
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    min-height: 82px;
    position: relative;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: 'icon title expand';
    padding: 12px;
    gap: 5px 8px;
    overflow: hidden;
}

.calendar-modal,
.neuro-modal {
    position: fixed;
    opacity: 0;
    visibility: hidden;
}

.neuro-icon {
    grid-area: icon;
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    width: 44px;
    display: flex;
    justify-content: center;
}

.neuro-icon .ri {
    font-size: 25px;
    color: #8a2be2;
}

.neuro-header:hover {
    box-shadow: 0 6px 15px rgba(138, 43, 226, 0.1);
}

.neuro-header.active {
    border-color: rgba(138, 43, 226, 0.3);
}

.neuro-details {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    margin-top: 6px;
    padding: 12px;
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.action-sheet.active,
.neuro-details.active {
    display: block;
}

.calendar-modal,
.get-neuro-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.get-neuro-btn {
    gap: 6px;
    padding: 10px;
    background-color: rgba(138, 43, 226, 0.1);
    color: #8a2be2;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.2s;
}

.get-neuro-btn:hover {
    background-color: rgba(138, 43, 226, 0.15);
}

.get-neuro-btn:active,
.meal-type-btn:active {
    transform: scale(0.98);
}

.calendar-modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
}

.calendar-container {
    border-radius: 16px;
    width: 340px;
    max-width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.3s;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.calendar-day,
.calendar-nav {
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.calendar-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
}

.calendar-month {
    font-size: 19px;
    color: #1d1d1f;
}

.calendar-year {
    font-size: 15px;
    color: #8e8e93;
    margin-top: -2px;
}

.calendar-nav {
    background: 0 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007aff;
    transition: background-color 0.2s;
}

.calendar-days,
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-nav:hover,
.edit-log-btn:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.calendar-nav:active {
    background-color: rgba(0, 122, 255, 0.2);
}

.calendar-weekdays {
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.calendar-days {
    padding: 10px;
    gap: 8px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    color: #1d1d1f;
    transition: 0.2s;
    position: relative;
    margin: 0 auto;
}

.calendar-day.today {
    background-color: #007aff;
    color: #fff;
    font-weight: 600;
}

.calendar-day.selected {
    background-color: rgba(0, 122, 255, 0.2);
    color: #007aff;
    font-weight: 600;
}

.calendar-day.other-month {
    color: #c7c7cc;
}

.calendar-day.today.has-data::after,
.calendar-day.today.has-food::after {
    background-color: #fff;
}

.calendar-footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.calendar-close,
.calendar-today {
    background: 0 0;
    border: 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-close,
.dark-theme .calendar-day.other-month {
    color: #8e8e93;
}

.calendar-close:active,
.calendar-today:active,
.next-day-arrow:hover,
.prev-day-arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.settings-modal {
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section h4 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.form-group,
.neuro-content p {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 15px;
    color: #8e8e93;
    margin-bottom: 6px;
}

.form-group input[type='date'],
.form-group input[type='number'],
.form-group input[type='text'] {
    background-color: var(--input-bg);
    color: var(--text-color);
}

.form-group input[type='date'],
.form-group input[type='number'],
.form-group input[type='text'],
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 17px;
    transition: 0.2s;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.allergen-chip label,
.segmented-control label {
    color: #8e8e93;
    transition: 0.2s;
    margin: 0;
    cursor: pointer;
}

.segmented-control {
    display: flex;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
}

.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 12px;
    z-index: 1;
    font-weight: 500;
}

.segmented-control input[type='radio']:checked + label {
    color: #007aff;
    font-weight: 600;
}

.segmented-control::before {
    content: none;
}

.segmented-control input[type='radio']:nth-of-type(2):checked ~ ::before {
    transform: none;
}

.segment-background {
    position: absolute;
    height: calc(100% - 4px);
    background-color: #fff;
    border-radius: 8px;
    top: 2px;
    left: 2px;
    transition: transform 0.3s, width 0.3s;
    z-index: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.allergens-group {
    margin-top: 12px;
}

.allergen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.allergen-chip,
.calendar-day.has-food {
    position: relative;
}

.allergen-chip label {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    font-size: 15px;
}

.allergen-chip input[type='checkbox']:checked + label {
    background-color: rgba(0, 122, 255, 0.1);
    color: #007aff;
    font-weight: 500;
}

.allergen-input-container {
    position: relative;
    margin-bottom: 8px;
}

.allergen-input-container input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--input-bg);
    font-size: 17px;
    color: var(--text-color);
    transition: 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.allergen-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.allergen-tag,
.remove-allergen {
    align-items: center;
    color: #007aff;
}

.allergen-tag {
    display: inline-flex;
    background-color: rgba(0, 122, 255, 0.1);
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 500;
    max-width: 100%;
}

.allergen-tag span {
    overflow: hidden;
}

.remove-allergen {
    background: 0 0;
    border: 0;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.allergen-suggestions {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.allergen-suggestion {
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.neuro-modal,
.neuro-modal-content {
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#input-mode-control label,
#unit-mode-control label,
.close-btn {
    transition: color 0.2s;
    cursor: pointer;
}

.allergen-suggestion.active {
    background-color: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.loading-spinner {
    margin: 30px auto;
    border-top: 4px solid #007aff;
}

.loading-text {
    color: #efefef;
    margin-bottom: 30px;
}

.neuro-modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.calendar-day.has-food::after,
.main-menu {
    left: 50%;
    transform: translateX(-50%);
}

.main-menu,
.theme-toggle {
    bottom: 20px;
    z-index: 100;
    position: fixed;
}

/* Quick action buttons around main menu */
.quick-action-btn {
    position: fixed;
    bottom: 20px;
    z-index: 99;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #007aff;
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    color: white;
}

.quick-action-btn:hover {
    background: rgba(0, 122, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.quick-action-btn:active {
    transform: scale(0.95);
}

.quick-action-btn i {
    font-size: 22px;
    color: white;
}

.photo-quick-btn {
    left: calc(50% - 130px);
}

.barcode-quick-btn {
    right: calc(50% - 130px);
}

/* Secondary button style for settings */
.secondary-btn {
    padding: 12px 24px;
    background: transparent;
    color: #007aff;
    border: 1.5px solid #007aff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.secondary-btn:hover {
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
}

.secondary-btn i {
    font-size: 18px;
}

/* Адаптация для маленьких экранов */
@media (max-width: 400px) {
    .photo-quick-btn {
        left: calc(50% - 130px);
    }

    .barcode-quick-btn {
        right: calc(50% - 130px);
    }

    .quick-action-btn {
        width: 49px;
        height: 49px;
    }

    .quick-action-btn i {
        font-size: 20px;
    }
}

.neuro-modal-content {
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.95) translateY(20px);
}

.neuro-modal.active .neuro-modal-content {
    transform: scale(1) translateY(0);
}

.neuro-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.neuro-modal-header h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: #1d1d1f;
}

.close-btn {
    background: 0 0;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #8e8e93;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-btn:hover {
    color: #1d1d1f;
    background-color: rgba(0, 0, 0, 0.05);
}

.neuro-content {
    padding: 24px;
    line-height: 1.6;
    color: #1d1d1f;
    font-size: 17px;
}

.neuro-content ul {
    margin-bottom: 16px;
    padding-left: 20px;
}

.neuro-content li {
    margin-bottom: 8px;
}

.neuro-modal-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
}

.cancel-btn {
    background: #007aff;
    border: 0;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    transition: 0.2s;
}

.date-label,
.delete-log-btn,
.edit-log-btn,
.food-log-item,
.next-day-arrow,
.prev-day-arrow {
    transition: background-color 0.2s;
}

.cancel-btn:hover {
    background-color: #0071e3;
    transform: translateY(-1px);
}

.date-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 220px;
}

.next-day-arrow,
.prev-day-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
}

.next-day-arrow i,
.prev-day-arrow i {
    font-size: 24px;
    color: var(--text-color);
    line-height: 1;
}

.date-display {
    margin: 0 8px;
    font-weight: 600;
    font-size: 15px;
    color: #1d1d1f;
    letter-spacing: 0.5px;
}

.date-label {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
}

.date-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.food-log-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.food-log-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.food-log-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.food-log-row-title {
    margin-bottom: 4px;
}

.food-log-name {
    font-weight: 500;
    font-size: 16px;
    color: #1d1d1f;
    overflow: hidden;
}

.food-log-quantity {
    font-size: 14px;
    color: #8e8e93;
}

.add-food-btn,
.delete-log-btn,
.edit-log-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.food-log-calories {
    font-weight: 500;
    font-size: 16px;
    color: #007aff;
}

.food-log-actions {
    display: flex;
    gap: 8px;
}

.delete-log-btn,
.edit-log-btn,
.favorite-log-btn {
    background: 0 0;
    border: 0;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    justify-content: center;
}

.favorite-log-btn i {
    color: #ff2d55;
    font-size: 19px;
}

.delete-log-btn:hover {
    background-color: rgba(255, 59, 48, 0.1);
}

.edit-log-btn i {
    color: #007aff;
    font-size: 19px;
}

.delete-log-btn i {
    color: #ff3b30;
    font-size: 19px;
}

.add-food-btn {
    justify-content: center;
    padding: 12px;
    margin: 12px 16px;
    background-color: rgba(0, 122, 255, 0.1);
    border-radius: 12px;
    transition: 0.2s;
}

.main-menu-button,
.theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

.add-food-btn:hover {
    background-color: rgba(0, 122, 255, 0.15);
    transform: translateY(-1px);
}

.add-food-btn i {
    color: #007aff;
    font-size: 21px;
    margin-right: 8px;
}

.add-food-btn span {
    color: #007aff;
    font-weight: 500;
    font-size: 16px;
}

:root {
    --bg-color: #f5f5f7;
    --content-bg: #ffffff;
    --text-color: #1d1d1f;
    --text-secondary: #8e8e93;
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    --calories-bg: #b2dbff;
    --calories-progress: #4998f4;
    --protein-color: #34c759;
    --fat-color: #ff9500;
    --carb-color: #007aff;
    --breakfast-color: #ff9d00;
    --lunch-color: #ffcc00;
    --dinner-color: #6b7cff;
    --snack-color: #50c878;
    --neuro-color: #8a2be2;
    --modal-bg: rgba(255, 255, 255, 0.95);
    --input-bg: rgba(0, 0, 0, 0.02);
    --notification-success: rgba(52, 199, 89, 0.9);
    --notification-error: rgba(255, 59, 48, 0.9);
}

.dark-theme {
    --bg-color: #1c1c1e;
    --content-bg: #2c2c2e;
    --text-color: #ffffff;
    --text-secondary: #aeaeb2;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-bg: rgba(44, 44, 46, 0.8);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    --calories-bg: #3a3a3c;
    --calories-progress: #0a84ff;
    --protein-color: #30d158;
    --fat-color: #ff9f0a;
    --carb-color: #0a84ff;
    --breakfast-color: #ff9f0a;
    --lunch-color: #ffd60a;
    --dinner-color: #5e5ce6;
    --snack-color: #2ed573;
    --neuro-color: #bf5af2;
    --modal-bg: rgba(44, 44, 46, 0.95);
    --input-bg: rgba(255, 255, 255, 0.05);
    --notification-success: rgba(48, 209, 88, 0.9);
    --notification-error: rgba(255, 69, 58, 0.9);
}

.frame-315,
.frame-326,
.frame-327,
.frame-328,
.frame-329-snack,
.neuro-header {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.calories-bg {
    stroke: var(--calories-bg);
}

.calories-progress-path {
    stroke: var(--calories-progress);
}

.dark-theme .ai-detected-food .detected-content h4,
.div10,
.div5,
.div7,
.div8,
.div9,
.theme-toggle i {
    color: var(--text-color);
}

._12,
._23,
._30,
._45-70-g,
._78-90-g,
._95-110-g {
    color: var(--text-secondary);
}

.theme-toggle {
    right: 20px;
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background-color: var(--content-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
    justify-content: center;
}

.theme-toggle i {
    font-size: 21px;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.calendar-container,
.modal-content,
.neuro-modal-content {
    background-color: var(--modal-bg);
    color: var(--text-color);
}

.form-group input,
.form-group select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.notification.error {
    background-color: var(--notification-error);
}

#editModal #edit-unit-mode-control input[type='radio']:checked + label,
#input-mode-control input[type='radio']:checked + label,
#unit-mode-control input[type='radio']:checked + label,
.dark-theme .action-sheet-header h3,
.dark-theme .calendar-day,
.dark-theme .calendar-month,
.dark-theme .calories-value,
.dark-theme .date-display,
.dark-theme .date-label,
.dark-theme .food-log-name,
.dark-theme .modal-header h3,
.dark-theme .neuro-content,
.dark-theme .neuro-modal-header h3,
.dark-theme .report-icon-calories i,
.dark-theme .settings-icon-calories i,
.dark-theme .settings-section h4 {
    color: #fff;
}

.dark-theme .calories-goal,
.dark-theme .food-log-quantity {
    color: #aeaeb2;
}

.dark-theme .report-icon-calories,
.dark-theme .settings-icon-calories,
.dark-theme .subscription-icon-calories {
    background: rgba(60, 60, 60, 0.8);
}

.calories-svg {
    background-color: transparent !important;
}

#calories-marker,
.calories-bg,
.calories-progress-path {
    visibility: visible !important;
}

.dark-theme #calories-marker,
.dark-theme .calories-bg,
.dark-theme .calories-progress-path {
    filter: none !important;
}

.dark-theme .frame-317 {
    background: #2c2c2e;
    box-shadow: 3px 3px 15px 1px rgba(0, 0, 0, 0.2);
}

.dark-theme .frame-3262.neuro-icon {
    background: rgba(191, 90, 242, 0.3);
    border: 1px solid rgba(191, 90, 242, 0.4);
}

.dark-theme .frame-3262.neuro-icon i {
    color: #bf5af2;
}

.dark-theme ._23 {
    color: #30d158;
}

.dark-theme ._12 {
    color: #ff9f0a;
}

.dark-theme ._30,
.dark-theme .action-sheet-button,
.dark-theme .food-log-calories {
    color: #0a84ff;
}

.modal-overlay#favoritesModal {
    align-items: flex-end;
    justify-content: stretch;
}

.modal-overlay#favoritesModal .modal-content {
    width: 100%;
    max-width: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay#favoritesModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.modal-overlay#favoritesModal .form-actions {
    padding: 12px 16px 24px;
}

.modal-overlay#favoritesModal .modal-header h3 {
    font-size: 19px;
}

.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--modal-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.favorite-info {
    display: flex;
    flex-direction: column;
}

.favorite-name {
    font-weight: 600;
}

.favorite-macros,
.favorite-weight {
    font-size: 12px;
    color: #8e8e93;
}

.favorite-actions button {
    background: 0 0;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.favorite-actions button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.favorite-actions i {
    font-size: 18px;
}

.hidden {
    display: none;
}

.dark-theme .frame-326 ._576 {
    background-color: rgba(255, 159, 10, 0.2);
    color: #ff9f0a;
}

.dark-theme .frame-327 ._576 {
    background-color: rgba(255, 214, 10, 0.2);
    color: #ffd60a;
}

.dark-theme .frame-328 ._576 {
    background-color: rgba(94, 92, 230, 0.2);
    color: #5e5ce6;
}

.dark-theme .frame-329-snack ._576 {
    background-color: rgba(46, 213, 115, 0.2);
    color: #2ed573;
}

.dark-theme .meal-details,
.dark-theme .neuro-details {
    background: rgba(44, 44, 46, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-theme .action-sheet-button:hover,
.dark-theme .action-sheet-cancel:hover,
.dark-theme .calendar-day:hover,
.dark-theme .quantity-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .neuro-details.active {
    background: rgba(44, 44, 46, 0.9);
}

.dark-theme .get-neuro-btn {
    background-color: rgba(191, 90, 242, 0.2);
    color: #bf5af2;
}

.dark-theme .get-neuro-btn:hover {
    background-color: rgba(191, 90, 242, 0.3);
}

.main-menu-button {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background-color: #007aff;
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    justify-content: center;
}

.main-menu-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4);
}

.main-menu-button i {
    font-size: 29px;
    color: #fff;
}

.action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.action-sheet-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f5f5f7;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-sheet-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.action-sheet-button,
.action-sheet-cancel {
    width: 100%;
    border: 0;
    font-size: 18px;
    color: #007aff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-sheet-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f;
}

.action-sheet-content {
    padding: 8px 0;
}

.action-sheet-button {
    display: flex;
    align-items: center;
    padding: 16px;
    background: 0 0;
    text-align: left;
}

.action-sheet-button i {
    font-size: 23px;
    margin-right: 12px;
}

.action-sheet-footer {
    padding: 8px 16px 32px;
}

.action-sheet-cancel {
    padding: 16px;
    background-color: #fff;
    border-radius: 12px;
    font-weight: 600;
}

.dark-theme .action-sheet-container {
    background-color: #2c2c2e;
}

.dark-theme .action-sheet-cancel {
    background-color: #3a3a3c;
    color: #0a84ff;
}

.dark-theme .ai-input-container textarea,
.dark-theme .calories-label,
.dark-theme .ingredient-name,
.dark-theme .ingredients-section h4,
.dark-theme .meal-type-option span {
    color: #e0e0e0;
}

.calendar-day.has-food::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 6px;
    height: 6px;
    background-color: #007aff;
    border-radius: 50%;
}

.meal-add-modal .modal-content {
    width: 90%;
    max-width: 460px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0.98);
    animation: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards modalAppear;
}

.meal-add-modal .modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dark-theme .ai-input-container textarea,
.dark-theme .meal-type-option {
    border-color: rgba(90, 90, 90, 0.2);
    background-color: #2a2a2a;
}

.dark-theme #editModal .modal-header,
.dark-theme .meal-add-modal .modal-header {
    border-bottom-color: rgba(90, 90, 90, 0.2);
}

#editModal .modal-header h3,
.meal-add-modal .modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.mode-switch-container {
    margin-bottom: 18px;
    justify-content: center;
}

#editModal #edit-unit-mode-control,
#input-mode-control,
#unit-mode-control {
    background-color: #f0f0f0;
    border-radius: 12px;
    position: relative;
    display: flex;
    width: auto;
    padding: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark-theme #editModal #edit-unit-mode-control,
.dark-theme #input-mode-control,
.dark-theme #unit-mode-control {
    background-color: #2a2a2a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

#input-mode-control .segment-background-ai,
#unit-mode-control .segment-background {
    z-index: 1;
    transition: transform 0.2s cubic-bezier(0.52, 0.16, 0.24, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: absolute;
}

#input-mode-control label {
    position: relative;
    z-index: 2;
    padding: 8px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #777;
}

.dark-theme #input-mode-control label,
.dark-theme #unit-mode-control label {
    color: #999;
}

#input-mode-control .segment-background-ai {
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 10px;
}

#input-mode-control input[type='radio']:nth-of-type(2):checked ~ .segment-background-ai {
    transform: translateX(100%);
    background: #4998f4;
}

#input-mode-control input[type='radio']:first-of-type:checked ~ .segment-background-ai {
    background: linear-gradient(135deg, #6bf1ff, #2d6be2, #5f8ff1);
}

#input-mode-control input[type='radio']:first-of-type:checked ~ .segment-background-ai::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://www.cursor.com/noise.webp);
    opacity: 0.25;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.meal-type-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
}

.meal-icon,
.meal-type-option {
    display: flex;
    align-items: center;
}

.meal-type-option {
    flex: 1;
    flex-direction: column;
    padding: 12px 8px;
    border-radius: 16px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.meal-type-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.meal-type-option.active {
    background-color: rgba(73, 152, 244, 0.08);
    border-color: rgba(73, 152, 244, 0.3);
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.08);
    transform: translateY(-2px);
}

.dark-theme .meal-type-option.active {
    background-color: rgba(73, 152, 244, 0.12);
    border-color: rgba(73, 152, 244, 0.3);
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.15);
}

#editModal .meal-type-option span,
.meal-type-option span {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.meal-icon {
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 4px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.add-meal-btn,
.ai-input-container textarea,
.calories-result,
.manual-input-container .form-group input {
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.meal-type-option:hover .meal-icon {
    transform: scale(1.05);
}

.meal-type-option.active .meal-icon {
    transform: scale(1.08);
}

.ai-input-container {
    margin-bottom: 18px;
}

.ai-input-container textarea {
    width: 100%;
    min-height: 80px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    background-color: #f8f9fa;
}

.ai-input-container textarea:focus,
.manual-input-container .form-group input:focus {
    border-color: #4998f4;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(73, 152, 244, 0.1);
}

.manual-input-container .form-group input {
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    font-size: 14px;
    background-color: #f8f9fa;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.dark-theme .manual-input-container .form-group input {
    background-color: #2a2a2a;
    border-color: rgba(90, 90, 90, 0.2);
    color: #e0e0e0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dark-theme .form-group label {
    color: #bbb;
}

.manual-input-container .form-group {
    margin-bottom: 0;
}

.manual-input-container .form-group label,
.nutrients-inputs .form-group label,
.quantity-input .form-group label {
    margin-bottom: 6px;
}

.unit-mode-switch {
    margin: 18px 0;
    justify-content: center;
}

.calories-result,
.nutrients-inputs,
.quantity-input {
    display: flex;
    margin-bottom: 18px;
}

#editModal #edit-unit-mode-control label,
#unit-mode-control label {
    position: relative;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: #777;
}

#unit-mode-control .segment-background {
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 10px;
    background: #4998f4;
}

#editModal #edit-unit-mode-control input[type='radio']:nth-of-type(2):checked ~ .segment-background,
#unit-mode-control input[type='radio']:nth-of-type(2):checked ~ .segment-background {
    transform: translateX(100%);
}

.nutrients-inputs {
    flex-wrap: wrap;
    gap: 10px;
}

#editModal .nutrients-inputs .form-group,
.nutrients-inputs .form-group {
    flex: 1;
    min-width: 90px;
    margin-bottom: 0;
}

.calories-result {
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: rgba(73, 152, 244, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(73, 152, 244, 0.15);
}

.dark-theme .calories-result {
    background-color: rgba(73, 152, 244, 0.1);
    border-color: rgba(73, 152, 244, 0.25);
}

.calories-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.calories-value-container {
    font-weight: 700;
    font-size: 14px;
    color: #4998f4;
}

.dark-theme .calories-value-container {
    color: #6ca9ff;
}

.quantity-input {
    gap: 12px;
}

.quantity-input .form-group {
    flex: 1;
    margin-bottom: 0;
}

.add-meal-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #4998f4;
    color: #fff;
    border: 0;
    border-radius: 16px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.15);
}

.add-meal-btn:hover {
    background-color: #3a89e5;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(73, 152, 244, 0.25);
}

.add-meal-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(73, 152, 244, 0.15);
}

.quantity-control {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-light);
}

#favorite-food-quantity,
#food-quantity,
.quantity-btn {
    border: 0;
    height: 36px;
    background-color: transparent;
}

.quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--primary-color);
}

.quantity-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
}

#editModal .quantity-control .quantity-btn i,
.quantity-btn i {
    font-size: 1.2rem;
}

#food-quantity {
    flex-grow: 1;
    text-align: center;
    padding: 0;
}

.dark-theme .quantity-control {
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-color-dark);
}

.dark-theme #food-quantity,
.dark-theme .quantity-btn {
    color: var(--text-light);
}

.dark-theme .loading-text {
    color: var(--color-text);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-item input[type='checkbox'] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
}

.checkbox-item input[type='checkbox']:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-item input[type='checkbox']:checked:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-item label {
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
}

.female-only-settings {
    display: none;
}

.ingredient-header,
.loading-content,
.loading-overlay {
    display: flex;
}

.confirm-dialog {
    max-width: 400px;
    padding: 20px;
    border-radius: 10px;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    width: unset;
}

.confirm-dialog .modal-body {
    margin: 15px 0;
    text-align: center;
}

.confirm-dialog .modal-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.confirm-dialog button {
    min-width: 80px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.dark-theme .loading-content,
.loading-content {
    background-color: var(--color-card-bg);
}

.loading-content {
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 80%;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid var(--color-primary);
    animation: 1s linear infinite spin;
    margin-bottom: 16px;
}

.loading-text {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.dark-theme .loading-spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-primary);
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
    pointer-events: none;
}

.notification {
    background: var(--color-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: all;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text);
    max-width: 100%;
    overflow-wrap: break-word;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid var(--color-primary);
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.notification-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notification-text {
    flex: 1;
    font-weight: 500;
}

.notification-close {
    background: 0 0;
    border: 0;
    color: var(--color-text);
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 16px;
    flex-shrink: 0;
}

.notification-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.dark-theme .notification {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-theme .notification-spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-primary);
}

@media (max-width: 768px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .notification {
        font-size: 13px;
        padding: 14px 16px;
    }
}

.ingredients-section {
    margin-top: 20px;
    border-top: 1px solid #eaeaea;
    padding-top: 15px;
}

.ingredients-section h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 600;
}

.ingredients-list {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

.ingredient-item {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    transition: 0.2s;
}

.ingredient-item:hover {
    transform: translateY(-2px);
}

.ingredient-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ingredient-name {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.ingredient-weight {
    font-size: 14px;
    color: #666;
    background-color: #f0f0f0;
    padding: 3px 8px;
    border-radius: 10px;
}

.ingredient-nutrients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#editModal .modal-content {
    width: 90%;
    max-width: 460px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0.98);
    animation: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards modalAppear;
}

#editModal .modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#editModal .form-group input[type='number'],
#editModal .form-group input[type='text'] {
    height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 14px;
    background-color: #f8f9fa;
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#editModal .form-group input[type='number']:focus,
#editModal .form-group input[type='text']:focus {
    border-color: #4998f4;
    outline: 0;
}

.dark-theme #editModal .form-group input[type='number'],
.dark-theme #editModal .form-group input[type='text'] {
    border-color: rgba(90, 90, 90, 0.2);
    background-color: #2a2a2a;
    color: #e0e0e0;
}

.dark-theme #editModal .form-group input[type='number']:focus,
.dark-theme #editModal .form-group input[type='text']:focus {
    border-color: #4998f4;
}

#editModal .nutrients-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

#editModal .calories-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: rgba(73, 152, 244, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(73, 152, 244, 0.15);
    margin-bottom: 18px;
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#editModal .calories-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.dark-theme #editModal .meal-type-option span {
    color: #e0e0e0;
}

#editModal .calories-value-container {
    font-weight: 700;
    font-size: 14px;
    color: #4998f4;
}

.dark-theme #editModal .calories-result {
    background-color: rgba(73, 152, 244, 0.08);
    border-color: rgba(73, 152, 244, 0.15);
}

.dark-theme #editModal .calories-label,
.dark-theme #editModal .form-group label {
    color: #bbb;
}

.dark-theme #editModal .calories-value-container {
    color: #6ca9ff;
}

#editModal .quantity-input {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

#editModal .quantity-input .form-group {
    flex: 1;
    margin-bottom: 0;
}

#editModal .save-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #4998f4;
    color: #fff;
    border: 0;
    border-radius: 16px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.15);
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
}

#editModal .save-btn:hover {
    background-color: #3a89e5;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(73, 152, 244, 0.25);
}

#editModal .save-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(73, 152, 244, 0.15);
}

#editModal .cancel-btn,
#editModal .form-group label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #8e8e93;
}

#editModal .cancel-btn {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#editModal .cancel-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

.dark-theme #editModal .cancel-btn {
    color: #8e8e93;
    border-color: rgba(90, 90, 90, 0.3);
}

.dark-theme #editModal .cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(90, 90, 90, 0.4);
}

#editModal .form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

#editModal .meal-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

#editModal .meal-type-option,
#editModal .quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #f8f9fa;
}

#editModal .meal-type-option {
    flex: 1;
    flex-direction: column;
    padding: 12px 8px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

#editModal .meal-type-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

#editModal .meal-type-option.active {
    background-color: rgba(73, 152, 244, 0.08);
    border-color: rgba(73, 152, 244, 0.3);
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.08);
    transform: translateY(-2px);
}

.dark-theme #editModal .meal-type-option {
    border-color: rgba(90, 90, 90, 0.2);
    background-color: #2a2a2a;
}

.dark-theme #editModal .meal-type-option.active {
    background-color: rgba(73, 152, 244, 0.12);
    border-color: rgba(73, 152, 244, 0.3);
    box-shadow: 0 3px 10px rgba(73, 152, 244, 0.15);
}

#editModal .quantity-control {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

#editModal .quantity-control .quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

#editModal .quantity-control .quantity-btn:hover {
    background-color: rgba(73, 152, 244, 0.1);
}

#editModal .quantity-control input {
    flex-grow: 1;
    text-align: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    height: 36px;
    font-size: 14px;
}

.dark-theme #editModal .quantity-control {
    background-color: #2a2a2a;
    border-color: rgba(90, 90, 90, 0.2);
}

.dark-theme #editModal .ingredients-section .section-header h4,
.dark-theme #editModal .quantity-control .quantity-btn,
.dark-theme #editModal .quantity-control input {
    color: #e0e0e0;
}

#editModal .ingredients-section {
    margin-top: 18px;
    margin-bottom: 18px;
    border-radius: 16px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
    backdrop-filter: blur(10px);
}

.dark-theme #editModal .ingredients-section {
    background: rgba(44, 44, 46, 0.7);
    border: 1px solid rgba(84, 84, 88, 0.3);
}

#editModal .ingredients-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: 0;
    background: 0 0;
    border: 0;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease;
}

#editModal .ingredients-section .section-header h4 {
    margin: 0;
    flex-grow: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

#editModal .ingredients-section .expand-icon {
    top: unset;
    margin-left: 10px;
    transition: transform 0.3s ease;
    color: #8e8e93;
    display: flex;
    align-items: center;
    justify-content: center;
}

#editModal .ingredients-section.collapsed .expand-icon {
    transform: rotate(-90deg);
}

#editModal .collapsible-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#editModal .ingredients-section.collapsed .collapsible-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
}

#editModal .ingredient-nutrients {
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: flex-start;
    margin-top: 4px;
}

#editModal .nutrient-item {
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

#editModal .ingredient-header {
    margin-bottom: 2px;
}

#editModal .ingredient-name {
    font-size: 12px;
}

#editModal .ingredient-weight {
    font-size: 10px;
}

#editModal .form-group label {
    margin-bottom: 6px;
}

#editModal .modal-body {
    padding: 16px;
}

#editModal .unit-mode-switch {
    margin: 18px 0;
    justify-content: center;
}

#editModal #edit-unit-mode-control .segment-background {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 10px;
    background: #4998f4;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

#editModal .hidden-container {
    display: none;
}

.ingredients-list::-webkit-scrollbar {
    width: 6px;
}

.ingredients-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ingredients-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.ingredients-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.dark-theme .ingredient-item {
    background-color: #2a2a2a;
    border: 1px solid #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-theme .ingredient-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .ingredient-weight {
    color: #aaa;
    background-color: #333;
}

.dark-theme .nutrient-item {
    background-color: #333;
    color: #bbb;
}

.dark-theme .ingredients-list::-webkit-scrollbar-track {
    background: #222;
}

.dark-theme .ingredients-list::-webkit-scrollbar-thumb {
    background: #444;
}

.dark-theme .ingredients-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.food-nutrients-info {
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.nutrient-item {
    white-space: nowrap;
    font-size: 11px;
    color: #666;
    padding: 2px 5px;
    background-color: #f0f0f0;
    flex-shrink: 0;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-mode .food-nutrients-info {
    background-color: #262c36;
    border-color: #3e4756;
}

.dark-mode .nutrient-item {
    background-color: #323a47;
    color: #e0e0e0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@supports (-webkit-touch-callout: none) {
    .modal-content.keyboard-active,
    body.keyboard-open .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.keyboard-open {
        height: var(--viewport-height);
        position: relative;
        overflow: hidden;
    }

    body.keyboard-open .modal-content {
        position: relative;
    }

    body.keyboard-open [class*='bottom-fixed'] {
        position: absolute;
        bottom: 0;
        transform: translateY(var(--keyboard-height));
    }

    .modal-content,
    [class*='bottom-fixed'] {
        transition: transform 0.3s;
    }

    body.keyboard-open .modal-body {
        max-height: calc(var(--viewport-height) - 120px);
    }

    .modal-content.keyboard-active {
        transition: max-height 0.3s;
    }

    .modal-content.keyboard-active form {
        padding-bottom: 60px;
    }

    body.keyboard-open input:focus,
    body.keyboard-open select:focus,
    body.keyboard-open textarea:focus {
        position: relative;
        z-index: 2;
    }
}

.meal-type-btn,
.status-item {
    display: flex;
    transition: 0.2s;
}

.meal-type-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.meal-type-btn {
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.dark-theme .meal-type-btn {
    background-color: #2c2c2e;
    border-color: #3a3a3c;
    color: #fff;
}

.meal-type-btn:focus,
.meal-type-btn:hover {
    background-color: #e8e8e8;
    border-color: #d1d1d1;
}

.dark-theme .meal-type-btn:focus,
.dark-theme .meal-type-btn:hover {
    background-color: #3a3a3c;
    border-color: #4a4a4c;
}

.meal-type-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.dark-theme .meal-type-icon {
    background-color: #3a3a3c;
}

.breakfast-icon {
    color: #ff9d00;
}

.lunch-icon {
    color: #fc0;
}

.dinner-icon,
.dinner-icon i {
    color: #8e8eff;
}

.breakfast-icon svg,
.dinner-icon svg,
.lunch-icon svg,
.snack-icon svg {
    width: 24px;
    height: 24px;
}

.subscription-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.subscription-info {
    margin-top: 16px;
}

.subscription-status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.status-item {
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.disable-auto-payment-btn,
.manage-subscription-btn {
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
}

.status-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #4998f4;
    opacity: 0;
    transition: opacity 0.2s;
}

.recognition-actions .btn:hover::before,
.status-item:hover::before {
    opacity: 1;
}

.status-item:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-item i {
    font-size: 28px;
    color: #4998f4;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(73, 152, 244, 0.1);
    border-radius: 12px;
}

.status-content {
    flex: 1;
    margin-left: 0;
}

.status-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.status-value {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
}

.subscription-actions {
    padding-top: 12px;
}

.manage-subscription-btn {
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #4998f4 0, #3b82f6 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    box-shadow: 0 4px 12px rgba(73, 152, 244, 0.3);
}

.manage-subscription-btn:hover {
    background: linear-gradient(135deg, #3b82f6 0, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(73, 152, 244, 0.4);
}

.manage-subscription-btn i {
    font-size: 18px;
}

.disable-auto-payment-btn {
    align-items: center;
    gap: 8px;
    color: #d64848;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    background: 0 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 24px !important;
    margin: auto;
}

.disable-auto-payment-btn:hover {
    color: #cc4040;
    transform: translateY(-1px);
}

.disable-auto-payment-btn i {
    font-size: 14px;
}

.auto-payment-controls {
    padding: 8px 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.dark-theme .auto-payment-controls,
.dark-theme .status-item {
    border-color: rgba(90, 90, 90, 0.2);
}

.disable-auto-payment-link {
    background: 0 0;
    border: 0;
    color: #ef4444;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: 0.2s;
    padding: 0;
    white-space: nowrap;
}

.disable-auto-payment-link:hover {
    color: #dc2626;
    text-decoration-color: #dc2626;
}

.dark-theme .disable-auto-payment-link:active,
.disable-auto-payment-link:active {
    color: #f44336;
}

#autoPaymentSection {
    transition: 0.3s;
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
}

#autoPaymentSection[style*='display: none'] {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.warning-content {
    text-align: center;
    padding: 20px 0;
}

.warning-icon {
    margin: 0 auto 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning-icon i {
    font-size: 28px;
    color: #f59e0b;
}

.warning-content p {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.5;
}

.warning-note {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.subscription-expiry-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(73, 152, 244, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(73, 152, 244, 0.3);
    z-index: 9999;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
}

.subscription-expiry-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.subscription-expiry-notification:hover {
    background: #4998f4;
    transform: translateX(-50%) translateY(-2px);
}

.subscription-expiry-notification i {
    margin-right: 8px;
    font-size: 16px;
}

.dark-theme .status-item {
    background: rgba(44, 44, 46, 0.8);
}

.dark-theme .subscription-expiry-notification {
    background: rgba(73, 152, 244, 0.95);
}

.dark-theme .subscription-expiry-notification:hover {
    background: #4998f4;
}

@media (max-width: 480px) {
    .status-item {
        padding: 16px;
        gap: 12px;
    }

    .status-item i {
        font-size: 24px;
        width: 36px;
        height: 36px;
    }

    .status-item#autoPaymentSection {
        flex-direction: row;
        align-items: center;
    }

    .disable-auto-payment-btn {
        font-size: 14px;
        gap: 4px;
    }

    .manage-subscription-btn {
        padding: 14px 18px;
        font-size: 15px;
    }

    .subscription-expiry-notification {
        left: 16px;
        right: 16px;
        transform: translateY(-20px);
        width: auto;
    }

    .subscription-expiry-notification.show {
        transform: translateY(0);
    }

    .subscription-expiry-notification:hover {
        transform: translateY(-2px);
    }
}

.dark-theme .disable-auto-payment-link {
    color: #ff6b6b;
}

.dark-theme .disable-auto-payment-link:hover {
    color: #ff5252;
    text-decoration-color: #ff5252;
}

.report-icon-calories,
.settings-icon-calories {
    top: 10px;
}

.report-icon-calories,
.settings-icon-calories,
.subscription-icon-calories {
    position: absolute;
    z-index: 10;
    transition: 0.2s;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-icon-calories .ri,
.settings-icon-calories .ri {
    font-size: 23px;
    color: #4998f4;
}

.subscription-icon-calories .ri {
    font-size: 23px;
    color: #ff6b00;
}

.report-icon-calories:hover,
.settings-icon-calories:hover,
.subscription-icon-calories:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.photo-recognition-modal {
    max-width: 420px;
}

.settings-modal {
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.photo-recognition-modal .modal-content {
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px);
    animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.recognition-result {
    margin-bottom: 1.5rem;
}

.ai-detected-food {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.ai-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.ai-icon i {
    font-size: 22px;
    color: #fff;
}

.detected-content {
    flex: 1;
}

.detected-content h4,
.food-name {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.detected-content h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
    letter-spacing: -0.01em;
}

.food-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.food-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nutrition-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.8rem;
    background: rgba(247, 248, 252, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.nutrition-item {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.01em;
}

.nutrition-value {
    font-weight: 700;
    color: var(--primary-color);
}

.serving-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.9;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
}

.serving-label {
    font-weight: 600;
}

.serving-value {
    font-weight: 700;
    color: var(--primary-color);
}

.meal-info {
    color: var(--text-color);
    opacity: 0.7;
    font-weight: 500;
}

.ingredients-section {
    padding: 1rem;
    background: rgba(247, 248, 252, 0.8);
    border-radius: 16px;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ingredients-simple {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.ingredients-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    opacity: 0.8;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.ingredients-label,
.ingredients-list,
.recognition-actions .btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ingredients-list {
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.4;
    font-weight: 500;
    margin-top: 10px;
}

.recognition-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 0 16px 16px;
}

.recognition-actions .btn {
    flex: 1;
    padding: 0.9rem 1.2rem;
    border-radius: 14px;
    border: 0;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

.recognition-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recognition-actions .edit-btn {
    background: var(--modal-bg, #ffffff);
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recognition-actions .edit-btn:hover {
    background: var(--modal-bg, #f5f5f7);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.recognition-actions .edit-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.recognition-actions .confirm-btn {
    background: linear-gradient(135deg, #4caf50 0, #45a049 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
    backdrop-filter: blur(10px);
}

.recognition-actions .confirm-btn:hover {
    background: linear-gradient(135deg, #45a049 0, #3d8b40 100%);
    box-shadow: 0 6px 24px rgba(76, 175, 80, 0.5);
    transform: translateY(-2px);
}

.recognition-actions .confirm-btn:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

/* Dark theme для кнопок */
.dark-theme .recognition-actions .edit-btn {
    background: var(--modal-bg, #2c2c2e);
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-theme .recognition-actions .edit-btn:hover {
    background: rgba(58, 58, 60, 0.9);
}

.recognition-actions .btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.recognition-actions .btn:hover i {
    transform: scale(1.1);
}

.dark-theme .photo-recognition-modal .modal-content {
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.dark-theme .ai-detected-food {
    background: rgba(44, 44, 46, 0.7);
    backdrop-filter: blur(10px);
}

.dark-theme .food-name {
    color: var(--primary-color);
}

.dark-theme .nutrition-info {
    background: rgba(44, 44, 46, 0.7);
    backdrop-filter: blur(10px);
}

.dark-theme .nutrition-item,
.dark-theme .serving-info {
    color: var(--text-color);
}

.dark-theme .nutrition-value,
.dark-theme .serving-value {
    color: var(--primary-color);
}

.dark-theme .ingredients-section {
    background: rgba(44, 44, 46, 0.7);
    border: 1px solid rgba(84, 84, 88, 0.3);
    backdrop-filter: blur(10px);
}

.dark-theme .ingredients-label,
.dark-theme .ingredients-list {
    color: var(--text-color);
}

.collapsible-section {
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.collapsible-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: 0 0;
    border: 0;
    width: 100%;
    text-align: left;
}

.collapsible-section .section-header h4 {
    margin: 0;
    flex-grow: 1;
}

.collapsible-section .expand-icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
    color: #8e8e93;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapsible-section.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.collapsible-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-section.collapsed .collapsible-content {
    max-height: 0;
    overflow: hidden;
}

.dark-theme .collapsible-section .expand-icon {
    color: #8e8e93;
}

/* Mobile responsive adjustments for bottom sheet */
@media (max-width: 768px) {
    .recognition-sheet-container.without-photo {
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .recognition-sheet-container {
        border-radius: 16px 16px 0 0;
    }

    .recognition-sheet-container.without-photo {
        max-height: 80vh;
    }

    .recognition-photo {
        max-height: 300px;
    }

    .recognition-details {
        padding: 12px;
    }

    .photo-recognition-modal {
        max-width: 95%;
        margin: 1rem;
    }

    .photo-recognition-modal .modal-content {
        border-radius: 16px;
    }

    .ai-detected-food {
        gap: 0.8rem;
        margin-bottom: 1rem;
        padding: 0.8rem;
        border-radius: 12px;
    }

    .ai-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .nutrition-info {
        gap: 0.6rem;
        padding: 0.7rem;
        border-radius: 10px;
    }

    .ingredients-section {
        padding: 0.8rem;
        border-radius: 12px;
    }

    .recognition-actions {
        flex-direction: column;
        gap: 0.6rem;
    }

    .recognition-actions .btn {
        padding: 0.8rem 1rem;
        border-radius: 12px;
    }

    .food-name {
        font-size: 1.1rem;
    }
}

.hidden-form {
    display: none !important;
}

.report-link-message-text {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.4;
}

.report-link-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.report-link-input-field {
    flex-grow: 1;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-link-btn {
    padding: 10px;
    border-radius: 8px;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-link-btn:hover {
    background-color: var(--button-hover-bg);
}

.copy-link-btn i {
    font-size: 16px;
}

:root {
    --link-color: #007aff;
    --link-color-hover: #005bb5;
}

.dark-theme {
    --link-color: #0a84ff;
    --link-color-hover: #5eacff;
}

.switch-group {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.switch-item,
.switch-label {
    display: flex;
    align-items: center;
}

.switch-label {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    padding: 8px 0;
}

.switch-text {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
    flex: 1;
}

.switch-control {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
}

.switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch-slider,
.switch-slider:before {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.switch-slider {
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5e7;
    border-radius: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.switch-slider:before {
    content: '';
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch-input:checked + .switch-slider {
    background-color: #007aff;
    box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.3);
}

.switch-input:checked + .switch-slider:before {
    transform: translateX(20px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.switch-input:focus + .switch-slider {
    outline: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.switch-input:checked:focus + .switch-slider {
    box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.3), 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.switch-label:hover .switch-slider {
    background-color: #d1d1d6;
}

.dark-theme .switch-label:hover .switch-input:checked + .switch-slider,
.switch-label:hover .switch-input:checked + .switch-slider {
    background-color: #0056cc;
}

.switch-label:active .switch-slider:before {
    width: 28px;
}

.switch-label:active .switch-input:checked + .switch-slider:before {
    transform: translateX(18px);
    width: 28px;
}

.dark-theme .switch-text {
    color: var(--text-color);
}

.dark-theme .switch-slider {
    background-color: #39393d;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.05);
}

.dark-theme .switch-slider:before {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark-theme .switch-input:checked + .switch-slider {
    background-color: #007aff;
    box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.4);
}

.dark-theme .switch-input:checked + .switch-slider:before {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark-theme .switch-input:focus + .switch-slider {
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.05), 0 0 0 3px rgba(0, 122, 255, 0.3);
}

.dark-theme .switch-input:checked:focus + .switch-slider {
    box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.4), 0 0 0 3px rgba(0, 122, 255, 0.3);
}

.dark-theme .switch-label:hover .switch-slider {
    background-color: #48484a;
}

.form-help-text {
    font-size: 13px;
    color: #8e8e93;
    margin-top: 6px;
    line-height: 1.4;
}

.dark-theme .form-help-text {
    color: #8e8e93;
}

.dark-theme .secondary-btn {
    color: #0a84ff;
    border-color: #0a84ff;
}

.dark-theme .secondary-btn:hover {
    background: rgba(10, 132, 255, 0.15);
}