/* ═══════════════════════════════════════════════════════════════
   GRANDMA HARMONY — Complete Design System v48
   Primary: #5F8D4E (Sage Leaf Green)
   Background: #F4EFE6 (Warm Paper)
   Text: #2D3B2F (Forest Charcoal)
   Radius: 32px cards / 24px buttons
═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
    --gh-bg:           #F4EFE6;
    --gh-bg2:          #EFE8DC;
    --gh-bg3:          #FDFAF5;
    --gh-card:         #FFFFFF;
    --gh-green:        #5F8D4E;
    --gh-green-dark:   #4A7039;
    --gh-green-darker: #3A5A2C;
    --gh-green-light:  rgba(95,141,78,0.10);
    --gh-green-border: rgba(95,141,78,0.22);
    --gh-gold:         #C8A84A;
    --gh-gold-rich:    #B8960F;
    --gh-text:         #2D3B2F;
    --gh-text2:        #5B665C;
    --gh-muted:        #7B857B;
    --gh-border:       #ECE3D4;
    --gh-border2:      #E0D5C4;
    --gh-shadow:       0 10px 25px -5px rgba(45,59,47,0.08);
    --gh-shadow-sm:    0 2px 8px rgba(45,59,47,0.06);
    --r-card:          32px;
    --r-btn:           24px;
    --r-input:         14px;

    /* PRO tokens — DARK mode default (deep forest palette) */
    --pro-bg:              #1A2B1D;
    --pro-surface:         #243020;
    --pro-surface2:        #2D3B2F;
    --pro-border:          rgba(255,255,255,0.10);
    --pro-text:            #F4EFE6;
    --pro-sub:             #C8DACC;
    --pro-teal:            #7ABD66;
    --pro-teal-dark:       #5F8D4E;
    --pro-dropdown-bg:     #243020;
    --pro-dropdown-hover:  #2D3B2F;
    --pro-dropdown-border: rgba(255,255,255,0.10);
    --pro-dropdown-divider:rgba(255,255,255,0.08);
    --pro-dropdown-text:   #F4EFE6;
    --pro-dropdown-sub:    #C8DACC;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'DM Sans', 'Segoe UI', sans-serif;
    background: var(--gh-bg2);
    color: var(--gh-text);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

/* ── APP SHELL ── */
#appShell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 430px;
    margin: 0 auto;
    background: var(--gh-bg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0,0,0,0.2);
}

#appContent {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB NAV — 5 tabs, raised Grandma center button
═══════════════════════════════════════════════════════════════ */
.bottom-tab-nav {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background: #FFFFFF;
    border-top: 1px solid var(--gh-border);
    padding: 8px 4px 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    color: var(--gh-muted);
    padding: 0 10px;
    font-family: inherit;
    transition: color 0.2s;
    flex: 1;
}
.tab-btn.active { color: var(--gh-green); }
.tab-btn .tab-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.tab-btn .tab-icon svg { stroke: currentColor; }
.tab-btn.active .tab-icon svg { stroke: var(--gh-green); }

/* Center Grandma button — raised above nav bar */
.tab-btn.tab-center {
    position: relative;
    top: -14px;
    flex: none;
    padding: 0 6px;
    color: var(--gh-muted);
}
.tab-btn.tab-center .tab-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--gh-bg);
    overflow: hidden;
    background: var(--gh-green);
    box-shadow: 0 4px 18px rgba(95,141,78,0.45);
}
.tab-btn.tab-center .tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.tab-btn.tab-center.active .tab-icon {
    box-shadow: 0 4px 22px rgba(95,141,78,0.60);
}

/* ═══════════════════════════════════════════════════════════════
   FREE CONTENT HOME
═══════════════════════════════════════════════════════════════ */
#freeContent {
    background: var(--gh-bg);
    min-height: 100%;
}

.gh-page {
    display: flex;
    flex-direction: column;
    background: var(--gh-bg);
    min-height: 100%;
}

/* ── STICKY HEADER ── */
.gh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    background: var(--gh-bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

.gh-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gh-header-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gh-border);
    flex-shrink: 0;
}

.gh-header-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--gh-text);
    line-height: 1.1;
}

.gh-header-sub {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gh-green);
    font-weight: 700;
}

.gh-header-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 20px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gh-text);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--gh-shadow-sm);
}

/* ── HERO SECTION ── */
.gh-hero {
    margin: 4px 14px 0;
    background: white;
    border-radius: var(--r-card);
    border: 1px solid var(--gh-border);
    overflow: hidden;
    position: relative;
    min-height: 190px;
    box-shadow: var(--gh-shadow-sm);
}

.gh-hero-inner {
    display: flex;
    align-items: stretch;
    min-height: 190px;
    position: relative;
}

.gh-hero-text {
    padding: 22px 16px 20px 20px;
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 55%;
    max-width: 55%;
    flex-shrink: 0;
    position: relative;
}

.gh-hero-headline {
    font-size: 20px;
    font-weight: 800;
    color: var(--gh-text);
    line-height: 1.22;
    margin: 0 0 8px 0;
    font-style: italic;
}

.gh-hero-sub {
    font-size: 12px;
    color: var(--gh-text2);
    line-height: 1.55;
    margin: 0;
}

.gh-hero-img-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    background: transparent;
}

.gh-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 70%, transparent 100%);
}

/* ── AUTH BAR (below hero inside hero card) ── */
.gh-auth-bar { padding: 0 18px 16px; }
.gh-auth-logged-out {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
}
.gh-auth-logged-in {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding-top: 8px;
    flex-wrap: wrap;
}
.gh-username { font-size: 13px; font-weight: 600; color: var(--gh-text); }

/* ── 3-BUTTON ACTION ROW (Scan | BIG CENTER | Search) ── */
.gh-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 18px 8px;
}

.gh-action-side {
    flex: 1;
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 24px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--gh-shadow-sm);
    font-family: inherit;
    color: var(--gh-text);
}
.gh-action-side:active { transform: scale(0.96); }

.gh-action-side-ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gh-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text);
}

.gh-action-side-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--gh-text);
    text-align: center;
    line-height: 1.3;
}

.gh-action-center-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gh-green);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 6px 22px rgba(95,141,78,0.48);
    transition: transform 0.15s, box-shadow 0.15s;
}
.gh-action-center-btn:active {
    transform: scale(0.93);
    box-shadow: 0 3px 10px rgba(95,141,78,0.30);
}
.gh-action-center-btn svg { stroke: white; }

