/* ---------- welcome ---------- */
.welcome { justify-content: flex-end; text-align: center; overflow: hidden; }
.welcome::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 26% at 95% 40%, rgba(124, 92, 255, .12), transparent 72%),
    radial-gradient(60% 40% at 25% 30%, rgba(34, 211, 238, .04), transparent 70%),
    radial-gradient(55% 35% at 50% 38%, rgba(124, 92, 255, .12), transparent 70%);
  filter: blur(4px);
}
.hero-orb { width: 156px; height: 156px; margin: auto auto 36px; border-radius: 50%; padding: 3px; background: var(--ring-gradient); position: relative;  }
.hero-orb > div { width: 100%; height: 100%; border-radius: 50%; background: var(--orb-bg); display: grid; place-items: center; }
.hero-orb svg { width: 68px; height: 68px; }
@keyframes orb-float { 50% { transform: translateY(-6px); } }
.welcome .chips { margin: 24px 0 30px; }
.welcome .lead { margin-top: 14px; font-size: 18px; }

/* ---------- onboarding ---------- */
.onboarding .ai-line { margin: 4px 0 26px; }
.onboarding .bubble-ai { flex: 1; }
.onboarding .footer { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.onboarding .footer .caption { text-align: center; font-size: 15px; color: var(--text-2); }
.consent { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; padding: 16px 18px; border-radius: var(--r-card-sm); background: var(--chip); border: 1.5px solid var(--chip-border); font-size: 15px; line-height: 1.4; color: var(--text-body); }
.consent .check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #CBD5E1; flex: none; display: grid; place-items: center; background: var(--surface); color: #fff; }
.consent[aria-checked='true'] .check { background: var(--accent-gradient-diag); border: 0; }
.consent .check svg { width: 16px; height: 16px; }
.consent b { color: var(--text); }

/* ---------- scanner ---------- */
.scanner { background: radial-gradient(120% 70% at 50% 40%, #2C2D33 0%, var(--scan-bg) 70%); color: #fff; padding-left: 24px; padding-right: 24px; overflow: hidden; }
.scanner video, .scanner .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scanner .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .45), transparent 22%, transparent 62%, rgba(0, 0, 0, .7)); }
.scanner > *:not(video):not(.veil):not(.shot) { position: relative; z-index: 2; }
.scan-top { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.glass-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--scan-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; color: #fff; }
.glass-btn svg { width: 26px; height: 26px; }
.glass-btn[aria-pressed='true'] { background: #fff; color: #0F172A; }
.glass-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--scan-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 800; font-size: 16px; }
.frame { position: relative; width: min(72vw, 290px); aspect-ratio: 1 / 1; margin: 9vh auto 0; }
.frame.barcode { aspect-ratio: 1.6 / 1; margin-top: 14vh; }
.frame i { position: absolute; width: 48px; height: 48px; border: 4px solid; }
.frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 22px 0 0 0; border-color: #A78BFA; }
.frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 22px 0 0; border-color: #67E8F9; }
.frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 22px; border-color: #A78BFA; }
.frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 22px 0; border-color: #67E8F9; }
.frame .beam { position: absolute; left: 6%; right: 6%; height: 3px; top: 50%; border-radius: 2px; background: linear-gradient(90deg, transparent, #8B5CF6 30%, #22D3EE 70%, transparent); box-shadow: 0 0 18px 4px rgba(124, 92, 255, .45); animation: beam 2.4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { top: 18%; } 50% { top: 82%; } }
.frame .placeholder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32%; height: 60%; border-radius: 26px; background: #4A4A52; }
.frame .placeholder::before { content: ''; position: absolute; left: 4%; right: 4%; top: -7%; height: 10%; border-radius: 8px; background: #505058; }
.frame.found i { border-color: #34D399 !important; transition: border-color .2s; }
.scan-hint { text-align: center; margin-top: 30px; }
.scan-hint .t { font-size: 19px; font-weight: 800; }
.scan-hint .s { color: rgba(255, 255, 255, .72); font-size: 16px; margin-top: 4px; }
.scan-bottom { margin-top: auto; display: grid; gap: 26px; justify-items: center; padding-bottom: 6px; }
.seg-dark { display: inline-flex; padding: 5px; border-radius: 30px; background: var(--scan-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.seg-dark button { min-height: 48px; padding: 0 26px; border-radius: 24px; font-weight: 800; font-size: 17px; color: #fff; }
.seg-dark button[aria-pressed='true'] { background: #fff; color: #0F172A; }
.shutter-row { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.square-btn { width: 56px; height: 56px; border-radius: 18px; background: var(--scan-surface-2); display: grid; place-items: center; color: #fff; position: relative; }
.square-btn svg { width: 26px; height: 26px; }
.square-btn .count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent-gradient-diag); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.square-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.shutter { width: 86px; height: 86px; border-radius: 50%; padding: 6px; background: var(--ring-gradient); box-shadow: 0 0 40px 6px rgba(124, 92, 255, .35); }
.shutter > span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.shutter:active > span { transform: scale(.92); }
.shutter[disabled] { opacity: .5; }
.scan-batch { display: flex; gap: 10px; justify-content: center; }
.scan-batch .item { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .6); position: relative; }
.scan-batch .item img { width: 100%; height: 100%; object-fit: cover; }
.scan-batch .item button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.scan-batch .item button svg { width: 12px; height: 12px; }
.btn-light { background: #fff; color: #0F172A; }
.scan-fallback { margin: 3vh 0 24px; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, .08); display: grid; gap: 14px; }
.scan-fallback .field { background: rgba(255, 255, 255, .12); color: #fff; }
.scan-fallback .field::placeholder { color: rgba(255, 255, 255, .55); }
.scan-fallback .demo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-fallback .demo-list button { min-height: 40px; padding: 0 14px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: 14px; }
.busy-overlay { position: absolute; inset: 0; z-index: 5 !important; display: grid; place-items: center; align-content: center; gap: 18px; background: rgba(15, 16, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; padding: 30px; }
.busy-overlay .orb { width: 84px; height: 84px; border-radius: 50%; padding: 5px; background: var(--ring-gradient); animation: spin 2.4s linear infinite; }
.busy-overlay .orb > div { width: 100%; height: 100%; border-radius: 50%; background: #1C1D22; display: grid; place-items: center; }
.busy-overlay .orb svg { width: 34px; height: 34px; animation: spin 2.4s linear infinite reverse; }
.busy-overlay .t { font-weight: 800; font-size: 19px; }
.busy-overlay .s { color: rgba(255, 255, 255, .7); font-size: 15px; }

/* ---------- result ---------- */
.result .product-row { margin-top: 8px; }
.result .headline { margin: 26px 0 0; font-size: 30px; line-height: 1.22; font-weight: 800; letter-spacing: -.02em; }
.result .banner { margin-top: 24px; }
.result .gradient-card { margin-top: 18px; }
.result .chips { margin-top: 18px; }
.flag-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; color: var(--warn-strong); font-size: 15px; line-height: 1.4; background: var(--warn-bg); border-radius: 16px; padding: 12px 14px; }
.flag-row svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.need-data { margin-top: 22px; display: grid; gap: 14px; }
.survey { margin-top: 22px; border-radius: var(--r-card); background: var(--chip); border: 1.5px solid var(--chip-border); padding: 16px 18px; }
.survey .q { font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.survey .chips { margin-top: 12px !important; }
.survey .chip { background: var(--surface); }

/* ---------- alternatives ---------- */
.alts .h2 { margin-top: 6px; }
.alts .lead { margin-top: 6px; color: var(--text-2); }
.alts .segmented { margin: 22px 0 18px; }
.yours { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-card-sm); background: var(--chip); margin-bottom: 18px; }
.yours .label { flex: 1; color: var(--text-body); font-size: 16px; min-width: 0; }
.yours .metric { font-weight: 800; font-size: 20px; color: var(--warn-text); white-space: nowrap; }
.alts .note { text-align: center; margin-top: 22px; color: var(--text-2); font-size: 15px; }

/* ---------- chat ---------- */
.chat-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; margin: calc(-12px - env(safe-area-inset-top)) calc(-1 * var(--gutter)) 10px; padding: calc(12px + env(safe-area-inset-top)) 10px 8px; min-height: 56px; background: linear-gradient(var(--bg) 75%, transparent); }
.product-pill { display: inline-flex; align-items: center; gap: 12px; padding: 5px 18px 5px 5px; border-radius: 30px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 800; font-size: 16px; max-width: calc(100% - 56px); }
.product-pill .thumb { width: 38px; height: 38px; border-radius: 50%; font-size: 14px; }
.product-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages { display: grid; gap: 22px; }
.msg-user { justify-self: end; max-width: 85%; padding: 14px 20px; border-radius: 24px 24px 8px 24px; background: var(--accent-gradient); color: #fff; font-weight: 700; font-size: 18px; line-height: 1.35; }
.msg-ai { display: flex; gap: 14px; align-items: flex-start; }
.msg-ai .body { flex: 1; min-width: 0; font-size: 18px; line-height: 1.5; color: var(--text); }
.msg-ai .body p { margin: 0 0 12px; }
.msg-ai .body ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.msg-ai .body li { position: relative; padding-left: 26px; }
.msg-ai .body li::before { content: ''; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-from); }
.msg-ai .body li:nth-child(2n)::before { background: #22D3EE; }
.msg-ai .body b { font-weight: 800; }
.msg-ai .source-line { margin-top: 2px; }
.msg-ai .chips { margin-top: 14px; }
.msg-ai .typing { display: flex; gap: 6px; padding: 12px 0; }
.msg-ai .typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); animation: blink 1.2s infinite; }
.msg-ai .typing i:nth-child(2) { animation-delay: .2s; } .msg-ai .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.disclaimer { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 84px); width: min(100%, var(--app-max)); text-align: center; color: var(--text-3); font-size: 14px; z-index: 21; padding: 0 var(--gutter); }
.chat .with-bar { padding-bottom: 150px; }

/* Conversation cards keep long product names and questions readable on a phone. */
.chat { background: var(--page); }
.chat .chat-head { background: var(--page); gap: 10px; margin-bottom: 20px; }
.chat .chat-head > .icon-btn { flex: none; }
.chat .product-pill { min-width: 0; border: 0; border-radius: 18px; padding: 8px 12px 8px 8px; font-size: 1rem; line-height: 1.35; }
.chat .product-pill .thumb { flex: none; }
.chat .product-pill > span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.chat .messages { gap: 18px; container-type: inline-size; }
.chat .msg-user { max-width: 92%; min-width: 0; padding: 12px 16px; font-size: 1.0625rem; overflow-wrap: anywhere; }
.chat .msg-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.chat .msg-ai > .ai-badge { width: 28px; height: 28px; margin-top: 12px; }
.chat .msg-ai > .ai-badge svg { width: 18px; height: 18px; }
.chat .msg-ai .body { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; font-size: 1.0625rem; overflow-wrap: anywhere; }
.chat .msg-ai .body > p:last-child { margin-bottom: 0; }
.chat .msg-ai .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat .msg-ai .chip { white-space: normal; height: auto; min-height: 44px; max-width: 100%; padding: 10px 14px; font-size: .875rem; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.chat .source-line { font-size: .875rem; }
@container (max-width: 20rem) {
  .chat .msg-ai { grid-template-columns: minmax(0, 1fr); }
  .chat .msg-ai > .ai-badge { display: none; }
  .chat .msg-user { max-width: 100%; }
}

/* ---------- profile ---------- */
/* Profile header: the whole card opens «Мой профиль» (#/profile-summary), like a contact card in phone settings */
.profile-hero { display:flex; align-items:center; gap:16px; padding:16px; min-height:104px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:inherit; text-decoration:none; box-shadow:var(--shadow-card); }
.profile-hero:active { transform:scale(.99); }
.profile-hero:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.profile-hero .avatar { width:64px; height:64px; }
.profile-hero-text { flex:1; min-width:0; display:grid; gap:3px; }
.profile-hero-name { font-size:1.375rem; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.profile-hero-line { font-size:.9375rem; line-height:1.4; color:var(--text); overflow-wrap:anywhere; }
.profile-hero-line.muted { color:var(--text-2); font-size:.875rem; }
.profile-hero-chev { flex:none; color:var(--text-3); }
.profile-hero-chev svg { width:22px; height:22px; display:block; }
.avatar { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: var(--ring-gradient); flex: none; }
.avatar > div { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.avatar span { background: var(--accent-gradient-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- details ---------- */
.details .card + .card { margin-top: 14px; }
.allergy-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.prov { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.prov b { color: var(--text-body); }

.product-row .name::first-letter, .alt-card .name::first-letter { text-transform: uppercase; }

/* Stage 4: plaques, source marks, compact survey, profile hint, ingredient list */
.plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.plaque { border-radius: 18px; padding: 12px 12px 10px; display: grid; gap: 2px; min-width: 0; border: 1.5px solid transparent; }
.plaque .pl-label { font-size: 14px; font-weight: 700; }
.plaque .pl-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.plaque .pl-unit { font-size: 12px; opacity: .8; min-height: 14px; }
.plaque .pl-level { font-size: 13px; font-weight: 700; margin-top: 4px; }
.lvl-low { background: var(--ok-bg); color: var(--ok-text); }
.lvl-medium { background: var(--warn-bg); color: var(--warn-text); }
.lvl-high { background: var(--danger-bg); color: var(--danger-strong); }
.lvl-none { background: var(--neutral-bg); color: var(--neutral-text); }
.plaques-src { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.src-tag { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: var(--neutral-bg); color: var(--neutral-text); vertical-align: middle; text-decoration: none; white-space: nowrap; }
a.src-tag { color: var(--accent-text); background: var(--accent-soft); }
.comparison-table th .src-tag { display: block; width: max-content; margin-top: 4px; }
.wrong-product { display: inline-block; margin-top: 6px; font-size: 15px; min-height: 32px; padding: 0; background: none; border: 0; }
.ai-verdict { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-soft); }
.ai-verdict p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text); }
.ai-verdict .flag-row { margin-top: 10px; }
.profile-hint { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-card); border: 1.5px dashed var(--accent);
  background: var(--accent-soft); display: grid; gap: 6px; }
.profile-hint b { font-size: 17px; }
.profile-hint span { color: var(--text-body); font-size: 15px; }
.profile-hint .btn { margin-top: 6px; min-height: 44px; }
.survey-row { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 8px 14px;
  border-radius: 999px; background: var(--chip); border: 1.5px solid var(--chip-border); font-size: 15px; }
.survey-row .q { font-weight: 700; margin-right: auto; }
.mini-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--chip-border); background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
.survey-x { min-width: 32px; min-height: 32px; border: 0; background: none; font-size: 20px; color: var(--text-3); cursor: pointer; }
.ingredients { margin: 8px 0; padding-left: 22px; display: grid; gap: 4px; }
.ingredients li { line-height: 1.4; }
.traces { margin: 6px 0 8px; font-size: 15px; color: var(--warn-text); }
@media (max-width: 360px) { .plaque .pl-value { font-size: 20px; } }
.metric small { display: block; font-size: 11px; font-weight: 600; opacity: .75; text-align: right; white-space: nowrap; }
.survey-row { gap: 4px; padding: 6px 6px 6px 12px; }
.survey-row .q { font-size: 14px; }
.survey-row .mini-chip { min-height: 30px; padding: 0 8px; font-size: 13px; }
.survey-row .survey-x { min-width: 24px; }
.survey-row { position: relative; padding-right: 8px; }
.survey-row .survey-x { position: absolute; top: -10px; right: -6px; min-width: 24px; min-height: 24px; width: 24px; height: 24px;
  padding: 0; line-height: 1; font-size: 16px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--chip-border); }

/* A compact, optional explanation of product provenance. */
.source-guide { margin:16px 0; border-radius:16px; background:var(--accent-soft); }
.source-guide summary { min-height:48px; padding:14px 16px; cursor:pointer; font-size:14px; font-weight:750; }
.source-guide-body { padding:0 16px 12px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.source-guide dl { margin:0; }
.source-guide dl>div { margin:10px 0; }
.source-guide dt { font-weight:750; }
.source-guide dd { margin:2px 0 0; color:var(--text-2); }
.source-guide p { margin:12px 0; }
.source-guide button { min-height:44px; padding:8px; font-size:15px; }
.source-guide summary:focus-visible,.source-guide button:focus-visible { outline:2px solid var(--text); outline-offset:2px; border-radius:10px; }

/* Diary: quiet surfaces, full-width names and readable totals on a phone. */
.day { background: var(--surface-2); }
.day .card { padding:20px; margin-top:16px; border:1px solid var(--line); border-radius:20px; box-shadow:none; }
.day h1 { font-size:2rem; letter-spacing:-.04em; margin-top:12px; }
.day h2 { font-size:1.125rem; }
.day .empty { background: var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 20px; }
.day-summary { font-size:.9375rem; line-height:1.5; color:var(--text-2); padding-left:20px; }
.day-summary li+li { margin-top:8px; }
.day-list { list-style:none; padding:0; margin:0; }
.day-entry { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:16px 0; border-bottom:1px solid var(--line); }
.day-entry:last-child { border-bottom:0; padding-bottom:0; }
.day-entry>a { overflow-wrap:anywhere; color:var(--text); text-decoration:none; font-size:1rem; line-height:1.45; }
.day-entry>span { font-size:.875rem; }
.day-entry-actions { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:4px; }
.day-entry-actions button { min-width:44px; min-height:44px; font-size:.875rem; padding:6px 0; }
.day-entry-actions button:last-child { color:var(--text-2); }
.day-entry button:focus-visible { outline:2px solid var(--text); outline-offset:2px; border-radius:8px; }
.day-totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr)); gap:10px; margin-bottom:0; }
.day-total { min-width:0; padding:14px; background: var(--surface-2); border-radius:14px; overflow-wrap:anywhere; }
.day-total dt { color:var(--text-2); font-size:.875rem; }
.day-total dd { margin:6px 0 0; font-weight:700; font-size:1.125rem; line-height:1.3; }
.day-total-energy { grid-column:1 / -1; }
.day-total-energy dd { font-size:1.75rem; letter-spacing:-.03em; }
.day-total .muted { font-size:.875rem; font-weight:400; }
.day-total .day-total-note { font-weight:400; margin-top:8px; }
.day-totals .caption { display:block; }
.day-date { display:grid; gap:8px; font-size:.875rem; font-weight:700; color:var(--text-2); margin:20px 0; }
.day-date select { min-width:0; width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:1rem; color:var(--text); background: var(--surface); border:1px solid var(--line); border-radius:14px; }

/* Result: the rules' conclusion and warnings keep their order; only presentation changes. */
.result { background: var(--surface-2); }
.result .product-row { padding:16px; background: var(--surface); border:1px solid var(--line); border-radius:20px; align-items:flex-start; gap:12px; }
.result .product-row .name { font-size:1rem; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.result .product-row .meta { font-size:.875rem; margin-top:6px; overflow-wrap:anywhere; }
.result .product-row .thumb { width:52px; height:64px; border-radius:12px; background: var(--thumb); }
.result .product-row .thumb img { object-fit:contain; }
.result .wrong-product { font-size:.875rem; min-height:44px; text-align:left; }
.result .headline { font-size:1.75rem; line-height:1.3; letter-spacing:-.035em; margin-top:24px; overflow-wrap:anywhere; }
.result .headline .accent-text { background:none; color:var(--accent-text); }
.result .plaques { grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr)); gap:8px; }
.result .plaque { padding:12px 10px; border-radius:16px; align-content:start; overflow-wrap:anywhere; }
.result .plaque .pl-label { font-size:.875rem; }
.result .plaque .pl-value { font-size:1.25rem; margin-top:4px; }
.result .plaque .pl-unit,.result .plaque .pl-level { font-size:.875rem; opacity:1; }
.result .plaques-src { font-size:.875rem; }
.plaque .pl-meter { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; margin-top:6px; }
.plaque .pl-meter i { height:4px; border-radius:2px; background:currentColor; opacity:.18; }
.plaque .pl-meter i.on { opacity:1; }
.result .plaque .pl-pack { margin-top:8px; padding-top:8px; border-top:1px solid currentColor; border-top-color:color-mix(in srgb, currentColor 25%, transparent); font-size:.75rem; line-height:1.3; color:var(--text-body); }
.result .plaque .pl-pack.over { color:var(--warn-text); font-weight:700; }
.result .src-tag { font-size:.875rem; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
.result .banner { align-items:flex-start; font-size:1rem; gap:10px; padding:16px; border-radius:16px; }
.result .banner>span:last-child { min-width:0; overflow-wrap:anywhere; }
.result .flag-row { font-size:.9375rem; }
.result .profile-hint,.result .ai-verdict,.result .source-guide { background: var(--surface); border:1px solid var(--line); border-radius:20px; }
.result .profile-hint b { font-size:1rem; }
.result .profile-hint span { font-size:.9375rem; }
.result .ai-verdict p { font-size:1rem; }
.result .source-guide summary,.result .source-guide-body,.result .source-guide button { font-size:.875rem; }
.result .gradient-card { background: var(--surface); border-color:var(--line); }
.result .survey-row { border-radius:16px; background: var(--surface); padding:12px; gap:8px; }
.result .survey-row .q { flex-basis:100%; font-size:.875rem; }
.result .survey-row .mini-chip { min-height:44px; padding:8px 12px; font-size:.875rem; }
.result .survey-row .survey-x { position:static; width:44px; min-width:44px; min-height:44px; height:auto; margin-left:auto; font-size:1.25rem; }
.result .topbar .center { min-width:0; font-size:1rem; flex-wrap:wrap; }
.result .product-row,.result .gradient-card { container-type:inline-size; }
.result .product-row { display:grid; grid-template-columns:52px minmax(0,1fr); }
.result .alt-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; }
.result .alt-card .thumb { width:44px; height:56px; border-radius:12px; }
.result .alt-card .thumb img { object-fit:contain; }
.result .alt-card .name { font-size:1rem; line-height:1.4; overflow-wrap:anywhere; }
.result .alt-card .why { font-size:.9375rem; }
.result .alt-card .metric { grid-column:2; font-size:1.125rem; white-space:normal; overflow-wrap:anywhere; }
.result .alt-card .metric small { font-size:.875rem; white-space:normal; text-align:left; }
.result .alt-card .chev { display:none; }
@container (max-width:14rem) {
  .result .product-row>div:last-child { grid-column:1 / -1; }
  .result .alt-card>span:nth-child(2),.result .alt-card .metric { grid-column:1 / -1; }
}

/* Alternatives keep the same data and selection rules, with room for readable names. */
.alts { background: var(--surface-2); }
.alts .h2 { font-size:1.625rem; line-height:1.3; letter-spacing:-.03em; overflow-wrap:anywhere; }
.alts .lead { font-size:.9375rem; line-height:1.5; }
.alts .segmented { grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr)); gap:8px; }
.alts .segmented .chip { font-size:.875rem; min-height:52px; padding:10px 8px; border-radius:14px; background: var(--surface); }
.alts .segmented .chip.selected { background:var(--text); color:var(--bg); border-color:var(--text); }
.alts .yours { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:start; background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; }
.alts .yours .label { font-size:.875rem; overflow-wrap:anywhere; }
.alts .yours .metric { grid-column:2; font-size:1rem; white-space:normal; overflow-wrap:anywhere; color:var(--text); }
.alts .card,.alts .gradient-card { padding:16px; border-radius:20px; background: var(--surface); border:1px solid var(--line); container-type:inline-size; }
.alts .gradient-card { border-color:var(--accent); box-shadow:none; }
.alts .alt-card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; }
.alts .alt-card .thumb { width:44px; height:56px; border-radius:12px; background: var(--thumb); }
.alts .alt-card .thumb img { object-fit:contain; }
.alts .alt-card .name { font-size:1rem; line-height:1.4; overflow-wrap:anywhere; margin:4px 0; }
.alts .alt-card .kicker { font-size:.875rem; }
.alts .alt-card .why { font-size:.9375rem; }
.alts .alt-card .metric { grid-column:2; font-size:1.125rem; white-space:normal; overflow-wrap:anywhere; }
.alts .metric small { font-size:.875rem; text-align:left; white-space:normal; opacity:1; }
.alts .alt-list .btn { font-size:.875rem; min-height:44px; padding:10px 12px; border-radius:12px; }
.alts .note { font-size:.875rem; line-height:1.5; }
.alts .empty { background: var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 20px; }
@container (max-width:14rem) {
  .alts .alt-card>span:nth-child(2),.alts .alt-card .metric { grid-column:1 / -1; }
}
.alts .alt-list .btn { text-decoration:none; }

.result-chat-entry { display:flex; align-items:center; gap:12px; margin-top:16px; padding:16px; border:1px solid var(--chip-border); border-radius:20px; background: var(--surface); text-decoration:none; }
.result-chat-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--accent-text); background:var(--accent-soft); flex:none; }
.result-chat-icon svg { width:22px; height:22px; }
.result-chat-entry .grow { flex:1; min-width:0; overflow-wrap:anywhere; }
.result-chat-entry b { display:block; font-size:1rem; }
.result-chat-entry small { display:block; margin-top:4px; font-size:.875rem; color:var(--text-2); }
.result-chat-entry>svg { width:18px; height:18px; color:var(--text-3); flex:none; }
.result-chat-entry:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* Details stay readable without a three-column nutrition table. */
.details { background:var(--surface-2); }
.details .card { margin-top:16px; padding:18px; border-radius:20px; background:var(--surface); }
.details h2 { font-size:1.125rem; }
.details .prov,.details .traces { font-size:.875rem; overflow-wrap:anywhere; }
.details .src-tag { font-size:.875rem; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
.details .topbar .title { min-width:0; overflow-wrap:anywhere; }
.details .product-row { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:start; padding:16px; border:1px solid var(--line); border-radius:20px; background:var(--surface); container-type:inline-size; }
.details .product-row .thumb { width:52px; height:64px; border-radius:12px; }
.details .product-row .thumb img { object-fit:contain; }
.details .product-row .name { font-size:1rem; line-height:1.4; overflow-wrap:anywhere; }
.details .product-row .meta { font-size:.875rem; margin-top:6px; overflow-wrap:anywhere; }
.details .allergy-item { flex-wrap:wrap; align-items:flex-start; }
.details .allergy-item>span { min-width:0; overflow-wrap:anywhere; }
.nutrition-list { display:grid; gap:10px; margin-bottom:0; }
.nutrition-item { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr)); gap:8px 12px; padding:14px; border-radius:14px; background:var(--surface-2); }
.nutrition-item dt { grid-column:1 / -1; font-size:.9375rem; font-weight:700; overflow-wrap:anywhere; }
.nutrition-item dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.nutrition-item dd>span { display:block; font-size:.875rem; color:var(--text-2); }
.nutrition-item dd>b { display:block; margin-top:4px; font-size:1.0625rem; font-weight:700; }
.nutrition-item .muted { font-size:.875rem; font-weight:400; }
@container (max-width:14rem) {
  .details .product-row>div:last-child { grid-column:1 / -1; }
}
.day-again-list { display:flex; flex-wrap:wrap; gap:8px; }
.day-again-chip { display:inline-flex; align-items:baseline; gap:8px; max-width:100%; min-height:44px; text-align:left; }
.day-again-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-weight:600; }
.day-again-chip .muted { flex:none; }
/* «Мой день» по целям */
.day-goals { margin:6px 0 0; font-size:.875rem; color:var(--text-2); }
.day-goals-edit { display:inline; padding:12px 0; color:var(--accent-text); font-weight:600; }
.day-ring-progress .day-ring-sub { color:var(--accent-text); }
.day-verdict { margin:14px 0 0; padding:12px 14px; border-radius:14px; text-align:left; font-size:.9375rem; line-height:1.45; }
.day-verdict p { margin:0; }
.day-verdict-text { margin-top:4px !important; color:var(--text-2); }
/* The rules' emoji and short phrase on top of «Мой день»: a calm neutral card, the verdict folded below */
.day-cheer { display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:14px 16px; border-radius:16px; background:var(--surface-2); text-align:left; }
.day-cheer-emoji { flex:none; font-size:36px; line-height:1; }
.day-cheer-body { min-width:0; }
.day-cheer-body p { margin:0; overflow-wrap:anywhere; }
.day-cheer-phrase { font-size:1.125rem; font-weight:800; line-height:1.2; color:var(--text); }
.day-cheer-note { margin-top:3px !important; font-size:.875rem; line-height:1.3; color:var(--text-2); }
.day-cheer-warning { margin-top:5px !important; font-size:.8125rem; font-weight:600; line-height:1.3; color:var(--warn-text); }
.day-verdict-more { margin-top:6px; text-align:left; }
.day-verdict-more > summary { display:inline-block; padding:6px 2px; font-size:.875rem; color:var(--text-2); cursor:pointer; list-style:none; }
.day-verdict-more > summary::-webkit-details-marker { display:none; }
.day-verdict-more > summary::after { content:' ▾'; } .day-verdict-more[open] > summary::after { content:' ▴'; }
.day-verdict-more .day-verdict { margin-top:4px; }
.day-verdict-over { background:var(--warn-bg); } .day-verdict-over .day-verdict-title { color:var(--warn-strong); }
.day-verdict-near { background:var(--accent-soft); } .day-verdict-near .day-verdict-title { color:var(--accent-text); }
.day-verdict-ok { background:var(--ok-bg); } .day-verdict-ok .day-verdict-title { color:var(--ok-text); }
.day-tips { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px; }
.day-tip { display:grid; gap:2px; padding:12px 14px 12px 16px; border-radius:14px; background:var(--surface-2); border-left:4px solid var(--accent); font-size:.9375rem; line-height:1.45; }
.day-tip-over, .day-tip-restriction { border-left-color:var(--danger-icon); }
.day-tip-left, .day-tip-missing, .day-tip-set_limit { border-left-color:var(--warn-text); }
.day-tip-target_met { border-left-color:var(--ok-text); }
.day-tip-action { justify-self:start; min-height:44px; display:inline-flex; align-items:center; color:var(--accent-text); font-weight:700; }
.day-src-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; gap:2px; }
.day-src-seg { min-width:4px; }
.day-src-0 { background:var(--accent); } .day-src-1 { background:#22B8CF; } .day-src-2 { background:#E879A6; } .day-src-rest { background:var(--line); }
.day-src-list { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.day-src-list li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:44px; font-size:.9375rem; }
.day-src-list a { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.day-src-dot { width:10px; height:10px; border-radius:50%; }
.day-meal { font-size:.8125rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin:16px 0 0; }
.day-meal:first-of-type { margin-top:8px; }
.day-more summary { cursor:pointer; min-height:44px; display:flex; align-items:center; list-style-position:outside; }
.day-more summary h2 { display:inline; margin:0; }
.day-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
.day-head h1 { margin:0; }
.day-head .day-date { margin:0; flex:0 1 auto; min-width:0; }
.day-head .day-date select { width:auto; max-width:100%; min-height:44px; padding:8px 12px; font-weight:700; }
.day-hero h2 { font-size:1.25rem; }
@media (min-width: 360px) {
  .day-entry { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; }
  .day-entry>a, .day-entry>span { grid-column:1; }
  .day-entry-actions { grid-column:2; grid-row:1 / span 2; margin-top:0; gap:0 12px; }
}
.day-rings { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.day-ring { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:14px; padding:10px 14px 10px 10px; background:var(--surface-2); border-radius:16px; }
.day-ring-dial { position:relative; width:64px; height:64px; }
.day-ring-dial svg { width:64px; height:64px; display:block; }
.day-ring circle { fill:none; stroke-width:7; stroke-linecap:round; }
.day-ring-track { stroke:var(--line); }
.day-ring-bar { stroke:var(--accent); transition:stroke-dasharray .4s ease; }
.day-ring-near .day-ring-bar { stroke:var(--warn-text); }
.day-ring-over .day-ring-bar { stroke:var(--danger-icon); }
.day-ring-met .day-ring-bar { stroke:var(--ok-text); }
.day-ring-value { position:absolute; inset:0; display:flex; flex-direction:column; line-height:1.05; align-items:center; justify-content:center; font-weight:800; font-size:.875rem; }
.day-ring-value small { font-size:.6875rem; font-weight:600; color:var(--text-2); }
.day-ring-text { display:grid; gap:2px; min-width:0; }
.day-ring-text b { font-size:1rem; }
.day-ring-mark { margin-left:6px; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-text); font-size:.75rem; vertical-align:2px; }
.day-ring-total { font-size:.875rem; color:var(--text-2); }
.day-ring-sub { font-size:.875rem; font-weight:700; }
.day-ring-over .day-ring-sub { color:var(--danger-text); }
.day-ring-near .day-ring-sub { color:var(--warn-text); }
.day-ring-met .day-ring-sub, .day-ring-ok .day-ring-sub { color:var(--ok-text); }
/* Действия на экране продукта: четыре плитки с иконками, ниже — ссылки на состав и источники */
.result-actions { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:20px; }
.result-action { display:grid; justify-items:center; gap:8px; padding:12px 2px; min-height:84px; border:1px solid var(--chip-border); border-radius:18px; background:var(--surface); color:var(--text); font:inherit; font-size:clamp(.6875rem, 3.1vw, .75rem); font-weight:700; line-height:1.2; text-align:center; overflow-wrap:normal; hyphens:none; letter-spacing:-.01em; cursor:pointer; }
.result-action-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-text); }
.result-action-icon svg { width:22px; height:22px; }
.result-action:active { transform:scale(.97); }
.result-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.result-links { margin-top:12px; }
.result-links .chip svg { width:16px; height:16px; color:var(--text-2); }
@media (max-width: 340px) { .result-actions { grid-template-columns:repeat(2, minmax(0,1fr)); } .result-action { min-height:72px; grid-template-columns:auto 1fr; justify-items:start; align-items:center; text-align:left; padding:10px; font-size:.875rem; } }

