/* ═══════════════════════════════════════
   THEME TOKENS — derived from logo colours
   Logo: amber box #e8a020, green check #3a9e30, navy glass #2a2a3e
═══════════════════════════════════════ */
:root {
  /* Accent — amber-orange from the box */
  --accent:        #d4760a;
  --accent-hover:  #b8620a;
  --accent-soft:   #fff8ed;
  --accent-border: #f5d090;

  /* Secondary — forest green from the checkmark */
  --green:         #2d8c26;
  --green-soft:    #edf7ec;

  /* Fonts */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Radius */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Spacing scale — use these for consistent gaps/padding across screens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Type scale — shared heading sizes so titles line up across screens */
  --text-title:    28px;  /* main view titles (e.g. "All Boxes") */
  --text-modal:    18px;  /* modal headings */
  --text-section:  13px;  /* section labels */
}

/* ── LIGHT MODE ── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:           #faf8f4;
  --bg-2:         #f2efe8;
  --surface:      #ffffff;
  --surface-2:    #f5f2eb;
  --surface-3:    #ede9e0;
  --border:       #e4ddd0;
  --border-strong:#c8bfaa;
  --text:         #1c1a14;
  --text-muted:   #6e6454;
  --text-faint:   #aca090;
  --danger:       #c0392b;
  --danger-soft:  #fdf0ee;
  --shadow-sm:  0 1px 3px rgba(60,40,10,0.08), 0 1px 2px rgba(60,40,10,0.04);
  --shadow-md:  0 4px 16px rgba(60,40,10,0.10), 0 2px 4px rgba(60,40,10,0.05);
  --shadow-lg:  0 12px 40px rgba(60,40,10,0.13), 0 4px 8px rgba(60,40,10,0.07);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #141210;
  --bg-2:         #1c1a16;
  --surface:      #201e1a;
  --surface-2:    #2a2720;
  --surface-3:    #343028;
  --border:       #3a3630;
  --border-strong:#504a40;
  --text:         #f0ece4;
  --text-muted:   #a09080;
  --text-faint:   #645c50;
  --danger:       #e05040;
  --danger-soft:  #2a1818;
  --accent-soft:  #2a1e0a;
  --accent-border:#604020;
  --green-soft:   #0e1e0c;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.25);
}

/* ── System preference default ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #141210;
    --bg-2:         #1c1a16;
    --surface:      #201e1a;
    --surface-2:    #2a2720;
    --surface-3:    #343028;
    --border:       #3a3630;
    --border-strong:#504a40;
    --text:         #f0ece4;
    --text-muted:   #a09080;
    --text-faint:   #645c50;
    --danger:       #e05040;
    --danger-soft:  #2a1818;
    --accent-soft:  #2a1e0a;
    --accent-border:#604020;
    --green-soft:   #0e1e0c;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.25);
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
/* Hide every screen during the brief async boot window (auth check, household
   load) so we don't flash the onboarding screen at returning users. The
   .js-ready class is added by app.js as soon as init() picks the right screen. */
html:not(.js-ready) .screen.active { display: none; }
html:not(.js-ready) body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 99999;
}
.hidden { display: none !important; }

/* ── Theme toggle button ── */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); transform: rotate(20deg); }
.theme-toggle-app { /* inherits .btn-icon styles */ }

/* Show correct icon based on theme */
[data-theme="dark"]  .theme-icon-light,
:root:not([data-theme]) .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark    { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-icon-dark  { display: flex; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-icon-dark  { display: none; }
  :root:not([data-theme="dark"]) .theme-icon-light { display: flex; }
}

/* ══════════════════════════════════
   LOGO IMAGE
══════════════════════════════════ */
.ob-logo-img {
  width: 180px; height: 180px; object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(196,98,45,0.3));
}

/* ══════════════════════════════════
   PREMIUM
══════════════════════════════════ */
.premium-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px;
  letter-spacing: 0.3px; vertical-align: middle;
  cursor: pointer; transition: opacity 0.15s;
}
.premium-badge:hover { opacity: 0.85; }
.premium-badge.hidden { display: none !important; }

.image-premium-overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
/* When the premium overlay is showing (non-premium user), the upload area must
   be tall enough to fit the icon + heading + description + button, or the
   overlay clips under the bottom edge (overflow:hidden). Grow the area to fit. */
.image-upload-area:has(.image-premium-overlay:not(.hidden)),
.image-upload-area.has-premium-overlay {
  min-height: 180px;
}
.image-premium-overlay:hover { background: color-mix(in srgb, var(--surface) 94%, transparent); }
.image-premium-overlay svg { color: #d49000; width: 24px; height: 24px; flex-shrink: 0; }
[data-theme="dark"] .image-premium-overlay svg,
:root:not([data-theme="light"]) .image-premium-overlay svg { color: #f5c842; }
.image-premium-overlay strong {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-top: 2px;
}
.image-premium-overlay span {
  font-size: 12px; color: var(--text-muted);
  text-align: center; line-height: 1.45;
  max-width: 240px;
}

.wiz-choice-card.premium-locked-card {
  opacity: 0.7;
  position: relative;
}
.wiz-choice-card.premium-locked-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(245,200,66,0.04) 4px, rgba(245,200,66,0.04) 8px
  );
  pointer-events: none;
}
.btn-premium-unlock {
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200; border: none; border-radius: 8px;
  padding: 8px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  cursor: pointer; margin-top: 4px; transition: opacity 0.15s;
}
.btn-premium-unlock:hover { opacity: 0.9; }

/* Premium modal */
.premium-account-required {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 4px 4px;
}
.premium-account-required .premium-star { font-size: 40px; margin-bottom: 6px; }
.premium-account-required .full-width { width: 100%; justify-content: center; }
.premium-modal-hero {
  text-align: center; padding: 8px 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.premium-star { font-size: 40px; }
.premium-modal-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, #f5c842, #e8951a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -0.3px;
}
.premium-features { display: flex; flex-direction: column; gap: 10px; }
.premium-feature-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.premium-feature-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #fdf0c0, #fde0a0);
  border: 1px solid #f0d060;
  display: flex; align-items: center; justify-content: center;
  color: #c08010;
}
.premium-feature-row strong { font-size: 14px; font-weight: 600; color: var(--text); display: block; }
.premium-feature-row span { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: block; }
/* Title line that can hold an inline badge beside the text */
.premium-feature-title {
  display: inline-flex !important; align-items: center; gap: 7px;
}
/* The BETA badge is a <span>, but must NOT inherit the generic feature-row span
   styles above (which would put it on its own line, wrong size & colour). */
.premium-feature-row .beta-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; color: #fff; margin-top: 0;
  line-height: 1; padding: 3px 7px; border-radius: 999px;
}
.premium-price-note { font-size: 12px; color: var(--text-faint); text-align: center; }
.wiz-bg { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
.wiz-shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 60px;
}

/* Progress dots */
.wiz-progress {
  display: flex; gap: 8px; margin-bottom: 40px;
}
.wiz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background 0.3s, transform 0.3s;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.wiz-dot.active { background: var(--accent); transform: scale(1.3); }
.wiz-dot.done   { background: #6a5848; }

/* Step container */
.wiz-step {
  display: none; flex-direction: column; align-items: center;
  width: 100%; max-width: 520px; text-align: center;
  animation: wiz-in 0.3s ease;
}
.wiz-step.active { display: flex; }
@keyframes wiz-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.wiz-icon {
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 20px;
}
.wiz-logo-mark {
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
}
.wiz-logo-mark img {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(212,118,10,0.25));
}
.wiz-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  color: var(--text); letter-spacing: -0.5px; margin-bottom: 10px; line-height: 1.2;
}
.wiz-sub {
  font-size: 14px; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 32px; max-width: 400px;
}

/* Form inside wizard */
.wiz-form {
  width: 100%; display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 28px; text-align: left;
}
.wiz-form .field-group label { color: var(--text-muted); }
.wiz-form input[type="text"],
.wiz-form input[type="email"],
.wiz-form input[type="password"] {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}
.wiz-form input:focus { border-color: var(--accent) !important; }
.wiz-form input::placeholder { color: var(--text-faint); }
.wiz-form .image-upload-area { background: var(--surface-2); border-color: var(--border-strong); }
.wiz-form .image-upload-area:hover { background: rgba(196,98,45,0.1); border-color: var(--accent); }
.wiz-form .image-upload-placeholder { color: var(--text-faint); }
.wiz-form .add-item-row input { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.wiz-form .add-item-row input::placeholder { color: var(--text-faint); }
.wiz-form .edit-item-row { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.wiz-form .btn-add-item { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }

/* Choice cards */
.wiz-choice-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; margin-bottom: 24px;
}
.wiz-choice-card {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 16px;
  cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text);
}
.wiz-choice-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.wiz-choice-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.wiz-choice-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  margin-bottom: 4px;
}
.wiz-choice-card strong { font-size: 14px; font-weight: 700; color: var(--text); display: block; }
.wiz-choice-card span { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: block; }

