:root {
  --bg: #10141a;
  --surface: #1c2532;
  --surface-soft: #263142;
  --surface-raised: #2c394a;
  --text: #f5f7fb;
  --text-soft: #c3ccda;
  --text-faint: #96a4b8;
  --line: #354355;
  --line-strong: #52647a;
  --accent: #2781f4;
  --accent-strong: #146de6;
  --accent-soft: #203a60;
  --accent-ink: #fff;
  --shadow: 0 20px 54px rgba(0, 0, 0, .34);
  --shadow-small: 0 8px 24px rgba(0, 0, 0, .22);
  color-scheme: dark;
}
html[data-theme="dark"] {
  --bg: #10141a; --surface: #1c2532; --surface-soft: #263142; --surface-raised: #2c394a;
  --text: #f5f7fb; --text-soft: #c3ccda; --text-faint: #96a4b8;
  --line: #354355; --line-strong: #52647a;
  --accent: #2781f4; --accent-strong: #146de6; --accent-soft: #203a60; --accent-ink: #fff;
  --shadow: 0 20px 54px rgba(0, 0, 0, .34); --shadow-small: 0 8px 24px rgba(0, 0, 0, .22);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f9; --surface: #fff; --surface-soft: #f4f7fb; --surface-raised: #fff;
  --text: #1e2b3b; --text-soft: #4c5c70; --text-faint: #708096;
  --line: #d8e0eb; --line-strong: #b4c1d0;
  --accent: #1667dc; --accent-strong: #0d55c3; --accent-soft: #e5efff; --accent-ink: #fff;
  --shadow: 0 20px 54px rgba(25, 40, 62, .16); --shadow-small: 0 8px 24px rgba(25, 40, 62, .09);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg: #f2f5f9; --surface: #fff; --surface-soft: #f4f7fb; --surface-raised: #fff;
    --text: #1e2b3b; --text-soft: #4c5c70; --text-faint: #708096;
    --line: #d8e0eb; --line-strong: #b4c1d0;
    --accent: #1667dc; --accent-strong: #0d55c3; --accent-soft: #e5efff; --accent-ink: #fff;
    --shadow: 0 20px 54px rgba(25, 40, 62, .16); --shadow-small: 0 8px 24px rgba(25, 40, 62, .09);
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #10141a; --surface: #1c2532; --surface-soft: #263142; --surface-raised: #2c394a;
    --text: #f5f7fb; --text-soft: #c3ccda; --text-faint: #96a4b8;
    --line: #354355; --line-strong: #52647a;
    --accent: #2781f4; --accent-strong: #146de6; --accent-soft: #203a60; --accent-ink: #fff;
    --shadow: 0 20px 54px rgba(0, 0, 0, .34); --shadow-small: 0 8px 24px rgba(0, 0, 0, .22);
  }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.app-shell { position: relative; isolation: isolate; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); }