/* ── HOME SEARCH BAR ── */
.gh-home-search { margin: 8px 14px; }
.gh-home-search-bar {
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    box-shadow: var(--gh-shadow-sm);
    cursor: text;
}
.gh-home-search-bar input {
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--gh-muted);
    font-family: inherit;
    flex: 1;
    background: transparent;
    cursor: text;
}
.gh-home-search-bar input::placeholder { color: var(--gh-muted); }

/* ── QUICK LINK CARDS (2-col) ── */
.gh-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 14px;
}

.gh-quick-link-card {
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 22px;
    padding: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform 0.15s;
    box-shadow: var(--gh-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.gh-quick-link-card:active { transform: scale(0.97); }

.gh-quick-link-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--gh-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 16px;
}

.gh-quick-link-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gh-text);
    display: block;
}

.gh-quick-link-sub {
    font-size: 10px;
    color: var(--gh-muted);
    margin-top: 3px;
    display: block;
    line-height: 1.4;
}

/* ── FAMILY MATRIARCH SECTION ── */
.gh-matriarch-section {
    margin: 10px 14px;
    background: var(--gh-green-light);
    border: 1px solid var(--gh-green-border);
    border-radius: 26px;
    padding: 18px;
}

.gh-matriarch-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gh-matriarch-top-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gh-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gh-matriarch-top-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gh-text);
    line-height: 1.3;
}

.gh-matriarch-desc {
    font-size: 11px;
    color: var(--gh-text2);
    margin: 0 0 12px;
    line-height: 1.5;
}

.gh-family-avatars { display: flex; align-items: center; }

.gh-family-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid white;
    background: var(--gh-bg2);
    overflow: hidden;
    margin-left: -10px;
    flex-shrink: 0;
}
.gh-family-avatar:first-child { margin-left: 0; }
.gh-family-avatar img { width: 100%; height: 100%; object-fit: cover; }

.gh-family-avatar-add {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid white;
    background: var(--gh-bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    color: var(--gh-text2);
    margin-left: -10px;
    cursor: pointer;
}

.gh-family-count { font-size: 11px; color: var(--gh-text2); margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLABLE CONTENT SECTION
═══════════════════════════════════════════════════════════════ */
.gh-scroll {
    padding: 10px 14px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── GENERIC CARD ── */
.gh-card {
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: var(--r-card);
    padding: 20px;
    box-shadow: var(--gh-shadow-sm);
}

.gh-card-h {
    font-size: 15px;
    font-weight: 700;
    color: var(--gh-text);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gh-card-p {
    font-size: 13px;
    color: var(--gh-text2);
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── COLLAPSIBLE ── */
.gh-collapsible-h { cursor: pointer; justify-content: space-between; user-select: none; }
.gh-caret { font-size: 11px; color: var(--gh-muted); transition: transform 0.25s; }

/* ── STEPS ── */
.gh-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.gh-step { display: flex; gap: 12px; align-items: flex-start; }
.gh-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gh-green); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.gh-step-body { font-size: 13px; color: var(--gh-text2); line-height: 1.5; }
.gh-step-body strong { color: var(--gh-text); display: block; margin-bottom: 2px; }

/* ── LOCATION ── */
.gh-radius-wrap { margin-bottom: 14px; }
.gh-radius-lbl { font-size: 13px; color: var(--gh-text2); display: block; margin-bottom: 8px; }
.gh-slider { width: 100%; accent-color: var(--gh-green); cursor: pointer; }
.gh-radius-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--gh-muted); margin-top: 4px; }
.gh-loc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.gh-error-msg { color: #dc2626; font-size: 12px; margin-top: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; }

.gh-loc-pill-set {
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gh-text);
    box-shadow: var(--gh-shadow-sm);
}
.gh-loc-pill-text { flex: 1; font-weight: 600; }
.gh-loc-pill-change {
    background: none;
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gh-text2);
    cursor: pointer;
    font-family: inherit;
}

/* ── UPGRADE PRO CARD ── */
.gh-pro-card {
    background: #FDFAF2;
    border: 1.5px solid #E8D89A;
    border-radius: var(--r-card);
    padding: 20px;
    box-shadow: 0 4px 16px rgba(200,168,74,0.10);
}
.gh-pro-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.gh-pro-star { font-size: 20px; }
.gh-pro-heading { font-size: 17px; font-weight: 700; color: var(--gh-text); }

.gh-invite-box {
    background: white;
    border: 1px solid #EFE4B0;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}
.gh-invite-ico { font-size: 26px; flex-shrink: 0; }
.gh-invite-label { font-size: 13px; font-weight: 600; color: var(--gh-text); margin-bottom: 4px; }
.gh-invite-sub { font-size: 12px; color: var(--gh-text2); line-height: 1.4; }
.gh-invite-link { color: var(--gh-green); font-weight: 600; text-decoration: none; }

.gh-pro-features { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.gh-pro-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gh-text2); line-height: 1.4; }
.gh-pro-features li svg { color: var(--gh-green); flex-shrink: 0; margin-top: 2px; }

/* ── AI MATRIARCH CARD (in scroll section) ── */
.gh-matriarch-card {
    background: var(--gh-green-light);
    border: 1px solid var(--gh-green-border);
    border-radius: var(--r-card);
    padding: 18px;
}
.gh-matriarch-inner { display: flex; align-items: center; gap: 14px; }
.gh-matriarch-avatar {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover; border: 2px solid white; flex-shrink: 0;
}
.gh-matriarch-text h3 { font-size: 14px; font-weight: 700; color: var(--gh-text); margin: 0 0 6px; }
.gh-matriarch-text p { font-size: 12px; color: var(--gh-text2); margin: 0 0 10px; line-height: 1.5; }

/* ── QUICK ACTIONS ROW ── */
.gh-quick-section { margin: 0; }
.gh-quick-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--gh-muted); margin-bottom: 10px; padding: 0 2px; }

.gh-quick-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gh-quick-row::-webkit-scrollbar { display: none; }

.gh-quick-btn {
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: 20px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s;
    box-shadow: var(--gh-shadow-sm);
}
.gh-quick-btn:active { transform: scale(0.95); }
.gh-quick-btn span { font-size: 11px; font-weight: 600; color: var(--gh-text); text-align: center; }
.gh-quick-ico { font-size: 22px; }

/* ── FAMILY SECTION ── */
.gh-family-card { background: white; }
.gh-family-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gh-family-h { font-size: 15px; font-weight: 700; color: var(--gh-text); margin: 0; display: flex; align-items: center; gap: 6px; }
.gh-empty-family { text-align: center; padding: 20px; color: var(--gh-text2); font-size: 13px; }

/* ── SCAN CARD ── */
.gh-scan-controls { display: flex; align-items: stretch; gap: 12px; margin-top: 14px; }
.gh-scan-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.gh-scan-divider { display: flex; align-items: center; font-size: 12px; color: var(--gh-muted); font-weight: 500; padding: 0 2px; }
.gh-status-text { font-size: 12px; color: var(--gh-muted); text-align: center; min-height: 18px; }
.gh-w100 { width: 100%; }
.gh-mb0 { margin-bottom: 0 !important; }

/* ── SEARCH CARD ── */
.gh-search-bar { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.gh-search-input-wrap { flex: 1; position: relative; }
.gh-voice-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--gh-muted); padding: 4px; display: flex; align-items: center;
}
.gh-voice-status {
    font-size: 12px; color: var(--gh-green); margin-top: 8px; text-align: center;
    background: var(--gh-green-light); border-radius: 10px; padding: 8px;
}

/* ── FOOTER ── */
.gh-footer { text-align: center; padding: 20px 10px 10px; font-size: 11px; color: var(--gh-muted); line-height: 1.7; }
.gh-footer a { color: var(--gh-green); text-decoration: none; }
.gh-ver { font-size: 10px; color: #BFBAB1; margin-top: 6px; }

/* ── BACK TO TOP ── */
.back-to-top {
    position: fixed;
    bottom: 90px; right: 16px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gh-green);
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(95,141,78,0.35);
    z-index: 200;
}

/* ── BADGES ── */
.gh-badge-free {
    display: inline-block;
    background: var(--gh-green-light);
    border: 1px solid var(--gh-green-border);
    color: var(--gh-green-dark);
    font-size: 11px; font-weight: 600;
    padding: 4px 12px; border-radius: 20px;
}
.gh-pro-badge-pill {
    display: inline-block;
    background: var(--gh-green);
    color: white;
    font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 20px;
}
.gh-manage-btn {
    background: none; border: 1px solid var(--gh-green);
    color: var(--gh-green); font-size: 11px; font-weight: 600;
    padding: 5px 12px; border-radius: 10px; cursor: pointer; font-family: inherit;
}
.gh-scans-remaining { font-size: 11px; color: var(--gh-muted); margin-top: 6px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.gh-btn-green,
.gh-btn-teal {
    background: var(--gh-green);
    color: white; border: none;
    border-radius: var(--r-btn);
    padding: 13px 20px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.gh-btn-green:hover, .gh-btn-teal:hover { background: var(--gh-green-dark); }
.gh-btn-green:active, .gh-btn-teal:active { transform: scale(0.97); }

.gh-btn-gold {
    background: var(--gh-gold);
    color: white; border: none;
    border-radius: var(--r-btn);
    padding: 13px 20px;
    font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.gh-btn-gold:hover { background: var(--gh-gold-rich); }
.gh-btn-gold:active { transform: scale(0.97); }

.gh-btn-ghost,
.gh-btn-outline {
    background: white; color: var(--gh-text);
    border: 2px solid var(--gh-border2);
    border-radius: var(--r-btn);
    padding: 11px 20px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    transition: background 0.2s;
}
.gh-btn-ghost:hover, .gh-btn-outline:hover { background: var(--gh-bg); }

.gh-btn-teal-sm {
    background: var(--gh-green); color: white; border: none;
    border-radius: 16px; padding: 8px 16px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.gh-btn-gold-sm {
    background: var(--gh-gold); color: white; border: none;
    border-radius: 16px; padding: 8px 16px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.gh-btn-outline-sm {
    background: white; border: 1.5px solid var(--gh-border2);
    color: var(--gh-text); border-radius: 16px;
    padding: 7px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.gh-btn-upgrade-hero {
    background: var(--gh-gold); color: white; border: none;
    border-radius: 20px; padding: 10px 20px;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ── INPUT ── */
.gh-input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--gh-border);
    border-radius: var(--r-input);
    font-size: 14px; font-family: inherit;
    color: var(--gh-text); background: white;
    outline: none; transition: border-color 0.2s;
    margin-bottom: 10px;
}
.gh-input:focus { border-color: var(--gh-green); }
.gh-input::placeholder { color: var(--gh-muted); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT RESULTS — JS-injected
═══════════════════════════════════════════════════════════════ */
.results-card { background: var(--gh-bg); padding: 0; }

.product-info {
    background: white;
    border-radius: var(--r-card);
    margin: 10px 14px;
    border: 1px solid var(--gh-border);
    overflow: hidden;
    box-shadow: var(--gh-shadow-sm);
}

.product-header {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--gh-border);
}

.product-image {
    width: 80px; height: 80px;
    object-fit: contain;
    border-radius: 14px;
    background: var(--gh-bg);
    border: 1px solid var(--gh-border);
    padding: 6px; flex-shrink: 0;
}

.product-details { flex: 1; }
.product-details h2 { font-size: 16px; font-weight: 700; color: var(--gh-text); margin: 0 0 4px; line-height: 1.3; }
.product-details p { font-size: 12px; color: var(--gh-text2); margin: 0; }

.ingredient-analysis { padding: 16px 18px; }
.ingredient-analysis h3 { font-size: 14px; font-weight: 700; color: var(--gh-text); margin: 0 0 10px; }

/* Health score circle */
#healthScoreContainer { display: none; text-align: center; min-width: 68px; max-width: 68px; flex-shrink: 0; }
#healthScoreCircle {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 4px; border: 4px solid var(--gh-border);
}
#healthScoreValue { font-size: 22px; font-weight: 800; }
#healthScoreLabel { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

/* Organic / non-GMO badges */
.organic-badge {
    background: var(--gh-green-light);
    border: 1px solid var(--gh-green-border);
    color: var(--gh-green-dark);
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 12px; display: inline-block;
}

/* Tags */
.tag {
    display: inline-block; padding: 3px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
    background: var(--gh-bg); border: 1px solid var(--gh-border); color: var(--gh-text2);
    margin: 2px;
}

/* Ingredient list */
.ingredients-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ingredients-list .ingredient-tag {
    background: var(--gh-bg); border: 1px solid var(--gh-border);
    border-radius: 10px; padding: 4px 10px; font-size: 12px; color: var(--gh-text2);
}
.ingredients-list .ingredient-tag.warning { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.ingredients-list .ingredient-tag.danger { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }

/* Health concerns */
.health-concerns { margin-bottom: 12px; }
.concern-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px; border-radius: 12px; margin-bottom: 6px;
    font-size: 13px;
}
.concern-item.danger { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.concern-item.warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.concern-item.caution { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.concern-item.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.concern-item.clean { background: var(--gh-green-light); color: var(--gh-green-darker); border: 1px solid var(--gh-green-border); }

/* Loading */
.loading {
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 20px; text-align: center;
    color: var(--gh-text2); font-size: 14px;
}
.spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--gh-border);
    border-top-color: var(--gh-green);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    display: inline-block; margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Location info */
.location-info {
    background: var(--gh-green-light);
    border: 1px solid var(--gh-green-border);
    border-radius: 14px; padding: 10px 14px;
    font-size: 12px; color: var(--gh-green-dark);
    margin: 10px 14px 0; font-weight: 500;
}

/* ── ALTERNATIVES ── */
.alternatives-section {
    margin: 10px 14px;
    background: white;
    border: 1px solid var(--gh-border);
    border-radius: var(--r-card);
    padding: 18px;
    box-shadow: var(--gh-shadow-sm);
}
.alternatives-section h3 { font-size: 15px; font-weight: 700; color: var(--gh-text); margin: 0 0 14px; }

.alternative-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--gh-border);
    cursor: pointer; transition: background 0.15s;
}
.alternative-item:last-child { border-bottom: none; padding-bottom: 0; }
.alternative-item:first-child { padding-top: 0; }

.alternative-item img {
    width: 54px; height: 54px; object-fit: contain;
    border-radius: 12px; background: var(--gh-bg);
    border: 1px solid var(--gh-border); padding: 4px; flex-shrink: 0;
}

.alternative-info { flex: 1; min-width: 0; }
.alternative-name { font-size: 13px; font-weight: 700; color: var(--gh-text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alternative-brand { font-size: 11px; color: var(--gh-muted); margin-bottom: 3px; }
.alternative-price { font-size: 12px; font-weight: 600; color: var(--gh-text2); }

.alt-score {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid var(--gh-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: var(--gh-text); flex-shrink: 0;
}

/* Buy buttons */
.buy-button {
    background: var(--gh-green); color: white; border: none;
    border-radius: 14px; padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit; display: inline-block;
    text-align: center; text-decoration: none; transition: background 0.2s;
}
.buy-button:hover { background: var(--gh-green-dark); }

/* Store items */
.store-item {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 14px; margin-bottom: 6px;
    background: var(--gh-bg3); border: 1px solid var(--gh-border);
    font-size: 13px; color: var(--gh-text);
}
.store-item.best-price { background: var(--gh-green-light); border-color: var(--gh-green-border); }
.store-name { font-weight: 700; flex: 1; }
.store-price { font-weight: 800; color: var(--gh-green); font-size: 15px; }
.store-distance { font-size: 11px; color: var(--gh-muted); }

/* Scan again */
#scanAgainBtn {
    background: var(--gh-green) !important;
    box-shadow: 0 4px 12px rgba(95,141,78,0.30) !important;
    border-radius: var(--r-btn) !important;
}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE MODAL
═══════════════════════════════════════════════════════════════ */
.upgrade-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 9000;
    padding: 0; overflow-y: auto;
    backdrop-filter: blur(4px);
    align-items: flex-end; justify-content: center;
}
.upgrade-overlay.show {
    display: flex !important;
}
.upgrade-modal {
    width: 100%; max-width: 430px; margin: 0 auto;
    background: #FDFAF5; border-radius: 32px 32px 0 0;
    overflow: hidden; box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    position: relative;
}
.upgrade-header {
    background: linear-gradient(160deg, var(--gh-green) 0%, var(--gh-green-darker) 100%);
    padding: 30px 24px 24px; text-align: center; color: white;
}
.upgrade-icon { font-size: 40px; margin-bottom: 10px; }
.upgrade-title { font-size: 22px; font-weight: 800; color: white; margin: 0 0 8px; }
.upgrade-subtitle { font-size: 14px; color: rgba(255,255,255,0.85); margin: 0; }

.upgrade-features { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.upgrade-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gh-text2); line-height: 1.4; }
.upgrade-feature-icon { font-size: 18px; flex-shrink: 0; }
.upgrade-feature-text strong { color: var(--gh-text); }

.upgrade-buttons { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.upgrade-btn-primary {
    width: 100%; padding: 16px;
    background: var(--gh-green); color: white; border: none;
    border-radius: var(--r-btn); font-size: 16px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 16px rgba(95,141,78,0.35);
}
.upgrade-btn-primary:hover { background: var(--gh-green-dark); }
.upgrade-btn-secondary {
    width: 100%; padding: 14px; background: none;
    border: 1.5px solid var(--gh-border); color: var(--gh-text2);
    border-radius: var(--r-btn); font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}

#planMonthly, #planAnnual {
    padding: 16px; border-radius: 14px; margin-bottom: 10px;
    cursor: pointer; border: 2px solid var(--gh-border); transition: border-color 0.2s;
}
#planMonthly.selected, #planAnnual.selected {
    border-color: var(--gh-green); background: var(--gh-green-light);
}

/* Price comparison modal header */
#priceComparisonOverlay .upgrade-header {
    background: linear-gradient(135deg, var(--gh-green) 0%, var(--gh-green-darker) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   PRO CONTENT — Dark theme (preserved)
═══════════════════════════════════════════════════════════════ */
#proContent {
    display: none; flex-direction: column;
    height: 100%; background: var(--pro-bg);
    color: var(--pro-text); overflow: hidden;
}
/* ── PRO MODE: show pro shell, hide free shell ── */
body.pro-mode #proContent { display: flex !important; }
body.pro-mode #freeContent { display: none !important; }

.pro-header { background: var(--pro-surface); border-bottom: 1px solid var(--pro-border); flex-shrink: 0; }
.pro-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; min-height: 48px; }
.pro-top-actions { display: flex; align-items: center; gap: 6px; }
.pro-icon-btn { background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; transition: background 0.2s; font-size: 16px; color: var(--pro-text); }
.pro-icon-btn:hover { background: #F0EAE0; }
.pro-badge-sm { background: #5F8D4E; color: white; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.08em; }

.pro-tab-agent, .pro-tab-scan, .pro-tab-profile { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.pro-tab-agent.active, .pro-tab-scan.active, .pro-tab-profile.active { display: flex; }

.pro-agent-area { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pro-messages { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }

.pro-welcome { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 28px 16px 20px; gap: 8px; }
.pro-welcome-icon { margin-bottom: 8px; }
.pro-welcome h2 { font-size: 20px; font-weight: 700; color: var(--pro-text); margin: 0; }
.pro-welcome p { font-size: 14px; color: var(--pro-sub); margin: 0; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   PRO INTELLIGENCE HUB
   Fills empty home-screen space; hides with #proWelcome on chat start
═══════════════════════════════════════════════════════════════ */
.pih-root {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* ── Feature Grid ── */
.pih-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pih-card {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--pro-border);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pih-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pih-icon-green { background: var(--pro-teal); }
.pih-icon-tan   { background: #D9C5A1; }
.pih-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pro-text);
    margin: 0;
}
.pih-card-body {
    font-size: 10px;
    color: var(--pro-sub);
    margin: 0;
    line-height: 1.45;
}

/* ── Connected Appliances ── */
.pih-integration {
    background: rgba(95,141,78,0.10);
    border: 1px solid rgba(95,141,78,0.22);
    border-radius: 20px;
    padding: 14px 16px;
}
.pih-integration-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pih-integration-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pro-teal);
}
.pih-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: pih-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pih-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.8); }
}
.pih-integration-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pih-logo-chip {
    background: var(--pro-surface);
    border: 1px solid var(--pro-border);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 30px;
    box-sizing: border-box;
}
.pih-samsung-logo {
    height: 11px;
    opacity: 0.70;
    display: block;
}
.pih-samsung-fallback {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--pro-text);
    opacity: 0.70;
}
.pih-integration-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--pro-text);
    margin: 0;
    line-height: 1.4;
}