/* Sub-form (shown after a choice) */
.wiz-sub-form {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  margin-bottom: 24px;
  animation: wiz-in 0.2s ease;
}
.wiz-sub-form .field-group label { color: var(--text-muted); }
.wiz-sub-form input { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
.wiz-sub-form input::placeholder { color: var(--text-faint) !important; }
.wiz-sub-form input:focus { border-color: var(--accent) !important; }
.wiz-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.wiz-note svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

/* Actions row */
.wiz-actions {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; margin-top: 4px;
}
.wiz-actions-col { justify-content: center; }
.wiz-next-btn {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: 12px 24px; font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s; flex: 1;
  justify-content: center;
}
.wiz-next-btn:hover { background: var(--accent-hover); }
.wiz-next-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wiz-back-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius); padding: 12px 16px;
  font-family: var(--font-body); font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.15s, color 0.15s; white-space: nowrap;
}
.wiz-back-btn:hover { border-color: #6a6058; color: var(--text-muted); }

/* Skip link */
.wiz-skip-row {
  margin-top: 16px; text-align: center;
}

/* Congrats step */
.wiz-congrats-icon {
  font-size: 64px; margin-bottom: 16px;
  animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.wiz-summary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  width: 100%; text-align: left; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.wiz-summary-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-muted);
}
.wiz-summary-row .wiz-summary-icon svg { color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }
.wiz-summary-row strong { color: var(--text); }

/* Confetti container */
.wiz-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@media (max-width: 520px) {
  .wiz-choice-cards { grid-template-columns: 1fr; }
  .wiz-title { font-size: 22px; }
}
/* ══════════════════════════════════
   ONBOARDING
══════════════════════════════════ */
.ob-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg);
  transition: background 0.25s;
}
.ob-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4; pointer-events: none;
}

/* Subtle radial glow behind logo */
.ob-glow {
  position: fixed; top: -120px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,118,10,0.12) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

.ob-layout {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 20px 64px;
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  gap: 0;
}

.ob-logo {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 16px;
  animation: ob-fade-up 0.6s ease both;
}
.ob-logo-img {
  width: 130px; height: 130px; object-fit: contain;
  filter: drop-shadow(0 6px 24px rgba(212,118,10,0.28));
}

.ob-tagline {
  font-family: var(--font-body);
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
  animation: ob-fade-up 0.6s 0.1s ease both;
}
.ob-tagline-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.6;
  animation: ob-fade-up 0.6s 0.15s ease both;
}

.ob-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; margin-bottom: 28px;
  animation: ob-fade-up 0.6s 0.2s ease both;
  text-align: left;
}
.ob-bullets li {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 14px;
  transition: background 0.2s, border-color 0.2s;
}
.ob-bullets li:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.ob-bullet-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  align-self: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  box-sizing: border-box;
}
.ob-bullet-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.ob-bullets li > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ob-bullets strong { font-size: 14px; font-weight: 600; color: var(--text); }
.ob-bullets p { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0; }

.ob-cta {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  width: 100%;
  animation: ob-fade-up 0.6s 0.3s ease both;
}
.btn-ob-primary {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-lg);
  padding: 16px 28px; font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  width: 100%;
  box-shadow: 0 4px 20px rgba(212,118,10,0.3);
  letter-spacing: 0.1px;
}
.btn-ob-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,118,10,0.4);
}
.btn-ob-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(212,118,10,0.25); }

.ob-auth-row {
  font-size: 13px; color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
}
.ob-auth-link {
  background: none; border: none; color: var(--accent);
  font-size: 13px; font-family: var(--font-body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s;
}
.ob-auth-link:hover { color: var(--accent-hover); }

.ob-trust {
  margin-top: 16px;
  font-size: 12px; color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; text-align: center;
  animation: ob-fade-up 0.6s 0.4s ease both;
}

@keyframes ob-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Desktop: split layout */
@media (min-width: 860px) {
  .ob-layout {
    max-width: 1100px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 80px;
    padding: 60px 60px;
  }
  .ob-brand-col {
    flex: 0 0 340px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  }
  .ob-logo { align-items: flex-start; }
  .ob-logo-img { width: 180px; height: 180px; }
  .ob-tagline { font-size: 32px; }
  .ob-tagline-sub { margin-bottom: 0; }
  .ob-content-col {
    flex: 1;
    display: flex; flex-direction: column; gap: 20px;
  }
  .ob-cta { align-items: flex-start; }
  .btn-ob-primary { width: auto; min-width: 260px; }
  .ob-auth-row { justify-content: flex-start; }
  .ob-trust { justify-content: flex-start; margin-top: 0; }
  .ob-glow { top: -200px; }
}

/* ══════════════════════════════════
   AUTH SCREEN
══════════════════════════════════ */
.login-bg { position: fixed; inset: 0; z-index: 0; background: var(--bg); transition: background 0.25s; }
.login-noise { position: absolute; inset: 0; opacity: 0.3; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
.login-card { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 40px 24px 60px; min-height: 100vh; display: flex; flex-direction: column; }
.logo-mark { color: var(--accent); margin-bottom: 8px; }

.btn-back-plain {
  background: none; border: none; color: var(--text-faint); font-family: var(--font-body);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 0; margin-bottom: 4px; transition: color 0.15s;
}
.btn-back-plain:hover { color: var(--accent); }

.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.auth-brand-name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.auth-tagline {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--text);
  margin: 14px 0 4px;
  line-height: 1.25;
}
.auth-tabs {
  display: flex; background: var(--surface-2); border-radius: var(--radius);
  padding: 4px; gap: 4px; margin: 16px 0 24px;
  border: 1px solid var(--border);
}
/* When the Create-account tab is hidden (premium-only-accounts model), there's
   only one tab — hide the whole tabs strip so the login form isn't preceded by
   a lone "Sign in" tab that looks like an unused control. */
.auth-tabs:has(#tab-register.hidden) { display: none; }
.auth-tab {
  flex: 1; background: none; border: none; color: var(--text-faint);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 9px 0; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* "Don't have an account? Get Premium" note shown above the sign-in form */
.auth-no-account-note {
  font-size: 13px; color: var(--text-muted);
  text-align: center; margin: 0 0 18px;
}
.auth-no-account-note a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.15s;
}
.auth-no-account-note a:hover { border-bottom-color: var(--accent); }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.full-width { width: 100%; justify-content: center; }

.login-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 2px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ══════════════════════════════════
   HOUSEHOLD SCREEN
══════════════════════════════════ */
/* ══════════════════════════════════
   HOUSEHOLD SCREEN — overlay style
══════════════════════════════════ */
#screen-household.active {
  position: fixed; inset: 0;
  z-index: 850;
  background: rgba(20, 14, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeOverlay 0.18s ease;
}
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.household-screen { width: 100%; display: flex; align-items: center; justify-content: center; }
.household-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px 32px; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: wiz-in 0.2s ease; }
.household-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-top: 4px; }
.household-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; text-align: center; }
.household-list { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; min-height: 20px; }

/* Row wrapper: holds an actions drawer behind a sliding main surface. */
.household-item-row {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.household-item-actions {
  position: absolute; inset: 0 0 0 auto;
  display: flex; align-items: stretch;
  height: 100%;
}
.hh-row-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 66px; border: none; cursor: pointer;
  font-size: 10.5px; font-weight: 600;
  color: #fff;
}
.hh-row-action span { line-height: 1; }
.hh-row-invite { background: var(--accent); }
.hh-row-rename { background: #5b6b7a; }
.hh-row-destructive { background: #c0392b; }
.hh-row-action:hover { filter: brightness(1.07); }

/* Prompt-dialog input (reuses the confirm modal) */
.confirm-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; margin: 0 0 18px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.confirm-input:focus { outline: none; border-color: var(--accent); }

/* Premium star on the Create-household button when at the free limit */
.hh-create-premium-badge { margin-left: 4px; font-size: 12px; }

/* Quick-invite popup (from picker rows) */
.hh-invite-field { margin-bottom: 14px; }
.hh-invite-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.hh-invite-row { display: flex; align-items: center; gap: 8px; }
.hh-invite-input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 12.5px; font-family: var(--font-mono, monospace);
}
.hh-invite-code {
  flex: 1; font-family: var(--font-mono, monospace); font-size: 18px;
  font-weight: 700; letter-spacing: 2px; color: var(--accent);
}

/* The main surface slides left to reveal the drawer (touch). */
.household-item-row .household-item-main {
  position: relative; z-index: 1;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius);
}
/* Open offset is applied inline via JS (varies with 2 vs 3 actions). */
/* While dragging we set transform inline; disable the transition for 1:1 follow. */
.household-item-row .household-item-main:active { transition: none; }

/* Desktop (hover-capable): show actions inline, no swipe needed. */
.household-item-row:not(.is-touch) {
  display: flex; align-items: stretch; gap: 8px; overflow: visible;
}
.household-item-row:not(.is-touch) .household-item-actions {
  position: static; order: 2;
  border-radius: var(--radius); overflow: hidden;
  flex-shrink: 0;
}
.household-item-row:not(.is-touch) .household-item-main { order: 1; flex: 1; transform: none !important; }
.household-item-row:not(.is-touch) .hh-row-action { border-radius: 0; }
.household-item-row:not(.is-touch) .hh-row-action:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.household-item-row:not(.is-touch) .hh-row-action:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

