:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; padding-bottom: calc(82px + var(--safe-bottom)); }
button, input, select, textarea { font-size: 16px; }
button { touch-action: manipulation; }
.hide { display: none !important; }

.mobile-topbar { display: none; }
.mobile-bottom-nav { display: none; }
.auth-screen { position: fixed; inset: 0; z-index: 3000; display: none; place-items: center; padding: calc(24px + var(--safe-top)) 18px calc(24px + var(--safe-bottom)); background: linear-gradient(155deg, #173b23, #2f653b 58%, #dce9a5); }
.auth-screen.open { display: grid; }
.auth-card { width: min(100%, 430px); max-height: 100%; overflow: auto; background: #fff; border-radius: 28px; padding: 26px 22px; box-shadow: 0 24px 90px rgba(0,0,0,.3); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--soft-lime); color: var(--green); font-size: 25px; font-weight: 900; }
.auth-brand h1 { margin: 0; font-size: 25px; }
.auth-brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--paper); padding: 4px; border-radius: 13px; margin-bottom: 18px; }
.auth-switch button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; }
.auth-switch button.active { background: #fff; color: var(--green-dark); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; }
.auth-form input { width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: #fff; }
.auth-form .primary { min-height: 50px; margin-top: 4px; }
.auth-message { min-height: 20px; margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--green-dark); }
.auth-message.error { color: var(--danger); }
.auth-privacy { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.auth-open { overflow: hidden; }

.account-sheet-backdrop { position: fixed; inset: 0; z-index: 2200; display: none; align-items: end; background: rgba(13,30,17,.44); }
.account-sheet-backdrop.open { display: flex; }
.account-sheet { width: 100%; max-height: 88dvh; overflow: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 12px 18px calc(22px + var(--safe-bottom)); box-shadow: 0 -18px 60px rgba(0,0,0,.25); }
.sheet-handle { width: 44px; height: 5px; margin: 0 auto 15px; border-radius: 99px; background: #d6ddd3; }
.sheet-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-heading h2 { margin: 0; }
.sheet-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); font-size: 25px; }
.account-email { margin: 2px 0 18px; color: var(--muted); font-size: 12px; }
.household-box { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft-lime); }
.household-box > span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.household-box h3 { margin: 5px 0 12px; }
.code-row { display: flex; align-items: center; gap: 9px; }
.code-row code { flex: 1; padding: 12px; border-radius: 11px; background: #fff; color: var(--green-dark); font-size: 20px; letter-spacing: .15em; text-align: center; font-weight: 900; }
.code-row button { min-height: 44px; border: 0; border-radius: 11px; padding: 0 13px; background: var(--green); color: #fff; font-weight: 800; }
.join-box { display: grid; gap: 9px; margin-top: 16px; }
.join-box label { font-size: 12px; font-weight: 800; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-row input { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 13px; text-transform: uppercase; letter-spacing: .1em; }
.join-row button { border: 0; border-radius: 12px; padding: 0 16px; background: var(--green-dark); color: #fff; font-weight: 800; }
.sheet-actions { display: grid; gap: 9px; margin-top: 18px; }
.sheet-actions button { min-height: 48px; border-radius: 13px; font-weight: 800; }
.sheet-actions .logout { border: 1px solid #ebc4bc; background: #fff7f5; color: var(--danger); }
.account-message { color: var(--danger); font-size: 11px; }

.sync-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 125px; min-height: 32px; padding: 0 10px; border-radius: 99px; background: #edf4eb; color: var(--green-dark); font-size: 10px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-pill::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #5d9d61; }
.sync-pill[data-state='saving']::before, .sync-pill[data-state='loading']::before { background: #d89f39; animation: pulse 1s infinite; }
.sync-pill[data-state='offline']::before { background: #8a918a; }
.sync-pill[data-state='error']::before { background: var(--danger); }
@keyframes pulse { 50% { opacity: .3; } }

.shopping-row.is-checked { opacity: .52; }
.shopping-row.is-checked strong { text-decoration: line-through; }
.shopping-row input[type='checkbox'] { width: 23px; height: 23px; accent-color: var(--green); }

@media (max-width: 760px) {
  body { background: #f6f7f3; }
  .mobile-topbar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: calc(58px + var(--safe-top)); padding: var(--safe-top) 14px 0; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(210,218,207,.8); }
  .mobile-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mobile-brand b { font-size: 16px; }
  .mobile-brand small { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
  .mobile-top-actions { display: flex; align-items: center; gap: 7px; }
  .account-button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--green-dark); color: #fff; font-weight: 900; }

  .hero { padding: 18px 0 15px; }
  .hero-grid { display: block; }
  .hero h1 { font-size: clamp(29px, 9vw, 39px); line-height: .98; }
  .hero-copy { font-size: 12px; }
  .hero-card { margin-top: 14px; min-height: 0; padding: 15px 17px; }
  .hero-card strong { font-size: 27px; }
  .shell { width: min(100% - 22px, 1180px); }
  .app-layout { display: block; padding-top: 12px; }
  .settings-panel { display: none; margin-bottom: 14px; }
  .settings-panel.mobile-open { display: block; position: fixed; z-index: 2100; inset: calc(58px + var(--safe-top)) 0 calc(70px + var(--safe-bottom)); margin: 0; overflow: auto; border-radius: 0; padding: 18px 16px 30px; }
  .content-panel { min-width: 0; }
  .tabs { display: none; }
  .meal-card { grid-template-columns: 34px minmax(0,1fr); padding: 15px 13px; gap: 10px; }
  .meal-side { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .meal-title { font-size: 18px; line-height: 1.15; }
  .meal-main p { font-size: 11px; }
  .meal-actions .action-button { min-height: 42px; }
  .meal-actions .icon-button { width: 42px; height: 42px; }
  .shopping-grid, .inventory-layout, .database-layout { display: block; }
  .shopping-card, .inventory-card, .database-browser, .recipe-chat-card { padding: 16px; border-radius: 17px; }
  .side-stack { margin-top: 12px; }
  .shopping-row { grid-template-columns: 28px minmax(0,1fr); gap: 10px; padding: 15px 0; }
  .shopping-row .align-right { grid-column: 2; text-align: left; display: flex; justify-content: space-between; gap: 8px; }
  .inventory-row.custom-row { padding: 13px 0; }
  .database-layout .recipe-chat-card { margin-top: 12px; }
  .chat-messages { max-height: 34dvh; }
  .chat-form textarea { min-height: 96px; padding-right: 52px; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 22px 17px calc(20px + var(--safe-bottom)); }
  .toast { bottom: calc(82px + var(--safe-bottom)); }

  .mobile-bottom-nav { position: fixed; z-index: 1500; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: calc(68px + var(--safe-bottom)); padding: 5px 7px var(--safe-bottom); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); border-top: 1px solid rgba(210,218,207,.9); }
  .mobile-bottom-nav button { min-width: 0; min-height: 58px; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: 12px; background: transparent; color: #747d72; font-size: 9px; font-weight: 800; }
  .mobile-bottom-nav button span:first-child { font-size: 20px; line-height: 1; }
  .mobile-bottom-nav button.active { background: var(--soft-lime); color: var(--green-dark); }
}

/* Anonyme Gerätesitzung und Haushaltszugang */
.startup-card { text-align: left; }
.startup-card > h2 { margin: 0 0 10px; font-size: 22px; }
.startup-message { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.startup-message.error { color: var(--danger); }
.startup-actions { display: grid; gap: 10px; margin-top: 20px; }
.startup-actions button, #startupRetry { width: 100%; min-height: 50px; border-radius: 14px; font-weight: 850; }
#startupRetry { margin-top: 18px; }
.startup-loader { width: 34px; height: 34px; margin: 4px 0 18px; border: 4px solid #dfe8dc; border-top-color: var(--green); border-radius: 50%; animation: startup-spin .85s linear infinite; }
@keyframes startup-spin { to { transform: rotate(360deg); } }

.access-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 9px; }
.access-grid > div { min-width: 0; padding: 10px; border-radius: 12px; background: #fff; }
.access-grid small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.access-grid code { display: block; overflow: hidden; color: var(--green-dark); font-size: 18px; letter-spacing: .12em; text-align: center; font-weight: 900; white-space: nowrap; }
.access-hint { margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.copy-access-button { width: 100%; min-height: 44px; border: 0; border-radius: 11px; padding: 0 13px; background: var(--green); color: #fff; font-weight: 800; }
.copy-access-button:disabled { opacity: .45; }
.join-fields { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.join-fields input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 10px; background: #fff; text-align: center; letter-spacing: .1em; font-weight: 800; }
.join-box > button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 16px; background: var(--green-dark); color: #fff; font-weight: 800; }
.account-message { min-height: 17px; line-height: 1.4; }
.account-message.success { color: var(--green-dark); }

@media (max-width: 360px) {
  .access-grid, .join-fields { grid-template-columns: 1fr; }
}