* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:root {
  --navy: #0E2A38;
  --navy-soft: #12323F;
  --teal: #12B7A5;
  --teal-deep: #0E9B8C;
  --cream: #FFF9F0;
  --card: #FFFFFF;
  --ink: #122A35;
  --muted: #5C6F7A;
  --line: #F0E7DC;
  --sage: #9CC8A5;
  --sage-soft: #E4F3E9;
  --fresh: #3FAE6F;
  --usefirst: #F59E0B;
  --usefirst-soft: #FFF0D1;
  --urgent: #FF6B5B;
  --urgent-soft: #FFE5E0;
  --neutral-soft: #EEF1F0;
  --lavender: #8B7CF6;
  --lavender-soft: #EAE7FF;
  --berry: #FF5D8F;
  --berry-soft: #FFE3EE;
  --gold: #D4A93E;
  --gold-deep: #B8860B;
  --gold-soft: #FBF3DD;
  --gold-bright: #FFD98A;
  --rose: #E8547A;
  --rose-soft: #FFE9F0;
  --plum: #7A3E8E;
  --emerald: #1E9E6C;
  --shadow: 0 2px 6px rgba(7, 21, 26, 0.06), 0 12px 28px rgba(7, 21, 26, 0.10);
  --shadow-lux: 0 4px 12px rgba(120, 90, 20, 0.12), 0 18px 40px rgba(120, 90, 20, 0.16);

  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #FFF9F0 0%, #F6F1E6 22%, #EAF5F2 55%, #E9EFFB 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background: linear-gradient(160deg, #0B2531 0%, #103B48 38%, #13695F 68%, #148A6C 100%);
  padding: 20px 20px 72px;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 138, 0.32), transparent 70%);
  top: -110px;
  right: -90px;
}

.hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 213, 190, 0.35), transparent 70%);
  bottom: -100px;
  left: -80px;
}

.van-line {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(247, 244, 236, 0.5);
  margin-bottom: 14px;
}

.hero-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFD98A, #D4A93E);
  padding: 5px;
  box-shadow: 0 6px 22px rgba(255, 217, 138, 0.55);
  overflow: hidden;
}

.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.hero h1 {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #FFFFFF 20%, #FFD98A 55%, #FFF3D6 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .greeting {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sage);
}

.hero .tagline {
  margin-top: 2px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 231, 180, 0.85);
}

main {
  /* Fluid-first base layout: never lock the whole app to the old phone width. */
  width: min(calc(100% - 32px), 1440px);
  max-width: 1440px;
  margin: -46px auto 0;
  padding: 0 0 110px;
}

.page {
  display: none;
}

.page.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: page-in 0.28s ease both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Cards ---- */
.card {
  background: linear-gradient(180deg, #FFFFFF, #FFFCF4);
  border: 1px solid #F2E8D4;
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}

h2 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

h3 {
  font-family: var(--font-head);
}

/* ---- Alert card ---- */
.alert-card {
  border: 1px solid #F7DFA8;
  background: linear-gradient(180deg, #FFFBE9, #FFF3D6);
  animation: pop-in 0.35s ease both;
}

.alert-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--usefirst-soft);
  color: var(--usefirst);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-sub {
  font-size: 12px;
  color: #B08A3F;
  font-weight: 600;
  margin-top: 1px;
}

.alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px dashed #F0E0BD;
}

.alert-item .item-name {
  font-family: var(--font-head);
  font-weight: 700;
  color: #7A5F24;
  font-size: 15px;
}