.household-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, background 0.15s; width: 100%; text-align: left; }
.household-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.household-item-icon { width: 34px; height: 34px; background: var(--accent-soft); border: 1px solid #f0c8a0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.household-item-info { flex: 1; }
.household-item-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.household-item-meta { font-size: 12px; color: var(--text-muted); }
.household-divider { width: 100%; display: flex; align-items: center; gap: 12px; margin: 8px 0; color: var(--text-faint); font-size: 12px; }
.household-divider::before, .household-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.household-actions { display: flex; gap: 10px; width: 100%; }
.household-actions .btn-primary, .household-actions .btn-secondary { flex: 1; justify-content: center; font-size: 13px; padding: 10px 12px; }
.sign-out-small { background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer; font-family: var(--font-body); margin-top: 8px; text-decoration: underline; }

/* ══════════════════════════════════
   APP HEADER
══════════════════════════════════ */
.app-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 12px; }
.header-logo { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.household-switcher { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text); transition: background 0.15s, border-color 0.15s; white-space: nowrap; max-width: 180px; overflow: hidden; }
.household-switcher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.household-switcher:hover { background: var(--accent-soft); border-color: #f0c8a0; color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.search-wrap { position: relative; max-width: 280px; width: 100%; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.search-wrap input { width: 100%; padding: 8px 12px 8px 34px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 13px; color: var(--text); outline: none; transition: border-color 0.15s; }
.search-wrap input:focus { border-color: var(--accent); background: var(--surface); }
.search-wrap input::placeholder { color: var(--text-faint); }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* ── Notifications: bell, badge, dropdown panel, rows ─────────────────────── */
.notifications-bell { position: relative; }
.notifications-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #d4760a; color: #fff;
  border: 2px solid var(--surface); border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); box-sizing: content-box;
}

.notifications-panel {
  position: fixed; z-index: 1000;
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 80px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 48px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.notifications-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notifications-panel-head h3 {
  margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 800;
}
.notifications-mark-all-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 4px 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.notifications-mark-all-btn:hover { color: var(--accent); background: var(--accent-soft); }

.notifications-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.notifications-loading { padding: 24px 16px; text-align: center; color: var(--text-faint); font-size: 13px; }

.notifications-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 24px; color: var(--text-faint); gap: 8px;
}
.notifications-empty p { margin: 0; font-size: 13px; }

.notification-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  position: relative;
}
.notification-row:last-child { border-bottom: none; }
.notification-row:hover { background: var(--surface-2); }
.notification-row.unread { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.notification-row.unread::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translateY(-50%);
}
.notification-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.notification-icon svg { width: 16px; height: 16px; }
.notification-body { flex: 1; min-width: 0; }
.notification-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.4; margin-bottom: 2px;
}
.notification-text {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notification-time { font-size: 11px; color: var(--text-faint); }
.notification-dismiss {
  flex-shrink: 0;
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-faint); border-radius: 6px;
  opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.notification-row:hover .notification-dismiss { opacity: 1; }
.notification-dismiss:hover { color: var(--text); background: var(--surface-2); }
/* Mobile: dismiss always visible (no hover) */
@media (max-width: 600px) {
  .notification-dismiss { opacity: 0.6; }
  .notifications-panel { right: 12px !important; left: 12px; width: auto; }
}

/* Upgrade banner */
.upgrade-banner {
  background: #fdf6e8; border-bottom: 1px solid #f0d898;
  font-size: 13px; color: #8a6820;
}
.upgrade-banner-inner {
  max-width: 1100px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 8px;
}

.household-premium-star {
  font-size: 11px; line-height: 1;
}

/* Upgrade banner premium button */
.upgrade-banner button {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200; border: none; border-radius: 6px;
  padding: 4px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  cursor: pointer; margin-left: auto; transition: opacity 0.15s;
}
.upgrade-banner button:hover { opacity: 0.88; }

/* ══════════════════════════════════
   VIEWS
══════════════════════════════════ */
.view { display: none; }
.view.active { display: block; }
.view-inner { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; }

/* App-wide footer — legal links + shortcuts + changelog. Matches the content
   width/padding system (1100px, 24px sides). */
/* Make the app screen a flex column so the footer is pushed to the bottom of
   the viewport when content is short, while still scrolling away under long
   content. The views area grows to absorb the slack. */
#screen-app.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic vh: respects mobile browser chrome */
}
#screen-app .app-header { flex-shrink: 0; }
#screen-app #view-list,
#screen-app #view-detail { flex: 1 0 auto; }
.app-footer {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  flex-shrink: 0;
}
.app-footer-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 16px 24px 28px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
  font-size: 12.5px;
  color: var(--text-faint);
  font-family: 'Inter', system-ui, sans-serif;
}
.app-footer-legal, .app-footer-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.app-footer a, .app-footer-link {
  color: var(--text-muted);
  text-decoration: none;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.15s;
}
.app-footer a:hover, .app-footer-link:hover { color: var(--accent); }
.app-footer-link svg { opacity: 0.7; }
.app-footer-sep { color: var(--text-faint); opacity: 0.5; }
.app-footer-badge {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
@media (max-width: 640px) {
  .app-footer-inner { padding: 14px 16px 24px; justify-content: center; gap: 6px 12px; }
  /* Keyboard shortcuts are desktop-only — hide the footer link (and the
     separator that follows it) on touch/mobile where there's no keyboard. */
  #footer-shortcuts-btn,
  #footer-shortcuts-btn + .app-footer-sep { display: none; }
}

/* Changelog modal entries */
.changelog-entry { padding: 0 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.changelog-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.changelog-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.changelog-version { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text); }
.changelog-date { font-size: 12px; color: var(--text-faint); }
.changelog-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.changelog-items li { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.changelog-action { margin-top: 12px; font-size: 12.5px; padding: 7px 14px; }
.list-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.view-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.view-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.search-banner { background: var(--accent-soft); border: 1px solid #f0d0b8; border-radius: var(--radius); padding: 10px 16px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--accent); }
.search-banner button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-family: var(--font-body); text-decoration: underline; }

/* ══════════════════════════════════
   ROOMS
══════════════════════════════════ */
.room-section { margin-bottom: 8px; }
.room-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; user-select: none; transition: background 0.15s; }
.room-section.open .room-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.room-header:hover { background: var(--surface-2); }
.room-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); border: 1px solid #f0c8a0; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.room-header-info { flex: 1; }
.room-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; color: var(--text); }
.room-box-count { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.room-chevron { color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0; }
.room-section.open .room-chevron { transform: rotate(180deg); }
.room-body { display: none; background: var(--surface); border: 1px solid var(--border); border-top: none; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); padding: 16px; }
.room-section.open .room-body { display: block; }

/* ══════════════════════════════════
   BOXES GRID
══════════════════════════════════ */
.boxes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.box-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; box-shadow: var(--shadow-sm); animation: card-in 0.25s ease both; }
@keyframes card-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.box-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.box-card-image { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--surface-2); }
.box-card-no-image {
  width: 100%; height: 120px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); opacity: 0.55;
  border-bottom: 1px solid var(--border);
}
.box-card-no-image svg { width: 40px; height: 40px; }
.box-card-body { padding: 12px 14px 14px; }
.box-card-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.2px; margin-bottom: 4px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.box-card-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.box-card-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-location-tag { display: inline-flex; align-items: center; gap: 3px; }
.box-card-items { display: flex; flex-wrap: wrap; gap: 4px; }
.item-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  max-width: calc(50% - 2px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 1;
}
.item-chip.highlight { background: var(--accent-soft); border-color: #f0c8a0; color: var(--accent); font-weight: 600; }
.item-chip.more { background: transparent; border-color: transparent; color: var(--text-faint); }

/* Unassigned */
.unassigned-header { display: flex; align-items: center; gap: 8px; padding: 10px 0 12px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); cursor: pointer; user-select: none; }
.unassigned-header svg { transition: transform 0.2s; }
.unassigned-section.open .unassigned-header svg { transform: rotate(180deg); }
.unassigned-body { display: none; }
.unassigned-section.open .unassigned-body { display: block; }

/* Empty */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty-state p { font-size: 15px; line-height: 1.6; }
.room-empty { font-size: 13px; color: var(--text-faint); padding: 8px 4px; }

/* ══════════════════════════════════
   DETAIL
══════════════════════════════════ */
.detail-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.btn-back { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 13px; display: flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; }
.btn-back:hover { background: var(--surface-2); color: var(--text); }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: flex-start; }
/* No photo → drop the image column entirely and let the content span full
   width, left-aligned. */
.detail-layout.no-image { grid-template-columns: 1fr; }
.detail-layout.no-image .detail-image-col { display: none; }
.detail-image-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.detail-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); opacity: 0.9;
}
.detail-no-img svg { width: 40px; height: 40px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); margin-bottom: 8px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.detail-breadcrumb .breadcrumb-room { color: var(--accent); }
.detail-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; line-height: 1.15; display: flex; align-items: center; gap: 10px; }
.detail-title-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--accent); }
.detail-title-icon svg { width: 26px; height: 26px; }
.wiz-summary-icon { display: flex; align-items: center; color: var(--accent); }
.wiz-summary-icon svg { width: 16px; height: 16px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.detail-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.detail-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.items-section { border-top: 1px solid var(--border); padding-top: 20px; padding-bottom: 8px; }
.items-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.items-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); }
.items-count { background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; padding: 2px 8px; border-radius: 20px; color: var(--text-muted); }
.items-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.items-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.items-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.no-items-msg { font-size: 14px; color: var(--text-faint); padding: 16px 0; }

