/*
 * plenkin.css — global design system for the Plenkin shopping app.
 *
 * Design tokens (CSS variables) are declared on :root and cover the green
 * brand palette, neutral tones, semantic colors (amber/red/blue), border
 * styles, border-radius steps, and the standard drop shadow.
 *
 * Layout: the app renders inside a fixed 390×844 px .device frame that
 * simulates an iPhone. On mobile viewports (≤768px) the frame expands to
 * fill the full screen via the media query at the bottom of this file.
 *
 * Section order:
 *   Reset & root → Device shell → Screen → Status bar → Scrollable area
 *   → Bottom nav → Top bar → Cards → Buttons → Badges → Typography
 *   → Dot pulse loader → Progress bar → Check circle → List items
 *   → Upload zone → AI status bar → Category heading → Stat rows
 *   → Category bars (Insights) → Store pills → List cards → Hero card
 *   → 2-col grid → Avatars → Paywall → Image containers → Or-divider
 *   → Icon sizes → Color utilities → Greeting → Empty state → Toast
 *   → Form elements → Utility classes → Demo stage → Mobile media query
 */

/* ── Reset & root ───────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    /* height: 100%;
    overflow: hidden;
    background: #0f0f0f;*/
    height: 100%;
    overflow-x: hidden; /* was: overflow: hidden */
    overflow-y: auto; /* was: overflow: hidden */
    background: #0f0f0f;
}

:root {
    --g: #2D6A4F;
    --gl: #EAF3DE;
    --gm: #52B788;
    --g2: #1B4332;
    --cream: #F7F5F0;
    --white: #ffffff;
    --dark: #111111;
    --muted: #6E6E6E;
    --border: rgba(0,0,0,0.07);
    --border2: rgba(0,0,0,0.12);
    --amber: #B45309;
    --amberl: #FEF3C7;
    --red: #DC2626;
    --redl: #FEE2E2;
    --blue: #1D4ED8;
    --bluel: #DBEAFE;
    --radius: 22px;
    --radiuss: 14px;
    --radiusxs: 10px;
    --shadow: 0 2px 16px rgba(0,0,0,0.08);
}

body {
    font-family: 'DM Sans', sans-serif;
    background: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Device shell ───────────────────────────────────────────────────── */
.device {
    width: 390px;
    height: 844px;
    background: var(--cream);
    border-radius: 48px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 10px #1a1a1a, 0 0 0 11px #333, 0 30px 80px rgba(0,0,0,0.6);
}

.notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 34px;
    background: #0f0f0f;
    border-radius: 0 0 20px 20px;
    z-index: 100;
}

/* ── Screen ─────────────────────────────────────────────────────────── */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cream);
    overflow: hidden;
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.statusbar {
    height: 50px;
    padding: 14px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* ── Scrollable content ─────────────────────────────────────────────── */
.scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 120px;
}

.scrollable::-webkit-scrollbar { display: none; }

/* ── Bottom nav ─────────────────────────────────────────────────────── */
.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88px;
    background: rgba(247,245,240,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 0.5px solid var(--border2);
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
    z-index: 50;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.15s;
    padding: 4px 0;
    background: none;
    border: none;
    font-family: 'DM Sans', sans-serif;
}

.nav-item i { font-size: 24px; transition: transform 0.15s; }
.nav-item.active { color: var(--g); }
.nav-item.active i { transform: scale(1.1); }

.nav-item.center-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--g);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
    box-shadow: 0 4px 20px rgba(45,106,79,0.4);
    flex: none;
    font-size: 26px;
    cursor: pointer;
    border: none;
    padding: 0;
}

.nav-item.center-btn i { color: white; font-size: 26px; }

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar {
    padding: 8px 20px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.back-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 0.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--dark);
    flex-shrink: 0;
}

.topbar-title { font-size: 18px; font-weight: 500; color: var(--dark); }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 0.5px solid var(--border);
    padding: 20px;
    margin-bottom: 14px;
}

.card-sm { border-radius: var(--radiuss); padding: 14px 16px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    border: none;
    border-radius: var(--radiuss);
    padding: 16px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.15s, transform 0.1s;
}