.app-shell::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 310px; background: linear-gradient(180deg, rgba(10, 14, 20, .28) 0%, rgba(10, 14, 20, .4) 42%, var(--bg) 100%), url('./assets/hero-groceries.webp') center 38% / cover no-repeat; }
.topbar { --topbar-content-height: 108px; position: relative; width: min(100% - 48px, 1120px); min-height: calc(var(--topbar-content-height) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); border: 0; gap: 18px; }
.brand { align-items: center; gap: 15px; color: #fff; }
.brand-mark { width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #fff; background: #11a99f; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.brand-mark svg { width: 36px; height: 36px; }
.brand-copy { display: grid; gap: 2px; }
.brand-name { font-size: 31px; line-height: 1; letter-spacing: -.065em; }
.brand-name span { color: #378cf6; }
.brand-tagline { color: rgba(255,255,255,.82); font-size: 13px; font-weight: 450; }
.topbar-actions { gap: 12px; }
.offline-status { display: none; }
.theme-control { color: rgba(255,255,255,.86); font-size: 12px; }
.theme-control select, .install-button { color: #fff; background: rgba(31, 38, 51, .56); border: 1px solid rgba(255,255,255,.29); backdrop-filter: blur(12px); }
.theme-control select { min-height: 42px; padding: 0 30px 0 13px; }
.install-button { min-height: 42px; padding: 0 16px; color: #202a39; background: rgba(255,255,255,.94); font-weight: 730; }
.install-button:hover { background: #fff; }
.main-content { width: min(100% - 48px, 1120px); padding: 4px 0 36px; }
.shopping-panel { margin-bottom: 22px; overflow: hidden; border: 1px solid rgba(143, 164, 195, .19); border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.list-toolbar { margin: 0; padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.list-controls { align-items: center; gap: 18px; }
.list-select-wrap { min-width: 185px; gap: 5px; }
.field-label { color: var(--text-soft); font-size: 11px; }
.list-select-wrap select { min-height: 42px; border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-soft) 78%, transparent); font-size: 15px; }
.list-summary { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 175px; padding: 0; }
.summary-copy { margin: 0; align-items: center; }
.summary-copy strong { color: var(--text); font-size: 13px; }
.summary-copy span { font-size: 11px; }
.progress-track { height: 6px; background: color-mix(in srgb, var(--surface-soft) 78%, #63748b); }
.progress-track span { background: #2684f6; }
.toolbar-actions { gap: 9px; }
.primary-button, .secondary-button { min-height: 43px; border-radius: 11px; }
.toolbar-actions .secondary-button { background: color-mix(in srgb, var(--surface-soft) 78%, transparent); }
.toolbar-actions .primary-button { background: #226df0; border-color: #226df0; }
.add-card { margin: 0; padding: 16px 18px 13px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.add-form { grid-template-columns: minmax(0, 1fr) 86px auto; gap: 16px; }
.field input, .field select { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-soft) 82%, transparent); }
.product-field input { border: 2px solid #227cf1; background: color-mix(in srgb, var(--surface-soft) 85%, transparent); }
.add-button { min-height: 47px; min-width: 142px; background: #227cf1; box-shadow: 0 6px 19px rgba(21, 101, 230, .22); }
.add-button:hover, .toolbar-actions .primary-button:hover { background: #155ed5; }
.add-hint { margin: 7px 0 0; font-size: 11px; }
.list-heading { align-items: center; margin-bottom: 14px; }
.list-heading h2 { font-size: 21px; letter-spacing: -.04em; }
.text-button { font-size: 13px; }
.shopping-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.category-card { border-color: var(--line); border-radius: 18px; box-shadow: var(--shadow-small); }
.category-heading, .category-heading.has-photo { min-height: 82px; align-items: flex-start; padding: 14px 15px; border-bottom: 1px solid color-mix(in srgb, var(--category-color) 24%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--category-color) 43%, #17202b) 0%, color-mix(in srgb, var(--category-color) 18%, #17202b) 53%, #17202b 100%); }
.category-heading::before { display: none; }
.category-heading.has-photo .category-title-wrap { max-width: 67%; }
.category-photo-stack { width: 57%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
.category-card--cleaning .category-photo,
.category-card--hygiene .category-photo { object-fit: contain; object-position: right center; }
.category-title-wrap { z-index: 2; gap: 11px; color: #fff; }
.category-icon { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.21); border-radius: 13px; color: #fff; background: var(--category-color); box-shadow: 0 4px 11px rgba(0,0,0,.15); }
.category-icon.has-photo { background: var(--category-color); }
.category-icon-photo { opacity: .92; }
.category-title-wrap h3 { margin-top: 2px; color: #fff; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.36); }
.category-count { position: absolute; z-index: 2; left: 68px; bottom: 14px; padding: 0; border: 0; border-radius: 0; color: rgba(255,255,255,.83); background: transparent; font-size: 11px; white-space: nowrap; }
.category-art { right: 6px; width: 80px; opacity: .42; color: #fff; }
.product-list { padding: 0 13px; }
.product-row { min-height: 43px; grid-template-columns: 35px minmax(0, 1fr) auto; gap: 7px; }
.check-button { width: 35px; height: 41px; }
.check-circle { width: 19px; height: 19px; }
.product-name { font-size: 12px; }
.product-quantity { font-size: 10px; }
.product-actions { gap: 0; }
.icon-button { width: 33px; height: 36px; }
.icon-button svg { width: 16px; height: 16px; }
.app-footer { padding-top: 28px; }
.modal { border-color: var(--line-strong); }
.modal::backdrop { background: rgba(5, 9, 17, .72); }
@media (max-width: 760px) {
  .topbar, .main-content { width: min(100% - 28px, 620px); }
  .topbar { --topbar-content-height: 94px; }
  .main-content { padding-top: 0; }
  .shopping-list { grid-template-columns: 1fr; }
  .list-toolbar { grid-template-columns: 1fr; gap: 13px; }
  .list-controls { flex-direction: row; align-items: flex-end; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-actions > button { width: 100%; }
}
@media (max-width: 480px) {
  .app-shell::before { height: 300px; background-position: center, 57% clamp(18px, env(safe-area-inset-top, 0px), 50px); }
  .topbar, .main-content { width: calc(100% - 22px); }
  .topbar { --topbar-content-height: 112px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 39px; height: 39px; border-radius: 12px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .brand-name { font-size: 21px; }
  .brand-tagline { max-width: 170px; font-size: 9px; }
  .topbar-actions { gap: 5px; }
  .theme-control { gap: 0; }
  .theme-control > span { display: none; }
  .theme-control select { min-height: 36px; max-width: 86px; padding: 0 5px; font-size: 11px; }
  .install-button { min-height: 36px; padding: 0 9px; font-size: 11px; }
  .install-button svg { width: 14px; height: 14px; }
  .shopping-panel { border-radius: 16px; }
  .list-toolbar { padding: 13px; }
  .list-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .list-select-wrap { width: 100%; min-width: 0; }
  .list-select-wrap select { font-size: 16px; }
  .list-summary { width: 100%; min-width: 0; flex: 0 1 auto; }
  .summary-copy { align-items: center; }
  .summary-copy strong { font-size: 12px; }
  .summary-copy span { font-size: 11px; }
  .add-card { padding: 13px; }
  .add-form { grid-template-columns: 82px minmax(0, 1fr); grid-template-areas: "product product" "quantity add"; gap: 9px; }
  .product-field { grid-area: product; }
  .quantity-field { grid-area: quantity; min-width: 0; }
  .add-button { grid-area: add; min-height: 48px; min-width: 0; width: 100%; }
  .add-hint { font-size: 10px; }
  .list-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .list-heading h2 { font-size: clamp(16px, 4.4vw, 18px); line-height: 1.2; }
  .list-heading .text-button { min-height: 44px; white-space: nowrap; font-size: 11px; }
  .category-heading.has-photo { min-height: 84px; }
  .category-photo-stack { width: 58%; }
  .category-title-wrap h3 { font-size: 14px; }
  .product-row { min-height: 50px; }
  .check-button { height: 48px; }
  .icon-button { width: 38px; height: 42px; }
}
@media (max-width: 350px) {
  .add-form { grid-template-columns: 72px minmax(0, 1fr); }
  .brand-tagline { display: none; }
  .brand-name { font-size: 19px; }
  .install-button span { display: none; }
  .install-button { width: 35px; padding: 0; }
  .category-heading.has-photo .category-title-wrap { max-width: 70%; }
  .category-title-wrap h3 { font-size: 13px; }
}