/* ══════════════════════════════════
   BOX ICON PICKER
══════════════════════════════════ */
.name-with-icon { display: flex; align-items: center; gap: 8px; }
.box-icon-picker-btn {
  width: 42px; height: 42px; min-width: 42px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0; color: var(--accent);
}
.box-icon-picker-btn:hover { background: var(--accent-soft); border-color: var(--accent-border); }
.box-icon-svg { display: flex; align-items: center; justify-content: center; }
.box-icon-svg svg { width: 22px; height: 22px; }
.name-with-icon input { flex: 1; }

.box-icon-picker {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px;
  box-shadow: var(--shadow-md); margin-top: 4px;
  animation: wiz-in 0.15s ease;
}
.box-icon-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }

.box-icon-option,
.wiz-icon-option {
  width: 100%; aspect-ratio: 1;
  border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  padding: 6px; color: var(--text-muted);
}
.box-icon-option svg, .wiz-icon-option svg { width: 20px; height: 20px; }
.box-icon-option:hover, .wiz-icon-option:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); transform: scale(1.12); }
.box-icon-option.selected, .wiz-icon-option.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Icon on box card */
.box-card-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.2px; margin-bottom: 4px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.box-card-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--accent); }
.box-card-icon svg { width: 15px; height: 15px; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-group label { font-size: 13px; font-weight: 600; color: var(--text); }
.label-hint { font-weight: 400; color: var(--text-faint); }
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="password"],
.field-group select {
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; color: var(--text); outline: none; transition: border-color 0.15s; width: 100%;
}
.field-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b0a898' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field-group input:focus, .field-group select:focus { border-color: var(--accent); }
.field-group input::placeholder { color: var(--text-faint); }

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 10px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: none; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-body); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger-ghost { background: none; color: var(--danger); border: 1px solid #f0c0bc; border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-body); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s; }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.btn-danger { background: var(--danger); color: #fff; border: none; border-radius: var(--radius); padding: 10px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.btn-danger:hover { opacity: 0.85; }

.btn-facebook { background: #1877F2; color: #fff; border: none; border-radius: var(--radius); padding: 11px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; transition: background 0.15s; }
.btn-facebook:hover { background: #1465d3; }
.btn-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: var(--radius); padding: 11px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; transition: background 0.15s, box-shadow 0.15s; }
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.btn-apple { background: #000; color: #fff; border: none; border-radius: var(--radius); padding: 11px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; transition: background 0.15s; }
.btn-apple:hover { background: #222; }

/* ══════════════════════════════════
   IMAGE UPLOAD
══════════════════════════════════ */
.image-upload-area { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; min-height: 110px; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; overflow: hidden; position: relative; }
.image-upload-area:hover { border-color: var(--accent); background: var(--accent-soft); }
.image-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-faint); font-size: 13px; padding: 24px; pointer-events: none; }
.image-preview-wrap { position: relative; width: 100%; }
.image-preview-wrap img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.remove-image-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.remove-image-btn:hover { background: rgba(0,0,0,0.8); }

/* Items editor */
.items-editor { display: flex; flex-direction: column; gap: 8px; }
.edit-items-list { display: flex; flex-direction: column; gap: 6px; }
.edit-item-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.edit-item-row span { flex: 1; }
.edit-item-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; transition: color 0.15s; }
.edit-item-remove:hover { color: var(--danger); }
.add-item-row { display: flex; gap: 8px; }
.add-item-row input { flex: 1; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 14px; color: var(--text); outline: none; transition: border-color 0.15s; }
.add-item-row input:focus { border-color: var(--accent); }
.add-item-row input::placeholder { color: var(--text-faint); }
.btn-add-item { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 16px; border-radius: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.btn-add-item:hover { background: var(--border); }

/* Rooms manage */
.rooms-manage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.room-manage-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.room-manage-row span { flex: 1; font-weight: 500; }
.room-manage-row .room-manage-count { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.room-manage-delete { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 16px; padding: 0 2px; transition: color 0.15s; }
.room-manage-delete:hover { color: var(--danger); }
.rooms-empty-msg { font-size: 13px; color: var(--text-faint); padding: 8px 0; }

/* Household settings */
.invite-code-section { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.invite-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.3px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.invite-code-row { display: flex; align-items: center; gap: 8px; }
.invite-code { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 6px; color: var(--accent); flex: 1; }
.invite-code-row .btn-secondary { padding: 7px 14px; font-size: 13px; }
.hh-members-section { display: flex; flex-direction: column; gap: 8px; }
.hh-members-list { display: flex; flex-direction: column; gap: 6px; }
.hh-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.hh-member-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); border: 1px solid #f0c8a0; color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.hh-member-email { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-member-you { font-size: 11px; color: var(--accent); font-weight: 600; background: var(--accent-soft); padding: 2px 6px; border-radius: 10px; }

/* ══════════════════════════════════
   PROFILE MODAL
══════════════════════════════════ */
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--accent-soft); border: 2px solid #f0c8a0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--accent); }
.profile-info { flex: 1; overflow: hidden; }
.profile-email { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-providers { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.profile-section-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-faint); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.profile-links { display: flex; flex-direction: column; gap: 8px; }
.profile-link-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.profile-link-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.google-icon { background: #f8f9fa; border: 1px solid #e0e0e0; }
.facebook-icon { background: #e8f0fe; border: 1px solid #c5d4f5; }
.apple-icon { background: #f0f0f0; border: 1px solid #ddd; }
.profile-link-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-link-name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile-link-status { font-size: 12px; }
.profile-link-status.linked { color: #2e7d32; }
.profile-link-status.unlinked { color: var(--text-faint); }
.profile-link-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; color: var(--text-muted); }
.profile-link-btn.link-btn { color: var(--accent); border-color: #f0c8a0; background: var(--accent-soft); }
.profile-link-btn.link-btn:hover { background: #fde0c8; }
.profile-link-btn.unlink-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: #f0c0bc; }

/* Premium status row in profile */
.premium-status-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 13px; width: 100%; text-align: left;
  border: none; cursor: default; font-family: var(--font-body);
}
.premium-status-row strong { color: var(--text); }
.premium-active {
  background: linear-gradient(135deg, #fdf6e0, #fef0c0);
  border: 1px solid #f0d060;
  color: #8a6010;
}
.premium-inactive {
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  color: var(--text-muted); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.premium-inactive:hover { background: #fdf6e0; border-color: #f0d060; color: #8a6010; }

/* ══════════════════════════════════
   MODALS
══════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(26,23,20,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: overlay-in 0.2s ease; }
@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; animation: modal-in 0.2s ease; }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:none; } }
.modal-sm { max-width: 400px; }
.modal-header { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.modal-close { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.modal-close:hover { background: var(--surface-2); }
.modal-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

.qr-body { align-items: center; }
.qr-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.qr-wrap { background: white; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.qr-wrap img { width: 200px; height: 200px; display: block; }
.qr-hint { font-size: 13px; color: var(--text-muted); }
.qr-url-row { display: flex; gap: 8px; width: 100%; }
.qr-url-row input { flex: 1; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 12px; color: var(--text-muted); outline: none; }
.qr-print-btn { width: 100%; justify-content: center; }

.error-msg { background: var(--danger-soft); border: 1px solid #f0c0bc; color: var(--danger); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.success-msg { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reusable loading state for popups / lists / any async container.
   Usage: drop a .loading-state block into a container while data loads, then
   replace its innerHTML with the real content. See showLoading() in app.js. */
.loading-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  min-height: 120px;
  color: var(--text-faint);
}
.loading-state .loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-state .loading-label {
  font-size: 13px; color: var(--text-faint);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 700px) {
  .detail-layout { grid-template-columns: 1fr; }
  .header-inner {
    padding: 0 16px;
    gap: 8px;
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
  }
  .view-inner { padding: 20px 16px 60px; }
  .upgrade-banner-inner { padding: 8px 16px; }
  .boxes-grid { grid-template-columns: 1fr 1fr; }
  .detail-actions { gap: 6px; }
  .field-row { grid-template-columns: 1fr; }
  .household-switcher { max-width: 120px; }

  /* Hide the wordmark on mobile — the logo alone is enough */
  .header-brand-text { display: none; }

  /* On mobile, .header-actions becomes a contents wrapper so its children participate
     in the parent flex layout. Profile + theme stay on the top row next to the
     household; search wraps to its own row beneath. */
  .header-actions {
    display: contents;
  }
  .header-actions > #profile-btn { margin-left: auto; }

  .search-wrap {
    order: 2;
    flex: 0 0 100%;
    max-width: none;
    margin-top: 4px;
  }
  .search-wrap input { font-size: 16px !important; padding-top: 9px; padding-bottom: 9px; }

  /* Other inputs/selects: bump to 16px so iOS Safari doesn't auto-zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  .boxes-grid { grid-template-columns: 1fr; }
}

/* Auth screen inputs use the standard field styles via variables */

/* ══════════════════════════════════
   BETA BADGE + MAP BUTTON
══════════════════════════════════ */
.list-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.beta-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px;
  letter-spacing: 0.6px; vertical-align: middle; line-height: 1;
  text-transform: uppercase;
}
.btn-map {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 14px; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-map:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

/* ══════════════════════════════════
   ROOM MAP SHELL
══════════════════════════════════ */
#modal-room-map { padding: 0; align-items: stretch; justify-content: stretch; background: rgba(0,0,0,0.7); }
.map-shell { background: var(--bg); width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: column; animation: modal-in 0.2s ease; }

/* Header */
.map-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); flex-shrink: 0; flex-wrap: wrap; }
.map-back-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 13px; display: flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.map-back-btn:hover { background: var(--surface-2); color: var(--text); }
.map-header-center { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; flex: 1; justify-content: center; }
.map-title { color: var(--text); }
.map-header-right { display: flex; align-items: center; gap: 8px; }
.map-room-select { padding: 7px 28px 7px 10px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; font-family: var(--font-body); font-size: 13px; color: var(--text); cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b0a898' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: border-color 0.15s; min-width: 140px; }
.map-room-select:focus { border-color: var(--accent); }
.map-save-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.map-save-btn:hover { background: var(--accent-hover); }
.map-save-btn.saved { background: var(--green); }
.map-reset-btn { padding: 7px 10px; }

/* Toolbar */
.map-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.map-toolbar-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.map-tool-group { display: flex; gap: 4px; }
.map-tool-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 7px; padding: 6px 11px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.map-tool-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.map-tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.map-tool-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.map-save-status { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 4px; }

/* Body */
.map-body { display: flex; flex: 1; overflow: hidden; min-height: 0; position: relative; }

/* Sidebar */
.map-sidebar { width: 175px; min-width: 150px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.map-sidebar-header { padding: 10px 12px 8px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.map-sidebar-header span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text); }
.map-sidebar-hint { font-size: 10px; color: var(--text-faint); }
.map-sidebar-list { flex: 1; overflow-y: auto; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.sidebar-token { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; cursor: grab; transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s; user-select: none; }
.sidebar-token:hover { background: var(--accent-soft); border-color: var(--accent-border); transform: translateX(2px); }
.sidebar-token.dragging { opacity: 0.4; cursor: grabbing; }
.sidebar-token.placed { opacity: 0.3; pointer-events: none; }
.sidebar-token-icon { color: var(--accent); display: flex; flex-shrink: 0; }
.sidebar-token-icon svg { width: 13px; height: 13px; }
.sidebar-token-name { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 20px 10px; line-height: 1.5; }

/* Canvas */
.map-canvas-wrap { flex: 1; overflow: auto; position: relative; background: var(--bg-2); background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; cursor: default; }
/* Scale legend — pinned to the canvas viewport, shows how big a grid square is */
.map-scale {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  pointer-events: none;
  display: none;
  font-size: 10.5px; color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  backdrop-filter: blur(3px);
}
.map-scale-bar {
  position: relative;
  width: var(--scale-px, 40px); height: 7px;
  border: 1.5px solid var(--accent); border-top: none;
  box-sizing: border-box;
}
.map-scale-label {
  position: absolute; left: 50%; top: -13px; transform: translateX(-50%);
  white-space: nowrap; font-weight: 600; color: var(--accent);
}
.map-scale-note { color: var(--text-faint); font-size: 9.5px; }

/* Predefined-room size dialog */
.map-room-size-units { display: flex; gap: 8px; margin-bottom: 16px; }
.map-room-unit-btn {
  flex: 1; padding: 9px 0; text-align: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.map-room-unit-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.map-room-size-fields { display: flex; align-items: flex-end; gap: 10px; }
.map-room-size-fields .field-group { flex: 1; margin: 0; }
.map-room-size-fields input { width: 100%; box-sizing: border-box; }
.map-room-size-x { padding-bottom: 12px; color: var(--text-faint); font-size: 16px; }
.map-room-size-note { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; text-align: center; }

/* Furniture dropdown */
.map-furniture-menu-wrap { position: relative; display: inline-block; }
.map-furniture-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 5px; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px;
}
.map-furniture-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; text-align: left;
  background: none; border: none; border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.map-furniture-item:hover { background: var(--accent-soft); color: var(--accent); }
.map-furniture-item svg { color: var(--text-muted); flex-shrink: 0; }
.map-furniture-item:hover svg { color: var(--accent); }
.map-furniture-selected rect { filter: drop-shadow(0 0 3px rgba(90,107,122,0.5)); }

/* Wall length editor — bottom-left of the canvas (opposite the scale legend) */
.map-wall-length {
  position: absolute; left: 12px; bottom: 12px; z-index: 7;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 7px;
}
.map-wall-length-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.map-wall-length-row { display: flex; align-items: center; gap: 7px; }
.map-wall-length-row input {
  width: 70px; padding: 6px 8px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-family: inherit;
}
.map-wall-length-row input:focus { outline: none; border-color: var(--accent); }
.map-wall-length-unit { font-size: 13px; color: var(--text-muted); }
.map-canvas-wrap[data-tool="wall"] { cursor: crosshair; }
.map-canvas-wrap[data-tool="door"] { cursor: cell; }
.map-canvas-wrap[data-tool="erase"] { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='8' fill='none' stroke='%23c0392b' stroke-width='2'/></svg>") 10 10, crosshair; }
.map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-faint); font-size: 14px; pointer-events: none; text-align: center; }
.map-canvas { position: relative; width: 1600px; height: 1000px; display: none; }
.map-canvas.active { display: block; }
.map-canvas-wrap.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* SVG layer for walls & doors */
.map-svg-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* Wall preview while drawing */
.map-wall-preview { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; opacity: 0.5; pointer-events: none; }
/* Committed wall */
.map-wall { stroke-width: 7; stroke-linecap: round; cursor: pointer; }
[data-theme="dark"] .map-wall, :root:not([data-theme="light"]) .map-wall { stroke: #c8b090; }
.map-wall:not([data-theme="dark"]) { stroke: #4a3a28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-wall { stroke: #c8b090; } }

/* Door marker */
.map-door-group { cursor: pointer; }
.map-door-group.map-door-selected .map-door-handle { filter: drop-shadow(0 0 3px rgba(37,99,235,0.6)); }
.map-door-group.map-door-selected { filter: drop-shadow(0 0 2px rgba(37,99,235,0.5)); }
.map-door-arc { fill: none; stroke-dasharray: 3 2; stroke-width: 2; }
.map-door-line { stroke-width: 6; stroke-linecap: round; }
[data-theme="dark"] .map-door-arc, [data-theme="dark"] .map-door-line { stroke: #5b8dd9; }
.map-door-arc, .map-door-line { stroke: #2563eb; }

/* Box tokens on canvas */
.map-token { position: absolute; min-width: 110px; max-width: 160px; background: var(--surface); border: 2px solid var(--border); border-radius: 10px; cursor: grab; user-select: none; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, border-color 0.15s; z-index: 10; overflow: hidden; }
/* When explicitly sized by the user, allow a fixed footprint and let the body fill it */
.map-token.map-token-sized { display: flex; flex-direction: column; }
.map-token.map-token-sized .map-token-body { flex: 1; overflow: hidden; }
.map-token.resizing-on-map { cursor: nwse-resize; box-shadow: var(--shadow-md); border-color: var(--accent); transition: none; }
/* Resize handle — bottom-right corner, only in edit + select mode */
.map-token-resize {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 12;
  display: none;
  background:
    linear-gradient(135deg, transparent 50%, var(--accent) 50%);
  border-bottom-right-radius: 8px;
}
.map-token-resize::after {
  content: ''; position: absolute; right: 2px; bottom: 2px;
  width: 5px; height: 5px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
}
/* Show the handle only in edit mode with the select tool */
.map-canvas-wrap[data-tool="select"] .map-token-resize { display: block; }
.map-shell.view-mode .map-token-resize { display: none !important; }
.map-token:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.map-token.dragging-on-map { cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 200; border-color: var(--accent); }
.map-token.stacked { border-style: dashed; }
.map-token-img { width: 100%; height: 60px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); }
.map-token-body { padding: 7px 9px 8px; display: flex; flex-direction: column; gap: 3px; }
.map-token-header { display: flex; align-items: center; gap: 5px; }
.map-token-icon { color: var(--accent); display: flex; flex-shrink: 0; }
.map-token-icon svg { width: 14px; height: 14px; }
.map-token-name { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-token-location { font-size: 10px; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.map-token-location svg { width: 9px; height: 9px; flex-shrink: 0; }
.map-token-meta { font-size: 10px; color: var(--text-faint); }
.map-token-stack-badge { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.25); pointer-events: none; }
.map-token-remove { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; background: var(--surface-3); border: none; border-radius: 50%; color: var(--text-faint); cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s, color 0.12s; z-index: 5; }
.map-token:hover .map-token-remove { opacity: 1; }
.map-token-remove:hover { color: var(--danger); background: var(--danger-soft); }

/* Stack popup */
.map-stack-popup { position: absolute; z-index: 300; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-lg); min-width: 160px; display: flex; flex-direction: column; gap: 5px; animation: wiz-in 0.15s ease; }
.map-stack-popup-title { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.map-stack-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 0.12s; font-size: 12px; color: var(--text); }
.map-stack-item:hover { background: var(--accent-soft); }
.map-stack-item svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* Footer */
.map-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 7px 16px; font-size: 11px; color: var(--text-faint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.map-footer #map-footer-hint { flex: 1; text-align: center; }
.map-footer-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 11px; cursor: pointer;
  color: var(--text-muted); flex-shrink: 0;
  transition: color 0.15s;
}
.map-footer-link:hover { color: var(--accent); }
.map-footer-link svg { opacity: 0.7; }

@media (max-width: 600px) {
  .map-sidebar { width: 130px; min-width: 110px; }
  .map-toolbar { padding: 6px 10px; gap: 5px; }
  .map-tool-btn { padding: 5px 8px; font-size: 11px; }
  .map-footer { display: none; }
}

/* Map token highlight (locate on map) */
.map-token-highlight {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px rgba(212,118,10,0.4) !important;
  animation: map-highlight-pulse 1.2s ease 3;
}
/* Map token selected (tap in view mode) — same look, persistent (no pulse) */
.map-token-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px rgba(212,118,10,0.4) !important;
}
@keyframes map-highlight-pulse {
  0%,100% { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px rgba(212,118,10,0.3); }
  50%      { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 32px rgba(212,118,10,0.6); }
}

/* ══════════════════════════════════
   PREMIUM PRICING CARDS
══════════════════════════════════ */
.premium-pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.premium-plan {
  position: relative;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 14px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 6px;
}
.premium-plan:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,118,10,0.15);
}
.premium-plan-best {
  border-color: #e8951a;
  background: linear-gradient(135deg, #fdf6e0 0%, #fef0c0 100%);
  box-shadow: 0 4px 16px rgba(232,149,26,0.18);
}
[data-theme="dark"] .premium-plan-best,
:root:not([data-theme="light"]) .premium-plan-best {
  background: linear-gradient(135deg, #2a1e0a 0%, #1c1408 100%);
  border-color: #f5c842;
}
.premium-plan-best:hover {
  border-color: #f5c842;
  background: linear-gradient(135deg, #fef0c0 0%, #fde0a0 100%);
}
[data-theme="dark"] .premium-plan-best:hover,
:root:not([data-theme="light"]) .premium-plan-best:hover {
  background: linear-gradient(135deg, #3a2a14 0%, #2a1e0a 100%);
}
.premium-plan-badge {
  position: absolute; top: -8px; right: 10px;
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200; font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(232,149,26,0.4);
}
.premium-plan-header {
  display: flex; flex-direction: column; gap: 2px;
}
.premium-plan-name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.premium-plan-best .premium-plan-name { color: #c08010; }
[data-theme="dark"] .premium-plan-best .premium-plan-name,
:root:not([data-theme="light"]) .premium-plan-best .premium-plan-name { color: #f5c842; }
.premium-plan-price {
  display: flex; align-items: baseline; gap: 4px;
}
.premium-plan-amount {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.premium-plan-period {
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.premium-plan-tagline {
  font-size: 11px; color: var(--text-faint); margin-top: 2px;
}
.premium-plan-loading {
  pointer-events: none; opacity: 0.7;
}

/* Floor tool cursor */
.map-canvas-wrap[data-tool="floor"] { cursor: crosshair; }

/* ══════════════════════════════════
   MAP — wall thickness & zoom
══════════════════════════════════ */
.map-thickness-group, .map-zoom-group {
  display: flex; align-items: center; gap: 4px;
}
.map-thickness-btn {
  width: 30px; height: 28px;
  background: none; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.12s, border-color 0.12s;
}
.map-thickness-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.map-thickness-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.map-thickness-swatch {
  display: block; width: 16px; border-radius: 4px;
  background: currentColor; color: var(--text-muted);
}
.map-thickness-btn.active .map-thickness-swatch { color: var(--accent); }

.map-zoom-btn {
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.map-zoom-btn:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.map-zoom-btn:active { background: var(--accent-soft); }
.map-zoom-level {
  background: none; border: 1px solid var(--border);
  border-radius: 6px;
  height: 28px; padding: 0 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  min-width: 50px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.map-zoom-level:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }

/* The canvas is scaled via transform; the wrap stays scrollable */
.map-canvas {
  transform-origin: 0 0;
  transition: transform 0.12s ease-out;
}

/* ── Quantity stepper (compact +/- counter) ─────────────────────────────── */
.qty-stepper {
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  height: 36px;
  flex-shrink: 0;
}
.qty-stepper-btn {
  width: 24px; height: 100%;
  background: none; border: none;
  cursor: pointer; color: var(--text-muted);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  padding: 0; line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.qty-stepper-btn:hover { background: var(--accent-soft); color: var(--accent); }
.qty-stepper-btn:active { background: var(--accent); color: #fff; }
.qty-stepper-val {
  min-width: 22px; padding: 0 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 13px;
  color: var(--text);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}

/* Item quantity chip on cards */
.item-chip-qty {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-right: 4px;
  vertical-align: 1px;
}

/* Empty state — center the CTA */
.empty-state .btn-primary {
  margin-top: 6px;
}

/* Items in edit list — compact inline qty control */
.edit-item-qty-control {
  display: inline-flex; align-items: center; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.edit-item-qty-btn {
  width: 20px; height: 22px;
  background: none; border: none;
  cursor: pointer; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  padding: 0; line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.edit-item-qty-btn:hover { background: var(--accent-soft); color: var(--accent); }
.edit-item-qty-num {
  font-variant-numeric: tabular-nums;
  min-width: 20px; text-align: center;
  font-weight: 600; font-size: 12px; color: var(--text);
  padding: 0 3px;
}

/* Detail items list quantity badge */
.items-list-qty {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   DETAIL ITEM ROW (with actions)
══════════════════════════════════ */
.detail-item-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  list-style: none;
}
.detail-item-name { flex: 1; color: var(--text); font-size: 14px; transition: color 0.2s, text-decoration-color 0.2s; }
.detail-item-row.taken .detail-item-name {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}
.detail-item-row.taken .items-list-qty { opacity: 0.4; }

.detail-item-actions {
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.detail-item-row:hover .detail-item-actions,
.detail-item-row:focus-within .detail-item-actions { opacity: 1; }
@media (max-width: 600px) { .detail-item-actions { opacity: 1; } }

.detail-item-btn {
  width: 26px; height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.detail-item-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.detail-item-row.taken .detail-item-btn[data-action="taken"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ══════════════════════════════════
   MOVE ITEM POPUP
══════════════════════════════════ */
.move-item-popup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 220px; max-width: 320px;
  max-height: 320px; overflow-y: auto;
  z-index: 9999;
  animation: wiz-in 0.15s ease;
}
.move-item-popup-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 6px 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.move-item-popup-list { display: flex; flex-direction: column; gap: 2px; }
.move-item-popup-group {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  padding: 8px 6px 4px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.move-item-popup-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: none; border: none; border-radius: 6px;
  font-family: var(--font-body); font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.12s;
}
.move-item-popup-option:hover { background: var(--accent-soft); }
.move-item-popup-option svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.move-item-popup-option span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════
   BOX CARD MAP BADGE
══════════════════════════════════ */
.card-map-badge {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent);
  font-size: 11px; font-weight: 600;
}
.card-map-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

/* ══════════════════════════════════
   MAP — view vs edit modes
══════════════════════════════════ */
.map-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 8px; padding: 7px 14px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}
.map-edit-btn:hover { background: var(--accent-hover); }

/* In view mode: hide the toolbar and sidebar; canvas takes full width */
.map-shell.view-mode .map-toolbar { display: none; }
.map-shell.view-mode .map-sidebar { display: none; }
.map-shell.view-mode .map-token { cursor: pointer; }
.map-shell.view-mode .map-token-remove { display: none; }

/* Box-content popup */
.map-box-popup {
  position: fixed; z-index: 1100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 260px; max-width: 340px;
  animation: wiz-in 0.15s ease;
  overflow: hidden;
}
.map-box-popup-img { width: 100%; height: 130px; object-fit: cover; display: block; }
.map-box-popup-body { padding: 12px 14px 14px; }
.map-box-popup-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.map-box-popup-icon { color: var(--accent); display: flex; flex-shrink: 0; }
.map-box-popup-icon svg { width: 18px; height: 18px; }
.map-box-popup-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text); flex: 1; line-height: 1.2;
}
.map-box-popup-location {
  font-size: 11px; color: var(--accent); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.map-box-popup-location svg { width: 10px; height: 10px; flex-shrink: 0; }
.map-box-popup-meta {
  font-size: 11px; color: var(--text-faint);
  margin-bottom: 8px;
}
.map-box-popup-items {
  max-height: 140px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid var(--border); padding-top: 8px;
  margin-bottom: 10px;
}
.map-box-popup-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text);
}
.map-box-popup-item.taken { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.map-box-popup-item-qty {
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  flex-shrink: 0;
}
.map-box-popup-empty {
  font-size: 12px; color: var(--text-faint);
  text-align: center; padding: 8px;
  font-style: italic;
}
.map-box-popup-actions {
  display: flex; gap: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.map-box-popup-btn {
  flex: 1;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 10px; border-radius: 7px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.map-box-popup-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.map-box-popup-btn svg { width: 12px; height: 12px; }
.map-box-popup-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.5); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  z-index: 5;
}
.map-box-popup-close:hover { background: rgba(0,0,0,0.7); }

/* ══════════════════════════════════
   SEARCH HIGHLIGHTS
══════════════════════════════════ */
/* Card-level emphasis when something inside matches */
.box-card.search-match {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 6px 22px rgba(212,118,10,0.18);
  position: relative;
}
.box-card.search-match::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--accent);
  z-index: 1;
}

/* Stronger emphasis if a specific item matches (vs only name/location) */
.box-card.search-match-items {
  box-shadow: 0 0 0 2px var(--accent), 0 8px 28px rgba(212,118,10,0.28);
}

/* Inline mark: highlights the actual matched substring */
.search-mark {
  background: linear-gradient(180deg, transparent 35%, #ffe0a3 35%, #ffe0a3 90%, transparent 90%);
  color: inherit;
  font-weight: 700;
  padding: 0 1px;
  border-radius: 2px;
}
[data-theme="dark"] .search-mark,
:root:not([data-theme="light"]) .search-mark {
  background: linear-gradient(180deg, transparent 35%, rgba(245,200,66,0.45) 35%, rgba(245,200,66,0.45) 90%, transparent 90%);
}

/* Item chip when its name matches — bolder treatment */
.item-chip.highlight {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(212,118,10,0.35);
  transform: scale(1.02);
}
.item-chip.highlight .search-mark {
  background: rgba(255,255,255,0.3);
  color: #fff;
}
.item-chip.highlight .item-chip-qty {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Box card name text — single line with truncation, mark inside */
.box-card-name-text {
  flex: 1; min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-card-name-text .search-mark { display: inline; }

/* Developer tools menu (collapsible, dev accounts only) */
.dev-menu {
  margin-top: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}
.dev-menu summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  list-style: none; user-select: none;
}
.dev-menu summary::-webkit-details-marker { display: none; }
.dev-menu summary svg { color: var(--text-faint); }
.dev-menu[open] summary { border-bottom: 1px solid var(--border); }
.dev-menu-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.dev-btn { width: 100%; justify-content: flex-start; font-size: 13px; }
.dev-note { font-size: 11px; color: var(--text-faint); line-height: 1.5; margin: 2px 0 0; }

/* Generic settings section — collapsible <details> styled to match dev-menu */
.settings-section {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.settings-section summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
  list-style: none; user-select: none;
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary svg { color: var(--text-muted); }
.settings-section[open] summary { border-bottom: 1px solid var(--border); }
.settings-section-body { padding: 8px 14px 14px; display: flex; flex-direction: column; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
}
.settings-row-text {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text);
}
.settings-row-title { font-weight: 600; }
.settings-row-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-row-title-only {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-faint);
  margin: 8px 0 2px;
}
.settings-divider { height: 1px; background: var(--border); margin: 4px 0; }
.settings-note { font-size: 11px; color: var(--text-faint); margin: 10px 0 0; line-height: 1.5; }

/* Toggle switch (used in settings rows) */
.switch {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px;
  display: inline-block;
  cursor: pointer;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.15s;
}
.switch-track::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }

.profile-legal {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px;
}
.profile-legal a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--border);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.profile-legal a:hover { color: var(--accent) !important; border-color: var(--accent); }

.profile-legal-sep { color: var(--text-faint); margin: 0 4px; }

/* Detail item — text column with optional "removed on date" line */
.detail-item-text {
  flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.detail-item-removed {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.detail-item-row.taken .detail-item-removed { color: var(--text-faint); }

/* ══════════════════════════════════
   ROOM PICKER WITH INLINE CREATE
══════════════════════════════════ */
.room-picker { width: 100%; }
.room-picker select { width: 100%; }
.room-picker-create {
  display: flex; gap: 6px; align-items: stretch;
  width: 100%;
}
.room-picker-create input {
  flex: 1;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  outline: none;
}
.room-picker-create input:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-icon-cancel {
  flex: 0 0 36px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-icon-cancel:hover { background: var(--accent-soft); color: var(--text); border-color: var(--border-strong); }

/* Empty state — tinted amber box icon, no container */
.empty-state-icon {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  color: var(--accent);
  opacity: 0.7;
}
.empty-state-icon svg { width: 64px; height: 64px; }

/* ══════════════════════════════════
   DELETE ACCOUNT
══════════════════════════════════ */
.profile-delete-link {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #c0392b;
  font-size: 13px; font-weight: 600;
  text-align: center;
  margin-top: 8px;
  padding: 11px 16px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s;
}
.profile-delete-link:hover { background: rgba(192,57,43,0.08); border-color: #c0392b; }

.delete-account-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.delete-account-options {
  display: flex; flex-direction: column;
  gap: 8px;
}
.delete-account-option {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.delete-account-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.delete-account-option:active { transform: scale(0.99); }
.delete-account-option-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.delete-account-option-icon svg { width: 19px; height: 19px; }
.delete-account-option-icon-soft {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.delete-account-option-icon-warn {
  background: #fff5d6;
  color: #b58800;
  border: 1px solid #e8c34d;
}
[data-theme="dark"] .delete-account-option-icon-warn,
:root:not([data-theme="light"]) .delete-account-option-icon-warn {
  background: #2a230f;
  color: #f5c842;
  border-color: #5a4a1a;
}
.delete-account-option-icon-danger {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #e8a99e;
}
[data-theme="dark"] .delete-account-option-icon-danger,
:root:not([data-theme="light"]) .delete-account-option-icon-danger {
  background: #2a1414;
  color: #ff7866;
  border-color: #5a2828;
}
.delete-account-option-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.delete-account-option-text strong {
  font-size: 14px; font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: -0.1px;
}
.delete-account-option-text span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.delete-account-confirm {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.delete-account-confirm-prompt {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 16px;
}
.delete-account-confirm-prompt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.delete-account-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.delete-account-error {
  margin: 12px 0 0;
  font-size: 12px;
  color: #c0392b;
  text-align: center;
}

/* Strong-danger button variant for permanent deletion */
.btn-danger-strong {
  background: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
}
.btn-danger-strong:hover { background: #a02e23 !important; border-color: #a02e23 !important; }

/* Recovery banner shown when a grace deletion is pending */
.deletion-banner {
  background: #fff5d6;
  border-bottom: 1px solid #e8c34d;
  color: #6b5410;
  padding: 0;
  display: flex; align-items: center;
  font-size: 13px;
}
.deletion-banner > * { padding: 10px 4px; }
.deletion-banner > svg:first-child { padding: 10px 0 10px 24px; flex-shrink: 0; }
.deletion-banner strong { color: #5a4408; }
.deletion-banner-btn {
  margin-left: auto;
  margin-right: 24px;
  background: #b58800;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.deletion-banner-btn:hover { opacity: 0.9; }
.deletion-banner-btn:disabled { opacity: 0.6; cursor: wait; }

[data-theme="dark"] .deletion-banner,
:root:not([data-theme="light"]) .deletion-banner {
  background: #2a230f;
  border-color: #5a4a1a;
  color: #f5c842;
}
[data-theme="dark"] .deletion-banner strong,
:root:not([data-theme="light"]) .deletion-banner strong { color: #ffd966; }

@media (max-width: 600px) {
  .deletion-banner { font-size: 12px; }
  .deletion-banner > svg:first-child { padding-left: 16px; }
  .deletion-banner-btn { margin-right: 14px; padding: 5px 10px; }
}

/* ══════════════════════════════════
   HOUSEHOLD UPGRADES
══════════════════════════════════ */

/* Share link row */
.share-link-row {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.share-link-input {
  flex: 1; min-width: 0;
  font-size: 12px;
  padding: 8px 10px !important;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: text;
}
.share-link-input:focus { outline: 1px solid var(--accent); }

/* Code row — smaller now that the link is the main share method */
.invite-code-mini-label {
  font-size: 11px; color: var(--text-faint);
  margin-right: 2px;
}
.invite-code-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.invite-code-row .invite-code {
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
}
.btn-tiny {
  padding: 5px 10px !important;
  font-size: 12px !important;
  height: auto !important;
}

/* Email invite section */
.invite-email-section {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.invite-email-row {
  display: flex; gap: 6px;
}
.invite-email-row input {
  flex: 1; min-width: 0;
  padding: 9px 12px !important;
  font-size: 13px;
}
.invite-send-btn {
  position: relative;
  display: flex !important; align-items: center; justify-content: center; gap: 8px !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.invite-send-btn .invite-send-premium-badge {
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.invite-send-btn.locked {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.invite-send-btn.locked:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.invite-send-btn.locked .invite-send-premium-badge {
  opacity: 0.95;
}
.invite-email-status {
  margin: 4px 0 0;
  font-size: 12px;
  min-height: 16px;
  text-align: center;
}
.invite-email-status-error   { color: #c0392b; }
.invite-email-status-success { color: #2d8c26; }

/* Member rows — owner badge, two-line text */
.hh-member-count-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: 1px;
}
.hh-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
}
.hh-member-text { flex: 1; min-width: 0; }
.hh-member-name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-member-sub {
  font-size: 11px;
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hh-member-avatar-owner {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border: 2px solid var(--accent-soft);
}
.hh-member-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.hh-member-owner {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
}

/* Household picker — owner badge sits aligned right (before the chevron) */
.household-item-owner {
  display: inline-flex; align-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ══════════════════════════════════
   INVITE PREVIEW MODAL
══════════════════════════════════ */
.invite-preview-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  margin-bottom: 12px;
}
.invite-preview-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-border, var(--accent));
  border-radius: 18px;
  color: var(--accent);
}
.invite-preview-icon svg { width: 32px; height: 32px; }
.invite-preview-name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--text);
  margin-top: 6px;
}
.invite-preview-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.invite-preview-dot { color: var(--text-faint); }
.invite-preview-already {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
}

/* Close button on the household picker screen */
.household-card { position: relative; }
.household-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 5;
}
.household-close-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong, var(--text-faint));
}

/* Household-settings icon button (next to the switcher) */
.household-settings-btn {
  margin-left: -2px;
}

/* Profile feedback button */
.profile-feedback-btn {
  width: 100%;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 14px !important;
  font-size: 13px !important;
}

/* iOS Safari sometimes auto-links text that looks like a name/address.
   Force-reset these on household names + any text containers that might trip it. */
.household-item-name,
.active-household-name,
.hh-member-name,
.hh-member-sub,
.hh-settings-title,
.invite-preview-name,
.box-card-name-text,
.box-card-name {
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
.household-item-name a,
.hh-settings-title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════
   WIZARD — premium unlock button (image)
══════════════════════════════════ */
.wiz-premium-unlock-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.wiz-premium-unlock-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wiz-premium-unlock-btn:active { transform: scale(0.99); }
.wiz-premium-unlock-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5c842, #e8951a);
  color: #1a1200;
  border-radius: 10px;
}
.wiz-premium-unlock-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wiz-premium-unlock-text strong {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}
.wiz-premium-unlock-text span {
  font-size: 12px;
  color: var(--text-muted);
}
.wiz-premium-unlock-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
}
.wiz-premium-unlock-btn:hover .wiz-premium-unlock-chevron {
  color: var(--accent);
}

/* ══════════════════════════════════
   NUDGE TO PUT BACK
══════════════════════════════════ */

/* Inline nudge button next to "Removed on …" */
.detail-item-nudge-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 12px;
  padding: 1px 8px 1px 6px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  vertical-align: 0;
}
.detail-item-nudge-btn:hover { background: var(--accent); color: #fff; }
.detail-item-nudge-btn:active { transform: scale(0.95); }
.detail-item-nudge-btn:disabled { opacity: 0.5; cursor: wait; }

/* Nudge modal */
.nudge-summary {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.nudge-summary-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.nudge-summary-icon svg { width: 18px; height: 18px; }
.nudge-summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nudge-summary-text strong {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--text); letter-spacing: -0.1px;
}
.nudge-summary-text span {
  font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nudge-message-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
#nudge-message {
  width: 100%;
  resize: vertical;
  min-height: 60px;
}
.nudge-default-preview {
  margin: 8px 0 4px;
  font-size: 11px; color: var(--text-faint);
  line-height: 1.45;
}
.nudge-default-preview em { color: var(--text-muted); font-style: italic; }

/* Incoming nudge banner */
.nudge-banner {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  animation: nudgeIn 0.3s ease;
}
@keyframes nudgeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.nudge-banner > svg:first-child { color: var(--accent); flex-shrink: 0; }
.nudge-banner-text {
  flex: 1; min-width: 0; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
}
.nudge-banner-more {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.nudge-banner-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.nudge-banner-btn:hover { opacity: 0.9; }
.nudge-banner-dismiss {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.nudge-banner-dismiss:hover { background: rgba(0,0,0,0.08); color: var(--text); }
@media (max-width: 600px) {
  .nudge-banner { padding: 10px 14px; font-size: 12px; gap: 8px; }
  .nudge-banner-btn { padding: 5px 10px; font-size: 11px; }
}

/* Floating toast */
.app-toast-host {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  pointer-events: none;
}
.app-toast {
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: auto;
  max-width: 90vw;
  text-align: center;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-error { background: #c0392b; color: #fff; }

/* ══════════════════════════════════
   MAP INTRO (first-time experience) — centered popup over blurred backdrop
══════════════════════════════════ */
.map-intro {
  position: absolute; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  overflow-y: auto;
  background: rgba(20, 14, 6, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mapIntroFadeIn 0.2s ease;
}
.map-intro.hidden { display: none; }
@keyframes mapIntroFadeIn { from { opacity: 0; } to { opacity: 1; } }

.map-intro-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 28px 28px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  animation: mapIntroSlideIn 0.25s ease;
}
@keyframes mapIntroSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.map-intro-close {
  position: absolute;
  top: 12px; right: 12px;
}

.map-intro-logo {
  width: 72px; height: 72px;
  object-fit: contain;
  margin-bottom: 2px;
}

.map-intro-titlebar {
  display: flex; align-items: center; gap: 10px;
}
.map-intro-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--text);
}
.map-intro-beta-pill {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.map-intro-tagline {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 360px;
}

.map-intro-blurb {
  margin: 6px 0 4px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
  width: 100%;
}
.map-intro-premium-note {
  margin: 10px 0 4px;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px dashed var(--accent);
  border-radius: 12px;
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
}
.map-intro-premium-note svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.map-intro-premium-note strong { color: var(--text); display: block; margin-bottom: 2px; }
.map-intro-blurb p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.map-intro-blurb p + p {
  margin-top: 6px;
}
.map-intro-blurb a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.map-intro-blurb a:hover { opacity: 0.85; }

.map-intro-cta {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px !important;
  font-size: 14px !important;
  margin-top: 6px;
}

.map-intro-fineprint {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}

@media (max-width: 600px) {
  .map-intro { padding: 18px 14px; }
  .map-intro-card { padding: 30px 22px 22px; }
  .map-intro-title { font-size: 22px; }
  .map-intro-tagline { font-size: 13.5px; }
  .map-intro-blurb p { font-size: 12px; }
  .map-intro-logo { width: 64px; height: 64px; }
}

/* ══════════════════════════════════
   FEEDBACK MODAL
══════════════════════════════════ */
.feedback-intro {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  text-align: center;
}
.feedback-logo {
  width: 56px; height: 56px;
  object-fit: contain;
}
.feedback-personal-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  max-width: 360px;
}
.feedback-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
#feedback-message {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

/* ══════════════════════════════════
   PWA — Update + Install toasts
══════════════════════════════════ */
.app-toast-update,
.app-toast-install {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  background: var(--text);
  color: var(--surface);
}
.app-toast-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.app-toast-btn:hover { opacity: 0.9; }
.app-toast-btn-ghost {
  background: transparent;
  color: var(--surface);
  opacity: 0.7;
}
.app-toast-btn-ghost:hover { opacity: 1; }

/* Hide the install-prompt toast when already running as installed PWA */
@media (display-mode: standalone) {
  .app-toast-install { display: none; }
}

/* ══════════════════════════════════
   PWA — Safe-area padding
══════════════════════════════════ */
/* When installed as a PWA, the app fills the whole screen including under
   notches and the home indicator. Add insets so headers/footers/banners
   stay clear of system UI. */
@supports (padding: env(safe-area-inset-top)) {
  .app-header {
    padding-top: env(safe-area-inset-top, 0);
  }
  body, .screen {
    padding-left:  env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .nudge-banner,
  .deletion-banner {
    padding-top:    calc(10px + env(safe-area-inset-top, 0));
    padding-bottom: 10px;
  }
  .modal-overlay {
    padding-top:    calc(20px + env(safe-area-inset-top, 0));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }
  .app-toast-host {
    top: calc(16px + env(safe-area-inset-top, 0));
  }
}

/* Legal footer on the onboarding landing — small, unobtrusive, but crawler-visible */
.ob-legal-footer {
  position: relative;
  z-index: 1;
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  padding: 20px 16px 28px;
  font-size: 12px;
  flex-wrap: wrap;
}
.ob-legal-footer a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}
.ob-legal-footer a:hover { color: var(--accent); }
.ob-legal-sep { color: var(--text-faint); opacity: 0.5; }

/* ══════════════════════════════════
   Local→Cloud migration modal
══════════════════════════════════ */
.migrate-intro {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
  margin-bottom: 20px;
}
.migrate-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border-radius: 10px;
  color: var(--accent);
}
.migrate-summary {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  padding-top: 4px;
}
.migrate-summary strong { color: var(--text); }

.migrate-target-section {
  margin-bottom: 14px;
}
.migrate-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.migrate-target-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.migrate-target-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
  color: var(--text);
}
.migrate-target-option:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.migrate-target-option.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.migrate-target-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.migrate-target-option.selected .migrate-target-icon { color: var(--accent); }
.migrate-target-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.migrate-target-name {
  font-size: 13.5px; font-weight: 600;
}
.migrate-target-meta {
  font-size: 11.5px; color: var(--text-faint);
}
.migrate-target-radio {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.migrate-target-option.selected .migrate-target-radio {
  border-color: var(--accent);
}
.migrate-target-option.selected .migrate-target-radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 50%;
}
.migrate-new-input {
  margin-top: 6px;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
}
.migrate-new-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.migrate-status {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.migrate-status.hidden { display: none; }
.migrate-status .migrate-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: migrateSpin 0.7s linear infinite;
}
@keyframes migrateSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════
   Keyboard shortcut help
══════════════════════════════════ */
.shortcut-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-desc {
  font-size: 13.5px;
  color: var(--text-muted);
}
.shortcut-section-title {
  margin: 18px 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
}
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 3px 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  line-height: 1.2;
}
.shortcut-row span:last-child { white-space: nowrap; color: var(--text-faint); font-size: 12px; }

/* ══════════════════════════════════
   Modal scroll-lock
══════════════════════════════════ */
/* When any modal is open, lock the body so the blurred content underneath
   doesn't scroll (notably on mobile, where touch-scroll leaked through). */
body.modal-open {
  overflow: hidden;
  /* Prevent iOS rubber-band scroll of the page behind the modal */
  position: fixed;
  width: 100%;
}