* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; max-width: 100vw; overflow-x: hidden !important; margin: 0; padding: 0; }
    html { overflow-x: clip; }
    .dev-mode-only { display: none; }
    body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e9 100%); min-height: 100vh; color: #1B4332; overflow-x: hidden; }
    
    header { background: linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%); color: white; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.3s ease; }
    header.header-hidden { transform: translateY(-100%); }
    .logo { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; }
    .logo span { color: #95D5B2; }
    .stats { display: flex; gap: 10px; font-size: 0.8rem; }
    .stat { background: rgba(255,255,255,0.15); padding: 5px 12px; border-radius: 16px; }
    .auth-area { display: flex; align-items: center; gap: 10px; }
    .auth-btn { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 6px 16px; border-radius: 20px; cursor: pointer; font-weight: 500; font-size: 0.85rem; transition: all 0.2s; }
    .auth-btn:hover { background: rgba(255,255,255,0.3); }
    .user-info { display: flex; align-items: center; gap: 10px; color: white; font-size: 0.85rem; }
    .user-email { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .logout-btn { background: rgba(230,57,70,0.8); color: white; border: none; padding: 5px 12px; border-radius: 15px; cursor: pointer; font-size: 0.75rem; }
    .logout-btn:hover { background: #E63946; }
    
    /* Auth Modal */
    .auth-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
    .auth-modal.show { display: flex; }
    .auth-modal-content { background: white; border-radius: 12px; padding: 24px; width: 90%; max-width: 400px; position: relative; }
    .auth-modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; }
    /* [DEGOOGLE id:CSS-AUTH-MODAL-SPECIFIC] Removed: .auth-modal h2, .auth-tabs, .auth-tab, .auth-tab.active, .auth-divider, .google-btn. None are used by the household modals which share this stylesheet. */
    .auth-form { display: flex; flex-direction: column; gap: 12px; }
    .auth-form input { padding: 12px; border: 2px solid #D8F3DC; border-radius: 8px; font-size: 1rem; }
    .auth-form input:focus { outline: none; border-color: #2D6A4F; }
    .auth-form button[type="submit"] { padding: 12px; background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; }
    .auth-form button[type="submit"]:hover { opacity: 0.9; }
    .auth-error { background: #FEE2E2; color: #DC2626; padding: 10px; border-radius: 6px; font-size: 0.85rem; display: none; }
    .auth-error.show { display: block; }
    
    /* ============ LANDING PAGE STYLES ============ */
    #loading-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e9 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    #loading-overlay .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #D8F3DC;
      border-top-color: #2D6A4F;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    
    #landing-view {
      display: none;
      min-height: 100vh;
      background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    }
    
    .landing-nav {
      position: sticky;
      top: 0;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      border-bottom: 1px solid rgba(45,106,79,0.1);
    }
    .landing-logo {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #1B4332;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .landing-logo svg {
      width: 32px;
      height: 32px;
    }
    .landing-logo span { color: #2D6A4F; }
    .landing-nav-btn {
      background: transparent;
      color: #2D6A4F;
      border: 2px solid #2D6A4F;
      padding: 10px 24px;
      border-radius: 25px;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .landing-nav-btn:hover {
      background: #2D6A4F;
      color: white;
    }
    
    .landing-hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 24px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    @media (max-width: 900px) {
      .landing-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 24px 60px;
      }
      .landing-hero-image { order: -1; }
    }
    .landing-hero h1 {
      font-family: 'Montserrat', sans-serif;
      font-size: 3rem;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 20px;
    }
    @media (max-width: 600px) {
      .landing-hero h1 { font-size: 2rem; }
    }
    .landing-hero h1 span { color: #10b981; }
    .landing-hero p {
      font-size: 1.2rem;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 32px;
    }
    .landing-cta-group {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    @media (max-width: 900px) {
      .landing-cta-group { justify-content: center; }
    }
    .landing-cta-primary {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 14px rgba(16,185,129,0.4);
    }
    .landing-cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(16,185,129,0.5);
    }
    .landing-cta-secondary {
      background: white;
      color: #0f172a;
      border: 2px solid #e2e8f0;
      padding: 16px 32px;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .landing-cta-secondary:hover {
      border-color: #10b981;
      color: #10b981;
    }
    .landing-hero-image {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .landing-hero-image img {
      max-width: 100%;
      height: auto;
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }
    .hero-mockup {
      width: 100%;
      max-width: 500px;
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }
    .hero-mockup-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid #D8F3DC;
    }
    .hero-mockup-header .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .hero-mockup-header .dot:nth-child(1) { background: #ef4444; }
    .hero-mockup-header .dot:nth-child(2) { background: #f59e0b; }
    .hero-mockup-header .dot:nth-child(3) { background: #22c55e; }
    .hero-mockup-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .hero-mockup-card {
      background: #f8fdf9;
      border-radius: 10px;
      padding: 14px;
    }
    .hero-mockup-card h4 {
      font-size: 0.75rem;
      color: #2D6A4F;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hero-mockup-card .tag {
      display: inline-block;
      background: linear-gradient(135deg, #D8F3DC, #B7E4C7);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.7rem;
      color: #1B4332;
      margin: 2px;
    }
    
    .landing-features {
      background: white;
      padding: 80px 24px;
    }
    .landing-features h2 {
      font-family: 'Montserrat', sans-serif;
      text-align: center;
      font-size: 2rem;
      color: #0f172a;
      margin-bottom: 16px;
    }
    .landing-features .subtitle {
      text-align: center;
      color: #64748b;
      font-size: 1.1rem;
      margin-bottom: 50px;
    }
    .features-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .features-grid { grid-template-columns: 1fr; }
    }
    .feature-card {
      background: #f8fafc;
      border-radius: 16px;
      padding: 28px;
      transition: all 0.2s;
      border: 1px solid #e2e8f0;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      border-color: #10b981;
    }
    .feature-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #D8F3DC, #B7E4C7);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      font-size: 1.8rem;
    }
    .feature-card h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.15rem;
      color: #0f172a;
      margin-bottom: 10px;
    }
    .feature-card p {
      font-size: 0.95rem;
      color: #64748b;
      line-height: 1.5;
    }
    
    .landing-footer {
      background: #0f172a;
      color: white;
      padding: 40px 24px;
      text-align: center;
    }
    .landing-footer p {
      color: #94a3b8;
      font-size: 0.9rem;
    }
    .landing-footer a {
      color: #10b981;
      text-decoration: none;
    }
    
    #app-view {
      display: none;
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
    }
    
    /* Sync Status & User Dropdown */
    .sync-status { font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; background: rgba(255,255,255,0.2); }
    .sync-status.syncing { animation: pulse 1s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    
    /* User Avatar */
    .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: #3B82F6; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; text-transform: uppercase; flex-shrink: 0; overflow: hidden; }
    .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .user-avatar.color-1 { background: #3B82F6; }
    .user-avatar.color-2 { background: #10B981; }
    .user-avatar.color-3 { background: #F59E0B; }
    .user-avatar.color-4 { background: #EF4444; }
    .user-avatar.color-5 { background: #8B5CF6; }
    
    /* Household Switcher */
    .context-switcher-wrapper { position: relative; }
    .context-switcher { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); padding: 4px 12px 4px 8px; border-radius: 20px; cursor: pointer; border: none; color: white; font-size: 0.85rem; }
    .context-switcher:hover { background: rgba(255,255,255,0.25); }
    .context-icon { font-size: 1rem; }
    .context-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .context-badge { font-size: 0.6rem; padding: 1px 5px; border-radius: 6px; background: #6366f1; margin-left: 4px; }
    .context-badge.personal { background: #64748b; }
    .context-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 220px; overflow: hidden; z-index: 1001; }
    .context-menu.show { display: block; }
    .context-menu-header { padding: 10px 14px; background: #f8f9fa; font-size: 0.75rem; color: #666; font-weight: 600; text-transform: uppercase; }
    .context-menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 0.9rem; color: #333; border: none; background: none; width: 100%; text-align: left; }
    .context-menu-item:hover { background: #f0f0f0; }
    .context-menu-item.active { background: #D8F3DC; }
    .context-menu-item .icon { font-size: 1.1rem; }
    .context-menu-item .label { flex: 1; }
    .context-menu-item .members { font-size: 0.7rem; color: #888; }
    .context-menu-divider { border-top: 1px solid #eee; margin: 4px 0; }
    .context-menu-action { color: #2D6A4F !important; font-weight: 500; }
    
    .user-dropdown { position: relative; }
    .user-dropdown-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); border: none; color: white; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; }
    .user-dropdown-btn:hover { background: rgba(255,255,255,0.25); }
    .dropdown-arrow { font-size: 0.6rem; }
    .user-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 200px; overflow: hidden; z-index: 1000; }
    .user-menu.show { display: block; }
    .user-menu-header { padding: 12px 16px; background: #f8f9fa; }
    .user-menu-email { display: block; font-weight: 600; color: #1B4332; font-size: 0.9rem; }
    .user-menu-status { font-size: 0.75rem; color: #666; }
    .user-menu hr { margin: 0; border: none; border-top: 1px solid #eee; }
    .user-menu button { width: 100%; padding: 12px 16px; border: none; background: none; text-align: left; cursor: pointer; font-size: 0.9rem; color: #333; }
    .user-menu button:hover { background: #f0f0f0; }
    
    /* Pull to refresh indicator */
    .pull-refresh { position: fixed; top: 0; left: 0; right: 0; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; font-size: 0.85rem; transform: translateY(-100%); transition: transform 0.2s; z-index: 999; }
    .pull-refresh.visible { transform: translateY(0); }
    
    .tabs { display: flex; justify-content: center; gap: 8px; padding: 12px; background: white; border-bottom: 1px solid #e0e0e0; flex-wrap: wrap; }
    .tabs .tab.sortable-ghost { opacity: 0.4; background: #95D5B2; }
    .tabs .tab.sortable-chosen { cursor: grabbing; }
    .tabs .tab { cursor: grab; }
    .manage-subtabs .sortable-ghost { opacity: 0.4; background: #95D5B2 !important; }
    .manage-subtabs button { cursor: grab; }
    .manage-subtabs button.sortable-chosen { cursor: grabbing; }
    .tab { padding: 8px 16px; border: none; background: #f0f0f0; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.85rem; position: relative; }
    .tab.active { background: #2D6A4F; color: white; }
    .tab:hover:not(.active) { background: #D8F3DC; }
    /* Tab drag handles - shown when Dashboard is active */
    .tab .tab-drag-handle { display: none; color: #999; font-size: 0.9rem; margin-right: 4px; }
    .tabs.dashboard-mode .tab:not(.active) .tab-drag-handle { display: inline; }
    .tabs.dashboard-mode .tab:not(.active) { cursor: grab; }
    .tabs.dashboard-mode .tab:not(.active):active { cursor: grabbing; }
    .tab.tab-dragging { opacity: 0.5; }
    /* Old swap target styling removed - using add zone instead */
    
    /* Dashboard add zone - REMOVED: Was confusing UX with two drop zones */
    /* Panel drop target for swapping */
    .panel.chip-drop-target { border: 3px dashed #22c55e !important; background: rgba(34, 197, 94, 0.1) !important; position: relative; }
    .panel.chip-drop-target::after { content: 'Drop to replace'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(34, 197, 94, 0.95); color: white; padding: 10px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; z-index: 100; pointer-events: none; }
    
    /* Sidebar Drop Zones - Only in maximized mode */
    .sidebar-drop-zone { position: fixed; top: 120px; bottom: 0; width: 80px; background: rgba(34, 197, 94, 0.15); border: 3px dashed #22c55e; display: none; align-items: center; justify-content: center; z-index: 200; transition: all 0.2s; }
    .sidebar-drop-zone.left { left: 0; border-left: none; border-radius: 0 12px 12px 0; }
    .sidebar-drop-zone.right { right: 0; border-right: none; border-radius: 12px 0 0 12px; }
    .sidebar-drop-zone.visible { display: flex; }
    .sidebar-drop-zone.drag-over { background: rgba(34, 197, 94, 0.3); border-color: #15803d; width: 100px; }
    .sidebar-drop-zone span { writing-mode: vertical-rl; text-orientation: mixed; color: #15803d; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
    
    /* Unified Chip Nav Bar - replaces old tabs */
    /* FIX-06: Added scroll-padding for mobile nav visibility */
    .chip-nav { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-bottom: 1px solid #e2e8f0; overflow-x: auto; flex-wrap: nowrap; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; z-index: 100; }
    .chip-nav.fixed { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .chip-nav-spacer { display: none; height: 44px; }
    .chip-nav.fixed + .tab-content .chip-nav-spacer, .chip-nav.fixed ~ #inventory-tab .dashboard { margin-top: 60px; }
    .nav-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; background: white; border: 1px solid #d1d5db; border-radius: 20px; font-size: 0.85rem; color: #374151; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-weight: 500; touch-action: none; /* Prevent scroll while dragging */ user-select: none; -webkit-user-select: none; }
    .nav-chip[draggable="true"] { cursor: grab; }
    .nav-chip[draggable="true"]:active { cursor: grabbing; }
    .nav-chip.dragging { opacity: 0.5; transform: scale(0.95); }
    .nav-chip:hover { background: #f0fdf4; border-color: #86efac; }
    .nav-chip.active { background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; border-color: #2D6A4F; }
    .nav-chip.greyed { background: #e5e7eb; color: #9ca3af; border-color: #d1d5db; opacity: 0.7; }
    .nav-chip.greyed:hover { background: #f3f4f6; }
    .nav-chip.greyed .chip-handle { display: none; }
    .nav-chip .chip-handle { cursor: grab; color: #9ca3af; font-size: 0.7rem; margin-right: 2px; }
    .nav-chip.active .chip-handle { color: rgba(255,255,255,0.6); }
    .nav-chip .chip-handle:active { cursor: grabbing; }
    .nav-chip.dragging { opacity: 0.3; cursor: grabbing; transform: scale(0.9); }
    .nav-chip.in-layout { opacity: 0.4; pointer-events: none; }
    .nav-chip.hidden-on-dashboard { display: none; }
    
    /* ===== SNAP LAYOUT PICKER (floating centered) ===== */
    .snap-picker {
      display: none;
      position: fixed;
      top: 130px; /* Below header (60px) + chip nav (50px) + spacing */
      left: 50%;
      transform: translateX(-50%);
      z-index: 1001;
      align-items: center;
      gap: 8px;
      background: rgba(45, 106, 79, 0.95);
      padding: 6px 12px;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    .snap-picker.visible { display: flex; }
    .snap-picker.scrolled { top: 58px; } /* Below fixed chip nav when scrolled */
    .snap-picker-label { font-size: 0.75rem; color: rgba(255,255,255,0.9); white-space: nowrap; font-weight: 500; }
    .snap-layout-options { display: flex; gap: 8px; }
    .snap-layout-option {
      display: flex;
      gap: 2px;
      padding: 5px;
      border-radius: 6px;
      background: rgba(255,255,255,0.15);
      cursor: pointer;
      transition: all 0.15s;
    }
    .snap-layout-option:hover { background: rgba(255,255,255,0.3); }
    .snap-layout-option.active { background: rgba(255,255,255,0.4); outline: 2px solid white; }
    .snap-mini-zone {
      background: rgba(255,255,255,0.4);
      border-radius: 3px;
      transition: all 0.1s;
    }
    .snap-mini-zone.highlight { background: white; }
    /* Zone sizes - taller for easier drop targets */
    .snap-layout-option[data-layout="full"] .snap-mini-zone { width: 40px; height: 34px; }
    .snap-layout-option[data-layout="left-main"] .snap-mini-zone.left { width: 12px; height: 34px; }
    .snap-layout-option[data-layout="left-main"] .snap-mini-zone.main { width: 28px; height: 34px; }
    .snap-layout-option[data-layout="main-right"] .snap-mini-zone.main { width: 28px; height: 34px; }
    .snap-layout-option[data-layout="main-right"] .snap-mini-zone.right { width: 12px; height: 34px; }
    .snap-layout-option[data-layout="split"] .snap-mini-zone { width: 18px; height: 34px; }
    .snap-layout-option[data-layout="three-col"] .snap-mini-zone { width: 12px; height: 34px; }
    
    /* Screen drop zones overlay */
    .snap-drop-zones {
      position: fixed;
      top: 130px; /* Below header + chip nav */
      transition: top 0.2s ease;
      left: 20px;
      right: 20px;
      bottom: 20px;
      display: none;
      gap: 8px;
      z-index: 100;
      pointer-events: none;
    }
    .snap-drop-zones.visible { display: flex; pointer-events: auto; }
    .snap-drop-zones.scrolled { top: 60px; } /* When chip nav is fixed at top */
    .snap-drop-zone {
      border: 3px dashed #86efac;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #52796F;
      font-size: 0.9rem;
      background: rgba(45, 106, 79, 0.03);
      transition: all 0.15s;
    }
    .snap-drop-zone.highlight {
      border-color: #2D6A4F;
      background: rgba(45, 106, 79, 0.12);
      color: #1B4332;
    }
    
    /* Hide snap picker on mobile */
    @media (max-width: 768px) {
      .snap-picker { display: none !important; }
      .snap-drop-zones { display: none !important; }
    }
    
    /* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
    .bottom-nav-bar {
      display: none; /* Hidden on desktop */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      border-top: 1px solid #D8F3DC;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
      z-index: 1000;
      justify-content: space-around;
    }
    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px 8px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
      min-width: 50px;
      background: none;
      border: none;
      color: #6b7280;
    }
    .bottom-nav-item:hover { background: #D8F3DC; }
    .bottom-nav-item.active { color: #2D6A4F; }
    .bottom-nav-item.active .bottom-nav-icon { background: #D8F3DC; }
    .bottom-nav-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      margin-bottom: 2px;
      font-size: 1.1rem;
    }
    .bottom-nav-label {
      font-size: 0.65rem;
      font-weight: 500;
    }
    
    /* ===== CONSOLIDATED MANAGE TABS (4 tabs) ===== */
    .manage-tabs-consolidated {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .manage-main-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.8rem;
      font-weight: 600;
      background: #ddd;
      color: #333;
      border: none;
    }
    .manage-main-tab:hover { background: #c5c5c5; }
    .manage-main-tab.active { background: #2D6A4F; color: white; }
    .manage-main-tab-icon { font-size: 1.2rem; display: block; margin-bottom: 2px; }
    
    /* Sub-pills for Items tab */
    .manage-sub-pills {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .manage-sub-pill {
      padding: 6px 14px;
      background: #f1f5f9;
      border-radius: 20px;
      font-size: 0.8rem;
      cursor: pointer;
      border: 1px solid #e2e8f0;
      transition: all 0.2s;
      font-weight: 500;
      color: #475569;
    }
    .manage-sub-pill:hover { background: #D8F3DC; border-color: #86efac; }
    .manage-sub-pill.active { background: #2D6A4F; color: white; border-color: #2D6A4F; }
    
    /* Mobile: show bottom nav, hide chip nav */
    @media (max-width: 768px) {
      .bottom-nav-bar { display: flex; bottom: 0; padding-bottom: 10px; z-index: 99999; } /* Covers watermark */
      .chip-nav { display: none !important; }
      #app-view { padding-bottom: 80px; } /* Space for bottom nav */
    }
    
    /* Tablet (2-column): show chip nav, hide grab handles */
    @media (min-width: 769px) and (max-width: 1100px) {
      .drag-handle { display: none !important; }
      .panel-header { padding-left: 8px; } /* Reduce left padding since no handle */
    }
    
    /* Split column layout (not overlay) */
    .split-layout { display: flex; height: calc(100vh - 110px); }
    .split-layout .main-content { flex: 1; overflow-y: auto; }
    .split-layout .side-column { width: 350px; min-width: 280px; max-width: 400px; border-left: 2px solid #e2e8f0; background: #f8fafc; overflow-y: auto; display: flex; flex-direction: column; }
    .split-layout.side-left .side-column { order: -1; border-left: none; border-right: 2px solid #e2e8f0; }
    .side-column-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: white; border-bottom: 1px solid #e2e8f0; }
    .side-column-header h4 { margin: 0; font-size: 0.95rem; color: #1B4332; }
    .side-column-close { background: transparent; color: #9ca3af; border: 1px solid #e5e7eb; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: all 0.15s; }
    .side-column-close:hover { background: #f3f4f6; color: #6b7280; }
    .side-column-body { flex: 1; overflow-y: auto; padding: 12px; }
    
    /* Sidebar Panel */
    .view-sidebar { position: fixed; top: 60px; bottom: 0; width: 320px; background: #f8fafc; border: 1px solid #e2e8f0; display: none; flex-direction: column; z-index: 150; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
    .view-sidebar.left { left: 0; border-left: none; }
    .view-sidebar.right { right: 0; border-right: none; box-shadow: -2px 0 10px rgba(0,0,0,0.1); }
    .view-sidebar.active { display: flex; }
    .view-sidebar .sidebar-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; min-height: 48px; }
    .view-sidebar .sidebar-header .sidebar-title { font-size: 0.75rem; color: #64748b; text-transform: uppercase; font-weight: 600; margin-right: auto; }
    .view-sidebar .sidebar-close { width: 28px; height: 28px; border: none; background: #fee2e2; color: #dc2626; border-radius: 6px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
    .view-sidebar .sidebar-close:hover { background: #fecaca; }
    .view-sidebar .sidebar-body { flex: 1; overflow-y: auto; padding: 12px; }
    
    /* Sidebar Chips */
    .sidebar-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
    .sidebar-chip { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; font-size: 0.75rem; font-weight: 500; color: #334155; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
    .sidebar-chip:hover { background: #f1f5f9; border-color: #cbd5e1; }
    .sidebar-chip.active { background: #2D6A4F; color: white; border-color: #2D6A4F; }
    .sidebar-chip .chip-handle { display: flex; align-items: center; cursor: grab; color: #94a3b8; font-size: 0.7rem; margin-right: 2px; }
    .sidebar-chip .chip-handle:active { cursor: grabbing; }
    .sidebar-chip.no-handle .chip-handle { display: none; }
    .sidebar-chip.active .chip-handle { display: none; }
    
    /* Adjust main content when sidebar is open */
    body.has-sidebar-left .app-container { margin-left: 320px; }
    body.has-sidebar-right .app-container { margin-right: 320px; }
    @media (max-width: 900px) {
      .view-sidebar { width: 280px; }
      body.has-sidebar-left .app-container { margin-left: 280px; }
      body.has-sidebar-right .app-container { margin-right: 280px; }
    }
    @media (max-width: 700px) {
      .view-sidebar { width: 100%; left: 0; right: 0; }
      body.has-sidebar-left .app-container, body.has-sidebar-right .app-container { margin-left: 0; margin-right: 0; display: none; }
    }
    
    /* Tab bar drop zone - HIDDEN by default, shown only when dragging panel */
    .tab-drop-zone { display: none; padding: 12px 20px; border: 3px dashed #F59E0B; border-radius: 25px; color: #B45309; font-size: 0.9rem; font-weight: 600; transition: all 0.2s; background: #FEF3C7; margin-left: 8px; white-space: nowrap; }
    .tab-drop-zone.visible { display: flex; align-items: center; justify-content: center; animation: pulse-zone 1s infinite; min-width: 140px; }
    .tab-drop-zone.drag-over { border-color: #2D6A4F; background: #D8F3DC; color: #1B4332; animation: none; transform: scale(1.05); border-style: solid; }
    @keyframes pulse-zone { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    /* Larger drop zone on tablets for easier touch targeting */
    @media (min-width: 601px) and (max-width: 1024px) {
      .tab-drop-zone { padding: 18px 28px; font-size: 1.1rem; border-width: 4px; min-width: 160px; }
      .tab-drop-zone.visible { min-height: 56px; }
    }
    
    /* Dragging states */
    .panel.being-dragged { opacity: 0.5; transform: scale(0.98); }
    .panel.drag-over { border: 3px dashed #2D6A4F; background: #D8F3DC; box-shadow: 0 0 20px rgba(45,106,79,0.3); }
    .tab.being-dragged { opacity: 0.5; }
    
    /* Hide all the button clutter */
    .panel-maximize-btn { background: #2D6A4F; color: white; border: none; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; flex-shrink: 0; margin-left: 8px; }
    .panel-maximize-btn:hover { opacity: 1; }
    .panel-to-tab-btn, .tab-to-panel-btn { display: none !important; }
    
    .tab-content { display: none; width: 100%; }
    .tab-content.active { display: block; width: 100%; }
    
    /* Fullscreen panel view - displays panel content full-width */
    .fullscreen-panel-view {
      width: 100%;
      padding: 16px;
    }
    .fullscreen-panel-view .panel {
      max-height: none !important;
      overflow: visible !important;
      box-shadow: none !important;
      border-radius: 12px;
    }
    .fullscreen-panel-view .panel-header {
      position: sticky;
      top: 0;
      background: white;
      z-index: 10;
      padding: 12px 16px;
      border-radius: 12px 12px 0 0;
      margin-bottom: 0;
    }
    .fullscreen-panel-view .back-to-dashboard {
      display: none;
    }
    .fullscreen-panel-view .drag-handle { display: none !important; }
    .fullscreen-panel-view .panel-maximize-btn { display: none !important; }
    
    .command-section { max-width: 800px; margin: 16px auto; padding: 0 16px; }
    .command-bar { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 4px 16px rgba(45,106,79,0.1); }
    .command-bar h2 { font-family: 'Montserrat'; margin-bottom: 8px; font-size: 0.95rem; color: #2D6A4F; }
    .add-destination { display: flex; gap: 16px; margin-bottom: 10px; font-size: 0.85rem; }
    .add-destination label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
    .add-destination input { accent-color: #2D6A4F; }
    .suggestions { position: absolute; top: 100%; left: 0; right: 80px; background: white; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .suggestions.show { display: block; }
    .suggestion-item { padding: 10px 14px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f0f0f0; }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: #D8F3DC; }
    .suggestion-item .sug-name { font-weight: 500; color: #1F2937; }
    .suggestion-item .sug-cat { font-size: 0.65rem; padding: 2px 6px; border-radius: 6px; background: #f0f0f0; color: #666; text-transform: capitalize; }
    .suggestion-item .sug-stock { font-size: 0.6rem; padding: 2px 5px; border-radius: 4px; background: #10B981; color: white; }
    .suggestion-item.add-new { background: #EFF6FF; color: #2563EB; font-weight: 500; justify-content: center; }
    .suggestion-item.add-new:hover { background: #DBEAFE; }
    /* FIX-08: Added align-items:flex-start to prevent button stretching */
    .input-group { display: flex; gap: 8px; position: relative; align-items: flex-start; }
    .input-group input { flex: 1; padding: 10px 14px; border: 2px solid #D8F3DC; border-radius: 8px; font-size: 0.9rem; }
    .input-group input:focus { outline: none; border-color: #2D6A4F; }
    /* FIX-08: Max-height caps button to prevent vertical stretching */
    .input-group button { padding: 10px 20px; background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; max-height: 44px; align-self: flex-start; }
    .hints { margin-top: 8px; font-size: 0.75rem; color: #666; }
    .hints code { background: #D8F3DC; padding: 2px 5px; border-radius: 3px; }
    .feedback { margin-top: 8px; padding: 8px; border-radius: 6px; display: none; font-size: 0.85rem; }
    .feedback.success { display: block; background: #D8F3DC; color: #1B4332; }
    
    .dashboard { width: 100%; max-width: 100%; margin: 16px auto 20px; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; box-sizing: border-box; overflow: hidden; }
    .panel { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: relative; overflow: hidden; min-width: 0; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
    .panel.panel-full-mode { padding: 20px; }
    .panel.panel-full-mode .panel-content-wrapper { max-height: none !important; overflow: visible; }
    .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #D8F3DC; }
    .panel-header h3 { font-family: 'Montserrat'; color: #2D6A4F; font-size: 1rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .panel-header .count { background: #2D6A4F; color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; flex-shrink: 0; }
    .drag-handle { display: inline-block; color: #999; font-size: 1.2rem; cursor: grab; padding: 8px; margin: -8px 4px -8px -8px; touch-action: none; user-select: none; flex-shrink: 0; transition: color 0.15s, transform 0.15s; }
    .drag-handle:hover { color: #2D6A4F; transform: scale(1.1); }
    .drag-handle:active { cursor: grabbing; color: #1B4332; transform: scale(0.95); }
    .panel { transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border 0.15s ease; }
    .panel.dragging { opacity: 0.7; transform: scale(0.98) rotate(-1deg); box-shadow: 0 8px 25px rgba(45,106,79,0.25); z-index: 100; border: 2px dashed #2D6A4F; }
    .panel.drag-over { border-left: 4px solid #2D6A4F; background: linear-gradient(90deg, rgba(45,106,79,0.08) 0%, transparent 30%); }

    @media (max-width: 1200px) { .dashboard { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
    @media (max-width: 900px) { .dashboard { grid-template-columns: repeat(2, 1fr); } } /* Tablet: force 2 columns */
    @media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; } } /* Mobile: single column */
    @media (max-width: 600px) { .dashboard { grid-template-columns: 1fr; } }
    
    .category { margin-bottom: 16px; padding: 10px; background: #f8fdf9; border-radius: 8px; }
    .category-name { font-weight: 600; color: #40916C; margin-bottom: 6px; font-size: 0.75rem; text-transform: uppercase; }
    .items { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
    
    /* ===== UNIFIED CHIP v4 (Card Style) ===== */
    .chip { 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      padding: 10px 12px; 
      border-radius: 8px; 
      font-size: 0.85rem; 
      transition: all 0.15s ease;
      background: white;
      border: 1px solid #e0e0e0;
      min-width: 180px;
    }
    .chip:hover { 
      border-color: #2D6A4F; 
      box-shadow: 0 2px 6px rgba(45,106,79,0.1); 
    }
    
    /* Chip info block (legacy - for cupboard/inventory chips) */
    .chip .chip-info { 
      flex: 1; 
      min-width: 0; 
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .chip .chip-info .chip-top { 
      display: flex; 
      align-items: center; 
      gap: 6px; 
      flex-wrap: wrap;
    }
    .chip .chip-info .chip-top .name { 
      font-weight: 600; 
      font-size: 0.8rem; 
      color: #1F2937; 
      text-transform: capitalize; 
      cursor: pointer;
    }
    .chip .chip-info .chip-top .name:hover { color: #2D6A4F; }
    .chip .chip-info .chip-top .stock-badge { 
      background: #10B981; 
      color: white; 
      font-size: 0.5rem; 
      padding: 1px 4px; 
      border-radius: 3px; 
      white-space: nowrap;
    }
    .chip .chip-info .chip-top .stock-badge.no-stock { background: #DC2626; }
    .chip .chip-info .chip-top .stock-badge.low-stock { background: #F59E0B; }
    .chip .chip-info .cat-pill { 
      display: inline-block; 
      padding: 1px 6px; 
      border-radius: 8px; 
      font-size: 0.6rem; 
      font-weight: 500; 
      background: #f0f0f0; 
      color: #666;
      text-transform: capitalize;
      width: fit-content;
    }
    /* Chip controls (legacy - right side) */
    .chip .chip-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    /* Stacked chip layout (for Quick Shop) - COMPACT REDESIGN */
    .chip.stacked {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      width: 100%;
      box-sizing: border-box;
    }
    .chip .chip-name-row { 
      display: flex; 
      flex-direction: column;
      align-items: flex-start; 
      gap: 3px; 
      flex: 1;
      min-width: 0;
    }
    .chip .chip-name-row .name { 
      font-weight: 600; 
      font-size: 0.85rem; 
      color: #1F2937; 
      text-transform: capitalize; 
      cursor: pointer;
      line-height: 1.2;
    }
    .chip .chip-name-row .name:hover { color: #2D6A4F; }
    .chip .chip-name-row .stock-badge { 
      background: #10B981; 
      color: white; 
      font-size: 0.5rem; 
      padding: 1px 4px; 
      border-radius: 3px; 
      white-space: nowrap;
      font-weight: 600;
    }
    .chip .chip-name-row .stock-badge.no-stock { background: #DC2626; }
    .chip .chip-name-row .stock-badge.low-stock { background: #F59E0B; }
    /* Chip button row (for stacked layout) - now inline */
    .chip.stacked .chip-btn-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    /* Chip tag row hidden in compact mode - category shown inline */
    .chip.stacked .chip-tag-row { display: none; }
    .chip.stacked .chip-tag-row .cat-pill { 
      display: inline-block; 
      padding: 1px 6px; 
      border-radius: 8px; 
      font-size: 0.6rem; 
      font-weight: 500; 
      text-transform: capitalize;
      width: fit-content;
    }
    
    /* Chip controls (within btn-row for stacked layout) */
    .chip.stacked .chip-btn-row .chip-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      justify-content: flex-end;
    }
    
    /* Pantry chip (green border accent) */
    .chip.pantry { border-left: 3px solid #10B981; background: linear-gradient(135deg, #f8fdf9, #f0fdf4); }
    .chip.pantry .qty { color: #2D6A4F; }
    
    /* Shopping chip (yellow border accent) */
    .chip.shopping { border-left: 3px solid #F59E0B; background: linear-gradient(135deg, #fffbeb, #fef3c7); }
    .chip.shopping .qty { color: #92400E; }
    .chip.shopping.picked { border-left-color: #10B981; background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
    .chip.shopping.picked .name { text-decoration: line-through; color: #64748b; }
    
    /* Quick ideas chip (neutral) */
    .chip.quick { border-left: 3px solid #94A3B8; background: #f8fafc; }
    .chip.quick .qty { color: #475569; }
    
    /* Quantity controls group - COMPACT */
    .chip .qty-controls { display: flex; align-items: center; gap: 6px; background: transparent; padding: 0; border-radius: 0; border: none; }
    .chip .qty { font-weight: 600; min-width: 40px; text-align: center; font-size: 0.75rem; color: #374151; }
    /* Compact circular buttons like ingredient cards */
    .chip .qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d1d5db; background: white; color: #374151; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
    .chip .qty-btn:hover { transform: scale(1.05); }
    .chip .qty-btn.minus { background: white; color: #374151; }
    .chip .qty-btn.minus:hover { background: #FEE2E2; border-color: #EF4444; color: #B91C1C; }
    .chip .qty-btn.plus { background: white; color: #374151; }
    .chip .qty-btn.plus:hover { background: #D8F3DC; border-color: #2D6A4F; color: #1B4332; }
    
    /* Checkbox (for shopping/list items) - COMPACT */
    .chip .checkbox { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #D97706; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
    .chip .checkbox:hover { border-color: #B45309; }
    .chip .checkbox.checked { background: #10B981; border-color: #10B981; }
    .chip .checkbox.checked::after { content: '\2713'; color: white; font-size: 0.7rem; font-weight: bold; }
    .chip.quick .checkbox { border-color: #94A3B8; }
    
    /* Remove button - COMPACT */
    .chip .remove-btn { width: 24px; height: 24px; border-radius: 50%; background: transparent; color: #9CA3AF; border: none; font-size: 1rem; cursor: pointer; opacity: 0.6; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
    .chip .remove-btn:hover { opacity: 1; color: #DC2626; }
    
    /* Alert badges (inline with name) */
    .chip .alert-badge { font-size: 0.55rem; font-weight: 700; padding: 2px 4px; border-radius: 3px; cursor: pointer; }
    .chip .alert-badge.expired { background: #DC2626; color: white; animation: chip-pulse 1s infinite; }
    .chip .alert-badge.urgent { background: #DC2626; color: white; }
    .chip .alert-badge.soon { background: #F59E0B; color: white; }
    .chip .alert-badge.low { background: #F59E0B; color: white; }
    @keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    
    /* Chip meta row for category + expiry */
    .chip .chip-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
    
    /* Expiry date badge */
    .chip .expiry-date-badge { font-size: 0.65rem; font-weight: 500; padding: 2px 6px; border-radius: 10px; cursor: pointer; background: #E5E7EB; color: #374151; }
    .chip .expiry-date-badge.urgent { background: #FEE2E2; color: #DC2626; }
    .chip .expiry-date-badge.expired { background: #DC2626; color: white; }
    .chip .expiry-date-badge.soon { background: #FEF3C7; color: #B45309; }
    .chip .expiry-date-badge.ok { background: #D1FAE5; color: #059669; }
    
    /* Storage badge */
    .chip .storage-badge { font-size: 0.55rem; font-weight: 600; padding: 2px 4px; border-radius: 3px; text-transform: uppercase; }
    .chip .storage-badge.fridge { background: #DBEAFE; color: #2563EB; }
    .chip .storage-badge.freezer { background: #E0E7FF; color: #4338CA; }
    .chip .storage-badge.cupboard { background: #FEF3C7; color: #B45309; }
    
    /* Mobile adjustments for chips - COMPACT */
    @media (max-width: 767px) {
      .chip { padding: 10px 12px; font-size: 0.85rem; min-width: 0; width: 100%; }
      .chip .qty-btn { width: 32px; height: 32px; font-size: 1rem; }
      .chip .checkbox { width: 24px; height: 24px; }
      .chip .remove-btn { width: 28px; height: 28px; font-size: 1.1rem; }
      .chip .chip-name-row .name { font-size: 0.9rem; }
      .chip .qty { min-width: 50px; font-size: 0.8rem; }
    }
    
    /* ===== LEGACY .item-tag (kept for backwards compatibility) ===== */
    .item-tag { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #D8F3DC, #B7E4C7); padding: 6px 10px; border-radius: 14px; font-size: 0.8rem; margin-bottom: 2px; flex-shrink: 0; }
    .item-tag .qty { font-weight: 600; color: #2D6A4F; }
    .item-tag .remove { background: #E63946; color: white; border: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: 0.7rem; }
    .item-tag .storage { font-size: 0.6rem; padding: 1px 4px; border-radius: 3px; margin-left: 2px; }
    .item-tag .storage.fridge { background: #DBEAFE; color: #2563EB; }
    .item-tag .storage.freezer { background: #E0E7FF; color: #4338CA; }
    .item-tag .storage.cupboard { background: #FEF3C7; color: #B45309; }
    .item-tag.low-stock { border: 2px solid #F59E0B; background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
    .item-tag .low-badge { background: #F59E0B; color: white; font-size: 0.6rem; padding: 1px 4px; border-radius: 3px; margin-left: 3px; }
    /* Expiry badges */
    .item-tag .expiry-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 10px; margin-left: 4px; font-weight: 500; white-space: nowrap; }
    .item-tag .expiry-badge.expired { background: #DC2626; color: white; animation: pulse-red 1s infinite; }
    .item-tag .expiry-badge.expires-today { background: #DC2626; color: white; }
    .item-tag .expiry-badge.expires-soon { background: #F59E0B; color: white; }
    .item-tag .expiry-badge.expires-week { background: #FEF3C7; color: #B45309; }
    .item-tag .expiry-badge.expires-ok { background: #E5E7EB; color: #6B7280; }
    @keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    .item-tag.has-expiry-urgent { border-left: 3px solid #DC2626; }
    .item-tag .adjust { background: #2D6A4F; color: white; border: none; border-radius: 50%; cursor: pointer; font-weight: bold; flex-shrink: 0; }
    .item-tag .adjust.plus, .item-tag .adjust.minus { min-width: 20px; width: 20px; height: 20px; font-size: 0.85rem; }
    
    /* Unified Chip: Clickable name */
    .item-tag .item-name { cursor: pointer; transition: color 0.15s; }
    .item-tag .item-name:hover { color: #1B4332; text-decoration: underline; }
    
    /* Unified Chip: Storage abbreviation badges */
    .item-tag .storage-abbr { font-size: 0.6rem; font-weight: 600; padding: 2px 5px; border-radius: 4px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .item-tag .storage-abbr.fridge { background: #DBEAFE; color: #2563EB; }
    .item-tag .storage-abbr.freezer { background: #E0E7FF; color: #4338CA; }
    .item-tag .storage-abbr.cupboard, .item-tag .storage-abbr.pantry { background: #FEF3C7; color: #B45309; }
    /* Mixed storage (fri+fzr, etc) */
    .item-tag .storage-abbr.mixed { background: linear-gradient(90deg, #DBEAFE 50%, #E0E7FF 50%); color: #4338CA; }
    
    /* Unified Chip: Expiry indicators */
    .item-tag .expiry-indicator { font-size: 0.6rem; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-left: 4px; cursor: pointer; text-transform: uppercase; }
    .item-tag .expiry-indicator.expired { background: #DC2626; color: white; animation: pulse-red 1s infinite; }
    .item-tag .expiry-indicator.urgent { background: #F59E0B; color: white; }
    .item-tag .expiry-indicator.warning { background: #FEF3C7; color: #B45309; }
    .item-tag .expiry-indicator:hover { opacity: 0.85; }
    
    /* Unified Chip: Expired item styling */
    .item-tag.has-expired { border-left: 3px solid #DC2626; background: linear-gradient(135deg, #FEE2E2, #FECACA); }
    
    /* Unified Chip: Quick Shop status variants */
    .item-tag.stocked { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); border: 1px solid #10B981; }
    .item-tag.stocked .qty { color: #059669; }
    .item-tag.stocked .item-name { color: #065F46; }
    .item-tag.needs-buying { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border: 1px solid #F59E0B; }
    .item-tag.needs-buying .qty { color: #92400E; }
    .item-tag.needs-buying .item-name { color: #78350F; }
    @media (max-width: 767px) {
      .item-tag .adjust.plus, .item-tag .adjust.minus { min-width: 36px; width: 36px; height: 36px; font-size: 1.2rem; }
    }
    
    /* Filter Chips for What to Cook */
    .filter-bar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: #f8f9fa; border-radius: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    /* FIX-03: Increased padding for 44px min touch target height */
    .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 18px; font-size: 0.75rem; cursor: pointer; font-weight: 500; border: 1.5px solid #ddd; background: white; transition: all 0.15s; user-select: none; min-height: 36px; }
    .filter-chip:hover { border-color: #aaa; background: #f0f0f0; }
    .filter-chip.active { background: #2D6A4F; color: white; border-color: #2D6A4F; }
    .filter-chip.active-orange { background: #F59E0B; color: white; border-color: #F59E0B; }
    .filter-chip.active-purple { background: #8B5CF6; color: white; border-color: #8B5CF6; }
    .filter-chip.more-btn { background: #f3f4f6; border-style: dashed; }
    .filter-chip.more-btn:hover { background: #e5e7eb; }
    .expanded-filters { background: #fafafa; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; padding: 10px; display: none; }
    .expanded-filters.open { display: block; }
    .filter-section { margin-bottom: 8px; }
    .filter-section:last-child { margin-bottom: 0; }
    .filter-section-label { font-size: 0.65rem; color: #888; margin-bottom: 4px; font-weight: 500; }
    .filter-section .tag-group { display: flex; flex-wrap: wrap; gap: 5px; }
    .filter-tag { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 14px; font-size: 0.68rem; cursor: pointer; font-weight: 500; transition: all 0.15s; border: 2px solid transparent; }
    .filter-tag:hover { transform: scale(1.02); }
    .filter-tag.active { border-color: currentColor; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
    .filter-tag.tag-orange { background: #FFEDD5; color: #EA580C; }
    .filter-tag.tag-blue { background: #DBEAFE; color: #2563EB; }
    .filter-tag.tag-red { background: #FEE2E2; color: #DC2626; }
    .filter-tag.tag-pink { background: #FCE7F3; color: #DB2777; }
    .filter-tag.tag-green { background: #D1FAE5; color: #059669; }
    .filter-tag.tag-purple { background: #EDE9FE; color: #7C3AED; }
    .filter-tag.tag-yellow { background: #FEF3C7; color: #D97706; }
    
    .recipe-grid { display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }
    .recipe-card { background: #f8f9fa; border-radius: 8px; padding: 10px; border: 2px solid transparent; }
    .recipe-card[draggable="true"] { cursor: grab; }
    .recipe-card[draggable="true"]:active { cursor: grabbing; }
    
    /* Drop zone styling for drag-and-drop */
    /* Drop zone for drag-and-drop */
    .recipe-drop-zone { 
      display: none;
      padding: 25px 15px; 
      margin-bottom: 10px; 
      border: 2px dashed #8B5CF6; 
      border-radius: 8px; 
      background: rgba(139, 92, 246, 0.1); 
      text-align: center; 
      color: #8B5CF6; 
      font-weight: 600; 
      font-size: 0.85rem; 
    }
    .recipe-drop-zone.visible { 
      display: block;
    }
    .recipe-drop-zone.active { 
      border-style: solid; 
      background: rgba(139, 92, 246, 0.3); 
      transform: scale(1.02); 
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }
    .recipe-card.drop-target { 
      border: 2px dashed #8B5CF6 !important; 
      background: rgba(139, 92, 246, 0.15) !important;
      transform: scale(1.02);
    }
    .recipe-card:hover { border-color: #2D6A4F; }
    .recipe-card h4 { font-family: 'Montserrat'; margin-bottom: 4px; color: #1B4332; font-size: 0.9rem; }
    .recipe-meta { font-size: 0.75rem; color: #666; margin-bottom: 6px; }
    .match-bar { height: 5px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
    .match-fill { height: 100%; background: linear-gradient(90deg, #40916C, #2D6A4F); }
    .match-text { font-size: 0.7rem; color: #40916C; font-weight: 600; margin-bottom: 6px; }
    .recipe-ingredients { font-size: 0.75rem; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
    .recipe-ingredients span { display: inline-block; margin: 1px; padding: 2px 5px; border-radius: 3px; }
    .recipe-ingredients .have { background: #D8F3DC; color: #2D6A4F; }
    .recipe-ingredients .need { background: #FEF3C7; color: #B45309; }
    .recipe-actions { display: flex; gap: 5px; }
    .recipe-actions button { flex: 1; padding: 6px; border: none; border-radius: 5px; cursor: pointer; font-weight: 500; font-size: 0.75rem; }
    .btn-cook { background: #2D6A4F; color: white; }
    .btn-add-missing { background: #D8F3DC; color: #2D6A4F; }
    
    .shopping-list { display: flex; flex-direction: column; gap: 5px; }
    .shopping-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: #f8f9fa; border-radius: 5px; font-size: 0.85rem; }
    .shopping-item:hover { background: #D8F3DC; }
    .shopping-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2D6A4F; }
    .shopping-item label { flex: 1; cursor: pointer; }
    .shopping-item.checked label { text-decoration: line-through; color: #888; }
    .shopping-item .add-to-stock { background: #40916C; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.7rem; }
    .clear-checked { width: 100%; margin-top: 8px; padding: 8px; background: #E63946; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: 500; font-size: 0.8rem; }
    
    .meal-request-input { display: flex; gap: 6px; margin-bottom: 10px; }
    .meal-request-input input { flex: 1; padding: 8px; border: 2px solid #D8F3DC; border-radius: 5px; font-size: 0.85rem; }
    .meal-request-input button { padding: 8px 14px; background: linear-gradient(135deg, #6B4FA0, #8B5CF6); color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }

    .btn-make { background: #2D6A4F; color: white; }
    .btn-make:disabled { background: #ccc; }
    .btn-shop-missing { background: #8B5CF6; color: white; }
    .remove-meal { background: none; border: none; color: #E63946; cursor: pointer; font-size: 1rem; position: absolute; right: 8px; top: 8px; }
    
    .empty-state { text-align: center; padding: 24px 12px; color: #888; font-size: 0.85rem; }
    
    /* MEAL PLAN STYLES */
    .meal-plan-section { max-width: 1600px; margin: 0 auto; padding: 16px; }
    
    .preferences-bar { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-radius: 10px; padding: 12px; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .preferences-bar h4 { color: #B45309; font-size: 0.85rem; }
    .dislike-tag { background: #DC2626; color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 4px; }
    .dislike-tag button { background: none; border: none; color: white; cursor: pointer; }
    .add-dislike { display: flex; gap: 5px; margin-left: auto; }
    .add-dislike input { padding: 5px 8px; border: 2px solid #F59E0B; border-radius: 5px; font-size: 0.75rem; width: 120px; }
    .add-dislike button { padding: 5px 10px; background: #B45309; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.75rem; }
    .dislikes-widget { margin-top: 8px; }
    .dislike-add-row { display: flex; gap: 6px; margin-bottom: 8px; }
    .dislike-add-row input { flex: 1; padding: 6px 10px; border: 2px solid #D8F3DC; border-radius: 5px; font-size: 0.8rem; }
    .dislike-add-row button { padding: 6px 12px; background: #DC2626; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 0.8rem; }
    .dislike-item { background: #f8f9fa; border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .dislike-item-name { font-weight: 600; color: #DC2626; font-size: 0.8rem; min-width: 60px; }
    .dislike-tags { display: flex; gap: 3px; flex: 1; }
    .dislike-item-remove { background: #E63946; color: white; border: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: 0.65rem; margin-left: auto; }
    .dislike-tag-btn { padding: 2px 6px; border-radius: 8px; font-size: 0.6rem; font-weight: 600; cursor: pointer; border: 1px solid #ccc; background: #eee; color: #999; }
    .dislike-tag-btn.d.active { background: #DC2626; color: white; border-color: #DC2626; }
    .dislike-tag-btn.b.active { background: #2D6A4F; color: white; border-color: #2D6A4F; }
    .dislike-tag-btn.n.active { background: #B45309; color: white; border-color: #B45309; }
    .dislike-tag-btn.dj.active { background: #2563EB; color: white; border-color: #2563EB; }
    
    /* 3-TIER DIETARY RESTRICTION SYSTEM */
    .restriction-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
    .restriction-dot.dislike { background: #F59E0B; }
    .restriction-dot.intolerance { background: #EA580C; }
    .restriction-dot.allergy { background: #DC2626; }
    .restriction-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 500; margin: 2px; }
    .restriction-badge.dislike { background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
    .restriction-badge.intolerance { background: #FFEDD5; color: #9A3412; border: 1px solid #EA580C; }
    .restriction-badge.allergy { background: #FEE2E2; color: #991B1B; border: 1px solid #DC2626; }
    .restriction-badge button { background: none; border: none; color: inherit; cursor: pointer; margin-left: 4px; font-size: 0.7rem; opacity: 0.7; }
    .restriction-badge button:hover { opacity: 1; }
    .restriction-section { margin-bottom: 6px; }
    .restriction-section-title { font-size: 0.65rem; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
    .restriction-section-title.dislike { color: #B45309; }
    .restriction-section-title.intolerance { color: #EA580C; }
    .restriction-section-title.allergy { color: #DC2626; }
    .severity-picker { display: flex; gap: 4px; margin-top: 6px; }
    .severity-btn { flex: 1; padding: 6px 4px; border: 2px solid #ddd; border-radius: 6px; font-size: 0.65rem; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; }
    .severity-btn:hover { transform: scale(1.02); }
    .severity-btn.dislike { background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
    .severity-btn.dislike:hover { background: #FDE68A; }
    .severity-btn.intolerance { background: #FFEDD5; color: #9A3412; border-color: #EA580C; }
    .severity-btn.intolerance:hover { background: #FED7AA; }
    .severity-btn.allergy { background: #FEE2E2; color: #991B1B; border-color: #DC2626; }
    .severity-btn.allergy:hover { background: #FECACA; }
    .meal-warning { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; font-size: 0.6rem; font-weight: 600; margin-left: 4px; }
    .meal-warning.dislike { background: #FEF3C7; color: #92400E; }
    .meal-warning.intolerance { background: #FFEDD5; color: #9A3412; }
    .meal-warning.allergy { background: #FEE2E2; color: #991B1B; }
    
    /* Family table - horizontal for print */
    .family-table { width: 100%; background: white; border-collapse: collapse; border-radius: 8px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .family-table th { background: #0EA5E9; color: white; padding: 8px; font-size: 0.8rem; text-align: center; }
    .family-table td { padding: 8px; text-align: center; border: 1px solid #e0e0e0; font-size: 0.75rem; vertical-align: top; }
    .family-table .name { font-weight: 700; color: #0369A1; }
    .family-table .tag { display: inline-block; background: #0EA5E9; color: white; padding: 1px 5px; border-radius: 6px; font-size: 0.65rem; margin: 1px; }
    .family-table .tag.protein { background: #DC2626; }
    .family-table .tag.fiber { background: #16A34A; }
    .family-table .tag.child { background: #F59E0B; }
    
    .meal-plan-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 14px; table-layout: auto; }
    .meal-plan-table th { background: #2D6A4F; color: white; padding: 8px 5px; font-size: 0.75rem; text-align: left; min-width: 80px; }
    .meal-plan-table th:first-child, .meal-plan-table td:first-child { min-width: 85px; width: 85px; white-space: nowrap; padding: 8px 12px 8px 10px !important; text-align: left; border-right: 1px solid #e0e0e0; } /* Day column */
    .meal-plan-table td { padding: 6px 5px; border-bottom: 1px solid #e0e0e0; vertical-align: top; font-size: 0.75rem; min-width: 80px; word-wrap: break-word; overflow-wrap: break-word; }
    .meal-plan-table tr:nth-child(even) { background: #f8fdf9; }
    .meal-plan-table .weekend { background: #FEF3C7 !important; }
    .meal-plan-table .today-row { background: linear-gradient(135deg, #D8F3DC, #B7E4C7) !important; border-left: 4px solid #2D6A4F; }
    .meal-plan-table .today-row.weekend { background: linear-gradient(135deg, #D8F3DC, #FEF3C7) !important; }
    .meal-cell { cursor: pointer; position: relative; min-height: 40px; }
    .meal-cell:hover { background: rgba(45,106,79,0.1); }
    .meal-cell .meal-name { font-weight: 600; color: #1B4332; font-size: 0.8rem; }
    .meal-cell .meal-note { font-size: 0.65rem; color: #666; }
    .meal-cell .method { display: inline-block; background: #DBEAFE; color: #2563EB; padding: 1px 4px; border-radius: 3px; font-size: 0.6rem; }
    .meal-cell .method.slowcooker { background: #F3E8FF; color: #7C3AED; }
    .meal-cell .method.hob { background: #FEE2E2; color: #DC2626; }
    .meal-cell .method.oven { background: #FFEDD5; color: #C2410C; }
    .meal-cell .edit-icon { position: absolute; top: 2px; right: 2px; font-size: 0.65rem; color: #999; opacity: 0; }
    .meal-cell:hover .edit-icon { opacity: 1; }
    .meal-cell .recipe-btn { background: #8B5CF6; color: white; border: none; padding: 2px 5px; border-radius: 3px; font-size: 0.6rem; cursor: pointer; margin-top: 3px; }
    .person-tag { display: inline-block; padding: 1px 4px; border-radius: 3px; font-size: 0.6rem; font-weight: 600; }
    .person-tag.d { background: #FEE2E2; color: #DC2626; }
    .person-tag.bj { background: #E0F2FE; color: #0369A1; }
    .person-tag.all { background: #E0E7FF; color: #4338CA; }
    .person-tag.dj { background: #DBEAFE; color: #2563EB; }
    .portions-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.6rem; font-weight: 600; background: #FEF3C7; color: #B45309; margin-right: 4px; }
    
    /* Concept 5: Stacked Variants in Dinner Cell */
    .stacked-cell { padding: 0 !important; }
    .stacked-main { padding: 8px; border-bottom: 2px solid #FEE2E2; cursor: pointer; position: relative; }
    .stacked-main:hover { background: rgba(45,106,79,0.05); }
    .stacked-main .person-label { font-size: 0.6rem; color: #40916C; font-weight: 600; margin-bottom: 2px; }
    .stacked-variant { padding: 6px 8px; background: linear-gradient(135deg, #f0f0f0, #e8e8e8); cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,0.1); }
    .stacked-variant:hover { filter: brightness(0.95); }
    .stacked-variant .variant-name { font-weight: 600; color: #333; font-size: 0.75rem; flex: 1; }
    .stacked-variant .person-tag { flex-shrink: 0; padding: 2px 6px; border-radius: 4px; font-size: 0.6rem; font-weight: 700; }
    .stacked-variant.dislike { background: linear-gradient(135deg, #FEE2E2, #FECACA) !important; }
    .stacked-variant.needs-variant { background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important; }
    .stacked-variant.absent { background: #f5f5f5 !important; opacity: 0.6; }
    
    /* Clickable person badges */
    .person-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.6rem; font-weight: 700; cursor: pointer; transition: all 0.15s; margin-right: 3px; }
    .person-badge:hover { transform: scale(1.1); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .person-badge.absent { opacity: 0.5; }
    .person-badge.absent:hover { opacity: 0.8; }
    .attendance-badges { display: flex; align-items: center; gap: 2px; margin: 4px 0; flex-wrap: wrap; }
    .snacks-cell { background: #FFFBEB; }
    .snack-item { background: #FEF3C7; color: #B45309; padding: 3px 8px; border-radius: 4px; margin: 2px 0; font-size: 0.7rem; font-weight: 500; }
    
    .plan-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .plan-actions button { padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 0.8rem; }
    .week-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .week-tab { padding: 8px 20px; border: 2px solid #2D6A4F; background: white; color: #2D6A4F; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
    .week-tab.active { background: #2D6A4F; color: white; }
    .week-tab:hover:not(.active) { background: #D8F3DC; }
    .btn-generate { background: #2D6A4F; color: white; }
    .btn-shopping { background: #0EA5E9; color: white; }
    .btn-print { background: #6B7280; color: white; }
    .btn-recipes { background: #8B5CF6; color: white; }
    
    /* SMART SHOPPING LIST */
    .smart-shopping { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin-bottom: 14px; }
    .smart-shopping h3 { font-family: 'Montserrat'; color: #2D6A4F; margin-bottom: 12px; font-size: 1rem; }
    .shop-section { margin-bottom: 16px; }
    .shop-section-title { font-weight: 600; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; font-size: 0.85rem; }
    .shop-section-title.needed { background: #FEE2E2; color: #DC2626; }
    .shop-section-title.instock { background: #D8F3DC; color: #2D6A4F; }
    .shop-grid { display: flex; gap: 24px; overflow-x: auto; padding: 10px 5px 15px; }
    .shop-grid .category { min-width: 220px; flex-shrink: 0; }
    .shop-grid .items { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
    .shop-grid .item-tag { width: 100%; justify-content: flex-start; padding: 8px 12px; }
    .shop-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8f9fa; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
    .shop-item:hover { background: #e8f5e9; }
    .shop-item input { width: 18px; height: 18px; accent-color: #2D6A4F; cursor: pointer; }
    .shop-item.checked { background: #D8F3DC; }
    .shop-item.checked label { color: #40916C; }
    .shop-item label { flex: 1; cursor: pointer; }
    .shop-item .need-qty { background: #DC2626; color: white; font-size: 0.7rem; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
    .shop-category { margin-bottom: 16px; }
    .shop-category-name { font-weight: 600; color: #40916C; margin-bottom: 8px; font-size: 0.8rem; text-transform: uppercase; }
    .shop-items { display: flex; flex-wrap: wrap; gap: 6px; }
    .shop-tag { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #FEE2E2, #FECACA); padding: 6px 10px; border-radius: 16px; font-size: 0.8rem; cursor: pointer; border: 2px solid #EF4444; }
    .shop-tag:hover { background: #FECACA; }
    .shop-tag.in-stock { background: linear-gradient(135deg, #D8F3DC, #B7E4C7); border-color: #40916C; }
    .shop-tag input { width: 14px; height: 14px; accent-color: #2D6A4F; }
    .shop-tag .storage { font-size: 0.55rem; padding: 1px 3px; }
    
    /* Quick Shop Accordion */
    .quick-accordion { max-height: calc(100vh - 300px); overflow-y: auto; padding-right: 4px; }
    .shop-list-drop-zone { display: none; border: 2px dashed #D1D5DB; border-radius: 8px; padding: 16px; text-align: center; margin-bottom: 8px; background: #F9FAFB; transition: all 0.2s; }
    .shop-list-drop-zone.drag-active { display: block; border-color: #F59E0B; background: #FFFBEB; }
    .shop-list-drop-zone.drag-over { border-color: #10B981; background: #D1FAE5; transform: scale(1.02); }
    .drop-zone-hint { color: #6B7280; font-size: 0.85rem; pointer-events: none; }
    .shop-list-drop-zone.drag-over .drop-zone-hint { color: #059669; font-weight: 600; }
    .item-tag[draggable="true"] { cursor: grab; }
    .item-tag[draggable="true"]:active { cursor: grabbing; }
    .quick-cat { margin-bottom: 6px; border-radius: 6px; overflow: hidden; background: #f8fdf9; }
    .quick-cat-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #2D6A4F; cursor: pointer; font-weight: 600; font-size: 0.8rem; color: white; border-radius: 6px; }
    .quick-cat-header .count { background: rgba(255,255,255,0.2); color: white; padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }
    .quick-cat-header .arrow { transition: transform 0.2s; }
    .quick-cat.collapsed .quick-cat-header .arrow { transform: rotate(-90deg); }
    .quick-cat-items { padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
    .quick-cat.collapsed .quick-cat-items { display: none; }
    /* Day-grouped shopping view */
    .day-group { list-style: none; }
    .day-group summary { list-style: none; }
    .day-group summary::-webkit-details-marker { display: none; }
    .day-group summary::marker { display: none; }
    .day-group[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .day-group .chip.stacked { margin: 4px 0; }
    .quick-item { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 6px 10px; border-radius: 14px; font-size: 0.8rem; border: 2px solid #F59E0B; margin-bottom: 2px; flex-shrink: 0; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; }
    .quick-item .cupboard-badge { font-size: 0.65rem; color: #059669; background: #D1FAE5; padding: 2px 6px; border-radius: 8px; white-space: nowrap; flex-shrink: 1; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
    .quick-item.manual-item { border-left: 4px solid #D97706; background: linear-gradient(135deg, #FEF9C3, #FEF3C7); }
    .quick-item .adjust { min-width: 20px; width: 20px; height: 20px; font-size: 0.85rem; }
    .quick-item .qty { font-weight: 700; color: #B45309; min-width: 30px; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quick-item .name { flex: 1 1 auto; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quick-item .storage { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; }
    .quick-item .adjust { background: #2D6A4F; color: white; border: none; border-radius: 50%; cursor: pointer; font-weight: bold; min-width: 20px; height: 20px; font-size: 0.85rem; }
    .quick-item .adjust.plus { opacity: 1; font-size: 0; }
    .quick-item .adjust.plus::after { content: '✓'; font-size: 1rem; }
    .quick-item.checked .adjust.plus { opacity: 1; }
    .quick-item .adjust.desktop-only { display: none; }
    .quick-item .shop-check { width: 26px; height: 26px; accent-color: #10B981; cursor: pointer; flex-shrink: 0; }
    .quick-item.checked { background: linear-gradient(135deg, #D8F3DC, #B7E4C7) !important; border: 2px solid #10B981 !important; }
    .quick-item.checked .name, .quick-item.checked .qty { color: #2D6A4F; }
    .quick-item.in-stock { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); border: 2px solid #10B981; }
    .quick-item.in-stock .name { color: #065F46; }
    .quick-item.in-stock .qty { color: #047857; font-weight: 600; }
    .quick-item.submitting { animation: pulse-submit 0.4s ease-in-out infinite; transition: all 0.2s ease; }
    @keyframes pulse-submit { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    /* Info button hidden - name is now clickable */
    .quick-item .info-btn { display: none; }
    .quick-item .recipe-tag { display: inline-block; margin-left: auto; }
    .quick-item .shop-check { display: block; width: 18px; height: 18px; accent-color: #10B981; cursor: pointer; flex-shrink: 0; }
    .quick-item .qty-adj { background: none; border: 1.5px solid #888; color: #555; font-size: 0.75rem; cursor: pointer; padding: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
    .quick-item .qty-adj:hover { border-color: #333; color: #333; }
    .quick-item .adjust { min-width: 22px; height: 22px; font-size: 0.8rem; border-radius: 50%; }
    .quick-item .qty { min-width: 20px; text-align: center; }
    .quick-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: color 0.15s; }
    .quick-item .name:hover { color: #1B4332; text-decoration: underline; }
    .quick-item .mobile-plus { display: none; }
    .quick-cat-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; padding-right: 14px; }
    @media (max-width: 767px) { 
      .quick-cat-items { display: flex; flex-direction: column; padding: 8px; gap: 0; }
      .quick-item { padding: 6px 8px !important; font-size: 0.8rem !important; margin-bottom: 4px !important; width: 100% !important; display: flex !important; border-radius: 8px !important; flex-wrap: nowrap !important; gap: 3px !important; align-items: center !important; }
      .quick-item .name { flex: 1 1 auto !important; min-width: 50px !important; font-size: 0.8rem !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
      .quick-item .adjust { min-width: 22px !important; width: 22px !important; height: 22px !important; font-size: 0.8rem !important; border-radius: 6px !important; flex-shrink: 0 !important; }
      .quick-item .adjust.desktop-only { display: none; }
      .quick-item .adjust.plus { opacity: 1; font-size: 0; }
      .quick-item .adjust.plus::after { content: '+'; font-size: 1rem; }
      .quick-item.checked .adjust.plus { background: #10B981; }
      .quick-item.checked .adjust.plus::after { content: '✓'; font-size: 0.9rem; }
      .quick-item.checked { background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important; border: 2px solid #10B981 !important; }
      .quick-item .shop-check { display: block !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
      .quick-item .recipe-tag { display: none !important; }
      .quick-item .qty-adj { display: inline-flex !important; width: 20px !important; height: 20px !important; font-size: 0.8rem !important; flex-shrink: 0 !important; }
      .quick-item .qty { font-size: 0.7rem !important; min-width: 25px !important; text-align: right !important; flex-shrink: 1 !important; white-space: nowrap !important; overflow: hidden !important; }
      .quick-item .info-btn { display: none !important; }
      .quick-item .remove-list-item-btn { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin-left: 2px !important; }
      .quick-item .mobile-plus { display: none !important; }
      .quick-item.checked .mobile-plus { display: none !important; }
      /* Hide cupboard badge on mobile to save space */
      .quick-item .cupboard-badge { display: none !important; }
      /* Full height shopping list on mobile */
      /* FIX-10d: Quick Shop min-height only when NOT collapsed */
      .panel[data-panel-id="quickshop"]:not(.collapsed) { min-height: calc(100vh - 180px); }
      .panel[data-panel-id="quickshop"]:not(.collapsed) .quick-accordion { min-height: calc(100vh - 280px); }
    }
    
    /* Ingredient popup */
    .ing-popup { position: fixed; background: white; border: 2px solid #2D6A4F; border-radius: 8px; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 2000; max-width: 280px; font-size: 0.8rem; }
    .ing-popup h4 { color: #2D6A4F; margin-bottom: 8px; font-size: 0.9rem; }
    .ing-popup .usage { padding: 4px 0; border-bottom: 1px solid #eee; }
    .ing-popup .usage:last-child { border-bottom: none; }
    .ing-popup .day { font-weight: 600; color: #0EA5E9; }
    .ing-popup .meal { color: #666; }
    .ing-popup-close { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #999; }
    .item-tag .info-btn { background: #DC2626; color: white; border: none; min-width: 14px; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; font-size: 0.55rem; margin-left: 4px; flex-shrink: 0; }
    
    /* Unified Ingredient Master Popup */
    .unified-ing-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: flex-start; justify-content: center; padding-top: 80px; z-index: 3000; box-sizing: border-box; }
    .unified-ing-modal.active { display: flex; }
    .unified-ing-content { background: white; border-radius: 12px; max-width: 420px; width: 95%; max-height: 85vh; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; }
    .unified-ing-header { background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; padding: 16px 20px; position: relative; }
    .unified-ing-header h3 { margin: 0 0 4px 0; font-size: 1.2rem; padding-right: 30px; }
    .unified-ing-header .subtitle { font-size: 0.75rem; opacity: 0.85; }
    .unified-ing-close { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.2); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
    .unified-ing-close:hover { background: rgba(255,255,255,0.3); }
    .unified-ing-tabs { display: flex; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
    .unified-ing-tab { flex: 1; padding: 10px 8px; border: none; background: none; cursor: pointer; font-size: 0.75rem; font-weight: 500; color: #64748b; border-bottom: 2px solid transparent; transition: all 0.2s; }
    .unified-ing-tab:hover { color: #2D6A4F; background: #f1f5f9; }
    .unified-ing-tab.active { color: #2D6A4F; border-bottom-color: #2D6A4F; background: white; }
    .unified-ing-body { flex: 1; overflow-y: auto; padding: 16px; }
    .unified-ing-section { margin-bottom: 16px; }
    .unified-ing-section:last-child { margin-bottom: 0; }
    .unified-ing-section-title { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .unified-ing-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
    .unified-ing-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
    .unified-ing-stat:last-child { border-bottom: none; }
    .unified-ing-stat-label { font-size: 0.8rem; color: #64748b; }
    .unified-ing-stat-value { font-size: 0.9rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; }
    .unified-ing-buy-box { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); border: 2px solid #10B981; border-radius: 10px; padding: 14px; text-align: center; }
    .unified-ing-buy-title { font-size: 1.1rem; font-weight: 700; color: #059669; margin-bottom: 8px; }
    .unified-ing-buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .unified-ing-buy-cell { background: rgba(255,255,255,0.7); padding: 8px; border-radius: 6px; font-size: 0.75rem; }
    .unified-ing-buy-cell .label { color: #64748b; margin-bottom: 2px; }
    .unified-ing-buy-cell .value { font-weight: 600; color: #1B4332; }
    .unified-ing-recipe-list { max-height: 200px; overflow-y: auto; }
    .unified-ing-recipe-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #E8F5E9; border-radius: 6px; margin-bottom: 6px; }
    .unified-ing-recipe-item:last-child { margin-bottom: 0; }
    .unified-ing-recipe-item.swappable { background: #FEF3C7; }
    .unified-ing-recipe-name { font-weight: 500; font-size: 0.85rem; }
    .unified-ing-recipe-qty { background: #2D6A4F; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; margin-left: 6px; }
    .unified-ing-recipe-item.swappable .unified-ing-recipe-qty { background: #F59E0B; }
    .unified-ing-meal-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8rem; }
    .unified-ing-meal-item:last-child { border-bottom: none; }
    .unified-ing-expiry-editor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .unified-ing-expiry-editor input[type="date"] { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; }
    .unified-ing-expiry-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
    .unified-ing-expiry-badge.expired { background: #FEE2E2; color: #DC2626; }
    .unified-ing-expiry-badge.urgent { background: #FFEDD5; color: #EA580C; }
    .unified-ing-expiry-badge.soon { background: #FEF3C7; color: #D97706; }
    .unified-ing-expiry-badge.ok { background: #D1FAE5; color: #059669; }
    .unified-ing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .unified-ing-btn { padding: 8px 14px; border: none; border-radius: 6px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
    .unified-ing-btn.primary { background: #2D6A4F; color: white; }
    .unified-ing-btn.primary:hover { background: #1B4332; }
    .unified-ing-btn.secondary { background: #e2e8f0; color: #475569; }
    .unified-ing-btn.secondary:hover { background: #cbd5e1; }
    .unified-ing-btn.danger { background: #FEE2E2; color: #DC2626; }
    .unified-ing-btn.danger:hover { background: #FECACA; }
    
    /* Drag and drop */
    .shop-grid .category { cursor: grab; }
    .shop-grid .category.dragging { opacity: 0.5; }
    .shop-grid .category.drag-over { border: 2px dashed #2D6A4F; }
    .shop-grid .item-tag { cursor: grab; }
    .shop-grid .item-tag.dragging { opacity: 0.4; }
    .shop-grid .items.drag-over { background: rgba(45,106,79,0.1); border-radius: 8px; }
    
    /* Modal */
    .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
    .modal.active { display: flex; }
    .modal-content { background: white; border-radius: 12px; padding: 20px; max-width: 550px; width: 90%; max-height: 85vh; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; }
    .modal-content h3 { font-family: 'Montserrat'; color: #2D6A4F; margin-bottom: 14px; }
    .modal-content label { display: block; margin-bottom: 4px; font-weight: 600; color: #555; font-size: 0.8rem; }
    .modal-content input, .modal-content select { width: 100%; padding: 8px; border: 2px solid #D8F3DC; border-radius: 5px; margin-bottom: 10px; font-size: 0.85rem; }
    .modal-buttons { display: flex; gap: 8px; margin-top: 14px; }
    .modal-buttons button { flex: 1; padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; }
    .btn-save { background: #2D6A4F; color: white; }
    .btn-cancel { background: #E5E7EB; color: #374151; }
    
    .meal-suggestions h4 { font-size: 0.8rem; color: #2D6A4F; margin-bottom: 6px; }
    .suggestion-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
    .suggestion-btn { padding: 5px 10px; background: #E0F2FE; color: #0369A1; border: 2px solid #BAE6FD; border-radius: 5px; cursor: pointer; font-size: 0.75rem; }
    .suggestion-btn:hover { background: #0EA5E9; color: white; }
    .suggestion-btn.selected { background: #2D6A4F; color: white; border-color: #2D6A4F; }
    .suggestion-btn.have-all { background: #D8F3DC; border-color: #40916C; color: #1B4332; }
    .suggestion-btn.have-some { background: #FEF3C7; border-color: #F59E0B; color: #B45309; }
    .suggestion-btn.have-none { background: #FEE2E2; border-color: #EF4444; color: #DC2626; }
    .missing-ingredients { margin-top: 12px; padding: 10px; background: #FEF3C7; border-radius: 6px; font-size: 0.8rem; }
    .missing-ingredients h5 { color: #B45309; margin-bottom: 6px; }
    .missing-ingredients .need-item { display: inline-block; background: #FEE2E2; color: #DC2626; padding: 2px 6px; border-radius: 4px; margin: 2px; font-size: 0.75rem; }
    
    .recipe-detail { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-top: 10px; }
    .recipe-detail h4 { color: #2D6A4F; margin-bottom: 8px; font-size: 0.9rem; }
    .recipe-detail ul, .recipe-detail ol { padding-left: 20px; font-size: 0.8rem; line-height: 1.5; }
    .recipe-detail li { margin-bottom: 4px; }
    
    /* PRINT STYLES */
    @media print {
      body { background: white !important; margin: 15mm !important; }
      .tabs, .plan-actions, header, .preferences-bar, .modal, .recipe-btn, .edit-icon, .week-tabs { display: none !important; }
      .meal-plan-table, .family-table { box-shadow: none !important; font-size: 9pt !important; display: table !important; }
      .meal-plan-table th, .meal-plan-table td { padding: 4px !important; }
      .family-table { page-break-inside: avoid; }
      .meal-plan-section { padding: 10mm !important; }
      .meal-cell { min-height: auto !important; }
      .print-recipes ol { padding-left: 25px !important; margin-left: 10px !important; }
      .print-recipe-card { margin-left: 5mm !important; padding: 15px !important; }
      .stacked-variant { background: #f0f0f0 !important; }
      
      /* Recipes print page */
      .print-recipes { page-break-before: always; }
      
      /* Shopping list print */
      .print-shopping { display: block !important; }
      .print-shopping h2 { font-size: 16pt; margin-bottom: 12px; color: #000; border-bottom: 2px solid #000; padding-bottom: 6px; }
      .print-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
      .print-shop-cat { border: 1px solid #ccc; padding: 10px; page-break-inside: avoid; }
      .print-shop-cat h4 { font-size: 11pt; margin-bottom: 8px; border-bottom: 1px solid #999; padding-bottom: 4px; }
      .print-shop-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 10pt; }
      .print-shop-item .checkbox { width: 12px; height: 12px; border: 1px solid #000; display: inline-block; flex-shrink: 0; }
      .print-shop-item .qty { color: #666; }
      .print-recipes h2 { color: #2D6A4F; margin-bottom: 16px; }
      .print-recipe-card { border: 1px solid #ddd; padding: 12px; margin-bottom: 12px; page-break-inside: avoid; }
      .print-recipe-card h4 { color: #2D6A4F; margin-bottom: 8px; }
    }
    
    .print-recipes, .print-shopping { display: none; }
    @media print { .print-recipes, .print-shopping { display: block !important; } .smart-shopping > *:not(.print-shopping) { display: none !important; } .smart-shopping { box-shadow: none !important; padding: 0 !important; } }
    
    /* DIETARY TAGS */
    .dtag { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 600; margin: 1px; }
    .dtag.protein { background: #DBEAFE; color: #1E40AF; }
    .dtag.lowcarb { background: #E0E7FF; color: #4338CA; }
    .dtag.highfibre { background: #D8F3DC; color: #166534; }
    .dtag.vegetarian { background: #DCFCE7; color: #166534; }
    .dtag.vegan { background: #D1FAE5; color: #065F46; }
    .dtag.glutenfree { background: #FEF3C7; color: #92400E; }
    .dtag.dairyfree { background: #FEE2E2; color: #991B1B; }
    .dtag.nutfree { background: #FFE4E6; color: #9F1239; }
    .dtag.kidfriendly { background: #FEF3C7; color: #B45309; }
    .dtag.quick { background: #E0F2FE; color: #0369A1; }
    .dtag.budget { background: #F3F4F6; color: #374151; }
    .dtag.comfort { background: #FDF4FF; color: #86198F; }
    
    /* MANAGEMENT TAB */
    .manage-section { max-width: 1200px; margin: 0 auto; padding: 16px; }
    .manage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
    .manage-header h2 { font-family: 'Montserrat'; color: #2D6A4F; }
    .btn-add-person { padding: 10px 20px; background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
    
    .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .person-card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
    .person-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .person-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 1.1rem; }
    .person-name { flex: 1; }
    .person-name input { width: 100%; border: none; font-size: 1rem; font-weight: 600; color: #1B4332; background: transparent; }
    .person-name input:focus { outline: none; background: #f8fdf9; padding: 4px; border-radius: 4px; }
    .person-delete { background: none; border: none; color: #DC2626; cursor: pointer; font-size: 1.2rem; opacity: 0.6; }
    .person-delete:hover { opacity: 1; }
    
    .meal-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .meal-toggle { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: #f0f0f0; border-radius: 16px; font-size: 0.7rem; cursor: pointer; }
    .meal-toggle.active { background: #D8F3DC; color: #166534; }
    
    .tag-selector { margin-bottom: 12px; }
    .tag-selector label { font-size: 0.7rem; color: #666; text-transform: uppercase; display: block; margin-bottom: 6px; }
    .tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
    .tag-chip { padding: 4px 10px; border-radius: 16px; font-size: 0.7rem; cursor: pointer; border: 2px solid #e0e0e0; background: white; transition: all 0.2s; }
    .tag-chip.selected { border-color: currentColor; }
    .tag-chip.protein { color: #1E40AF; } .tag-chip.protein.selected { background: #DBEAFE; }
    .tag-chip.lowcarb { color: #4338CA; } .tag-chip.lowcarb.selected { background: #E0E7FF; }
    .tag-chip.highfibre { color: #166534; } .tag-chip.highfibre.selected { background: #D8F3DC; }
    .tag-chip.vegetarian { color: #166534; } .tag-chip.vegetarian.selected { background: #DCFCE7; }
    .tag-chip.vegan { color: #065F46; } .tag-chip.vegan.selected { background: #D1FAE5; }
    .tag-chip.glutenfree { color: #92400E; } .tag-chip.glutenfree.selected { background: #FEF3C7; }
    .tag-chip.dairyfree { color: #991B1B; } .tag-chip.dairyfree.selected { background: #FEE2E2; }
    .tag-chip.kidfriendly { color: #B45309; } .tag-chip.kidfriendly.selected { background: #FEF3C7; }
    .tag-chip.quick { color: #0369A1; } .tag-chip.quick.selected { background: #E0F2FE; }
    
    .person-notes textarea { width: 100%; height: 50px; border: 2px solid #e0e0e0; border-radius: 6px; padding: 8px; font-size: 0.8rem; resize: none; font-family: inherit; }
    .person-notes textarea:focus { outline: none; border-color: #2D6A4F; }
    
    /* Recipe Management */
    .recipe-manager { margin-top: 24px; }
    .recipe-manager h3 { font-family: 'Montserrat'; color: #2D6A4F; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
    .recipe-search { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .recipe-search input { flex: 1; min-width: 200px; padding: 10px; border: 2px solid #D8F3DC; border-radius: 8px; }
    .recipe-search select { padding: 10px; border: 2px solid #D8F3DC; border-radius: 8px; }
    .recipe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; max-height: 600px; overflow-y: auto; }
    .recipe-mgmt-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 2px solid transparent; }
    .recipe-mgmt-card:hover { border-color: #D8F3DC; }
    .recipe-mgmt-card h4 { color: #1B4332; font-size: 0.95rem; margin-bottom: 6px; display: flex; justify-content: space-between; }
    .recipe-mgmt-card .time { font-size: 0.75rem; color: #666; }
    .recipe-mgmt-card .ingredients { font-size: 0.75rem; color: #555; margin: 8px 0; }
    .recipe-mgmt-card .tags { margin: 8px 0; }
    .recipe-mgmt-card .subs { background: #FEF3C7; border-radius: 6px; padding: 8px; margin-top: 8px; font-size: 0.75rem; }
    .recipe-mgmt-card .subs h5 { color: #B45309; margin-bottom: 4px; font-size: 0.7rem; }
    .recipe-mgmt-card .sub-item { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #FDE68A; }
    .recipe-mgmt-card .sub-item:last-child { border: none; }
    .recipe-mgmt-card .sub-na { color: #999; font-style: italic; }
    .recipe-mgmt-card .edit-btn { background: #2D6A4F; color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; }
    .add-recipe-form { background: white; border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .add-recipe-form h4 { color: #2D6A4F; margin-bottom: 12px; }
    .form-row { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .form-row input, .form-row textarea { flex: 1; min-width: 150px; padding: 8px; border: 2px solid #e0e0e0; border-radius: 6px; font-family: inherit; }
    .form-row textarea { min-height: 60px; resize: vertical; }
    .form-row input:focus, .form-row textarea:focus { outline: none; border-color: #2D6A4F; }
    
    .settings-panel { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
    .settings-panel h3 { font-family: 'Montserrat'; color: #2D6A4F; margin-bottom: 16px; }
    .setting-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px; margin-bottom: 8px; }
    .setting-row label { flex: 1; font-size: 0.85rem; }
    .setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: #2D6A4F; }
    .btn-danger { background: #DC2626; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
    
    /* Request meal filters */
    .meal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .meal-filters select { padding: 6px 10px; border: 2px solid #D8F3DC; border-radius: 6px; font-size: 0.8rem; }
    .filter-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
    
    /* Meal plan tag toggle */
    .plan-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
    .toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; }
    .toggle-label input { accent-color: #2D6A4F; }
    
    .meal-tags { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }

    @media (max-width: 1200px) { .dashboard { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
    /* Tablet-specific: show hint to drag panels up */
    @media (min-width: 601px) and (max-width: 1024px) {
      .dashboard { grid-template-columns: 1fr 1fr; gap: 12px; }
      .panel { padding: 12px; }
      .drag-handle { 
        font-size: 0.75rem; 
        padding: 4px; 
        margin-right: 4px;
        color: #9ca3af;
      }
      .panel-maximize-btn { padding: 8px 12px !important; font-size: 1.1rem !important; }
    }
    @media (max-width: 600px) { 
      .dashboard { grid-template-columns: 1fr !important; } 
      header { flex-direction: column; gap: 8px; } 
      .preferences-bar { flex-direction: column; align-items: flex-start; } 
      .add-dislike { margin-left: 0; } 
      /* FIX-10: Panel collapse improvements for mobile */
      .panel-header { cursor: pointer; user-select: none; position: relative; padding-right: 24px; } 
      /* FIX-10a: Chevron positioned with spacing from maximize button */
      .panel-header::after { content: '▼'; font-size: 0.7rem; color: #666; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } 
      .panel.collapsed .panel-header::after { content: '▶'; } 
      /* FIX-10b: Collapsed panels get min-height reset and proper roll-up */
      .panel.collapsed { min-height: auto !important; max-height: 60px !important; overflow: hidden !important; }
      .panel.collapsed > *:not(.panel-header) { display: none !important; }
      .panel { margin-bottom: 8px; transition: max-height 0.2s ease; }
      /* FIX-10c: Add gap between maximize button and chevron */
      .panel-header .panel-maximize-btn { margin-right: 8px; }
      /* Show drag handle for vertical reordering on mobile */
      .panel .drag-handle { display: inline-block; cursor: grab; }
      .panel.swapped-in { }
      /* Keep tab drag handles visible on mobile */
      .tabs.dashboard-mode .tab:not(.active) .tab-drag-handle { display: inline; cursor: grab; }
      .tab.tab-dragging { opacity: 0.5; background: #B7E4C7; }
    }
    
    /* ========== INGREDIENTS DB SIDEBAR LAYOUT ========== */
    .ing-db-layout {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 16px;
      margin-top: 16px;
    }
    .ing-db-sidebar {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      height: fit-content;
      position: sticky;
      top: 80px;
    }
    .ing-db-sidebar h4 {
      font-size: 0.75rem;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }
    .ing-filter-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 8px;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.2s;
      font-size: 0.85rem;
    }
    .ing-filter-item:hover {
      background: #e8f5e9;
    }
    .ing-filter-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #2D6A4F;
    }
    .ing-filter-item .count {
      margin-left: auto;
      font-size: 0.75rem;
      color: #999;
      background: #e0e0e0;
      padding: 2px 6px;
      border-radius: 10px;
    }
    .ing-filter-item.active .count {
      background: #2D6A4F;
      color: white;
    }
    .ing-db-main {
      min-width: 0;
    }
    .ing-db-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .ing-db-card {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s;
    }
    .ing-db-card:hover {
      border-color: #2D6A4F;
      box-shadow: 0 2px 6px rgba(45,106,79,0.1);
    }
    .ing-db-card h4 {
      font-size: 0.8rem;
      font-weight: 600;
      color: #1F2937;
      text-transform: capitalize;
      margin-bottom: 3px;
      line-height: 1.2;
    }
    .ing-db-card .cat-pill {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 8px;
      font-size: 0.6rem;
      font-weight: 500;
    }
    .cat-veg { background: #D8F3DC; color: #2D6A4F; }
    .cat-dairy { background: #E3F2FD; color: #1565C0; }
    .cat-meat { background: #FFEBEE; color: #C62828; }
    .cat-tinned { background: #FFF3E0; color: #E65100; }
    .cat-baking { background: #FFF8E1; color: #F57F17; }
    .cat-frozen { background: #E1F5FE; color: #0277BD; }
    .cat-cupboard { background: #F3E8FF; color: #7C3AED; }
    .cat-carbs { background: #FEF3C7; color: #92400E; }
    .cat-fruit { background: #FCE7F3; color: #BE185D; }
    .cat-fridge { background: #ECFDF5; color: #047857; }
    .cat-drinks { background: #EDE9FE; color: #6D28D9; }
    .cat-bakery { background: #FEF2F2; color: #991B1B; }
    .cat-snacks { background: #FEF9C3; color: #854D0E; }
    .cat-other { background: #F3F4F6; color: #4B5563; }
    .ing-edit-btn {
      padding: 4px 10px;
      background: #2D6A4F;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 0.7rem;
      cursor: pointer;
      font-weight: 500;
      flex-shrink: 0;
    }
    .ing-edit-btn:hover {
      background: #1B4332;
    }
    .ing-card-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    .ing-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid #d1d5db;
      background: white;
      color: #374151;
      border-radius: 6px;
      font-size: 0.7rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ing-action-btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    .ing-add-cupboard:hover {
      background: #D8F3DC;
      border-color: #2D6A4F;
      color: #1B4332;
    }
    .ing-add-shop:hover {
      background: #DBEAFE;
      border-color: #3B82F6;
      color: #1E40AF;
    }
    
    /* Quantity Controls for Ingredient DB Cards */
    .ing-qty-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 8px 0;
    }
    .ing-qty-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #d1d5db;
      background: white;
      color: #374151;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .ing-qty-btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    .ing-qty-btn.plus:hover {
      background: #D8F3DC;
      border-color: #2D6A4F;
      color: #1B4332;
    }
    .ing-qty-btn.minus:hover {
      background: #FEE2E2;
      border-color: #EF4444;
      color: #B91C1C;
    }
    .ing-qty-display {
      min-width: 28px;
      text-align: center;
      font-weight: 600;
      font-size: 0.9rem;
      color: #1F2937;
    }
    
    /* Mobile Filter Drawer */
    .ing-mobile-filter-bar {
      display: none;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 10px;
      margin-bottom: 12px;
    }
    .ing-filter-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: white;
      border: 2px solid #2D6A4F;
      border-radius: 20px;
      color: #2D6A4F;
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
    }
    .ing-filter-btn svg {
      width: 16px;
      height: 16px;
    }
    .ing-filter-badge {
      background: #2D6A4F;
      color: white;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.7rem;
      margin-left: 4px;
    }
    .ing-results-count {
      color: #666;
      font-size: 0.85rem;
    }
    
    /* Recently Finished Section */
    .recently-finished {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 10px;
    }
    .recently-finished-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      cursor: pointer;
    }
    .recently-finished-header h4 {
      font-size: 0.8rem;
      color: #92400E;
      margin: 0;
    }
    .recently-finished-items {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .recently-finished-item {
      display: flex;
      align-items: center;
      gap: 4px;
      background: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.75rem;
      border: 1px solid #F59E0B;
    }
    .recently-finished-item button {
      background: #F59E0B;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 0.65rem;
      cursor: pointer;
    }
    .recently-finished-item button:hover { background: #D97706; }
    .recently-finished-item .dismiss {
      background: transparent;
      color: #999;
      padding: 0 4px;
    }
    .recently-finished.collapsed .recently-finished-items { display: none; }
    .recently-finished.collapsed .toggle-arrow { transform: rotate(-90deg); }
    
    /* FIX-11: Re-add Popup Modal */
    .readd-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3500;
    }
    .readd-popup.active { display: flex; }
    .readd-popup-content {
      background: white;
      border-radius: 12px;
      padding: 20px;
      max-width: 300px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .readd-popup h4 {
      margin: 0 0 16px;
      color: #1B4332;
      font-size: 1rem;
    }
    .readd-popup .qty-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .readd-popup .qty-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .readd-popup .qty-btn.minus { background: #E5E7EB; color: #374151; }
    .readd-popup .qty-btn.plus { background: #10B981; color: white; }
    .readd-popup .qty-display {
      font-size: 1.1rem;
      font-weight: 600;
      min-width: 60px;
      text-align: center;
    }
    .readd-popup .dest-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .readd-popup .dest-btn {
      padding: 14px 16px;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .readd-popup .dest-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    .readd-popup .dest-btn.cupboard { background: linear-gradient(135deg, #2D6A4F, #40916C); color: white; }
    .readd-popup .dest-btn.shopping { background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: white; }
    .readd-popup .cancel-btn {
      margin-top: 12px;
      width: 100%;
      padding: 10px;
      background: #F3F4F6;
      border: none;
      border-radius: 6px;
      color: #6B7280;
      cursor: pointer;
      font-size: 0.85rem;
    }
    
    /* Ingredients DB Smart Filters */
    .ing-smart-filters {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e5e7eb;
    }
    .ing-smart-filter {
      padding: 6px 12px;
      font-size: 0.75rem;
      border-radius: 16px;
      border: 1px solid #d1d5db;
      background: white;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ing-smart-filter:hover { background: #f3f4f6; }
    .ing-smart-filter.active {
      background: #2D6A4F;
      color: white;
      border-color: #2D6A4F;
    }
    .ing-smart-filter .count {
      background: rgba(0,0,0,0.1);
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 0.65rem;
    }
    .ing-smart-filter.active .count { background: rgba(255,255,255,0.3); }
    
    /* Unused/Never bought ingredient styling */
    .ing-db-card.unused {
      opacity: 0.5;
      background: #f9fafb;
    }
    .ing-db-card.unused:hover { opacity: 0.8; }
    .ing-db-card .never-badge {
      font-size: 0.55rem;
      color: #9ca3af;
      display: block;
      margin-top: 2px;
    }
    
    /* Dimmed category filter when no items match */
    .ing-filter-item.dimmed {
      opacity: 0.4;
    }
    .ing-filter-item.dimmed .count {
      background: #e5e7eb;
    }
    
    /* Cupboard Tabs */
    .cupboard-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 10px;
    }
    .cupboard-tab {
      flex: 1;
      padding: 10px 12px;
      font-size: 0.85rem;
      border: none;
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
      position: relative;
      z-index: 1;
    }
    .cupboard-tab:not(.active) {
      background: #e5e7eb;
      color: #4b5563;
    }
    .cupboard-tab:not(.active):hover {
      background: #d1d5db;
    }
    .cupboard-tab.active {
      background: #2D6A4F;
      color: white;
    }
    
    /* Cupboard tabs in panel (narrow) - compact style */
    .panel .cupboard-tabs {
      gap: 2px;
    }
    .panel .cupboard-tab {
      padding: 8px 8px;
      font-size: 0.75rem;
    }
    
    /* Cupboard tabs in fullscreen - more spacious */
    .fullscreen-panel .cupboard-tabs {
      max-width: 400px;
      margin-bottom: 16px;
    }
    .fullscreen-panel .cupboard-tab {
      padding: 12px 20px;
      font-size: 0.9rem;
    }
    
    /* Browse tab layout adjustments for narrow panel */
    .panel .ing-db-layout {
      display: block !important;
    }
    .panel .ing-db-sidebar {
      display: none !important;
    }
    .panel .ing-db-main {
      width: 100% !important;
    }
    .panel .ing-smart-filters {
      gap: 4px;
      flex-wrap: wrap;
    }
    .panel .ing-smart-filter {
      padding: 4px 8px;
      font-size: 0.65rem;
    }
    .panel .ing-db-cards {
      grid-template-columns: 1fr !important;
      gap: 6px;
      width: 100%;
    }
    .panel .ing-db-card {
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .panel .ing-db-card h4 {
      font-size: 0.85rem;
      margin: 0;
    }
    .panel .ing-db-card .cat-pill {
      font-size: 0.65rem;
    }
    
    /* Fullscreen browse tab - show sidebar (higher specificity to override .panel) */
    .fullscreen-panel.panel .ing-db-layout,
    .fullscreen-panel .ing-db-layout {
      display: grid !important;
      grid-template-columns: 200px 1fr !important;
    }
    .fullscreen-panel.panel .ing-db-sidebar,
    .fullscreen-panel .ing-db-sidebar {
      display: block !important;
    }
    .fullscreen-panel.panel .ing-db-main,
    .fullscreen-panel .ing-db-main {
      width: auto !important;
    }
    .fullscreen-panel.panel .ing-db-cards,
    .fullscreen-panel .ing-db-cards {
      grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
    }
    .fullscreen-panel.panel .ing-db-card,
    .fullscreen-panel .ing-db-card {
      display: block;
      padding: 12px;
    }
    
    /* Filter Drawer Overlay */
    .ing-filter-drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 2000;
      display: none;
    }
    .ing-filter-drawer-overlay.open {
      display: block;
    }
    .ing-filter-drawer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      border-radius: 20px 20px 0 0;
      padding: 20px;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      z-index: 2001;
      max-height: 70vh;
      overflow-y: auto;
    }
    .ing-filter-drawer-overlay.open .ing-filter-drawer {
      transform: translateY(0);
    }
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
    }
    .drawer-header h4 {
      font-size: 1.1rem;
      color: #1B4332;
    }
    .drawer-close-btn {
      width: 32px;
      height: 32px;
      border: none;
      background: #f0f0f0;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .drawer-categories {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .drawer-cat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 0.85rem;
    }
    .drawer-cat-item.selected {
      border-color: #2D6A4F;
      background: #D8F3DC;
    }
    .drawer-cat-item input {
      width: 18px;
      height: 18px;
      accent-color: #2D6A4F;
    }
    .drawer-apply-btn {
      width: 100%;
      padding: 14px;
      background: #2D6A4F;
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      margin-top: 16px;
      cursor: pointer;
    }
    .drawer-clear-btn {
      text-align: center;
      margin-top: 12px;
      color: #666;
      font-size: 0.9rem;
      cursor: pointer;
      background: none;
      border: none;
      width: 100%;
    }
    
    /* Responsive: tablet - 2 columns, hide sidebar */
    @media (max-width: 1024px) {
      .ing-db-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Responsive: mobile - 1 column, show drawer */
    @media (max-width: 768px) {
      .ing-db-layout {
        grid-template-columns: 1fr !important;
      }
      .ing-db-sidebar {
        display: none !important;
      }
      /* Override fullscreen-panel rules on mobile */
      .fullscreen-panel .ing-db-layout,
      .fullscreen-panel.panel .ing-db-layout {
        grid-template-columns: 1fr !important;
      }
      .fullscreen-panel .ing-db-sidebar,
      .fullscreen-panel.panel .ing-db-sidebar {
        display: none !important;
      }
      .ing-mobile-filter-bar {
        display: flex !important;
      }
      /* Mobile card layout for fullscreen panel - match mockup */
      .fullscreen-panel .ing-db-cards,
      .fullscreen-panel.panel .ing-db-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .fullscreen-panel .ing-db-card,
      .fullscreen-panel.panel .ing-db-card {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 14px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 10px !important;
      }
      .fullscreen-panel .ing-db-card h4,
      .fullscreen-panel.panel .ing-db-card h4 {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
      }
      /* Hide smart filters on mobile fullscreen - use drawer instead */
      .fullscreen-panel .ing-smart-filters,
      .fullscreen-panel.panel .ing-smart-filters {
        display: none !important;
      }
      .ing-db-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      /* Hide desktop header controls on mobile - use mobile filter bar instead */
      #cupboardBrowseTab > div:first-child {
        display: none !important;
      }
      /* Mobile filter bar results count */
      .ing-results-count {
        color: #666;
        font-size: 0.85rem;
        white-space: nowrap;
      }
    }
    
    @media (max-width: 500px) {
      .ing-db-cards {
        grid-template-columns: 1fr;
      }
      /* Smaller mobile filter bar on very small screens */
      .ing-mobile-filter-bar {
        padding: 10px !important;
        gap: 8px;
      }
      .ing-filter-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
      }
    }
    
    /* ========== STAPLES GRID ========== */
    .staples-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    @media (max-width: 1024px) {
      .staples-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .staple-card {
      background: white;
      border-radius: 12px;
      padding: 14px 16px;
      border: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s;
    }
    .staple-card:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .staple-card.stocked {
      background: #F0FDF4;
      border-color: #86EFAC;
    }
    .staple-card.needs-buy {
      background: #FFFBEB;
      border-color: #FCD34D;
    }
    .staple-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .staple-card.stocked .staple-icon {
      background: #D1FAE5;
      color: #059669;
    }
    .staple-card.needs-buy .staple-icon {
      background: #FEF3C7;
      color: #D97706;
    }
    .staple-info {
      flex: 1;
      min-width: 0;
    }
    .staple-name {
      font-weight: 600;
      font-size: 0.95rem;
      color: #1F2937;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .staple-meta {
      font-size: 0.75rem;
      color: #666;
      margin-top: 2px;
    }
    .staple-qty-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .staple-qty-btn {
      width: 28px;
      height: 28px;
      background: #f0f0f0;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .staple-qty-btn:hover {
      background: #e0e0e0;
    }
    .staple-qty {
      font-weight: 700;
      font-size: 0.9rem;
      min-width: 50px;
      text-align: center;
    }
    .staple-delete-btn {
      width: 28px;
      height: 28px;
      background: #FEE2E2;
      border: none;
      border-radius: 6px;
      color: #DC2626;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .staple-delete-btn:hover {
      background: #FECACA;
    }
    @media (max-width: 768px) {
      .staples-grid {
        grid-template-columns: 1fr;
      }
    }
  

#minimax-floating-ball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 12px;
  background: #222222;
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: #F8F8F8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  z-index: 9999;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

#minimax-floating-ball:hover {
  transform: translateY(-2px);
  background: #383838;
}
.minimax-ball-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.minimax-logo-wave {
  width: 26px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22' fill='none'%3E%3Cg clip-path='url(%23clip0_3442_102412)'%3E%3Cpath d='M12.8405 14.6775C12.8405 14.9897 13.0932 15.2424 13.4055 15.2424C13.7178 15.2424 13.9705 14.9897 13.9705 14.6775V2.98254C13.9705 1.88957 13.0809 1 11.9879 1C10.895 1 10.0054 1.88957 10.0054 2.98254V11.566V17.1068C10.0054 17.5773 9.62327 17.9594 9.1528 17.9594C8.68233 17.9594 8.30021 17.5773 8.30021 17.1068V8.04469C8.30021 6.95172 7.41063 6.06215 6.31767 6.06215C5.22471 6.06215 4.33513 6.95172 4.33513 8.04469V11.8855C4.33513 12.3559 3.953 12.7381 3.48254 12.7381C3.01207 12.7381 2.62994 12.3559 2.62994 11.8855V10.4936C2.62994 10.1813 2.37725 9.92861 2.06497 9.92861C1.7527 9.92861 1.5 10.1813 1.5 10.4936V11.8855C1.5 12.9784 2.38957 13.868 3.48254 13.868C4.5755 13.868 5.46508 12.9784 5.46508 11.8855V8.04469C5.46508 7.57422 5.8472 7.19209 6.31767 7.19209C6.78814 7.19209 7.17026 7.57422 7.17026 8.04469V17.1068C7.17026 18.1998 8.05984 19.0894 9.1528 19.0894C10.2458 19.0894 11.1353 18.1998 11.1353 17.1068V2.98254C11.1353 2.51207 11.5175 2.12994 11.9879 2.12994C12.4584 2.12994 12.8405 2.51207 12.8405 2.98254V14.6775Z' fill='%23F8F8F8'/%3E%3Cpath d='M23.3278 6.06215C22.2348 6.06215 21.3452 6.95172 21.3452 8.04469V15.6143C21.3452 16.0847 20.9631 16.4669 20.4926 16.4669C20.0222 16.4669 19.6401 16.0847 19.6401 15.6143V2.98254C19.6401 1.88957 18.7505 1 17.6575 1C16.5645 1 15.675 1.88957 15.675 2.98254V19.0175C15.675 19.4879 15.2928 19.8701 14.8224 19.8701C14.3519 19.8701 13.9698 19.4879 13.9698 19.0175V17.0329C13.9698 16.7206 13.7171 16.4679 13.4048 16.4679C13.0925 16.4679 12.8398 16.7206 12.8398 17.0329V19.0175C12.8398 20.1104 13.7294 21 14.8224 21C15.9153 21 16.8049 20.1104 16.8049 19.0175V2.98254C16.8049 2.51207 17.187 2.12994 17.6575 2.12994C18.128 2.12994 18.5101 2.51207 18.5101 2.98254V15.6143C18.5101 16.7072 19.3997 17.5968 20.4926 17.5968C21.5856 17.5968 22.4752 16.7072 22.4752 15.6143V8.04469C22.4752 7.57422 22.8573 7.19209 23.3278 7.19209C23.7982 7.19209 24.1804 7.57422 24.1804 8.04469V14.6775C24.1804 14.9897 24.4331 15.2424 24.7453 15.2424C25.0576 15.2424 25.3103 14.9897 25.3103 14.6775V8.04469C25.3103 6.95172 24.4207 6.06215 23.3278 6.06215Z' fill='%23F8F8F8'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3442_102412'%3E%3Crect width='25' height='22' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.minimax-ball-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.minimax-close-icon {
  margin-left: 8px;
  font-size: 16px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.minimax-close-icon:hover {
  opacity: 1;
}


      @keyframes adminFadeIn { from { opacity:0; } to { opacity:1; } }
      @keyframes adminSlideIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
      .admin-section { padding:16px 20px; border-bottom:1px solid #D8F3DC; }
      .admin-section:last-child { border-bottom:none; }
      .admin-label { display:block; margin-bottom:6px; color:#40916C; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; }
      .admin-select { width:100%; padding:10px 12px; border-radius:10px; border:2px solid #D8F3DC; font-size:0.85rem; background:#fff; color:#1B4332; cursor:pointer; transition:border-color 0.2s; }
      .admin-select:focus { outline:none; border-color:#40916C; }
      .admin-mono { font-family:monospace; font-size:0.8rem; background:#D8F3DC; color:#1B4332; padding:8px 12px; border-radius:8px; cursor:pointer; transition:all 0.2s; }
      .admin-mono:hover { background:#B7E4C7; }
      .admin-keys { max-height:70px; overflow-y:auto; background:#f8fdf9; padding:8px 10px; border-radius:8px; font-size:0.7rem; color:#52796F; border:1px solid #D8F3DC; }
      .admin-keys div { padding:2px 0; }
      .admin-btn { padding:10px 16px; border:none; border-radius:10px; cursor:pointer; font-size:0.8rem; font-weight:600; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
      .admin-btn:hover { transform:translateY(-1px); }
      .admin-btn-primary { background:linear-gradient(135deg,#2D6A4F,#40916C); color:white; }
      .admin-btn-primary:hover { box-shadow:0 4px 12px rgba(45,106,79,0.3); }
      .admin-btn-secondary { background:#E8F5E9; color:#2D6A4F; }
      .admin-btn-secondary:hover { background:#D8F3DC; }
      .admin-btn-purple { background:linear-gradient(135deg,#7C3AED,#8B5CF6); color:white; }
      .admin-btn-purple:hover { box-shadow:0 4px 12px rgba(139,92,246,0.3); }
      .admin-btn-pink { background:linear-gradient(135deg,#DB2777,#EC4899); color:white; }
      .admin-btn-pink:hover { box-shadow:0 4px 12px rgba(236,72,153,0.3); }
      .admin-btn-danger { background:#FEE2E2; color:#DC2626; }
      .admin-btn-danger:hover { background:#FECACA; }
      .admin-detail { margin-top:12px; }
      .admin-detail summary { cursor:pointer; font-size:0.8rem; color:#40916C; font-weight:600; padding:8px 0; }
      .admin-detail-content { padding-top:8px; display:flex; flex-direction:column; gap:8px; }
      .admin-hint { font-size:0.7rem; color:#74A892; margin-top:8px; line-height:1.4; }
    
    /* Safety net: hide loading overlay even if element exists */
    #loading-overlay { display: none !important; }