/* ---- Stats ---- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.stat-card {
  border-radius: 18px;
  padding: 14px 6px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.stat-card:nth-child(1) { background: linear-gradient(180deg, #FFFFFF, #DFF6F2); }
.stat-card:nth-child(2) { background: linear-gradient(180deg, #FFFFFF, #FFF3D6); }
.stat-card:nth-child(3) { background: linear-gradient(180deg, #FFFFFF, #FFE9E4); }

.stat-card:active { transform: scale(0.96); }

.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon-teal { background: #DFF5F2; color: var(--teal); }
.stat-icon-amber { background: var(--usefirst-soft); color: var(--usefirst); }
.stat-icon-red { background: var(--urgent-soft); color: var(--urgent); }

.stat-num {
  font-family: var(--font-head);
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

.stat-card label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Kitchen ---- */
.kitchen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.add-btn {
  background: var(--teal);
  color: var(--navy);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(25, 184, 166, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}

.add-btn:hover { background: #2BC2B0; }
.add-btn:active { transform: scale(0.96); }

.scan-btn {
  background: #fff;
  color: var(--teal-deep);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.scan-btn:hover { background: #EFFFFB; }

/* ---- Form ---- */
.add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 16px;
  background: #FBF9F2;
  border: 1px solid var(--line);
  border-radius: 16px;
  animation: pop-in 0.3s ease both;
}

.add-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5F737A;
  margin-bottom: 5px;
}

.add-form input,
.add-form select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-form input:focus,
.add-form select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(25, 184, 166, 0.2);
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.save-btn {
  flex: 1;
  background: var(--teal);
  color: var(--navy);
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(25, 184, 166, 0.35);
}

.save-btn:hover { background: #2BC2B0; }
.save-btn:active { transform: scale(0.97); }

.cancel-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
}

/* ---- Items ---- */
.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  animation: rise 0.3s ease both;
}

.item:last-child { border-bottom: none; }

.item-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-body {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.item-meta .where { color: #8B9890; }

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-fresh { background: var(--sage-soft); color: #2E8B57; }
.badge-soon { background: var(--usefirst-soft); color: #C07A00; }
.badge-expired { background: var(--urgent-soft); color: #E04A3C; }
.badge-neutral { background: var(--neutral-soft); color: #5C6F7A; }
.badge-lavender { background: var(--lavender-soft); color: #6A55E8; }
.badge-berry { background: var(--berry-soft); color: #E2366D; }

.delete {
  background: none;
  border: none;
  color: #C6D0CD;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s ease, color 0.15s ease;
}

.delete:hover {
  background: var(--urgent-soft);
  color: var(--urgent);
}

/* ---- Buttons / links ---- */
.text-btn {
  background: none;
  border: none;
  color: var(--teal-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.wide-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--teal);
  color: var(--navy);
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(25, 184, 166, 0.35);
}

.wide-btn:hover { background: #2BC2B0; }
.wide-btn:active { transform: scale(0.97); }

.wide-btn.secondary {
  background: #fff;
  color: var(--teal-deep);
  border: 2px solid var(--teal);
  box-shadow: none;
}

.wide-btn.secondary:active { transform: scale(0.97); }

.hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Tab bar ---- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
}

.tab {
  background: none;
  border: none;
  color: #9AA7A9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 18px;
  border-radius: 14px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tab.active {
  color: var(--teal-deep);
  background: var(--sage-soft);
}

.tab.active svg {
  stroke: var(--teal-deep);
}

/* ---- Grocery list ---- */
.grocery-add {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.grocery-add input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FBF9F2;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.grocery-add input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(25, 184, 166, 0.2);
}

.grocery-add .save-btn {
  padding: 12px 20px;
  flex: 0 0 auto;
}

.grocery-tip {
  margin: 8px 2px 4px;
}

.grocery-dest {
  font-size: 11px;
  font-weight: 700;
  color: #5686A8;
  background: #EAF3F8;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

.warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #B07A1E;
  background: var(--usefirst-soft);
  border: 1px solid #F3E0B5;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  animation: pop-in 0.25s ease both;
}

.warning::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--usefirst);
  flex-shrink: 0;
}

.grocery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  animation: rise 0.3s ease both;
}

.grocery-item:last-child { border-bottom: none; }

.grocery-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
}

.grocery-name {
  flex: 1;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.grocery-item.done .grocery-name {
  text-decoration: line-through;
  color: var(--muted);
}

.grocery-dest { color: #5686A8; }
.grocery-item .badge { flex-shrink: 0; }

/* ---- Store picker & order links ---- */
.store-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  padding: 10px 12px;
  background: #FBF9F2;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.store-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 2px;
}

.store-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.store-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.store-chip:active { transform: scale(0.95); }

.store-chip.active {
  background: var(--chip-bg, var(--teal));
  color: var(--chip-color, var(--teal-deep));
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.order-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-deep);
  background: #DFF5F2;
  border-radius: 999px;
  padding: 5px 11px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.order-link:hover { background: #C8EDE8; }

.order-recipe {
  display: inline-block;
  margin-top: 12px;
}

/* ---- Recipe page ---- */
.group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  padding: 4px 2px 0;
}

.recipe-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.recipe-card {
  background: var(--card);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.recipe-card.card-soon { border-color: #F3E0B5; }
.recipe-card.card-almost { border-color: #E3EBE4; }
.recipe-card.open { border-color: var(--teal); }

.recipe-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.recipe-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recipe-body {
  flex: 1;
  min-width: 0;
}

.recipe-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
}

.recipe-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  gap: 8px;
}

.recipe-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-left: 6px;
}

.chevron {
  color: #C6D0CD;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.recipe-card.open .chevron { transform: rotate(180deg); }

.recipe-detail {
  display: none;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  animation: page-in 0.25s ease both;
}

.recipe-card.open .recipe-detail { display: block; }

.detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.ing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ing-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}

.ing-have {
  background: var(--sage-soft);
  color: #3E8C62;
}

.ing-have::before {
  content: "\2713  ";
  font-weight: 700;
}

.ing-miss {
  background: var(--usefirst-soft);
  color: #B07A1E;
}

.steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steps li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.steps li::before {
  content: counter(step);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #DFF5F2;
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Empty state ---- */
.empty {
  text-align: center;
  padding: 18px 10px 8px;
  color: var(--muted);
}

.empty svg { opacity: 0.9; }

.empty p { font-size: 15px; color: #5F6A6E; }

.empty .empty-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(7, 21, 26, 0.3);
  animation: pop-in 0.3s ease both;
  z-index: 50;
}

/* ---- Animations ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Scan Kitchen ---- */
.scan-card {
  border: none;
  background: linear-gradient(135deg, #12B7A5, #0E9B8C 60%, #0B7F86);
  color: #fff;
  box-shadow: 0 8px 22px rgba(14, 155, 140, 0.35);
}

.scan-card .scan-promo-body h2 { color: #fff; }

.scan-card .scan-promo-body .hint { color: rgba(255, 255, 255, 0.9); }

.scan-promo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-promo-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.scan-promo-body {
  flex: 1;
  min-width: 0;
}

.scan-promo-body h2 {
  margin-bottom: 2px;
}

.scan-promo-body .hint {
  line-height: 1.45;
}

/* ---- Scan overlay ---- */
.scan-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 26, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}

.scan-overlay[hidden] { display: none; }

.scan-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--cream);
  border-radius: 26px 26px 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 92vh;
  overflow-y: auto;
  animation: sheet-up 0.3s ease both;
}

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

.scan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.scan-top .van-line {
  margin-bottom: 2px;
  color: var(--teal-deep);
}

.scan-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}

.scan-close {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-close:active { transform: scale(0.94); }

.scan-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-soft);
}

.scan-stage video {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.scan-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--teal);
  border-radius: 6px;
}

.corner.tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.corner.tr { top: 30px; right: 30px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 30px; left: 30px; border-right: none; border-top: none; }
.corner.br { bottom: 30px; right: 30px; border-left: none; border-top: none; }

.scan-status {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  text-align: center;
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.focus-ring {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 9999px rgba(7, 21, 26, 0.25);
}

.focus-ring.active {
  animation: focus-pulse 0.6s ease both;
}

@keyframes focus-pulse {
  0% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

/* ---- Scan result form ---- */
.scan-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  animation: pop-in 0.3s ease both;
}

.scan-result-msg {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.scan-result .field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5F737A;
  margin-bottom: 5px;
}

.scan-result .field input,
.scan-result .field select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scan-result .field input:focus,
.scan-result .field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(25, 184, 166, 0.2);
}

.scan-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.scan-actions .save-btn {
  flex: 1;
}

.scan-again {
  background: none;
  border: none;
  color: var(--teal-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.scan-again:active { transform: scale(0.97); }

/* ---- Smart Pantry ---- */
.pantry-intro {
  background: linear-gradient(135deg, #6A55E8, #8B7CF6 55%, #B06AF0);
  border: none;
  color: #fff;
  box-shadow: 0 8px 22px rgba(107, 85, 232, 0.35);
}

.pantry-intro-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pantry-icon {
  background: #fff;
  color: #6A55E8;
}

.pantry-intro-body h2 { color: #fff; }
.pantry-intro-body .hint { color: rgba(255, 255, 255, 0.92); }

.chat-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-log {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  min-height: 240px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  white-space: pre-wrap;
  animation: rise 0.2s ease both;
}

.chat-msg.bot {
  align-self: flex-start;
  background: #EEF6F5;
  color: var(--ink);
  border-bottom-left-radius: 6px;
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--teal);
  color: var(--navy);
  font-weight: 700;
  border-bottom-right-radius: 6px;
}

.chat-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 85%;
  align-self: flex-start;
  animation: rise 0.2s ease both;
}

.chat-btn {
  background: var(--sage-soft);
  border: 1px solid #CFE6D6;
  color: #2E8B57;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 14px;
  padding: 9px 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, background 0.12s ease;
}

.chat-btn:hover { background: #D9EDDF; }
.chat-btn:active { transform: scale(0.97); }

.chat-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: #fff;
  border: 1px solid var(--teal);
  color: var(--teal-deep);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.chip:hover { background: #EFFFFB; }
.chip:active { transform: scale(0.96); }

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input-row input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-input-row input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18, 183, 165, 0.2);
}

.chat-input-row .save-btn {
  flex: 0 0 auto;
  padding: 12px 18px;
}

/* ---- Secure-context banner ---- */
.secure-banner {
  background: var(--urgent-soft);
  color: #C0392B;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
}
/* ---- Fun zone (luxe) ---- */
.fun-card {
  border: 1px solid #EFE1C4;
  background: linear-gradient(180deg, #FFFFFF, #FFFBEF);
  box-shadow: var(--shadow-lux);
}

.gold-title {
  background: linear-gradient(135deg, #B8860B, #D4A93E 60%, #B8860B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Trophy / confetti ---- */
.confetti {
  position: fixed;
  top: -14px;
  z-index: 80;
  pointer-events: none;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.85; }
}

/* ---- Streak & badges ---- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.badge-chip {
  text-align: center;
  padding: 10px 4px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(180deg, #FFF8E1, #FBEECB);
  color: #8A6A14;
  border: 1px solid #F0DCA4;
  box-shadow: 0 3px 8px rgba(180, 140, 30, 0.14);
  animation: shimmer 3s ease-in-out infinite;
}

.badge-chip .badge-hint {
  font-size: 10px;
  font-weight: 600;
  color: #A08A4A;
  margin-top: 2px;
}

.badge-chip.locked {
  background: #F1F1EE;
  color: #A6AFAE;
  border-color: #E3E6E4;
  box-shadow: none;
  animation: none;
}

.badge-chip.locked .badge-hint { color: #B4BCBB; }

@keyframes shimmer {
  0%, 100% { box-shadow: 0 3px 8px rgba(180, 140, 30, 0.14); }
  50% { box-shadow: 0 3px 14px rgba(212, 169, 62, 0.4); }
}

/* ---- Detective card ---- */
.detective-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.detective-row input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.detective-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 169, 62, 0.2);
}

.detective-go {
  flex: 0 0 auto;
  padding: 12px 18px;
}

/* ---- Battle ---- */
.battle-picks select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.battle-result {
  margin-top: 12px;
  line-height: 1.6;
}

.battle-line {
  font-size: 14px;
  font-weight: 600;
}

.battle-win {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-deep);
  margin: 6px 0 10px;
}

.battle-cook {
  width: 100%;
}

/* ---- Weather chips ---- */
.weather-chips {
  margin-top: 10px;
}

/* ---- Mood row ---- */
.mood-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mood-chip {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mood-chip:active { transform: scale(0.95); }

.mood-chip.active {
  background: linear-gradient(135deg, #FFD98A, #D4A93E);
  color: #4A3300;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(212, 169, 62, 0.4);
}

/* ---- Aisle sorting ---- */
.aisle-group {
  margin-bottom: 8px;
}

.aisle-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8B6E1F;
  margin: 4px 2px 2px;
}

/* ---- Recipe detail actions ---- */
.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.detail-btn {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.detail-btn:active { transform: scale(0.97); }

.magic-btn {
  background: linear-gradient(135deg, #FFF8E1, #FBEECB);
  color: #8A6A14;
  border: 1px solid #F0DCA4;
}

.cook-btn {
  background: var(--teal);
  color: var(--navy);
  box-shadow: 0 3px 8px rgba(25, 184, 166, 0.3);
}

/* ---- Smell-Cam ---- */
.smell-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.smell-controls .field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5F737A;
  margin-bottom: 5px;
}

.smell-controls select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.smell-verdict {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  animation: pop-in 0.3s ease both;
}

.verdict-tag {
  font-size: 14px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
}

.verdict-fresh { background: var(--sage-soft); color: #2E8B57; }
.verdict-soft { background: var(--usefirst-soft); color: #B07A1E; }
.verdict-past-it { background: var(--urgent-soft); color: #E04A3C; }

/* ---- Fridge Scanner: mode toggle ---- */
.scan-mode {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.scan-mode-btn {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.scan-mode-btn.active {
  background: linear-gradient(135deg, #12B7A5, #0E9B8C);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(18, 183, 165, 0.35);
}

/* ---- Photo snap button ---- */
.photo-snap {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 5;
}

.photo-snap::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFD98A, #D4A93E);
}

.photo-snap:active { transform: translateX(-50%) scale(0.92); }

/* ---- Photo panel ---- */
.photo-panel {
  animation: pop-in 0.25s ease both;
}

.photo-preview {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
  margin-bottom: 12px;
}

.photo-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

.photo-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #EFE1C4;
  background: linear-gradient(180deg, #FFFBF0, #FFF3D9);
  color: #8A6A14;
  cursor: pointer;
}

.photo-chip:active { transform: scale(0.95); }

/* ---- AI status row ---- */
.ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.ai-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.ai-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #B4BCBB;
  flex: 0 0 auto;
}

.ai-status.online .ai-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.ai-status.free .ai-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.ai-status.offline .ai-dot { background: #94A3B8; }

/* ---- AI settings ---- */
.ai-settings {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #EFE1C4;
  border-radius: 14px;
  background: #FFFCF4;
  animation: pop-in 0.25s ease both;
}

.ai-key-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 6px;
}

.ai-key-row input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.ai-key-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 169, 62, 0.2);
}

.ai-settings .hint a { color: var(--gold-deep); font-weight: 700; }

/* ---- Typing dots ---- */
.chat-msg.typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 13px 16px;
}

.chat-msg.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B4BCBB;
  animation: typing-bounce 1.1s ease-in-out infinite;
}

.chat-msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ---- Step timers ---- */
.step-timer {
  display: inline-block;
  margin: 6px 6px 2px 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #F0DCA4;
  background: linear-gradient(180deg, #FFF8E1, #FBEECB);
  color: #8A6A14;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.step-timer:active { transform: scale(0.95); }

/* ---- Cook-along timer overlay ---- */
.timer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 22, 29, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.2s ease both;
}

.timer-sheet {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(160deg, #0E2A38, #103B44);
  border-radius: 24px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 217, 138, 0.25);
}

.timer-sheet .van-line { color: rgba(255, 231, 180, 0.75); }

.timer-display {
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: 800;
  color: #FFD98A;
  text-shadow: 0 0 26px rgba(255, 217, 138, 0.35);
  margin: 14px 0 6px;
  font-variant-numeric: tabular-nums;
}

.timer-sheet .hint { color: rgba(247, 244, 236, 0.75); margin-bottom: 16px; }

.timer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Settings grid ---- */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.settings-grid .wide-btn { width: 100%; }

/* ---- Head actions (grocery) ---- */
.head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ============================================================
   DARK MODE
   ============================================================ */
:root[data-theme="dark"] {
  --navy: #081A23;
  --navy-soft: #0E2A36;
  --teal: #1EC9B6;
  --teal-deep: #18B3A2;
  --cream: #0E1B22;
  --card: #14232D;
  --ink: #E7F1F5;
  --muted: #9CB3BD;
  --line: #243640;
  --sage: #7FBB92;
  --sage-soft: #143026;
  --fresh: #4CC184;
  --usefirst-soft: #3A2E12;
  --urgent-soft: #3C1A16;
  --neutral-soft: #1E2C35;
  --lavender-soft: #26204A;
  --berry-soft: #3C1F30;
  --gold: #E0B34F;
  --gold-deep: #E8C270;
  --gold-soft: #362B0F;
  --rose-soft: #3A2230;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-lux: 0 4px 12px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] body {
  background: linear-gradient(180deg, #0B1A22 0%, #0F2430 30%, #121E2B 60%, #141226 100%);
  background-attachment: fixed;
}

:root[data-theme="dark"] .card {
  background: linear-gradient(180deg, #16262F, #142029);
  border-color: #243640;
}

:root[data-theme="dark"] .fun-card {
  border-color: #2C3A44;
  background: linear-gradient(180deg, #172830, #132029);
}

:root[data-theme="dark"] .stat-card {
  background: #16262F;
  border-color: #243640;
}

:root[data-theme="dark"] .item {
  background: #16262F;
  border-color: #243640;
}

:root[data-theme="dark"] .grocery-item {
  background: #16262F;
  border-color: #243640;
}

:root[data-theme="dark"] .alert-item {
  background: #16262F;
  border-color: #243640;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
  background: #0E1B22;
  color: var(--ink);
  border-color: #2C3C47;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(30, 201, 182, 0.18);
}

:root[data-theme="dark"] .chat-msg.bot {
  background: #1B2C36;
  color: var(--ink);
}

:root[data-theme="dark"] .chat-btn {
  border-color: #2C4639;
  color: #7FBB92;
}

:root[data-theme="dark"] .chip {
  background: #0E1B22;
  border-color: var(--teal);
  color: #7BD5C8;
}

:root[data-theme="dark"] .mood-chip {
  background: #14232D;
  border-color: #2C3C47;
  color: #9CB3BD;
}

:root[data-theme="dark"] .mood-chip.active {
  background: linear-gradient(135deg, #E0B34F, #C9A03C);
  color: #1A1400;
  border-color: transparent;
}

:root[data-theme="dark"] .store-chip {
  background: #14232D;
  border-color: #2C3C47;
}

:root[data-theme="dark"] .scan-sheet {
  background: #0F1D25;
  border-color: #243640;
}

:root[data-theme="dark"] .scan-mode-btn {
  background: #14232D;
  border-color: #2C3C47;
  color: #9CB3BD;
}

:root[data-theme="dark"] .photo-chip {
  background: #33290F;
  border-color: #4A3D18;
  color: #E8C270;
}

:root[data-theme="dark"] .badge-chip {
  background: linear-gradient(180deg, #33290F, #2B230D);
  border-color: #4A3D18;
  color: #E8C270;
}

:root[data-theme="dark"] .badge-chip.locked {
  background: #1B2A33;
  border-color: #2C3A44;
  color: #7E929C;
}

:root[data-theme="dark"] .badge-chip.locked .badge-hint { color: #6E838C; }

:root[data-theme="dark"] .badge-neutral {
  background: #1E2C35;
  color: #9CB3BD;
}

:root[data-theme="dark"] .ai-settings {
  background: #132029;
  border-color: #2C3A44;
}

:root[data-theme="dark"] .ai-key-row input {
  background: #0E1B22;
  color: var(--ink);
}

:root[data-theme="dark"] .detective-row input {
  background: #0E1B22;
  color: var(--ink);
}

:root[data-theme="dark"] .magic-btn {
  background: #33290F;
  border-color: #4A3D18;
  color: #E8C270;
}

:root[data-theme="dark"] .smell-controls select {
  background: #0E1B22;
  color: var(--ink);
}

:root[data-theme="dark"] .smell-verdict {
  background: #16262F;
  border-color: #243640;
}

:root[data-theme="dark"] .tabbar {
  background: rgba(14, 27, 34, 0.94);
  border-color: #243640;
}

:root[data-theme="dark"] .tab { color: #8FA6B0; }

:root[data-theme="dark"] .tab.active {
  color: #FFD98A;
  background: #1A2B36;
}

:root[data-theme="dark"] .toast {
  background: #1C2E39;
  color: #E7F1F5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .secure-banner {
  background: #3A2E12;
  color: #FFE9B0;
}

:root[data-theme="dark"] .step-timer {
  background: #33290F;
  border-color: #4A3D18;
  color: #E8C270;
}

:root[data-theme="dark"] .wide-btn.secondary {
  background: #14232D;
  color: #7BD5C8;
  border-color: var(--teal);
}

:root[data-theme="dark"] .delete {
  background: #1B2A33;
  color: #9CB3BD;
}

:root[data-theme="dark"] .recipe-detail { background: #101D25; }

:root[data-theme="dark"] .ing-chip { color: #E7F1F5; }

:root[data-theme="dark"] .ing-chip.ing-miss {
  background: #3C1A16;
  color: #FFB4A8;
}

:root[data-theme="dark"] .ing-chip.ing-have {
  background: #143026;
  color: #8FE0B0;
}

/* ---- Dark mode gap fixes ---- */
:root[data-theme="dark"] .stat-card:nth-child(1) { background: linear-gradient(180deg, #16262F, #122A2E); }
:root[data-theme="dark"] .stat-card:nth-child(2) { background: linear-gradient(180deg, #16262F, #2B230F); }
:root[data-theme="dark"] .stat-card:nth-child(3) { background: linear-gradient(180deg, #16262F, #2E1B17); }

:root[data-theme="dark"] .stat-icon-teal,
:root[data-theme="dark"] .stat-icon-gold,
:root[data-theme="dark"] .stat-icon-red {
  background: #0E1B22;
}

:root[data-theme="dark"] .scan-btn {
  background: #14232D;
  color: #7BD5C8;
}
:root[data-theme="dark"] .scan-btn:hover { background: #1A2C38; }

:root[data-theme="dark"] .scan-close {
  background: #14232D;
  color: #9CB3BD;
}

:root[data-theme="dark"] .order-link {
  background: #143026;
  color: #8FE0B0;
}

:root[data-theme="dark"] .steps li::before {
  background: #33290F;
  color: #E8C270;
}

:root[data-theme="dark"] .alert-card {
  background: linear-gradient(180deg, #172830, #132029);
}

:root[data-theme="dark"] .hero h1 {
  background: linear-gradient(135deg, #F2F7F5 20%, #FFD98A 55%, #FFE9B0 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   SHELFSENSE BRAND PALETTE — ESPRESSO / SAGE / TERRACOTTA
   ============================================================ */
:root {
  --ss-espresso: #211D19;
  --ss-ivory: #F5F0E7;
  --ss-sage: #7D9272;
  --ss-pistachio: #B8C7A5;
  --ss-terracotta: #C9785A;
  --ss-mushroom: #A79D8F;
  --ss-olive: #3F4A38;
  --ss-olive-deep: #30382B;
  --ss-ink: #211D19;
  --ss-white: #FFFDF8;

  --navy: var(--ss-espresso);
  --navy-soft: var(--ss-olive);
  --teal: var(--ss-sage);
  --teal-deep: #667C5B;
  --cream: var(--ss-ivory);
  --card: #2B3027;
  --ink: var(--ss-ivory);
  --muted: #B8B0A5;
  --line: rgba(245, 240, 231, 0.13);
  --sage: var(--ss-pistachio);
  --sage-soft: rgba(184, 199, 165, 0.14);
  --fresh: #91B87F;
  --usefirst: #DDA05B;
  --usefirst-soft: rgba(221, 160, 91, 0.15);
  --urgent: var(--ss-terracotta);
  --urgent-soft: rgba(201, 120, 90, 0.16);
  --neutral-soft: rgba(167, 157, 143, 0.14);
  --gold: #D4B77A;
  --gold-deep: #C7A96B;
  --gold-soft: rgba(212, 183, 122, 0.15);
  --rose: var(--ss-terracotta);
  --rose-soft: rgba(201, 120, 90, 0.14);
  --shadow: 0 10px 30px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.16);
  --shadow-lux: 0 16px 45px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.18);
}

/* Brand default: dark premium kitchen. */
:root[data-theme="dark"] body,
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(125,146,114,.13), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(201,120,90,.08), transparent 25%),
    linear-gradient(180deg, #211D19 0%, #1D1D18 42%, #182019 100%);
  background-attachment: fixed;
  color: var(--ss-ivory);
}

.hero {
  background:
    radial-gradient(circle at 82% 5%, rgba(184,199,165,.18), transparent 28%),
    radial-gradient(circle at 15% 100%, rgba(201,120,90,.12), transparent 28%),
    linear-gradient(145deg, #171512 0%, #211D19 48%, #30382B 100%);
  border-bottom: 1px solid rgba(184,199,165,.13);
  padding-bottom: 78px;
}

.hero::before { background: radial-gradient(circle, rgba(184,199,165,.17), transparent 70%); }
.hero::after { background: radial-gradient(circle, rgba(201,120,90,.14), transparent 70%); }
.hero-badge {
  background: linear-gradient(145deg, rgba(245,240,231,.12), rgba(184,199,165,.18));
  border: 1px solid rgba(245,240,231,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero h1 {
  background: linear-gradient(135deg, #F5F0E7 15%, #D7C7A8 55%, #B8C7A5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero .greeting { color: var(--ss-pistachio); }
.hero .tagline { color: rgba(245,240,231,.68); }
.van-line { color: rgba(245,240,231,.45); }

main { margin-top: -50px; }

.card,
:root[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(63,74,56,.92), rgba(43,48,39,.96));
  border-color: rgba(184,199,165,.15);
  box-shadow: var(--shadow);
  color: var(--ss-ivory);
}

.fun-card,
:root[data-theme="dark"] .fun-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(184,199,165,.10), transparent 30%),
    linear-gradient(180deg, #30382B, #272C24);
  border-color: rgba(184,199,165,.18);
  box-shadow: var(--shadow-lux);
}

h2, h3 { color: var(--ss-ivory); }
.hint { color: rgba(245,240,231,.64); }
.text-btn { color: var(--ss-pistachio); }

.scan-card {
  background: linear-gradient(135deg, #7D9272 0%, #56694C 55%, #3F4A38 100%);
  border: 1px solid rgba(245,240,231,.12);
  box-shadow: 0 14px 32px rgba(63,74,56,.28);
}
.scan-card .scan-promo-body h2 { color: #FFFDF8; }
.scan-card .scan-promo-body .hint { color: rgba(255,253,248,.84); }
.scan-promo-icon { background: var(--ss-ivory); color: var(--ss-olive); }
.scan-btn {
  background: var(--ss-ivory);
  color: var(--ss-olive);
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}
.scan-btn:hover { background: var(--ss-pistachio); }

.stat-card,
.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3),
:root[data-theme="dark"] .stat-card:nth-child(1),
:root[data-theme="dark"] .stat-card:nth-child(2),
:root[data-theme="dark"] .stat-card:nth-child(3) {
  background: linear-gradient(145deg, #30382B, #252922);
  border: 1px solid rgba(184,199,165,.13);
  color: var(--ss-ivory);
}
.stat-icon-teal { background: rgba(184,199,165,.15); color: var(--ss-pistachio); }
.stat-icon-amber { background: rgba(221,160,91,.15); color: #E0AB69; }
.stat-icon-red { background: rgba(201,120,90,.15); color: #E28B6A; }
.stat-card label { color: var(--ss-mushroom); }

.add-btn, .save-btn, .wide-btn {
  background: var(--ss-sage);
  color: #1E261A;
  box-shadow: 0 7px 18px rgba(125,146,114,.22);
}
.add-btn:hover, .save-btn:hover, .wide-btn:hover { background: var(--ss-pistachio); }
.wide-btn.secondary {
  background: transparent;
  color: var(--ss-pistachio);
  border: 1px solid rgba(184,199,165,.5);
  box-shadow: none;
}
.wide-btn.secondary:hover { background: rgba(184,199,165,.09); }

.add-form,
:root[data-theme="dark"] .ai-settings {
  background: rgba(33,29,25,.62);
  border-color: rgba(184,199,165,.15);
}

.add-form input,
.add-form select,
.chat-input-row input,
.detective-row input,
.battle-picks select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .ai-key-row input,
:root[data-theme="dark"] .detective-row input {
  background: #211D19;
  color: var(--ss-ivory);
  border-color: rgba(167,157,143,.25);
}
.add-form input:focus,
.add-form select:focus,
.chat-input-row input:focus,
.detective-row input:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus {
  border-color: var(--ss-pistachio);
  box-shadow: 0 0 0 3px rgba(184,199,165,.13);
}

.item, .grocery-item { border-color: rgba(184,199,165,.12); }
.item-name, .grocery-name { color: var(--ss-ivory); }
.item-meta, .item-meta .where { color: var(--ss-mushroom); }
.badge-fresh { background: rgba(145,184,127,.16); color: #B8D7A9; }
.badge-soon { background: rgba(221,160,91,.16); color: #E7B978; }
.badge-expired { background: rgba(201,120,90,.16); color: #E79A7D; }
.badge-neutral { background: rgba(167,157,143,.13); color: #C7BEB3; }
.delete:hover { background: var(--urgent-soft); color: var(--ss-terracotta); }

.tabbar,
:root[data-theme="dark"] .tabbar {
  background: rgba(33,29,25,.93);
  border-top-color: rgba(184,199,165,.15);
  backdrop-filter: blur(18px);
}
.tab { color: #8F897F; }
.tab.active { color: var(--ss-pistachio); background: rgba(125,146,114,.15); }
.tab.active svg { stroke: var(--ss-pistachio); }

.alert-card,
:root[data-theme="dark"] .alert-card {
  background: linear-gradient(145deg, rgba(63,74,56,.96), rgba(57,48,39,.96));
  border-color: rgba(221,160,91,.25);
}
.alert-sub { color: #D9B57B; }
.alert-icon { background: rgba(221,160,91,.15); color: #E0AB69; }
.alert-item,
:root[data-theme="dark"] .alert-item { background: rgba(33,29,25,.42); border-color: rgba(184,199,165,.12); }

.gold-title {
  background: linear-gradient(135deg, #F0D8B8, #D8B28D 55%, #B8C7A5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.badge-chip,
:root[data-theme="dark"] .badge-chip {
  background: linear-gradient(180deg, rgba(201,120,90,.18), rgba(184,199,165,.10));
  color: #E8D4B8;
  border-color: rgba(201,120,90,.25);
  box-shadow: 0 5px 16px rgba(0,0,0,.14);
}
.badge-chip .badge-hint { color: var(--ss-mushroom); }
.badge-chip.locked,
:root[data-theme="dark"] .badge-chip.locked { background: rgba(167,157,143,.08); color: #77736D; border-color: rgba(167,157,143,.12); }

.chip,
.mood-chip,
.store-chip,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .mood-chip,
:root[data-theme="dark"] .store-chip {
  background: rgba(33,29,25,.55);
  color: var(--ss-pistachio);
  border-color: rgba(184,199,165,.28);
}
.chip:hover, .mood-chip:hover, .store-chip:hover { background: rgba(184,199,165,.10); }
.mood-chip.active,
:root[data-theme="dark"] .mood-chip.active {
  background: var(--ss-terracotta);
  color: #FFF8F0;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(201,120,90,.22);
}

.smell-verdict,
:root[data-theme="dark"] .smell-verdict,
.scan-result,
:root[data-theme="dark"] .scan-result,
.scan-sheet,
:root[data-theme="dark"] .scan-sheet {
  background: linear-gradient(180deg, #30382B, #211D19);
  color: var(--ss-ivory);
  border-color: rgba(184,199,165,.17);
}
.scan-overlay { background: rgba(15,13,11,.72); }
.scan-stage { background: #171512; }
.scan-mode-btn,
:root[data-theme="dark"] .scan-mode-btn {
  background: #211D19;
  color: var(--ss-mushroom);
  border-color: rgba(167,157,143,.24);
}
.scan-mode-btn.active { background: var(--ss-sage); color: #1E261A; border-color: transparent; }
.scan-close,
:root[data-theme="dark"] .scan-close { background: rgba(245,240,231,.08); color: var(--ss-ivory); }
.scan-again { background: rgba(245,240,231,.08); color: var(--ss-ivory); border-color: rgba(245,240,231,.16); }
.photo-chip,
:root[data-theme="dark"] .photo-chip { background: rgba(201,120,90,.12); border-color: rgba(201,120,90,.24); color: #E5B39B; }

.order-link { background: rgba(145,184,127,.13); color: #B8D7A9; }
.steps li::before { background: rgba(201,120,90,.15); color: #E5B39B; }
.toast,
:root[data-theme="dark"] .toast { background: #3F4A38; color: var(--ss-ivory); }
.secure-banner { background: rgba(201,120,90,.14); color: #E8B09A; }
.step-timer { background: rgba(201,120,90,.13); border-color: rgba(201,120,90,.25); color: #E8B09A; }

/* Light mode remains available, but uses the same brand rather than pastel rainbow. */
:root[data-theme="light"] body {
  background: linear-gradient(180deg, #F5F0E7 0%, #ECE7DC 48%, #E3E8DD 100%);
  color: var(--ss-ink);
}
:root[data-theme="light"] .hero {
  background: linear-gradient(145deg, #211D19, #30382B);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .fun-card {
  background: linear-gradient(180deg, #FFFDF8, #F3EFE5);
  color: var(--ss-ink);
  border-color: rgba(63,74,56,.16);
}
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] .item-name,
:root[data-theme="light"] .grocery-name { color: var(--ss-ink); }
:root[data-theme="light"] .hint,
:root[data-theme="light"] .stat-card label { color: #756E65; }
:root[data-theme="light"] .tabbar { background: rgba(245,240,231,.94); }
:root[data-theme="light"] .tab { color: #837C73; }
:root[data-theme="light"] .tab.active { color: #56694C; background: rgba(125,146,114,.13); }
:root[data-theme="light"] input,
:root[data-theme="light"] select { background: #FFFDF8; color: var(--ss-ink); border-color: rgba(63,74,56,.18); }

/* Accessibility / touch polish */
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ss-pistachio); outline-offset: 2px; }


.scan-actions { flex-wrap: wrap; }
.scan-actions .save-btn:disabled { opacity: .55; cursor: wait; transform: none; }
#photoAiStatus { width: 100%; margin-top: 8px; }

/* ---- Smart Pantry: branded dark chat surface ---- */
.chat-log,
:root[data-theme="dark"] .chat-log {
  background: linear-gradient(180deg, #30382B 0%, #211D19 100%);
  border-color: rgba(184,199,165,.18);
  box-shadow: inset 0 1px 0 rgba(245,240,231,.03), 0 12px 28px rgba(0,0,0,.18);
}

.chat-msg.bot,
:root[data-theme="dark"] .chat-msg.bot {
  background: #3F4A38;
  color: #F5F0E7;
  border: 1px solid rgba(184,199,165,.16);
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.chat-msg.user,
:root[data-theme="dark"] .chat-msg.user {
  background: #7D9272;
  color: #211D19;
  border: 1px solid rgba(184,199,165,.2);
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.chat-btn,
:root[data-theme="dark"] .chat-btn {
  background: rgba(184,199,165,.10);
  border-color: rgba(184,199,165,.28);
  color: #F5F0E7;
}

.chat-btn:hover { background: rgba(184,199,165,.18); }

.chat-chips .chip,
:root[data-theme="dark"] .chat-chips .chip {
  background: rgba(33,29,25,.72);
  border-color: rgba(184,199,165,.28);
  color: #B8C7A5;
}

.chat-chips .chip:hover { background: rgba(125,146,114,.18); }

.chat-input-row input,
:root[data-theme="dark"] .chat-input-row input {
  background: #211D19;
  color: #F5F0E7;
  border-color: rgba(167,157,143,.28);
}

.chat-input-row input::placeholder { color: #A79D8F; }

.chat-input-row input:focus {
  border-color: #B8C7A5;
  box-shadow: 0 0 0 3px rgba(184,199,165,.14);
}

.chat-input-row .save-btn {
  background: #7D9272;
  color: #211D19;
}

.chat-input-row .save-btn:hover { background: #B8C7A5; }

:root[data-theme="light"] .chat-log {
  background: linear-gradient(180deg, #F3EFE5 0%, #E5E8DD 100%);
}

:root[data-theme="light"] .chat-msg.bot {
  background: #3F4A38;
  color: #F5F0E7;
}

:root[data-theme="light"] .chat-msg.user {
  background: #7D9272;
  color: #211D19;
}

/* ===== Theme Shop + Responsive Experience ===== */
:root { --skin-accent: var(--ss-sage); --skin-accent-2: var(--ss-pistachio); --skin-warm: var(--ss-terracotta); }
:root[data-skin="rosegold"] { --skin-accent:#C98C82; --skin-accent-2:#E5B7A8; --skin-warm:#D99A84; }
:root[data-skin="matcha"] { --skin-accent:#8FA67B; --skin-accent-2:#C8D8B5; --skin-warm:#B98563; }
:root[data-skin="sunset"] { --skin-accent:#D28A63; --skin-accent-2:#F0C18D; --skin-warm:#C9785A; }
:root[data-skin="midnight"] { --skin-accent:#7B83B8; --skin-accent-2:#C5C8EA; --skin-warm:#9C7BB5; }
:root[data-skin="ocean"] { --skin-accent:#5F9D98; --skin-accent-2:#A8D4CF; --skin-warm:#6FA8C2; }

.theme-shop-card { overflow:hidden; }
.theme-shop-sub { margin:.2rem 0 0; }
.theme-balance { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--skin-accent-2); border:1px solid rgba(184,199,165,.2); border-radius:999px; padding:.45rem .65rem; white-space:nowrap; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.theme-tile { min-width:0; border:1px solid rgba(245,240,231,.11); background:rgba(245,240,231,.035); border-radius:18px; padding:10px; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.theme-tile:hover { transform:translateY(-2px); border-color:rgba(245,240,231,.2); }
.theme-tile.active { border-color:var(--skin-accent); background:color-mix(in srgb,var(--skin-accent) 10%,transparent); }
.theme-preview { height:82px; border-radius:13px; background:linear-gradient(135deg,var(--sw1),var(--sw2)); position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:flex-end; padding:10px; }
.theme-preview span { font-size:1.35rem; filter:drop-shadow(0 2px 5px rgba(0,0,0,.25)); z-index:2; }
.theme-preview i { position:absolute; bottom:-20px; width:68px; height:68px; border-radius:50%; background:var(--sw3); opacity:.7; }
.theme-preview i:nth-child(2){left:-18px}.theme-preview i:nth-child(3){left:38%;width:48px;height:48px;opacity:.35}.theme-preview i:nth-child(4){right:-16px;width:84px;height:84px;opacity:.25}
.theme-info { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.theme-info strong { display:block; font-size:.78rem; color:var(--ss-ivory); line-height:1.2; }
.theme-info small { display:block; color:var(--ss-mushroom); margin-top:3px; font-size:.68rem; }
.theme-action { border:1px solid rgba(245,240,231,.13); background:rgba(245,240,231,.05); color:var(--skin-accent-2); border-radius:10px; padding:8px 9px; font-size:.7rem; font-weight:800; white-space:nowrap; cursor:pointer; }
.theme-tile.active .theme-action { background:var(--skin-accent); color:#211D19; border-color:transparent; }
.theme-action:hover { background:var(--skin-accent-2); color:#211D19; }
.theme-note { margin:12px 2px 0; font-size:.68rem; color:var(--ss-mushroom); }

/* Theme skins tint the key interaction surfaces without destroying food-status colours. */
:root[data-skin="rosegold"] .add-btn,:root[data-skin="rosegold"] .save-btn,:root[data-skin="rosegold"] .wide-btn { background:#C98C82; color:#241C1E; }
:root[data-skin="matcha"] .add-btn,:root[data-skin="matcha"] .save-btn,:root[data-skin="matcha"] .wide-btn { background:#8FA67B; color:#182018; }
:root[data-skin="sunset"] .add-btn,:root[data-skin="sunset"] .save-btn,:root[data-skin="sunset"] .wide-btn { background:#D28A63; color:#241A17; }
:root[data-skin="midnight"] .add-btn,:root[data-skin="midnight"] .save-btn,:root[data-skin="midnight"] .wide-btn { background:#7B83B8; color:#11131B; }
:root[data-skin="ocean"] .add-btn,:root[data-skin="ocean"] .save-btn,:root[data-skin="ocean"] .wide-btn { background:#5F9D98; color:#121E20; }
:root[data-skin="rosegold"] .tab.active { color:#E5B7A8; background:rgba(201,140,130,.14); }
:root[data-skin="matcha"] .tab.active { color:#C8D8B5; background:rgba(143,166,123,.14); }
:root[data-skin="sunset"] .tab.active { color:#F0C18D; background:rgba(210,138,99,.14); }
:root[data-skin="midnight"] .tab.active { color:#C5C8EA; background:rgba(123,131,184,.14); }
:root[data-skin="ocean"] .tab.active { color:#A8D4CF; background:rgba(95,157,152,.14); }

/* Desktop: use the screen, but keep content intentionally bounded. */
main { width:min(100% - 40px, 1440px); max-width:1440px; margin-inline:auto; }
.hero { padding-inline:clamp(22px,4vw,72px); }
@media (min-width:1100px) {
  main { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:start; }
  main > .page { grid-column:1 / -1; }
  #page-home.active { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
  #page-home.active > section { grid-column:span 4; margin:0; }
  #page-home.active > .scan-card,#page-home.active > .alert-card { grid-column:span 12; }
  #page-home.active > .stats { grid-column:span 12; }
  #page-home.active > .scan-card + .stats { margin-top:0; }
  #page-home.active > .card:nth-of-type(4),#page-home.active > .card:nth-of-type(5) { grid-column:span 6; }
  .theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .chat-box { min-height:560px; }
  .chat-log { min-height:420px; }
}
@media (min-width:1500px) {
  main { width:min(100% - 64px, 1500px); max-width:1500px; }
  #page-home.active > section { grid-column:span 3; }
  #page-home.active > .scan-card,#page-home.active > .alert-card,#page-home.active > .stats { grid-column:span 12; }
}

/* Tablet: two comfortable columns, never a tiny desktop squeezed into a tablet. */
@media (min-width:700px) and (max-width:1099px) {
  main { width:min(100% - 32px, 980px); max-width:980px; }
  #page-home.active > .card { margin-bottom:0; }
  #page-home.active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #page-home.active > .scan-card,#page-home.active > .alert-card,#page-home.active > .stats { grid-column:1 / -1; }
  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tabbar { padding-inline:max(18px,calc((100% - 980px)/2)); }
}

/* Phone: one column, large touch targets and edge-to-edge cards. */
@media (max-width:699px) {
  main { width:calc(100% - 24px); max-width:none; }
  .hero { padding:30px 18px 24px; }
  .hero h1 { font-size:clamp(2rem,10vw,3rem); }
  .page { padding-bottom:96px; }
  .card { border-radius:18px; padding:17px; }
  .scan-promo { align-items:flex-start; flex-wrap:wrap; }
  .scan-promo-body { flex:1 1 calc(100% - 58px); }
  .scan-btn { flex:1 1 100%; width:100%; margin-top:4px; min-height:48px; }
  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .stat-card { padding:14px 8px; min-height:92px; }
  .stat-num { font-size:1.45rem; }
  .stat-card label { font-size:.68rem; }
  .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-preview { height:72px; }
  .theme-info { align-items:flex-start; flex-direction:column; }
  .theme-action { width:100%; min-height:40px; }
  .settings-grid { grid-template-columns:1fr 1fr; }
  .tabbar { height:74px; padding:6px 7px calc(6px + env(safe-area-inset-bottom)); }
  .tab { min-width:0; padding:8px 5px; font-size:.68rem; }
  .tab svg { width:19px; height:19px; }
  .chat-log { min-height:360px; max-height:52vh; }
  .chat-input-row { gap:8px; }
  .chat-input-row input { min-width:0; }
}
@media (max-width:390px) {
  main { width:calc(100% - 16px); max-width:none; }
  .theme-grid { grid-template-columns:1fr; }
  .stats { gap:6px; }
  .stat-card { padding-inline:5px; }
  .stat-icon { width:30px; height:30px; }
  .settings-grid { grid-template-columns:1fr; }
  .tab { font-size:.61rem; }
}

/* ============================================================
   FINAL THEME OVERRIDE — real Light/Dark mode
   ============================================================ */

/* Default is the ShelfSense premium dark theme. */
:root:not([data-theme="light"]) {
  --theme-bg: #211D19;
  --theme-bg-2: #182019;
  --theme-surface: #30382B;
  --theme-surface-2: #272C24;
  --theme-text: #F5F0E7;
  --theme-muted: #A79D8F;
  --theme-border: rgba(184,199,165,.16);
}

:root[data-theme="light"] {
  --theme-bg: #F5F0E7;
  --theme-bg-2: #E7E5DA;
  --theme-surface: #FFFDF8;
  --theme-surface-2: #F0EBDD;
  --theme-text: #211D19;
  --theme-muted: #756E65;
  --theme-border: rgba(63,74,56,.18);
  --ink: #211D19;
  --card: #FFFDF8;
  --cream: #211D19;
  --muted: #756E65;
  --line: rgba(63,74,56,.18);
}

/* The earlier brand rules used an unscoped `body` selector, which prevented
   the light theme from ever winning. These final rules deliberately scope
   both modes and come last in the cascade. */
:root:not([data-theme="light"]) body {
  background:
    radial-gradient(circle at 8% 0%, rgba(125,146,114,.13), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(201,120,90,.08), transparent 25%),
    linear-gradient(180deg, #211D19 0%, #1D1D18 42%, #182019 100%);
  color: #F5F0E7;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(125,146,114,.12), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(201,120,90,.08), transparent 25%),
    linear-gradient(180deg, #F5F0E7 0%, #EEE9DE 55%, #E3E8DD 100%);
  color: #211D19;
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 82% 5%, rgba(184,199,165,.20), transparent 28%),
    radial-gradient(circle at 15% 100%, rgba(201,120,90,.12), transparent 28%),
    linear-gradient(145deg, #211D19 0%, #30382B 100%);
  color: #F5F0E7;
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .fun-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .item,
:root[data-theme="light"] .grocery-item {
  background: linear-gradient(180deg, #FFFDF8, #F0EBDD);
  color: #211D19;
  border-color: rgba(63,74,56,.18);
  box-shadow: 0 8px 24px rgba(63,74,56,.08);
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .item-name,
:root[data-theme="light"] .grocery-name,
:root[data-theme="light"] .theme-info strong,
:root[data-theme="light"] .fun-card h3,
:root[data-theme="light"] .stat-card strong {
  color: #211D19;
}

:root[data-theme="light"] .hint,
:root[data-theme="light"] .item-meta,
:root[data-theme="light"] .item-meta .where,
:root[data-theme="light"] .theme-info small,
:root[data-theme="light"] .theme-note,
:root[data-theme="light"] .stat-card label {
  color: #756E65;
}

:root[data-theme="light"] .tabbar {
  background: rgba(245,240,231,.96);
  border-top-color: rgba(63,74,56,.16);
}

:root[data-theme="light"] .tab { color: #837C73; }
:root[data-theme="light"] .tab.active {
  color: #56694C;
  background: rgba(125,146,114,.14);
}
:root[data-theme="light"] .tab.active svg { stroke: #56694C; }

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .chat-input-row input,
:root[data-theme="light"] .ai-key-row input,
:root[data-theme="light"] .detective-row input {
  background: #FFFDF8;
  color: #211D19;
  border-color: rgba(63,74,56,.20);
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: #91887D;
}

:root[data-theme="light"] .add-form,
:root[data-theme="light"] .ai-settings {
  background: rgba(255,253,248,.78);
  border-color: rgba(63,74,56,.14);
}

:root[data-theme="light"] .chip,
:root[data-theme="light"] .mood-chip,
:root[data-theme="light"] .store-chip {
  background: rgba(125,146,114,.08);
  color: #56694C;
  border-color: rgba(125,146,114,.28);
}

:root[data-theme="light"] .wide-btn.secondary {
  color: #56694C;
  border-color: rgba(86,105,76,.35);
  background: transparent;
}

:root[data-theme="light"] .wide-btn.secondary:hover {
  background: rgba(125,146,114,.10);
}

:root[data-theme="light"] .theme-tile {
  background: rgba(63,74,56,.045);
  border-color: rgba(63,74,56,.14);
}
:root[data-theme="light"] .theme-info strong { color: #211D19; }
:root[data-theme="light"] .theme-action {
  background: rgba(63,74,56,.06);
  color: #56694C;
  border-color: rgba(63,74,56,.16);
}

:root[data-theme="light"] .chat-log {
  background: linear-gradient(180deg, #F0EBDD, #FFFDF8);
  border-color: rgba(63,74,56,.14);
}
:root[data-theme="light"] .chat-msg.bot {
  background: #E5EBDD;
  color: #211D19;
  border-color: rgba(125,146,114,.20);
}
:root[data-theme="light"] .chat-msg.user {
  background: #7D9272;
  color: #211D19;
}
:root[data-theme="light"] .chat-btn {
  background: #FFFDF8;
  color: #56694C;
  border-color: rgba(63,74,56,.16);
}

/* Dark mode keeps the intended premium palette. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .fun-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .item,
:root[data-theme="dark"] .grocery-item {
  color: #F5F0E7;
}

/* The theme toggle itself should always remain obvious in either mode. */
#themeToggle {
  min-height: 44px;
  font-weight: 800;
}

/* ---------- Smart Pantry intelligence layer ---------- */
.pantry-insights {
  margin: 14px 0 12px;
  padding: 18px;
  border: 1px solid rgba(184,199,165,.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(63,74,56,.92), rgba(33,29,25,.96));
  color: #F5F0E7;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.pantry-insight-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.pantry-insight-head h3 { margin:4px 0 0; font-size:18px; color:#F5F0E7; }
.pantry-insight-head .text-btn { color:#B8C7A5; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.12em; color:#B8C7A5; }
.pantry-insight-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pantry-insight { min-width:0; min-height:78px; padding:12px; border:1px solid rgba(184,199,165,.16); border-radius:15px; background:rgba(245,240,231,.055); color:#F5F0E7; text-align:left; cursor:pointer; transition:transform .15s ease,background .15s ease,border-color .15s ease; }
.pantry-insight:hover { transform:translateY(-2px); background:rgba(184,199,165,.12); border-color:rgba(184,199,165,.35); }
.pantry-insight strong { display:block; font-size:21px; line-height:1; color:#B8C7A5; margin-bottom:7px; }
.pantry-insight span { font-size:12px; color:#A79D8F; font-weight:700; }
.pantry-next { margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(201,120,90,.10); color:#F5F0E7; font-size:13px; line-height:1.45; border-left:3px solid #C9785A; }

@media (max-width: 800px) {
  .pantry-insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .pantry-insights { padding:14px; border-radius:16px; }
  .pantry-insight-head { align-items:flex-start; }
  .pantry-insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pantry-insight { min-height:70px; padding:10px; }
  .pantry-insight strong { font-size:19px; }
}

/* Smart Pantry intelligence layer */
.pantry-insights{margin:14px 0 12px;padding:18px;border:1px solid rgba(184,199,165,.22);border-radius:20px;background:linear-gradient(135deg,rgba(63,74,56,.92),rgba(33,29,25,.96));color:#F5F0E7;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.pantry-insight-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.pantry-insight-head h3{margin:4px 0 0;font-size:18px;color:#F5F0E7}.pantry-insight-head .text-btn{color:#B8C7A5}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:#B8C7A5}
.pantry-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pantry-insight{min-width:0;min-height:78px;padding:12px;border:1px solid rgba(184,199,165,.16);border-radius:15px;background:rgba(245,240,231,.055);color:#F5F0E7;text-align:left;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.pantry-insight:hover{transform:translateY(-2px);background:rgba(184,199,165,.12);border-color:rgba(184,199,165,.35)}.pantry-insight strong{display:block;font-size:21px;line-height:1;color:#B8C7A5;margin-bottom:7px}.pantry-insight span{font-size:12px;color:#A79D8F;font-weight:700}.pantry-next{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(201,120,90,.10);color:#F5F0E7;font-size:13px;line-height:1.45;border-left:3px solid #C9785A}
@media (max-width:800px){.pantry-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){.pantry-insights{padding:14px;border-radius:16px}.pantry-insight-grid{gap:8px}.pantry-insight{min-height:70px;padding:10px}.pantry-insight strong{font-size:19px}}
/* Smart Pantry intelligence layer */
.pantry-insights{margin:14px 0 12px;padding:18px;border:1px solid rgba(184,199,165,.22);border-radius:20px;background:linear-gradient(135deg,rgba(63,74,56,.92),rgba(33,29,25,.96));color:#F5F0E7;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.pantry-insight-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.pantry-insight-head h3{margin:4px 0 0;font-size:18px;color:#F5F0E7}.pantry-insight-head .text-btn{color:#B8C7A5}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:#B8C7A5}
.pantry-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pantry-insight{min-width:0;min-height:78px;padding:12px;border:1px solid rgba(184,199,165,.16);border-radius:15px;background:rgba(245,240,231,.055);color:#F5F0E7;text-align:left;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.pantry-insight:hover{transform:translateY(-2px);background:rgba(184,199,165,.12);border-color:rgba(184,199,165,.35)}.pantry-insight strong{display:block;font-size:21px;line-height:1;color:#B8C7A5;margin-bottom:7px}.pantry-insight span{font-size:12px;color:#A79D8F;font-weight:700}.pantry-next{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(201,120,90,.10);color:#F5F0E7;font-size:13px;line-height:1.45;border-left:3px solid #C9785A}
@media (max-width:800px){.pantry-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){.pantry-insights{padding:14px;border-radius:16px}.pantry-insight-grid{gap:8px}.pantry-insight{min-height:70px;padding:10px}.pantry-insight strong{font-size:19px}}

/* FINAL RESPONSIVE HOME GRID FIX — prevents nested 12-column squeezing on desktop */
@media (min-width:1100px) {
  main {
    display:block !important;
    width:min(calc(100% - 40px), 1440px) !important;
    max-width:1440px !important;
    margin-inline:auto !important;
  }
  #page-home.active {
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
    width:100% !important;
    min-width:0 !important;
  }
  #page-home.active > section {
    grid-column:auto !important;
    min-width:0 !important;
    width:auto !important;
  }
  #page-home.active > .scan-card,
  #page-home.active > .alert-card,
  #page-home.active > .stats {
    grid-column:1 / -1 !important;
  }
  #page-home.active > .stats {
    width:100% !important;
  }
}
@media (min-width:1500px) {
  main {
    width:min(calc(100% - 64px), 1500px) !important;
    max-width:1500px !important;
  }
  #page-home.active {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
  #page-home.active > .scan-card,
  #page-home.active > .alert-card,
  #page-home.active > .stats {
    grid-column:1 / -1 !important;
  }
}
@media (min-width:700px) and (max-width:1099px) {
  main {
    display:block !important;
    width:min(calc(100% - 32px), 980px) !important;
    max-width:980px !important;
    margin-inline:auto !important;
  }
  #page-home.active {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
  }
  #page-home.active > section {
    grid-column:auto !important;
    min-width:0 !important;
    width:auto !important;
  }
  #page-home.active > .scan-card,
  #page-home.active > .alert-card,
  #page-home.active > .stats {
    grid-column:1 / -1 !important;
  }
}
@media (max-width:699px) {
  main {
    display:block !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
  }
  #page-home.active {
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
  }
  #page-home.active > section {
    width:100% !important;
    min-width:0 !important;
  }
}


/* FINAL DESKTOP WIDTH GUARD
   Prevents the legacy 480px phone canvas from ever constraining desktop/tablet views. */
@media screen and (min-width: 700px) {
  body main {
    width: min(calc(100% - 32px), 1440px) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #page-home.active > section {
    min-width: 0 !important;
    width: auto !important;
  }
}
@media screen and (min-width: 1500px) {
  body main {
    width: min(calc(100% - 64px), 1500px) !important;
    max-width: 1500px !important;
  }
}


/* ============================================================
   SKIN SYSTEM — real, app-wide theme changes
   ============================================================ */
:root[data-skin="classic"] {
  --skin-bg-dark:#211D19; --skin-bg2-dark:#182019; --skin-surface-dark:#30382B; --skin-surface2-dark:#272C24;
  --skin-text-dark:#F5F0E7; --skin-muted-dark:#A79D8F; --skin-line-dark:rgba(184,199,165,.18);
  --skin-bg-light:#F5F0E7; --skin-bg2-light:#E3E8DD; --skin-surface-light:#FFFDF8; --skin-surface2-light:#F0EBDD;
  --skin-text-light:#211D19; --skin-muted-light:#756E65; --skin-line-light:rgba(63,74,56,.18);
  --skin-accent:#7D9272; --skin-accent2:#B8C7A5; --skin-warm:#C9785A;
}
:root[data-skin="rosegold"] {
  --skin-bg-dark:#241C1E; --skin-bg2-dark:#191416; --skin-surface-dark:#3A292B; --skin-surface2-dark:#2D2224;
  --skin-text-dark:#FFF2EC; --skin-muted-dark:#C6AAA1; --skin-line-dark:rgba(229,183,168,.2);
  --skin-bg-light:#FFF2EC; --skin-bg2-light:#F2DFD8; --skin-surface-light:#FFF9F6; --skin-surface2-light:#F5E7E1;
  --skin-text-light:#2B2021; --skin-muted-light:#806C68; --skin-line-light:rgba(137,91,86,.18);
  --skin-accent:#C98C82; --skin-accent2:#E5B7A8; --skin-warm:#D99A84;
}
:root[data-skin="matcha"] {
  --skin-bg-dark:#182018; --skin-bg2-dark:#101610; --skin-surface-dark:#30402C; --skin-surface2-dark:#253323;
  --skin-text-dark:#F4F3E7; --skin-muted-dark:#B9C4A9; --skin-line-dark:rgba(200,216,181,.2);
  --skin-bg-light:#F2F4E8; --skin-bg2-light:#E0E7D5; --skin-surface-light:#FCFDF6; --skin-surface2-light:#EEF3E5;
  --skin-text-light:#1F281E; --skin-muted-light:#687260; --skin-line-light:rgba(73,91,61,.18);
  --skin-accent:#8FA67B; --skin-accent2:#C8D8B5; --skin-warm:#B98563;
}
:root[data-skin="sunset"] {
  --skin-bg-dark:#281A16; --skin-bg2-dark:#17100E; --skin-surface-dark:#493026; --skin-surface2-dark:#35221D;
  --skin-text-dark:#FFF0E5; --skin-muted-dark:#D1AFA0; --skin-line-dark:rgba(240,193,141,.2);
  --skin-bg-light:#FFF1E7; --skin-bg2-light:#F4DED0; --skin-surface-light:#FFF9F4; --skin-surface2-light:#F7E7DC;
  --skin-text-light:#2B1D18; --skin-muted-light:#7D675C; --skin-line-light:rgba(130,76,55,.18);
  --skin-accent:#D28A63; --skin-accent2:#F0C18D; --skin-warm:#C9785A;
}
:root[data-skin="midnight"] {
  --skin-bg-dark:#11131B; --skin-bg2-dark:#0A0C12; --skin-surface-dark:#25283A; --skin-surface2-dark:#1B1E2C;
  --skin-text-dark:#F1F1FF; --skin-muted-dark:#AEB2CD; --skin-line-dark:rgba(197,200,234,.2);
  --skin-bg-light:#F0F1FA; --skin-bg2-light:#DDE0F0; --skin-surface-light:#FBFBFF; --skin-surface2-light:#ECEEF9;
  --skin-text-light:#171A28; --skin-muted-light:#666B82; --skin-line-light:rgba(72,77,119,.18);
  --skin-accent:#7B83B8; --skin-accent2:#C5C8EA; --skin-warm:#9C7BB5;
}
:root[data-skin="ocean"] {
  --skin-bg-dark:#121E20; --skin-bg2-dark:#0A1517; --skin-surface-dark:#213B3B; --skin-surface2-dark:#192E2F;
  --skin-text-dark:#ECF8F5; --skin-muted-dark:#A9C9C5; --skin-line-dark:rgba(168,212,207,.2);
  --skin-bg-light:#EDF7F6; --skin-bg2-light:#D8EBE9; --skin-surface-light:#FAFEFD; --skin-surface2-light:#E8F3F1;
  --skin-text-light:#172527; --skin-muted-light:#617474; --skin-line-light:rgba(62,107,105,.18);
  --skin-accent:#5F9D98; --skin-accent2:#A8D4CF; --skin-warm:#6FA8C2;
}

:root:not([data-theme="light"]) body {
  background:linear-gradient(180deg,var(--skin-bg-dark) 0%,var(--skin-bg2-dark) 100%) !important;
  color:var(--skin-text-dark) !important;
}
:root[data-theme="light"] body {
  background:linear-gradient(180deg,var(--skin-bg-light) 0%,var(--skin-bg2-light) 100%) !important;
  color:var(--skin-text-light) !important;
}
:root:not([data-theme="light"]) .hero {
  background:linear-gradient(145deg,var(--skin-bg-dark) 0%,var(--skin-surface-dark) 100%) !important;
  color:var(--skin-text-dark) !important;
}
:root[data-theme="light"] .hero {
  background:linear-gradient(145deg,var(--skin-text-light) 0%,var(--skin-surface-dark) 100%) !important;
  color:#F5F0E7 !important;
}
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .fun-card,
:root:not([data-theme="light"]) .stat-card,
:root:not([data-theme="light"]) .item,
:root:not([data-theme="light"]) .grocery-item {
  background:linear-gradient(180deg,var(--skin-surface-dark),var(--skin-surface2-dark)) !important;
  color:var(--skin-text-dark) !important;
  border-color:var(--skin-line-dark) !important;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .fun-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .item,
:root[data-theme="light"] .grocery-item {
  background:linear-gradient(180deg,var(--skin-surface-light),var(--skin-surface2-light)) !important;
  color:var(--skin-text-light) !important;
  border-color:var(--skin-line-light) !important;
}
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) .item-name,
:root:not([data-theme="light"]) .grocery-name { color:var(--skin-text-dark) !important; }
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .item-name,
:root[data-theme="light"] .grocery-name { color:var(--skin-text-light) !important; }
:root:not([data-theme="light"]) .hint,
:root:not([data-theme="light"]) .item-meta,
:root:not([data-theme="light"]) .stat-card label { color:var(--skin-muted-dark) !important; }
:root[data-theme="light"] .hint,
:root[data-theme="light"] .item-meta,
:root[data-theme="light"] .stat-card label { color:var(--skin-muted-light) !important; }
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) .chat-input-row input { background:var(--skin-surface2-dark) !important; color:var(--skin-text-dark) !important; border-color:var(--skin-line-dark) !important; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .chat-input-row input { background:var(--skin-surface-light) !important; color:var(--skin-text-light) !important; border-color:var(--skin-line-light) !important; }
:root:not([data-theme="light"]) .wide-btn:not(.secondary),
:root[data-theme="light"] .wide-btn:not(.secondary) { background:var(--skin-accent) !important; border-color:var(--skin-accent) !important; color:#211D19 !important; }
:root:not([data-theme="light"]) .tabbar { background:color-mix(in srgb,var(--skin-bg-dark) 94%,transparent) !important; border-top-color:var(--skin-line-dark) !important; }
:root:not([data-theme="light"]) .tab.active { color:var(--skin-accent2) !important; background:color-mix(in srgb,var(--skin-accent) 18%,transparent) !important; }
:root[data-theme="light"] .tabbar { background:color-mix(in srgb,var(--skin-bg-light) 94%,transparent) !important; border-top-color:var(--skin-line-light) !important; }
:root[data-theme="light"] .tab.active { color:var(--skin-accent) !important; background:color-mix(in srgb,var(--skin-accent) 14%,transparent) !important; }
:root:not([data-theme="light"]) .chat-log { background:linear-gradient(180deg,var(--skin-surface2-dark),var(--skin-bg-dark)) !important; border-color:var(--skin-line-dark) !important; }
:root[data-theme="light"] .chat-log { background:linear-gradient(180deg,var(--skin-surface2-light),var(--skin-surface-light)) !important; border-color:var(--skin-line-light) !important; }
:root:not([data-theme="light"]) .chat-msg.bot { background:var(--skin-surface-dark) !important; color:var(--skin-text-dark) !important; border-color:var(--skin-line-dark) !important; }
:root[data-theme="light"] .chat-msg.bot { background:var(--skin-surface2-light) !important; color:var(--skin-text-light) !important; border-color:var(--skin-line-light) !important; }
:root:not([data-theme="light"]) .chat-msg.user { background:var(--skin-accent) !important; color:#211D19 !important; }
:root[data-theme="light"] .chat-msg.user { background:var(--skin-accent) !important; color:#211D19 !important; }
:root .theme-tile.active { box-shadow:0 0 0 1px var(--skin-accent),0 10px 25px color-mix(in srgb,var(--skin-accent) 14%,transparent); }

/* ============================================================
   THEME SHOP v2 — real selectable skins
   ============================================================ */
:root { --skin-bg:#211D19; --skin-bg2:#182019; --skin-surface:#30382B; --skin-surface2:#272C24; --skin-text:#F5F0E7; --skin-muted:#A79D8F; --skin-border:rgba(245,240,231,.13); }
:root[data-skin="rosegold"] { --skin-bg:#241C1E; --skin-bg2:#1C1719; --skin-surface:#3B292B; --skin-surface2:#302124; --skin-accent:#C98C82; --skin-accent-2:#E5B7A8; --skin-warm:#D99A84; }
:root[data-skin="matcha"] { --skin-bg:#182018; --skin-bg2:#121812; --skin-surface:#30402D; --skin-surface2:#263525; --skin-accent:#8FA67B; --skin-accent-2:#C8D8B5; --skin-warm:#B98563; }
:root[data-skin="sunset"] { --skin-bg:#241A17; --skin-bg2:#1B1412; --skin-surface:#4A3028; --skin-surface2:#39241F; --skin-accent:#D28A63; --skin-accent-2:#F0C18D; --skin-warm:#C9785A; }
:root[data-skin="midnight"] { --skin-bg:#11131B; --skin-bg2:#0C0E14; --skin-surface:#272A3C; --skin-surface2:#1D2030; --skin-accent:#7B83B8; --skin-accent-2:#C5C8EA; --skin-warm:#9C7BB5; }
:root[data-skin="ocean"] { --skin-bg:#121E20; --skin-bg2:#0D1719; --skin-surface:#263D3D; --skin-surface2:#1D3031; --skin-accent:#5F9D98; --skin-accent-2:#A8D4CF; --skin-warm:#6FA8C2; }
:root[data-skin="classic"] { --skin-accent:#7D9272; --skin-accent-2:#B8C7A5; --skin-warm:#C9785A; }

:root:not([data-theme="light"]) body { background:linear-gradient(180deg,var(--skin-bg) 0%,var(--skin-bg2) 100%); color:var(--skin-text); }
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .fun-card,
:root:not([data-theme="light"]) .stat-card { background:linear-gradient(145deg,var(--skin-surface),var(--skin-surface2)); border-color:var(--skin-border); }
:root:not([data-theme="light"]) .hero { background:linear-gradient(145deg,var(--skin-bg),var(--skin-surface)); }
:root:not([data-theme="light"]) .tabbar { background:color-mix(in srgb,var(--skin-bg) 94%,transparent); }
:root:not([data-theme="light"]) .add-btn,
:root:not([data-theme="light"]) .save-btn,
:root:not([data-theme="light"]) .wide-btn:not(.secondary) { background:var(--skin-accent); color:var(--skin-bg); }
:root:not([data-theme="light"]) .theme-shop-card { background:linear-gradient(145deg,var(--skin-surface),var(--skin-surface2)); }

:root[data-theme="light"] { --skin-bg:#F5F0E7; --skin-bg2:#E6E8DE; --skin-surface:#FFFDF8; --skin-surface2:#F0EBDD; --skin-text:#211D19; --skin-muted:#756E65; --skin-border:rgba(63,74,56,.18); }
:root[data-theme="light"][data-skin="rosegold"] { --skin-bg:#F6EDE9; --skin-bg2:#EADAD6; --skin-surface:#FFF9F6; --skin-surface2:#F4E5E0; }
:root[data-theme="light"][data-skin="matcha"] { --skin-bg:#F0F3E9; --skin-bg2:#DDE8D4; --skin-surface:#FBFCF6; --skin-surface2:#EAF0E2; }
:root[data-theme="light"][data-skin="sunset"] { --skin-bg:#F8EEE8; --skin-bg2:#F0D9CC; --skin-surface:#FFFAF6; --skin-surface2:#F6E5DA; }
:root[data-theme="light"][data-skin="midnight"] { --skin-bg:#EEF0F8; --skin-bg2:#DDE2F1; --skin-surface:#FBFCFF; --skin-surface2:#E8EBF6; }
:root[data-theme="light"][data-skin="ocean"] { --skin-bg:#EAF4F3; --skin-bg2:#D7E9E8; --skin-surface:#FBFEFD; --skin-surface2:#E2F0EF; }
:root[data-theme="light"] body { background:linear-gradient(180deg,var(--skin-bg) 0%,var(--skin-bg2) 100%); color:var(--skin-text); }
:root[data-theme="light"] .card,
:root[data-theme="light"] .fun-card,
:root[data-theme="light"] .stat-card { background:var(--skin-surface); border-color:var(--skin-border); color:var(--skin-text); }
:root[data-theme="light"] .theme-shop-card { background:var(--skin-surface); }
:root[data-theme="light"] .theme-tile { background:var(--skin-surface2); border-color:var(--skin-border); }
:root[data-theme="light"] .theme-info strong { color:var(--skin-text); }
:root[data-theme="light"] .theme-info small,
:root[data-theme="light"] .theme-note { color:var(--skin-muted); }
:root[data-theme="light"] .theme-action { color:#211D19; background:var(--skin-accent-2); border-color:rgba(33,29,25,.12); }
:root[data-theme="light"] .theme-tile.active { border-color:var(--skin-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--skin-accent) 18%,transparent); }

.theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.theme-tile { min-height:168px; }
.theme-action { min-width:96px; }
.theme-action.owned { opacity:1; }
.theme-tile.active .theme-action { background:var(--skin-accent); color:var(--skin-bg); }
@media (max-width:699px){ .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .theme-tile{min-height:180px;} }
@media (max-width:390px){ .theme-grid{grid-template-columns:1fr;} }

/* ===== FINAL THEME SHOP BUTTON FIX ===== */
.theme-grid .theme-tile {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100%;
  box-sizing:border-box;
}
.theme-grid .theme-preview {
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
}
.theme-grid .theme-info {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  margin-top:12px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.theme-grid .theme-info > div:first-child {
  min-width:0;
  width:100%;
}
.theme-grid .theme-info strong,
.theme-grid .theme-info small {
  max-width:100%;
  overflow-wrap:anywhere;
}
.theme-grid .theme-action {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:42px;
  height:auto;
  box-sizing:border-box;
  padding:9px 10px;
  margin:0;
  white-space:normal;
  text-align:center;
  line-height:1.15;
  overflow-wrap:anywhere;
  flex:0 0 auto;
}
@media (min-width:700px) {
  .theme-grid .theme-tile { min-height:230px; }
}
@media (max-width:699px) {
  .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-grid .theme-tile { min-height:220px; }
}
@media (max-width:390px) {
  .theme-grid { grid-template-columns:1fr; }
  .theme-grid .theme-tile { min-height:0; }
}