/* FOOD·AI 1.38 — футуристичная тема «Aurora».
   Слой поверх styles.css: только токены, общие компоненты и исправления выравнивания.
   Концепция: тёмное «ночное небо» или светлое «голографическое стекло» с мятно-бирюзовым
   и фиолетовым свечением; крупные числа — моноширинные цифры дисплейного шрифта. */

:root{
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Unbounded","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* светлая тема — «голографическое стекло» */
  --bg:#edf2fa;
  --surface:#ffffff;
  --surface-soft:#f6f9fd;
  --surface-muted:#ebf1f8;
  --text:#0d1626;
  --muted:#5b6880;
  --muted-2:#8a96ab;
  --line:#dce4ef;
  --line-strong:#c5d1e1;
  --accent:#0a9d8c;
  --accent-strong:#06786c;
  --accent-dark:#06665c;
  --accent-soft:#dff6f1;
  --accent-soft-2:#eefaf7;
  --accent-2:#6c5cf6;
  --danger:#d23f58;
  --danger-soft:#fdecef;
  --danger-line:#f4c3cc;
  --on-accent:#ffffff;
  --glow:rgba(10,190,170,.28);
  --glow-2:rgba(108,92,246,.20);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.75);
  --card-line:rgba(120,140,175,.20);
  --grad-accent:linear-gradient(135deg,#12c7b0 0%,#1aa6d8 55%,#6c5cf6 100%);
  --aurora:
    radial-gradient(900px 520px at 8% -8%,rgba(18,199,176,.20),transparent 60%),
    radial-gradient(760px 480px at 100% 0%,rgba(108,92,246,.16),transparent 62%),
    radial-gradient(900px 600px at 50% 120%,rgba(26,166,216,.12),transparent 60%);
  --shadow-sm:0 1px 2px rgba(15,30,60,.04),0 8px 26px rgba(15,30,60,.06);
  --shadow-md:0 24px 70px rgba(15,30,60,.18);
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#060a15;
    --surface:#0e1527;
    --surface-soft:#111a2f;
    --surface-muted:#172038;
    --text:#e7edfb;
    --muted:#95a2bf;
    --muted-2:#6d7a98;
    --line:#1d2843;
    --line-strong:#2a3658;
    --accent:#2fe3c4;
    --accent-strong:#62f0d7;
    --accent-dark:#7af5df;
    --accent-soft:rgba(47,227,196,.13);
    --accent-soft-2:rgba(47,227,196,.07);
    --accent-2:#9a8cff;
    --danger:#ff6b82;
    --danger-soft:rgba(255,107,130,.12);
    --danger-line:rgba(255,107,130,.34);
    --on-accent:#03201b;
    --glow:rgba(47,227,196,.30);
    --glow-2:rgba(154,140,255,.24);
    --glass:rgba(12,19,36,.72);
    --glass-line:rgba(130,160,255,.12);
    --card-line:rgba(130,160,255,.13);
    --grad-accent:linear-gradient(135deg,#2fe3c4 0%,#38bdf8 55%,#9a8cff 100%);
    --aurora:
      radial-gradient(900px 560px at 6% -10%,rgba(47,227,196,.16),transparent 60%),
      radial-gradient(800px 520px at 100% 0%,rgba(154,140,255,.17),transparent 62%),
      radial-gradient(1000px 700px at 50% 125%,rgba(56,189,248,.10),transparent 60%);
    --shadow-sm:0 0 0 1px rgba(130,160,255,.04),0 10px 30px rgba(0,0,0,.42);
    --shadow-md:0 30px 90px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060a15;--surface:#0e1527;--surface-soft:#111a2f;--surface-muted:#172038;
  --text:#e7edfb;--muted:#95a2bf;--muted-2:#6d7a98;--line:#1d2843;--line-strong:#2a3658;
  --accent:#2fe3c4;--accent-strong:#62f0d7;--accent-dark:#7af5df;--accent-soft:rgba(47,227,196,.13);--accent-soft-2:rgba(47,227,196,.07);
  --accent-2:#9a8cff;--danger:#ff6b82;--danger-soft:rgba(255,107,130,.12);--danger-line:rgba(255,107,130,.34);--on-accent:#03201b;
  --glow:rgba(47,227,196,.30);--glow-2:rgba(154,140,255,.24);--glass:rgba(12,19,36,.72);--glass-line:rgba(130,160,255,.12);--card-line:rgba(130,160,255,.13);
  --grad-accent:linear-gradient(135deg,#2fe3c4 0%,#38bdf8 55%,#9a8cff 100%);
  --aurora:radial-gradient(900px 560px at 6% -10%,rgba(47,227,196,.16),transparent 60%),radial-gradient(800px 520px at 100% 0%,rgba(154,140,255,.17),transparent 62%),radial-gradient(1000px 700px at 50% 125%,rgba(56,189,248,.10),transparent 60%);
  --shadow-sm:0 0 0 1px rgba(130,160,255,.04),0 10px 30px rgba(0,0,0,.42);--shadow-md:0 30px 90px rgba(0,0,0,.6);
}

/* ---------- основа ---------- */
:root,body,button,input,select,textarea{font-family:var(--font-ui)}
html,body{background:var(--bg)}
body{background-image:var(--aurora);background-attachment:fixed;background-color:var(--bg)}
#app main,#app{background:transparent!important}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h3{letter-spacing:-.01em;text-wrap:balance}
::selection{background:var(--accent-soft);color:var(--text)}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- шапка: стекло, логотип с градиентом ---------- */
header{background:var(--glass)!important;border-bottom:1px solid var(--card-line)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.24em;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- навигация: стеклянная панель, светящийся активный пункт ---------- */
.main-nav{background:var(--glass)!important;border-top:1px solid var(--card-line)!important;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.main-nav button{color:var(--muted)!important;background:transparent!important;transition:color .18s,background .18s}
.main-nav button.active:not(.nav-food-primary){color:var(--accent-strong)!important;background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.main-nav .nav-icon{stroke:currentColor}
.main-nav button.nav-food-primary{background:var(--grad-accent)!important;color:var(--on-accent)!important;box-shadow:0 10px 26px var(--glow),0 0 0 1px rgba(255,255,255,.10) inset!important}
.main-nav button.nav-food-primary .nav-food-icon{background:rgba(255,255,255,.18)!important}
.main-nav button.nav-food-primary .nav-icon{stroke:var(--on-accent)!important}
.main-nav button.nav-food-primary span{color:var(--on-accent)!important}

/* ---------- кнопки ----------
   Градиент заменяет только базовый стиль кнопки (тот же вес селектора, что у button{} в styles.css),
   поэтому кнопки компонентов сохраняют собственное оформление. */
button{background:var(--grad-accent);color:var(--on-accent);border-color:transparent}
button:not([class]),button.small:not(.ghost):not(.danger):not([class*="icon"]){box-shadow:0 8px 22px var(--glow)}
button:not([class]):hover{filter:brightness(1.06)}
button:disabled{filter:saturate(.4) opacity(.55);box-shadow:none!important;cursor:not-allowed}
button.ghost{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--card-line)!important;box-shadow:none}
button.ghost:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)!important;color:var(--accent-strong)!important}
button.danger{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid var(--danger-line)!important;box-shadow:none}
button.send{background:var(--grad-accent)!important;color:var(--on-accent)!important;border:0!important;box-shadow:0 8px 20px var(--glow)!important}
button.round:not(.send){background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--card-line)!important}

/* ---------- поля ввода ---------- */
input,select,textarea{background:var(--surface)!important;color:var(--text)!important;border-color:var(--card-line)!important}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)!important}