/* Профиль: карточка сводки и строки с иконками */
.profile-summary-card { display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r-card); background:var(--info-bg); border:1px solid var(--line); color:var(--text); text-decoration:none; }
.profile-summary-card .grow { flex:1; min-width:0; }
.profile-summary-card b { display:block; font-size:1.0625rem; }
.profile-summary-card small { display:block; margin-top:2px; color:var(--text-2); font-size:.875rem; line-height:1.4; }
.profile-summary-card > svg { width:22px; height:22px; color:var(--text-3); flex:none; }
.profile-summary-icon, .row-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-text); }
.profile-summary-icon svg, .row-icon svg { width:22px; height:22px; }
.icon-row .v { font-size:1.0625rem; }

/* Сравнение без выбранных продуктов */
.compare-empty { text-align:center; }
.compare-empty-icon { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--accent-soft); color:var(--accent-text); }
.compare-empty-icon svg { width:32px; height:32px; }
.compare-steps { text-align:left; margin:16px auto 0; padding-left:22px; max-width:320px; color:var(--text-2); font-size:.9375rem; line-height:1.5; }
.compare-steps li + li { margin-top:8px; }

/* Резервная копия в «Что хранится» */
.backup-card { padding:18px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface); }
.backup-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.backup-btn { display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); color:var(--text); font:inherit; font-size:.9375rem; font-weight:700; text-align:left; cursor:pointer; }
.backup-btn .row-icon { width:34px; height:34px; border-radius:10px; }
@media (max-width: 440px) { .backup-actions { grid-template-columns:1fr; } }
.row-icon-danger { background:var(--danger-bg); color:var(--danger-strong); }
.consent-note { gap:12px; }

/* Manual label entry: labels remain visible after typing, including with large text. */
.manual { background: var(--page); }
.manual .lead { font-size: 1.0625rem; line-height: 1.5; }
.manual-group { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); display: grid; gap: 16px; }
.manual-group legend { max-width: 100%; padding: 0 6px; font-size: 1.125rem; font-weight: 800; overflow-wrap: anywhere; }
.manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 16px; }
.manual-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.manual-field .caption, .manual-field [data-error] { font-weight: 500; }
.manual .field { min-width: 0; padding-inline: 16px; border-radius: 14px; }
.manual textarea.field { min-height: 150px; }
.manual [data-draft-note]:empty { display: none; }
.manual [hidden] { display: none; }
.busy-overlay .busy-cancel { min-width: 160px; }
/* «Мой день» before the first portion: steps, where to go, what will appear */
.day-start-steps, .day-start-list { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px; }
.day-start-step, .day-start-list li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; }
.day-start-step b, .day-start-list b { font-size:1rem; line-height:1.4; }
.day-start-step p, .day-start-list p { margin:0; color:var(--text-2); line-height:1.45; }
.day-start-num { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.9375rem; }
.day-start-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--surface-2); color:var(--accent-text); }
.day-start-icon svg { width:18px; height:18px; }
.day-start-actions { display:grid; gap:10px; margin-top:20px; }
.day-start-actions .btn { text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.day-start-actions .btn svg { width:20px; height:20px; flex:none; }
.day-start-preview .day-goals-edit { padding:0; }
.plaque .nowrap { white-space:nowrap; }

/* «Мой день» as a diary: ink colours instead of the AI gradient, compact rows that read well on a phone */
.day { --diary-ink:#0F766E; --diary-soft:#E6F4F1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .day { --diary-ink:#5EEAD4; --diary-soft:#12302E; } }
:root[data-theme="dark"] .day { --diary-ink:#5EEAD4; --diary-soft:#12302E; }
.day .card { padding:14px 16px; border-radius:16px; box-shadow:none; border:1px solid var(--line); margin-top:12px; }
.day .card .h3 { font-size:1.0625rem; margin:0; }
.day .day-head { margin-top:4px; }
.day .day-hero h2 { font-size:1.0625rem; }
.day .day-goals { margin-top:2px; }
.day .day-goals-edit, .day .day-tip-action, .day .day-src-list a { color:var(--diary-ink); }
/* Limits: one line each, a thin bar instead of a ring */
.day .day-rings { gap:0; margin-top:6px; }
.day .day-ring { display:block; padding:10px 0; background:none; border-radius:0; border-top:1px solid var(--line); }
.day .day-ring:first-child { border-top:0; }
.day .day-ring-dial { display:none; }
.day .day-ring-text { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:4px; align-items:baseline; }
.day .day-ring-text b { grid-column:1; font-size:.9375rem; }
.day .day-ring-sub { grid-column:2; grid-row:1; text-align:right; font-size:.875rem; }
.day .day-ring-line { grid-column:1 / -1; display:block; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.day .day-ring-line i { display:block; height:100%; border-radius:3px; background:var(--diary-ink); }
.day .day-ring-near .day-ring-line i { background:var(--warn-text); }
.day .day-ring-over .day-ring-line i { background:var(--danger-icon); }
.day .day-ring-met .day-ring-line i, .day .day-ring-ok .day-ring-line i { background:var(--ok-text); }
.day .day-ring-progress .day-ring-sub { color:var(--diary-ink); }
.day .day-ring-total { grid-column:1 / -1; font-size:.8125rem; }
.day .day-ring-mark { background:var(--diary-soft); color:var(--diary-ink); font-size:.6875rem; padding:1px 6px; margin-left:4px; }
/* Eaten: compact rows */
.day .day-meal { margin:12px 0 0; font-size:.75rem; }
.day .day-entry { padding:8px 0; gap:0 12px; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.day .day-entry>a, .day .day-entry>span { grid-column:1; }
.day .day-entry>a { font-size:.9375rem; line-height:1.35; }
.day .day-entry>a b { font-weight:600; }
.day .day-entry>span { font-size:.8125rem; }
.day .day-entry-actions { grid-column:2; grid-row:1 / span 2; margin:0; gap:0 10px; }
.day .day-entry-actions button { font-size:.8125rem; min-height:40px; color:var(--diary-ink); }
.day .day-entry-actions button:last-child { color:var(--text-2); }
/* Notes: plain lines with a coloured dot, not callouts */
.day .day-tips { gap:0; margin-top:6px; }
.day .day-tip { position:relative; background:none; border:0; border-radius:0; padding:8px 0 8px 16px; border-top:1px solid var(--line); font-size:.875rem; line-height:1.4; }
.day .day-tip:first-child { border-top:0; }
.day .day-tip::before { content:''; position:absolute; left:0; top:15px; width:7px; height:7px; border-radius:50%; background:var(--diary-ink); }
.day .day-tip-over::before, .day .day-tip-restriction::before { background:var(--danger-icon); }
.day .day-tip-left::before, .day .day-tip-missing::before, .day .day-tip-set_limit::before { background:var(--warn-text); }
.day .day-tip-target_met::before { background:var(--ok-text); }
.day .day-tip-action { min-height:32px; font-size:.875rem; }
.day .day-src-bar { height:8px; }
.day .day-src-0 { background:var(--diary-ink); }
.day .day-src-list li { min-height:36px; font-size:.875rem; }
.day .day-summary { font-size:.875rem; }
.day [data-week] .day-summary li+li { margin-top:4px; }
.day .caption { font-size:.75rem; }

/* «Мой день» like a fitness watch: a big ring for the main number, small ring tiles, the week as rings */
.day .dial-kcal { --dial:#FF375F; } .day .dial-protein { --dial:#30D158; } .day .dial-sugar { --dial:#FF9F0A; }
.day .dial-salt { --dial:#22B8CF; } .day .dial-satfat { --dial:#BF5AF2; } .day .dial-other { --dial:var(--text-2); }
.day svg circle.dial-track, .day svg circle.dial-bar, .day svg circle.dial-over { fill:none; stroke-linecap:round; }
.day .dial-track { stroke:var(--dial); opacity:.16; }
.day .dial-bar { stroke:var(--dial); transition:stroke-dasharray .6s ease; }
.day .dial-over { stroke:var(--danger-icon); }
.day .dial-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dial); }
.day .dial-sub { font-weight:700; color:var(--text-2); }
.day .dial-state-over .dial-sub { color:var(--danger-text); }
.day .dial-state-near .dial-sub { color:var(--warn-text); }
.day .dial-state-met .dial-sub, .day .dial-state-ok .dial-sub { color:var(--ok-text); }
.day .dial-state-progress .dial-sub { color:var(--dial); }
.day .day-watch { margin-top:12px; }
.day .watch-main { display:grid; justify-items:center; text-align:center; }
.day .watch-main-ring { position:relative; width:176px; height:176px; }
.day .watch-main-ring svg { width:176px; height:176px; display:block; }
.day .watch-main-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.day .watch-main-name { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--dial); }
.day .watch-main-center b { font-size:2.75rem; font-weight:800; letter-spacing:-.04em; color:var(--text); margin:2px 0; font-variant-numeric:tabular-nums; }
.day .watch-main-center span:last-child { font-size:.8125rem; color:var(--text-2); }
.day .watch-main-sub { margin:10px 0 0; font-size:1rem; }
.day .watch-basis { margin:2px 0 0; font-size:.75rem; color:var(--text-2); }
.day .watch-tiles { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; }
.day .watch-tile { display:grid; justify-items:center; text-align:center; gap:4px; padding:12px 6px; border-radius:16px; background:var(--surface-2); }
.day .watch-tile-name { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dial); }
.day .watch-tile-ring { width:56px; height:56px; display:block; margin:2px 0; }
.day .watch-tile .dial-value { font-size:.8125rem; color:var(--text-2); }
.day .watch-tile .dial-value b { font-size:1.25rem; font-weight:800; color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.day .watch-tile .dial-sub { font-size:.75rem; line-height:1.25; }
/* Eaten: calories of each portion on the right, like a workout list */
.day .day-meal { display:flex; justify-content:space-between; align-items:baseline; }
.day .day-meal-kcal { font-weight:700; color:var(--text-2); letter-spacing:0; text-transform:none; }
.day .day-entry { grid-template-columns:minmax(0,1fr) auto; }
.day .day-entry>a { grid-row:1; } .day .day-entry>span.muted { grid-row:2; }
.day .day-entry-kcal { grid-column:2; grid-row:1; justify-self:end; font-size:.875rem; font-weight:800; color:#FF375F; white-space:nowrap; font-variant-numeric:tabular-nums; }
.day .day-entry-actions { grid-column:1 / -1; grid-row:auto; justify-content:flex-start; gap:0 16px; }
.day .day-entry-actions button { min-height:36px; }
/* All numbers of the day as tiles */
.day .day-totals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.day .day-total { padding:10px 12px; border-radius:14px; position:relative; }
.day .day-total dt { font-size:.8125rem; font-weight:700; }
.day .day-total .day-total-note { margin-top:4px; } .day .day-total .day-total-note .caption { font-size:.6875rem; line-height:1.3; }
.day .day-total dd { font-size:1.0625rem; font-weight:800; font-variant-numeric:tabular-nums; }
.day .day-total-energy dd { font-size:1.75rem; color:#FF375F; }
.day .day-total-protein dt { color:#30D158; } .day .day-total-sugar dt { color:#FF9F0A; } .day .day-total-salt dt { color:#22B8CF; }
.day .day-total-saturated_fat dt { color:#BF5AF2; }
.day .day-more { margin-top:8px; }
.day .day-more summary { font-size:.875rem; font-weight:700; color:var(--text-2); }
/* The week as rings, one per day */
.day .week-strip-head { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:.8125rem; font-weight:700; color:var(--text-2); }
.day .week-strip-head .dial-dot { --dial:#FF375F; }
.day .week-strip-head .dial-sugar { --dial:#FF9F0A; } .day .week-strip-head .dial-protein { --dial:#30D158; } .day .week-strip-head .dial-salt { --dial:#22B8CF; }
.day .week-strip { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.day .week-day { display:grid; justify-items:center; gap:4px; font-size:.75rem; font-weight:700; color:var(--text-2); }
.day .week-day svg { width:36px; height:36px; display:block; }
.day .week-today span { color:var(--text); background:var(--surface-2); border-radius:8px; padding:0 6px; }
.day .week-over span { color:var(--danger-text); }
.day .week-lines { padding-left:0; list-style:none; font-size:.875rem; }
.day .week-lines li { padding:8px 0 0; border-top:1px solid var(--line); margin-top:8px; }

.review-panel { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:0 16px; }
.review-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:12px 0; font-size:.9375rem; text-align:left; font-weight:600; color:var(--accent-text); }
.review-toggle svg { width:20px; height:20px; flex:none; }
.review-toggle>span:last-child { margin-left:auto; }
.review-toggle:disabled { opacity:.65; cursor:wait; }
.detailed-review { border-top:1px solid var(--line); padding:4px 0 14px; font-size:.9375rem; line-height:1.65; overflow-wrap:anywhere; }
.detailed-review section { margin-top:20px; }
.detailed-review h3 { font-size:1rem; margin:0 0 8px; }
.detailed-review p { margin:10px 0; }
.detailed-review ul { padding-left:18px; margin:0; }
.detailed-review li+li { margin-top:10px; }
.review-conclusion { padding-top:14px; border-top:1px solid var(--line); }