.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--g); color: white; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: var(--white); color: var(--g); border: 1.5px solid var(--g); }
.btn-ghost { background: transparent; color: var(--muted); font-size: 14px; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.badge-g { background: var(--gl); color: var(--g); }
.badge-a { background: var(--amberl); color: var(--amber); }
.badge-r { background: var(--redl); color: var(--red); }
.badge-b { background: var(--bluel); color: var(--blue); }

/* ── Typography ─────────────────────────────────────────────────────── */
.serif { font-family: 'DM Serif Display', serif; }

.label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 20px 0 10px;
}

/* ── Dot pulse ──────────────────────────────────────────────────────── */
.dots { display: flex; gap: 5px; align-items: center; }

.dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g);
    animation: dp 1.2s ease-in-out infinite;
}

.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }

@keyframes dp {
    0%, 80%, 100% { opacity: .2; }
    40% { opacity: 1; }
}

/* ── Progress bar ───────────────────────────────────────────────────── */
.prog-track {
    height: 5px;
    background: var(--gl);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.prog-fill {
    height: 100%;
    background: var(--g);
    border-radius: 3px;
    transition: width .4s ease;
}

/* ── Check circle ───────────────────────────────────────────────────── */
.circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    cursor: pointer;
    background: var(--white);
}

.circle.on { background: var(--g); border-color: var(--g); color: white; }

/* ── List item row ──────────────────────────────────────────────────── */
.item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--border);
    cursor: pointer;
}

.item-row:last-child { border-bottom: none; }
.item-label { flex: 1; font-size: 15px; color: var(--dark); transition: all .15s; }
.item-label.done { color: var(--muted); text-decoration: line-through; }
.item-qty { font-size: 13px; color: var(--muted); flex-shrink: 0; }

/* ── Upload zone ────────────────────────────────────────────────────── */
.upload-zone {
    border: 2px dashed var(--gm);
    border-radius: var(--radius);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all .2s;
    background: var(--white);
    margin-bottom: 14px;
}

.upload-zone:hover, .upload-zone.drag {
    background: var(--gl);
    border-color: var(--g);
}

/* InputFile must be full-size and transparent so clicks on the visual zone hit the file input */
/* Blazor InputFile sits inside the zone — cover it with opacity:0 */
.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-zone i.big {
    font-size: 48px;
    color: var(--g);
    display: block;
    margin-bottom: 12px;
}

.upload-zone h3 { font-size: 17px; font-weight: 500; color: var(--dark); margin-bottom: 6px; }
.upload-zone p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── AI status bar ──────────────────────────────────────────────────── */
.ai-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--gl);
    border-radius: var(--radiuss);
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--g);
    font-weight: 500;
}

.ai-bar.err { background: var(--redl); color: var(--red); }

/* ── Category heading ───────────────────────────────────────────────── */
.cat-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 18px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cat-head i { font-size: 14px; }

/* ── Stat row ───────────────────────────────────────────────────────── */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border);
    font-size: 14px;
}

.stat-row:last-child { border-bottom: none; }
.stat-l { color: var(--muted); display: flex; align-items: center; gap: 7px; }
.stat-v { font-weight: 500; color: var(--dark); }

/* ── Category bar (Insights) ────────────────────────────────────────── */
.cat-bar { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.cat-bar-lbl { font-size: 13px; color: var(--dark); width: 100px; flex-shrink: 0; }
.cat-bar-track { flex: 1; height: 7px; background: var(--gl); border-radius: 4px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 4px; background: var(--g); }
.cat-bar-val { font-size: 13px; font-weight: 500; color: var(--dark); width: 46px; text-align: right; flex-shrink: 0; }

/* ── Store pill ─────────────────────────────────────────────────────── */
.store-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    border: 0.5px solid var(--border2);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin: 3px;
    transition: all .15s;
    font-family: 'DM Sans', sans-serif;
    color: var(--dark);
}

.store-pill.on { background: var(--g); color: white; border-color: var(--g); }

/* ── List card ──────────────────────────────────────────────────────── */
.list-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 0.5px solid var(--border);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .1s;
}

.list-card:active { transform: scale(0.98); }

.list-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--gl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--g);
    flex-shrink: 0;
}

.list-info { flex: 1; min-width: 0; }
.list-name { font-size: 16px; font-weight: 500; color: var(--dark); }
.list-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ── Hero card ──────────────────────────────────────────────────────── */
.hero-card {
    background: var(--g);
    color: white;
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 14px;
    cursor: pointer;
}