/* ---------- карточки: единая поверхность с тонкой светящейся рамкой ---------- */
.meal-card,.ingredient,.standalone-group,.target-macro,.ration-editor-block,.body-weight-hero,.body-metric,.profile-info-card,.admin-card,.authbox,.modal-card,.modal>div,.date-control,.bubble.assistant{
  background:var(--surface)!important;border:1px solid var(--card-line)!important;box-shadow:var(--shadow-sm)!important}
.ingredient,.standalone-group,.ration-editor-block{box-shadow:none!important;background:var(--surface-soft)!important}
.meal-card{border-radius:var(--radius-lg)!important}
.bubble.user{background:var(--grad-accent)!important;color:var(--on-accent)!important;border:0!important;box-shadow:0 8px 22px var(--glow)!important}
.bubble.user *{color:inherit!important}
.admin-badge,.self-badge{background:var(--accent-soft)!important;color:var(--accent-strong)!important;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)!important}

/* крупные числа — дисплейный шрифт с моноширинными цифрами */
.meal-kcal,.target-macro b,.body-metric-value,.body-weight-hero b,.macro b,.ration-kcal,.goal-impact-kcal{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.meal-kcal{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* полосы прогресса — градиент со свечением */
.progress>div,.target-macro .bar>i,.target-macro .bar>div,[class*="progress"]>i{background:var(--grad-accent)!important;box-shadow:0 0 12px var(--glow)}

/* всплывающее сообщение */
#toast{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;color:var(--text)!important;border:1px solid var(--card-line)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-md)!important}

/* модальные окна: затемнение с размытием */
.modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- вход: «приветствие» ---------- */
.authbox h1{font-family:var(--font-display);background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =================== исправления выравнивания =================== */
/* Профиль: поля в одной строке начинаются на одной высоте и не растягиваются */
.profile-form label{align-content:end}
.profile-form label:nth-child(8){align-content:start}
.profile-form label>.field-label{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.profile-form .field-help.inline{display:inline;margin:0;font-size:.72rem;font-weight:600;color:var(--muted-2)}
.profile-form select,.profile-form input{height:48px;min-height:48px!important}
html[data-ui-scale="compact"] .profile-form select,html[data-ui-scale="compact"] .profile-form input{height:42px;min-height:42px!important}

/* Тело: длинные подписи и единицы не выходят за карточку */
.body-metric{min-width:0;overflow:hidden}
.body-metric .body-metric-value{flex-wrap:wrap!important;row-gap:0!important}
.body-metric .body-metric-value small,.body-metric .body-metric-unit{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.body-metric .body-metric-label{overflow-wrap:normal;word-break:normal;hyphens:auto;-webkit-hyphens:auto}

/* Еда: кнопка удаления продукта — аккуратная круглая, без «квадрата» */
.ingredient .ingredient-remove-btn{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%!important;background:transparent!important;color:var(--muted)!important;border:1px solid var(--card-line)!important;box-shadow:none!important;font-size:17px;line-height:1;filter:none}
.ingredient .ingredient-remove-btn:hover{color:var(--danger)!important;border-color:var(--danger-line)!important;background:var(--danger-soft)!important}
/* «Применить вес» ✓: неактивна — почти невидима, после изменения веса — яркая */
.weight-commit{border-radius:50%!important;box-shadow:none!important}
.weight-commit:disabled{background:transparent!important;color:var(--muted-2)!important;border:1px dashed var(--card-line)!important;filter:none!important;opacity:.55}
.weight-commit:not(:disabled){background:var(--grad-accent)!important;color:var(--on-accent)!important;border:0!important;box-shadow:0 6px 16px var(--glow)!important}
/* Профиль: активность (с подсказкой) — на всю ширину, «Тема» и «Размер интерфейса» — парой */
.profile-form label:nth-child(8),.profile-form .toggle-field{grid-column:1/-1}

/* Тело: единица «ккал/сутки» — под числом (не обрезается); мелкий текст не меньше 9px */
#bodyView .body-metric[data-metric="actual_expenditure_kcal"] .body-metric-value{white-space:normal!important}
#bodyView .body-metric[data-metric="actual_expenditure_kcal"] .body-metric-value-main{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
#bodyView .body-metric[data-metric="actual_expenditure_kcal"] .body-metric-unit{font-size:9px!important;margin:1px 0 0!important;opacity:.85}
#bodyView .body-metric .body-metric-status,#bodyView .body-metric .body-energy-status{font-size:9px!important;line-height:1.2!important}
#bodyView .body-metric[data-metric="actual_expenditure_kcal"] .body-metric-label{font-size:10px!important;line-height:1.1!important}
#bodyView .body-metric{height:auto!important;min-height:0!important}
@media (max-width:620px){#bodyView .body-metric-column{height:auto!important;min-height:242px}}
#bodyView .body-metric[data-metric="actual_expenditure_kcal"] .body-energy-status{font-size:9px!important;line-height:1.2!important}
/* Тело (ПК): карточка «Вес» — центрированный блок: значок и подпись в одной строке над числом */
@media (min-width:621px){
  #bodyView .body-weight-hero{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
  #bodyView .body-weight-hero>*{margin-left:0!important;margin-right:0!important}
}
:root{--chart-goal:#d1862c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chart-goal:#ffb35c}}
:root[data-theme="dark"]{--chart-goal:#ffb35c}