@font-face {
    font-family: Montserrat;
    src: url('/Fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}
:root { --ink: #253D45; --muted: #829096; --accent: #336E61; --page: #F7F9FC; --surface: #FFFFFF; --accent-ink: #FFFFFF; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; height: var(--app-height,100dvh); margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--page); color: var(--ink); font-family: Montserrat,system-ui,sans-serif; font-size: 14px; }
button,input,select,textarea { font: inherit; }
button,a { touch-action: manipulation; }
button { border: 0; border-radius: 14px; min-height: 44px; padding: 10px 15px; background: var(--subtle); color: var(--ink); cursor: pointer; font-weight: 600; }
button:active { transform: scale(.98); }
button:disabled { opacity: .4; cursor: default; }
a { color: var(--accent); text-underline-offset: 4px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid #84B8A9; outline-offset: 2px; }
input,select,textarea { display: block; width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 12px; min-height: 46px; padding: 10px 12px; background: var(--surface); color: var(--ink); margin-top: 6px; font-size: 16px; }
input[type=date] { -webkit-appearance: none; appearance: none; text-align: left; }
input[type=color] { height: 58px; padding: 5px; cursor: pointer; }
label { display: block; font-size: 12px; font-weight: 600; min-width: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
[hidden] { display: none !important; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: 27px; font-weight: 700; letter-spacing: -1px; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -.7px; }
h3 { font-size: 18px; font-weight: 650; }
.eyebrow { display: block; color: var(--muted); font-size: 9px; letter-spacing: 2px; font-weight: 700; margin-bottom: 6px; }
.muted,.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 5px 14px #336E6119; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 12px; }
.error,.success { font-size: 12px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; background: #FFF0ED; color: #9F3434; flex-shrink: 0; }
.success { color: #326F56; background: #EAF5EE; }
.icon-button { width: 44px; height: 44px; min-width: 44px; padding: 10px; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 400; }
.icon-button img { width: 22px; height: 22px; }
.diary-shell { max-width: 540px; margin: auto; height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr) minmax(0,1.18fr); gap: 12px; padding: max(18px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); overflow: hidden; }
.diary-shell:has(.diary-error) { grid-template-rows: auto auto auto minmax(0,1fr) minmax(0,1.18fr); }
.diary-header { display: flex; align-items: center; gap: 14px; }
.diary-header .eyebrow { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 3px; }
.diary-header h1 { font-size: 24px; }
.greeting-dot { color: #7FB69C; }
.mini-brand { margin-left: auto; font-size: 30px; font-weight: 750; color: #77A18F; letter-spacing: -3px; }
.day-navigation { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.day-navigation time { font-size: 12px; font-weight: 600; text-transform: capitalize; text-align: center; }
.day-navigation .icon-button { border: 0; background: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
.daily-macros { min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 10px; }
.daily-meals { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.section-heading h2 { font-size: 16px; letter-spacing: -.4px; }
.section-heading>span { color: var(--muted); font-size: 9px; }
.meal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(var(--meal-rows,3),minmax(0,1fr)); gap: 9px; }
.meal-tile { background: var(--meal-bg); color: var(--meal-ink); display: grid; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: auto auto auto; align-content: center; align-items: center; column-gap: 7px; row-gap: 3px; padding: 10px 12px; min-height: 0; border-radius: 18px; text-align: left; }
.meal-tile>.meal-icon { width: 24px; height: 24px; grid-row: 1/3; opacity: .85; }
.meal-tile>strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-energy { font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: -.3px; }
.meal-energy small { font-size: 9px; font-weight: 500; letter-spacing: 0; }
.meal-nutrients { grid-column: 1/-1; font-size: 8px; opacity: .8; white-space: nowrap; text-align: center; font-weight: 500; }
.screen-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: #183D4D55; padding: 16px; z-index: 30; overflow: hidden; }
.mobile-screen { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 500px; height: min(100%,700px); padding: 24px; background: var(--page); border-radius: 28px; box-shadow: 0 24px 80px #0A2F4322; overflow: hidden; min-height: 0; }
.screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.screen-heading h2 { font-size: 21px; }
.screen-heading .eyebrow { font-size: 8px; }
.screen-heading .icon-button { border: 0; background: var(--subtle); }
.meal-summary { display: flex; justify-content: space-between; gap: 10px; background: var(--meal-bg); color: var(--meal-ink); border-radius: 14px; padding: 12px; align-items: center; flex-shrink: 0; }
.meal-summary strong { font-size: 16px; }
.meal-summary>span { font-size: 10px; }
.segmented { display: flex; flex-shrink: 0; background: var(--subtle); border-radius: 14px; padding: 4px; gap: 3px; }
.segmented>button { flex: 1; min-width: 0; min-height: 36px; padding: 7px 4px; border-radius: 11px; font-size: 11px; background: none; color: var(--muted); }
.segmented>.selected { color: var(--ink); background: var(--surface); box-shadow: 0 2px 5px #183D4D0A; }
.screen-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.screen-action { margin-top: auto; width: 100%; flex-shrink: 0; }
.screen-actions { margin-top: auto; display: flex; gap: 10px; flex-shrink: 0; }
.screen-actions>* { flex: 1; min-width: 0; }
.step-caption { color: #7C8D94; font-size: 11px; }
.food-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.food-row { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--border); padding: 14px 0; }
.food-row>div { flex: 1; min-width: 0; }
.food-row strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.food-row div>span { display: block; font-size: 10px; color: #8A969B; margin-top: 5px; }
.small-button { background: var(--surface); padding: 8px; min-width: 38px; min-height: 44px; font-size: 17px; color: #54746B; flex-shrink: 0; }
.empty-state { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px; }
.food-list:has(>.empty-state) { display: flex; }
.empty-state>span { font-size: 44px; color: #8FB4A8; font-weight: 300; }
.empty-state h3 { font-size: 17px; }
.empty-state p { font-size: 12px; line-height: 1.7; color: #849399; max-width: 260px; }
.ai-input { min-height: 0; flex: 1; }
.ai-input textarea { height: clamp(70px,18dvh,150px); resize: none; }
.photo-button { background: var(--subtle); border: 1px dashed #AFC6BC; padding: 14px; text-align: center; border-radius: 14px; color: #4C7969; cursor: pointer; }
.photo-button small { display: block; margin-top: 6px; font-size: 10px; font-weight: 400; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.sidebar-layer { position: fixed; inset: 0; z-index: 40; }
.sidebar-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: #183D4D55; }
.sidebar-panel { position: relative; display: flex; flex-direction: column; gap: 28px; width: min(86%,350px); height: 100%; background: var(--page); padding: max(24px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom)); border-radius: 0 28px 28px 0; box-shadow: 14px 0 70px #193B4A14; animation: enter-sidebar .22s ease-out; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 31px; font-weight: 750; letter-spacing: -3px; background: #DEEBE4; color: var(--accent); border-radius: 18px; }
.sidebar-profile h2 { font-size: 28px; }
.sidebar-profile p { font-size: 11px; color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
.sidebar-links button { display: flex; align-items: center; gap: 12px; background: transparent; padding: 15px 0; text-align: left; font-size: 13px; }
.sidebar-links button>span:first-child { width: 30px; font-size: 25px; color: #7A9E8F; }
.sidebar-links button>span:last-child { margin-left: auto; color: #97AAA2; font-size: 20px; }
.logout-link { display: flex; justify-content: space-between; margin-top: auto; padding: 14px 0; text-decoration: none; color: #9A6464; font-size: 13px; font-weight: 600; }
.sidebar-caption { font-size: 10px; color: #A6B2B7; }
.order-control { display: flex; align-items: center; gap: 8px; }
.order-control span { flex: 1; color: #7E8E95; font-size: 12px; }
.personalization-preview { flex: 1; min-height: 0; max-height: 140px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; overflow: hidden; }
.personalization-preview .meal-icon { width: 32px; height: 32px; }
.personalization-preview strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personalization-preview span { font-size: 10px; opacity: .75; }
.auth-shell { height: 100%; max-width: 460px; margin: auto; padding: max(22px,env(safe-area-inset-top)) 28px max(18px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
.auth-brand { text-align: center; }
.auth-brand p { font-size: 9px; font-weight: 650; letter-spacing: 3px; margin-top: 14px; color: #7B9389; }
.auth-card { background: var(--surface); padding: 26px; border-radius: 26px; box-shadow: 0 10px 40px #314E5B06; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.auth-card h1 { font-size: 27px; }
.auth-card>.eyebrow { margin-bottom: -10px; }
.auth-card .primary { width: 100%; }
.auth-card .primary>span { float: right; }
.auth-link { font-size: 10px; text-align: center; line-height: 1.7; }
.auth-link a { font-weight: 650; }
.auth-footer { text-align: center; font-size: 10px; color: #9BA9AF; }
.back-link { font-size: 12px; text-decoration: none; }
.step-indicator { display: flex; gap: 5px; }
.step-indicator i { height: 3px; border-radius: 4px; flex: 1; background: #E9EEEE; }
.step-indicator .active { background: #87AF9F; }
.wizard-actions { display: flex; gap: 10px; margin-top: 6px; }
.wizard-actions>* { flex: 1; }
@keyframes enter-sidebar { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (max-width:540px) {
    .screen-overlay { padding: 0; }
    .mobile-screen { height: 100%; border-radius: 0; padding: max(20px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom)); }
}
@media (max-height:700px) {
    .diary-shell { padding-top: max(10px,env(safe-area-inset-top)); padding-bottom: max(10px,env(safe-area-inset-bottom)); gap: 8px; }
    .diary-header h1 { font-size: 22px; }
    .meal-grid { gap: 7px; }
    .meal-tile { padding: 7px 10px; row-gap: 2px; }
    .meal-tile>.meal-icon { width: 20px; height: 20px; }
    .meal-energy { font-size: 15px; }
    .mobile-screen { gap: 12px; }
    .personalization-preview { max-height: 100px; }
    .auth-shell { gap: 18px; padding: 16px 22px; }
    .auth-card { gap: 14px; padding: 22px; }
    .auth-brand p { display: none; }
}
@media (max-height:500px) {
    .mobile-screen { gap: 8px; padding: 10px 16px; }
    .screen-heading .eyebrow,.meal-summary,.screen-form>.hint,.personal-hint,.personalization-preview,.auth-brand,.auth-footer,.auth-card>.eyebrow,.auth-card>.muted { display: none; }
    .screen-heading h2 { font-size: 17px; }
    .screen-heading .icon-button { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
    .screen-form,.stack { gap: 9px; }
    .form-grid { gap: 8px; }
    input,select { min-height: 38px; height: 38px; padding: 6px 10px; margin-top: 3px; }
    button { min-height: 38px; padding: 8px 12px; }
    .segmented>button { min-height: 30px; }
    .segmented { padding: 3px; }
    .auth-shell { gap: 10px; padding: 10px 20px; }
    .auth-card { gap: 10px; padding: 14px 20px; }
    .auth-card h1 { font-size: 21px; }
    .auth-card .error,.auth-card .success { padding: 5px 8px; font-size: 10px; }
    .step-indicator { display: none; }
    .auth-link { font-size: 10px; }
    .ai-input>.hint { font-size: 10px; line-height: 1.3; }
    .photo-button { padding: 8px; }
    .photo-button small { display: none; }
    .ai-input textarea { height: 65px; min-height: 50px; }
    .sidebar-panel { gap: 10px; padding: 12px 20px; }
    .sidebar-links button { padding: 5px 0; min-height: 38px; }
    .sidebar-profile p,.sidebar-caption { display: none; }
}
@media (orientation:landscape) and (max-height:500px) {
    .diary-shell { max-width: 800px; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr) minmax(0,1.05fr); gap: 5px 16px; }
    .daily-macros,.daily-meals { grid-column: 1/-1; }
    .daily-macros { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 8px; }
    .meal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(var(--meal-landscape-rows,2),minmax(0,1fr)); }
    .daily-meals { gap: 5px; }
    .section-heading>span,.meal-tile>.meal-icon { display: none; }
    .meal-tile { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 5px 10px; }
    .meal-nutrients { text-align: left; }
    .diary-header .eyebrow { display: none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* Keep long user-defined names inside their assigned space. */
.diary-header>div { min-width: 0; flex: 1; }
.diary-header h1,.screen-heading h2,.sidebar-profile h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-heading>div { min-width: 0; }
.screen-heading>.icon-button { flex-shrink: 0; }
.personalization-preview { gap: 4px; padding: 10px; }
.personalization-preview .meal-icon { width: 26px; height: 26px; flex-shrink: 0; }
.personalization-preview strong,.personalization-preview span { flex-shrink: 0; }

/* Personal palettes inherit through screens, menus and all input controls. */
.app-theme { width:100%; height:100%; overflow:hidden; background:var(--page); color:var(--ink); --muted:color-mix(in srgb,var(--ink) 55%,var(--surface)); --subtle:color-mix(in srgb,var(--surface) 91%,var(--ink)); --border:color-mix(in srgb,var(--surface) 85%,var(--ink)); transition:background-color .25s ease,color .25s ease; }
:root { --muted:#829096; --subtle:#EDF1F2; --border:#DFE6E8; }
.app-theme input,.app-theme select,.app-theme textarea { background:var(--surface); color:var(--ink); border-color:var(--border); color-scheme:var(--native-scheme,light); }
.app-theme .eyebrow,.app-theme .hint,.app-theme .step-caption,.app-theme .muted { color:var(--muted); }
.app-theme .brand-mark { background:color-mix(in srgb,var(--accent) 18%,var(--surface)); color:var(--accent); }
.meal-icon { display:block; width:26px; height:26px; color:inherit; flex-shrink:0; }
.meal-banner { background:var(--meal-bg); color:var(--meal-ink); padding:16px; border-radius:22px; flex-shrink:0; }
.meal-banner .screen-heading { gap:10px; }
.meal-banner .screen-heading>div { flex:1; }
.meal-banner .eyebrow { color:inherit; opacity:.65; }
.meal-banner .icon-button { background:color-mix(in srgb,var(--meal-bg) 65%,white); color:var(--meal-ink); }
.meal-banner .meal-summary { padding:12px 0 0; border-top:1px solid color-mix(in srgb,var(--meal-ink) 15%,transparent); margin-top:12px; border-radius:0; }
.meal-content,.goal-content,.personalization-content { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; }
.personalization-content { gap:12px; }
.macro-color-preview { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.macro-color-preview span { padding:12px 6px; font-size:11px; font-weight:650; border-radius:12px; text-align:center; color:var(--ink); background:color-mix(in srgb,var(--macro-color) 20%,var(--surface)); border-bottom:3px solid var(--macro-color); }
.screen-overlay { animation:overlay-in .22s ease both; }
.mobile-screen { animation:screen-in .3s cubic-bezier(.2,.75,.25,1) both; }
.view-transition { animation:content-in .24s ease both; }
.auth-shell,.daily-macros,.meal-grid { animation:content-in .3s ease both; }
fieldset[data-step]:not([hidden]) { animation:content-in .22s ease both; }
.app-theme.leaving .screen-overlay { animation:overlay-out .18s ease both; }
.app-theme.leaving .mobile-screen { animation:screen-out .18s ease both; }
.app-theme.leaving .sidebar-panel { animation:sidebar-out .18s ease both; }
button,a,input,select { transition:background-color .18s ease,color .18s ease,box-shadow .18s ease; }
.water-loading { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--page) 80%,transparent); backdrop-filter:blur(5px); animation:overlay-in .2s ease both; }
.water-loading-card { background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:0 18px 70px #12374415; border-radius:28px; width:min(290px,86%); padding:32px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.water-loading-card strong { font-size:14px; }
.water-loading-card>span { font-size:11px; color:var(--muted); }
.water-glass { position:relative; width:66px; height:88px; border:3px solid #8EB8CD; border-radius:6px 6px 17px 17px; overflow:hidden; margin:2px 0 10px; background:#D9EFF522; }
.water-fill { position:absolute; inset:0; background:#8AC9DE; transform:translateY(80%); animation:glass-fill 3.8s ease-in-out infinite; }
.water-wave { position:absolute; width:140%; height:32px; top:-16px; left:-20%; border-radius:42%; background:#8AC9DE; animation:water-wave 2.8s linear infinite; }
.water-fill i { position:absolute; width:5px; height:5px; bottom:8px; border:1px solid #E7FAFF; border-radius:50%; left:25%; animation:water-bubble 2s ease-in infinite; }
.water-fill i:nth-of-type(2) { left:65%; animation-delay:.8s; width:4px; height:4px; }
.water-fill i:nth-of-type(3) { left:45%; animation-delay:1.3s; width:3px; height:3px; }
.glass-shine { position:absolute; top:10px; left:9px; width:4px; height:48px; border-radius:5px; background:#FFFFFF88; }
@keyframes content-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes screen-in { from { opacity:0; transform:translateY(22px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes screen-out { to { opacity:0; transform:translateY(16px) scale(.99); } }
@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes overlay-out { to { opacity:0; } }
@keyframes sidebar-out { to { opacity:0; transform:translateX(-100%); } }
@keyframes glass-fill { 0%,100% { transform:translateY(82%); } 50%,75% { transform:translateY(18%); } }
@keyframes water-wave { to { transform:rotate(360deg); } }
@keyframes water-bubble { 0% { transform:translateY(0); opacity:0; } 30% { opacity:.8; } 100% { transform:translateY(-65px); opacity:0; } }
@media(max-height:700px) { .meal-banner { padding:12px; } .meal-banner .meal-summary { padding-top:8px; margin-top:8px; } }
@media(max-height:500px) {
    .meal-banner { padding:8px 10px; border-radius:15px; }
    .meal-banner .meal-icon { width:22px; height:22px; }
    .meal-banner .meal-summary { display:none; }
    .meal-content,.goal-content,.personalization-content { gap:8px; }
    .appearance-colors input[type=color] { min-height:36px; height:36px; }
    .macro-color-preview { display:none; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none !important; transition:none !important; }
    .water-fill { transform:translateY(40%); }
}

.app-theme .small-button,.app-theme .mini-brand { color:var(--accent); }
.app-theme .meal-banner .eyebrow { color:inherit; }
@media(max-height:650px) { .personalization-preview { display:none; } }
@media(max-height:500px) {
    .personalization-content:has(.meal-name-editor input:focus) .order-control { display:none; }
}

.app-theme.leaving .sidebar-layer { animation:overlay-out .18s ease both; }
.app-theme.leaving .screen-overlay,.app-theme.leaving .sidebar-layer { pointer-events:none; }
@media(max-height:700px) {
    .sidebar-panel { gap:16px; padding:16px 20px; }
    .sidebar-panel .brand-mark { width:44px; height:44px; font-size:28px; }
    .sidebar-profile h2 { font-size:24px; }
    .sidebar-links { gap:4px; }
    .sidebar-links button { padding:4px 0; min-height:44px; }
    .sidebar-links button>span:first-child { font-size:22px; }
    .sidebar-caption { display:none; }
}
@media(max-height:500px) {
    .sidebar-panel { gap:8px; padding:12px 20px; }
    .sidebar-panel .brand-mark,.sidebar-panel .icon-button { width:36px; height:36px; min-width:36px; min-height:36px; }
    .sidebar-profile .eyebrow,.sidebar-profile p { display:none; }
    .sidebar-profile h2 { font-size:18px; }
    .sidebar-links { gap:2px; }
    .sidebar-links button { min-height:34px; padding:0; font-size:12px; }
    .logout-link { padding:8px 0; }
    .profile-fields>.hint { display:none; }
}
/* Consistent navigation illustrations. */
.sidebar-icon { width:28px; height:28px; min-width:28px; color:var(--accent); flex-shrink:0; }
.sidebar-links button>span:last-child { margin-left:auto; }
.sidebar-panel button.logout-link { width:100%; background:transparent; text-align:left; border-radius:0; }
/* A meal card uses its full area: label, energy and three evenly spaced macro values. */
.meal-tile { display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; gap:5px; padding:12px 14px; text-align:left; }
.meal-tile-heading { display:flex; align-items:center; gap:7px; min-width:0; }
.meal-tile-heading>strong { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.meal-icon-badge { width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--meal-bg) 65%,white); flex-shrink:0; }
.meal-icon-badge>.meal-icon { width:24px; height:24px; }
.meal-tile-energy { display:flex; align-items:baseline; justify-content:center; gap:4px; line-height:1; }
.meal-tile-energy>span { font-size:clamp(24px,3.3dvh,34px); font-weight:700; letter-spacing:-1px; }
.meal-tile-energy>small { font-size:10px; font-weight:500; }
.meal-tile-macros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; border-top:1px solid color-mix(in srgb,var(--meal-ink) 13%,transparent); padding-top:5px; }
.meal-tile-macros>span { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.meal-tile-macros small { font-size:7px; font-weight:500; opacity:.75; line-height:1; }
.meal-tile-macros strong { font-size:11px; font-weight:650; line-height:1; white-space:nowrap; }
.meal-tile-macros i { font-style:normal; font-size:8px; font-weight:400; margin-left:2px; opacity:.75; }
@media(max-height:750px) and (orientation:portrait) {
    .diary-shell { grid-template-rows:auto auto minmax(0,.82fr) minmax(0,1.35fr); }
    .meal-tile { padding:8px 10px; gap:3px; }
    .meal-icon-badge { width:23px; height:23px; border-radius:7px; }
    .meal-icon-badge>.meal-icon { width:20px; height:20px; }
    .meal-tile-energy>span { font-size:24px; }
    .meal-tile-macros { padding-top:4px; }
    .meal-tile-macros strong { font-size:10px; }
}
@media(max-height:600px) and (orientation:portrait) {
    .meal-tile { padding:6px 8px; }
    .meal-icon-badge { width:19px; height:19px; }
    .meal-icon-badge>.meal-icon { width:17px; height:17px; }
    .meal-tile-heading>strong { font-size:10px; }
    .meal-tile-energy>span { font-size:20px; }
    .meal-tile-macros small { font-size:6px; }
    .meal-tile-macros strong { font-size:9px; }
}
@media(orientation:landscape) and (max-height:500px) {
    .meal-tile { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; padding:6px 10px; gap:3px; }
    .meal-icon-badge { width:22px; height:22px; }
    .meal-icon-badge>.meal-icon { width:19px; height:19px; }
    .meal-tile-heading>strong { font-size:10px; }
    .meal-tile-energy>span { font-size:21px; }
    .meal-tile-macros { grid-column:1/-1; display:flex; justify-content:space-between; gap:6px; padding-top:3px; }
    .meal-tile-macros>span { flex-direction:row; gap:3px; }
    .meal-tile-macros small { font-size:7px; }
    .meal-tile-macros strong { font-size:9px; }
    .sidebar-icon { width:24px; height:24px; min-width:24px; }
}

@media(min-height:751px) and (orientation:portrait) {
    .meal-tile { padding:10px 12px; gap:3px; }
    .meal-icon-badge { width:26px; height:26px; border-radius:9px; }
    .meal-icon-badge>.meal-icon { width:22px; height:22px; }
    .meal-tile-macros { padding-top:4px; }
}
/* Persistent onboarding panels remain inside the current viewport. */
.install-invitation { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:12px; }
.install-invitation p { font-size:13px; line-height:1.75; color:var(--muted); }
.install-app-icon { width:112px; height:112px; border-radius:27px; box-shadow:0 12px 32px #214B3D16; }
.install-instructions { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.install-instructions h3 { font-size:18px; }
.install-instructions>p { font-size:12px; line-height:1.65; color:var(--muted); }
.install-illustration { width:100%; height:clamp(80px,17dvh,160px); object-fit:contain; border-radius:18px; }
.support-message textarea { height:clamp(75px,21dvh,180px); resize:none; }
.support-attachment { flex-shrink:0; display:flex; align-items:center; gap:10px; }
.support-attachment .photo-button { width:100%; }
.support-attachment>span { flex:1; color:var(--accent); font-size:12px; }
.help-install-button { background:transparent; color:var(--accent); font-size:11px; }
.favorite-hint { display:flex; align-items:center; gap:10px; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); padding:12px; border-radius:16px; flex-shrink:0; animation:content-in .25s ease both; }
.favorite-hint>span { color:var(--accent); font-size:27px; }
.favorite-hint>p { flex:1; font-size:11px; line-height:1.6; margin:0; }
.favorite-hint .small-button { background:transparent; }
.otp-input { text-align:center; letter-spacing:8px; font-size:25px; font-weight:650; }
button.is-pressed,a.is-pressed,.photo-button.is-pressed { transform:translateY(2px) scale(.97); filter:brightness(.93); }
button,a,.photo-button { transition:transform .12s ease,background-color .16s ease,color .16s ease,filter .12s ease; }
.sidebar-links button.is-pressed { background:var(--subtle); }
.primary.is-pressed { background:color-mix(in srgb,var(--accent) 88%,black); }
.sidebar-scrim:active { transform:none; filter:none; }
.meal-tile.is-pressed { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--meal-ink) 15%,transparent); }
.diary-shell { position:relative; }
.diary-header { padding-right:42px; }
.diary-shell>.mini-brand { position:absolute; top:max(18px,env(safe-area-inset-top)); right:20px; margin:0; }
.sidebar-profile p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-height:700px) {
    .sidebar-panel { gap:12px; }
    .sidebar-links { gap:2px; }
    .sidebar-links button { min-height:40px; padding:2px 0; }
    .diary-shell>.mini-brand { top:max(10px,env(safe-area-inset-top)); }
    .install-instructions { gap:8px; }
    .install-instructions h3 { font-size:17px; }
}
@media(max-height:500px) {
    .sidebar-panel { gap:8px; }
    .sidebar-links button { min-height:34px; padding:0; }
    .install-invitation { gap:12px; padding:0; }
    .install-app-icon { width:64px; height:64px; border-radius:16px; }
    .install-invitation p { font-size:11px; }
    .install-instructions>a { display:none; }
    .install-instructions { gap:6px; }
    .install-instructions>p { font-size:11px; line-height:1.45; }
    .install-illustration { height:70px; }
    .help-install-button,.support-helper { display:none; }
    .support-message textarea { height:70px; min-height:55px; }
    .favorite-hint { padding:8px; gap:6px; }
    .favorite-hint>p { font-size:10px; }
}
@media(orientation:landscape) {
    .diary-shell { max-width:800px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 30px; grid-template-rows:auto minmax(0,1fr) minmax(0,1.18fr); }
    .diary-shell:has(.diary-error) { grid-template-rows:auto auto minmax(0,1fr) minmax(0,1.18fr); }
    .diary-error { grid-column:1/-1; }
    .diary-header { grid-column:1; padding-right:0; }
    .day-navigation { grid-column:2; }
    .diary-shell>.mini-brand { position:static; grid-column:3; align-self:center; font-size:28px; line-height:1; }
    .day-navigation .icon-button { width:28px; min-width:28px; }
    .day-navigation time { font-size:clamp(9px,1.5vw,12px); }
    .daily-macros,.daily-meals { grid-column:1/-1; }
}

/* The administration area is separate from the food diary and uses paginated lists. */
.admin-shell { --subtle:#EDF3F0; --border:#DFE8E3; height:100%; max-width:960px; margin:auto; padding:max(20px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }
.admin-header>div { min-width:0; }
.admin-header h1 { font-size:clamp(20px,5vw,30px); }
.admin-header .eyebrow { font-size:8px; letter-spacing:1.5px; }
.admin-logout { background:#E8F0EC; color:var(--accent); padding:8px 12px; font-size:12px; }
.admin-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; background:#E8EEEB; border-radius:16px; padding:4px; flex-shrink:0; }
.admin-tabs button { background:transparent; font-size:12px; padding:8px 4px; min-width:0; }
.admin-tabs .selected { background:var(--surface); color:var(--accent); box-shadow:0 2px 8px #253D450D; }
.admin-tabs button>span { border-radius:6px; padding:2px 5px; background:#E8F0EC; font-size:10px; }
.admin-notice { margin:0; font-size:11px; line-height:1.4; padding:8px 10px; }
.admin-content { min-height:0; flex:1; display:flex; flex-direction:column; gap:12px; animation:screen-in .24s ease both; }
.admin-section-title { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-shrink:0; }
.admin-section-title>div { min-width:0; }
.admin-section-title h2 { font-size:18px; }
.admin-section-title p { font-size:10px; color:var(--muted); line-height:1.5; margin-top:4px; }
.admin-section-title>button { font-size:24px; min-width:40px; padding:0; background:#E8F0EC; }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px; min-height:0; flex:1; }
.admin-stats>div,.admin-stats>button { border:1px solid #DFE8E3; border-radius:20px; background:white; padding:clamp(10px,2vh,22px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; text-align:left; min-height:0; }
.admin-stats>button { background:#DEEBE4; border-color:#C7DDCF; color:#285C4B; }
.admin-stats small { font-size:clamp(9px,1.4vh,12px); font-weight:600; }
.admin-stats strong { font-size:clamp(24px,4vh,38px); line-height:1; letter-spacing:-1px; }
.admin-stats span { font-size:clamp(8px,1.2vh,10px); line-height:1.4; color:var(--muted); font-weight:400; }
.admin-search { flex-shrink:0; }
.admin-search input { margin:0; min-height:40px; font-size:16px; }
.admin-user-list { min-height:0; flex:1; display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-user-card { border:1px solid #DFE8E3; border-radius:18px; background:white; padding:16px; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.admin-user-identity { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.admin-user-identity>div { min-width:0; }
.admin-user-identity h3 { font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.admin-user-identity p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; margin:4px 0; }
.admin-user-identity small { font-size:10px; color:var(--muted); }
.admin-status { padding:5px 7px; border-radius:8px; font-size:9px; font-weight:650; flex-shrink:0; }
.admin-status.pending { background:#FFF0CD; color:#84621F; }
.admin-status.active { background:#E7F2EC; color:#326B50; }
.admin-status.blocked { background:#FCE9E7; color:#9A4338; }
.admin-user-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.admin-user-actions>small { font-size:9px; color:var(--muted); flex:1 1 100%; }
.admin-user-actions button { min-height:36px; padding:7px 12px; font-size:11px; }
.admin-block { background:#FFF0ED; color:#9F3434; }
.admin-pagination { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.admin-pagination span { font-size:11px; color:var(--muted); }
.admin-pagination button { background:#E8F0EC; min-width:40px; min-height:36px; font-size:24px; padding:0; }
.admin-empty { min-height:0; flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center; padding:12px; }
.admin-empty>span { width:52px; height:52px; display:grid; place-items:center; border-radius:18px; background:#DEEBE4; color:#336E61; font-size:26px; }
.admin-empty h3 { font-size:18px; }
.admin-empty p { color:var(--muted); font-size:11px; max-width:320px; line-height:1.6; }
.admin-confirm-layer { position:fixed; inset:0; background:#172F3980; display:grid; place-items:center; z-index:1000; padding:20px; backdrop-filter:blur(6px); }
.admin-confirm { background:white; border-radius:24px; padding:24px; width:100%; max-width:420px; display:flex; flex-direction:column; gap:16px; }
.admin-confirm h2 { font-size:22px; }
.admin-confirm p { font-size:12px; line-height:1.7; }
.admin-confirm>div { display:flex; gap:8px; justify-content:flex-end; }
.admin-confirm button { font-size:12px; }
.approval-waiting { display:flex; flex-direction:column; gap:14px; }
.approval-waiting>span { font-size:42px; color:var(--accent); }
.approval-waiting h2 { font-size:20px; }
.approval-waiting p { font-size:13px; line-height:1.8; color:var(--muted); }
.access-denied { height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; gap:20px; }
.access-denied h1 { font-size:24px; }
@media(max-height:700px) {
 .admin-shell { padding-top:12px; padding-bottom:10px; gap:10px; }
 .admin-content { gap:8px; }
 .admin-user-card { padding:10px 12px; gap:6px; }
 .admin-user-list { gap:8px; }
 .admin-user-identity h3 { font-size:14px; }
 .admin-section-title p { margin-top:2px; }
 .admin-tabs button { min-height:34px; }
 .admin-user-actions button { min-height:32px; padding:5px 9px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .admin-shell { gap:6px; padding:8px 20px; }
 .admin-header .eyebrow { display:none; }
 .admin-header h1 { font-size:20px; }
 .admin-logout { min-height:32px; }
 .admin-tabs { padding:2px; }
 .admin-tabs button { min-height:28px; padding:3px; }
 .admin-stats { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; }
 .admin-stats>div,.admin-stats>button { padding:8px 12px; gap:3px; border-radius:14px; }
 .admin-stats strong { font-size:24px; }
 .admin-stats small { font-size:9px; }
 .admin-stats span { font-size:8px; }
 .admin-section-title h2 { font-size:15px; }
 .admin-section-title p { display:none; }
 .admin-section-title>button { min-height:26px; font-size:20px; }
 .admin-content { gap:6px; }
 .admin-search input { min-height:32px; padding:5px 10px; }
 .admin-user-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
 .admin-user-card { padding:8px 12px; }
 .admin-user-actions>small { display:none; }
 .admin-user-actions button { min-height:28px; }
 .admin-pagination button { min-height:26px; }
 .admin-notice { padding:5px 8px; font-size:10px; }
}

.admin-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.admin-tabs button { font-size:clamp(9px,2.6vw,12px); }
.admin-user-actions .admin-delete { background:transparent; color:#A13D35; margin-left:auto; padding-left:6px; padding-right:6px; }
.danger-button { background:#A13D35; color:white; }
dialog.typed-confirm { border:0; margin:auto; color:var(--ink); max-height:calc(100dvh - 24px); overflow:hidden; animation:screen-in .2s ease both; }
dialog.typed-confirm:not([open]) { display:none; }
dialog.typed-confirm::backdrop { background:#172F3980; backdrop-filter:blur(6px); }
.typed-confirm label { font-size:11px; }
.typed-confirm input { font-size:16px; }
.typed-confirm .confirmation-hint { font-size:10px; line-height:1.6; color:var(--muted); }
.typed-confirm>div { flex-wrap:wrap; }
.database-panel { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.database-tabs { display:flex; gap:6px; flex-shrink:0; }
.database-tabs button { flex:1; background:#E8EEEB; min-height:36px; padding:6px; font-size:11px; }
.database-tabs .selected { background:#336E61; color:white; }
.database-current { position:relative; border-radius:16px; background:#DEEBE4; padding:12px 14px; display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.database-current>span { font-size:8px; font-weight:700; letter-spacing:1.5px; color:#507663; }
.database-current>strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.database-current>p { font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.database-current>button { align-self:flex-start; min-height:28px; padding:4px 8px; font-size:10px; margin-top:3px; background:white; }
.database-body { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; animation:screen-in .2s ease both; }
.database-card { min-height:0; border:1px solid #DFE8E3; border-radius:18px; background:white; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:10px; flex:1; }
.database-card h3 { font-size:16px; }
.database-card h3>span { font-size:11px; color:var(--muted); }
.database-card p { font-size:11px; line-height:1.6; color:var(--muted); }
.database-card label { font-size:10px; }
.database-card input,.database-card select { min-height:40px; margin-top:4px; padding:7px 9px; font-size:16px; }
.database-card>button,.database-actions>button,.database-create>button { min-height:36px; font-size:11px; padding:7px 10px; }
.database-actions { display:flex; gap:8px; }
.database-actions>button { flex:1; }
.database-create { display:flex; align-items:flex-end; gap:8px; }
.database-create>label { min-width:0; flex:1; }
.database-card .database-text-button { background:transparent; color:var(--accent); text-align:left; padding:0; min-height:26px; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.database-notice { font-size:10px; line-height:1.5; padding:7px 10px; overflow-wrap:anywhere; flex-shrink:0; }
.database-footnote { font-size:10px; color:var(--muted); line-height:1.5; flex-shrink:0; }
@media(max-height:700px) {
 .database-panel { gap:6px; }
 .database-card { padding:10px 12px; gap:6px; }
 .database-card h3 { font-size:14px; }
 .database-card p { font-size:10px; line-height:1.45; }
 .database-body { gap:8px; }
 .database-current { padding:8px 12px; gap:3px; }
 .database-current>strong { font-size:12px; }
 .database-card input,.database-card select { min-height:34px; padding:4px 8px; margin-top:3px; }
 .database-card>button,.database-actions>button,.database-create>button { min-height:30px; padding:5px 8px; }
 .database-card .database-text-button { min-height:22px; }
 .database-tabs button { min-height:30px; }
 .typed-confirm { padding:18px; gap:12px; }
 .typed-confirm h2 { font-size:20px; }
 .typed-confirm p { font-size:11px; line-height:1.5; }
}
@media(orientation:landscape) and (max-height:500px) {
 .database-body { flex-direction:row; gap:8px; }
 .database-card { padding:8px 12px; gap:5px; }
 .database-card h3 { font-size:13px; }
 .database-card p { font-size:9px; line-height:1.4; }
 .database-current { flex-direction:row; align-items:center; flex-wrap:wrap; gap:4px 12px; padding:6px 12px; }
 .database-current>strong { max-width:65%; }
 .database-current>p { font-size:9px; }
 .database-current>button { margin:0 0 0 auto; min-height:24px; }
 .database-tabs button { min-height:26px; }
 .database-card input,.database-card select { min-height:30px; }
 .database-footnote { display:none; }
 .typed-confirm { max-width:600px; padding:14px 18px; gap:8px; }
 .typed-confirm h2 { font-size:18px; }
 .typed-confirm input { min-height:34px; margin-top:3px; }
 .typed-confirm>div button { min-height:32px; }
}
@media(max-height:700px) {
 .database-panel.compact[data-mode=manage] .database-card>p,.database-panel.compact[data-mode=backup] .database-card>p { display:none; }
 .database-panel.compact .database-current { gap:2px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .database-panel.compact .database-card>p { display:none; }
 .database-current>p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
}
.typed-confirm p,.typed-confirm label { overflow-wrap:anywhere; }
@media(max-height:700px) {
 .database-panel.compact .database-card { padding-top:8px; padding-bottom:8px; gap:5px; }
 .database-current>p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
}
@media(orientation:landscape) and (max-height:500px) {
 .database-current>p { display:block; }
}
dialog.typed-confirm { position:fixed; left:50%; right:auto; top:calc(var(--app-height,100dvh) / 2); bottom:auto; margin:0; width:calc(100% - 32px); translate:-50% -50%; max-height:calc(var(--app-height,100dvh) - 16px); }
.short-viewport dialog.typed-confirm { padding:12px 16px; gap:8px; }
.short-viewport .typed-confirm h2 { font-size:18px; }
.short-viewport .typed-confirm p { font-size:11px; line-height:1.45; }
.short-viewport .typed-confirm .confirmation-hint { display:none; }
.short-viewport .typed-confirm input { min-height:34px; margin-top:3px; }
.short-viewport .typed-confirm>div button { min-height:32px; padding:6px 10px; }

/* Auth forms use document scrolling so Safari can reveal fields above its keyboard.
   Do not shrink a fixed flex container to visualViewport.height on these pages. */
html.auth-page { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:auto; }
.auth-page body { position:static; inset:auto; height:auto; min-height:100svh; overflow:visible; overscroll-behavior-y:auto; }
.auth-page .auth-shell { height:auto; min-height:100svh; overflow:visible; animation:none; }
.auth-page .auth-shell>* { flex-shrink:0; }
.auth-page .auth-card,.auth-page .stack,.auth-page fieldset { flex-shrink:0; }
.auth-page input,.auth-page select { scroll-margin-block:24px; font-size:16px; }
.auth-page .auth-card { min-width:0; }

/* Permit scrolling, but no touch pinch or double-tap page zoom. */
html,body { touch-action:pan-x pan-y; }

/* Retain contrast after swapping the meal palette in the dark theme. */
.app-theme[data-theme="Scuro"] .meal-icon-badge,
.app-theme[data-theme="Scuro"] .meal-banner .icon-button { background:color-mix(in srgb,var(--meal-bg) 85%,black); }
.sidebar-panel { overflow-y:auto; }
.sidebar-panel>* { flex-shrink:0; }

/* The release identifier remains visible in compact and landscape menus. */
.sidebar-panel .sidebar-version { display:block; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; margin-top:auto; }
/* Locked entries remain interactive to explain the available plans. */
.feature-locked { position:relative; opacity:.6; filter:saturate(.45); }
.plan-lock { display:inline-grid; place-items:center; width:23px; height:23px; border-radius:8px; background:var(--surface,#fff); color:var(--ink,#253D45); border:1px solid #82909655; flex-shrink:0; }
.segmented .plan-lock { position:absolute; right:1px; top:-6px; width:20px; height:20px; }
.segmented .feature-locked { padding-right:14px; }
.food-row .plan-lock { width:22px; height:22px; }
.subscription-badge { display:inline-block; font-size:10px; font-weight:650; color:var(--accent); margin-top:6px; }
.plan-dialog { position:fixed; left:50%; top:calc(var(--app-height,100dvh) / 2); right:auto; bottom:auto; translate:-50% -50%; margin:0; width:calc(100% - 32px); max-width:420px; max-height:calc(var(--app-height,100dvh) - 20px); border:0; border-radius:25px; padding:24px; background:var(--surface,#fff); color:var(--ink,#253D45); overflow:hidden; }
.plan-dialog:not([open]),.plan-admin-dialog:not([open]) { display:none; }
.plan-dialog::backdrop,.plan-admin-dialog::backdrop { background:#172F3980; backdrop-filter:blur(6px); }
.plan-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan-dialog header .icon-button { min-height:32px; height:32px; width:32px; min-width:32px; padding:0; }
.plan-dialog-lock { display:block; margin:12px 0; }
.plan-dialog-lock .plan-lock { width:48px; height:48px; border-radius:16px; background:#DEEBE4; color:#336E61; border:0; }
.plan-dialog-lock svg { width:24px; height:24px; }
.plan-dialog h2 { font-size:25px; margin:12px 0; }
.plan-dialog p { font-size:13px; line-height:1.8; color:var(--muted,#829096); }
.plan-dialog>.primary { width:100%; margin-top:20px; }
.plans-page { height:100%; max-width:760px; margin:auto; padding:max(20px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.plans-header { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.plans-header h1 { font-size:clamp(20px,5vw,29px); }
.plans-header .eyebrow { font-size:8px; }
.plans-membership { padding:14px 16px; background:#DEEBE4; border-radius:16px; flex-shrink:0; }
.plans-membership strong { font-size:13px; color:#285C4B; }
.plans-membership p { font-size:11px; line-height:1.6; margin-top:4px; color:#507663; }
.plans-sheet { flex:1; min-height:0; background:white; border:1px solid #DFE8E3; border-radius:22px; padding:20px 14px; display:flex; flex-direction:column; gap:14px; justify-content:center; animation:screen-in .2s ease both; }
.plans-sheet h2 { font-size:20px; }
.plans-sheet>p { font-size:11px; line-height:1.6; color:var(--muted); }
.plan-comparison,.plan-prices { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
.plan-comparison th,.plan-comparison td,.plan-prices th,.plan-prices td { padding:12px 3px; border-bottom:1px solid #E8EEEB; text-align:center; overflow-wrap:anywhere; }
.plan-comparison th:first-child { width:43%; text-align:left; }
.plan-comparison thead th,.plan-prices thead th { font-size:9px; color:var(--accent); }
.plan-comparison td { color:#336E61; font-weight:700; font-size:15px; }
.plan-prices tbody th { font-size:10px; }
.plan-prices td { font-weight:600; }
.progress-locked { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; flex:1; background:var(--surface); border:1px solid var(--border); padding:24px; border-radius:22px; text-align:center; }
.progress-locked h2 { font-size:22px; }
.progress-locked p { font-size:13px; line-height:1.7; }
.plan-admin-dialog { border:0; margin:auto; }
.admin-user-actions .admin-plan-button { background:#DEEBE4; color:#285C4B; font-size:9px; }
@media(max-height:700px) {
 .sidebar-panel { gap:8px; }
 .sidebar-links button { min-height:34px; }
 .plans-page { padding:12px 16px; gap:10px; }
 .plans-header .eyebrow { display:none; }
 .plans-sheet { padding:12px; gap:10px; }
 .plans-sheet h2 { font-size:17px; }
 .plan-comparison th,.plan-comparison td,.plan-prices th,.plan-prices td { padding:9px 2px; font-size:10px; }
 .plan-comparison thead th,.plan-prices thead th { font-size:8px; }
 .plans-membership { padding:10px 12px; }
 .plans-membership p { font-size:10px; }
 .plan-dialog { padding:18px; }
 .plan-dialog h2 { font-size:22px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .plans-page { padding:8px 20px; gap:6px; }
 .plans-header h1 { font-size:20px; }
 .plans-header .icon-button { height:30px; min-height:30px; }
 .plans-membership { padding:6px 12px; display:flex; gap:12px; align-items:center; }
 .plans-membership p { margin:0; font-size:9px; }
 .plans-page>.segmented button { min-height:28px; padding:3px; }
 .plans-sheet { padding:8px 12px; gap:5px; }
 .plans-sheet h2 { font-size:15px; }
 .plans-sheet>p { font-size:9px; line-height:1.4; }
 .plan-comparison th,.plan-comparison td { padding:4px 2px; font-size:9px; }
 .plan-prices th,.plan-prices td { padding:9px 2px; font-size:10px; }
 .sidebar-links button { min-height:29px; }
 .subscription-badge { margin-top:2px; font-size:9px; }
 .plan-dialog-lock { display:none; }
}
.subscription-details { border-radius:14px; border:1px solid var(--border,#DFE8E3); background:var(--subtle,#EDF3F0); padding:12px; }
.subscription-details dl { display:flex; flex-direction:column; gap:7px; margin:0; }
.subscription-details dl>div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.subscription-details dt { font-size:10px; color:var(--muted); font-weight:500; }
.subscription-details dd { margin:0; text-align:right; font-size:11px; font-weight:650; }
.plan-link { background:transparent; color:var(--accent); padding:5px 0 0; min-height:28px; font-size:10px; }
@media(max-height:700px) { .subscription-details { padding:8px 10px; } .subscription-details dl { gap:4px; } .subscription-details dd { font-size:10px; } }
@media(orientation:landscape) and (max-height:500px) { .profile-fields:has(.subscription-details) { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:10px; align-content:center; align-items:center; } }
.plan-price-button { padding:5px 2px; min-height:34px; border-radius:9px; width:100%; background:#DEEBE4; color:#285C4B; font-size:11px; }
.plan-message { padding:7px 10px; font-size:10px; line-height:1.5; flex-shrink:0; }
.plan-pending { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#FFF0CD; border-radius:12px; padding:8px 10px; font-size:10px; flex-shrink:0; }
.plan-pending button { font-size:9px; min-height:28px; padding:5px; background:transparent; color:#84621F; }
.plan-requests-panel { display:flex; flex-direction:column; flex:1; min-height:0; gap:10px; }
@media(max-height:700px) { .plans-page:has(.plan-pending) { gap:6px; } .plans-page:has(.plan-pending) .plans-sheet { gap:6px; } .plans-page:has(.plan-pending) .plan-comparison th,.plans-page:has(.plan-pending) .plan-comparison td { padding:5px 2px; } .plan-requests-panel { gap:6px; } }
@media(orientation:landscape) and (max-height:500px) { .plans-page:has(.plan-pending) .plan-comparison th,.plans-page:has(.plan-pending) .plan-comparison td { padding:2px; } .plans-page:has(.plan-pending) .plans-sheet>p { display:none; } .plans-page:has(.plan-pending) .plans-membership p { display:none; } }
.admin-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tariffs-panel { display:flex; flex-direction:column; flex:1; min-height:0; gap:12px; }
.tariffs-editor { background:white; border:1px solid #DFE8E3; border-radius:18px; padding:14px; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.tariffs-editor table { width:100%; table-layout:fixed; border-collapse:collapse; }
.tariffs-editor th { font-size:11px; text-align:center; padding:8px 4px; }
.tariffs-editor tbody th { text-align:left; }
.tariffs-editor td { padding:7px 4px; }
.tariffs-editor input { margin:0; min-height:40px; font-size:16px; padding:8px; }
.tariffs-editor p { font-size:10px; line-height:1.6; color:var(--muted); }
@media(min-width:800px) { .admin-tabs { grid-template-columns:repeat(7,minmax(0,1fr)); } }
@media(max-height:700px) { .tariffs-panel { gap:8px; } .tariffs-editor { padding:10px; gap:8px; } .tariffs-editor td,.tariffs-editor th { padding:5px 3px; } .tariffs-editor input { min-height:34px; padding:5px; } }
@media(orientation:landscape) and (max-height:500px) { .tariffs-panel { gap:5px; } .tariffs-editor { padding:5px 10px; gap:3px; } .tariffs-editor input { min-height:28px; height:28px; } .tariffs-editor td,.tariffs-editor th { padding:2px 3px; } .tariffs-editor p { font-size:9px; } .tariffs-panel>.primary { min-height:30px; padding:5px; } }
.sidebar-links button>.sidebar-label { margin:0; font:inherit; color:inherit; flex:1; text-align:left; }
.plan-prices tbody th { font-size:9px; letter-spacing:-.2px; white-space:nowrap; overflow-wrap:normal; }
@media(orientation:landscape) and (max-height:500px) { .plans-page:has(.plan-pending) .plan-prices th,.plans-page:has(.plan-pending) .plan-prices td { padding:5px 2px; } }

/* A compact, paginated register: the page itself never scrolls. */
.activity-panel { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
.activity-filters { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:8px; align-items:end; }
.activity-filters label { min-width:0; font-size:11px; }
.activity-filters input,.activity-filters select { min-width:0; width:100%; padding:8px; min-height:36px; font-size:12px; }
.activity-table-wrap { --activity-row-height:52; flex:1; min-height:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.activity-table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left; }
.activity-table th { height:36px; padding:6px 12px; font-size:11px; color:var(--muted); font-weight:600; background:#EDF3F080; }
.activity-table td { height:52px; padding:5px 12px; border-top:1px solid var(--border); font-size:12px; }
.activity-date-column { width:150px; }
.activity-user-column { width:28%; }
.activity-info-column { width:50px; }
.activity-table time { display:flex; flex-direction:column; gap:1px; font-variant-numeric:tabular-nums; font-size:11px; white-space:nowrap; }
.activity-table time small,.activity-table th small { font-size:10px; color:var(--muted); }
.activity-user { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-event { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.35; }
.activity-info { display:flex; align-items:center; justify-content:center; width:32px; min-width:32px; height:36px; min-height:36px; padding:4px; background:transparent; color:var(--accent); border-radius:10px; }
.activity-info svg { width:21px; height:21px; }
.activity-info:hover,.activity-info:focus-visible { background:var(--subtle); }
.activity-dialog dl { display:grid; gap:10px; margin:18px 0; }
.activity-dialog dl>div { min-width:0; }
.activity-dialog dt { font-size:10px; color:var(--muted); }
.activity-dialog dd { margin:2px 0 0; font-size:13px; overflow-wrap:anywhere; }
.activity-dialog h2 { font-size:21px; }
@media(min-width:800px) { .admin-tabs { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media(max-width:480px) {
 .activity-filters { grid-template-columns:1fr 1fr; gap:6px; }
 .activity-filters label:first-child { grid-column:1; grid-row:1; }
 .activity-filters button { grid-column:2; grid-row:1; }
 .activity-date-column { width:82px; }
 .activity-user-column { width:27%; }
 .activity-info-column { width:36px; }
 .activity-table th,.activity-table td { padding-left:6px; padding-right:6px; font-size:11px; }
 .activity-table time { font-size:10px; }
 .activity-table th small { display:none; }
 .activity-table td:last-child { padding:2px; }
 .activity-dialog { padding:18px; }
 .activity-dialog dl { gap:8px; }
}
@media(max-height:600px) {
 .activity-panel { gap:8px; }
 .activity-dialog dl { grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
 .activity-dialog { padding:16px; }
 .activity-dialog h2 { margin:0; font-size:18px; }
 .activity-dialog>.primary { margin-top:8px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .activity-filters { grid-template-columns:1.2fr 1fr 1fr auto; }
 .activity-filters label:first-child,.activity-filters button { grid-column:auto; grid-row:auto; }
 .activity-filters input,.activity-filters select { padding:4px 8px; min-height:28px; height:28px; }
 .activity-panel .admin-section-title p { display:none; }
}

.auth-card>.otp-delivery { display:block; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.otp-delivery strong { color:var(--ink); font-weight:650; }
.otp-resend-form { margin:0; }
.otp-resend { width:100%; min-height:36px; padding:6px; background:transparent; color:var(--accent); font-size:12px; }
.otp-resend:disabled { opacity:.6; }
.otp-note { color:var(--muted); font-size:10px; line-height:1.5; margin:0; }
@media(max-height:600px) { .auth-card>.otp-delivery { font-size:11px; line-height:1.4; } .otp-resend { min-height:30px; font-size:11px; } .otp-note { font-size:9px; } }
@media(max-height:600px) {
 .otp-shell .auth-brand { display:none; }
 .otp-shell .auth-card { gap:12px; }
 .otp-shell .auth-card h1 { font-size:24px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .otp-shell { max-width:740px; }
 .otp-shell .auth-card { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"error error" "title form" "delivery form" "note resend" "back back"; gap:10px 24px; }
 .otp-shell .auth-card h1 { grid-area:title; font-size:21px; }
 .otp-shell .auth-card>.error { grid-area:error; }
 .otp-shell .otp-delivery { grid-area:delivery; }
 .otp-shell form.stack { grid-area:form; }
 .otp-shell .otp-resend-form { grid-area:resend; }
 .otp-shell .otp-note { grid-area:note; }
 .otp-shell .auth-card>.auth-link { grid-area:back; }
}

.notice-shell { max-width:520px; padding:20px; }
.notice-card { gap:16px; }
.notice-card h1 { font-size:27px; }
.notice-form { display:flex; flex-direction:column; gap:16px; }
.notice-copy { min-height:260px; }
.notice-copy h2 { font-size:19px; margin:0 0 14px; }
.notice-copy p { font-size:12px; line-height:1.65; color:var(--muted); margin:0 0 14px; }
.notice-copy strong { color:var(--ink); font-weight:650; }
.notice-source { font-size:10px; color:var(--accent); }
.notice-consent { display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.5; }
.notice-consent input { width:20px; min-width:20px; height:20px; min-height:20px; margin:2px 0 0; padding:0; accent-color:var(--accent); }
.notice-tabs button { font-size:11px; }
.notice-actions { display:flex; gap:10px; }
.notice-actions>button { flex:1; }
.notice-wait { text-align:center; color:var(--muted); font-size:10px; min-height:15px; }
@media(max-height:700px) {
 .notice-shell { padding:12px 18px; }
 .notice-card { padding:18px; gap:12px; }
 .notice-card h1 { font-size:22px; }
 .notice-copy { min-height:245px; }
 .notice-copy h2 { font-size:17px; margin-bottom:10px; }
 .notice-copy p { font-size:11px; line-height:1.5; margin-bottom:10px; }
 .notice-form { gap:10px; }
 .notice-consent { font-size:11px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .notice-shell { max-width:800px; padding:10px 18px; }
 .notice-card { position:relative; padding:14px 18px; display:grid; grid-template-columns:220px 1fr; gap:10px 24px; }
 .notice-card h1 { grid-column:1; grid-row:1; }
 .notice-card .notice-tabs { grid-column:1; grid-row:2; }
 .notice-card>.error { grid-column:1; font-size:10px; padding:5px; }
 .notice-form { grid-column:2; grid-row:1 / span 4; }
 .notice-card>.auth-link { grid-column:1; grid-row:4; }
 .notice-copy { min-height:195px; }
 .notice-copy h2 { font-size:16px; }
 .notice-copy p { font-size:10px; line-height:1.45; margin-bottom:8px; }
 .notice-consent { font-size:10px; }
 .notice-actions button { min-height:32px; padding:6px; font-size:12px; }
 .notice-wait { font-size:9px; }
}
@media(max-height:600px) {
 .notice-shell { padding:10px 16px; }
 .notice-card { padding:16px; gap:10px; }
 .notice-card>.eyebrow { display:none; }
 .notice-copy { min-height:210px; }
 .notice-copy p { font-size:10.5px; line-height:1.45; margin-bottom:8px; }
 .notice-form { gap:8px; }
 .notice-tabs button { min-height:32px; padding:5px; }
 .notice-actions button { min-height:38px; padding:7px; }
 .notice-wait { font-size:9px; }
}
@media(orientation:landscape) and (max-height:500px) { .notice-copy { min-height:195px; } .notice-actions button { min-height:32px; } }

.trial-management .trial-state { padding:8px 10px; border-radius:10px; background:var(--subtle,#EDF3F0); color:var(--accent); font-weight:650; }
.trial-management .trial-actions { gap:8px; }
.trial-management .trial-actions button { font-size:12px; padding:8px 10px; }
@media(max-height:600px) { .trial-management { padding:16px; gap:10px; } .trial-management h2 { font-size:20px; } .trial-management p { font-size:11px; } }

.subscription-details dd.subscription-plan { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.plan-restore { display:block; padding:2px 0; min-height:30px; font-size:10px; font-weight:500; color:var(--accent); background:transparent; text-decoration:underline; text-underline-offset:3px; }
.purchase-restore-dialog h2 { font-size:22px; }
@media(max-height:600px) { .plan-restore { min-height:26px; font-size:9px; } .purchase-restore-dialog { padding:18px; } .purchase-restore-dialog p { font-size:11px; line-height:1.5; } }

/* Keep navigation fixed; six destinations share the available vertical space. */
.sidebar-panel { overflow:hidden; }
.sidebar-links { flex:1; min-height:0; display:grid; grid-template-rows:repeat(6,minmax(0,1fr)); gap:2px; }
.sidebar-links button { min-height:0; padding:6px 0; }
.sidebar-profile { flex-shrink:0; }
.sidebar-panel>.logout-link { flex-shrink:0; }
.ai-option-icon { width:17px; height:17px; flex-shrink:0; }
.ai-single-toggle { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; }
.ai-single-toggle input { appearance:none; -webkit-appearance:none; position:relative; flex-shrink:0; width:36px; height:22px; min-height:22px; padding:0; margin:0; border:1px solid var(--border); border-radius:20px; background:var(--muted); cursor:pointer; transition:background .2s; }
.ai-single-toggle input::before { content:""; position:absolute; width:16px; height:16px; top:2px; left:2px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px #0003; transition:transform .2s; }
.ai-single-toggle input:checked { background:var(--accent); }
.ai-single-toggle input:checked::before { transform:translateX(14px); background:var(--accent-ink); }
.ai-single-toggle input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ai-single-toggle span { font-size:12px; }
.ai-single-toggle small { display:block; font-size:10px; font-weight:400; color:var(--muted); margin-top:3px; }
.app-theme .plans-sheet { background:var(--surface); border-color:var(--border); }
.app-theme .plans-membership,.app-theme .plan-price-button,.app-theme .plan-pending { background:color-mix(in srgb,var(--accent) 16%,var(--surface)); }
.app-theme .plan-price-button,.app-theme .plan-pending button { color:var(--accent); }
.app-theme .plan-admin-dialog { background:var(--surface); color:var(--ink); }
.app-theme .plans-membership strong,.app-theme .plans-membership p,.app-theme .plan-comparison td { color:var(--accent); }
.app-theme .plan-comparison th,.app-theme .plan-comparison td,.app-theme .plan-prices th,.app-theme .plan-prices td { border-color:var(--border); }
.daily-macros,.meal-grid { animation:none; }
.animated-number { font-variant-numeric:tabular-nums; }
@media(max-height:700px) { .ai-input.stack { gap:9px; } .ai-input textarea { height:85px; min-height:65px; } .ai-single-toggle { padding:6px 9px; } .sidebar-panel { gap:12px; } }
@media(max-height:500px) { .ai-input textarea { height:58px; min-height:48px; } .ai-single-toggle { padding:4px 8px; } .ai-single-toggle small { display:none; } .sidebar-panel { gap:8px; } }
.profile-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; align-content:start; flex:1; min-height:0; }
.profile-info-grid label { min-width:0; }
.profile-info-grid .profile-email-field,.profile-info-grid .profile-username-field { grid-column:1 / -1; }
.profile-info-grid input,.profile-info-grid select { min-width:0; width:100%; }
.profile-plan-content { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; }
@media(max-height:650px) { .profile-info-grid { gap:10px; } }
@media(orientation:landscape) and (max-height:500px) {
 .profile-screen:has(.profile-info-grid) { max-width:780px; }
 .profile-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px; }
 .profile-info-grid .profile-email-field,.profile-info-grid .profile-username-field { grid-column:auto; }
 .profile-plan-content { justify-content:flex-start; width:100%; margin:0; }
}
@media(max-height:650px) {
 .app-theme .plan-admin-dialog { width:calc(100vw - 32px); padding:16px; gap:10px; }
 .app-theme .plan-admin-dialog h2 { font-size:20px; }
 .app-theme .plan-admin-dialog p { font-size:11px; line-height:1.45; }
 .app-theme .plan-admin-dialog button { min-height:34px; padding:7px 12px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .app-theme .plan-admin-dialog { max-width:620px; padding:14px; gap:8px; }
 .app-theme .plan-admin-dialog p { font-size:10px; }
}

.food-list-heading { font-size:13px; flex-shrink:0; color:var(--muted); }
.meal-visibility { display:flex; flex-direction:row; align-items:center; gap:10px; font-size:12px; }
.meal-visibility input { width:20px; height:20px; min-height:20px; margin:0; accent-color:var(--accent); }
.empty-meals { grid-column:1 / -1; grid-row:1 / -1; padding:20px; background:var(--surface); color:var(--ink); border:1px solid var(--border); font-size:13px; line-height:1.6; }
.meal-grid>.meal-tile:last-child:nth-child(odd) { grid-column:1 / -1; }
@media(orientation:landscape) and (max-height:500px) {
 .meal-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .meal-grid>.meal-tile { grid-column:span 2; }
 .meal-grid>.meal-tile:last-child:nth-child(odd) { grid-column:span 2; }
 .meal-grid>.meal-tile:nth-last-child(2):nth-child(3n+1),.meal-grid>.meal-tile:last-child:nth-child(3n+2) { grid-column:span 3; }
 .meal-grid>.meal-tile:last-child:nth-child(3n+1) { grid-column:1 / -1; }
}
.subscription-settings-panel { display:flex; flex-direction:column; gap:20px; min-height:0; }
.mode-switch { display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--surface); gap:12px; }
.mode-switch small { display:block; font-size:11px; color:var(--muted); margin-top:8px; }
.mode-switch input { appearance:none; -webkit-appearance:none; width:48px; min-width:48px; height:28px; min-height:28px; border:1px solid var(--border); border-radius:20px; position:relative; padding:0; background:#A6B1AC; }
.mode-switch input:before { content:""; position:absolute; width:22px; height:22px; left:2px; top:2px; background:white; border-radius:50%; transition:transform .2s; }
.mode-switch input:checked { background:var(--accent); }
.mode-switch input:checked:before { transform:translateX(20px); }
.monthly-price-editor { display:flex; flex-direction:column; gap:12px; }
.single-plan-card { align-items:stretch; gap:18px; text-align:center; }
.single-plan-card h2 { font-size:24px; }
.monthly-plan-price { font-size:38px; color:var(--accent); }
.monthly-plan-price small { font-size:14px; font-weight:500; }
.donation-symbol { font-size:52px; color:var(--accent); }
.donation-button { display:block; text-align:center; text-decoration:none; padding:15px; border-radius:14px; }
.single-plan-card .frozen-notice { padding:12px; border:1px solid var(--border); border-radius:14px; font-size:11px; }
@media(max-height:650px) { .subscription-settings-panel { gap:12px; } .single-plan-card { gap:12px; } .single-plan-card h2 { font-size:19px; } .single-plan-card p { font-size:10px; line-height:1.5; } .donation-symbol { font-size:36px; } .monthly-plan-price { font-size:28px; } }
@media(orientation:landscape) and (max-height:500px) { .single-plan-card { gap:8px; } .donation-symbol { display:none; } .single-plan-card h2 { font-size:18px; } .single-plan-card p { font-size:10px; } .single-plan-card button,.donation-button { padding:8px; min-height:32px; } .single-plan-card .frozen-notice { padding:7px; } }
.app-theme .donation-button,.app-theme .donation-button:hover { color:var(--accent-ink); }
.subscription-settings-panel { flex:1; }
@media(max-height:650px) {
 .mode-switch { padding:12px; }
 .subscription-settings-panel>.hint { font-size:10px; line-height:1.5; }
 .monthly-price-editor { gap:8px; }
 .monthly-price-editor input { min-height:38px; height:38px; padding:8px 12px; }
 .monthly-price-editor button { min-height:38px; padding:9px; }
}
@media(orientation:landscape) and (max-height:500px) {
 .subscription-settings-panel { gap:8px; }
 .mode-switch { padding:9px 12px; }
 .mode-switch small { margin-top:3px; }
 .monthly-price-editor { flex-direction:row; align-items:end; }
 .monthly-price-editor label { flex:1; }
 .monthly-price-editor button { min-width:200px; }
}
.remember-access-dialog { width:calc(100vw - 32px); max-width:420px; display:flex; flex-direction:column; gap:14px; }
.remember-access-dialog h2,.remember-access-dialog .eyebrow { margin:0; }
.remember-access-actions { display:flex; gap:10px; }
.remember-access-actions button { flex:1; font-size:12px; }
@media(max-height:650px) { .remember-access-dialog { padding:18px; gap:12px; } .remember-access-dialog h2 { font-size:21px; } .remember-access-dialog p { font-size:11px; line-height:1.5; } }
@media(orientation:landscape) and (max-height:500px) { .remember-access-dialog { max-width:580px; } }