:root {
    --ink: #17221c;
    --muted: #68746d;
    --paper: #f4f6f2;
    --surface: #ffffff;
    --green: #146c43;
    --green-dark: #0b4f31;
    --lime: #cfe86b;
    --line: #e4e9e5;
    --danger: #c83b48;
    --shadow: 0 14px 40px rgba(28, 53, 39, .08);
}

html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

.app-header {
    background: rgba(244, 246, 242, .9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(23, 34, 28, .06);
}
.brand { color: var(--ink); }
.brand-mark {
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--green); color: #fff; border-radius: 14px; font-size: 1.2rem;
    box-shadow: 0 8px 22px rgba(20, 108, 67, .24);
}
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand small { color: var(--muted); font-size: .72rem; margin-top: 3px; }
.app-main { padding-top: 18px; padding-bottom: 40px; }

.budget-card {
    position: relative; overflow: hidden;
    padding: 24px; border-radius: 24px; color: #fff;
    background: radial-gradient(circle at 100% 0, rgba(207,232,107,.35), transparent 35%), linear-gradient(135deg, var(--green-dark), var(--green));
    box-shadow: 0 18px 45px rgba(11, 79, 49, .2);
}
.budget-card h1 { font-weight: 750; letter-spacing: -2px; }
.budget-progress { height: 9px; background: rgba(255,255,255,.2); }
.budget-progress .progress-bar { background: var(--lime); border-radius: 99px; transition: width .35s ease, background-color .2s ease; }
.budget-progress .progress-bar.danger { background: #ff8f99; }

.eyebrow { display: block; font-size: .69rem; font-weight: 800; letter-spacing: .13em; color: var(--muted); margin-bottom: 4px; }
.scan-card, .surface-card {
    background: var(--surface); border: 1px solid rgba(23,34,28,.06); border-radius: 22px; box-shadow: var(--shadow);
}
.scan-card { padding: 22px; }
.scan-copy h2, .section-heading h2 { font-size: 1.35rem; font-weight: 750; letter-spacing: -.025em; margin: 0; }
.scan-copy p { color: var(--muted); margin: 8px 0 18px; max-width: 52ch; }
.surface-card { padding: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.count-pill { border-radius: 999px; padding: 6px 10px; background: #eef4ef; color: var(--green-dark); font-weight: 700; font-size: .78rem; white-space: nowrap; }

.btn { font-weight: 700; border-radius: 13px; }
.btn-success { background: var(--green); border-color: var(--green); }
.btn-success:hover, .btn-success:focus { background: var(--green-dark); border-color: var(--green-dark); }
.btn-soft { background: #eff3ef; color: var(--ink); border: 1px solid #e1e8e2; }
.quick-add-form { display: grid; grid-template-columns: 1fr 52px; gap: 8px; }
.form-control, .input-group-text { border-color: #dfe6e0; border-radius: 13px; }
.form-control:focus { border-color: rgba(20,108,67,.5); box-shadow: 0 0 0 .22rem rgba(20,108,67,.12); }

.item-list { display: grid; gap: 10px; }
.item-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.item-row.completed .item-name { text-decoration: line-through; color: #8a958e; }
.item-check { width: 25px; height: 25px; flex: 0 0 auto; accent-color: var(--green); cursor: pointer; }
.item-info { min-width: 0; flex: 1; }
.item-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { color: var(--muted); font-size: .75rem; }
.item-price { font-weight: 800; white-space: nowrap; }
.delete-item { color: #9a504f; border: 0; background: transparent; padding: 7px; border-radius: 9px; }
.delete-item:hover { background: #fff0f0; color: var(--danger); }
.empty-state { text-align: center; display: grid; justify-items: center; color: var(--muted); padding: 28px 12px 16px; }
.empty-state i { font-size: 2rem; color: #91a097; margin-bottom: 8px; }
.empty-state strong { color: var(--ink); }
.empty-state span { font-size: .86rem; margin-top: 3px; }

.mobile-nav {
    position: fixed; z-index: 1025; bottom: 0; left: 0; right: 0;
    height: calc(68px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.96); backdrop-filter: blur(18px); border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -10px 28px rgba(23,34,28,.07);
}
.mobile-nav a, .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #69756e; font-size: .68rem; font-weight: 700; text-decoration: none; border: 0; background: transparent; }
.mobile-nav i { font-size: 1.25rem; }
.scan-nav { width: 46px; height: 46px; margin-top: -25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(20,108,67,.32); border: 4px solid #fff; }
.scan-nav i { font-size: 1.05rem; }

.modal-content { border: 0; border-radius: 22px; box-shadow: 0 25px 70px rgba(0,0,0,.18); }
.scanner-modal .modal-content { border-radius: 0; }
.scanner-stage { position: relative; min-height: 100dvh; overflow: hidden; }
#cameraVideo { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.scanner-shade { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.34); }
.scanner-frame { position: relative; width: min(88vw, 640px); aspect-ratio: 2.4 / 1; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); }
.scanner-frame span { position: absolute; width: 32px; height: 32px; border-color: var(--lime); border-style: solid; }
.scanner-frame span:nth-child(1) { top:-2px; left:-2px; border-width:4px 0 0 4px; }
.scanner-frame span:nth-child(2) { top:-2px; right:-2px; border-width:4px 4px 0 0; }
.scanner-frame span:nth-child(3) { bottom:-2px; left:-2px; border-width:0 0 4px 4px; }
.scanner-frame span:nth-child(4) { bottom:-2px; right:-2px; border-width:0 4px 4px 0; }
.scanner-actions { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); display: grid; justify-items: center; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.scanner-actions p { text-align: center; font-size: .84rem; color: rgba(255,255,255,.78); }
.capture-button { width: 72px; height: 72px; border-radius: 50%; padding: 6px; background: transparent; border: 3px solid #fff; }
.capture-button span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; }
.camera-error { position:absolute; inset:0; z-index:3; display:grid; place-content:center; justify-items:center; text-align:center; padding:32px; background:#111; }
.camera-error i { font-size:3rem; margin-bottom:10px; }
.camera-error span { color:#aaa; max-width:32ch; }
.ocr-loading { min-height: 230px; display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.ocr-loading span { color: var(--muted); font-size: .85rem; }
.price-confirm .form-control { font-size: 1.7rem; font-weight: 800; }
.price-options { display: flex; gap: 8px; overflow-x: auto; }
.price-option { white-space: nowrap; border: 1px solid #dce5de; background: #f6f8f6; border-radius: 10px; padding: 7px 10px; font-weight: 700; }
.recognized-text { border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: .82rem; }
.recognized-text pre { white-space: pre-wrap; margin: 8px 0 0; max-height: 130px; overflow: auto; background: #f6f8f6; border-radius: 10px; padding: 10px; }

@media (min-width: 768px) {
    .app-main { padding-top: 28px; }
    .budget-card { padding: 30px; }
    .scan-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px 28px; }
    .scan-copy p { margin-bottom: 0; }
    .scan-card .d-grid { min-width: 360px; }
}
@media (min-width: 992px) {
    body { padding-bottom: 0; }
    .app-main { max-width: 1120px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }