/* FOOD·AI 1.30: a shared component layer for both themes. */
:root{--bg:#f6f9f7;--surface:#fff;--surface-soft:#f3f7f5;--surface-muted:#eaf1ed;--text:#16392d;--muted:#61756b;--muted-2:#81928a;--line:#e0e9e3;--line-strong:#c3d6ca;--accent:#26815e;--accent-strong:#196144;--accent-soft:#e6f3eb;--accent-soft-2:#f2f9f4;--danger:#ae3545;--danger-soft:#fff0f2;--danger-line:#efc6cc;--shadow-sm:0 3px 14px #123c2410;--shadow-md:0 16px 48px #10251b26;--glass:rgba(255,255,255,.94);--on-accent:#fff;--ui-speed:200ms;--composer-h:60px}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0c1418;--surface:#142126;--surface-soft:#182a30;--surface-muted:#22363b;--text:#eef8f4;--muted:#b0c4be;--muted-2:#90aaa2;--line:#2b4246;--line-strong:#3d6260;--accent:#48e2b8;--accent-strong:#7cefcf;--accent-soft:#173c36;--accent-soft-2:#132b29;--danger:#ff9aa8;--danger-soft:#3a242d;--danger-line:#70414c;--shadow-sm:0 3px 18px #0004;--shadow-md:0 20px 70px #0009;--glass:rgba(15,27,31,.95);--on-accent:#07271e}
html,body{background:var(--bg)!important;color:var(--text)!important}
body,input,textarea,select,button{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button,a,input,textarea,select{touch-action:manipulation}
button,.backup-download{transition:background-color var(--ui-speed),border-color var(--ui-speed),box-shadow var(--ui-speed),transform 150ms;color:var(--on-accent);background:var(--accent);border-color:transparent}
button:active,.backup-download:active{transform:scale(.97)}
button:disabled{transform:none;opacity:.55;cursor:not-allowed}
.ghost,.icon,.round,.voice-btn,.voice-inline{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.ghost:hover,.icon:hover,.round:hover{background:var(--accent-soft)!important;border-color:var(--line-strong)!important}
.danger,.danger-link,.meal-delete-direct,.ration-remove-btn{color:var(--danger)!important}
.danger{background:var(--danger-soft)!important;border:1px solid var(--danger-line)!important}
input,select,textarea{color:var(--text)!important;background:var(--surface)!important;border-color:var(--line)!important;accent-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted-2)!important;opacity:1}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
.hint,.meal-meta,.field-help,.modal-kicker,.profile-card-kicker{color:var(--muted)!important}
.modern-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.ui-icon{display:inline-flex;align-items:center;color:var(--accent)}
button:has(>.modern-icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}
#app{background:var(--bg)!important;grid-template-rows:44px minmax(0,1fr) calc(64px + env(safe-area-inset-bottom))!important;height:var(--visual-viewport-height,100dvh)!important}
#app>header{display:flex!important;height:44px;min-height:44px;padding:0 max(14px,calc((100vw - 940px)/2))!important;background:var(--glass)!important;border-bottom:1px solid var(--line)!important}
#app>header .brand{font-size:17px!important;letter-spacing:.02em;color:var(--text)!important}
#app>main{min-height:0;overflow:hidden}
.view{padding:12px max(12px,calc((100vw - 940px)/2))!important;background:var(--bg)!important;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.view:not(.hidden){animation:view-enter 180ms ease-out}
.section-title{gap:8px;margin:0 0 10px!important;align-items:center}
.section-title h2,#profileView>h2,.consultation-heading h2{font-size:23px!important;line-height:1.15!important;margin:0!important;letter-spacing:-.04em}
.stats-title-actions{gap:4px!important;display:flex;flex-wrap:wrap;justify-content:flex-end}
.stats-title-actions button{min-height:32px!important;padding:6px 8px!important;font-size:11px!important;border-radius:11px!important}
.stats-title-actions .modern-icon{width:15px;height:15px}
.day-nav{margin:4px 0 8px!important;min-height:34px!important;background:var(--surface)!important;border:1px solid var(--line);border-radius:12px;padding:0 4px!important}
.day-arrow{min-height:32px!important;height:32px!important;padding:0 12px!important;background:transparent!important;border:0!important}
.date-control{min-height:32px!important;height:32px!important}
#daySummary{font-size:11px;margin:0 0 6px!important}
#totals{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;margin:0 0 12px!important;padding:0!important}
.energy-summary{grid-column:1/-1;display:flex;align-items:center;gap:16px;width:100%;min-width:0;padding:12px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:var(--surface)!important;box-shadow:var(--shadow-sm);color:var(--text)!important;text-align:left}
.energy-ring{width:88px;height:88px;flex:none;border-radius:50%;padding:6px;background:conic-gradient(var(--accent) var(--progress),var(--surface-muted) 0);display:grid;place-items:center}
.energy-ring>span{background:var(--surface);width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.energy-ring b{font-size:23px;font-weight:750;letter-spacing:-.04em;line-height:1.2}
.energy-ring small{font-size:11px;color:var(--muted)}
.energy-copy{display:grid;gap:5px;min-width:0}
.energy-copy strong{font-size:16px;line-height:1.25;letter-spacing:-.02em}
.energy-copy .hint{font-size:11px;line-height:1.35}
.summary-kicker{font-size:11px;color:var(--muted)}
.nutrient-mini{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;padding:8px!important;border-radius:13px!important;text-align:left;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-sm)}
.nutrient-mini>span{font-size:11px;color:var(--muted)}
.nutrient-mini b{font-size:17px;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.nutrient-mini small{font-size:10px;font-weight:400;color:var(--muted)}
.mini-track{height:4px;display:block;background:var(--surface-muted);border-radius:4px;overflow:hidden;margin:2px 0}
.mini-track i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width 220ms ease}
.nutrient-fat_g .mini-track i{background:#dbab45}.nutrient-carbs_g .mini-track i{background:#6699c8}.nutrient-fiber_g .mini-track i{background:#8b9d69}
.meal-card,.catalog-entry,.profile-info-card,.admin-card,.body-metric,.bubble.assistant{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-sm)!important;border-radius:16px!important}
.meal-card{padding:11px!important;margin:0!important;animation:card-enter 220ms ease-out}
.meal-title,.ration-card-title{color:var(--text)!important;font-size:16px!important;line-height:1.3!important;letter-spacing:-.025em}
.meal-meta,.ration-card-meta{font-size:10.5px!important;line-height:1.35!important}
.ration-entry{margin-bottom:10px!important}.meal-time{font-size:11px!important;margin:0 0 4px!important;color:var(--muted)!important}
.ration-thumb,.ration-thumb img{width:60px!important;height:60px!important;border-radius:11px!important}
.ration-card-overview{gap:8px!important;margin-bottom:8px!important}
.ration-card-overview.has-photo{grid-template-columns:60px minmax(0,1fr) auto!important}
.ration-card-controls{gap:4px!important}.ration-card-controls button{width:30px!important;min-height:30px!important;height:30px!important;border-radius:9px!important;color:var(--accent)!important;background:var(--accent-soft)!important}
.meal-nutrition-strip{gap:3px!important;padding:7px 4px!important;border-radius:10px!important;background:var(--surface-soft)!important;border-color:var(--line)!important}
.meal-nutrient-cell{min-width:0}.meal-nutrient-cell>b{font-size:14px!important}.meal-nutrient-cell>span{font-size:9px!important;color:var(--muted)!important}
.inline-nutrition-display{color:var(--text)!important;background:transparent!important}
.meal-composition-details,.ration-composition-details,.meal-refine-details{margin-top:7px!important;background:transparent!important;border-color:var(--line)!important}
.meal-composition-details>summary,.ration-composition-details>summary,.meal-refine-details>summary{padding:7px 0!important;min-height:32px!important;color:var(--text)!important}
.meal-primary-actions{gap:7px!important;margin-top:9px!important}.meal-primary-actions button{min-height:36px!important;font-size:12px!important;padding:8px 10px!important;border-radius:11px!important}
.meal-compact-actions{gap:5px!important;flex-wrap:wrap!important}
.meal-compact-actions button{font-size:11px!important}.meal-compact-actions .modern-icon{width:15px;height:15px}
.dish-group,.ingredient,.ration-editor-block,.canonical-editor-row{border-color:var(--line)!important;background:var(--surface-soft)!important;color:var(--text)!important}
.composer{background:var(--glass)!important;border-top:1px solid var(--line)!important;padding:8px max(10px,calc((100vw - 900px)/2))!important;gap:6px!important}
.composer textarea{min-height:42px!important;max-height:180px;font-size:16px!important;padding:10px 12px!important;background:var(--surface)!important;border-radius:14px!important}
.composer .round,.composer .send{width:40px!important;height:42px!important;min-height:42px!important;border-radius:13px!important;padding:0!important}
#chatView,#consultationView{padding:0!important;overflow:hidden!important}
.chat-list{gap:10px!important;padding:10px 10px calc(var(--composer-current-h,60px) + 12px)!important}
.food-history-drawer{margin:6px 10px 0!important}.food-history-toggle{min-height:36px!important;padding:6px 10px!important;background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.consultation-heading{padding:10px 12px 7px!important;background:var(--bg)!important}
.consultation-heading h2{font-size:20px!important}.consultation-tools-drawer{margin-top:6px!important;background:var(--surface)!important;border-color:var(--line)!important}
.consultation-tools-drawer>summary{padding:7px 10px!important;min-height:32px!important;color:var(--muted)!important;font-size:11px!important}
.bubble{font-size:14px!important;line-height:1.5!important;padding:10px 12px!important}.bubble.user{background:var(--accent)!important;color:var(--on-accent)!important}
.main-nav{background:var(--glass)!important;border-top:1px solid var(--line)!important;box-shadow:0 -4px 20px #123c2408!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;padding:4px max(6px,calc((100vw - 620px)/2)) env(safe-area-inset-bottom)!important;min-height:64px!important;gap:2px!important}
.main-nav button{height:56px!important;min-width:0!important;min-height:56px!important;padding:5px 0!important;border-radius:13px!important;color:var(--muted)!important;background:transparent!important;gap:4px!important;display:flex!important;flex-direction:column!important;font-size:11px!important}
.main-nav button.active{color:var(--accent)!important;background:var(--accent-soft)!important}
.main-nav .modern-icon{width:21px;height:21px}
.main-nav .nav-food-icon{width:37px!important;height:34px!important;border-radius:12px!important;margin:0!important;background:var(--accent)!important;color:var(--on-accent)!important;box-shadow:none!important;border:0!important}
.main-nav .nav-food-primary{transform:none!important;margin:0!important;gap:1px!important}
#profileView>h2{margin-bottom:12px!important}.profile-form{margin-top:0!important;gap:9px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.profile-form label{font-size:12px!important;min-width:0}.profile-form input,.profile-form select{padding:9px 10px!important;min-height:40px!important;font-size:16px!important;border-radius:11px!important}
.profile-form>button,.profile-form>.toggle-field{grid-column:1/-1}.profile-info-card,.admin-card{padding:13px!important;margin-top:12px!important}
.profile-info-card h3,.admin-card h3{font-size:16px!important;margin:0 0 5px!important}.profile-info-card .hint{font-size:12px!important;line-height:1.4!important}
.admin-row{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--text)!important}
.admin-main b,.admin-main span,.code-value{color:var(--text)!important}
.admin-row-actions{flex-wrap:wrap;gap:5px}.admin-row-actions button{font-size:11px!important;min-height:32px!important}
#bodyView{padding:10px 12px!important;overflow-y:auto!important}
.body-page-shell,.body-now-pane,.body-page-content{height:auto!important;min-height:0!important;overflow:visible!important;background:transparent!important;padding:0!important}
.body-section-title{margin-bottom:10px!important}.body-section-last{font-size:10px!important;max-width:55%;text-align:right}
.body-weight-hero{padding:10px 12px!important;min-height:62px!important;margin:0 0 8px!important}
.body-dashboard{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(70px,.65fr) minmax(0,1fr)!important;gap:7px!important;height:auto!important;min-height:0!important;max-width:680px;margin:0 auto!important;padding:0!important;overflow:visible!important}
.body-connectors{display:none!important}.body-metric-column{display:grid!important;grid-template-rows:repeat(4,minmax(68px,auto))!important;gap:7px!important;min-width:0}
.body-metric-column .body-metric{padding:7px!important;min-height:68px!important;overflow:hidden}
.body-metric-label{font-size:10px!important;line-height:1.15!important;color:var(--muted)!important;overflow-wrap:anywhere}
.body-metric-icon{width:22px!important;height:22px!important}.body-metric-icon img{width:22px!important;height:22px!important}
.body-metric-value{font-size:19px!important;line-height:1.2!important;color:var(--text)!important;flex-wrap:wrap;gap:4px!important}
.body-metric-status{font-size:9px!important;line-height:1.25!important;color:var(--muted)!important}
.body-metric-top{gap:4px!important}.body-metric-unit{font-size:10px!important}
.body-silhouette-stage{min-height:0!important;height:293px!important;align-self:center;padding:0!important;background:transparent!important}
.body-silhouette{height:265px!important;max-height:265px!important;width:100%!important;object-fit:contain}
.body-silhouette-caption{font-size:9px!important;line-height:1.3!important;color:var(--muted)!important}
.body-trend small{font-size:9px!important}.body-actions-row{padding:9px 0 0!important;margin:0!important}
.body-inline-input{min-width:0!important;width:100%!important;font-size:16px!important;min-height:34px!important}
.modal{background:rgba(10,24,18,.4)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity 200ms,display 200ms allow-discrete;opacity:1}
.modal.hidden{opacity:0;pointer-events:none}
.modal-card,.onboarding-card,.day-completeness-card,.forced-password-card{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:var(--shadow-md)!important;padding:17px!important}
.modal-card h2{font-size:20px!important;line-height:1.2!important;letter-spacing:-.03em;margin:0!important}
.modal-card p{font-size:12px;line-height:1.45}.modal-card .row{gap:10px!important}
.modal:not(.hidden)>.modal-card{animation:sheet-enter 220ms cubic-bezier(.2,.8,.2,1)}
.modal-card input,.modal-card select,.modal-card textarea{font-size:16px!important;min-height:40px;border-radius:11px!important}
.modal-card .icon{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;flex-shrink:0}
.catalog-entry{padding:10px!important}.catalog-product-name,.catalog-entry-head b{font-size:14px!important;color:var(--text)!important}
.catalog-product-meta,.catalog-entry-head span{font-size:10px!important;color:var(--muted)!important}.catalog-search-row{gap:6px!important}
.catalog-search-row input,.catalog-search-row select{min-width:0!important}.catalog-kind-tabs button.active{background:var(--accent-soft)!important;color:var(--accent)!important}
.catalog-selection-bar,.catalog-confirm-summary,.catalog-dish-match-card,.canonical-editor-add{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--text)!important}
.settings-heading{display:flex;gap:10px;align-items:flex-start}.settings-heading>.ui-icon{padding-top:2px}
.backup-actions{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.backup-actions>*{flex:1;min-width:120px}
.backup-download{display:flex;gap:7px;align-items:center;justify-content:center;border-radius:12px;text-decoration:none;padding:11px;font-size:12px;font-weight:600;text-align:center;min-height:42px}
.backup-download.secondary{background:var(--accent-soft);color:var(--accent)}
.backup-restore-form{display:grid;gap:8px;margin-top:14px}.backup-restore-form label,.backup-restore-card>label{font-size:12px;color:var(--muted)}
.backup-restore-form input{max-width:100%;width:100%;padding:8px;border:1px solid var(--line)}
.backup-restore-card{width:min(480px,100%)}.backup-restore-card>input{width:100%;padding:10px;margin-top:6px}
.backup-preview{display:grid;gap:6px;margin-top:14px}.backup-preview>div{display:flex;gap:12px;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}.backup-preview b{text-align:right;max-width:65%;overflow-wrap:anywhere}
.backup-warning{padding:11px;background:var(--danger-soft);color:var(--danger);border-radius:11px}
.backup-safety{margin-top:12px}.backup-safety summary{font-size:12px;color:var(--muted);cursor:pointer;padding:7px 0}
#backupSafetyList a{display:block;color:var(--accent);padding:8px 0;overflow-wrap:anywhere}
#backupState,#backupRestoreState{overflow-wrap:anywhere}
[data-theme="dark"] .energy-ring{box-shadow:0 0 20px #48e2b818}
[data-theme="dark"] .main-nav button.active{box-shadow:inset 0 -2px var(--accent)}
[data-theme="dark"] .meal-card,[data-theme="dark"] .modal-card{background:linear-gradient(135deg,#18282d,#111d22)!important}
[data-theme="dark"] .bubble.user{background:var(--accent-soft)!important;color:var(--text)!important;border:1px solid var(--line-strong)}
[data-theme="dark"] .md-table-wrap table,[data-theme="dark"] .md-table-wrap th,[data-theme="dark"] .md-table-wrap td{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
[data-theme="dark"] svg text{fill:var(--muted)!important}
[data-theme="dark"] svg line{stroke:var(--line)!important}
[data-theme="dark"] .body-silhouette{filter:brightness(.95)}
@keyframes view-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes card-enter{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes sheet-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@starting-style{.modal:not(.hidden){opacity:0}}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size 200ms,content-visibility 200ms allow-discrete}details[open]::details-content{block-size:auto}}
@media(max-width:620px){.modal{align-items:flex-end!important;padding:8px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}.modal-card{width:100%!important;max-height:calc(var(--visual-viewport-height,100dvh) - 24px)!important;border-radius:20px 20px 16px 16px!important}.catalog-modal-card{height:min(680px,calc(var(--visual-viewport-height,100dvh) - 24px))!important}.catalog-product-actions{max-width:100%}.profile-info-card{gap:10px!important}.profile-info-card button{min-height:36px!important;font-size:12px!important}}
@media(max-width:360px){.view{padding-left:9px!important;padding-right:9px!important}.section-title h2{font-size:20px!important}.stats-title-actions button{padding:5px 6px!important;font-size:10px!important}.stats-title-actions .modern-icon{display:none}.energy-ring{width:76px;height:76px}.energy-copy strong{font-size:14px}.nutrient-mini{padding:6px!important}.nutrient-mini>span{font-size:10px}.nutrient-mini b{font-size:15px}.ration-card-overview.has-photo{grid-template-columns:48px minmax(0,1fr) auto!important}.ration-thumb,.ration-thumb img{width:48px!important;height:48px!important}.body-dashboard{gap:4px!important;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr)!important}}
@media(min-width:850px){.profile-form{max-width:760px}.body-weight-hero{max-width:680px;margin-left:auto!important;margin-right:auto!important}.body-section-title{max-width:680px;margin-left:auto!important;margin-right:auto!important}.body-actions-row{max-width:680px;margin:auto!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}