/* === БАЗОВЫЕ ПЕРЕМЕННЫЕ И СТИЛИ === */
:root {
    --bg-dark: #050c15;
    --bg-glow: #0c1c2b;
    --card-gradient: linear-gradient(180deg, rgba(35, 48, 62, 0.8), rgba(20, 28, 38, 0.8));
    --card-border: rgba(255, 255, 255, 0.08);
    --cyan-glow: #00e5ff;
    --text-main: #ffffff;
    --text-muted: #8a9bb0;
    --green: #32D74B;
    --yellow: #FFD60A;
    --red: #FF453A;
    --blue: #0A84FF;
    --blue-light: #64D2FF; /* Голубой цвет для клетчатки */
    color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: radial-gradient(circle at top center, var(--bg-glow) 0%, #06101a 50%, var(--bg-dark) 100%);
    background-attachment: fixed; color: var(--text-main);
    min-height: 100vh; display: flex; justify-content: center;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { display: none; }

#app-container {
    width: 100%; max-width: 430px; min-height: 100vh; position: relative;
    padding-bottom: 110px; overflow-x: hidden;
}

/* Однотонный темный фон специально для виджета Сообщества */
#community-card {
    background: rgba(20, 28, 38, 0.8);
}

.screen { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; transition: opacity 0.3s ease-in-out; }
.screen.hidden { display: none !important; opacity: 0; }

/* === ТИПОГРАФИКА И КАРТОЧКИ === */
.screen-title { font-size: 20px; font-weight: 600; text-align: center; letter-spacing: -0.4px; margin-bottom: 4px; }
.section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 16px; color: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: space-between; width: 100%; }
.title-left { display: flex; align-items: center; gap: 6px; }

.glass-card {
    background: var(--card-gradient); border: 1px solid var(--card-border);
    border-radius: 24px; padding: 20px; backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); width: 100%;
}

/* Сообщения об ошибках всегда на самом верхнем слое */
#modal-alert-box { 
    z-index: 5000 !important; 
}

/* Полноэкранное фото */
#fullscreen-viewer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999; display: none;
    align-items: center; justify-content: center;
}
#fullscreen-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Стили инпутов внутри карточек макросов */
.macro-edit-input {
    background: transparent; border: none; color: #fff;
    width: 100%; text-align: center; font-size: 16px;
    font-weight: 700; padding: 0; margin: 0;
    outline: none;
}
.macro-edit-input::placeholder { color: rgba(255,255,255,0.3); }

/* Кнопки в ряд */
.modal-actions-row {
    display: flex; gap: 10px; margin-bottom: 15px;
}
.icon-btn {
    flex: 1; height: 50px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; border: 1px solid var(--card-border);
    background: rgba(255,255,255,0.05); transition: 0.2s;
}
.icon-btn.active { background: var(--green); color: #000; border: none; }
.icon-btn.cancel { background: rgba(255, 69, 58, 0.1); color: var(--red); border-color: var(--red); }


/* === СБРОС ИНПУТОВ И КАСТОМИЗАЦИЯ === */
input, select, textarea, button {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    outline: none !important; border: none; font-family: inherit; color: #fff;
}
button:focus, input:focus, select:focus { outline: none !important; box-shadow: none; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select option { background-color: #0c1c2b; color: #fff; }
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
    padding-right: 25px; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; margin-right: 5px; }

/* === ЭЛЕМЕНТЫ ОНБОРДИНГА И АВТОРИЗАЦИИ === */
.info-input { background: transparent; text-align: right; width: 60%; font-size: 15px; font-weight: 500; }
.info-input::placeholder { color: var(--text-muted); opacity: 0.5; }
select.info-input { text-align-last: right; }
.auth-input { width: 100%; padding: 16px; background: rgba(0,0,0,0.2); border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 15px; text-align: left; font-size: 15px; }
.btn-primary { background: var(--cyan-glow); color: #000; padding: 18px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; transition: 0.2s; box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; border: 1px solid var(--card-border); color: #fff; padding: 16px; border-radius: 16px; font-size: 14px; font-weight: 500; cursor: pointer; width: 100%; transition: 0.2s; }
.btn-secondary:active { background: rgba(255,255,255,0.05); }

/* === ПОСТРОЧНОЕ РЕДАКТИРОВАНИЕ === */
.editable-row { cursor: pointer; transition: background 0.2s; }
.row-content { display: flex; align-items: center; justify-content: flex-end; flex-grow: 1; margin-left: 15px; }
.info-input-inline { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 8px; padding: 6px 10px; width: 100%; font-size: 14px; text-align: center; transition: all 0.2s ease; }
.info-input-inline:focus { border-color: var(--cyan-glow) !important; background: rgba(0, 229, 255, 0.05); box-shadow: 0 0 10px rgba(0, 229, 255, 0.1) !important; }
select.info-input-inline { text-align-last: center; }
.row-edit-wrapper { display: none; align-items: center; gap: 10px; width: 100%; justify-content: flex-end; }
.editing .info-value-text { display: none !important; }
.editing .row-edit-wrapper { display: flex !important; }
.save-icon-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #08240a; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 15px; transition: transform 0.2s; box-shadow: 0 4px 10px rgba(50, 215, 75, 0.3); }
.save-icon-btn:active { transform: scale(0.9); }
.pass-view-container { display: flex; align-items: center; gap: 8px; justify-content: flex-end; width: 100%; }
.pass-dots { letter-spacing: 2px; font-size: 22px; line-height: 0; position: relative; top: 2px; }
.pass-view-container i { position: relative; top: 3px; font-size: 14px; color: var(--text-muted); cursor: pointer; } 
.info-input-inline-container { position: relative; width: 100%; max-width: 160px; display: flex; align-items: center; }
.info-input-inline-container .info-input-inline { width: 100%; padding-right: 32px; }
.info-input-inline-container i { position: absolute; right: 10px; color: var(--text-muted); cursor: pointer; }

/* === СТРОКИ СПИСКА === */
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label { color: var(--text-muted); font-size: 15px; font-weight: 400; white-space: nowrap; }
.info-value { color: var(--text-main); font-size: 15px; font-weight: 500; text-align: right; }
.text-green { color: var(--green); } .text-red { color: var(--red); } .text-yellow { color: var(--yellow); } .text-blue { color: var(--blue-light); }

/* === ГЛАВНАЯ: ПЛАН И БЖУК === */
.plan-panel { background: linear-gradient(135deg, #d8f4d4, #a3e6a5); border-radius: 20px; padding: 28px 20px; text-align: center; margin-bottom: 20px; }
.plan-panel h1 { font-size: 52px; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 6px; line-height: 1; display: flex; justify-content: center; align-items: baseline; gap: 6px; color: #08240a;}
.plan-panel h1 span { font-size: 24px; font-weight: 600; letter-spacing: 0; opacity: 0.9; color: #08240a;}
.plan-panel p { font-size: 13px; font-weight: 500; opacity: 0.85; margin-bottom: 20px; color: #08240a;}
.main-progress { background: rgba(0,0,0,0.1); height: 6px; border-radius: 4px; width: 100%; overflow: hidden; }
.main-progress-fill { background: #ffffff; width: 0%; height: 100%; border-radius: 4px; transition: width 0.5s ease; }

.macros-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.macro-card { background: rgba(0,0,0,0.2); border-radius: 14px; padding: 12px 6px; text-align: center; border: 1px solid rgba(255,255,255,0.03); }
.macro-title { font-size: 11px; font-weight: 400; margin-bottom: 8px; text-decoration: underline; cursor: pointer; transition: opacity 0.2s;}
.macro-title:active { opacity: 0.7; }
.macro-val { font-size: 13px; font-weight: 600; margin-top: 8px; }
.macro-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.macro-bar-fill { height: 100%; transition: width 0.5s ease, background-color 0.5s ease; background-color: #ffffff;} 

.macro-bar-fill.protein { background-color: var(--green); }
.macro-bar-fill.fat { background-color: var(--red); }
.macro-bar-fill.carbs { background-color: var(--yellow); }
.macro-bar-fill.fiber { background-color: var(--blue-light); }

/* === СКРОЛЛ ЕДЫ (ГЛАВНАЯ) И АНИМАЦИИ === */
.horizontal-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; align-items: flex-start; }
.food-card { min-width: 140px; max-width: 140px; height: 165px; border-radius: 18px; background: rgba(20, 30, 40, 0.6); border: 1px solid var(--card-border); overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; cursor: pointer; position: relative;}
.food-card.upload-card { background: rgba(16, 50, 60, 0.4); border: 1px dashed rgba(0, 229, 255, 0.3); justify-content: center; align-items: center; transition:0.2s;}
.food-card.upload-card:active { transform: scale(0.95); background: rgba(0, 229, 255, 0.15); }
.food-preview-img { height: 90px; width: 100%; object-fit: cover; }
.food-preview-footer { padding: 10px; background: rgba(0,0,0,0.3); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.food-time { font-size: 12px; color: var(--text-main); font-weight: 600; margin-bottom: 4px; }
.food-macros { font-size: 11px; line-height: 1.4; }
.pending-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: var(--cyan-glow); }

.loading-dots { display: flex; gap: 8px; align-items: center; justify-content: center; }
.loading-dot { width: 12px; height: 12px; border-radius: 50%; animation: dot-pulse 1.5s infinite ease-in-out both; }

.loading-dot:nth-child(1) { background-color: var(--green); animation-delay: -0.32s; box-shadow: 0 0 10px rgba(50, 215, 75, 0.4); }
.loading-dot:nth-child(2) { background-color: var(--red); animation-delay: -0.16s; box-shadow: 0 0 10px rgba(255, 69, 58, 0.4); }
.loading-dot:nth-child(3) { background-color: var(--yellow); animation-delay: 0s; box-shadow: 0 0 10px rgba(255, 214, 10, 0.4); }

@keyframes dot-pulse {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* === ГРАФИКИ === */
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.chart-layout { display: flex; align-items: stretch; margin-bottom: 8px; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; padding-right: 10px; font-size: 10px; color: var(--text-muted); text-align: right; min-width: 32px; padding-top: 5px; padding-bottom: 5px;}
.chart-svg-container { flex-grow: 1; position: relative; height: 130px; }
.x-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-left: 42px; margin-bottom: 5px;}
.chart-grid line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--cyan-glow); stroke-width: 2.5; filter: drop-shadow(0 4px 6px rgba(0, 229, 255, 0.3)); }
.chart-line.dashed { stroke-dasharray: 6, 4; opacity: 0.8; filter: none; }
.chart-area { fill: url(#chartGradProg); }
.chart-dot { fill: #050c15; stroke: var(--cyan-glow); stroke-width: 2.5; }
.chart-dot.future { fill: var(--cyan-glow); stroke: var(--bg-dark); }
.limit-line text { font-family: 'Inter', sans-serif; font-weight: 500; }

/* === АККОРДЕОНЫ ДНЕВНИКА И СТАТУСЫ === */
.accordion-card { padding: 18px 20px; transition: all 0.3s; margin-bottom: 15px;}
.accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.acc-left { display: flex; flex-direction: column; gap: 6px; }
.diary-date { font-size: 16px; font-weight: 600; }
.status-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.9); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}
.status-dot.yellow { background: var(--yellow); box-shadow: 0 0 10px rgba(255, 214, 10, 0.4); }
.status-dot.green { background: var(--green); box-shadow: 0 0 10px rgba(50, 215, 75, 0.4); }
.status-dot.red { background: var(--red); box-shadow: 0 0 10px rgba(255, 69, 58, 0.4); }
.acc-right { display: flex; align-items: center; gap: 12px; }
.diary-day-macros { font-size: 11px; text-align: right; line-height: 1.4; color: var(--text-main); }
.chevron-icon { color: var(--text-muted); transition: transform 0.3s ease; font-size: 14px; }
.accordion-content { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.meal-item { background: rgba(0,0,0,0.2); border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.03); cursor:pointer;}

.meal-img { 
    width: 56px; 
    height: 56px; 
    flex-shrink: 0; /* <--- Запрещаем сжимать этот блок */
    border-radius: 12px; 
    object-fit: cover; 
    background: rgba(255,255,255,0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
}

.meal-content { flex-grow: 1; }
.meal-time { font-size: 12px; color: var(--cyan-glow); font-weight: 500; margin-bottom: 2px; }
.meal-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.meal-subtitle { font-size: 12px; font-weight: 400;}

/* === ТАБЛИЦА ДИНАМИКИ === */
.table-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.table-header { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.table-col { flex: 1; font-size: 14px; font-weight: 500; display: flex; align-items: center; }
.table-col:nth-child(1) { justify-content: flex-start; }
.table-col:nth-child(2) { justify-content: center; }
.table-col:nth-child(3) { justify-content: flex-end; }

/* === МОДАЛЬНЫЕ ОКНА === */
#modal-overlay, #modal-confirm-box, #modal-alert-box, #modal-add-food, #modal-meal-detail { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(10px); }
.modal-content { position: relative; width: 100%; max-width: 380px; background: #0c1c2b; border: 1px solid var(--cyan-glow); border-radius: 28px; padding: 30px 20px 20px; }
.modal-close-x { position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--text-muted); cursor: pointer; }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; text-align: center; color: var(--cyan-glow); }
.product-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
.product-item span:last-child { color: var(--green); font-weight: 600; }

/* === НАВИГАЦИЯ === */
.bottom-nav { position: fixed; bottom: 0; width: 100%; max-width: 430px; height: 86px; background: rgba(10, 18, 28, 0.85); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-around; align-items: center; padding-bottom: 15px; z-index: 100; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #6a7b8f; cursor: pointer; transition: all 0.3s ease; min-width: 60px; }
.nav-item i { font-size: 20px; }
.nav-item span { font-size: 11px; font-weight: 500; }
.nav-item.active { color: var(--cyan-glow); }
#modal-meal-detail button { font-weight: 400 !important; }

/* === ТАБЛИЦА ПРОДУКТОВ В МОДАЛКЕ === */
.macro-table { 
    width: 100%; 
    font-size: 12px; 
    margin-top: 5px; 
}
.m-row { 
    display: grid; 
    grid-template-columns: 3.5fr 1fr 1fr 1fr 1fr 1fr; /* Колонка Продукт шире остальных */
    gap: 4px; 
    padding: 10px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    align-items: center; 
    text-align: center; 
}
.m-row:last-child { border-bottom: none; }
.m-row > div:first-child { 
    text-align: left; 
    font-weight: 500; 
    font-size: 13px; 
    line-height: 1.2; 
    padding-right: 4px;
}
.m-header { 
    font-weight: 600; 
    color: var(--text-muted); 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 8px; 
    font-size: 11px;
}
.m-col-kcal { color: var(--text-main); }
.m-col-p { color: var(--green); }
.m-col-f { color: var(--red); }
.m-col-c { color: var(--yellow); }
.m-col-k { color: var(--blue-light); }

/* Подсветка целевого нутриента */
.m-high { 
    font-weight: 700; 
    background: rgba(255,255,255,0.1); 
    border-radius: 6px; 
    padding: 4px 0; 
}

/* === СЕТКА СООБЩЕСТВА === */
.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.community-card {
    width: 100%;
    aspect-ratio: 0.85;
    border-radius: 14px;
    background: rgba(20, 30, 40, 0.6);
    border: 1px solid var(--card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.community-card-img {
    width: 100%;
    height: 60%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- СТИЛИ ДЛЯ СПЕЦИАЛЬНОГО РЕЖИМА РЕДАКТИРОВАНИЯ СТРОК --- */

/* 1. Скрываем старое текстовое значение слева при редактировании */
.editable-row.editing .info-value {
    display: none !important;
}

/* 2. Растягиваем контейнер редактирования на всю ширину строки */
.editable-row.editing .row-content {
    flex: 1;
    width: 100%;
    display: flex !important;
}

.editable-row.editing .row-edit-wrapper {
    flex: 1;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

/* 3. Убираем фиксированную ширину у инпутов, чтобы они тянулись, и убираем лишние рамки */
.editable-row.editing .info-input-inline {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
}

/* Оставляем легкий фон только для полей ввода роста футы/дюймы, чтобы они визуально разделялись */
.editable-row.editing #edit-height-ft,
.editable-row.editing #edit-height-in {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px 6px;
}

/* Делаем иконку календаря видимой, стильной и светлой в темной теме */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5); /* Перекрашивает черный квадрат в белый цвет */
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    background-color: rgba(255, 255, 255, 0.08); /* Легкий красивый фон вокруг иконки */
    border-radius: 6px;
    transition: background-color 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(255, 255, 255, 0.2);
}