.hero-card h3 { font-size: 13px; opacity: .75; margin-bottom: 4px; font-weight: 400; }
.hero-card .big { font-size: 38px; font-weight: 600; font-family: 'DM Serif Display', serif; line-height: 1; }
.hero-card .sub { font-size: 13px; opacity: .75; margin-top: 6px; }

/* ── 2-col grid ─────────────────────────────────────────────────────── */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

/* ── 3-col grid ─────────────────────────────────────────────────────── */
.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.metric {
    background: var(--white);
    border-radius: var(--radiuss);
    border: 0.5px solid var(--border);
    padding: 14px;
    text-align: center;
}

.metric .ml { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.metric .mv { font-size: 24px; font-weight: 600; margin-top: 4px; }

/* Three metrics share a phone-width row, so the tile tightens up to keep
   four-figure amounts on one line. */
.grid3 .metric { padding: 12px 6px; }
.grid3 .metric .ml { font-size: 10px; letter-spacing: .04em; }
.grid3 .metric .mv { font-size: 18px; }

/* ── Avatar ─────────────────────────────────────────────────────────── */
.av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    border: 2px solid var(--white);
    margin-left: -6px;
}

/* ── Paywall plan card ──────────────────────────────────────────────── */
.plan-card {
    background: var(--white);
    border-radius: var(--radiuss);
    border: 1.5px solid var(--border);
    padding: 18px;
    cursor: pointer;
    transition: border-color .15s;
}

.plan-card.selected { border-color: var(--g); }

/* ── Image preview ──────────────────────────────────────────────────── */
.img-preview {
    width: 100%;
    border-radius: var(--radiuss);
    object-fit: contain;
    max-height: 260px;
    display: block;
    background: #000;
}

/* ── Tip ────────────────────────────────────────────────────────────── */
.tip {
    background: var(--amberl);
    border-radius: var(--radiuss);
    padding: 13px 16px;
    font-size: 13px;
    color: var(--amber);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
}

/* ── Unplanned item ─────────────────────────────────────────────────── */
.unplan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--border);
    font-size: 14px;
}

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

/* ── Member row ─────────────────────────────────────────────────────── */
.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border);
}

.member-row:last-child { border-bottom: none; }

/* ── Fade-in animation ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fadein { animation: fadeUp .3s ease both; }

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast {
    position: absolute;
    bottom: 100px;
    left: 20px;
    right: 20px;
    background: var(--dark);
    color: white;
    border-radius: var(--radiusxs);
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    z-index: 300;
    display: none;
    animation: toastIn .3s ease;
}

.toast.toast-show { display: block; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Form elements ──────────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=password] {
    width: 100%;
    padding: 13px 16px;
    border: 0.5px solid var(--border2);
    border-radius: var(--radiusxs);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--dark);
    background: var(--white);
    outline: none;
    margin-bottom: 10px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus { border-color: var(--g); }

textarea {
    width: 100%;
    padding: 13px 16px;
    border: 0.5px solid var(--border2);
    border-radius: var(--radiusxs);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--dark);
    background: var(--white);
    outline: none;
    resize: none;
    height: 80px;
    margin-bottom: 10px;
}

textarea:focus { border-color: var(--g); }

/* ── Utility: row between ───────────────────────────────────────────── */
.row-between { display: flex; justify-content: space-between; align-items: center; }

/* ── Avatar stack & color variants ─────────────────────────────────── */
.avatar-stack { margin-left: auto; display: flex; }
.avatar-green { background: var(--g); margin-left: 0; }
.avatar-green-mid { background: var(--gm); }
.avatar-large { width: 40px; height: 40px; font-size: 15px; margin-left: 0; border: none; }

/* ── Button variants ────────────────────────────────────────────────── */
.btn-link {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--g);
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    font-weight: 500;
}

.btn-compact { width: auto; padding: 10px 16px; font-size: 14px; }

.btn-trial {
    background: white;
    color: var(--g);
    border: none;
    border-radius: 12px;
    padding: 13px 24px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
}

/* ── Image containers ───────────────────────────────────────────────── */
.image-wrap { border-radius: var(--radiuss); overflow: hidden; background: #000; margin-bottom: 14px; }
.image-wrap-relative { position: relative; border-radius: var(--radiuss); overflow: hidden; background: #000; margin-bottom: 14px; }

.image-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Or-divider ─────────────────────────────────────────────────────── */
.or-divider { text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0; position: relative; }
.or-divider-text { background: var(--cream); padding: 0 12px; position: relative; z-index: 1; }
.or-divider-line { position: absolute; top: 50%; left: 0; right: 0; height: 0.5px; background: var(--border2); }

/* ── Icon sizes ─────────────────────────────────────────────────────── */
.icon-xs { font-size: 11px; }
.icon-sm { font-size: 18px; }

/* ── Color utilities ────────────────────────────────────────────────── */
.metric-value-green { color: var(--g); }
.metric-value-amber { color: var(--amber); }
.metric-value-muted { color: var(--muted); }
.stat-value-green { font-weight: 500; color: var(--g); }
.stat-value-amber { font-weight: 500; color: var(--amber); }
.price-amber { font-weight: 500; color: var(--amber); }
.chevron { color: var(--muted); font-size: 18px; }
.text-error { color: var(--red); }

/* ── Label: no top margin ───────────────────────────────────────────── */
.label-first { margin-top: 0; }

/* ── Home screen greeting ───────────────────────────────────────────── */
.greeting { padding: 4px 0 16px; }
.greeting-title { font-size: 30px; color: var(--dark); line-height: 1.15; }
.greeting-subtitle { font-size: 14px; color: var(--muted); margin-top: 5px; }

/* ── Empty state card ───────────────────────────────────────────────── */
.card-empty { text-align: center; padding: 32px; color: var(--muted); }

/* ── Large topbar title (serif screens) ─────────────────────────────── */
.topbar-title-large { font-size: 24px; color: var(--dark); flex: 1; }

/* ── Scan result title ──────────────────────────────────────────────── */
.scan-title { font-size: 20px; color: var(--dark); }

/* ── Household member ───────────────────────────────────────────────── */
.member-info { flex: 1; }
.member-name { font-size: 15px; font-weight: 500; color: var(--dark); }
.member-role { font-size: 13px; color: var(--muted); }

/* ── Receipt result ─────────────────────────────────────────────────── */
.receipt-header { font-size: 16px; font-weight: 500; color: var(--dark); }
.receipt-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.section-separator { border-top: 0.5px solid var(--border); margin-top: 8px; padding-top: 12px; }
.section-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* ── Email receipt card ─────────────────────────────────────────────── */
.mail-icon { font-size: 26px; color: var(--g); margin-bottom: 6px; display: block; }
.mail-title { font-size: 14px; font-weight: 500; color: var(--dark); }
.mail-address { font-size: 14px; color: var(--g); font-weight: 500; margin-top: 2px; }
.mail-subtitle { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Premium upsell card ────────────────────────────────────────────── */
.card-premium { background: var(--g); border: none; text-align: center; padding: 22px; }
.card-premium-eyebrow { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.card-premium-title { font-size: 22px; color: white; margin-bottom: 4px; }
.card-premium-description { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 18px; }

/* ── Paywall ────────────────────────────────────────────────────────── */
.paywall-hero { text-align: center; margin-bottom: 26px; }
.paywall-icon {
    width: 68px;
    height: 68px;
    background: var(--gl);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 30px;
    color: var(--g);
}
.paywall-heading { font-size: 28px; color: var(--dark); margin-bottom: 8px; }
.paywall-subtitle { font-size: 15px; color: var(--muted); line-height: 1.55; }
.paywall-disclaimer { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.badge-best-value { background: var(--g); color: white; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; margin-bottom: 10px; display: inline-block; }
.plan-price { font-size: 24px; font-weight: 600; }
.plan-price-green { color: var(--g); }
.plan-price-dark { color: var(--dark); }
.plan-period { font-size: 12px; color: var(--muted); }
.plan-monthly-equiv { font-size: 12px; color: var(--g); margin-top: 5px; font-weight: 500; }
.plan-cancel-note { font-size: 12px; color: var(--muted); margin-top: 5px; }
.plan-spacer { height: 23px; }
.feature-value { font-size: 13px; font-weight: 500; color: var(--g); }

/* ── Login screen ───────────────────────────────────────────────────── */
.login-scroll { padding-top: 36px; }
.login-hero { text-align: center; margin-bottom: 30px; }
.login-heading { font-size: 30px; color: var(--dark); margin-bottom: 8px; }
.login-subtitle { font-size: 15px; color: var(--muted); line-height: 1.55; }

.field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 6px;
}

/* Wrapper positions the eye toggle inside the password input */
.password-wrap { position: relative; }

.password-wrap input {
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--muted);
    cursor: pointer;
}

.login-options { margin-bottom: 18px; }

.remember-me {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.remember-me input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--g);
    cursor: pointer;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--redl);
    color: var(--red);
    font-size: 13px;
    padding: 11px 14px;
    border-radius: var(--radiusxs);
    margin-bottom: 14px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 12px;
    color: var(--muted);
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: var(--border2);
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    background: var(--white);
    border: 0.5px solid var(--border2);
    border-radius: var(--radiuss);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
}

.btn-social:active { transform: scale(0.98); }
.btn-social i { font-size: 18px; }

.login-footer {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 22px;
}

/* ── Inline row editing (scan review screens) ───────────────────────── */
/* Compact fields used to correct AI-read names, quantities, and prices in
   place. The `input.` prefix is required: the global input[type=text] rule
   sets full width, tall padding, and a bottom margin, and a bare class
   selector loses to it on specificity. */
input.edit-field {
    width: auto;
    padding: 8px 10px;
    margin: 0;
    border: 0.5px solid var(--border2);
    border-radius: var(--radiusxs);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--dark);
    background: var(--white);
    outline: none;
}

input.edit-field:focus { border-color: var(--g); }
input.edit-field-name { flex: 1; min-width: 0; }
input.edit-field-qty { width: 62px; flex-shrink: 0; text-align: center; }
input.edit-field-price { width: 88px; flex-shrink: 0; text-align: right; }

/* Pencil / check affordance at the end of an editable row. */
.row-edit-btn {
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
    font-size: 16px;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.row-edit-btn.on { color: var(--g); }
.row-edit-btn:active { transform: scale(0.92); }

/* Rows swap their tap action (check-off / edit) for text entry while editing. */
.item-row.editing,
.unplan.editing { cursor: default; gap: 8px; }

/* ── Receipt line items ─────────────────────────────────────────────── */
.unplan { gap: 10px; }
.unplan-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.unplan-name .ti { color: var(--amber); font-size: 13px; flex-shrink: 0; }
.price-plain { font-weight: 500; color: var(--dark); flex-shrink: 0; }
.unplan .price-amber { flex-shrink: 0; }

/* Decorative pencil on a row whose whole surface opens the editor. */
.row-edit-icon { color: var(--border2); font-size: 15px; flex-shrink: 0; }
.edit-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* ── Demo stage (web only) ──────────────────────────────────────────── */
/* Chrome around the device frame on /plenkin: the back link out of the demo,
   stacked above the phone and aligned to its left edge. This sits on the page
   background outside the frame, which the web host paints white. Rendered only
   by the web host — the MAUI app shows the same DeviceShell with nothing
   around it, since there is no launch page there to go back to. */
.demo-stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.demo-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 50px 13px;
    margin-bottom: 50px;
    border-radius: 999px;
    border: 1px solid var(--border2);
    background: var(--white);
    color: var(--dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    position: absolute;
    top: 50px;
}

.demo-back:hover {
    background: var(--gl);
    border-color: var(--gm);
    color: var(--g2);
}

.demo-back:focus-visible {
    outline: 2px solid var(--g);
    outline-offset: 3px;
}

.demo-back-arrow {
    font-size: 16px;
    line-height: 1;
}

/* ── Mobile responsive overrides ────────────────────────────────────── */
/* On viewports ≤768px the device frame expands to fill the full screen,
   removing the rounded corners and box shadow so it looks native rather
   than a phone-in-phone preview. */
@media (max-width: 768px) {
    .main-content {
        padding: 2rem;
    }

    .device {
        width: 100%;
        height: 85vh;
        border-radius: 0;
        box-shadow: none;
    }

    /* The frame goes full-bleed here, so the stage has to as well or the
       device would be laid out at its own intrinsic width. */
    .demo-stage {
        align-self: stretch;
        width: 100%;
    }
}