/* ── Pro Insights strip ── */
.pih-insights-section { display: flex; flex-direction: column; gap: 8px; }
.pih-insights-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pro-sub);
    margin: 0;
    padding: 0 2px;
}
.pih-insights-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pih-insights-scroll::-webkit-scrollbar { display: none; }
.pih-insight-card {
    min-width: 148px;
    max-width: 148px;
    background: var(--pro-surface);
    border: 1px solid var(--pro-border);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.pih-insight-icon  { font-size: 18px; line-height: 1; }
.pih-insight-tag   { font-size: 11px; font-weight: 700; color: var(--pro-text); }
.pih-insight-text  { font-size: 9px; color: var(--pro-sub); line-height: 1.45; }

.pro-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 0; }
.pro-chips::-webkit-scrollbar { display: none; }
.pro-chip { background: #FDFAF5; border: 1px solid #ECE3D4; color: var(--pro-sub); font-size: 12px; padding: 7px 12px; border-radius: 20px; white-space: nowrap; cursor: pointer; transition: background 0.2s; font-family: inherit; }
.pro-chip:hover { background: #F0EAE0; }

.pro-input-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; background: var(--pro-surface); border-top: 1px solid var(--pro-border); flex-shrink: 0; }
.pro-scan-btn { background: #F0EAE0; border: 1px solid #ECE3D4; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--pro-sub); font-family: inherit; flex-shrink: 0; }
.pro-scan-label { font-size: 9px; font-weight: 600; }
.pro-input-wrap { flex: 1; }
.pro-text-input { width: 100%; background: #FDFAF5; border: 1.5px solid #ECE3D4; border-radius: 14px; padding: 11px 14px; font-size: 14px; color: var(--pro-text); font-family: inherit; outline: none; transition: border-color 0.2s; }
.pro-text-input::placeholder { color: #AEABA5; }
.pro-text-input:focus { border-color: var(--pro-teal); }
.pro-voice-btn { position: static !important; transform: none !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; background: #F0EAE0 !important; border: 1px solid #ECE3D4 !important; flex-shrink: 0; cursor: pointer; font-size: 18px; }

.pro-scanner-view { overflow-y: auto; padding: 12px; flex: 1; }
.pro-scanner-card { background: var(--pro-surface); border: 1px solid var(--pro-border); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.pro-scanner-card h3 { font-size: 14px; font-weight: 600; color: var(--pro-text); margin: 0 0 12px; }
.pro-scanner-card input { width: 100%; padding: 10px 12px; background: #FDFAF5; border: 1px solid var(--pro-border); border-radius: 10px; color: var(--pro-text); font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }

/* ── Pro Profile Page ──────────────────────────────────────────── */
.pro-tab-profile.active { flex-direction: column; overflow-y: auto; background: #F4EFE6; }

.pro-profile-header { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 20px; background: #FDFAF5; border-bottom: 1px solid #ECE3D4; }
.pro-profile-avatar-wrap { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 3px solid #ECE3D4; margin-bottom: 12px; background: #F4EFE6; }
.pro-profile-avatar { width: 100%; height: 100%; object-fit: cover; }
.pro-profile-name { font-size: 20px; font-weight: 700; color: #2D3B2F; margin-bottom: 8px; font-family: inherit; }
.pro-profile-badge { background: #5F8D4E; color: white; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }

.pro-menu-list { background: #FDFAF5; margin: 16px 0 0; }
.pro-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ECE3D4; cursor: pointer; transition: background 0.15s; }
.pro-menu-item:first-child { border-top: 1px solid #ECE3D4; }
.pro-menu-item:hover { background: #F4EFE6; }
.pro-menu-item:active { background: #ECE3D4; }
.pro-menu-item-left { display: flex; align-items: center; gap: 14px; }
.pro-menu-icon { font-size: 18px; width: 22px; text-align: center; }
.pro-menu-label { font-size: 15px; font-weight: 500; color: #2D3B2F; }
.pro-menu-right { display: flex; align-items: center; gap: 6px; }
.pro-menu-count { font-size: 13px; color: #7B857B; }
.pro-menu-arrow { font-size: 20px; color: #C4BBAE; font-weight: 300; }

.pro-logout-row { padding: 24px 20px; text-align: center; }
.pro-logout-btn { background: none; border: none; font-size: 15px; font-weight: 500; color: #7B857B; cursor: pointer; font-family: inherit; padding: 8px 24px; }
.pro-logout-btn:hover { color: #2D3B2F; }

.pro-profile-view { overflow-y: auto; padding: 0; }
#proProfileMain { display: flex; flex-direction: column; }
#proFamilySubScreen { display: none; }

.pro-bubble { max-width: 85%; padding: 12px 14px; border-radius: 18px; font-size: 14px; line-height: 1.55; }
.pro-bubble.user { background: var(--pro-teal); color: white; border-radius: 18px 18px 4px 18px; }
.pro-bubble.assistant { background: var(--pro-surface2); color: var(--pro-text); border: 1px solid var(--pro-border); border-radius: 18px 18px 18px 4px; }

#proSettingsDropdown { background: var(--pro-dropdown-bg); border: 1px solid var(--pro-dropdown-border); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════════════════════
   CHAT SHEET — Ask Grandma Harmony (light warm theme)
═══════════════════════════════════════════════════════════════ */
.hc-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: #FDFAF5; border-radius: 28px 28px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.12); z-index: 8000; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.32,0.72,0,1); transform: translateY(100%); max-height: 90dvh; }
.hc-sheet.open { transform: translateY(0); }
.hc-drag { display: flex; justify-content: center; padding: 10px 0 4px; flex-shrink: 0; }
.hc-drag-bar { width: 40px; height: 4px; background: #ECE3D4; border-radius: 4px; }
.hc-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px; border-bottom: 1px solid #ECE3D4; flex-shrink: 0; }
.hc-header-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #ECE3D4; }
.hc-header-av img { width: 100%; height: 100%; object-fit: cover; }
.hc-header-info { flex: 1; }
.hc-header-name { font-size: 14px; font-weight: 700; color: #2D3B2F; }
.hc-header-status { font-size: 11px; color: #5F8D4E; font-weight: 600; }
.hc-sheet-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #ECE3D4; flex-shrink: 0; }
.hc-sheet-title { font-size: 15px; font-weight: 700; color: #2D3B2F; flex: 1; }
.hc-sheet-close { background: #F0EAE0; border: none; color: #5B665C; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.hc-header-btn { background: #F0EAE0; border: none; color: #5B665C; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; flex-shrink: 0; transition: background 0.15s; }
.hc-header-btn:active { background: #ECE3D4; }
#chatSheet.hc-dark .hc-header-btn { background: rgba(255,255,255,0.10); color: #C8DACC; }
.hc-messages { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.hc-msg { display: flex; flex-direction: column; }
.hc-msg.user { align-items: flex-end; }
.hc-msg.assistant { align-items: flex-start; }
.hc-bubble { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.55; }
.hc-bubble.user { background: #5F8D4E; color: white; border-radius: 18px 18px 4px 18px; }
.hc-bubble.assistant { background: white; color: #2D3B2F; border: 1px solid #ECE3D4; border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.hc-input-row { display: flex; gap: 8px; padding: 10px 14px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid #ECE3D4; flex-shrink: 0; background: #FDFAF5; }
.hc-input { flex: 1; background: white; border: 1.5px solid #ECE3D4; border-radius: 22px; padding: 11px 16px; font-size: 14px; color: #2D3B2F; font-family: inherit; outline: none; transition: border-color 0.2s; }
.hc-input:focus { border-color: #5F8D4E; }
.hc-input::placeholder { color: #B8AFA5; }
.hc-send-btn { background: #5F8D4E; border: none; border-radius: 50%; width: 42px; height: 42px; color: white; font-size: 18px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hc-send-btn:active { background: #4A7039; transform: scale(0.94); }
.hc-typing { display: flex; gap: 5px; padding: 10px 14px; background: white; border-radius: 18px; border: 1px solid #ECE3D4; width: fit-content; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; background: #5F8D4E; animation: hc-bounce 1.2s ease-in-out infinite; opacity: 0.6; }
.hc-dot:nth-child(2) { animation-delay: 0.2s; }
.hc-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes hc-bounce { 0%,80%,100%{ transform: scale(0.8); opacity: 0.4; } 40%{ transform: scale(1.2); opacity: 1; } }
/* Chat tab bar inside sheet */
.hc-tab-bar { display: flex; border-top: 1px solid #ECE3D4; flex-shrink: 0; background: white; }
.hc-tab { flex: 1; padding: 12px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 11px; color: #9CAC99; font-weight: 600; }
.hc-tab.active, .hc-tab[data-active="true"] { color: #5F8D4E; }
.hc-tab-icon { font-size: 20px; }
.hc-tab-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.hc-tab.active .hc-tab-dot { background: #5F8D4E; }

/* Pro Agent chat row layout */
.hc-msg-row { display: flex; align-items: flex-end; gap: 8px; }
.hc-msg-row.user { flex-direction: row-reverse; }
.hc-msg-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.hc-msg-av img { width: 100%; height: 100%; object-fit: cover; }
/* Pro Agent bubble aliases (JS uses these class names) */
.hc-bubble-user { background: #5F8D4E; color: white; border-radius: 18px 18px 4px 18px; }
.hc-bubble-agent { background: #FDFAF5; color: #2D3B2F; border: 1px solid #ECE3D4; border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════════
   LEGACY / COMPAT CLASSES (JS-injected HTML)
═══════════════════════════════════════════════════════════════ */
.btn-primary { background: var(--gh-green); color: white; border: none; border-radius: var(--r-btn); padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; justify-content: center; transition: background 0.2s; }
.btn-primary:hover { background: var(--gh-green-dark); }
.btn-secondary { background: white; border: 2px solid var(--gh-border2); color: var(--gh-text); border-radius: var(--r-btn); padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-gold { background: var(--gh-gold); color: white; border: none; border-radius: var(--r-btn); padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.card { background: white; border: 1px solid var(--gh-border); border-radius: var(--r-card); padding: 18px; box-shadow: var(--gh-shadow-sm); margin-bottom: 12px; }
.modal-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gh-muted); }

.family-member-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gh-border); }
.family-member-item:last-child { border-bottom: none; }
.family-member-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gh-bg2); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 2px solid white; }
.family-member-info { flex: 1; min-width: 0; }
.family-member-name { font-size: 14px; font-weight: 700; color: var(--gh-text); }
.family-member-tags { font-size: 11px; color: var(--gh-muted); margin-top: 2px; }
.family-member-goal { font-size: 11px; color: var(--gh-text2); margin-top: 2px; }

.sponsored-card { background: white; border: 1px solid var(--gh-border); border-radius: 20px; padding: 14px; box-shadow: var(--gh-shadow-sm); }

#voiceStatus { background: var(--gh-green-light); border: 1px solid var(--gh-green-border); color: var(--gh-green-dark); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; text-align: center; margin-top: 10px; }

#reader video { border-radius: 14px; }
#reader { border-radius: 14px; overflow: hidden; }
#proReader video { border-radius: 10px; }
#proReader { border-radius: 10px; overflow: hidden; }

#compatNodes { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; opacity: 0; }

/* PRO LIGHT MODE — Grandma Harmony warm paper palette */
body.pro-light {
    --pro-bg:              #F4EFE6;
    --pro-surface:         #FDFAF5;
    --pro-surface2:        #F0EAE0;
    --pro-border:          #ECE3D4;
    --pro-text:            #2D3B2F;
    --pro-sub:             #7B857B;
    --pro-teal:            #5F8D4E;
    --pro-teal-dark:       #4A7039;
    --pro-dropdown-bg:     #FDFAF5;
    --pro-dropdown-hover:  #F4EFE6;
    --pro-dropdown-border: #ECE3D4;
    --pro-dropdown-divider:#ECE3D4;
    --pro-dropdown-text:   #2D3B2F;
    --pro-dropdown-sub:    #7B857B;
}

/* ── RESPONSIVE ── */
@media (max-width: 430px) {
    #appShell { max-width: 100%; box-shadow: none; }
}
@media (min-width: 431px) {
    #appShell { border-radius: 44px; margin: 20px auto; height: calc(100dvh - 40px); box-shadow: 0 0 0 8px #1a1a1a, 0 0 0 10px #2a2a2a, 0 40px 80px rgba(0,0,0,0.25); }
    #searchPageOverlay, #scannerPageOverlay { top: 20px; bottom: 20px; border-radius: 44px; overflow: hidden; }
}

/* ── UPGRADE MODAL — new Grandma Harmony design ── */
.upgrade-modal { position: relative; background: #FDFAF5; border-radius: 32px 32px 0 0 !important; overflow: hidden; }
.upgrade-btn-primary { background: linear-gradient(135deg, #5F8D4E, #4A7039); color: white; border: none; border-radius: 24px; padding: 16px 28px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; width: 100%; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 6px 20px rgba(95,141,78,0.38); }
.upgrade-btn-primary:active { transform: scale(0.97); }
.upgrade-features { display: flex; flex-direction: column; gap: 12px; }
.upgrade-feature { display: flex; align-items: center; gap: 12px; }
.upgrade-feature-text { font-size: 14px; color: #2D3B2F; }
/* Remove old upgrade-header, upgrade-icon, upgrade-title styles (replaced) */
.upgrade-header { display: none; }
.upgrade-icon, .upgrade-title, .upgrade-subtitle { display: none; }
.upgrade-buttons { display: none; }
.upgrade-btn-secondary { display: none; }

/* Chat overlay — no FAB in new design; overlay still used by agent sheet */
#chatOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 899; display: none; }
#chatOverlay.show { display: block; }

/* ── MEAL DETAIL PANEL ── */
.meal-detail-tab {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #7B857B;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -2px;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.meal-detail-tab.active {
    color: #5F8D4E;
    border-bottom-color: #5F8D4E;
}
.meal-tab-content {
    padding: 0;
    background: #F4EFE6;
}
#mealDetailIngredients .meal-ing-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #ECE3D4;
    background: #FDFAF5;
    gap: 12px;
}
#mealDetailIngredients .meal-ing-emoji {
    font-size: 26px;
    width: 36px;
    flex-shrink: 0;
    text-align: center;
}
#mealDetailIngredients .meal-ing-name {
    flex: 1;
    font-size: 15px;
    color: #2D3B2F;
    font-weight: 500;
}
#mealDetailIngredients .meal-ing-price {
    font-size: 15px;
    font-weight: 700;
    color: #2D3B2F;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT SHEET VOICE UI — all hc- component classes
═══════════════════════════════════════════════════════════════ */
.hc-input-area {
    flex-shrink: 0;
    padding: 14px 16px max(20px, env(safe-area-inset-bottom));
    background: #FDFAF5;
    border-top: 1px solid #ECE3D4;
}
.hc-voice-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0 4px;
}
.hc-mic-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5F8D4E, #4A7039);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(95,141,78,0.38);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hc-mic-btn:active { transform: scale(0.93); box-shadow: 0 2px 8px rgba(95,141,78,0.25); }
.hc-mic-label {
    font-size: 13px;
    color: #7B857B;
    font-weight: 500;
}
.hc-text-toggle {
    background: none;
    border: none;
    font-size: 13px;
    color: #5F8D4E;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hc-text-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.hc-text-field {
    flex: 1;
    background: white;
    border: 1.5px solid #ECE3D4;
    border-radius: 22px;
    padding: 11px 16px;
    font-size: 14px;
    color: #2D3B2F;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.hc-text-field:focus { border-color: #5F8D4E; }
.hc-text-field::placeholder { color: #B8AFA5; }
.hc-back-voice {
    display: block;
    margin: 8px auto 0;
    background: none;
    border: none;
    font-size: 13px;
    color: #7B857B;
    cursor: pointer;
    font-family: inherit;
}
.hc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 6px;
    flex-shrink: 0;
}
.hc-chip {
    padding: 8px 14px;
    background: white;
    border: 1.5px solid #ECE3D4;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #2D3B2F;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.hc-chip:active { background: #F4EFE6; border-color: #5F8D4E; }

/* ── Pro Gate (chat sheet, free users) ── */
.hc-pro-gate {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
    text-align: center;
    background: #FDFAF5;
}
.hc-pro-gate h3 {
    font-size: 20px;
    font-weight: 800;
    color: #2D3B2F;
    margin: 0 0 10px;
    line-height: 1.25;
}
.hc-pro-gate p {
    font-size: 14px;
    color: #7B857B;
    line-height: 1.6;
    margin: 0 0 6px;
}
.hc-pro-gate-btn {
    margin-top: 20px;
    background: linear-gradient(135deg, #5F8D4E, #4A7039);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 20px rgba(95,141,78,0.38);
    transition: transform 0.15s;
}
.hc-pro-gate-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════
   FREE PATH DARK MODE — body.hc-dark
   Applied by toggleChatDarkMode() in chat-ui.js
   Also sets hc-dark on #chatSheet element
═══════════════════════════════════════════════════════════════ */
body.hc-dark {
    --gh-bg:             #1A2B1D;
    --gh-bg2:            #162318;
    --gh-bg3:            #243020;
    --gh-card:           #243020;
    --gh-green:          #7ABD66;
    --gh-green-dark:     #5F8D4E;
    --gh-green-darker:   #4A7039;
    --gh-green-light:    rgba(122,189,102,0.12);
    --gh-green-border:   rgba(122,189,102,0.25);
    --gh-text:           #F4EFE6;
    --gh-text2:          #D4E2CF;
    --gh-border:         rgba(255,255,255,0.10);
    --gh-border2:        rgba(255,255,255,0.07);
    --gh-muted:          #C0D4BB;
    --gh-gold:           #D4A840;
    --gh-shadow-sm:      0 1px 4px rgba(0,0,0,0.35);
    --gh-shadow-md:      0 4px 16px rgba(0,0,0,0.40);
}

/* Chat sheet surface */
#chatSheet.hc-dark { background: #1A2B1D; }
#chatSheet.hc-dark .hc-drag-bar { background: rgba(255,255,255,0.15); }

/* Header */
#chatSheet.hc-dark .hc-header { border-bottom-color: rgba(255,255,255,0.08); }
#chatSheet.hc-dark .hc-header-av { border-color: rgba(255,255,255,0.15); }
#chatSheet.hc-dark .hc-header-name { color: #F4EFE6; }
#chatSheet.hc-dark .hc-header-status { color: #7ABD66; }
#chatSheet.hc-dark .hc-sheet-title { color: #F4EFE6; }
#chatSheet.hc-dark .hc-sheet-close { background: rgba(255,255,255,0.10); color: #C8DACC; }

/* Tab bar */
#chatSheet.hc-dark .hc-tab-bar { background: #162318; border-top-color: rgba(255,255,255,0.08); }
#chatSheet.hc-dark .hc-tab { color: rgba(255,255,255,0.35); }
#chatSheet.hc-dark .hc-tab.active,
#chatSheet.hc-dark .hc-tab[data-active="true"] { color: #7ABD66; }
#chatSheet.hc-dark .hc-tab.active .hc-tab-dot { background: #7ABD66; }

/* Messages area */
#chatSheet.hc-dark .hc-messages { background: #1A2B1D; }
#chatSheet.hc-dark .hc-bubble.assistant,
#chatSheet.hc-dark .hc-bubble-agent { background: #243020; color: #F4EFE6; border-color: rgba(255,255,255,0.10); }

/* Typing indicator */
#chatSheet.hc-dark .hc-typing { background: #243020; border-color: rgba(255,255,255,0.10); }
#chatSheet.hc-dark .hc-dot { background: #7ABD66; }

/* Input area */
#chatSheet.hc-dark .hc-input-area { background: #162318; border-top-color: rgba(255,255,255,0.08); }
#chatSheet.hc-dark .hc-input,
#chatSheet.hc-dark .hc-text-field { background: #243020; border-color: rgba(255,255,255,0.12); color: #F4EFE6; }
#chatSheet.hc-dark .hc-input::placeholder,
#chatSheet.hc-dark .hc-text-field::placeholder { color: rgba(255,255,255,0.28); }
#chatSheet.hc-dark .hc-mic-label { color: #C8DACC; }
#chatSheet.hc-dark .hc-text-toggle { color: #7ABD66; }
#chatSheet.hc-dark .hc-back-voice { color: #C8DACC; }

/* Chips */
#chatSheet.hc-dark .hc-chips { background: #1A2B1D; }
#chatSheet.hc-dark .hc-chip { background: #243020; border-color: rgba(255,255,255,0.12); color: #F4EFE6; }

/* Pro Gate */
#chatSheet.hc-dark .hc-pro-gate { background: #1A2B1D; }
#chatSheet.hc-dark .hc-pro-gate h3 { color: #F4EFE6; }
#chatSheet.hc-dark .hc-pro-gate p { color: #C8DACC; }

/* Scan / Profile placeholder tabs */
#chatSheet.hc-dark #hcTabScan,
#chatSheet.hc-dark #hcTabProfile { background: #1A2B1D !important; }
#chatSheet.hc-dark #hcTabScan h3,
#chatSheet.hc-dark #hcTabProfile h3 { color: #F4EFE6 !important; }
#chatSheet.hc-dark #hcTabScan p,
#chatSheet.hc-dark #hcTabProfile p { color: #C8DACC !important; }

/* Old hc-input-row (legacy alias) */
#chatSheet.hc-dark .hc-input-row { background: #162318; border-top-color: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════════════════════════════
   WHITE CARDS — keep dark text in dark mode (per user spec)
   Any card with a white/light background must NOT inherit the
   light CSS variable text colors from body.hc-dark.
═══════════════════════════════════════════════════════════════ */

/* Quick link cards (Set Location, Go Premium) */
body.hc-dark .gh-quick-link-card { background: white; }
body.hc-dark .gh-quick-link-card .gh-quick-link-title { color: #2D3B2F; }
body.hc-dark .gh-quick-link-card .gh-quick-link-sub { color: #7B857B; }
body.hc-dark .gh-quick-link-card .gh-quick-link-ico { background: #F4EFE6; }

/* Scan Barcode / Search Product side action buttons */
body.hc-dark .gh-action-side { background: white; color: #2D3B2F; }
body.hc-dark .gh-action-side-ico { background: #F4EFE6; color: #2D3B2F; }
body.hc-dark .gh-action-side-lbl { color: #2D3B2F; }

/* Home search bar */
body.hc-dark .gh-home-search-bar { background: white; }
body.hc-dark .gh-home-search-bar input { color: #5B665C; }
body.hc-dark .gh-home-search-bar input::placeholder { color: #9EAD97; }

/* Generic white gh-card (How to Use, collapsibles, etc.) */
body.hc-dark .gh-card { background: white; }
body.hc-dark .gh-card .gh-card-h { color: #2D3B2F; }
body.hc-dark .gh-card .gh-card-p { color: #7B857B; }
body.hc-dark .gh-card .gh-step-body { color: #7B857B; }
body.hc-dark .gh-card .gh-step-body strong { color: #2D3B2F; }
body.hc-dark .gh-card .gh-caret { color: #9EAD97; }
body.hc-dark .gh-card .gh-radius-lbl { color: #7B857B; }

/* Quick action cards in the scrollable home area */
body.hc-dark .gh-quick-action-card { background: white; }
body.hc-dark .gh-quick-action-lbl { color: #2D3B2F; }

/* Hero / promo banner card */
body.hc-dark .gh-hero { background: white; }
body.hc-dark .gh-hero-headline { color: #2D3B2F; }
body.hc-dark .gh-hero-sub { color: #7B857B; }
body.hc-dark .gh-username { color: #2D3B2F; }